@operato/scene-chartjs 8.0.0-beta.1 → 8.0.0

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 +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>