@carbon/charts 1.0.3 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/build/demo/create-codesandbox.d.ts +3 -11
  3. package/bundle.js +1 -1
  4. package/demo/create-codesandbox.d.ts +3 -11
  5. package/demo/create-codesandbox.js +11 -25
  6. package/demo/create-codesandbox.js.map +1 -1
  7. package/demo/data/bundle.js +1 -1
  8. package/demo/styles.css +4870 -3182
  9. package/demo/styles.css.map +1 -1
  10. package/demo/styles.min.css +1 -1
  11. package/demo/styles.min.css.map +1 -1
  12. package/demo/tsconfig.tsbuildinfo +2 -2
  13. package/model/heatmap.js +6 -2
  14. package/model/heatmap.js.map +1 -1
  15. package/package.json +3 -3
  16. package/styles/_chart-holder.scss +3 -3
  17. package/tsconfig.tsbuildinfo +1 -1
package/demo/create-codesandbox.d.ts CHANGED
@@ -2,7 +2,6 @@ export declare const createChartSandbox: (chartTemplate: any) => string;
2
2
  export declare const createVanillaChartApp: (demo: any) => {
3
3
  'index.html': string;
4
4
  'src/index.js': string;
5
- 'src/carbon-styles.scss': string;
6
5
  'package.json': {
7
6
  scripts: {
8
7
  start: string;
@@ -10,8 +9,6 @@ export declare const createVanillaChartApp: (demo: any) => {
10
9
  };
11
10
  dependencies: {
12
11
  '@carbon/charts': any;
13
- '@carbon/colors': any;
14
- '@carbon/styles': any;
15
12
  d3: string;
16
13
  };
17
14
  devDependencies: {
@@ -22,13 +19,11 @@ export declare const createVanillaChartApp: (demo: any) => {
22
19
  export declare const createReactChartApp: (demo: any) => {
23
20
  'src/index.html': string;
24
21
  'src/index.js': string;
25
- 'src/plex-and-carbon-styles.scss': string;
22
+ 'src/ibm-plex-font.css': string;
26
23
  'package.json': {
27
24
  dependencies: {
28
25
  '@carbon/charts': any;
29
26
  '@carbon/charts-react': any;
30
- '@carbon/colors': any;
31
- '@carbon/styles': any;
32
27
  d3: string;
33
28
  react: string;
34
29
  'react-dom': string;
@@ -39,13 +34,13 @@ export declare const createReactChartApp: (demo: any) => {
39
34
  export declare const createAngularChartApp: (demo: any) => {
40
35
  'src/app/app.component.html': string;
41
36
  'src/app/app.component.ts': string;
42
- 'src/app/plex-and-carbon-styles.scss': string;
37
+ 'src/app/ibm-plex-font.css': string;
43
38
  'src/app/app.module.ts': string;
44
39
  'package.json': string;
45
40
  };
46
41
  export declare const createVueChartApp: (demo: any) => {
47
42
  'src/components/chart.vue': string;
48
- 'src/plex-and-carbon-styles.scss': string;
43
+ 'src/ibm-plex-font.css': string;
49
44
  'src/App.vue': string;
50
45
  'src/main.js': string;
51
46
  'package.json': string;
@@ -53,7 +48,6 @@ export declare const createVueChartApp: (demo: any) => {
53
48
  export declare const createSvelteChartApp: (demo: any) => {
54
49
  'App.svelte': string;
55
50
  'index.html': string;
56
- 'plex-and-carbon-styles.scss': string;
57
51
  'package.json': {
58
52
  scripts: {
59
53
  dev: string;
@@ -61,8 +55,6 @@ export declare const createSvelteChartApp: (demo: any) => {
61
55
  };
62
56
  devDependencies: {
63
57
  '@carbon/charts-svelte': any;
64
- '@carbon/colors': any;
65
- '@carbon/styles': any;
66
58
  '@sveltejs/vite-plugin-svelte': string;
67
59
  d3: string;
68
60
  sass: string;
package/demo/create-codesandbox.js CHANGED
@@ -1,9 +1,8 @@
1
1
  import { getParameters } from 'codesandbox/lib/api/define';
2
2
  var packageJSON = require('@carbon/charts/package.json');
3
3
  var libraryVersion = packageJSON.version;
4
- var carbonStylesVersion = packageJSON.dependencies['@carbon/styles'];
5
- var carbonColorsVersion = packageJSON.dependencies['@carbon/colors'];
6
- var plexAndCarbonComponentsSCSS = "@use \"@carbon/styles\";\n\n@import \"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed|IBM+Plex+Sans:400,600&display=swap\";\n";
4
+ var carbonStylesImport = "import \"@carbon/styles/css/styles.css\";";
5
+ var plexCSS = "@import \"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed|IBM+Plex+Sans:400,600&display=swap\";\n";
7
6
  var D3VERSION = '^7.0.0';
8
7
  export var createChartSandbox = function (chartTemplate) {
9
8
  var files = {};
@@ -15,8 +14,7 @@ export var createVanillaChartApp = function (demo) {
15
14
  var chartOptions = JSON.stringify(demo.options, null, '\t');
16
15
  var chartComponent = demo.chartType.vanilla;
17
16
  var indexHtml = "<html>\n\t<head>\n\t\t<title>Parcel Sandbox</title>\n\t\t<meta charset=\"UTF-8\" />\n\t\t<link\n\t\t\trel=\"preconnect\"\n\t\t\tcrossorigin=\"anonymous\"\n\t\t\thref=\"https://fonts.gstatic.com\"\n\t\t/>\n\n\t\t<link\n\t\t\thref=\"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400|IBM+Plex+Sans:400,600&display=swap\"\n\t\t\trel=\"stylesheet\"\n\t\t\tcrossorigin=\"anonymous\"\n\t\t/>\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>";
18
- var indexJs = "import \"./carbon-styles.scss\";\n\nimport \"@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";
19
- var carbonStylesSCSS = "@use \"@carbon/styles\";";
17
+ var indexJs = carbonStylesImport + "\n\nimport \"@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";
20
18
  var packageJson = {
21
19
  scripts: {
22
20
  start: 'parcel index.html --open',
@@ -24,8 +22,6 @@ export var createVanillaChartApp = function (demo) {
24
22
  },
25
23
  dependencies: {
26
24
  '@carbon/charts': libraryVersion,
27
- '@carbon/colors': carbonColorsVersion,
28
- '@carbon/styles': carbonStylesVersion,
29
25
  d3: D3VERSION,
30
26
  },
31
27
  devDependencies: {
@@ -35,7 +31,6 @@ export var createVanillaChartApp = function (demo) {
35
31
  return {
36
32
  'index.html': indexHtml,
37
33
  'src/index.js': indexJs,
38
- 'src/carbon-styles.scss': carbonStylesSCSS,
39
34
  'package.json': packageJson,
40
35
  };
41
36
  };
@@ -44,13 +39,11 @@ export var createReactChartApp = function (demo) {
44
39
  var chartOptions = JSON.stringify(demo.options, null, '\t');
45
40
  var chartComponent = demo.chartType.vanilla;
46
41
  var indexHtml = "<div id=\"root\"></div>\n ";
47
- var indexJs = "import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { " + chartComponent + " } from \"@carbon/charts-react\";\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 \"./plex-and-carbon-styles.scss\";\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 ";
42
+ var indexJs = "import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\n" + carbonStylesImport + "\n\nimport \"@carbon/charts/styles.css\";\nimport { " + chartComponent + " } from \"@carbon/charts-react\";\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 ";
48
43
  var packageJson = {
49
44
  dependencies: {
50
45
  '@carbon/charts': libraryVersion,
51
46
  '@carbon/charts-react': libraryVersion,
52
- '@carbon/colors': carbonColorsVersion,
53
- '@carbon/styles': carbonStylesVersion,
54
47
  d3: D3VERSION,
55
48
  react: '16.12.0',
56
49
  'react-dom': '16.12.0',
@@ -60,7 +53,7 @@ export var createReactChartApp = function (demo) {
60
53
  return {
61
54
  'src/index.html': indexHtml,
62
55
  'src/index.js': indexJs,
63
- 'src/plex-and-carbon-styles.scss': plexAndCarbonComponentsSCSS,
56
+ 'src/ibm-plex-font.css': plexCSS,
64
57
  'package.json': packageJson,
65
58
  };
66
59
  };
@@ -69,7 +62,7 @@ export var createAngularChartApp = function (demo) {
69
62
  var chartOptions = JSON.stringify(demo.options, null, '\t\t');
70
63
  var chartComponent = demo.chartType.angular;
71
64
  var appComponentHtml = "<" + chartComponent + " [data]=\"data\" [options]=\"options\"></" + chartComponent + ">";
72
- 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 \"./plex-and-carbon-styles.scss\";\n\n@Component({\n\tselector: \"app-root\",\n\ttemplateUrl: \"./app.component.html\"\n})\nexport class AppComponent {\n\tdata = " + chartData + ";\n\toptions = " + chartOptions + ";\n}";
65
+ var appComponentTs = "import { Component } from \"@angular/core\";\n\n" + carbonStylesImport + "\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}";
73
66
  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 {}";
74
67
  var packageJson = JSON.stringify({
75
68
  dependencies: {
@@ -83,8 +76,6 @@ export var createAngularChartApp = function (demo) {
83
76
  '@angular/router': '8.2.14',
84
77
  '@carbon/charts': libraryVersion,
85
78
  '@carbon/charts-angular': libraryVersion,
86
- '@carbon/colors': carbonColorsVersion,
87
- '@carbon/styles': carbonStylesVersion,
88
79
  'core-js': '3.6.0',
89
80
  d3: D3VERSION,
90
81
  rxjs: '6.5.3',
@@ -94,7 +85,7 @@ export var createAngularChartApp = function (demo) {
94
85
  return {
95
86
  'src/app/app.component.html': appComponentHtml,
96
87
  'src/app/app.component.ts': appComponentTs,
97
- 'src/app/plex-and-carbon-styles.scss': plexAndCarbonComponentsSCSS,
88
+ 'src/app/ibm-plex-font.css': plexCSS,
98
89
  'src/app/app.module.ts': appModule,
99
90
  'package.json': packageJson,
100
91
  };
@@ -103,15 +94,13 @@ export var createVueChartApp = function (demo) {
103
94
  var chartData = JSON.stringify(demo.data, null, '\t\t');
104
95
  var chartOptions = JSON.stringify(demo.options, null, '\t\t');
105
96
  var chartComponent = demo.chartType.vue;
106
- var chartVue = "<script>\nimport Vue from \"vue\";\n\nimport chartsVue from \"@carbon/charts-vue\";\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 \"../plex-and-carbon-styles.scss\";\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 ";
97
+ var chartVue = "<script>\nimport Vue from \"vue\";\n\n" + carbonStylesImport + "\n\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 ";
107
98
  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 ";
108
99
  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";
109
100
  var packageJson = JSON.stringify({
110
101
  dependencies: {
111
102
  '@carbon/charts': libraryVersion,
112
103
  '@carbon/charts-vue': libraryVersion,
113
- '@carbon/colors': carbonColorsVersion,
114
- '@carbon/styles': carbonStylesVersion,
115
104
  '@vue/cli-plugin-babel': '4.1.1',
116
105
  d3: D3VERSION,
117
106
  vue: '^2.6.11',
@@ -119,7 +108,7 @@ export var createVueChartApp = function (demo) {
119
108
  }, null, '\t\t');
120
109
  return {
121
110
  'src/components/chart.vue': chartVue,
122
- 'src/plex-and-carbon-styles.scss': plexAndCarbonComponentsSCSS,
111
+ 'src/ibm-plex-font.css': plexCSS,
123
112
  'src/App.vue': appVue,
124
113
  'src/main.js': mainJs,
125
114
  'package.json': packageJson,
@@ -140,8 +129,8 @@ export var createSvelteChartApp = function (demo) {
140
129
  chartComponent = 'BarChartStacked';
141
130
  break;
142
131
  }
143
- var indexHtml = "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <link\n rel=\"preconnect\"\n crossorigin=\"anonymous\"\n href=\"https://fonts.gstatic.com\"\n />\n <link\n href=\"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400%7CIBM+Plex+Sans:400,600&display=swap\"\n rel=\"stylesheet\"\n crossorigin=\"anonymous\"\n />\n </head>\n <body>\n <script type=\"module\">\n import App from \"./App.svelte\";\n\n const app = new App({ target: document.body });\n </script>\n </body>\n</html>\n";
144
- var App = "<script>\n\timport { " + chartComponent + " } from \"@carbon/charts-svelte\";\n\n\timport \"@carbon/charts/styles.css\";\n\n\timport \"./plex-and-carbon-styles.scss\";\n</script>\n\n<" + chartComponent + "\n\tdata={" + chartData + "}\n\toptions={" + chartOptions + "}\n\t/>\n";
132
+ var indexHtml = "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n\n <link\n rel=\"preconnect\"\n crossorigin=\"anonymous\"\n href=\"https://fonts.gstatic.com\"\n />\n <link\n href=\"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400%7CIBM+Plex+Sans:400,600&display=swap\"\n rel=\"stylesheet\"\n crossorigin=\"anonymous\"\n />\n </head>\n <body>\n <script type=\"module\">\n import App from \"./App.svelte\";\n\n const app = new App({ target: document.body });\n </script>\n </body>\n</html>\n";
133
+ var App = "<script>\n\timport { " + chartComponent + " } from \"@carbon/charts-svelte\";\n\n\t" + carbonStylesImport + "\n\timport \"@carbon/charts/styles.css\";\n</script>\n\n<" + chartComponent + "\n\tdata={" + chartData + "}\n\toptions={" + chartOptions + "}\n\t/>\n";
145
134
  var packageJson = {
146
135
  scripts: {
147
136
  dev: 'vite',
@@ -149,8 +138,6 @@ export var createSvelteChartApp = function (demo) {
149
138
  },
150
139
  devDependencies: {
151
140
  '@carbon/charts-svelte': libraryVersion,
152
- '@carbon/colors': carbonColorsVersion,
153
- '@carbon/styles': carbonStylesVersion,
154
141
  '@sveltejs/vite-plugin-svelte': 'next',
155
142
  d3: D3VERSION,
156
143
  sass: '1.52.1',
@@ -163,7 +150,6 @@ export var createSvelteChartApp = function (demo) {
163
150
  return {
164
151
  'App.svelte': App,
165
152
  'index.html': indexHtml,
166
- 'plex-and-carbon-styles.scss': plexAndCarbonComponentsSCSS,
167
153
  'package.json': packageJson,
168
154
  'vite.config.js': vite,
169
155
  };
package/demo/create-codesandbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"create-codesandbox.js","sourceRoot":"","sources":["create-codesandbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { getParameters } from 'codesandbox/lib/api/define';\n\nconst packageJSON = require('@carbon/charts/package.json');\nconst libraryVersion = packageJSON.version;\nconst carbonStylesVersion = packageJSON.dependencies['@carbon/styles'];\nconst carbonColorsVersion = packageJSON.dependencies['@carbon/colors'];\n\nconst plexAndCarbonComponentsSCSS = `@use \"@carbon/styles\";\n\n@import \"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed|IBM+Plex+Sans:400,600&display=swap\";\n`;\n\nconst D3VERSION = '^7.0.0';\n\nexport const createChartSandbox = (chartTemplate: any) => {\n\tconst files = {};\n\n\tObject.keys(chartTemplate).forEach(\n\t\t(filePath) => (files[filePath] = { content: chartTemplate[filePath] })\n\t);\n\n\treturn `https://codesandbox.io/api/v1/sandboxes/define?parameters=${getParameters(\n\t\t{ files }\n\t)}`;\n};\n\nexport const createVanillaChartApp = (demo: any) => {\n\tconst chartData = JSON.stringify(demo.data, null, '\\t');\n\tconst chartOptions = JSON.stringify(demo.options, null, '\\t');\n\tconst chartComponent = demo.chartType.vanilla;\n\n\tconst indexHtml = `<html>\n\t<head>\n\t\t<title>Parcel Sandbox</title>\n\t\t<meta charset=\"UTF-8\" />\n\t\t<link\n\t\t\trel=\"preconnect\"\n\t\t\tcrossorigin=\"anonymous\"\n\t\t\thref=\"https://fonts.gstatic.com\"\n\t\t/>\n\n\t\t<link\n\t\t\thref=\"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400|IBM+Plex+Sans:400,600&display=swap\"\n\t\t\trel=\"stylesheet\"\n\t\t\tcrossorigin=\"anonymous\"\n\t\t/>\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>`;\n\n\tconst indexJs = `import \"./carbon-styles.scss\";\n\nimport \"@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`;\n\n\tconst carbonStylesSCSS = `@use \"@carbon/styles\";`;\n\n\tconst packageJson = {\n\t\tscripts: {\n\t\t\tstart: 'parcel index.html --open',\n\t\t\tbuild: 'parcel build index.html',\n\t\t},\n\t\tdependencies: {\n\t\t\t'@carbon/charts': libraryVersion,\n\t\t\t'@carbon/colors': carbonColorsVersion,\n\t\t\t'@carbon/styles': carbonStylesVersion,\n\t\t\td3: D3VERSION,\n\t\t},\n\t\tdevDependencies: {\n\t\t\t'parcel-bundler': '^1.6.1',\n\t\t},\n\t};\n\n\treturn {\n\t\t'index.html': indexHtml,\n\t\t'src/index.js': indexJs,\n\t\t'src/carbon-styles.scss': carbonStylesSCSS,\n\t\t'package.json': packageJson,\n\t};\n};\n\nexport const createReactChartApp = (demo: any) => {\n\tconst chartData = JSON.stringify(demo.data, null, '\\t');\n\tconst chartOptions = JSON.stringify(demo.options, null, '\\t');\n\tconst chartComponent = demo.chartType.vanilla;\n\n\tconst indexHtml = `<div id=\"root\"></div>\n `;\n\n\tconst indexJs = `import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { ${chartComponent} } from \"@carbon/charts-react\";\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 \"./plex-and-carbon-styles.scss\";\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 `;\n\tconst packageJson = {\n\t\tdependencies: {\n\t\t\t'@carbon/charts': libraryVersion,\n\t\t\t'@carbon/charts-react': libraryVersion,\n\t\t\t'@carbon/colors': carbonColorsVersion,\n\t\t\t'@carbon/styles': carbonStylesVersion,\n\t\t\td3: D3VERSION,\n\t\t\treact: '16.12.0',\n\t\t\t'react-dom': '16.12.0',\n\t\t\t'react-scripts': '3.0.1',\n\t\t},\n\t};\n\n\treturn {\n\t\t'src/index.html': indexHtml,\n\t\t'src/index.js': indexJs,\n\t\t'src/plex-and-carbon-styles.scss': plexAndCarbonComponentsSCSS,\n\t\t'package.json': packageJson,\n\t};\n};\n\nexport const createAngularChartApp = (demo: any) => {\n\tconst chartData = JSON.stringify(demo.data, null, '\\t\\t');\n\tconst chartOptions = JSON.stringify(demo.options, null, '\\t\\t');\n\tconst chartComponent = demo.chartType.angular;\n\n\tconst appComponentHtml = `<${chartComponent} [data]=\"data\" [options]=\"options\"></${chartComponent}>`;\n\tconst 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 \"./plex-and-carbon-styles.scss\";\n\n@Component({\n\tselector: \"app-root\",\n\ttemplateUrl: \"./app.component.html\"\n})\nexport class AppComponent {\n\tdata = ${chartData};\n\toptions = ${chartOptions};\n}`;\n\n\tconst 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 {}`;\n\n\tconst packageJson = JSON.stringify(\n\t\t{\n\t\t\tdependencies: {\n\t\t\t\t'@angular/animations': '8.2.14',\n\t\t\t\t'@angular/common': '8.2.14',\n\t\t\t\t'@angular/compiler': '8.2.14',\n\t\t\t\t'@angular/core': '8.2.14',\n\t\t\t\t'@angular/forms': '8.2.14',\n\t\t\t\t'@angular/platform-browser': '8.2.14',\n\t\t\t\t'@angular/platform-browser-dynamic': '8.2.14',\n\t\t\t\t'@angular/router': '8.2.14',\n\t\t\t\t'@carbon/charts': libraryVersion,\n\t\t\t\t'@carbon/charts-angular': libraryVersion,\n\t\t\t\t'@carbon/colors': carbonColorsVersion,\n\t\t\t\t'@carbon/styles': carbonStylesVersion,\n\t\t\t\t'core-js': '3.6.0',\n\t\t\t\td3: D3VERSION,\n\t\t\t\trxjs: '6.5.3',\n\t\t\t\t'zone.js': '0.10.2',\n\t\t\t},\n\t\t},\n\t\tnull,\n\t\t'\\t'\n\t);\n\n\treturn {\n\t\t'src/app/app.component.html': appComponentHtml,\n\t\t'src/app/app.component.ts': appComponentTs,\n\t\t'src/app/plex-and-carbon-styles.scss': plexAndCarbonComponentsSCSS,\n\t\t'src/app/app.module.ts': appModule,\n\t\t'package.json': packageJson,\n\t};\n};\n\nexport const createVueChartApp = (demo: any) => {\n\tconst chartData = JSON.stringify(demo.data, null, '\\t\\t');\n\tconst chartOptions = JSON.stringify(demo.options, null, '\\t\\t');\n\tconst chartComponent = demo.chartType.vue;\n\n\tconst chartVue = `<script>\nimport Vue from \"vue\";\n\nimport chartsVue from \"@carbon/charts-vue\";\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 \"../plex-and-carbon-styles.scss\";\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 `;\n\n\tconst 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 `;\n\n\tconst 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`;\n\n\tconst packageJson = JSON.stringify(\n\t\t{\n\t\t\tdependencies: {\n\t\t\t\t'@carbon/charts': libraryVersion,\n\t\t\t\t'@carbon/charts-vue': libraryVersion,\n\t\t\t\t'@carbon/colors': carbonColorsVersion,\n\t\t\t\t'@carbon/styles': carbonStylesVersion,\n\t\t\t\t'@vue/cli-plugin-babel': '4.1.1',\n\t\t\t\td3: D3VERSION,\n\t\t\t\tvue: '^2.6.11',\n\t\t\t},\n\t\t},\n\t\tnull,\n\t\t'\\t\\t'\n\t);\n\n\treturn {\n\t\t'src/components/chart.vue': chartVue,\n\t\t'src/plex-and-carbon-styles.scss': plexAndCarbonComponentsSCSS,\n\t\t'src/App.vue': appVue,\n\t\t'src/main.js': mainJs,\n\t\t'package.json': packageJson,\n\t};\n};\n\nexport const createSvelteChartApp = (demo: any) => {\n\tconst chartData = JSON.stringify(demo.data, null, '\\t');\n\tconst chartOptions = JSON.stringify(demo.options, null, '\\t');\n\n\tlet chartComponent = demo.chartType.vanilla;\n\n\tswitch (chartComponent) {\n\t\tcase 'SimpleBarChart':\n\t\t\tchartComponent = 'BarChartSimple';\n\t\t\tbreak;\n\t\tcase 'GroupedBarChart':\n\t\t\tchartComponent = 'BarChartGrouped';\n\t\t\tbreak;\n\t\tcase 'StackedBarChart':\n\t\t\tchartComponent = 'BarChartStacked';\n\t\t\tbreak;\n\t}\n\n\tconst indexHtml = `<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <link\n rel=\"preconnect\"\n crossorigin=\"anonymous\"\n href=\"https://fonts.gstatic.com\"\n />\n <link\n href=\"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400%7CIBM+Plex+Sans:400,600&display=swap\"\n rel=\"stylesheet\"\n crossorigin=\"anonymous\"\n />\n </head>\n <body>\n <script type=\"module\">\n import App from \"./App.svelte\";\n\n const app = new App({ target: document.body });\n </script>\n </body>\n</html>\n`;\n\n\tconst App = `<script>\n\timport { ${chartComponent} } from \"@carbon/charts-svelte\";\n\n\timport \"@carbon/charts/styles.css\";\n\n\timport \"./plex-and-carbon-styles.scss\";\n</script>\n\n<${chartComponent}\n\tdata={${chartData}}\n\toptions={${chartOptions}}\n\t/>\n`;\n\n\tconst packageJson = {\n\t\tscripts: {\n\t\t\tdev: 'vite',\n\t\t\tbuild: 'vite build',\n\t\t},\n\t\tdevDependencies: {\n\t\t\t'@carbon/charts-svelte': libraryVersion,\n\t\t\t'@carbon/colors': carbonColorsVersion,\n\t\t\t'@carbon/styles': carbonStylesVersion,\n\t\t\t'@sveltejs/vite-plugin-svelte': 'next',\n\t\t\td3: D3VERSION,\n\t\t\tsass: '1.52.1',\n\t\t\tsvelte: '^3.43.1',\n\t\t\t'svelte-hmr': '^0.14.7',\n\t\t\tvite: '^2.6.7',\n\t\t},\n\t};\n\n\tconst vite = `import { svelte } from \"@sveltejs/vite-plugin-svelte\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig(({ mode }) => {\n return {\n plugins: [svelte()],\n build: { minify: mode === \"production\" },\n optimizeDeps: { include: [\"@carbon/charts\"] },\n };\n});\n`;\n\n\treturn {\n\t\t'App.svelte': App,\n\t\t'index.html': indexHtml,\n\t\t'plex-and-carbon-styles.scss': plexAndCarbonComponentsSCSS,\n\t\t'package.json': packageJson,\n\t\t'vite.config.js': vite,\n\t};\n};\n"]}
1
+ {"version":3,"file":"create-codesandbox.js","sourceRoot":"","sources":["create-codesandbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,IAAM,WAAW,GAAG,OAAO,CAAC,6BAA6B,CAAC,CAAC;AAC3D,IAAM,cAAc,GAAG,WAAW,CAAC,OAAO,CAAC;AAE3C,IAAM,kBAAkB,GAAG,2CAAyC,CAAC;AAErE,IAAM,OAAO,GAAG,mHACf,CAAC;AAEF,IAAM,SAAS,GAAG,QAAQ,CAAC;AAE3B,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAAC,aAAkB;IACpD,IAAM,KAAK,GAAG,EAAE,CAAC;IAEjB,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,OAAO,CACjC,UAAC,QAAQ,IAAK,OAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAxD,CAAwD,CACtE,CAAC;IAEF,OAAO,+DAA6D,aAAa,CAChF,EAAE,KAAK,OAAA,EAAE,CACP,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAC,IAAS;IAC9C,IAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACxD,IAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAC9D,IAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;IAE9C,IAAM,SAAS,GAAG,gjBAqBX,CAAC;IAER,IAAM,OAAO,GAAM,kBAAkB,4DAG3B,cAAc,oDAEV,SAAS,6BAEN,YAAY,oIAIxB,cAAc,+CAInB,CAAC;IAED,IAAM,WAAW,GAAG;QACnB,OAAO,EAAE;YACR,KAAK,EAAE,0BAA0B;YACjC,KAAK,EAAE,yBAAyB;SAChC;QACD,YAAY,EAAE;YACb,gBAAgB,EAAE,cAAc;YAChC,EAAE,EAAE,SAAS;SACb;QACD,eAAe,EAAE;YAChB,gBAAgB,EAAE,QAAQ;SAC1B;KACD,CAAC;IAEF,OAAO;QACN,YAAY,EAAE,SAAS;QACvB,cAAc,EAAE,OAAO;QACvB,cAAc,EAAE,WAAW;KAC3B,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,IAAS;IAC5C,IAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACxD,IAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAC9D,IAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;IAE9C,IAAM,SAAS,GAAG,6BAChB,CAAC;IAEH,IAAM,OAAO,GAAG,0EAGf,kBAAkB,4DAGT,cAAc,8PAQf,SAAS,wBACN,YAAY,2CAIpB,cAAc,mFAGb,cAAc,iFAIjB,CAAC;IACH,IAAM,WAAW,GAAG;QACnB,YAAY,EAAE;YACb,gBAAgB,EAAE,cAAc;YAChC,sBAAsB,EAAE,cAAc;YACtC,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,SAAS;YACtB,eAAe,EAAE,OAAO;SACxB;KACD,CAAC;IAEF,OAAO;QACN,gBAAgB,EAAE,SAAS;QAC3B,cAAc,EAAE,OAAO;QACvB,uBAAuB,EAAE,OAAO;QAChC,cAAc,EAAE,WAAW;KAC3B,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAC,IAAS;IAC9C,IAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IAC1D,IAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IAChE,IAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;IAE9C,IAAM,gBAAgB,GAAG,MAAI,cAAc,iDAAwC,cAAc,MAAG,CAAC;IACrG,IAAM,cAAc,GAAG,qDAEtB,kBAAkB,sUAaV,SAAS,uBACN,YAAY,SACvB,CAAC;IAEF,IAAM,SAAS,GAAG,6WASO,CAAC;IAE1B,IAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CACjC;QACC,YAAY,EAAE;YACb,qBAAqB,EAAE,QAAQ;YAC/B,iBAAiB,EAAE,QAAQ;YAC3B,mBAAmB,EAAE,QAAQ;YAC7B,eAAe,EAAE,QAAQ;YACzB,gBAAgB,EAAE,QAAQ;YAC1B,2BAA2B,EAAE,QAAQ;YACrC,mCAAmC,EAAE,QAAQ;YAC7C,iBAAiB,EAAE,QAAQ;YAC3B,gBAAgB,EAAE,cAAc;YAChC,wBAAwB,EAAE,cAAc;YACxC,SAAS,EAAE,OAAO;YAClB,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,OAAO;YACb,SAAS,EAAE,QAAQ;SACnB;KACD,EACD,IAAI,EACJ,IAAI,CACJ,CAAC;IAEF,OAAO;QACN,4BAA4B,EAAE,gBAAgB;QAC9C,0BAA0B,EAAE,cAAc;QAC1C,2BAA2B,EAAE,OAAO;QACpC,uBAAuB,EAAE,SAAS;QAClC,cAAc,EAAE,WAAW;KAC3B,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,IAAS;IAC1C,IAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IAC1D,IAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IAChE,IAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC;IAE1C,IAAM,QAAQ,GAAG,2CAGhB,kBAAkB,gXAgBT,SAAS,0BACN,YAAY,uCAGX,cAAc,2CAAsC,cAAc,2BAG9E,CAAC;IAEH,IAAM,MAAM,GAAG,kNAcb,CAAC;IAEH,IAAM,MAAM,GAAG,uJAMf,CAAC;IAED,IAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CACjC;QACC,YAAY,EAAE;YACb,gBAAgB,EAAE,cAAc;YAChC,oBAAoB,EAAE,cAAc;YACpC,uBAAuB,EAAE,OAAO;YAChC,EAAE,EAAE,SAAS;YACb,GAAG,EAAE,SAAS;SACd;KACD,EACD,IAAI,EACJ,MAAM,CACN,CAAC;IAEF,OAAO;QACN,0BAA0B,EAAE,QAAQ;QACpC,uBAAuB,EAAE,OAAO;QAChC,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,MAAM;QACrB,cAAc,EAAE,WAAW;KAC3B,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,IAAS;IAC7C,IAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACxD,IAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAE9D,IAAI,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;IAE5C,QAAQ,cAAc,EAAE;QACvB,KAAK,gBAAgB;YACpB,cAAc,GAAG,gBAAgB,CAAC;YAClC,MAAM;QACP,KAAK,iBAAiB;YACrB,cAAc,GAAG,iBAAiB,CAAC;YACnC,MAAM;QACP,KAAK,iBAAiB;YACrB,cAAc,GAAG,iBAAiB,CAAC;YACnC,MAAM;KACP;IAED,IAAM,SAAS,GAAG,gqBAyBlB,CAAC;IAED,IAAM,GAAG,GAAG,0BACD,cAAc,gDAEvB,kBAAkB,iEAIlB,cAAc,kBACR,SAAS,sBACN,YAAY,cAEvB,CAAC;IAED,IAAM,WAAW,GAAG;QACnB,OAAO,EAAE;YACR,GAAG,EAAE,MAAM;YACX,KAAK,EAAE,YAAY;SACnB;QACD,eAAe,EAAE;YAChB,uBAAuB,EAAE,cAAc;YACvC,8BAA8B,EAAE,MAAM;YACtC,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,SAAS;YACjB,YAAY,EAAE,SAAS;YACvB,IAAI,EAAE,QAAQ;SACd;KACD,CAAC;IAEF,IAAM,IAAI,GAAG,2SAUb,CAAC;IAED,OAAO;QACN,YAAY,EAAE,GAAG;QACjB,YAAY,EAAE,SAAS;QACvB,cAAc,EAAE,WAAW;QAC3B,gBAAgB,EAAE,IAAI;KACtB,CAAC;AACH,CAAC,CAAC","sourcesContent":["import { getParameters } from 'codesandbox/lib/api/define';\n\nconst packageJSON = require('@carbon/charts/package.json');\nconst libraryVersion = packageJSON.version;\n\nconst carbonStylesImport = `import \"@carbon/styles/css/styles.css\";`;\n\nconst plexCSS = `@import \"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed|IBM+Plex+Sans:400,600&display=swap\";\n`;\n\nconst D3VERSION = '^7.0.0';\n\nexport const createChartSandbox = (chartTemplate: any) => {\n\tconst files = {};\n\n\tObject.keys(chartTemplate).forEach(\n\t\t(filePath) => (files[filePath] = { content: chartTemplate[filePath] })\n\t);\n\n\treturn `https://codesandbox.io/api/v1/sandboxes/define?parameters=${getParameters(\n\t\t{ files }\n\t)}`;\n};\n\nexport const createVanillaChartApp = (demo: any) => {\n\tconst chartData = JSON.stringify(demo.data, null, '\\t');\n\tconst chartOptions = JSON.stringify(demo.options, null, '\\t');\n\tconst chartComponent = demo.chartType.vanilla;\n\n\tconst indexHtml = `<html>\n\t<head>\n\t\t<title>Parcel Sandbox</title>\n\t\t<meta charset=\"UTF-8\" />\n\t\t<link\n\t\t\trel=\"preconnect\"\n\t\t\tcrossorigin=\"anonymous\"\n\t\t\thref=\"https://fonts.gstatic.com\"\n\t\t/>\n\n\t\t<link\n\t\t\thref=\"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400|IBM+Plex+Sans:400,600&display=swap\"\n\t\t\trel=\"stylesheet\"\n\t\t\tcrossorigin=\"anonymous\"\n\t\t/>\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>`;\n\n\tconst indexJs = `${carbonStylesImport}\n\nimport \"@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`;\n\n\tconst packageJson = {\n\t\tscripts: {\n\t\t\tstart: 'parcel index.html --open',\n\t\t\tbuild: 'parcel build index.html',\n\t\t},\n\t\tdependencies: {\n\t\t\t'@carbon/charts': libraryVersion,\n\t\t\td3: D3VERSION,\n\t\t},\n\t\tdevDependencies: {\n\t\t\t'parcel-bundler': '^1.6.1',\n\t\t},\n\t};\n\n\treturn {\n\t\t'index.html': indexHtml,\n\t\t'src/index.js': indexJs,\n\t\t'package.json': packageJson,\n\t};\n};\n\nexport const createReactChartApp = (demo: any) => {\n\tconst chartData = JSON.stringify(demo.data, null, '\\t');\n\tconst chartOptions = JSON.stringify(demo.options, null, '\\t');\n\tconst chartComponent = demo.chartType.vanilla;\n\n\tconst indexHtml = `<div id=\"root\"></div>\n `;\n\n\tconst indexJs = `import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\n${carbonStylesImport}\n\nimport \"@carbon/charts/styles.css\";\nimport { ${chartComponent} } from \"@carbon/charts-react\";\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 `;\n\tconst packageJson = {\n\t\tdependencies: {\n\t\t\t'@carbon/charts': libraryVersion,\n\t\t\t'@carbon/charts-react': libraryVersion,\n\t\t\td3: D3VERSION,\n\t\t\treact: '16.12.0',\n\t\t\t'react-dom': '16.12.0',\n\t\t\t'react-scripts': '3.0.1',\n\t\t},\n\t};\n\n\treturn {\n\t\t'src/index.html': indexHtml,\n\t\t'src/index.js': indexJs,\n\t\t'src/ibm-plex-font.css': plexCSS,\n\t\t'package.json': packageJson,\n\t};\n};\n\nexport const createAngularChartApp = (demo: any) => {\n\tconst chartData = JSON.stringify(demo.data, null, '\\t\\t');\n\tconst chartOptions = JSON.stringify(demo.options, null, '\\t\\t');\n\tconst chartComponent = demo.chartType.angular;\n\n\tconst appComponentHtml = `<${chartComponent} [data]=\"data\" [options]=\"options\"></${chartComponent}>`;\n\tconst appComponentTs = `import { Component } from \"@angular/core\";\n\n${carbonStylesImport}\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}`;\n\n\tconst 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 {}`;\n\n\tconst packageJson = JSON.stringify(\n\t\t{\n\t\t\tdependencies: {\n\t\t\t\t'@angular/animations': '8.2.14',\n\t\t\t\t'@angular/common': '8.2.14',\n\t\t\t\t'@angular/compiler': '8.2.14',\n\t\t\t\t'@angular/core': '8.2.14',\n\t\t\t\t'@angular/forms': '8.2.14',\n\t\t\t\t'@angular/platform-browser': '8.2.14',\n\t\t\t\t'@angular/platform-browser-dynamic': '8.2.14',\n\t\t\t\t'@angular/router': '8.2.14',\n\t\t\t\t'@carbon/charts': libraryVersion,\n\t\t\t\t'@carbon/charts-angular': libraryVersion,\n\t\t\t\t'core-js': '3.6.0',\n\t\t\t\td3: D3VERSION,\n\t\t\t\trxjs: '6.5.3',\n\t\t\t\t'zone.js': '0.10.2',\n\t\t\t},\n\t\t},\n\t\tnull,\n\t\t'\\t'\n\t);\n\n\treturn {\n\t\t'src/app/app.component.html': appComponentHtml,\n\t\t'src/app/app.component.ts': appComponentTs,\n\t\t'src/app/ibm-plex-font.css': plexCSS,\n\t\t'src/app/app.module.ts': appModule,\n\t\t'package.json': packageJson,\n\t};\n};\n\nexport const createVueChartApp = (demo: any) => {\n\tconst chartData = JSON.stringify(demo.data, null, '\\t\\t');\n\tconst chartOptions = JSON.stringify(demo.options, null, '\\t\\t');\n\tconst chartComponent = demo.chartType.vue;\n\n\tconst chartVue = `<script>\nimport Vue from \"vue\";\n\n${carbonStylesImport}\n\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 `;\n\n\tconst 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 `;\n\n\tconst 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`;\n\n\tconst packageJson = JSON.stringify(\n\t\t{\n\t\t\tdependencies: {\n\t\t\t\t'@carbon/charts': libraryVersion,\n\t\t\t\t'@carbon/charts-vue': libraryVersion,\n\t\t\t\t'@vue/cli-plugin-babel': '4.1.1',\n\t\t\t\td3: D3VERSION,\n\t\t\t\tvue: '^2.6.11',\n\t\t\t},\n\t\t},\n\t\tnull,\n\t\t'\\t\\t'\n\t);\n\n\treturn {\n\t\t'src/components/chart.vue': chartVue,\n\t\t'src/ibm-plex-font.css': plexCSS,\n\t\t'src/App.vue': appVue,\n\t\t'src/main.js': mainJs,\n\t\t'package.json': packageJson,\n\t};\n};\n\nexport const createSvelteChartApp = (demo: any) => {\n\tconst chartData = JSON.stringify(demo.data, null, '\\t');\n\tconst chartOptions = JSON.stringify(demo.options, null, '\\t');\n\n\tlet chartComponent = demo.chartType.vanilla;\n\n\tswitch (chartComponent) {\n\t\tcase 'SimpleBarChart':\n\t\t\tchartComponent = 'BarChartSimple';\n\t\t\tbreak;\n\t\tcase 'GroupedBarChart':\n\t\t\tchartComponent = 'BarChartGrouped';\n\t\t\tbreak;\n\t\tcase 'StackedBarChart':\n\t\t\tchartComponent = 'BarChartStacked';\n\t\t\tbreak;\n\t}\n\n\tconst indexHtml = `<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n\n <link\n rel=\"preconnect\"\n crossorigin=\"anonymous\"\n href=\"https://fonts.gstatic.com\"\n />\n <link\n href=\"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400%7CIBM+Plex+Sans:400,600&display=swap\"\n rel=\"stylesheet\"\n crossorigin=\"anonymous\"\n />\n </head>\n <body>\n <script type=\"module\">\n import App from \"./App.svelte\";\n\n const app = new App({ target: document.body });\n </script>\n </body>\n</html>\n`;\n\n\tconst App = `<script>\n\timport { ${chartComponent} } from \"@carbon/charts-svelte\";\n\n\t${carbonStylesImport}\n\timport \"@carbon/charts/styles.css\";\n</script>\n\n<${chartComponent}\n\tdata={${chartData}}\n\toptions={${chartOptions}}\n\t/>\n`;\n\n\tconst packageJson = {\n\t\tscripts: {\n\t\t\tdev: 'vite',\n\t\t\tbuild: 'vite build',\n\t\t},\n\t\tdevDependencies: {\n\t\t\t'@carbon/charts-svelte': libraryVersion,\n\t\t\t'@sveltejs/vite-plugin-svelte': 'next',\n\t\t\td3: D3VERSION,\n\t\t\tsass: '1.52.1',\n\t\t\tsvelte: '^3.43.1',\n\t\t\t'svelte-hmr': '^0.14.7',\n\t\t\tvite: '^2.6.7',\n\t\t},\n\t};\n\n\tconst vite = `import { svelte } from \"@sveltejs/vite-plugin-svelte\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig(({ mode }) => {\n return {\n plugins: [svelte()],\n build: { minify: mode === \"production\" },\n optimizeDeps: { include: [\"@carbon/charts\"] },\n };\n});\n`;\n\n\treturn {\n\t\t'App.svelte': App,\n\t\t'index.html': indexHtml,\n\t\t'package.json': packageJson,\n\t\t'vite.config.js': vite,\n\t};\n};\n"]}