@operato/scene-chartjs 7.0.0 → 7.0.2
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +18 -0
- package/dist/config-converter.js +1 -1
- package/dist/config-converter.js.map +1 -1
- package/dist/editors/index.d.ts +1 -1
- package/dist/editors/index.js +2 -2
- package/dist/editors/index.js.map +1 -1
- package/dist/ox-chart.js +1 -1
- package/dist/ox-chart.js.map +1 -1
- package/package.json +6 -4
- package/schema.graphql +76 -40
- package/src/config-converter.ts +1 -1
- package/src/editors/index.ts +2 -2
- package/src/ox-chart.ts +1 -1
- package/translations/en.json +2 -1
- package/translations/ja.json +2 -1
- package/translations/ko.json +2 -1
- package/translations/ms.json +2 -1
- package/translations/zh.json +2 -1
- package/tsconfig.tsbuildinfo +1 -1
- package/dist/editors/property-editor-chartjs-abstract.d.ts +0 -50
- package/dist/editors/property-editor-chartjs-abstract.js +0 -273
- package/dist/editors/property-editor-chartjs-abstract.js.map +0 -1
- package/dist/editors/property-editor-chartjs-hbar.d.ts +0 -10
- package/dist/editors/property-editor-chartjs-hbar.js +0 -154
- package/dist/editors/property-editor-chartjs-hbar.js.map +0 -1
- package/dist/editors/property-editor-chartjs-mixed.d.ts +0 -17
- package/dist/editors/property-editor-chartjs-mixed.js +0 -186
- package/dist/editors/property-editor-chartjs-mixed.js.map +0 -1
- package/dist/editors/property-editor-chartjs-multi-series-abstract.d.ts +0 -29
- package/dist/editors/property-editor-chartjs-multi-series-abstract.js +0 -363
- package/dist/editors/property-editor-chartjs-multi-series-abstract.js.map +0 -1
- package/dist/editors/property-editor-chartjs-pie.d.ts +0 -18
- package/dist/editors/property-editor-chartjs-pie.js +0 -74
- package/dist/editors/property-editor-chartjs-pie.js.map +0 -1
- package/dist/editors/property-editor-chartjs-radar.d.ts +0 -8
- package/dist/editors/property-editor-chartjs-radar.js +0 -36
- package/dist/editors/property-editor-chartjs-radar.js.map +0 -1
- package/dist/editors/property-editor-chartjs-styles.d.ts +0 -1
- package/dist/editors/property-editor-chartjs-styles.js +0 -167
- package/dist/editors/property-editor-chartjs-styles.js.map +0 -1
- package/dist/editors/property-editor-chartjs.d.ts +0 -10
- package/dist/editors/property-editor-chartjs.js +0 -79
- package/dist/editors/property-editor-chartjs.js.map +0 -1
- package/src/editors/property-editor-chartjs-abstract.ts +0 -324
- package/src/editors/property-editor-chartjs-hbar.ts +0 -157
- package/src/editors/property-editor-chartjs-mixed.ts +0 -199
- package/src/editors/property-editor-chartjs-multi-series-abstract.ts +0 -382
- package/src/editors/property-editor-chartjs-pie.ts +0 -86
- package/src/editors/property-editor-chartjs-radar.ts +0 -39
- package/src/editors/property-editor-chartjs-styles.ts +0 -167
- package/src/editors/property-editor-chartjs.ts +0 -79
@@ -1,363 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import '@material/web/icon/icon.js';
|
3
|
-
import '@operato/i18n/ox-i18n.js';
|
4
|
-
import { css, html } from 'lit';
|
5
|
-
import { query } from 'lit/decorators.js';
|
6
|
-
import PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract';
|
7
|
-
class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEditorChartJSAbstract {
|
8
|
-
constructor() {
|
9
|
-
super();
|
10
|
-
this.value = {
|
11
|
-
options: {
|
12
|
-
legend: {},
|
13
|
-
scales: {
|
14
|
-
xAxes: [
|
15
|
-
{
|
16
|
-
ticks: {}
|
17
|
-
}
|
18
|
-
],
|
19
|
-
yAxes: [
|
20
|
-
{
|
21
|
-
ticks: {}
|
22
|
-
}
|
23
|
-
]
|
24
|
-
}
|
25
|
-
},
|
26
|
-
data: {
|
27
|
-
datasets: []
|
28
|
-
}
|
29
|
-
};
|
30
|
-
}
|
31
|
-
get color() {
|
32
|
-
var oldVersionColor = this.series.backgroundColor;
|
33
|
-
if (this.series.type == 'line')
|
34
|
-
oldVersionColor = this.series.borderColor;
|
35
|
-
if (this.series.type == 'radar')
|
36
|
-
oldVersionColor = this.series.borderColor;
|
37
|
-
return this.series.color || oldVersionColor;
|
38
|
-
}
|
39
|
-
set color(color) {
|
40
|
-
this.series.color = color;
|
41
|
-
delete this.series.backgroundColor;
|
42
|
-
delete this.series.borderColor;
|
43
|
-
}
|
44
|
-
get xAxes0() {
|
45
|
-
return this.scales.xAxes[0];
|
46
|
-
}
|
47
|
-
set xAxes0(xAxes0) {
|
48
|
-
this.scales.xAxes[0] = xAxes0;
|
49
|
-
}
|
50
|
-
get yAxes0() {
|
51
|
-
return this.scales.yAxes[0];
|
52
|
-
}
|
53
|
-
set yAxes0(yAxes0) {
|
54
|
-
this.scales.yAxes[0] = yAxes0;
|
55
|
-
}
|
56
|
-
get yAxes1() {
|
57
|
-
return this.scales.yAxes[1];
|
58
|
-
}
|
59
|
-
set yAxes1(yAxes1) {
|
60
|
-
this.scales.yAxes[1] = yAxes1;
|
61
|
-
}
|
62
|
-
get multiAxis() {
|
63
|
-
return this.value.options.multiAxis;
|
64
|
-
}
|
65
|
-
set multiAxis(multiAxis) {
|
66
|
-
this.value.options.multiAxis = multiAxis;
|
67
|
-
}
|
68
|
-
get tabContainer() {
|
69
|
-
return this.tabs;
|
70
|
-
}
|
71
|
-
firstUpdated() {
|
72
|
-
var _a;
|
73
|
-
super.firstUpdated();
|
74
|
-
(_a = this.tabContainer) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', e => {
|
75
|
-
this._onTabScroll(e);
|
76
|
-
});
|
77
|
-
}
|
78
|
-
editorTemplate(props) {
|
79
|
-
return html `
|
80
|
-
<input type="checkbox" value-key="multiAxis" .checked=${this.multiAxis} />
|
81
|
-
<label> <ox-i18n msgid="label.multi-axis">Multi Axis</ox-i18n> </label>
|
82
|
-
|
83
|
-
<legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
|
84
|
-
|
85
|
-
${this.multiSeriesTabTemplate()}
|
86
|
-
|
87
|
-
<legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
|
88
|
-
|
89
|
-
<label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
|
90
|
-
<input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
|
91
|
-
|
92
|
-
<label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
|
93
|
-
<input type="text" value-key="xAxes0.axisTitle" .value=${this.xAxes0.axisTitle || ''} />
|
94
|
-
|
95
|
-
<label> <ox-i18n msgid="label.thickness">Thickness</ox-i18n> </label>
|
96
|
-
<input type="number" value-key="xAxes0.barPercentage" .value=${this.xAxes0.barPercentage} />
|
97
|
-
|
98
|
-
<input type="checkbox" value-key="value.options.xGridLine" .checked=${this.value.options.xGridLine} />
|
99
|
-
<label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
|
100
|
-
|
101
|
-
<input type="checkbox" value-key="xAxes0.ticks.display" .checked=${this.xAxes0.ticks.display} />
|
102
|
-
<label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
|
103
|
-
|
104
|
-
<legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
|
105
|
-
|
106
|
-
<label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
|
107
|
-
<input type="text" value-key="yAxes0.axisTitle" .value=${this.yAxes0.axisTitle || ''} />
|
108
|
-
|
109
|
-
<input type="checkbox" value-key="yAxes0.ticks.autoMin" .checked=${this.yAxes0.ticks.autoMin} />
|
110
|
-
<label> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
|
111
|
-
|
112
|
-
<input type="checkbox" value-key="yAxes0.ticks.autoMax" .checked=${this.yAxes0.ticks.autoMax} />
|
113
|
-
<label> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
|
114
|
-
|
115
|
-
${!this.yAxes0.ticks.autoMin
|
116
|
-
? html `
|
117
|
-
<label> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
|
118
|
-
<input type="number" value-key="yAxes0.ticks.min" .value=${this.yAxes0.ticks.min} />
|
119
|
-
`
|
120
|
-
: html ``}
|
121
|
-
${!this.yAxes0.ticks.autoMax
|
122
|
-
? html `
|
123
|
-
<label> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
|
124
|
-
<input type="number" value-key="yAxes0.ticks.max" .value=${this.yAxes0.ticks.max} />
|
125
|
-
`
|
126
|
-
: html ``}
|
127
|
-
|
128
|
-
<label> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
|
129
|
-
<input type="number" value-key="yAxes0.ticks.stepSize" .value=${this.yAxes0.ticks.stepSize} />
|
130
|
-
|
131
|
-
<input type="checkbox" value-key="value.options.yGridLine" .checked=${this.value.options.yGridLine} />
|
132
|
-
<label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
|
133
|
-
|
134
|
-
<input type="checkbox" value-key="yAxes0.ticks.display" .checked=${this.yAxes0.ticks.display} />
|
135
|
-
<label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
|
136
|
-
|
137
|
-
${this.value.options.multiAxis
|
138
|
-
? html `
|
139
|
-
<legend><ox-i18n msgid="label.y-2nd-axes">Y 2nd Axes</ox-i18n></legend>
|
140
|
-
|
141
|
-
<label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
|
142
|
-
<input type="text" value-key="yAxes1.axisTitle" .value=${this.yAxes1.axisTitle || ''} />
|
143
|
-
|
144
|
-
<input type="checkbox" value-key="yAxes1.ticks.autoMin" .checked=${this.yAxes1.ticks.autoMin} />
|
145
|
-
<label> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
|
146
|
-
|
147
|
-
<input type="checkbox" value-key="yAxes1.ticks.autoMax" .checked=${this.yAxes1.ticks.autoMax} />
|
148
|
-
<label> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
|
149
|
-
|
150
|
-
${!this.yAxes1.ticks.autoMin
|
151
|
-
? html `
|
152
|
-
<label> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
|
153
|
-
<input type="number" value-key="yAxes1.ticks.min" .value=${this.yAxes1.ticks.min} />
|
154
|
-
`
|
155
|
-
: html ``}
|
156
|
-
${!this.yAxes1.ticks.autoMax
|
157
|
-
? html `
|
158
|
-
<label> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
|
159
|
-
<input type="number" value-key="yAxes1.ticks.max" .value=${this.yAxes1.ticks.max} />
|
160
|
-
`
|
161
|
-
: html ``}
|
162
|
-
|
163
|
-
<label> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
|
164
|
-
<input type="number" value-key="yAxes1.ticks.stepSize" .value=${this.yAxes1.ticks.stepSize} />
|
165
|
-
|
166
|
-
<input type="checkbox" value-key="value.options.y2ndGridLine" .checked=${this.value.options.y2ndGridLine} />
|
167
|
-
<label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
|
168
|
-
|
169
|
-
<input type="checkbox" value-key="yAxes1.ticks.display" .checked=${this.yAxes1.ticks.display} />
|
170
|
-
<label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
|
171
|
-
`
|
172
|
-
: html ``}
|
173
|
-
`;
|
174
|
-
}
|
175
|
-
multiSeriesTabTemplate() {
|
176
|
-
return html `
|
177
|
-
<div id="series-properties-container" fullwidth>
|
178
|
-
<div id="tab-header">
|
179
|
-
<md-icon
|
180
|
-
id="tab-nav-left-button"
|
181
|
-
@tap=${(e) => {
|
182
|
-
this._onTabScrollNavLeft(e);
|
183
|
-
}}
|
184
|
-
disabled
|
185
|
-
>chevron_left</md-icon
|
186
|
-
>
|
187
|
-
<div
|
188
|
-
id="tabs"
|
189
|
-
@change=${(e) => {
|
190
|
-
this.currentSeriesIndex = e.target.activeTabIndex;
|
191
|
-
}}
|
192
|
-
active-tab-index=${this.currentSeriesIndex}
|
193
|
-
fit-container
|
194
|
-
>
|
195
|
-
${this.datasets.map((dataset, index) => html `
|
196
|
-
<div
|
197
|
-
data-series=${index + 1}
|
198
|
-
data-tab-index=${index}
|
199
|
-
tab
|
200
|
-
?selected=${index == this.currentSeriesIndex}
|
201
|
-
@click=${(e) => {
|
202
|
-
const target = e.target;
|
203
|
-
this.currentSeriesIndex = Number(target.getAttribute('data-tab-index'));
|
204
|
-
}}
|
205
|
-
>
|
206
|
-
${index + 1}
|
207
|
-
${!this.datasets || (this.datasets.length != 1 && this.currentSeriesIndex == index)
|
208
|
-
? html ` <md-icon @tap="${(e) => this.onTapRemoveCurrentTab(e)}"> close </md-icon> `
|
209
|
-
: html ``}
|
210
|
-
</div>
|
211
|
-
`)}
|
212
|
-
</div>
|
213
|
-
<md-icon
|
214
|
-
id="tab-nav-right-button"
|
215
|
-
@click=${(e) => {
|
216
|
-
this._onTabScrollNavRight(e);
|
217
|
-
}}
|
218
|
-
disabled
|
219
|
-
>chevron_right</md-icon
|
220
|
-
>
|
221
|
-
</div>
|
222
|
-
<div id="add-series-button-container">
|
223
|
-
<md-icon id="add-series-button" @tap=${(e) => this.onTapAddTab(e)}>add</md-icon>
|
224
|
-
</div>
|
225
|
-
|
226
|
-
<div class="tab-content">
|
227
|
-
<label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
|
228
|
-
<input type="text" value-key="dataKey" .value=${this.dataKey} />
|
229
|
-
|
230
|
-
${this.value.type == 'bar'
|
231
|
-
? html `
|
232
|
-
<label> <ox-i18n msgid="label.type">type</ox-i18n> </label>
|
233
|
-
<select class="select-content" value-key="series.type" .value=${this.series.type}>
|
234
|
-
<option value="bar" selected>bar</option>
|
235
|
-
<option value="line">line</option>
|
236
|
-
</select>
|
237
|
-
`
|
238
|
-
: html ``}
|
239
|
-
|
240
|
-
<label> <ox-i18n msgid="label.label">label</ox-i18n> </label>
|
241
|
-
<input type="text" value-key="series.label" .value=${this.series.label} />
|
242
|
-
|
243
|
-
${this.series.type == 'line'
|
244
|
-
? html `
|
245
|
-
<label> <ox-i18n msgid="label.line-tension">line tension</ox-i18n> </label>
|
246
|
-
<select class="select-content" value-key="series.lineTension" .value=${this.series.lineTension}>
|
247
|
-
<option value="0.4">smooth</option>
|
248
|
-
<option value="0">angled</option>
|
249
|
-
</select>
|
250
|
-
`
|
251
|
-
: html ``}
|
252
|
-
${this.series.type == 'line'
|
253
|
-
? html `
|
254
|
-
<label> <ox-i18n msgid="label.border-width">border width</ox-i18n> </label>
|
255
|
-
<input type="number" value-key="series.borderWidth" .value=${this.series.borderWidth} />
|
256
|
-
`
|
257
|
-
: html ``}
|
258
|
-
|
259
|
-
<label> <ox-i18n msgid="label.color">color</ox-i18n> </label>
|
260
|
-
<ox-input-color value-key="color" .value=${this.color}></ox-input-color>
|
261
|
-
|
262
|
-
${this.series.type == 'line'
|
263
|
-
? html `
|
264
|
-
<label> <ox-i18n msgid="label.point-shape">point shape</ox-i18n> </label>
|
265
|
-
<select class="select-content" value-key="series.pointStyle" .value=${this.series.pointStyle}>
|
266
|
-
<option value="circle">⚬</option>
|
267
|
-
<option value="triangle">▵</option>
|
268
|
-
<option value="rect">□</option>
|
269
|
-
<option value="rectRot">◇</option>
|
270
|
-
<option value="cross">+</option>
|
271
|
-
<option value="crossRot">⨉</option>
|
272
|
-
<option value="star">✱</option>
|
273
|
-
<option value="line">―</option>
|
274
|
-
<option value="dash">┄</option>
|
275
|
-
</select>
|
276
|
-
|
277
|
-
<label> <ox-i18n msgid="label.point-size">point size</ox-i18n> </label>
|
278
|
-
<input type="number" value-key="series.pointRadius" .value=${this.series.pointRadius} />
|
279
|
-
`
|
280
|
-
: html ``} <label> <ox-i18n msgid="label.stack-group">Stack group</ox-i18n> </label>
|
281
|
-
<input type="text" value-key="series.stack" .value=${this.series.stack || ''} /> ${this.series.type == 'line'
|
282
|
-
? html `
|
283
|
-
<input type="checkbox" value-key="series.fill" .checked=${this.series.fill} />
|
284
|
-
<label> <ox-i18n msgid="label.fill">fill</ox-i18n> </label>
|
285
|
-
`
|
286
|
-
: html ``}
|
287
|
-
${this.multiAxis
|
288
|
-
? html `
|
289
|
-
<label> <ox-i18n msgid="label.target-axis">target axis</ox-i18n> </label>
|
290
|
-
<select class="select-content" value-key="series.yAxisID" .value=${this.series.yAxisID}>
|
291
|
-
<option value="left">left</option>
|
292
|
-
<option value="right">right</option>
|
293
|
-
</select>
|
294
|
-
`
|
295
|
-
: html ``}
|
296
|
-
${this.displayValueTemplate()}
|
297
|
-
</div>
|
298
|
-
</div>
|
299
|
-
`;
|
300
|
-
}
|
301
|
-
_onTabScroll(e) {
|
302
|
-
if (!this.tabContainer) {
|
303
|
-
return;
|
304
|
-
}
|
305
|
-
if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {
|
306
|
-
this.tabNavLeftButton.setAttribute('disabled', '');
|
307
|
-
this.tabNavRightButton.setAttribute('disabled', '');
|
308
|
-
}
|
309
|
-
// left-end
|
310
|
-
else if (this.tabContainer.scrollLeft == 0) {
|
311
|
-
this.tabNavLeftButton.setAttribute('disabled', '');
|
312
|
-
this.tabNavRightButton.removeAttribute('disabled');
|
313
|
-
}
|
314
|
-
// right-end
|
315
|
-
else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {
|
316
|
-
this.tabNavLeftButton.removeAttribute('disabled');
|
317
|
-
this.tabNavRightButton.setAttribute('disabled', '');
|
318
|
-
}
|
319
|
-
else {
|
320
|
-
this.tabNavLeftButton.removeAttribute('disabled');
|
321
|
-
this.tabNavRightButton.removeAttribute('disabled');
|
322
|
-
}
|
323
|
-
}
|
324
|
-
_onTabScrollNavLeft(e) {
|
325
|
-
if (!this.tabContainer) {
|
326
|
-
return;
|
327
|
-
}
|
328
|
-
this.tabContainer.style.scrollBehavior = 'smooth';
|
329
|
-
this.tabContainer.scrollLeft -= this.tabContainer.clientWidth;
|
330
|
-
this.tabContainer.style.scrollBehavior = 'auto';
|
331
|
-
}
|
332
|
-
_onTabScrollNavRight(e) {
|
333
|
-
if (!this.tabContainer) {
|
334
|
-
return;
|
335
|
-
}
|
336
|
-
this.tabContainer.style.scrollBehavior = 'smooth';
|
337
|
-
this.tabContainer.scrollLeft += this.tabContainer.clientWidth;
|
338
|
-
this.tabContainer.style.scrollBehavior = 'auto';
|
339
|
-
}
|
340
|
-
}
|
341
|
-
PropertyEditorChartJSMultiSeriesAbstract.styles = [
|
342
|
-
...PropertyEditorChartJSAbstract.styles,
|
343
|
-
css `
|
344
|
-
md-tabs {
|
345
|
-
background-color: rgb(204, 204, 204);
|
346
|
-
}
|
347
|
-
input[type='text'],
|
348
|
-
input[type='number'] {
|
349
|
-
border: 1px solid rgba(0, 0, 0, 0.2);
|
350
|
-
}
|
351
|
-
`
|
352
|
-
];
|
353
|
-
export default PropertyEditorChartJSMultiSeriesAbstract;
|
354
|
-
__decorate([
|
355
|
-
query('#tabs')
|
356
|
-
], PropertyEditorChartJSMultiSeriesAbstract.prototype, "tabs", void 0);
|
357
|
-
__decorate([
|
358
|
-
query('#tab-nav-left-button')
|
359
|
-
], PropertyEditorChartJSMultiSeriesAbstract.prototype, "tabNavLeftButton", void 0);
|
360
|
-
__decorate([
|
361
|
-
query('#tab-nav-right-button')
|
362
|
-
], PropertyEditorChartJSMultiSeriesAbstract.prototype, "tabNavRightButton", void 0);
|
363
|
-
//# sourceMappingURL=property-editor-chartjs-multi-series-abstract.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"property-editor-chartjs-multi-series-abstract.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs-multi-series-abstract.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html } from 'lit'\nimport { query } from 'lit/decorators.js'\n\nimport { Properties } from '@hatiolab/things-scene'\nimport { MdIcon } from '@material/web/icon/icon.js'\n\nimport PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract'\n\nexport default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEditorChartJSAbstract {\n static styles = [\n ...PropertyEditorChartJSAbstract.styles,\n css`\n md-tabs {\n background-color: rgb(204, 204, 204);\n }\n input[type='text'],\n input[type='number'] {\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n `\n ]\n\n constructor() {\n super()\n\n this.value = {\n options: {\n legend: {},\n scales: {\n xAxes: [\n {\n ticks: {}\n }\n ],\n yAxes: [\n {\n ticks: {}\n }\n ]\n }\n },\n data: {\n datasets: []\n }\n }\n }\n\n @query('#tabs') tabs!: HTMLElement\n @query('#tab-nav-left-button') tabNavLeftButton!: MdIcon\n @query('#tab-nav-right-button') tabNavRightButton!: MdIcon\n\n get color() {\n var oldVersionColor = this.series.backgroundColor\n if (this.series.type == 'line') oldVersionColor = this.series.borderColor\n if (this.series.type == 'radar') oldVersionColor = this.series.borderColor\n return this.series.color || oldVersionColor\n }\n\n set color(color) {\n this.series.color = color\n delete this.series.backgroundColor\n delete this.series.borderColor\n }\n\n get xAxes0() {\n return this.scales.xAxes[0]\n }\n\n set xAxes0(xAxes0) {\n this.scales.xAxes[0] = xAxes0\n }\n\n get yAxes0() {\n return this.scales.yAxes[0]\n }\n\n set yAxes0(yAxes0) {\n this.scales.yAxes[0] = yAxes0\n }\n\n get yAxes1() {\n return this.scales.yAxes[1]\n }\n\n set yAxes1(yAxes1) {\n this.scales.yAxes[1] = yAxes1\n }\n\n get multiAxis() {\n return this.value.options.multiAxis\n }\n\n set multiAxis(multiAxis) {\n this.value.options.multiAxis = multiAxis\n }\n\n get tabContainer(): HTMLElement | null | undefined {\n return this.tabs\n }\n\n firstUpdated() {\n super.firstUpdated()\n\n this.tabContainer?.addEventListener('scroll', e => {\n this._onTabScroll(e)\n })\n }\n\n editorTemplate(props: Properties) {\n return html`\n <input type=\"checkbox\" value-key=\"multiAxis\" .checked=${this.multiAxis} />\n <label> <ox-i18n msgid=\"label.multi-axis\">Multi Axis</ox-i18n> </label>\n\n <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n ${this.multiSeriesTabTemplate()}\n\n <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n <label> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input type=\"text\" value-key=\"labelDataKey\" .value=${this.labelDataKey} />\n\n <label> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input type=\"text\" value-key=\"xAxes0.axisTitle\" .value=${this.xAxes0.axisTitle || ''} />\n\n <label> <ox-i18n msgid=\"label.thickness\">Thickness</ox-i18n> </label>\n <input type=\"number\" value-key=\"xAxes0.barPercentage\" .value=${this.xAxes0.barPercentage} />\n\n <input type=\"checkbox\" value-key=\"value.options.xGridLine\" .checked=${this.value.options.xGridLine} />\n <label> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input type=\"checkbox\" value-key=\"xAxes0.ticks.display\" .checked=${this.xAxes0.ticks.display} />\n <label> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n <label> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input type=\"text\" value-key=\"yAxes0.axisTitle\" .value=${this.yAxes0.axisTitle || ''} />\n\n <input type=\"checkbox\" value-key=\"yAxes0.ticks.autoMin\" .checked=${this.yAxes0.ticks.autoMin} />\n <label> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n <input type=\"checkbox\" value-key=\"yAxes0.ticks.autoMax\" .checked=${this.yAxes0.ticks.autoMax} />\n <label> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n ${!this.yAxes0.ticks.autoMin\n ? html`\n <label> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n <input type=\"number\" value-key=\"yAxes0.ticks.min\" .value=${this.yAxes0.ticks.min} />\n `\n : html``}\n ${!this.yAxes0.ticks.autoMax\n ? html`\n <label> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n <input type=\"number\" value-key=\"yAxes0.ticks.max\" .value=${this.yAxes0.ticks.max} />\n `\n : html``}\n\n <label> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n <input type=\"number\" value-key=\"yAxes0.ticks.stepSize\" .value=${this.yAxes0.ticks.stepSize} />\n\n <input type=\"checkbox\" value-key=\"value.options.yGridLine\" .checked=${this.value.options.yGridLine} />\n <label> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input type=\"checkbox\" value-key=\"yAxes0.ticks.display\" .checked=${this.yAxes0.ticks.display} />\n <label> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n ${this.value.options.multiAxis\n ? html`\n <legend><ox-i18n msgid=\"label.y-2nd-axes\">Y 2nd Axes</ox-i18n></legend>\n\n <label> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input type=\"text\" value-key=\"yAxes1.axisTitle\" .value=${this.yAxes1.axisTitle || ''} />\n\n <input type=\"checkbox\" value-key=\"yAxes1.ticks.autoMin\" .checked=${this.yAxes1.ticks.autoMin} />\n <label> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n <input type=\"checkbox\" value-key=\"yAxes1.ticks.autoMax\" .checked=${this.yAxes1.ticks.autoMax} />\n <label> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n ${!this.yAxes1.ticks.autoMin\n ? html`\n <label> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n <input type=\"number\" value-key=\"yAxes1.ticks.min\" .value=${this.yAxes1.ticks.min} />\n `\n : html``}\n ${!this.yAxes1.ticks.autoMax\n ? html`\n <label> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n <input type=\"number\" value-key=\"yAxes1.ticks.max\" .value=${this.yAxes1.ticks.max} />\n `\n : html``}\n\n <label> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n <input type=\"number\" value-key=\"yAxes1.ticks.stepSize\" .value=${this.yAxes1.ticks.stepSize} />\n\n <input type=\"checkbox\" value-key=\"value.options.y2ndGridLine\" .checked=${this.value.options.y2ndGridLine} />\n <label> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input type=\"checkbox\" value-key=\"yAxes1.ticks.display\" .checked=${this.yAxes1.ticks.display} />\n <label> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n `\n : html``}\n `\n }\n\n multiSeriesTabTemplate() {\n return html`\n <div id=\"series-properties-container\" fullwidth>\n <div id=\"tab-header\">\n <md-icon\n id=\"tab-nav-left-button\"\n @tap=${(e: Event) => {\n this._onTabScrollNavLeft(e)\n }}\n disabled\n >chevron_left</md-icon\n >\n <div\n id=\"tabs\"\n @change=${(e: Event) => {\n this.currentSeriesIndex = (e.target as any).activeTabIndex\n }}\n active-tab-index=${this.currentSeriesIndex}\n fit-container\n >\n ${this.datasets.map(\n (dataset: any, index: number) => html`\n <div\n data-series=${index + 1}\n data-tab-index=${index}\n tab\n ?selected=${index == this.currentSeriesIndex}\n @click=${(e: Event) => {\n const target = e.target as HTMLDivElement\n this.currentSeriesIndex = Number(target.getAttribute('data-tab-index'))\n }}\n >\n ${index + 1}\n ${!this.datasets || (this.datasets.length != 1 && this.currentSeriesIndex == index)\n ? html` <md-icon @tap=\"${(e: Event) => this.onTapRemoveCurrentTab(e)}\"> close </md-icon> `\n : html``}\n </div>\n `\n )}\n </div>\n <md-icon\n id=\"tab-nav-right-button\"\n @click=${(e: Event) => {\n this._onTabScrollNavRight(e)\n }}\n disabled\n >chevron_right</md-icon\n >\n </div>\n <div id=\"add-series-button-container\">\n <md-icon id=\"add-series-button\" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>\n </div>\n\n <div class=\"tab-content\">\n <label> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input type=\"text\" value-key=\"dataKey\" .value=${this.dataKey} />\n\n ${this.value.type == 'bar'\n ? html`\n <label> <ox-i18n msgid=\"label.type\">type</ox-i18n> </label>\n <select class=\"select-content\" value-key=\"series.type\" .value=${this.series.type}>\n <option value=\"bar\" selected>bar</option>\n <option value=\"line\">line</option>\n </select>\n `\n : html``}\n\n <label> <ox-i18n msgid=\"label.label\">label</ox-i18n> </label>\n <input type=\"text\" value-key=\"series.label\" .value=${this.series.label} />\n\n ${this.series.type == 'line'\n ? html`\n <label> <ox-i18n msgid=\"label.line-tension\">line tension</ox-i18n> </label>\n <select class=\"select-content\" value-key=\"series.lineTension\" .value=${this.series.lineTension}>\n <option value=\"0.4\">smooth</option>\n <option value=\"0\">angled</option>\n </select>\n `\n : html``}\n ${this.series.type == 'line'\n ? html`\n <label> <ox-i18n msgid=\"label.border-width\">border width</ox-i18n> </label>\n <input type=\"number\" value-key=\"series.borderWidth\" .value=${this.series.borderWidth} />\n `\n : html``}\n\n <label> <ox-i18n msgid=\"label.color\">color</ox-i18n> </label>\n <ox-input-color value-key=\"color\" .value=${this.color}></ox-input-color>\n\n ${this.series.type == 'line'\n ? html`\n <label> <ox-i18n msgid=\"label.point-shape\">point shape</ox-i18n> </label>\n <select class=\"select-content\" value-key=\"series.pointStyle\" .value=${this.series.pointStyle}>\n <option value=\"circle\">⚬</option>\n <option value=\"triangle\">▵</option>\n <option value=\"rect\">□</option>\n <option value=\"rectRot\">◇</option>\n <option value=\"cross\">+</option>\n <option value=\"crossRot\">⨉</option>\n <option value=\"star\">✱</option>\n <option value=\"line\">―</option>\n <option value=\"dash\">┄</option>\n </select>\n\n <label> <ox-i18n msgid=\"label.point-size\">point size</ox-i18n> </label>\n <input type=\"number\" value-key=\"series.pointRadius\" .value=${this.series.pointRadius} />\n `\n : html``} <label> <ox-i18n msgid=\"label.stack-group\">Stack group</ox-i18n> </label>\n <input type=\"text\" value-key=\"series.stack\" .value=${this.series.stack || ''} /> ${this.series.type == 'line'\n ? html`\n <input type=\"checkbox\" value-key=\"series.fill\" .checked=${this.series.fill} />\n <label> <ox-i18n msgid=\"label.fill\">fill</ox-i18n> </label>\n `\n : html``}\n ${this.multiAxis\n ? html`\n <label> <ox-i18n msgid=\"label.target-axis\">target axis</ox-i18n> </label>\n <select class=\"select-content\" value-key=\"series.yAxisID\" .value=${this.series.yAxisID}>\n <option value=\"left\">left</option>\n <option value=\"right\">right</option>\n </select>\n `\n : html``}\n ${this.displayValueTemplate()}\n </div>\n </div>\n `\n }\n\n _onTabScroll(e: Event) {\n if (!this.tabContainer) {\n return\n }\n\n if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {\n this.tabNavLeftButton.setAttribute('disabled', '')\n this.tabNavRightButton.setAttribute('disabled', '')\n }\n // left-end\n else if (this.tabContainer.scrollLeft == 0) {\n this.tabNavLeftButton.setAttribute('disabled', '')\n this.tabNavRightButton.removeAttribute('disabled')\n }\n // right-end\n else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {\n this.tabNavLeftButton.removeAttribute('disabled')\n this.tabNavRightButton.setAttribute('disabled', '')\n } else {\n this.tabNavLeftButton.removeAttribute('disabled')\n this.tabNavRightButton.removeAttribute('disabled')\n }\n }\n\n _onTabScrollNavLeft(e: Event) {\n if (!this.tabContainer) {\n return\n }\n\n this.tabContainer.style.scrollBehavior = 'smooth'\n this.tabContainer.scrollLeft -= this.tabContainer.clientWidth\n this.tabContainer.style.scrollBehavior = 'auto'\n }\n\n _onTabScrollNavRight(e: Event) {\n if (!this.tabContainer) {\n return\n }\n\n this.tabContainer.style.scrollBehavior = 'smooth'\n this.tabContainer.scrollLeft += this.tabContainer.clientWidth\n this.tabContainer.style.scrollBehavior = 'auto'\n }\n}\n"]}
|
@@ -1,18 +0,0 @@
|
|
1
|
-
import '@operato/i18n/ox-i18n.js';
|
2
|
-
import { Properties } from '@hatiolab/things-scene';
|
3
|
-
import PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract';
|
4
|
-
export default class PropertyEditorChartJSPie extends PropertyEditorChartJSAbstract {
|
5
|
-
static styles: import("lit").CSSResult[];
|
6
|
-
constructor();
|
7
|
-
get valueFormat(): any;
|
8
|
-
set valueFormat(valueFormat: any);
|
9
|
-
get valuePrefix(): any;
|
10
|
-
set valuePrefix(valuePrefix: any);
|
11
|
-
get valueSuffix(): any;
|
12
|
-
set valueSuffix(valueSuffix: any);
|
13
|
-
get color(): any;
|
14
|
-
set color(color: any);
|
15
|
-
get displayValue(): any;
|
16
|
-
set displayValue(displayValue: any);
|
17
|
-
editorTemplate(props: Properties): import("lit-html").TemplateResult<1>;
|
18
|
-
}
|
@@ -1,74 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import '@operato/i18n/ox-i18n.js';
|
3
|
-
import PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract';
|
4
|
-
import { customElement } from 'lit/decorators.js';
|
5
|
-
import { html } from 'lit';
|
6
|
-
let PropertyEditorChartJSPie = class PropertyEditorChartJSPie extends PropertyEditorChartJSAbstract {
|
7
|
-
constructor() {
|
8
|
-
super();
|
9
|
-
this.value = {
|
10
|
-
options: {
|
11
|
-
legend: {}
|
12
|
-
},
|
13
|
-
data: {
|
14
|
-
datasets: []
|
15
|
-
}
|
16
|
-
};
|
17
|
-
this.currentSeriesIndex = 0;
|
18
|
-
}
|
19
|
-
get valueFormat() {
|
20
|
-
return this.series.valueFormat;
|
21
|
-
}
|
22
|
-
set valueFormat(valueFormat) {
|
23
|
-
this.series.valueFormat = valueFormat;
|
24
|
-
}
|
25
|
-
get valuePrefix() {
|
26
|
-
return this.series.valuePrefix;
|
27
|
-
}
|
28
|
-
set valuePrefix(valuePrefix) {
|
29
|
-
this.series.valuePrefix = valuePrefix;
|
30
|
-
}
|
31
|
-
get valueSuffix() {
|
32
|
-
return this.series.valueSuffix;
|
33
|
-
}
|
34
|
-
set valueSuffix(valueSuffix) {
|
35
|
-
this.series.valueSuffix = valueSuffix;
|
36
|
-
}
|
37
|
-
get color() {
|
38
|
-
return this.series.color || this.series.backgroundColor;
|
39
|
-
}
|
40
|
-
set color(color) {
|
41
|
-
this.series.color = color;
|
42
|
-
delete this.series.backgroundColor;
|
43
|
-
}
|
44
|
-
get displayValue() {
|
45
|
-
return this.series.displayValue;
|
46
|
-
}
|
47
|
-
set displayValue(displayValue) {
|
48
|
-
this.series.displayValue = displayValue;
|
49
|
-
}
|
50
|
-
editorTemplate(props) {
|
51
|
-
return html `
|
52
|
-
<legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
|
53
|
-
|
54
|
-
<label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
|
55
|
-
<input type="text" value-key="dataKey" .value=${this.series.dataKey} />
|
56
|
-
|
57
|
-
<label> <ox-i18n msgid="label.color">color</ox-i18n> </label>
|
58
|
-
<ox-input-multiple-colors value-key="color" .value=${this.color}></ox-input-multiple-colors>
|
59
|
-
|
60
|
-
${this.displayValueTemplate()}
|
61
|
-
|
62
|
-
<legend><ox-i18n msgid="label.axes">Axes</ox-i18n></legend>
|
63
|
-
|
64
|
-
<label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
|
65
|
-
<input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
|
66
|
-
`;
|
67
|
-
}
|
68
|
-
};
|
69
|
-
PropertyEditorChartJSPie.styles = PropertyEditorChartJSAbstract.styles;
|
70
|
-
PropertyEditorChartJSPie = __decorate([
|
71
|
-
customElement('property-editor-chartjs-pie')
|
72
|
-
], PropertyEditorChartJSPie);
|
73
|
-
export default PropertyEditorChartJSPie;
|
74
|
-
//# sourceMappingURL=property-editor-chartjs-pie.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"property-editor-chartjs-pie.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs-pie.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAGjC,OAAO,6BAA6B,MAAM,oCAAoC,CAAA;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAGX,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,6BAA6B;IAGjF;QACE,KAAK,EAAE,CAAA;QAEP,IAAI,CAAC,KAAK,GAAG;YACX,OAAO,EAAE;gBACP,MAAM,EAAE,EAAE;aACX;YACD,IAAI,EAAE;gBACJ,QAAQ,EAAE,EAAE;aACb;SACF,CAAA;QAED,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAA;IAC7B,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAA;IAChC,CAAC;IAED,IAAI,WAAW,CAAC,WAAW;QACzB,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,WAAW,CAAA;IACvC,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAA;IAChC,CAAC;IAED,IAAI,WAAW,CAAC,WAAW;QACzB,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,WAAW,CAAA;IACvC,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAA;IAChC,CAAC;IAED,IAAI,WAAW,CAAC,WAAW;QACzB,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,WAAW,CAAA;IACvC,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,CAAC,eAAe,CAAA;IACzD,CAAC;IAED,IAAI,KAAK,CAAC,KAAK;QACb,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAA;QACzB,OAAO,IAAI,CAAC,MAAM,CAAC,eAAe,CAAA;IACpC,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,MAAM,CAAC,YAAY,CAAA;IACjC,CAAC;IAED,IAAI,YAAY,CAAC,YAAY;QAC3B,IAAI,CAAC,MAAM,CAAC,YAAY,GAAG,YAAY,CAAA;IACzC,CAAC;IAED,cAAc,CAAC,KAAiB;QAC9B,OAAO,IAAI,CAAA;;;;sDAIuC,IAAI,CAAC,MAAM,CAAC,OAAO;;;2DAGd,IAAI,CAAC,KAAK;;QAE7D,IAAI,CAAC,oBAAoB,EAAE;;;;;2DAKwB,IAAI,CAAC,YAAY;KACvE,CAAA;IACH,CAAC;;AA3EM,+BAAM,GAAG,6BAA6B,CAAC,MAAM,AAAvC,CAAuC;AADjC,wBAAwB;IAD5C,aAAa,CAAC,6BAA6B,CAAC;GACxB,wBAAwB,CA6E5C;eA7EoB,wBAAwB","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { Properties } from '@hatiolab/things-scene'\nimport PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('property-editor-chartjs-pie')\nexport default class PropertyEditorChartJSPie extends PropertyEditorChartJSAbstract {\n static styles = PropertyEditorChartJSAbstract.styles\n\n constructor() {\n super()\n\n this.value = {\n options: {\n legend: {}\n },\n data: {\n datasets: []\n }\n }\n\n this.currentSeriesIndex = 0\n }\n\n get valueFormat() {\n return this.series.valueFormat\n }\n\n set valueFormat(valueFormat) {\n this.series.valueFormat = valueFormat\n }\n\n get valuePrefix() {\n return this.series.valuePrefix\n }\n\n set valuePrefix(valuePrefix) {\n this.series.valuePrefix = valuePrefix\n }\n\n get valueSuffix() {\n return this.series.valueSuffix\n }\n\n set valueSuffix(valueSuffix) {\n this.series.valueSuffix = valueSuffix\n }\n\n get color() {\n return this.series.color || this.series.backgroundColor\n }\n\n set color(color) {\n this.series.color = color\n delete this.series.backgroundColor\n }\n\n get displayValue() {\n return this.series.displayValue\n }\n\n set displayValue(displayValue) {\n this.series.displayValue = displayValue\n }\n\n editorTemplate(props: Properties) {\n return html`\n <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n <label> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input type=\"text\" value-key=\"dataKey\" .value=${this.series.dataKey} />\n\n <label> <ox-i18n msgid=\"label.color\">color</ox-i18n> </label>\n <ox-input-multiple-colors value-key=\"color\" .value=${this.color}></ox-input-multiple-colors>\n\n ${this.displayValueTemplate()}\n\n <legend><ox-i18n msgid=\"label.axes\">Axes</ox-i18n></legend>\n\n <label> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input type=\"text\" value-key=\"labelDataKey\" .value=${this.labelDataKey} />\n `\n }\n}\n"]}
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import '@operato/i18n/ox-i18n.js';
|
2
|
-
import { Properties } from '@hatiolab/things-scene';
|
3
|
-
import PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract';
|
4
|
-
export default class PropertyEditorChartJSRadar extends PropertyEditorChartJSMultiSeriesAbstract {
|
5
|
-
static styles: import("lit").CSSResult[];
|
6
|
-
constructor();
|
7
|
-
editorTemplate(props: Properties): import("lit-html").TemplateResult<1>;
|
8
|
-
}
|
@@ -1,36 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import '@operato/i18n/ox-i18n.js';
|
3
|
-
import { html } from 'lit';
|
4
|
-
import { customElement } from 'lit/decorators.js';
|
5
|
-
import PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract';
|
6
|
-
let PropertyEditorChartJSRadar = class PropertyEditorChartJSRadar extends PropertyEditorChartJSMultiSeriesAbstract {
|
7
|
-
constructor() {
|
8
|
-
super();
|
9
|
-
this.value = {
|
10
|
-
options: {
|
11
|
-
legend: {}
|
12
|
-
},
|
13
|
-
data: {
|
14
|
-
datasets: []
|
15
|
-
}
|
16
|
-
};
|
17
|
-
}
|
18
|
-
editorTemplate(props) {
|
19
|
-
return html `
|
20
|
-
<legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
|
21
|
-
|
22
|
-
<div fullwidth>${this.multiSeriesTabTemplate()}</div>
|
23
|
-
|
24
|
-
<legend><ox-i18n msgid="label.axes">Axes</ox-i18n></legend>
|
25
|
-
|
26
|
-
<label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
|
27
|
-
<input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
|
28
|
-
`;
|
29
|
-
}
|
30
|
-
};
|
31
|
-
PropertyEditorChartJSRadar.styles = PropertyEditorChartJSMultiSeriesAbstract.styles;
|
32
|
-
PropertyEditorChartJSRadar = __decorate([
|
33
|
-
customElement('property-editor-chartjs-radar')
|
34
|
-
], PropertyEditorChartJSRadar);
|
35
|
-
export default PropertyEditorChartJSRadar;
|
36
|
-
//# sourceMappingURL=property-editor-chartjs-radar.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"property-editor-chartjs-radar.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs-radar.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAIjD,OAAO,wCAAwC,MAAM,iDAAiD,CAAA;AAGvF,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,wCAAwC;IAG9F;QACE,KAAK,EAAE,CAAA;QAEP,IAAI,CAAC,KAAK,GAAG;YACX,OAAO,EAAE;gBACP,MAAM,EAAE,EAAE;aACX;YACD,IAAI,EAAE;gBACJ,QAAQ,EAAE,EAAE;aACb;SACF,CAAA;IACH,CAAC;IAED,cAAc,CAAC,KAAiB;QAC9B,OAAO,IAAI,CAAA;;;uBAGQ,IAAI,CAAC,sBAAsB,EAAE;;;;;2DAKO,IAAI,CAAC,YAAY;KACvE,CAAA;IACH,CAAC;;AA1BM,iCAAM,GAAG,wCAAwC,CAAC,MAAM,AAAlD,CAAkD;AAD5C,0BAA0B;IAD9C,aAAa,CAAC,+BAA+B,CAAC;GAC1B,0BAA0B,CA4B9C;eA5BoB,0BAA0B","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { Properties } from '@hatiolab/things-scene'\n\nimport PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract'\n\n@customElement('property-editor-chartjs-radar')\nexport default class PropertyEditorChartJSRadar extends PropertyEditorChartJSMultiSeriesAbstract {\n static styles = PropertyEditorChartJSMultiSeriesAbstract.styles\n\n constructor() {\n super()\n\n this.value = {\n options: {\n legend: {}\n },\n data: {\n datasets: []\n }\n }\n }\n\n editorTemplate(props: Properties) {\n return html`\n <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n <div fullwidth>${this.multiSeriesTabTemplate()}</div>\n\n <legend><ox-i18n msgid=\"label.axes\">Axes</ox-i18n></legend>\n\n <label> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input type=\"text\" value-key=\"labelDataKey\" .value=${this.labelDataKey} />\n `\n }\n}\n"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const PropertyEditorChartJSStyles: import("lit").CSSResult;
|