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

Sign up to get free protection for your applications and to get access to all the features.
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