@operato/scene-chartjs 8.0.0-alpha.4 → 8.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/chartjs.js +2 -1
  3. package/dist/chartjs.js.map +1 -1
  4. package/dist/ox-chart.js +4 -1
  5. package/dist/ox-chart.js.map +1 -1
  6. package/package.json +3 -3
  7. package/schema.graphql +22 -19
  8. package/src/chartjs.ts +2 -1
  9. package/src/ox-chart.ts +5 -2
  10. package/tsconfig.tsbuildinfo +1 -1
  11. package/dist/editors/property-editor-chartjs-abstract.d.ts +0 -50
  12. package/dist/editors/property-editor-chartjs-abstract.js +0 -285
  13. package/dist/editors/property-editor-chartjs-abstract.js.map +0 -1
  14. package/dist/editors/property-editor-chartjs-hbar.d.ts +0 -10
  15. package/dist/editors/property-editor-chartjs-hbar.js +0 -158
  16. package/dist/editors/property-editor-chartjs-hbar.js.map +0 -1
  17. package/dist/editors/property-editor-chartjs-mixed.d.ts +0 -17
  18. package/dist/editors/property-editor-chartjs-mixed.js +0 -186
  19. package/dist/editors/property-editor-chartjs-mixed.js.map +0 -1
  20. package/dist/editors/property-editor-chartjs-multi-series-abstract.d.ts +0 -31
  21. package/dist/editors/property-editor-chartjs-multi-series-abstract.js +0 -371
  22. package/dist/editors/property-editor-chartjs-multi-series-abstract.js.map +0 -1
  23. package/dist/editors/property-editor-chartjs-pie.d.ts +0 -18
  24. package/dist/editors/property-editor-chartjs-pie.js +0 -74
  25. package/dist/editors/property-editor-chartjs-pie.js.map +0 -1
  26. package/dist/editors/property-editor-chartjs-radar.d.ts +0 -8
  27. package/dist/editors/property-editor-chartjs-radar.js +0 -36
  28. package/dist/editors/property-editor-chartjs-radar.js.map +0 -1
  29. package/dist/editors/property-editor-chartjs-styles.d.ts +0 -1
  30. package/dist/editors/property-editor-chartjs-styles.js +0 -161
  31. package/dist/editors/property-editor-chartjs-styles.js.map +0 -1
  32. package/dist/editors/property-editor-chartjs.d.ts +0 -10
  33. package/dist/editors/property-editor-chartjs.js +0 -77
  34. 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
- }