@operato/scene-chartjs 7.0.0 → 7.0.2
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/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;
|