@operato/scene-chartjs 8.0.0-alpha.4 → 8.0.0-alpha.6
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +9 -0
- package/dist/chartjs.js +2 -1
- package/dist/chartjs.js.map +1 -1
- package/dist/ox-chart.js +1 -0
- package/dist/ox-chart.js.map +1 -1
- package/package.json +2 -2
- package/schema.graphql +19 -7
- package/src/chartjs.ts +2 -1
- package/src/ox-chart.ts +2 -1
- package/tsconfig.tsbuildinfo +1 -1
- package/dist/editors/property-editor-chartjs-abstract.d.ts +0 -50
- package/dist/editors/property-editor-chartjs-abstract.js +0 -285
- package/dist/editors/property-editor-chartjs-abstract.js.map +0 -1
- package/dist/editors/property-editor-chartjs-hbar.d.ts +0 -10
- package/dist/editors/property-editor-chartjs-hbar.js +0 -158
- package/dist/editors/property-editor-chartjs-hbar.js.map +0 -1
- package/dist/editors/property-editor-chartjs-mixed.d.ts +0 -17
- package/dist/editors/property-editor-chartjs-mixed.js +0 -186
- package/dist/editors/property-editor-chartjs-mixed.js.map +0 -1
- package/dist/editors/property-editor-chartjs-multi-series-abstract.d.ts +0 -31
- package/dist/editors/property-editor-chartjs-multi-series-abstract.js +0 -371
- package/dist/editors/property-editor-chartjs-multi-series-abstract.js.map +0 -1
- package/dist/editors/property-editor-chartjs-pie.d.ts +0 -18
- package/dist/editors/property-editor-chartjs-pie.js +0 -74
- package/dist/editors/property-editor-chartjs-pie.js.map +0 -1
- package/dist/editors/property-editor-chartjs-radar.d.ts +0 -8
- package/dist/editors/property-editor-chartjs-radar.js +0 -36
- package/dist/editors/property-editor-chartjs-radar.js.map +0 -1
- package/dist/editors/property-editor-chartjs-styles.d.ts +0 -1
- package/dist/editors/property-editor-chartjs-styles.js +0 -161
- package/dist/editors/property-editor-chartjs-styles.js.map +0 -1
- package/dist/editors/property-editor-chartjs.d.ts +0 -10
- package/dist/editors/property-editor-chartjs.js +0 -77
- 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
|