@operato/scene-chartjs 7.3.17 → 7.3.19

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. package/package.json +2 -2
  2. package/CHANGELOG.md +0 -1038
  3. package/demo/bar.html +0 -266
  4. package/demo/chartjs.html +0 -73
  5. package/demo/index.html +0 -547
  6. package/demo/legend.html +0 -267
  7. package/demo/things-scene-chartjs.html +0 -7
  8. package/schema.graphql +0 -4537
  9. package/src/chartjs.ts +0 -139
  10. package/src/config-converter.ts +0 -404
  11. package/src/editors/index.ts +0 -8
  12. package/src/index.ts +0 -4
  13. package/src/ox-chart.ts +0 -170
  14. package/src/plugins/chart-series-highlight.ts +0 -41
  15. package/src/plugins/chartjs-plugin-data-binder.ts +0 -134
  16. package/src/scene-chart.d.ts +0 -102
  17. package/src/templates/bar-chart.ts +0 -121
  18. package/src/templates/doughnut-chart.ts +0 -55
  19. package/src/templates/horizontal-bar-chart.ts +0 -120
  20. package/src/templates/index.ts +0 -19
  21. package/src/templates/line-chart.ts +0 -152
  22. package/src/templates/mixed-chart.ts +0 -149
  23. package/src/templates/pie-chart.ts +0 -55
  24. package/src/templates/polar-area-chart.ts +0 -89
  25. package/src/templates/radar-chart.ts +0 -95
  26. package/src/text-formatter.ts +0 -106
  27. package/test/basic-test.html +0 -61
  28. package/test/index.html +0 -20
  29. package/tsconfig.json +0 -24
  30. package/tsconfig.tsbuildinfo +0 -1
package/demo/bar.html DELETED
@@ -1,266 +0,0 @@
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: 640px;
31
- height: 480px;
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="300" height="300">
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: 'checkbox',
166
- label: 'Fill',
167
- name: 'chart.data.datasets.0.fill',
168
- property: 'checkbox'
169
- }, {
170
- type: 'checkbox',
171
- label: 'X Axis Grid Line',
172
- name: 'chart.options.scales.xAxes.0.gridLines.display',
173
- property: 'checkbox'
174
- }, {
175
- type: 'string',
176
- label: 'Theme',
177
- name: 'chart.options.theme',
178
- property: 'string'
179
- }, {
180
- type: 'checkbox',
181
- label: 'Show Legend',
182
- name: 'chart.options.legend.display',
183
- property: 'checkbox'
184
- }, {
185
- type: 'string',
186
- label: 'Legend Position',
187
- name: 'chart.options.legend.position',
188
- property: 'string'
189
- }, {
190
- type: 'checkbox',
191
- label: 'is Stacked',
192
- name: 'chart.options.stacked',
193
- property: 'checkbox'
194
- }, {
195
- type: 'checkbox',
196
- label: 'Multi Axis',
197
- name: 'chart.options.multiAxis',
198
- property: 'checkbox'
199
- }]
200
-
201
- app.model = {
202
- width: 500,
203
- height: 500,
204
- components: [{
205
- type: 'chartjs',
206
- top: 50,
207
- left: 50,
208
- width: 400,
209
- height: 400,
210
- fontColor: '#FF0000',
211
- lineWidth: 5,
212
- chart: {
213
- type: 'bar',
214
- data: {
215
- labels: [],
216
- datasets: [{
217
- type: 'bar',
218
- label: 'Line Dataset',
219
- yAxisID: 'left',
220
- borderColor: 'red',
221
- backgroundColor: 'red',
222
- fill: false,
223
- data: []
224
- }, {
225
- type: 'bar',
226
- label: 'Bar Dataset',
227
- borderColor: 'blue',
228
- backgroundColor: 'blue',
229
- data: []
230
- }]
231
- },
232
- options: {
233
- legend: {
234
- display: true,
235
- position: 'top'
236
- },
237
- scales: {
238
- xAxes: [{
239
- position: 'bottom',
240
- gridLines: {
241
- display: true
242
- }
243
- }],
244
- yAxes: [{
245
- position: 'left',
246
- id: 'left'
247
- }, {
248
- position: 'right',
249
- id: 'right'
250
- }]
251
- }
252
- }
253
- },
254
- data : {
255
- seriesData : [
256
- [0, 10, 5, 3, 6],
257
- [100, 10, 60, 30, 50]
258
- ],
259
- labelData : ['a', 'b', 'c', 'd', 'e' ]
260
- }
261
- }]
262
- }
263
- });
264
- </script>
265
- </body>
266
- </html>
package/demo/chartjs.html DELETED
@@ -1,73 +0,0 @@
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: 640px;
31
- height: 480px;
32
- }
33
- </style>
34
- </head>
35
- <body unresolved>
36
-
37
- <canvas id="chartCanvas" width="300" height="300">
38
- </canvas>
39
- <script src="../bower_components/chart.js/dist/Chart.js"></script>
40
- <script>
41
- var chartCanvas = document.getElementById("chartCanvas");
42
- var ctx = chartCanvas.getContext("2d");
43
-
44
- var myChart = new Chart(ctx, {
45
- type: 'bar',
46
- data: {
47
- labels: ['Item 1', 'Item 2', 'Item 3'],
48
- datasets: [
49
- {
50
- type: 'bar',
51
- label: 'Bar Component',
52
- data: [10, 20, 30],
53
- },
54
- {
55
- type: 'line',
56
- label: 'Line Component',
57
- data: [30, 20, 10],
58
- }
59
- ]
60
- },
61
- options: {
62
- legend: {
63
- labels: {
64
- useLineStyle: true,
65
- usePointStyle: true
66
- }
67
- }
68
- }
69
- });
70
-
71
- </script>
72
- </body>
73
- </html>