@operato/scene-chartjs 7.0.1 → 7.0.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/config-converter.js +2 -5
  3. package/dist/config-converter.js.map +1 -1
  4. package/dist/editors/index.d.ts +1 -1
  5. package/dist/editors/index.js +2 -2
  6. package/dist/editors/index.js.map +1 -1
  7. package/dist/ox-chart.js +1 -1
  8. package/dist/ox-chart.js.map +1 -1
  9. package/package.json +4 -2
  10. package/src/config-converter.ts +2 -6
  11. package/src/editors/index.ts +2 -2
  12. package/src/ox-chart.ts +1 -1
  13. package/translations/en.json +2 -1
  14. package/translations/ja.json +2 -1
  15. package/translations/ko.json +2 -1
  16. package/translations/ms.json +2 -1
  17. package/translations/zh.json +2 -1
  18. package/tsconfig.tsbuildinfo +1 -1
  19. package/dist/editors/property-editor-chartjs-abstract.d.ts +0 -50
  20. package/dist/editors/property-editor-chartjs-abstract.js +0 -273
  21. package/dist/editors/property-editor-chartjs-abstract.js.map +0 -1
  22. package/dist/editors/property-editor-chartjs-hbar.d.ts +0 -10
  23. package/dist/editors/property-editor-chartjs-hbar.js +0 -154
  24. package/dist/editors/property-editor-chartjs-hbar.js.map +0 -1
  25. package/dist/editors/property-editor-chartjs-mixed.d.ts +0 -17
  26. package/dist/editors/property-editor-chartjs-mixed.js +0 -186
  27. package/dist/editors/property-editor-chartjs-mixed.js.map +0 -1
  28. package/dist/editors/property-editor-chartjs-multi-series-abstract.d.ts +0 -29
  29. package/dist/editors/property-editor-chartjs-multi-series-abstract.js +0 -363
  30. package/dist/editors/property-editor-chartjs-multi-series-abstract.js.map +0 -1
  31. package/dist/editors/property-editor-chartjs-pie.d.ts +0 -18
  32. package/dist/editors/property-editor-chartjs-pie.js +0 -74
  33. package/dist/editors/property-editor-chartjs-pie.js.map +0 -1
  34. package/dist/editors/property-editor-chartjs-radar.d.ts +0 -8
  35. package/dist/editors/property-editor-chartjs-radar.js +0 -36
  36. package/dist/editors/property-editor-chartjs-radar.js.map +0 -1
  37. package/dist/editors/property-editor-chartjs-styles.d.ts +0 -1
  38. package/dist/editors/property-editor-chartjs-styles.js +0 -167
  39. package/dist/editors/property-editor-chartjs-styles.js.map +0 -1
  40. package/dist/editors/property-editor-chartjs.d.ts +0 -10
  41. package/dist/editors/property-editor-chartjs.js +0 -79
  42. package/dist/editors/property-editor-chartjs.js.map +0 -1
  43. package/src/editors/property-editor-chartjs-abstract.ts +0 -324
  44. package/src/editors/property-editor-chartjs-hbar.ts +0 -157
  45. package/src/editors/property-editor-chartjs-mixed.ts +0 -199
  46. package/src/editors/property-editor-chartjs-multi-series-abstract.ts +0 -382
  47. package/src/editors/property-editor-chartjs-pie.ts +0 -86
  48. package/src/editors/property-editor-chartjs-radar.ts +0 -39
  49. package/src/editors/property-editor-chartjs-styles.ts +0 -167
  50. package/src/editors/property-editor-chartjs.ts +0 -79
@@ -1,186 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import '@operato/i18n/ox-i18n.js';
3
- import { html } from 'lit';
4
- import { customElement } from 'lit/decorators.js';
5
- import PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract';
6
- let PropertyEditorChartJSMixed = class PropertyEditorChartJSMixed extends PropertyEditorChartJSMultiSeriesAbstract {
7
- constructor() {
8
- super();
9
- this.value = {
10
- options: {
11
- legend: {},
12
- scales: {
13
- xAxes: [
14
- {
15
- ticks: {}
16
- }
17
- ],
18
- yAxes: [
19
- {
20
- ticks: {}
21
- }
22
- ]
23
- }
24
- },
25
- data: {
26
- datasets: []
27
- }
28
- };
29
- }
30
- get xAxes0() {
31
- return this.scales.xAxes[0];
32
- }
33
- set xAxes0(xAxes0) {
34
- this.scales.xAxes[0] = xAxes0;
35
- }
36
- get yAxes0() {
37
- return this.scales.yAxes[0];
38
- }
39
- set yAxes0(yAxes0) {
40
- this.scales.yAxes[0] = yAxes0;
41
- }
42
- get yAxes1() {
43
- return this.scales.yAxes[1];
44
- }
45
- set yAxes1(yAxes1) {
46
- this.scales.yAxes[1] = yAxes1;
47
- }
48
- get multiAxis() {
49
- return this.value.options.multiAxis;
50
- }
51
- set multiAxis(multiAxis) {
52
- this.value.options.multiAxis = multiAxis;
53
- }
54
- editorTemplate(props) {
55
- return html `
56
- <input type="checkbox" value-key="multiAxis" .checked=${this.multiAxis} />
57
- <label> <ox-i18n msgid="label.multi-axis">Multi Axis</ox-i18n> </label>
58
-
59
- <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
60
-
61
- <div fullwidth>${this.multiSeriesTabTemplate()}</div>
62
-
63
- <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
64
-
65
- <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
66
- <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
67
-
68
- <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
69
- <input type="text" value-key="xAxes0.axisTitle" .value=${this.xAxes0.axisTitle || ''} />
70
-
71
- ${this._hasBarSeries(this.value)
72
- ? html `
73
- <label><ox-i18n msgid="label.bar-spacing">Bar Spacing</ox-i18n></label>
74
- <input
75
- type="number"
76
- min="0"
77
- max="1"
78
- step="0.1"
79
- value-key="xAxes0.barSpacing"
80
- .value=${this.xAxes0.barSpacing || NaN}
81
- />
82
- <label><ox-i18n msgid="label.tick-spacing">Tick Spacing</ox-i18n></label>
83
- <input
84
- type="number"
85
- min="0"
86
- max="1"
87
- step="0.1"
88
- value-key="xAxes0.categorySpacing"
89
- .value=${this.xAxes0.categorySpacing || NaN}
90
- />
91
- `
92
- : html ``}
93
-
94
- <input type="checkbox" value-key="value.options.xGridLine" .checked=${props.value.options.xGridLine} />
95
- <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
96
-
97
- <input type="checkbox" value-key="xAxes0.ticks.display" .checked=${this.xAxes0.ticks.display} />
98
- <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
99
-
100
- <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
101
-
102
- <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
103
- <input type="text" value-key="yAxes0.axisTitle" .value=${this.yAxes0.axisTitle || ''} />
104
-
105
- <input type="checkbox" value-key="yAxes0.ticks.autoMin" .checked=${this.yAxes0.ticks.autoMin} />
106
- <label> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
107
-
108
- <input type="checkbox" value-key="yAxes0.ticks.autoMax" .checked=${this.yAxes0.ticks.autoMax} />
109
- <label> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
110
-
111
- ${!this.yAxes0.ticks.autoMin
112
- ? html `
113
- <label> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
114
- <input type="number" value-key="yAxes0.ticks.min" .value=${this.yAxes0.ticks.min} />
115
- `
116
- : html ``}
117
- ${!this.yAxes0.ticks.autoMax
118
- ? html `
119
- <label> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
120
- <input type="number" value-key="yAxes0.ticks.max" .value=${this.yAxes0.ticks.max} />
121
- `
122
- : html ``}
123
-
124
- <label> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
125
- <input type="number" value-key="yAxes0.ticks.stepSize" .value=${this.yAxes0.ticks.stepSize} />
126
-
127
- <input type="checkbox" value-key="value.options.yGridLine" .checked=${props.value.options.yGridLine} />
128
- <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
129
-
130
- <input type="checkbox" value-key="yAxes0.ticks.display" .checked=${this.yAxes0.ticks.display} />
131
- <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
132
-
133
- ${props.value.options.multiAxis
134
- ? html `
135
- <legend><ox-i18n msgid="label.y-2nd-axes">Y 2nd Axes</ox-i18n></legend>
136
-
137
- <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
138
- <input type="text" value-key="yAxes1.axisTitle" .value=${this.yAxes1.axisTitle || ''} />
139
-
140
- <input type="checkbox" value-key="yAxes1.ticks.autoMin" .checked=${this.yAxes1.ticks.autoMin} />
141
- <label> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
142
-
143
- <input type="checkbox" value-key="yAxes1.ticks.autoMax" .checked=${this.yAxes1.ticks.autoMax} />
144
- <label> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
145
-
146
- ${!this.yAxes1.ticks.autoMin
147
- ? html `
148
- <label> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
149
- <input type="number" value-key="yAxes1.ticks.min" .value=${this.yAxes1.ticks.min} />
150
- `
151
- : html ``}
152
- ${!this.yAxes1.ticks.autoMax
153
- ? html `
154
- <label> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
155
- <input type="number" value-key="yAxes1.ticks.max" .value=${this.yAxes1.ticks.max} />
156
- `
157
- : html ``}
158
-
159
- <label> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
160
- <input type="number" value-key="yAxes1.ticks.stepSize" .value=${this.yAxes1.ticks.stepSize} />
161
-
162
- <input
163
- type="checkbox"
164
- value-key="value.options.y2ndGridLine"
165
- .checked=${props.value.options.y2ndGridLine}
166
- />
167
- <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
168
-
169
- <input type="checkbox" value-key="yAxes1.ticks.display" .checked=${this.yAxes1.ticks.display} />
170
- <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
171
- `
172
- : html ``}
173
- `;
174
- }
175
- _hasBarSeries(chart) {
176
- var hasBarSeries = false;
177
- hasBarSeries = chart.data.datasets.some((s) => s.type == 'bar');
178
- return hasBarSeries;
179
- }
180
- };
181
- PropertyEditorChartJSMixed.styles = PropertyEditorChartJSMultiSeriesAbstract.styles;
182
- PropertyEditorChartJSMixed = __decorate([
183
- customElement('property-editor-chartjs-mixed')
184
- ], PropertyEditorChartJSMixed);
185
- export default PropertyEditorChartJSMixed;
186
- //# sourceMappingURL=property-editor-chartjs-mixed.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"property-editor-chartjs-mixed.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs-mixed.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { Properties } from '@hatiolab/things-scene'\n\nimport PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract'\n\n@customElement('property-editor-chartjs-mixed')\nexport default class PropertyEditorChartJSMixed extends PropertyEditorChartJSMultiSeriesAbstract {\n static styles = PropertyEditorChartJSMultiSeriesAbstract.styles\n\n constructor() {\n super()\n\n this.value = {\n options: {\n legend: {},\n scales: {\n xAxes: [\n {\n ticks: {}\n }\n ],\n yAxes: [\n {\n ticks: {}\n }\n ]\n }\n },\n data: {\n datasets: []\n }\n }\n }\n\n get xAxes0() {\n return this.scales.xAxes[0]\n }\n\n set xAxes0(xAxes0) {\n this.scales.xAxes[0] = xAxes0\n }\n\n get yAxes0() {\n return this.scales.yAxes[0]\n }\n\n set yAxes0(yAxes0) {\n this.scales.yAxes[0] = yAxes0\n }\n\n get yAxes1() {\n return this.scales.yAxes[1]\n }\n\n set yAxes1(yAxes1) {\n this.scales.yAxes[1] = yAxes1\n }\n\n get multiAxis() {\n return this.value.options.multiAxis\n }\n\n set multiAxis(multiAxis) {\n this.value.options.multiAxis = multiAxis\n }\n\n editorTemplate(props: Properties) {\n return html`\n <input type=\"checkbox\" value-key=\"multiAxis\" .checked=${this.multiAxis} />\n <label> <ox-i18n msgid=\"label.multi-axis\">Multi Axis</ox-i18n> </label>\n\n <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n <div fullwidth>${this.multiSeriesTabTemplate()}</div>\n\n <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n <label> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input type=\"text\" value-key=\"labelDataKey\" .value=${this.labelDataKey} />\n\n <label> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input type=\"text\" value-key=\"xAxes0.axisTitle\" .value=${this.xAxes0.axisTitle || ''} />\n\n ${this._hasBarSeries(this.value)\n ? html`\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=\"xAxes0.barSpacing\"\n .value=${this.xAxes0.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=\"xAxes0.categorySpacing\"\n .value=${this.xAxes0.categorySpacing || NaN}\n />\n `\n : html``}\n\n <input type=\"checkbox\" value-key=\"value.options.xGridLine\" .checked=${props.value.options.xGridLine} />\n <label> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input type=\"checkbox\" value-key=\"xAxes0.ticks.display\" .checked=${this.xAxes0.ticks.display} />\n <label> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n <label> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input type=\"text\" value-key=\"yAxes0.axisTitle\" .value=${this.yAxes0.axisTitle || ''} />\n\n <input type=\"checkbox\" value-key=\"yAxes0.ticks.autoMin\" .checked=${this.yAxes0.ticks.autoMin} />\n <label> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n <input type=\"checkbox\" value-key=\"yAxes0.ticks.autoMax\" .checked=${this.yAxes0.ticks.autoMax} />\n <label> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n ${!this.yAxes0.ticks.autoMin\n ? html`\n <label> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n <input type=\"number\" value-key=\"yAxes0.ticks.min\" .value=${this.yAxes0.ticks.min} />\n `\n : html``}\n ${!this.yAxes0.ticks.autoMax\n ? html`\n <label> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n <input type=\"number\" value-key=\"yAxes0.ticks.max\" .value=${this.yAxes0.ticks.max} />\n `\n : html``}\n\n <label> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n <input type=\"number\" value-key=\"yAxes0.ticks.stepSize\" .value=${this.yAxes0.ticks.stepSize} />\n\n <input type=\"checkbox\" value-key=\"value.options.yGridLine\" .checked=${props.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 ${props.value.options.multiAxis\n ? html`\n <legend><ox-i18n msgid=\"label.y-2nd-axes\">Y 2nd Axes</ox-i18n></legend>\n\n <label> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input type=\"text\" value-key=\"yAxes1.axisTitle\" .value=${this.yAxes1.axisTitle || ''} />\n\n <input type=\"checkbox\" value-key=\"yAxes1.ticks.autoMin\" .checked=${this.yAxes1.ticks.autoMin} />\n <label> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n <input type=\"checkbox\" value-key=\"yAxes1.ticks.autoMax\" .checked=${this.yAxes1.ticks.autoMax} />\n <label> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n ${!this.yAxes1.ticks.autoMin\n ? html`\n <label> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n <input type=\"number\" value-key=\"yAxes1.ticks.min\" .value=${this.yAxes1.ticks.min} />\n `\n : html``}\n ${!this.yAxes1.ticks.autoMax\n ? html`\n <label> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n <input type=\"number\" value-key=\"yAxes1.ticks.max\" .value=${this.yAxes1.ticks.max} />\n `\n : html``}\n\n <label> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n <input type=\"number\" value-key=\"yAxes1.ticks.stepSize\" .value=${this.yAxes1.ticks.stepSize} />\n\n <input\n type=\"checkbox\"\n value-key=\"value.options.y2ndGridLine\"\n .checked=${props.value.options.y2ndGridLine}\n />\n <label> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input type=\"checkbox\" value-key=\"yAxes1.ticks.display\" .checked=${this.yAxes1.ticks.display} />\n <label> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n `\n : html``}\n `\n }\n\n _hasBarSeries(chart: any) {\n var hasBarSeries = false\n hasBarSeries = chart.data.datasets.some((s: any) => s.type == 'bar')\n\n return hasBarSeries\n }\n}\n"]}
@@ -1,29 +0,0 @@
1
- import '@material/web/icon/icon.js';
2
- import '@operato/i18n/ox-i18n.js';
3
- import { Properties } from '@hatiolab/things-scene';
4
- import { MdIcon } from '@material/web/icon/icon.js';
5
- import PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract';
6
- export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEditorChartJSAbstract {
7
- static styles: import("lit").CSSResult[];
8
- constructor();
9
- tabs: HTMLElement;
10
- tabNavLeftButton: MdIcon;
11
- tabNavRightButton: MdIcon;
12
- get color(): any;
13
- set color(color: any);
14
- get xAxes0(): any;
15
- set xAxes0(xAxes0: any);
16
- get yAxes0(): any;
17
- set yAxes0(yAxes0: any);
18
- get yAxes1(): any;
19
- set yAxes1(yAxes1: any);
20
- get multiAxis(): any;
21
- set multiAxis(multiAxis: any);
22
- get tabContainer(): HTMLElement | null | undefined;
23
- firstUpdated(): void;
24
- editorTemplate(props: Properties): import("lit-html").TemplateResult<1>;
25
- multiSeriesTabTemplate(): import("lit-html").TemplateResult<1>;
26
- _onTabScroll(e: Event): void;
27
- _onTabScrollNavLeft(e: Event): void;
28
- _onTabScrollNavRight(e: Event): void;
29
- }
@@ -1,363 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import '@material/web/icon/icon.js';
3
- import '@operato/i18n/ox-i18n.js';
4
- import { css, html } from 'lit';
5
- import { query } from 'lit/decorators.js';
6
- import PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract';
7
- class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEditorChartJSAbstract {
8
- constructor() {
9
- super();
10
- this.value = {
11
- options: {
12
- legend: {},
13
- scales: {
14
- xAxes: [
15
- {
16
- ticks: {}
17
- }
18
- ],
19
- yAxes: [
20
- {
21
- ticks: {}
22
- }
23
- ]
24
- }
25
- },
26
- data: {
27
- datasets: []
28
- }
29
- };
30
- }
31
- get color() {
32
- var oldVersionColor = this.series.backgroundColor;
33
- if (this.series.type == 'line')
34
- oldVersionColor = this.series.borderColor;
35
- if (this.series.type == 'radar')
36
- oldVersionColor = this.series.borderColor;
37
- return this.series.color || oldVersionColor;
38
- }
39
- set color(color) {
40
- this.series.color = color;
41
- delete this.series.backgroundColor;
42
- delete this.series.borderColor;
43
- }
44
- get xAxes0() {
45
- return this.scales.xAxes[0];
46
- }
47
- set xAxes0(xAxes0) {
48
- this.scales.xAxes[0] = xAxes0;
49
- }
50
- get yAxes0() {
51
- return this.scales.yAxes[0];
52
- }
53
- set yAxes0(yAxes0) {
54
- this.scales.yAxes[0] = yAxes0;
55
- }
56
- get yAxes1() {
57
- return this.scales.yAxes[1];
58
- }
59
- set yAxes1(yAxes1) {
60
- this.scales.yAxes[1] = yAxes1;
61
- }
62
- get multiAxis() {
63
- return this.value.options.multiAxis;
64
- }
65
- set multiAxis(multiAxis) {
66
- this.value.options.multiAxis = multiAxis;
67
- }
68
- get tabContainer() {
69
- return this.tabs;
70
- }
71
- firstUpdated() {
72
- var _a;
73
- super.firstUpdated();
74
- (_a = this.tabContainer) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', e => {
75
- this._onTabScroll(e);
76
- });
77
- }
78
- editorTemplate(props) {
79
- return html `
80
- <input type="checkbox" value-key="multiAxis" .checked=${this.multiAxis} />
81
- <label> <ox-i18n msgid="label.multi-axis">Multi Axis</ox-i18n> </label>
82
-
83
- <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
84
-
85
- ${this.multiSeriesTabTemplate()}
86
-
87
- <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
88
-
89
- <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
90
- <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
91
-
92
- <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
93
- <input type="text" value-key="xAxes0.axisTitle" .value=${this.xAxes0.axisTitle || ''} />
94
-
95
- <label> <ox-i18n msgid="label.thickness">Thickness</ox-i18n> </label>
96
- <input type="number" value-key="xAxes0.barPercentage" .value=${this.xAxes0.barPercentage} />
97
-
98
- <input type="checkbox" value-key="value.options.xGridLine" .checked=${this.value.options.xGridLine} />
99
- <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
100
-
101
- <input type="checkbox" value-key="xAxes0.ticks.display" .checked=${this.xAxes0.ticks.display} />
102
- <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
103
-
104
- <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
105
-
106
- <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
107
- <input type="text" value-key="yAxes0.axisTitle" .value=${this.yAxes0.axisTitle || ''} />
108
-
109
- <input type="checkbox" value-key="yAxes0.ticks.autoMin" .checked=${this.yAxes0.ticks.autoMin} />
110
- <label> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
111
-
112
- <input type="checkbox" value-key="yAxes0.ticks.autoMax" .checked=${this.yAxes0.ticks.autoMax} />
113
- <label> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
114
-
115
- ${!this.yAxes0.ticks.autoMin
116
- ? html `
117
- <label> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
118
- <input type="number" value-key="yAxes0.ticks.min" .value=${this.yAxes0.ticks.min} />
119
- `
120
- : html ``}
121
- ${!this.yAxes0.ticks.autoMax
122
- ? html `
123
- <label> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
124
- <input type="number" value-key="yAxes0.ticks.max" .value=${this.yAxes0.ticks.max} />
125
- `
126
- : html ``}
127
-
128
- <label> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
129
- <input type="number" value-key="yAxes0.ticks.stepSize" .value=${this.yAxes0.ticks.stepSize} />
130
-
131
- <input type="checkbox" value-key="value.options.yGridLine" .checked=${this.value.options.yGridLine} />
132
- <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
133
-
134
- <input type="checkbox" value-key="yAxes0.ticks.display" .checked=${this.yAxes0.ticks.display} />
135
- <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
136
-
137
- ${this.value.options.multiAxis
138
- ? html `
139
- <legend><ox-i18n msgid="label.y-2nd-axes">Y 2nd Axes</ox-i18n></legend>
140
-
141
- <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
142
- <input type="text" value-key="yAxes1.axisTitle" .value=${this.yAxes1.axisTitle || ''} />
143
-
144
- <input type="checkbox" value-key="yAxes1.ticks.autoMin" .checked=${this.yAxes1.ticks.autoMin} />
145
- <label> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
146
-
147
- <input type="checkbox" value-key="yAxes1.ticks.autoMax" .checked=${this.yAxes1.ticks.autoMax} />
148
- <label> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
149
-
150
- ${!this.yAxes1.ticks.autoMin
151
- ? html `
152
- <label> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
153
- <input type="number" value-key="yAxes1.ticks.min" .value=${this.yAxes1.ticks.min} />
154
- `
155
- : html ``}
156
- ${!this.yAxes1.ticks.autoMax
157
- ? html `
158
- <label> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
159
- <input type="number" value-key="yAxes1.ticks.max" .value=${this.yAxes1.ticks.max} />
160
- `
161
- : html ``}
162
-
163
- <label> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
164
- <input type="number" value-key="yAxes1.ticks.stepSize" .value=${this.yAxes1.ticks.stepSize} />
165
-
166
- <input type="checkbox" value-key="value.options.y2ndGridLine" .checked=${this.value.options.y2ndGridLine} />
167
- <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
168
-
169
- <input type="checkbox" value-key="yAxes1.ticks.display" .checked=${this.yAxes1.ticks.display} />
170
- <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
171
- `
172
- : html ``}
173
- `;
174
- }
175
- multiSeriesTabTemplate() {
176
- return html `
177
- <div id="series-properties-container" fullwidth>
178
- <div id="tab-header">
179
- <md-icon
180
- id="tab-nav-left-button"
181
- @tap=${(e) => {
182
- this._onTabScrollNavLeft(e);
183
- }}
184
- disabled
185
- >chevron_left</md-icon
186
- >
187
- <div
188
- id="tabs"
189
- @change=${(e) => {
190
- this.currentSeriesIndex = e.target.activeTabIndex;
191
- }}
192
- active-tab-index=${this.currentSeriesIndex}
193
- fit-container
194
- >
195
- ${this.datasets.map((dataset, index) => html `
196
- <div
197
- data-series=${index + 1}
198
- data-tab-index=${index}
199
- tab
200
- ?selected=${index == this.currentSeriesIndex}
201
- @click=${(e) => {
202
- const target = e.target;
203
- this.currentSeriesIndex = Number(target.getAttribute('data-tab-index'));
204
- }}
205
- >
206
- ${index + 1}
207
- ${!this.datasets || (this.datasets.length != 1 && this.currentSeriesIndex == index)
208
- ? html ` <md-icon @tap="${(e) => this.onTapRemoveCurrentTab(e)}"> close </md-icon> `
209
- : html ``}
210
- </div>
211
- `)}
212
- </div>
213
- <md-icon
214
- id="tab-nav-right-button"
215
- @click=${(e) => {
216
- this._onTabScrollNavRight(e);
217
- }}
218
- disabled
219
- >chevron_right</md-icon
220
- >
221
- </div>
222
- <div id="add-series-button-container">
223
- <md-icon id="add-series-button" @tap=${(e) => this.onTapAddTab(e)}>add</md-icon>
224
- </div>
225
-
226
- <div class="tab-content">
227
- <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
228
- <input type="text" value-key="dataKey" .value=${this.dataKey} />
229
-
230
- ${this.value.type == 'bar'
231
- ? html `
232
- <label> <ox-i18n msgid="label.type">type</ox-i18n> </label>
233
- <select class="select-content" value-key="series.type" .value=${this.series.type}>
234
- <option value="bar" selected>bar</option>
235
- <option value="line">line</option>
236
- </select>
237
- `
238
- : html ``}
239
-
240
- <label> <ox-i18n msgid="label.label">label</ox-i18n> </label>
241
- <input type="text" value-key="series.label" .value=${this.series.label} />
242
-
243
- ${this.series.type == 'line'
244
- ? html `
245
- <label> <ox-i18n msgid="label.line-tension">line tension</ox-i18n> </label>
246
- <select class="select-content" value-key="series.lineTension" .value=${this.series.lineTension}>
247
- <option value="0.4">smooth</option>
248
- <option value="0">angled</option>
249
- </select>
250
- `
251
- : html ``}
252
- ${this.series.type == 'line'
253
- ? html `
254
- <label> <ox-i18n msgid="label.border-width">border width</ox-i18n> </label>
255
- <input type="number" value-key="series.borderWidth" .value=${this.series.borderWidth} />
256
- `
257
- : html ``}
258
-
259
- <label> <ox-i18n msgid="label.color">color</ox-i18n> </label>
260
- <ox-input-color value-key="color" .value=${this.color}></ox-input-color>
261
-
262
- ${this.series.type == 'line'
263
- ? html `
264
- <label> <ox-i18n msgid="label.point-shape">point shape</ox-i18n> </label>
265
- <select class="select-content" value-key="series.pointStyle" .value=${this.series.pointStyle}>
266
- <option value="circle">⚬</option>
267
- <option value="triangle">▵</option>
268
- <option value="rect">□</option>
269
- <option value="rectRot">◇</option>
270
- <option value="cross">+</option>
271
- <option value="crossRot">⨉</option>
272
- <option value="star">✱</option>
273
- <option value="line">―</option>
274
- <option value="dash">┄</option>
275
- </select>
276
-
277
- <label> <ox-i18n msgid="label.point-size">point size</ox-i18n> </label>
278
- <input type="number" value-key="series.pointRadius" .value=${this.series.pointRadius} />
279
- `
280
- : html ``} <label> <ox-i18n msgid="label.stack-group">Stack group</ox-i18n> </label>
281
- <input type="text" value-key="series.stack" .value=${this.series.stack || ''} /> ${this.series.type == 'line'
282
- ? html `
283
- <input type="checkbox" value-key="series.fill" .checked=${this.series.fill} />
284
- <label> <ox-i18n msgid="label.fill">fill</ox-i18n> </label>
285
- `
286
- : html ``}
287
- ${this.multiAxis
288
- ? html `
289
- <label> <ox-i18n msgid="label.target-axis">target axis</ox-i18n> </label>
290
- <select class="select-content" value-key="series.yAxisID" .value=${this.series.yAxisID}>
291
- <option value="left">left</option>
292
- <option value="right">right</option>
293
- </select>
294
- `
295
- : html ``}
296
- ${this.displayValueTemplate()}
297
- </div>
298
- </div>
299
- `;
300
- }
301
- _onTabScroll(e) {
302
- if (!this.tabContainer) {
303
- return;
304
- }
305
- if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {
306
- this.tabNavLeftButton.setAttribute('disabled', '');
307
- this.tabNavRightButton.setAttribute('disabled', '');
308
- }
309
- // left-end
310
- else if (this.tabContainer.scrollLeft == 0) {
311
- this.tabNavLeftButton.setAttribute('disabled', '');
312
- this.tabNavRightButton.removeAttribute('disabled');
313
- }
314
- // right-end
315
- else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {
316
- this.tabNavLeftButton.removeAttribute('disabled');
317
- this.tabNavRightButton.setAttribute('disabled', '');
318
- }
319
- else {
320
- this.tabNavLeftButton.removeAttribute('disabled');
321
- this.tabNavRightButton.removeAttribute('disabled');
322
- }
323
- }
324
- _onTabScrollNavLeft(e) {
325
- if (!this.tabContainer) {
326
- return;
327
- }
328
- this.tabContainer.style.scrollBehavior = 'smooth';
329
- this.tabContainer.scrollLeft -= this.tabContainer.clientWidth;
330
- this.tabContainer.style.scrollBehavior = 'auto';
331
- }
332
- _onTabScrollNavRight(e) {
333
- if (!this.tabContainer) {
334
- return;
335
- }
336
- this.tabContainer.style.scrollBehavior = 'smooth';
337
- this.tabContainer.scrollLeft += this.tabContainer.clientWidth;
338
- this.tabContainer.style.scrollBehavior = 'auto';
339
- }
340
- }
341
- PropertyEditorChartJSMultiSeriesAbstract.styles = [
342
- ...PropertyEditorChartJSAbstract.styles,
343
- css `
344
- md-tabs {
345
- background-color: rgb(204, 204, 204);
346
- }
347
- input[type='text'],
348
- input[type='number'] {
349
- border: 1px solid rgba(0, 0, 0, 0.2);
350
- }
351
- `
352
- ];
353
- export default PropertyEditorChartJSMultiSeriesAbstract;
354
- __decorate([
355
- query('#tabs')
356
- ], PropertyEditorChartJSMultiSeriesAbstract.prototype, "tabs", void 0);
357
- __decorate([
358
- query('#tab-nav-left-button')
359
- ], PropertyEditorChartJSMultiSeriesAbstract.prototype, "tabNavLeftButton", void 0);
360
- __decorate([
361
- query('#tab-nav-right-button')
362
- ], PropertyEditorChartJSMultiSeriesAbstract.prototype, "tabNavRightButton", void 0);
363
- //# sourceMappingURL=property-editor-chartjs-multi-series-abstract.js.map