@operato/scene-chartjs 8.0.0-beta.1 → 8.0.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 (30) hide show
  1. package/package.json +7 -7
  2. package/CHANGELOG.md +0 -1060
  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 -4458
  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/legend.html DELETED
@@ -1,267 +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: 'line',
218
- label: 'Line Dataset',
219
- yAxisID: 'left',
220
- borderColor: 'red',
221
- fill: false,
222
- data: []
223
- }, {
224
- type: 'bar',
225
- label: 'Bar Dataset',
226
- yAxisID: 'right',
227
- borderColor: 'blue',
228
- backgroundColor: 'blue',
229
- data: []
230
- }]
231
- },
232
- options: {
233
- multiAxis: true,
234
- legend: {
235
- display: true,
236
- position: 'top'
237
- },
238
- scales: {
239
- xAxes: [{
240
- position: 'bottom',
241
- gridLines: {
242
- display: true
243
- }
244
- }],
245
- yAxes: [{
246
- position: 'left',
247
- id: 'left'
248
- }, {
249
- position: 'right',
250
- id: 'right'
251
- }]
252
- }
253
- }
254
- },
255
- data : {
256
- seriesData : [
257
- [0, 10, 5, 3, 6],
258
- [100, 10, 60, 30, 50]
259
- ],
260
- labelData : ['a', 'b', 'c', 'd', 'e' ]
261
- }
262
- }]
263
- }
264
- });
265
- </script>
266
- </body>
267
- </html>
package/demo/things-scene-chartjs.html DELETED
@@ -1,7 +0,0 @@
1
- <!--
2
- @license
3
- Copyright © HatioLab Inc. All rights reserved.
4
- -->
5
- <script src="../bower_components/Chart.JS/dist/Chart.js"></script>
6
- <script src="../bower_components/TinyColor/dist/tinycolor-min.js"></script>
7
- <script src="../things-scene-chartjs.js"></script>