@operato/scene-chartjs 8.0.0-alpha.4 → 8.0.0-beta.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +27 -0
- package/dist/chartjs.js +2 -1
- package/dist/chartjs.js.map +1 -1
- package/dist/ox-chart.js +4 -1
- package/dist/ox-chart.js.map +1 -1
- package/package.json +3 -3
- package/schema.graphql +22 -19
- package/src/chartjs.ts +2 -1
- package/src/ox-chart.ts +5 -2
- 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 -285
- 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 -158
- 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 -31
- package/dist/editors/property-editor-chartjs-multi-series-abstract.js +0 -371
- 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 -161
- 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 -77
- package/dist/editors/property-editor-chartjs.js.map +0 -1
@@ -1,285 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import '@operato/i18n/ox-i18n.js';
|
3
|
-
import { html, LitElement } from 'lit';
|
4
|
-
import { property } from 'lit/decorators.js';
|
5
|
-
import { random as randomColor, TinyColor } from '@ctrl/tinycolor';
|
6
|
-
import { PropertyEditorChartJSStyles } from './property-editor-chartjs-styles';
|
7
|
-
class PropertyEditorChartJSAbstract extends LitElement {
|
8
|
-
constructor() {
|
9
|
-
super(...arguments);
|
10
|
-
this.value = {};
|
11
|
-
this.currentSeriesIndex = 0;
|
12
|
-
}
|
13
|
-
render() {
|
14
|
-
return html `
|
15
|
-
<legend><ox-i18n msgid="label.chart">Chart</ox-i18n></legend>
|
16
|
-
|
17
|
-
<label> <ox-i18n msgid="label.theme">theme</ox-i18n> </label>
|
18
|
-
<select value-key="theme" class="select-content" .value=${this.theme}>
|
19
|
-
<option value="dark">dark</option>
|
20
|
-
<option value="light">light</option>
|
21
|
-
</select>
|
22
|
-
|
23
|
-
<input type="checkbox" value-key="tooltip" .checked=${this.tooltip} />
|
24
|
-
<label> <ox-i18n msgid="label.tooltip">Tooltip</ox-i18n> </label>
|
25
|
-
|
26
|
-
<input type="checkbox" value-key="animation" .checked=${this.animation} />
|
27
|
-
<label> <ox-i18n msgid="label.animation">Animation</ox-i18n> </label>
|
28
|
-
|
29
|
-
<input type="checkbox" value-key="display" .checked=${this.display} />
|
30
|
-
<label> <ox-i18n msgid="label.legend">Legend</ox-i18n> </label>
|
31
|
-
|
32
|
-
<input type="checkbox" value-key="stacked" .checked=${this.stacked} />
|
33
|
-
<label> <ox-i18n msgid="label.stacked">Stacked</ox-i18n> </label>
|
34
|
-
|
35
|
-
${this.display
|
36
|
-
? html `
|
37
|
-
<label> <ox-i18n msgid="label.position">Position</ox-i18n> </label>
|
38
|
-
<select value-key="position" class="select-content" .value=${this.position}>
|
39
|
-
<option value="top">top</option>
|
40
|
-
<option value="right">right</option>
|
41
|
-
<option value="bottom">bottom</option>
|
42
|
-
<option value="left">left</option>
|
43
|
-
</select>
|
44
|
-
`
|
45
|
-
: html ``}
|
46
|
-
${this.editorTemplate(this)}
|
47
|
-
`;
|
48
|
-
}
|
49
|
-
firstUpdated() {
|
50
|
-
this.renderRoot.addEventListener('change', this.onValuesChanged.bind(this));
|
51
|
-
}
|
52
|
-
displayValueTemplate() {
|
53
|
-
return html `
|
54
|
-
<label for="value-format"> <ox-i18n msgid="label.value-format">Value Format</ox-i18n> </label>
|
55
|
-
<input type="text" value-key="series.valueFormat" .value=${this.series.valueFormat || ''} list="format-list" />
|
56
|
-
<datalist id="format-list">
|
57
|
-
<option value="#,###."></option>
|
58
|
-
<option value="#,###.#"></option>
|
59
|
-
<option value="#,###.0"></option>
|
60
|
-
<option value="#,##0.#"></option>
|
61
|
-
<option value="#,##0.0"></option>
|
62
|
-
<option value="#,##0.0%"></option>
|
63
|
-
</datalist>
|
64
|
-
|
65
|
-
<label> <ox-i18n msgid="label.value-prefix">Value Prefix</ox-i18n> </label>
|
66
|
-
<input type="text" value-key="series.valuePrefix" .value=${this.series.valuePrefix || ''} />
|
67
|
-
|
68
|
-
<label> <ox-i18n msgid="label.value-suffix">Value suffix</ox-i18n> </label>
|
69
|
-
<input type="text" value-key="series.valueSuffix" .value=${this.series.valueSuffix || ''} />
|
70
|
-
|
71
|
-
<input type="checkbox" value-key="series.displayValue" .checked=${this.series.displayValue || false} />
|
72
|
-
<label> <ox-i18n msgid="label.value-display">Value Display</ox-i18n> </label>
|
73
|
-
|
74
|
-
${this.series.displayValue
|
75
|
-
? html `
|
76
|
-
<label> <ox-i18n msgid="label.font-color">Font Color</ox-i18n> </label>
|
77
|
-
<ox-input-color
|
78
|
-
value-key="series.defaultFontColor"
|
79
|
-
.value=${this.series.defaultFontColor || '#000'}
|
80
|
-
></ox-input-color>
|
81
|
-
<label> <ox-i18n msgid="label.font-size">Font Size</ox-i18n> </label>
|
82
|
-
<input type="number" value-key="series.defaultFontSize" .value=${this.series.defaultFontSize || 10} />
|
83
|
-
<label> <ox-i18n msgid="label.data-label-anchor">Position</ox-i18n> </label>
|
84
|
-
<select value-key="series.dataLabelAnchor" .value=${this.series.dataLabelAnchor || 'center'}>
|
85
|
-
<option value="start">Start</option>
|
86
|
-
<option value="center" selected>Center</option>
|
87
|
-
<option value="end">End</option>
|
88
|
-
</select>
|
89
|
-
<label> <ox-i18n msgid="label.data-label-offset">Offset</ox-i18n> </label>
|
90
|
-
<input type="number" value-key="series.dataLabelOffset" .value=${this.series.dataLabelOffset || 0} />
|
91
|
-
<label> <ox-i18n msgid="label.data-label-rotation">Rotation</ox-i18n> </label>
|
92
|
-
<input type="number" value-key="series.dataLabelRotation" .value=${this.series.dataLabelRotation || 0} />
|
93
|
-
`
|
94
|
-
: html ``}
|
95
|
-
`;
|
96
|
-
}
|
97
|
-
editorTemplate(props) {
|
98
|
-
return html ``;
|
99
|
-
}
|
100
|
-
get data() {
|
101
|
-
return this.value.data;
|
102
|
-
}
|
103
|
-
set data(data) {
|
104
|
-
this.value.data = data;
|
105
|
-
}
|
106
|
-
get datasets() {
|
107
|
-
if (!this.data.datasets)
|
108
|
-
this.data.datasets = [];
|
109
|
-
return this.data.datasets;
|
110
|
-
}
|
111
|
-
set datasets(datasets) {
|
112
|
-
this.datasets = datasets;
|
113
|
-
}
|
114
|
-
get series() {
|
115
|
-
if (!this.datasets[this.currentSeriesIndex])
|
116
|
-
this.datasets[this.currentSeriesIndex] = {};
|
117
|
-
return this.datasets[this.currentSeriesIndex];
|
118
|
-
}
|
119
|
-
set series(series) {
|
120
|
-
!this.data ? (this.data = { dataset: [series] }) : (this.datasets[this.currentSeriesIndex] = series);
|
121
|
-
}
|
122
|
-
set dataKey(key) {
|
123
|
-
this.series.dataKey = key;
|
124
|
-
}
|
125
|
-
get dataKey() {
|
126
|
-
return this.series.dataKey;
|
127
|
-
}
|
128
|
-
get legend() {
|
129
|
-
!this.value.options && (this.value.options = {});
|
130
|
-
return this.value.options.legend;
|
131
|
-
}
|
132
|
-
set legend(legend) {
|
133
|
-
this.value.options.legend = legend;
|
134
|
-
}
|
135
|
-
get theme() {
|
136
|
-
return this.value.options && this.value.options.theme;
|
137
|
-
}
|
138
|
-
set theme(theme) {
|
139
|
-
!this.value.options && (this.value.options = {});
|
140
|
-
this.value.options.theme = theme;
|
141
|
-
}
|
142
|
-
get tooltip() {
|
143
|
-
return !this.value.options || this.value.options.tooltip !== false; /* default true */
|
144
|
-
}
|
145
|
-
set tooltip(tooltip) {
|
146
|
-
this.value.options.tooltip = tooltip;
|
147
|
-
}
|
148
|
-
get animation() {
|
149
|
-
return !this.value.options || this.value.options.animation !== false; /* default true */
|
150
|
-
}
|
151
|
-
set animation(animation) {
|
152
|
-
this.value.options.animation = animation;
|
153
|
-
}
|
154
|
-
get scales() {
|
155
|
-
return this.value.options.scales;
|
156
|
-
}
|
157
|
-
set scales(scales) {
|
158
|
-
!this.value.options && (this.value.options = {});
|
159
|
-
this.value.options.scales = scales;
|
160
|
-
}
|
161
|
-
get display() {
|
162
|
-
return this.legend && this.legend.display;
|
163
|
-
}
|
164
|
-
set display(display) {
|
165
|
-
this.legend.display = display;
|
166
|
-
}
|
167
|
-
get position() {
|
168
|
-
return this.legend.position;
|
169
|
-
}
|
170
|
-
set position(position) {
|
171
|
-
this.legend.position = position;
|
172
|
-
}
|
173
|
-
get stacked() {
|
174
|
-
return this.value.options.stacked;
|
175
|
-
}
|
176
|
-
set stacked(stacked) {
|
177
|
-
this.value.options.stacked = stacked;
|
178
|
-
}
|
179
|
-
get labelDataKey() {
|
180
|
-
return this.data && this.data.labelDataKey;
|
181
|
-
}
|
182
|
-
set labelDataKey(labelDataKey) {
|
183
|
-
this.data.labelDataKey = labelDataKey;
|
184
|
-
}
|
185
|
-
set options(options) {
|
186
|
-
this.value.options = options;
|
187
|
-
}
|
188
|
-
get options() {
|
189
|
-
return this.value.options;
|
190
|
-
}
|
191
|
-
onValuesChanged(e) {
|
192
|
-
var element = e.target;
|
193
|
-
var key = element.getAttribute('value-key');
|
194
|
-
var value = element.value;
|
195
|
-
if (!key) {
|
196
|
-
return;
|
197
|
-
}
|
198
|
-
value = this._getElementValue(element);
|
199
|
-
var attrs = key.split('.');
|
200
|
-
var attr = attrs.shift() || '';
|
201
|
-
var variable = this;
|
202
|
-
while (attrs.length > 0) {
|
203
|
-
//@ts-ignore
|
204
|
-
variable = variable[attr];
|
205
|
-
attr = attrs.shift() || '';
|
206
|
-
}
|
207
|
-
//@ts-ignore
|
208
|
-
variable[attr] = value;
|
209
|
-
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
210
|
-
this.requestUpdate();
|
211
|
-
}
|
212
|
-
onTapAddTab(e) {
|
213
|
-
if (!this.value.data.datasets)
|
214
|
-
return;
|
215
|
-
var lastSeriesIndex = this.value.data.datasets.length;
|
216
|
-
var chartType = this.series.type || this.value.type;
|
217
|
-
var lastSeriesColor = new TinyColor(this.datasets[lastSeriesIndex - 1].backgroundColor);
|
218
|
-
var seriesModel = this._getSeriesModel({
|
219
|
-
chartType,
|
220
|
-
datasetsLength: lastSeriesIndex,
|
221
|
-
lastSeriesColor
|
222
|
-
});
|
223
|
-
this.value.data.datasets.push(seriesModel);
|
224
|
-
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
225
|
-
this.currentSeriesIndex = lastSeriesIndex;
|
226
|
-
}
|
227
|
-
onTapRemoveCurrentTab(e) {
|
228
|
-
if (!this.value.data.datasets)
|
229
|
-
return;
|
230
|
-
var currIndex = this.currentSeriesIndex;
|
231
|
-
this.value.data.datasets.splice(currIndex, 1);
|
232
|
-
currIndex--;
|
233
|
-
if (currIndex < 0)
|
234
|
-
currIndex = 0;
|
235
|
-
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
236
|
-
this.currentSeriesIndex = currIndex;
|
237
|
-
this.requestUpdate();
|
238
|
-
}
|
239
|
-
_getSeriesModel({ chartType, datasetsLength, lastSeriesColor }) {
|
240
|
-
var addSeriesOption = {
|
241
|
-
label: `series ${datasetsLength + 1}`,
|
242
|
-
data: [],
|
243
|
-
borderWidth: 1,
|
244
|
-
dataKey: '',
|
245
|
-
yAxisID: 'left',
|
246
|
-
color: randomColor({
|
247
|
-
hue: lastSeriesColor
|
248
|
-
}).toRgbString()
|
249
|
-
};
|
250
|
-
addSeriesOption.type = addSeriesOption.chartType = chartType;
|
251
|
-
return addSeriesOption;
|
252
|
-
}
|
253
|
-
_getElementValue(element) {
|
254
|
-
switch (element.tagName) {
|
255
|
-
case 'INPUT':
|
256
|
-
switch (element.type) {
|
257
|
-
case 'checkbox':
|
258
|
-
return element.checked;
|
259
|
-
case 'number':
|
260
|
-
return Number(element.value) || 0;
|
261
|
-
case 'text':
|
262
|
-
return String(element.value);
|
263
|
-
}
|
264
|
-
case 'PAPER-BUTTON':
|
265
|
-
return element.active;
|
266
|
-
case 'PAPER-LISTBOX':
|
267
|
-
return element.selected;
|
268
|
-
case 'THINGS-EDITOR-MULTIPLE-COLOR':
|
269
|
-
return element.values;
|
270
|
-
case 'THINGS-EDITOR-ANGLE-INPUT':
|
271
|
-
return Number(element.radian) || 0;
|
272
|
-
default:
|
273
|
-
return element.value;
|
274
|
-
}
|
275
|
-
}
|
276
|
-
}
|
277
|
-
PropertyEditorChartJSAbstract.styles = [PropertyEditorChartJSStyles];
|
278
|
-
export default PropertyEditorChartJSAbstract;
|
279
|
-
__decorate([
|
280
|
-
property({ type: Object })
|
281
|
-
], PropertyEditorChartJSAbstract.prototype, "value", void 0);
|
282
|
-
__decorate([
|
283
|
-
property({ type: Number })
|
284
|
-
], PropertyEditorChartJSAbstract.prototype, "currentSeriesIndex", void 0);
|
285
|
-
//# sourceMappingURL=property-editor-chartjs-abstract.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"property-editor-chartjs-abstract.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs-abstract.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { random as randomColor, TinyColor } from '@ctrl/tinycolor'\nimport { Properties } from '@hatiolab/things-scene'\n\nimport { PropertyEditorChartJSStyles } from './property-editor-chartjs-styles'\n\nexport default class PropertyEditorChartJSAbstract extends LitElement {\n static styles = [PropertyEditorChartJSStyles]\n\n @property({ type: Object }) value: any = {}\n @property({ type: Number }) currentSeriesIndex: number = 0\n\n render() {\n return html`\n <legend><ox-i18n msgid=\"label.chart\">Chart</ox-i18n></legend>\n\n <label> <ox-i18n msgid=\"label.theme\">theme</ox-i18n> </label>\n <select value-key=\"theme\" class=\"select-content\" .value=${this.theme}>\n <option value=\"dark\">dark</option>\n <option value=\"light\">light</option>\n </select>\n\n <input type=\"checkbox\" value-key=\"tooltip\" .checked=${this.tooltip} />\n <label> <ox-i18n msgid=\"label.tooltip\">Tooltip</ox-i18n> </label>\n\n <input type=\"checkbox\" value-key=\"animation\" .checked=${this.animation} />\n <label> <ox-i18n msgid=\"label.animation\">Animation</ox-i18n> </label>\n\n <input type=\"checkbox\" value-key=\"display\" .checked=${this.display} />\n <label> <ox-i18n msgid=\"label.legend\">Legend</ox-i18n> </label>\n\n <input type=\"checkbox\" value-key=\"stacked\" .checked=${this.stacked} />\n <label> <ox-i18n msgid=\"label.stacked\">Stacked</ox-i18n> </label>\n\n ${this.display\n ? html`\n <label> <ox-i18n msgid=\"label.position\">Position</ox-i18n> </label>\n <select value-key=\"position\" class=\"select-content\" .value=${this.position}>\n <option value=\"top\">top</option>\n <option value=\"right\">right</option>\n <option value=\"bottom\">bottom</option>\n <option value=\"left\">left</option>\n </select>\n `\n : html``}\n ${this.editorTemplate(this)}\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onValuesChanged.bind(this))\n }\n\n displayValueTemplate() {\n return html`\n <label for=\"value-format\"> <ox-i18n msgid=\"label.value-format\">Value Format</ox-i18n> </label>\n <input type=\"text\" value-key=\"series.valueFormat\" .value=${this.series.valueFormat || ''} list=\"format-list\" />\n <datalist id=\"format-list\">\n <option value=\"#,###.\"></option>\n <option value=\"#,###.#\"></option>\n <option value=\"#,###.0\"></option>\n <option value=\"#,##0.#\"></option>\n <option value=\"#,##0.0\"></option>\n <option value=\"#,##0.0%\"></option>\n </datalist>\n\n <label> <ox-i18n msgid=\"label.value-prefix\">Value Prefix</ox-i18n> </label>\n <input type=\"text\" value-key=\"series.valuePrefix\" .value=${this.series.valuePrefix || ''} />\n\n <label> <ox-i18n msgid=\"label.value-suffix\">Value suffix</ox-i18n> </label>\n <input type=\"text\" value-key=\"series.valueSuffix\" .value=${this.series.valueSuffix || ''} />\n\n <input type=\"checkbox\" value-key=\"series.displayValue\" .checked=${this.series.displayValue || false} />\n <label> <ox-i18n msgid=\"label.value-display\">Value Display</ox-i18n> </label>\n\n ${this.series.displayValue\n ? html`\n <label> <ox-i18n msgid=\"label.font-color\">Font Color</ox-i18n> </label>\n <ox-input-color\n value-key=\"series.defaultFontColor\"\n .value=${this.series.defaultFontColor || '#000'}\n ></ox-input-color>\n <label> <ox-i18n msgid=\"label.font-size\">Font Size</ox-i18n> </label>\n <input type=\"number\" value-key=\"series.defaultFontSize\" .value=${this.series.defaultFontSize || 10} />\n <label> <ox-i18n msgid=\"label.data-label-anchor\">Position</ox-i18n> </label>\n <select value-key=\"series.dataLabelAnchor\" .value=${this.series.dataLabelAnchor || 'center'}>\n <option value=\"start\">Start</option>\n <option value=\"center\" selected>Center</option>\n <option value=\"end\">End</option>\n </select>\n <label> <ox-i18n msgid=\"label.data-label-offset\">Offset</ox-i18n> </label>\n <input type=\"number\" value-key=\"series.dataLabelOffset\" .value=${this.series.dataLabelOffset || 0} />\n <label> <ox-i18n msgid=\"label.data-label-rotation\">Rotation</ox-i18n> </label>\n <input type=\"number\" value-key=\"series.dataLabelRotation\" .value=${this.series.dataLabelRotation || 0} />\n `\n : html``}\n `\n }\n\n editorTemplate(props: Properties) {\n return html``\n }\n\n get data() {\n return this.value.data\n }\n\n set data(data) {\n this.value.data = data\n }\n\n get datasets() {\n if (!this.data.datasets) this.data.datasets = []\n\n return this.data.datasets\n }\n\n set datasets(datasets) {\n this.datasets = datasets\n }\n\n get series() {\n if (!this.datasets[this.currentSeriesIndex]) this.datasets[this.currentSeriesIndex] = {}\n return this.datasets[this.currentSeriesIndex]\n }\n\n set series(series) {\n !this.data ? (this.data = { dataset: [series] }) : (this.datasets[this.currentSeriesIndex] = series)\n }\n\n set dataKey(key) {\n this.series.dataKey = key\n }\n\n get dataKey() {\n return this.series.dataKey\n }\n\n get legend() {\n !this.value.options && (this.value.options = {})\n return this.value.options.legend\n }\n\n set legend(legend) {\n this.value.options.legend = legend\n }\n\n get theme() {\n return this.value.options && this.value.options.theme\n }\n\n set theme(theme) {\n !this.value.options && (this.value.options = {})\n this.value.options.theme = theme\n }\n\n get tooltip() {\n return !this.value.options || this.value.options.tooltip !== false /* default true */\n }\n\n set tooltip(tooltip) {\n this.value.options.tooltip = tooltip\n }\n\n get animation() {\n return !this.value.options || this.value.options.animation !== false /* default true */\n }\n\n set animation(animation) {\n this.value.options.animation = animation\n }\n\n get scales() {\n return this.value.options.scales\n }\n\n set scales(scales) {\n !this.value.options && (this.value.options = {})\n this.value.options.scales = scales\n }\n\n get display() {\n return this.legend && this.legend.display\n }\n\n set display(display) {\n this.legend.display = display\n }\n\n get position() {\n return this.legend.position\n }\n\n set position(position) {\n this.legend.position = position\n }\n\n get stacked() {\n return this.value.options.stacked\n }\n\n set stacked(stacked) {\n this.value.options.stacked = stacked\n }\n\n get labelDataKey() {\n return this.data && this.data.labelDataKey\n }\n\n set labelDataKey(labelDataKey) {\n this.data.labelDataKey = labelDataKey\n }\n\n set options(options) {\n this.value.options = options\n }\n\n get options() {\n return this.value.options\n }\n\n onValuesChanged(e: Event) {\n var element = e.target as HTMLInputElement\n var key = element.getAttribute('value-key')\n var value = element.value\n\n if (!key) {\n return\n }\n\n value = this._getElementValue(element)\n\n var attrs = key.split('.')\n var attr = attrs.shift() || ''\n var variable = this\n\n while (attrs.length > 0) {\n //@ts-ignore\n variable = variable[attr]\n attr = attrs.shift() || ''\n }\n\n //@ts-ignore\n variable[attr] = value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n this.requestUpdate()\n }\n\n onTapAddTab(e: Event) {\n if (!this.value.data.datasets) return\n\n var lastSeriesIndex = this.value.data.datasets.length\n var chartType = this.series.type || this.value.type\n var lastSeriesColor = new TinyColor(this.datasets[lastSeriesIndex - 1].backgroundColor)\n\n var seriesModel = this._getSeriesModel({\n chartType,\n datasetsLength: lastSeriesIndex,\n lastSeriesColor\n })\n\n this.value.data.datasets.push(seriesModel)\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n this.currentSeriesIndex = lastSeriesIndex\n }\n\n onTapRemoveCurrentTab(e: Event) {\n if (!this.value.data.datasets) return\n\n var currIndex = this.currentSeriesIndex\n this.value.data.datasets.splice(currIndex, 1)\n\n currIndex--\n\n if (currIndex < 0) currIndex = 0\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n this.currentSeriesIndex = currIndex\n\n this.requestUpdate()\n }\n\n _getSeriesModel({\n chartType,\n datasetsLength,\n lastSeriesColor\n }: {\n chartType: any\n datasetsLength: number\n lastSeriesColor: TinyColor\n }) {\n var addSeriesOption: any = {\n label: `series ${datasetsLength + 1}`,\n data: [],\n borderWidth: 1,\n dataKey: '',\n yAxisID: 'left',\n color: randomColor({\n hue: lastSeriesColor as any\n }).toRgbString()\n }\n\n addSeriesOption.type = addSeriesOption.chartType = chartType\n return addSeriesOption\n }\n\n _getElementValue(element: HTMLElement) {\n switch (element.tagName) {\n case 'INPUT':\n switch ((element as HTMLInputElement).type) {\n case 'checkbox':\n return (element as HTMLInputElement).checked\n case 'number':\n return Number((element as HTMLInputElement).value) || 0\n case 'text':\n return String((element as HTMLInputElement).value)\n }\n\n case 'PAPER-BUTTON':\n return (element as any).active\n\n case 'PAPER-LISTBOX':\n return (element as any).selected\n\n case 'THINGS-EDITOR-MULTIPLE-COLOR':\n return (element as any).values\n\n case 'THINGS-EDITOR-ANGLE-INPUT':\n return Number((element as any).radian) || 0\n\n default:\n return (element as any).value\n }\n }\n}\n"]}
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import '@material/mwc-icon-button';
|
2
|
-
import '@polymer/paper-tabs/paper-tabs';
|
3
|
-
import '@polymer/iron-pages/iron-pages';
|
4
|
-
import '@operato/i18n/ox-i18n.js';
|
5
|
-
import PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract';
|
6
|
-
export default class PropertyEditorChartJSHBar extends PropertyEditorChartJSMultiSeriesAbstract {
|
7
|
-
static styles: import("lit").CSSResult[];
|
8
|
-
editorTemplate(): import("lit-html").TemplateResult<1>;
|
9
|
-
multiSeriesTabTemplate(): import("lit-html").TemplateResult<1>;
|
10
|
-
}
|
@@ -1,158 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import '@material/mwc-icon-button';
|
3
|
-
import '@polymer/paper-tabs/paper-tabs';
|
4
|
-
import '@polymer/iron-pages/iron-pages';
|
5
|
-
import '@operato/i18n/ox-i18n.js';
|
6
|
-
import { html } from 'lit';
|
7
|
-
import { customElement } from 'lit/decorators.js';
|
8
|
-
import PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract';
|
9
|
-
let PropertyEditorChartJSHBar = class PropertyEditorChartJSHBar extends PropertyEditorChartJSMultiSeriesAbstract {
|
10
|
-
editorTemplate() {
|
11
|
-
return html `
|
12
|
-
<legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
|
13
|
-
${this.multiSeriesTabTemplate()}
|
14
|
-
|
15
|
-
<legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
|
16
|
-
|
17
|
-
<label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
|
18
|
-
<input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
|
19
|
-
|
20
|
-
<label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
|
21
|
-
<input type="text" value-key="yAxes0.axisTitle" .value=${this.yAxes0.axisTitle || ''} />
|
22
|
-
|
23
|
-
<label><ox-i18n msgid="label.bar-spacing">Bar Spacing</ox-i18n></label>
|
24
|
-
<input
|
25
|
-
type="number"
|
26
|
-
min="0"
|
27
|
-
max="1"
|
28
|
-
step="0.1"
|
29
|
-
value-key="yAxes0.barSpacing"
|
30
|
-
.value=${this.yAxes0.barSpacing || NaN}
|
31
|
-
/>
|
32
|
-
<label><ox-i18n msgid="label.tick-spacing">Tick Spacing</ox-i18n></label>
|
33
|
-
<input
|
34
|
-
type="number"
|
35
|
-
min="0"
|
36
|
-
max="1"
|
37
|
-
step="0.1"
|
38
|
-
value-key="yAxes0.categorySpacing"
|
39
|
-
.value=${this.yAxes0.categorySpacing || NaN}
|
40
|
-
/>
|
41
|
-
|
42
|
-
<input type="checkbox" value-key="value.options.xGridLine" .checked=${this.value.options.xGridLine} />
|
43
|
-
<label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
|
44
|
-
|
45
|
-
<input type="checkbox" value-key="xAxes0.ticks.display" .checked=${this.xAxes0.ticks.display} />
|
46
|
-
<label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
|
47
|
-
|
48
|
-
<legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
|
49
|
-
|
50
|
-
<label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
|
51
|
-
<input type="text" value-key="xAxes0.title" .value=${this.xAxes0.axisTitle || ''} />
|
52
|
-
|
53
|
-
<input type="checkbox" value-key="xAxes0.ticks.autoMin" .checked=${this.xAxes0.ticks.autoMin} />
|
54
|
-
<label> <ox-i18n msgid="label.axis-min-auto">Axis Min Auto</ox-i18n> </label>
|
55
|
-
|
56
|
-
<input type="checkbox" value-key="xAxes0.ticks.autoMax" .checked=${this.xAxes0.ticks.autoMax} />
|
57
|
-
<label> <ox-i18n msgid="label.axis-max-auto">Axis Max Auto</ox-i18n> </label>
|
58
|
-
|
59
|
-
${!this.xAxes0.ticks.autoMin
|
60
|
-
? html `
|
61
|
-
<label> <ox-i18n msgid="label.axis-min">Axis Min</ox-i18n> </label>
|
62
|
-
<input type="number" value-key="xAxes0.ticks.min" .value=${this.xAxes0.ticks.min} />
|
63
|
-
`
|
64
|
-
: html ``}
|
65
|
-
${!this.xAxes0.ticks.autoMax
|
66
|
-
? html `
|
67
|
-
<label> <ox-i18n msgid="label.axis-max">Axis Max</ox-i18n> </label>
|
68
|
-
<input type="number" value-key="xAxes0.ticks.max" .value=${this.xAxes0.ticks.max} />
|
69
|
-
`
|
70
|
-
: html ``}
|
71
|
-
|
72
|
-
<label> <ox-i18n msgid="label.axis-step-size">Axis Step Size</ox-i18n> </label>
|
73
|
-
<input type="number" value-key="yAxes0.ticks.stepSize" .value=${this.yAxes0.ticks.stepSize} />
|
74
|
-
|
75
|
-
<input type="checkbox" .checked=${this.value.options.yGridLine} />
|
76
|
-
<label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
|
77
|
-
|
78
|
-
<input type="checkbox" value-key="yAxes0.ticks.display" .checked=${this.yAxes0.ticks.display} />
|
79
|
-
<label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
|
80
|
-
`;
|
81
|
-
}
|
82
|
-
multiSeriesTabTemplate() {
|
83
|
-
return html `
|
84
|
-
<div id="series-properties-container" fullwidth>
|
85
|
-
<div id="tab-header">
|
86
|
-
<mwc-icon-button
|
87
|
-
id="tab-nav-left-button"
|
88
|
-
icon="chevron_left"
|
89
|
-
@click=${(e) => {
|
90
|
-
this._onTabScrollNavLeft(e);
|
91
|
-
}}
|
92
|
-
disabled
|
93
|
-
></mwc-icon-button>
|
94
|
-
<paper-tabs
|
95
|
-
id="tabs"
|
96
|
-
@iron-select=${(e) => (this.currentSeriesIndex = e.target.selected)}
|
97
|
-
.selected=${this.currentSeriesIndex}
|
98
|
-
no-bar
|
99
|
-
noink
|
100
|
-
scrollable
|
101
|
-
hide-scroll-buttons
|
102
|
-
fit-container
|
103
|
-
>
|
104
|
-
${this.datasets.map((dataset, index) => html `
|
105
|
-
<paper-tab data-series="${index + 1}" noink
|
106
|
-
>${index + 1}
|
107
|
-
${!this.datasets || (this.datasets.length != 1 && this.currentSeriesIndex == index)
|
108
|
-
? html `
|
109
|
-
<mwc-icon-button icon="close" @tap="${(e) => this.onTapRemoveCurrentTab(e)}">
|
110
|
-
</mwc-icon-button>
|
111
|
-
`
|
112
|
-
: html ``}
|
113
|
-
</paper-tab>
|
114
|
-
`)}
|
115
|
-
</paper-tabs>
|
116
|
-
<mwc-icon-button
|
117
|
-
id="tab-nav-right-button"
|
118
|
-
icon="chevron_right"
|
119
|
-
@click=${(e) => {
|
120
|
-
this._onTabScrollNavRight(e);
|
121
|
-
}}
|
122
|
-
disabled
|
123
|
-
></mwc-icon-button>
|
124
|
-
</div>
|
125
|
-
<div id="add-series-button-container">
|
126
|
-
<mwc-icon-button
|
127
|
-
id="add-series-button"
|
128
|
-
icon="add"
|
129
|
-
@tap=${(e) => this.onTapAddTab(e)}
|
130
|
-
></mwc-icon-button>
|
131
|
-
</div>
|
132
|
-
|
133
|
-
<iron-pages .selected=${this.currentSeriesIndex} .attr-for-selected="series-index">
|
134
|
-
${this.datasets.map((dataset, index) => html `
|
135
|
-
<div class="tab-content" series-index="${index}">
|
136
|
-
<label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
|
137
|
-
<input type="text" value-key="dataKey" .value=${this.dataKey} />
|
138
|
-
<label> <ox-i18n msgid="label.label">Label</ox-i18n> </label>
|
139
|
-
<input type="text" value-key="series.label" .value=${this.series.label} />
|
140
|
-
<label> <ox-i18n msgid="label.color">Color</ox-i18n> </label>
|
141
|
-
<ox-input-color value-key="color" .value=${this.color}></ox-input-color>
|
142
|
-
<label> <ox-i18n msgid="label.stack-group">Stack Group</ox-i18n> </label>
|
143
|
-
<input type="text" value-key="series.stack" .value=${this.series.stack || ''} />
|
144
|
-
|
145
|
-
${this.displayValueTemplate()}
|
146
|
-
</div>
|
147
|
-
`)}
|
148
|
-
</iron-pages>
|
149
|
-
</div>
|
150
|
-
`;
|
151
|
-
}
|
152
|
-
};
|
153
|
-
PropertyEditorChartJSHBar.styles = [...PropertyEditorChartJSMultiSeriesAbstract.styles];
|
154
|
-
PropertyEditorChartJSHBar = __decorate([
|
155
|
-
customElement('property-editor-chartjs-hbar')
|
156
|
-
], PropertyEditorChartJSHBar);
|
157
|
-
export default PropertyEditorChartJSHBar;
|
158
|
-
//# sourceMappingURL=property-editor-chartjs-hbar.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"property-editor-chartjs-hbar.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs-hbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon-button'\nimport '@polymer/paper-tabs/paper-tabs'\nimport '@polymer/iron-pages/iron-pages'\n\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract'\n\n@customElement('property-editor-chartjs-hbar')\nexport default class PropertyEditorChartJSHBar extends PropertyEditorChartJSMultiSeriesAbstract {\n static styles = [...PropertyEditorChartJSMultiSeriesAbstract.styles]\n\n editorTemplate() {\n return html`\n <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n ${this.multiSeriesTabTemplate()}\n\n <legend><ox-i18n msgid=\"label.y-axes\">Y 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=\"yAxes0.axisTitle\" .value=${this.yAxes0.axisTitle || ''} />\n\n <label><ox-i18n msgid=\"label.bar-spacing\">Bar Spacing</ox-i18n></label>\n <input\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n value-key=\"yAxes0.barSpacing\"\n .value=${this.yAxes0.barSpacing || NaN}\n />\n <label><ox-i18n msgid=\"label.tick-spacing\">Tick Spacing</ox-i18n></label>\n <input\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n value-key=\"yAxes0.categorySpacing\"\n .value=${this.yAxes0.categorySpacing || NaN}\n />\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.x-axes\">X Axes</ox-i18n></legend>\n\n <label> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input type=\"text\" value-key=\"xAxes0.title\" .value=${this.xAxes0.axisTitle || ''} />\n\n <input type=\"checkbox\" value-key=\"xAxes0.ticks.autoMin\" .checked=${this.xAxes0.ticks.autoMin} />\n <label> <ox-i18n msgid=\"label.axis-min-auto\">Axis Min Auto</ox-i18n> </label>\n\n <input type=\"checkbox\" value-key=\"xAxes0.ticks.autoMax\" .checked=${this.xAxes0.ticks.autoMax} />\n <label> <ox-i18n msgid=\"label.axis-max-auto\">Axis Max Auto</ox-i18n> </label>\n\n ${!this.xAxes0.ticks.autoMin\n ? html`\n <label> <ox-i18n msgid=\"label.axis-min\">Axis Min</ox-i18n> </label>\n <input type=\"number\" value-key=\"xAxes0.ticks.min\" .value=${this.xAxes0.ticks.min} />\n `\n : html``}\n ${!this.xAxes0.ticks.autoMax\n ? html`\n <label> <ox-i18n msgid=\"label.axis-max\">Axis Max</ox-i18n> </label>\n <input type=\"number\" value-key=\"xAxes0.ticks.max\" .value=${this.xAxes0.ticks.max} />\n `\n : html``}\n\n <label> <ox-i18n msgid=\"label.axis-step-size\">Axis Step Size</ox-i18n> </label>\n <input type=\"number\" value-key=\"yAxes0.ticks.stepSize\" .value=${this.yAxes0.ticks.stepSize} />\n\n <input type=\"checkbox\" .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 }\n\n multiSeriesTabTemplate() {\n return html`\n <div id=\"series-properties-container\" fullwidth>\n <div id=\"tab-header\">\n <mwc-icon-button\n id=\"tab-nav-left-button\"\n icon=\"chevron_left\"\n @click=${(e: Event) => {\n this._onTabScrollNavLeft(e)\n }}\n disabled\n ></mwc-icon-button>\n <paper-tabs\n id=\"tabs\"\n @iron-select=${(e: Event) => (this.currentSeriesIndex = (e.target as any).selected)}\n .selected=${this.currentSeriesIndex}\n no-bar\n noink\n scrollable\n hide-scroll-buttons\n fit-container\n >\n ${this.datasets.map(\n (dataset: any, index: number) => html`\n <paper-tab data-series=\"${index + 1}\" noink\n >${index + 1}\n ${!this.datasets || (this.datasets.length != 1 && this.currentSeriesIndex == index)\n ? html`\n <mwc-icon-button icon=\"close\" @tap=\"${(e: Event) => this.onTapRemoveCurrentTab(e)}\">\n </mwc-icon-button>\n `\n : html``}\n </paper-tab>\n `\n )}\n </paper-tabs>\n <mwc-icon-button\n id=\"tab-nav-right-button\"\n icon=\"chevron_right\"\n @click=${(e: Event) => {\n this._onTabScrollNavRight(e)\n }}\n disabled\n ></mwc-icon-button>\n </div>\n <div id=\"add-series-button-container\">\n <mwc-icon-button\n id=\"add-series-button\"\n icon=\"add\"\n @tap=${(e: Event) => this.onTapAddTab(e)}\n ></mwc-icon-button>\n </div>\n\n <iron-pages .selected=${this.currentSeriesIndex} .attr-for-selected=\"series-index\">\n ${this.datasets.map(\n (dataset: any, index: number) => html`\n <div class=\"tab-content\" series-index=\"${index}\">\n <label> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input type=\"text\" value-key=\"dataKey\" .value=${this.dataKey} />\n <label> <ox-i18n msgid=\"label.label\">Label</ox-i18n> </label>\n <input type=\"text\" value-key=\"series.label\" .value=${this.series.label} />\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 <label> <ox-i18n msgid=\"label.stack-group\">Stack Group</ox-i18n> </label>\n <input type=\"text\" value-key=\"series.stack\" .value=${this.series.stack || ''} />\n\n ${this.displayValueTemplate()}\n </div>\n `\n )}\n </iron-pages>\n </div>\n `\n }\n}\n"]}
|
@@ -1,17 +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 PropertyEditorChartJSMixed extends PropertyEditorChartJSMultiSeriesAbstract {
|
5
|
-
static styles: import("lit").CSSResult[];
|
6
|
-
constructor();
|
7
|
-
get xAxes0(): any;
|
8
|
-
set xAxes0(xAxes0: any);
|
9
|
-
get yAxes0(): any;
|
10
|
-
set yAxes0(yAxes0: any);
|
11
|
-
get yAxes1(): any;
|
12
|
-
set yAxes1(yAxes1: any);
|
13
|
-
get multiAxis(): any;
|
14
|
-
set multiAxis(multiAxis: any);
|
15
|
-
editorTemplate(props: Properties): import("lit-html").TemplateResult<1>;
|
16
|
-
_hasBarSeries(chart: any): boolean;
|
17
|
-
}
|