@carbon/charts
Version:
Carbon charting components
175 lines • 11.6 kB
JavaScript
import { getParameters } from 'codesandbox/lib/api/define';
var packageJSON = require('/charts/package.json');
var libraryVersion = packageJSON.version;
var carbonComponentsVersion = packageJSON.devDependencies['carbon-components'];
var ibmPlexFontCSS = "@import \"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed|IBM+Plex+Sans:400,600&display=swap\";\n";
export var createChartSandbox = function (chartTemplate) {
var files = {};
Object.keys(chartTemplate).forEach(function (filePath) { return (files[filePath] = { content: chartTemplate[filePath] }); });
return "https://codesandbox.io/api/v1/sandboxes/define?parameters=" + getParameters({ files: files });
};
export var createVanillaChartApp = function (demo) {
var chartData = JSON.stringify(demo.data, null, '\t');
var chartOptions = JSON.stringify(demo.options, null, '\t');
var chartComponent = demo.chartType.vanilla;
var indexHtml = "<html>\n\t<head>\n\t\t<title>Parcel Sandbox</title>\n\t\t<meta charset=\"UTF-8\" />\n\t\t<link href=\"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed|IBM+Plex+Sans:400,600&display=swap\" rel=\"stylesheet\">\n\t</head>\n\t<body>\n\t\t<div id=\"app\" style=\"width: 100%; height: 100%;\"></div>\n\n\t\t<script src=\"src/index.js\"></script>\n\t</body>\n</html>";
var indexJs = "import \"@carbon/charts/styles.css\";\nimport { " + chartComponent + " } from \"@carbon/charts\";\n\nconst data = " + chartData + ";\n\nconst options = " + chartOptions + ";\n\n// Grab chart holder HTML element and initialize the chart\nconst chartHolder = document.getElementById(\"app\");\nnew " + chartComponent + "(chartHolder, {\n\tdata,\n\toptions\n});\n";
var packageJson = {
scripts: {
start: 'parcel index.html --open',
build: 'parcel build index.html',
},
dependencies: {
'/charts': libraryVersion,
'carbon-components': carbonComponentsVersion,
d3: '5.9.2',
},
devDependencies: {
'parcel-bundler': '^1.6.1',
},
};
return {
'index.html': indexHtml,
'src/index.js': indexJs,
'package.json': packageJson,
};
};
export var createReactChartApp = function (demo) {
var chartData = JSON.stringify(demo.data, null, '\t');
var chartOptions = JSON.stringify(demo.options, null, '\t');
var chartComponent = demo.chartType.vanilla;
var indexHtml = "<div id=\"root\"></div>\n ";
var indexJs = "import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { " + chartComponent + " } from \"@carbon/charts-react\";\nimport \"@carbon/charts/styles.css\";\n// Or\n// import \"@carbon/charts/styles/styles.scss\";\n\n// IBM Plex should either be imported in your project by using Carbon\n// or consumed manually through an import\nimport \"./ibm-plex-font.css\";\n\nclass App extends React.Component {\n\tstate = {\n\t\tdata: " + chartData + ",\n\t\toptions: " + chartOptions + "\n\t};\n\n\trender = () => (\n\t\t<" + chartComponent + "\n\t\t\tdata={this.state.data}\n\t\t\toptions={this.state.options}>\n\t\t</" + chartComponent + ">\n\t);\n}\nReactDOM.render(<App />, document.getElementById(\"root\"));\n ";
var packageJson = {
dependencies: {
'/charts': libraryVersion,
'/charts-react': libraryVersion,
d3: '5.12.0',
react: '16.12.0',
'react-dom': '16.12.0',
'react-scripts': '3.0.1',
'carbon-components': carbonComponentsVersion,
},
};
return {
'src/index.html': indexHtml,
'src/index.js': indexJs,
'src/ibm-plex-font.css': ibmPlexFontCSS,
'package.json': packageJson,
};
};
export var createAngularChartApp = function (demo) {
var chartData = JSON.stringify(demo.data, null, '\t\t');
var chartOptions = JSON.stringify(demo.options, null, '\t\t');
var chartComponent = demo.chartType.angular;
var appComponentHtml = "<" + chartComponent + " [data]=\"data\" [options]=\"options\"></" + chartComponent + ">";
var appComponentTs = "import { Component } from \"@angular/core\";\n\nimport \"@carbon/charts/styles.css\";\n\n// IBM Plex should either be imported in your project by using Carbon\n// or consumed manually through an import\nimport \"./ibm-plex-font.css\";\n\n@Component({\n\tselector: \"app-root\",\n\ttemplateUrl: \"./app.component.html\"\n})\nexport class AppComponent {\n\tdata = " + chartData + ";\n\toptions = " + chartOptions + ";\n}";
var appModule = "import { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { ChartsModule } from \"@carbon/charts-angular\";\nimport { AppComponent } from \"./app.component\";\n@NgModule({\n\timports: [BrowserModule, ChartsModule],\n\tdeclarations: [AppComponent],\n\tbootstrap: [AppComponent]\n})\nexport class AppModule {}";
var indexHtml = "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>Angular</title>\n\t</head>\n\t<body>\n\t\t<app-root></app-root>\n\t</body>\n</html>";
var mainTs = "import { platformBrowserDynamic } from \"@angular/platform-browser-dynamic\";\nimport { AppModule } from \"./app/app.module\";\nplatformBrowserDynamic()\n\t.bootstrapModule(AppModule)\n\t.catch(err => console.log(err));\n";
var angularCliJson = "{\n\t\"apps\": [\n\t\t{\n\t\t\t\"root\": \"src\",\n\t\t\t\"outDir\": \"dist\",\n\t\t\t\"assets\": [\"assets\", \"favicon.ico\"],\n\t\t\t\"index\": \"index.html\",\n\t\t\t\"main\": \"main.ts\",\n\t\t\t\"polyfills\": \"polyfills.ts\",\n\t\t\t\"prefix\": \"app\",\n\t\t\t\"styles\": [\"styles.css\"],\n\t\t\t\"scripts\": [],\n\t\t\t\"environmentSource\": \"environments/environment.ts\",\n\t\t\t\"environments\": {\n\t\t\t\t\"dev\": \"environments/environment.ts\",\n\t\t\t\t\"prod\": \"environments/environment.prod.ts\"\n\t\t\t}\n\t\t}\n\t]\n}";
var packageJson = JSON.stringify({
dependencies: {
'/animations': '8.2.14',
'/common': '8.2.14',
'/compiler': '8.2.14',
'/core': '8.2.14',
'/forms': '8.2.14',
'/platform-browser': '8.2.14',
'/platform-browser-dynamic': '8.2.14',
'/router': '8.2.14',
'/charts': libraryVersion,
'/charts-angular': libraryVersion,
'core-js': '3.6.0',
d3: '5.15.0',
rxjs: '6.5.3',
'zone.js': '0.10.2',
},
}, null, '\t');
return {
'src/index.html': indexHtml,
'src/main.ts': mainTs,
'src/app/app.component.html': appComponentHtml,
'src/app/app.component.ts': appComponentTs,
'src/app/ibm-plex-font.css': ibmPlexFontCSS,
'src/app/app.module.ts': appModule,
'.angular-cli.json': angularCliJson,
'package.json': packageJson,
};
};
export var createVueChartApp = function (demo) {
var chartData = JSON.stringify(demo.data, null, '\t\t');
var chartOptions = JSON.stringify(demo.options, null, '\t\t');
var chartComponent = demo.chartType.vue;
var chartVue = "<script>\nimport Vue from \"vue\";\nimport \"@carbon/charts/styles.css\";\nimport chartsVue from \"@carbon/charts-vue\";\n\n// IBM Plex should either be imported in your project by using Carbon\n// or consumed manually through an import\nimport \"../ibm-plex-font.css\";\n\nVue.use(chartsVue);\n\nexport default {\n\tname: \"Chart\",\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\tdata: " + chartData + ",\n\t\t\toptions: " + chartOptions + "\n\t\t};\n\t},\n\ttemplate: \"<" + chartComponent + " :data='data' :options='options'></" + chartComponent + ">\"\n};\n</script>\n ";
var appVue = "<template>\n\t<div id=\"app\">\n\t\t<Chart/>\n\t</div>\n</template>\n<script>\nimport Chart from \"./components/chart\";\nexport default {\n\tname: \"App\",\n\tcomponents: {\n\t\tChart\n\t}\n};\n</script>\n ";
var mainJs = "import Vue from \"vue\";\nimport App from \"./App.vue\";\nVue.config.productionTip = false;\nnew Vue({\n\trender: h => h(App)\n}).$mount(\"#app\");\n";
var packageJson = JSON.stringify({
dependencies: {
'/charts': libraryVersion,
'/charts-vue': libraryVersion,
'/cli-plugin-babel': '4.1.1',
'carbon-components': carbonComponentsVersion,
d3: '5.15.0',
vue: '^2.6.11',
},
}, null, '\t\t');
return {
'src/components/chart.vue': chartVue,
'src/ibm-plex-font.css': ibmPlexFontCSS,
'src/App.vue': appVue,
'src/main.js': mainJs,
'package.json': packageJson,
};
};
export var createSvelteChartApp = function (demo) {
var chartData = JSON.stringify(demo.data, null, '\t');
var chartOptions = JSON.stringify(demo.options, null, '\t');
var chartComponent = demo.chartType.vanilla;
switch (chartComponent) {
case 'SimpleBarChart':
chartComponent = 'BarChartSimple';
break;
case 'GroupedBarChart':
chartComponent = 'BarChartGrouped';
break;
case 'StackedBarChart':
chartComponent = 'BarChartStacked';
break;
}
var indexJs = "import App from \"./App.svelte\";\n\nconst app = new App({ target: document.body });\n\nexport default app;\n";
var App = "<script>\n import { " + chartComponent + " } from \"@carbon/charts-svelte\";\n</script>\n\n<svelte:head>\n <link rel=\"stylesheet\" href=\"https://unpkg.com/@carbon/charts/styles.min.css\" />\n</svelte:head>\n\n<" + chartComponent + "\n\tdata={" + chartData + "}\n\toptions={" + chartOptions + "}\n\t/>\n";
var packageJson = {
scripts: {
build: 'rollup -c',
autobuild: 'rollup -c -w',
dev: 'run-p start:dev autobuild',
start: 'sirv public',
'start:dev': 'sirv public --dev',
},
devDependencies: {
'npm-run-all': '^4.1.5',
rollup: '^1.10.1',
'rollup-plugin-commonjs': '^9.3.4',
'rollup-plugin-node-resolve': '^4.2.3',
'rollup-plugin-svelte': '^5.0.3',
'rollup-plugin-terser': '^4.0.4',
'sirv-cli': '^0.3.1',
},
dependencies: {
'/charts': libraryVersion,
'/charts-svelte': libraryVersion,
'carbon-components': carbonComponentsVersion,
d3: '5.12.0',
svelte: '3.20.x',
},
};
var rollup = "import svelte from \"rollup-plugin-svelte\";\nimport resolve from \"rollup-plugin-node-resolve\";\nimport commonjs from \"rollup-plugin-commonjs\";\nimport { terser } from \"rollup-plugin-terser\";\nimport postcss from \"rollup-plugin-postcss\";\n\nconst production = !process.env.ROLLUP_WATCH;\n\nexport default {\n input: \"index.js\",\n output: {\n sourcemap: true,\n format: \"iife\",\n name: \"app\",\n file: \"public/bundle.js\"\n },\n plugins: [\n postcss(),\n svelte({\n dev: !production,\n css: css => {\n css.write(\"public/bundle.css\");\n }\n }),\n resolve(),\n commonjs(),\n production && terser()\n ]\n};\n";
return {
'App.svelte': App,
'index.js': indexJs,
'package.json': packageJson,
'rollup.config.js': rollup,
};
};
//# sourceMappingURL=../../demo/create-codesandbox.js.map