@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.
Files changed (51) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/config-converter.js +1 -1
  3. package/dist/config-converter.js.map +1 -1
  4. package/dist/editors/index.d.ts +1 -1
  5. package/dist/editors/index.js +2 -2
  6. package/dist/editors/index.js.map +1 -1
  7. package/dist/ox-chart.js +1 -1
  8. package/dist/ox-chart.js.map +1 -1
  9. package/package.json +6 -4
  10. package/schema.graphql +76 -40
  11. package/src/config-converter.ts +1 -1
  12. package/src/editors/index.ts +2 -2
  13. package/src/ox-chart.ts +1 -1
  14. package/translations/en.json +2 -1
  15. package/translations/ja.json +2 -1
  16. package/translations/ko.json +2 -1
  17. package/translations/ms.json +2 -1
  18. package/translations/zh.json +2 -1
  19. package/tsconfig.tsbuildinfo +1 -1
  20. package/dist/editors/property-editor-chartjs-abstract.d.ts +0 -50
  21. package/dist/editors/property-editor-chartjs-abstract.js +0 -273
  22. package/dist/editors/property-editor-chartjs-abstract.js.map +0 -1
  23. package/dist/editors/property-editor-chartjs-hbar.d.ts +0 -10
  24. package/dist/editors/property-editor-chartjs-hbar.js +0 -154
  25. package/dist/editors/property-editor-chartjs-hbar.js.map +0 -1
  26. package/dist/editors/property-editor-chartjs-mixed.d.ts +0 -17
  27. package/dist/editors/property-editor-chartjs-mixed.js +0 -186
  28. package/dist/editors/property-editor-chartjs-mixed.js.map +0 -1
  29. package/dist/editors/property-editor-chartjs-multi-series-abstract.d.ts +0 -29
  30. package/dist/editors/property-editor-chartjs-multi-series-abstract.js +0 -363
  31. package/dist/editors/property-editor-chartjs-multi-series-abstract.js.map +0 -1
  32. package/dist/editors/property-editor-chartjs-pie.d.ts +0 -18
  33. package/dist/editors/property-editor-chartjs-pie.js +0 -74
  34. package/dist/editors/property-editor-chartjs-pie.js.map +0 -1
  35. package/dist/editors/property-editor-chartjs-radar.d.ts +0 -8
  36. package/dist/editors/property-editor-chartjs-radar.js +0 -36
  37. package/dist/editors/property-editor-chartjs-radar.js.map +0 -1
  38. package/dist/editors/property-editor-chartjs-styles.d.ts +0 -1
  39. package/dist/editors/property-editor-chartjs-styles.js +0 -167
  40. package/dist/editors/property-editor-chartjs-styles.js.map +0 -1
  41. package/dist/editors/property-editor-chartjs.d.ts +0 -10
  42. package/dist/editors/property-editor-chartjs.js +0 -79
  43. package/dist/editors/property-editor-chartjs.js.map +0 -1
  44. package/src/editors/property-editor-chartjs-abstract.ts +0 -324
  45. package/src/editors/property-editor-chartjs-hbar.ts +0 -157
  46. package/src/editors/property-editor-chartjs-mixed.ts +0 -199
  47. package/src/editors/property-editor-chartjs-multi-series-abstract.ts +0 -382
  48. package/src/editors/property-editor-chartjs-pie.ts +0 -86
  49. package/src/editors/property-editor-chartjs-radar.ts +0 -39
  50. package/src/editors/property-editor-chartjs-styles.ts +0 -167
  51. 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;