@operato/scene-chartjs 0.0.5

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 (114) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/LICENSE +21 -0
  3. package/README.md +21 -0
  4. package/assets/bar-chart.png +0 -0
  5. package/assets/doughnut-chart.png +0 -0
  6. package/assets/horizontal-bar-chart.png +0 -0
  7. package/assets/line-chart.png +0 -0
  8. package/assets/mixed-chart.png +0 -0
  9. package/assets/pie-chart.png +0 -0
  10. package/assets/polar-area-chart.png +0 -0
  11. package/assets/radar-chart.png +0 -0
  12. package/demo/bar.html +266 -0
  13. package/demo/chartjs.html +73 -0
  14. package/demo/index.html +547 -0
  15. package/demo/legend.html +267 -0
  16. package/demo/things-scene-chartjs.html +7 -0
  17. package/dist/chartjs.d.ts +27 -0
  18. package/dist/chartjs.js +109 -0
  19. package/dist/chartjs.js.map +1 -0
  20. package/dist/config-converter.d.ts +1 -0
  21. package/dist/config-converter.js +343 -0
  22. package/dist/config-converter.js.map +1 -0
  23. package/dist/editors/index.d.ts +5 -0
  24. package/dist/editors/index.js +11 -0
  25. package/dist/editors/index.js.map +1 -0
  26. package/dist/editors/property-editor-chartjs-abstract.d.ts +44 -0
  27. package/dist/editors/property-editor-chartjs-abstract.js +250 -0
  28. package/dist/editors/property-editor-chartjs-abstract.js.map +1 -0
  29. package/dist/editors/property-editor-chartjs-hbar.d.ts +9 -0
  30. package/dist/editors/property-editor-chartjs-hbar.js +160 -0
  31. package/dist/editors/property-editor-chartjs-hbar.js.map +1 -0
  32. package/dist/editors/property-editor-chartjs-mixed.d.ts +20 -0
  33. package/dist/editors/property-editor-chartjs-mixed.js +193 -0
  34. package/dist/editors/property-editor-chartjs-mixed.js.map +1 -0
  35. package/dist/editors/property-editor-chartjs-multi-series-abstract.d.ts +31 -0
  36. package/dist/editors/property-editor-chartjs-multi-series-abstract.js +373 -0
  37. package/dist/editors/property-editor-chartjs-multi-series-abstract.js.map +1 -0
  38. package/dist/editors/property-editor-chartjs-pie.d.ts +14 -0
  39. package/dist/editors/property-editor-chartjs-pie.js +70 -0
  40. package/dist/editors/property-editor-chartjs-pie.js.map +1 -0
  41. package/dist/editors/property-editor-chartjs-radar.d.ts +10 -0
  42. package/dist/editors/property-editor-chartjs-radar.js +42 -0
  43. package/dist/editors/property-editor-chartjs-radar.js.map +1 -0
  44. package/dist/editors/property-editor-chartjs-styles.d.ts +1 -0
  45. package/dist/editors/property-editor-chartjs-styles.js +165 -0
  46. package/dist/editors/property-editor-chartjs-styles.js.map +1 -0
  47. package/dist/editors/property-editor-chartjs.d.ts +14 -0
  48. package/dist/editors/property-editor-chartjs.js +83 -0
  49. package/dist/editors/property-editor-chartjs.js.map +1 -0
  50. package/dist/index.d.ts +5 -0
  51. package/dist/index.js +8 -0
  52. package/dist/index.js.map +1 -0
  53. package/dist/ox-chart.d.ts +20 -0
  54. package/dist/ox-chart.js +137 -0
  55. package/dist/ox-chart.js.map +1 -0
  56. package/dist/plugins/chart-series-highlight.d.ts +5 -0
  57. package/dist/plugins/chart-series-highlight.js +37 -0
  58. package/dist/plugins/chart-series-highlight.js.map +1 -0
  59. package/dist/plugins/chartjs-plugin-data-binder.d.ts +5 -0
  60. package/dist/plugins/chartjs-plugin-data-binder.js +111 -0
  61. package/dist/plugins/chartjs-plugin-data-binder.js.map +1 -0
  62. package/helps/scene/component/chartjs.ko.md +332 -0
  63. package/helps/scene/component/chartjs.md +333 -0
  64. package/helps/scene/component/chartjs.zh.md +331 -0
  65. package/helps/scene/images/chart-bar-01.png +0 -0
  66. package/helps/scene/images/chart-bar-02.png +0 -0
  67. package/helps/scene/images/chart-bar-03.png +0 -0
  68. package/helps/scene/images/chart-bar-08.png +0 -0
  69. package/helps/scene/images/chart-bar-12.png +0 -0
  70. package/helps/scene/images/chart-data-01.png +0 -0
  71. package/helps/scene/images/chart-data-04.png +0 -0
  72. package/helps/scene/images/chart-doughnut-01.png +0 -0
  73. package/helps/scene/images/chart-horizontal-bar-01.png +0 -0
  74. package/helps/scene/images/chart-line-01.png +0 -0
  75. package/helps/scene/images/chart-mix-01.png +0 -0
  76. package/helps/scene/images/chart-mix-02.png +0 -0
  77. package/helps/scene/images/chart-pie-01.png +0 -0
  78. package/helps/scene/images/chart-polar-01.png +0 -0
  79. package/helps/scene/images/chart-radar-01.png +0 -0
  80. package/package.json +78 -0
  81. package/src/chartjs.ts +134 -0
  82. package/src/config-converter.ts +401 -0
  83. package/src/editors/index.ts +11 -0
  84. package/src/editors/property-editor-chartjs-abstract.ts +301 -0
  85. package/src/editors/property-editor-chartjs-hbar.ts +163 -0
  86. package/src/editors/property-editor-chartjs-mixed.ts +204 -0
  87. package/src/editors/property-editor-chartjs-multi-series-abstract.ts +393 -0
  88. package/src/editors/property-editor-chartjs-pie.ts +79 -0
  89. package/src/editors/property-editor-chartjs-radar.ts +43 -0
  90. package/src/editors/property-editor-chartjs-styles.ts +165 -0
  91. package/src/editors/property-editor-chartjs.ts +88 -0
  92. package/src/index.ts +7 -0
  93. package/src/ox-chart.ts +150 -0
  94. package/src/plugins/chart-series-highlight.ts +43 -0
  95. package/src/plugins/chartjs-plugin-data-binder.ts +138 -0
  96. package/src/scene-chart.d.ts +152 -0
  97. package/templates/bar-chart.js +124 -0
  98. package/templates/doughnut-chart.js +58 -0
  99. package/templates/horizontal-bar-chart.js +121 -0
  100. package/templates/index.js +22 -0
  101. package/templates/line-chart.js +155 -0
  102. package/templates/mixed-chart.js +152 -0
  103. package/templates/pie-chart.js +58 -0
  104. package/templates/polar-area-chart.js +92 -0
  105. package/templates/radar-chart.js +98 -0
  106. package/test/basic-test.html +61 -0
  107. package/test/index.html +20 -0
  108. package/things-scene.config.js +7 -0
  109. package/translations/en.json +5 -0
  110. package/translations/ko.json +5 -0
  111. package/translations/ms.json +5 -0
  112. package/translations/zh.json +5 -0
  113. package/tsconfig.json +22 -0
  114. package/tsconfig.tsbuildinfo +1 -0
package/demo/index.html ADDED
@@ -0,0 +1,547 @@
1
+ <!doctype html>
2
+ <!--
3
+ @license
4
+ Copyright © HatioLab Inc. All rights reserved.
5
+ -->
6
+ <html>
7
+ <head>
8
+ <meta charset="utf-8">
9
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
10
+ <title>things-scene-chartjs Demo</title>
11
+ <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
12
+
13
+ <link rel="import" href="../bower_components/things-scene-viewer/things-scene-viewer.html">
14
+ <link rel="import" href="../bower_components/things-scene-viewer/things-scene-layer.html">
15
+ <link rel="import" href="../bower_components/things-scene-viewer/things-scene-handler.html">
16
+ <link rel="import" href="../bower_components/things-designer-elements/elements.html">
17
+ <link rel="import" href="../bower_components/things-scene-modeler/things-scene-properties.html">
18
+
19
+ <link rel="import" href="./things-scene-chartjs.html">
20
+
21
+ <style is="custom-style">
22
+
23
+ @font-face {
24
+ font-family: "Bitstream Vera Serif Bold";
25
+ src: url("fonts/VeraSeBd.ttf");
26
+ }
27
+
28
+ things-scene-viewer {
29
+ display: block;
30
+ width: 1640px;
31
+ height: 580px;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body unresolved>
36
+
37
+ <template is="dom-bind" id="app">
38
+ <p>An example of <code>&lt;things-scene-chartjs&gt;</code>:</p>
39
+
40
+ <things-scene-viewer id='scene' scene='{{scene}}' model='[[model]]' selected='{{selected}}'>
41
+ <things-scene-layer type="selection-layer"></things-scene-layer>
42
+ <things-scene-layer type="modeling-layer"></things-scene-layer>
43
+ <things-scene-handler type="text-editor"></things-scene-handler>
44
+ <things-scene-handler type="move-handler"></things-scene-handler>
45
+ </things-scene-viewer>
46
+
47
+ <button id="change">Change Value</button>
48
+ <button id="change-model">Change Model</button>
49
+ <fieldset>
50
+ <legend>Chart.js properties</legend>
51
+ <things-scene-properties id="properties"
52
+ scene="[[scene]]"
53
+ selected="[[selected]]"
54
+ model="{{target}}"
55
+ bounds="{{bounds}}"
56
+ props="{{props}}">
57
+ <things-editor-properties id="properties"
58
+ target="{{target}}"
59
+ props="{{props}}">
60
+ </things-editor-properties>
61
+ </things-scene-properties>
62
+ </fieldset>
63
+
64
+ </template>
65
+ <canvas id="chartCanvas" width="1500" height="1500">
66
+ </canvas>
67
+ <script>
68
+ window.addEventListener('WebComponentsReady', function(e) {
69
+ var app = document.querySelector('#app')
70
+
71
+ app.$.change.addEventListener('click', function() {
72
+ var viewer = app.$.scene
73
+
74
+ app.selected[0].set('data', [
75
+ {
76
+ "date": "2016-11-10",
77
+ "inQty": "712882",
78
+ "badQty": "0"
79
+ },
80
+ {
81
+ "date": "2016-11-11",
82
+ "inQty": "526234",
83
+ "badQty": "0"
84
+ },
85
+ {
86
+ "date": "2016-11-12",
87
+ "inQty": "701163",
88
+ "badQty": "8837"
89
+ }
90
+ ])
91
+ })
92
+ app.$['change-model'].addEventListener('click', function() {
93
+ var viewer = app.$.scene
94
+
95
+ var selected = app.selected[0]
96
+ var chartModel = JSON.parse(JSON.stringify(selected.model.chart))
97
+ chartModel.data.datasets.push({
98
+ label:'add',
99
+ backgroundColor: 'red',
100
+ data: []
101
+ })
102
+
103
+ selected.set('chart', chartModel)
104
+ })
105
+
106
+ app.$.properties.addEventListener('change', function(e) {
107
+ console.log('change', e, app.$.properties.model)
108
+ })
109
+
110
+ Chart.defaults.global.tooltips.mode = 'label';
111
+
112
+ app.props = [{
113
+ type: 'number',
114
+ label: 'Font Size',
115
+ name: 'chart.options.fontSize',
116
+ property: 'number'
117
+ },{
118
+ type: 'number',
119
+ label: 'Width',
120
+ name: 'width',
121
+ property: 'number'
122
+ }, {
123
+ type: 'number',
124
+ label: 'Height',
125
+ name: 'height',
126
+ property: 'number'
127
+ }, {
128
+ type: 'number',
129
+ label: 'Tension',
130
+ name: 'chart.data.datasets.0.lineTension',
131
+ property: 'number'
132
+ }, {
133
+ type: 'color',
134
+ label: 'Border Color',
135
+ name: 'chart.data.datasets.0.borderColor',
136
+ property: 'color'
137
+ }, {
138
+ type: 'multiple-color',
139
+ label: 'Background Color',
140
+ name: 'chart.data.datasets.0.backgroundColor',
141
+ property: {
142
+ colorType: 'array'
143
+ }
144
+ }, {
145
+ type: 'number',
146
+ label: 'Border Width',
147
+ name: 'chart.data.datasets.0.borderWidth',
148
+ property: 'number'
149
+ }, {
150
+ type: 'color',
151
+ label: 'Point Border Color',
152
+ name: 'chart.data.datasets.0.pointBorderColor',
153
+ property: 'color'
154
+ }, {
155
+ type: 'color',
156
+ label: 'Point Background Color',
157
+ name: 'chart.data.datasets.0.pointBackgroundColor',
158
+ property: 'color'
159
+ }, {
160
+ type: 'number',
161
+ label: 'Point Border Width',
162
+ name: 'chart.data.datasets.0.pointBorderWidth',
163
+ property: 'number'
164
+ }, {
165
+ type: 'number',
166
+ label: 'Point Radius',
167
+ name: 'chart.data.datasets.0.pointRadius',
168
+ property: 'number'
169
+ }, {
170
+ type: 'checkbox',
171
+ label: 'Fill',
172
+ name: 'chart.data.datasets.0.fill',
173
+ property: 'checkbox'
174
+ }, {
175
+ type: 'checkbox',
176
+ label: 'X Axis Grid Line',
177
+ name: 'chart.options.scales.xAxes.0.gridLines.display',
178
+ property: 'checkbox'
179
+ }, {
180
+ type: 'string',
181
+ label: 'Theme',
182
+ name: 'chart.options.theme',
183
+ property: 'string'
184
+ }, {
185
+ type: 'checkbox',
186
+ label: 'Show Legend',
187
+ name: 'chart.options.legend.display',
188
+ property: 'checkbox'
189
+ }, {
190
+ type: 'string',
191
+ label: 'Legend Position',
192
+ name: 'chart.options.legend.position',
193
+ property: 'string'
194
+ }, {
195
+ type: 'checkbox',
196
+ label: 'is Stacked',
197
+ name: 'chart.options.stacked',
198
+ property: 'checkbox'
199
+ }, {
200
+ type: 'checkbox',
201
+ label: 'Multi Axis',
202
+ name: 'chart.options.multiAxis',
203
+ property: 'checkbox'
204
+ }]
205
+
206
+ app.model = {
207
+ width: 1500,
208
+ height: 1500,
209
+ components: [{
210
+ // type: 'chartjs',
211
+ // top: 200,
212
+ // left: 300,
213
+ // width: 200,
214
+ // height: 200,
215
+ // fontColor: '#FF0000',
216
+ // lineWidth: 5,
217
+ // chart: {
218
+ // type: 'bar',
219
+ // data: {
220
+ // labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
221
+ // datasets: [{
222
+ // label: '# of Votes',
223
+ // data: [],
224
+ // backgroundColor: 'rgba(255, 99, 132, 0.2)',
225
+ // borderColor:'rgba(255,99,132,1)',
226
+ // borderWidth: 1,
227
+ // dataKey: 'inQty'
228
+ // // ,
229
+ // // highlight: {
230
+ // // color: 'rgba(255,255,255,1)',
231
+ // // condition: 'data > 15'
232
+ // // }
233
+ // }, {
234
+ // label: '# of Votes 2',
235
+ // data: [],
236
+ // backgroundColor: 'rgba(255, 159, 64, 1)',
237
+ // borderColor: 'rgba(255, 159, 64, 1)',
238
+ // borderWidth: 1,
239
+ // dataKey: 'badQty'
240
+ // }],
241
+ // labelDataKey: 'date'
242
+ // },
243
+ // options: {
244
+ // // displayValue: true,
245
+ // displayValue: true,
246
+ // stacked: true,
247
+ // scales: {
248
+ // xAxes: [{
249
+ // type: 'category',
250
+ // stacked: true,
251
+ // gridLines: {
252
+ // display: true
253
+ // },
254
+ // ticks: {
255
+ // reverse : true
256
+ // }
257
+ // }],
258
+ // yAxes: [{
259
+ // stacked: true
260
+ // }]
261
+ // },
262
+ // legend: {
263
+ // display : true
264
+ // }
265
+ // }
266
+ // },
267
+ // data: {
268
+ // seriesData : [[1200, 1900, 300, 500, 200, 300], [100, -200, 300, 400, 500, 600]],
269
+ // labelData: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
270
+ // }
271
+ // }, {
272
+ // type: 'chartjs',
273
+ // top: 400,
274
+ // left: 300,
275
+ // width: 200,
276
+ // height: 200,
277
+ // fontColor: '#FF0000',
278
+ // lineWidth: 5,
279
+ // chart: {
280
+ // type: 'horizontalBar',
281
+ // data: {
282
+ // labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
283
+ // datasets: [{
284
+ // label: '# of Votes',
285
+ // data: [],
286
+ // backgroundColor: 'rgba(255, 99, 132, 0.2)',
287
+ // borderColor:'rgba(255,99,132,1)',
288
+ // borderWidth: 1,
289
+ // dataKey: 'inQty'
290
+ // // ,
291
+ // // highlight: {
292
+ // // color: 'rgba(255,255,255,1)',
293
+ // // condition: 'data > 15'
294
+ // // }
295
+ // }, {
296
+ // label: '# of Votes 2',
297
+ // data: [],
298
+ // backgroundColor: 'rgba(255, 159, 64, 1)',
299
+ // borderColor: 'rgba(255, 159, 64, 1)',
300
+ // borderWidth: 1,
301
+ // dataKey: 'badQty'
302
+ // }],
303
+ // labelDataKey: 'date'
304
+ // },
305
+ // options: {
306
+ // // displayValue: true,
307
+ // displayValue: true,
308
+ // stacked: true,
309
+ // scales: {
310
+ // yAxes: [{
311
+ // // stacked: true,
312
+ // gridLines: {
313
+ // display: true
314
+ // }
315
+ // }],
316
+ // xAxes: [{
317
+ // // stacked: true,
318
+ // ticks: {
319
+ // beginAtZero: true
320
+ // }
321
+ // }]
322
+ // },
323
+ // legend: {
324
+ // display : true
325
+ // }
326
+ // }
327
+ // },
328
+ // data: {
329
+ // seriesData : [[1200, 1900, 300, 500, 200, 300], [100, -200, 300, 400, 500, 600]],
330
+ // labelData: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
331
+ // }
332
+ }, {
333
+ "type": "chartjs",
334
+ "top": 86,
335
+ "left": 368,
336
+ "width": 615,
337
+ "height": 408,
338
+ "lineWidth": 5,
339
+ "alpha": 1,
340
+ "chart": {
341
+ "type": "bar",
342
+ "data": {
343
+ "labels": [],
344
+ "datasets": [
345
+ {
346
+ "label": "값",
347
+ "type": "line",
348
+ "data": [],
349
+ "backgroundColor": "rgb(66, 110, 164)",
350
+ "borderColor": "rgb(66, 110, 164)",
351
+ "borderWidth": 0,
352
+ "dataKey": "value",
353
+ "yAxisID": "left",
354
+ "fill": false,
355
+ "lineTension": "0",
356
+ "pointBorderColor": "rgb(66, 110, 164)",
357
+ "pointBorderWidth": 0,
358
+ pointRadius: 4,
359
+ "displayValue": true,
360
+ },
361
+ {
362
+ "label": "값 2",
363
+ "data": [],
364
+ "borderWidth": 0,
365
+ "dataKey": "value2",
366
+ "yAxisID": "right",
367
+ "borderColor": "rgb(253, 12, 12)",
368
+ "backgroundColor": "rgb(253, 12, 12)",
369
+ "type": "bar"
370
+ }
371
+ ],
372
+ "labelDataKey": "date"
373
+ },
374
+ "options": {
375
+ "theme": "dark",
376
+ "legend": {
377
+ "display": true,
378
+ "position": "top",
379
+ "labels": {
380
+ "fontColor": "rgba(0, 0, 0, 0.5)"
381
+ }
382
+ },
383
+ "scales": {
384
+ "xAxes": [
385
+ {
386
+ "gridLines": {
387
+ "zeroLineColor": "rgba(0, 0, 0, 0.5)",
388
+ "color": "rgba(0, 0, 0, 0.1)"
389
+ },
390
+ "ticks": {
391
+ "fontColor": "rgba(0, 0, 0, 0.5)"
392
+ },
393
+ "stacked": false
394
+ }
395
+ ],
396
+ "yAxes": [
397
+ {
398
+ "id": "left",
399
+ "position": "left",
400
+ "gridLines": {
401
+ "zeroLineColor": "rgba(0, 0, 0, 0.5)",
402
+ "color": "rgba(0, 0, 0, 0.1)"
403
+ },
404
+ "ticks": {
405
+ "autoMin": true,
406
+ "autoMax": true,
407
+ "fontColor": "rgba(0, 0, 0, 0.5)",
408
+ "stepSize": 200
409
+ },
410
+ "stacked": false
411
+ },
412
+ {
413
+ "position": "right",
414
+ "id": "right",
415
+ "ticks": {
416
+ "beginAtZero": true,
417
+ "fontColor": "rgba(0, 0, 0, 0.5)"
418
+ },
419
+ "gridLines": {
420
+ "zeroLineColor": "rgba(0, 0, 0, 0.5)",
421
+ "color": "rgba(0, 0, 0, 0.1)"
422
+ },
423
+ "stacked": false
424
+ }
425
+ ]
426
+ },
427
+ "tooltips": {
428
+ "callbacks": {}
429
+ },
430
+ "stacked": false,
431
+ "multiAxis": true,
432
+ "defaultFontColor": "rgb(21, 10, 10)"
433
+ }
434
+ },
435
+ "rotation": 0,
436
+ "id": "chart",
437
+ "data": [
438
+ {
439
+ "__field1": "date",
440
+ "__field2": "value",
441
+ "__field3": "value2"
442
+ },
443
+ {
444
+ "__field1": "2017-02-01",
445
+ "__field2": "812",
446
+ "__field3": "58"
447
+ },
448
+ {
449
+ "__field1": "2017-02-02",
450
+ "__field2": "925",
451
+ "__field3": "71"
452
+ },
453
+ {
454
+ "__field1": "2017-02-03",
455
+ "__field2": "722",
456
+ "__field3": "94"
457
+ },
458
+ {
459
+ "__field1": "2017-02-04",
460
+ "__field2": "",
461
+ "__field3": ""
462
+ },
463
+ {
464
+ "__field1": "2017-02-05",
465
+ "__field2": "633",
466
+ "__field3": "94"
467
+ },
468
+ {
469
+ "__field1": "2017-02-06",
470
+ "__field2": "631",
471
+ "__field3": "74"
472
+ },
473
+ {
474
+ "__field1": "2017-02-07",
475
+ "__field2": "",
476
+ "__field3": "27"
477
+ }
478
+ ]
479
+ // }, {
480
+ // type: 'chartjs',
481
+ // top: 0,
482
+ // left: 300,
483
+ // width: 200,
484
+ // height: 200,
485
+ // fontColor: '#FF0000',
486
+ // lineWidth: 5,
487
+ // chart: {
488
+ // type: 'doughnut',
489
+ // data: {
490
+ // labels: [],
491
+ // datasets: [{
492
+ // data: [],
493
+ // backgroundColor: [
494
+ // "#FF6384",
495
+ // "#36A2EB",
496
+ // "#FFCE56"
497
+ // ]
498
+ // }]
499
+ // },
500
+ // options: {
501
+ // displayValue: true,
502
+ // theme : 'dark',
503
+ // legend: {
504
+ // display: true,
505
+ // position: 'top'
506
+ // },
507
+ // animation:{
508
+ // animateScale:true
509
+ // }
510
+ // }
511
+ // },
512
+ // data: {
513
+ // seriesData: [[300, 50, 100]],
514
+ // labelData: [
515
+ // "Red",
516
+ // "Blue",
517
+ // "Yellow"
518
+ // ]
519
+ // }
520
+ }]
521
+ }
522
+ // var chartCanvas = document.getElementById("chartCanvas");
523
+ // var ctx = chartCanvas.getContext("2d");
524
+ //
525
+ // var myChart = new Chart(ctx, {
526
+ // type: 'bar',
527
+ // data: {
528
+ // labels: ['Item 1', 'Item 2', 'Item 3'],
529
+ // datasets: [
530
+ // {
531
+ // type: 'bar',
532
+ // label: 'Bar Component',
533
+ // data: [10, 20, 30],
534
+ // },
535
+ // {
536
+ // type: 'line',
537
+ // label: 'Line Component',
538
+ // data: [30, 20, 10],
539
+ // }
540
+ // ]
541
+ // }
542
+ // });
543
+ });
544
+
545
+ </script>
546
+ </body>
547
+ </html>