@operato/scene-chartjs 8.0.0-alpha.4 → 8.0.0-alpha.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/chartjs.js +2 -1
  3. package/dist/chartjs.js.map +1 -1
  4. package/dist/ox-chart.js +1 -0
  5. package/dist/ox-chart.js.map +1 -1
  6. package/package.json +2 -2
  7. package/schema.graphql +19 -7
  8. package/src/chartjs.ts +2 -1
  9. package/src/ox-chart.ts +2 -1
  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
- }