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