@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.
- package/package.json +7 -7
- package/CHANGELOG.md +0 -1060
- package/demo/bar.html +0 -266
- package/demo/chartjs.html +0 -73
- package/demo/index.html +0 -547
- package/demo/legend.html +0 -267
- package/demo/things-scene-chartjs.html +0 -7
- package/schema.graphql +0 -4458
- package/src/chartjs.ts +0 -139
- package/src/config-converter.ts +0 -404
- package/src/editors/index.ts +0 -8
- package/src/index.ts +0 -4
- package/src/ox-chart.ts +0 -170
- package/src/plugins/chart-series-highlight.ts +0 -41
- package/src/plugins/chartjs-plugin-data-binder.ts +0 -134
- package/src/scene-chart.d.ts +0 -102
- package/src/templates/bar-chart.ts +0 -121
- package/src/templates/doughnut-chart.ts +0 -55
- package/src/templates/horizontal-bar-chart.ts +0 -120
- package/src/templates/index.ts +0 -19
- package/src/templates/line-chart.ts +0 -152
- package/src/templates/mixed-chart.ts +0 -149
- package/src/templates/pie-chart.ts +0 -55
- package/src/templates/polar-area-chart.ts +0 -89
- package/src/templates/radar-chart.ts +0 -95
- package/src/text-formatter.ts +0 -106
- package/test/basic-test.html +0 -61
- package/test/index.html +0 -20
- package/tsconfig.json +0 -24
- 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><things-scene-chartjs></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>
|
@@ -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>
|