@operato/scene-chartjs 7.0.1 → 7.0.6

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 (50) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/config-converter.js +2 -5
  3. package/dist/config-converter.js.map +1 -1
  4. package/dist/editors/index.d.ts +1 -1
  5. package/dist/editors/index.js +2 -2
  6. package/dist/editors/index.js.map +1 -1
  7. package/dist/ox-chart.js +1 -1
  8. package/dist/ox-chart.js.map +1 -1
  9. package/package.json +4 -2
  10. package/src/config-converter.ts +2 -6
  11. package/src/editors/index.ts +2 -2
  12. package/src/ox-chart.ts +1 -1
  13. package/translations/en.json +2 -1
  14. package/translations/ja.json +2 -1
  15. package/translations/ko.json +2 -1
  16. package/translations/ms.json +2 -1
  17. package/translations/zh.json +2 -1
  18. package/tsconfig.tsbuildinfo +1 -1
  19. package/dist/editors/property-editor-chartjs-abstract.d.ts +0 -50
  20. package/dist/editors/property-editor-chartjs-abstract.js +0 -273
  21. package/dist/editors/property-editor-chartjs-abstract.js.map +0 -1
  22. package/dist/editors/property-editor-chartjs-hbar.d.ts +0 -10
  23. package/dist/editors/property-editor-chartjs-hbar.js +0 -154
  24. package/dist/editors/property-editor-chartjs-hbar.js.map +0 -1
  25. package/dist/editors/property-editor-chartjs-mixed.d.ts +0 -17
  26. package/dist/editors/property-editor-chartjs-mixed.js +0 -186
  27. package/dist/editors/property-editor-chartjs-mixed.js.map +0 -1
  28. package/dist/editors/property-editor-chartjs-multi-series-abstract.d.ts +0 -29
  29. package/dist/editors/property-editor-chartjs-multi-series-abstract.js +0 -363
  30. package/dist/editors/property-editor-chartjs-multi-series-abstract.js.map +0 -1
  31. package/dist/editors/property-editor-chartjs-pie.d.ts +0 -18
  32. package/dist/editors/property-editor-chartjs-pie.js +0 -74
  33. package/dist/editors/property-editor-chartjs-pie.js.map +0 -1
  34. package/dist/editors/property-editor-chartjs-radar.d.ts +0 -8
  35. package/dist/editors/property-editor-chartjs-radar.js +0 -36
  36. package/dist/editors/property-editor-chartjs-radar.js.map +0 -1
  37. package/dist/editors/property-editor-chartjs-styles.d.ts +0 -1
  38. package/dist/editors/property-editor-chartjs-styles.js +0 -167
  39. package/dist/editors/property-editor-chartjs-styles.js.map +0 -1
  40. package/dist/editors/property-editor-chartjs.d.ts +0 -10
  41. package/dist/editors/property-editor-chartjs.js +0 -79
  42. package/dist/editors/property-editor-chartjs.js.map +0 -1
  43. package/src/editors/property-editor-chartjs-abstract.ts +0 -324
  44. package/src/editors/property-editor-chartjs-hbar.ts +0 -157
  45. package/src/editors/property-editor-chartjs-mixed.ts +0 -199
  46. package/src/editors/property-editor-chartjs-multi-series-abstract.ts +0 -382
  47. package/src/editors/property-editor-chartjs-pie.ts +0 -86
  48. package/src/editors/property-editor-chartjs-radar.ts +0 -39
  49. package/src/editors/property-editor-chartjs-styles.ts +0 -167
  50. package/src/editors/property-editor-chartjs.ts +0 -79
@@ -1,324 +0,0 @@
1
- import '@operato/i18n/ox-i18n.js'
2
-
3
- import { html, LitElement } from 'lit'
4
- import { property } from 'lit/decorators.js'
5
-
6
- import { random as randomColor, TinyColor } from '@ctrl/tinycolor'
7
- import { Properties } from '@hatiolab/things-scene'
8
-
9
- import { PropertyEditorChartJSStyles } from './property-editor-chartjs-styles'
10
-
11
- export default class PropertyEditorChartJSAbstract extends LitElement {
12
- static styles = [PropertyEditorChartJSStyles]
13
-
14
- @property({ type: Object }) value: any = {}
15
- @property({ type: Number }) currentSeriesIndex: number = 0
16
-
17
- render() {
18
- return html`
19
- <legend><ox-i18n msgid="label.chart">Chart</ox-i18n></legend>
20
-
21
- <label> <ox-i18n msgid="label.theme">theme</ox-i18n> </label>
22
- <select value-key="theme" class="select-content" .value=${this.theme}>
23
- <option value="dark">dark</option>
24
- <option value="light">light</option>
25
- </select>
26
-
27
- <input type="checkbox" value-key="tooltip" .checked=${this.tooltip} />
28
- <label> <ox-i18n msgid="label.tooltip">Tooltip</ox-i18n> </label>
29
-
30
- <input type="checkbox" value-key="animation" .checked=${this.animation} />
31
- <label> <ox-i18n msgid="label.animation">Animation</ox-i18n> </label>
32
-
33
- <input type="checkbox" value-key="display" .checked=${this.display} />
34
- <label> <ox-i18n msgid="label.legend">Legend</ox-i18n> </label>
35
-
36
- <input type="checkbox" value-key="stacked" .checked=${this.stacked} />
37
- <label> <ox-i18n msgid="label.stacked">Stacked</ox-i18n> </label>
38
-
39
- ${this.display
40
- ? html`
41
- <label> <ox-i18n msgid="label.position">Position</ox-i18n> </label>
42
- <select value-key="position" class="select-content" .value=${this.position}>
43
- <option value="top">top</option>
44
- <option value="right">right</option>
45
- <option value="bottom">bottom</option>
46
- <option value="left">left</option>
47
- </select>
48
- `
49
- : html``}
50
- ${this.editorTemplate(this)}
51
- `
52
- }
53
-
54
- firstUpdated() {
55
- this.renderRoot.addEventListener('change', this.onValuesChanged.bind(this))
56
- }
57
-
58
- displayValueTemplate() {
59
- return html`
60
- <label for="value-format"> <ox-i18n msgid="label.value-format">Value Format</ox-i18n> </label>
61
- <input type="text" value-key="series.valueFormat" .value=${this.series.valueFormat || ''} list="format-list" />
62
- <datalist id="format-list">
63
- <option value="#,###."></option>
64
- <option value="#,###.#"></option>
65
- <option value="#,###.0"></option>
66
- <option value="#,##0.#"></option>
67
- <option value="#,##0.0"></option>
68
- <option value="#,##0.0%"></option>
69
- </datalist>
70
-
71
- <label> <ox-i18n msgid="label.value-prefix">Value Prefix</ox-i18n> </label>
72
- <input type="text" value-key="series.valuePrefix" .value=${this.series.valuePrefix || ''} />
73
-
74
- <label> <ox-i18n msgid="label.value-suffix">Value suffix</ox-i18n> </label>
75
- <input type="text" value-key="series.valueSuffix" .value=${this.series.valueSuffix || ''} />
76
-
77
- <input type="checkbox" value-key="series.displayValue" .checked=${this.series.displayValue || false} />
78
- <label> <ox-i18n msgid="label.value-display">Value Display</ox-i18n> </label>
79
-
80
- ${this.series.displayValue
81
- ? html`
82
- <label> <ox-i18n msgid="label.font-color">Font Color</ox-i18n> </label>
83
- <ox-input-color
84
- value-key="series.defaultFontColor"
85
- .value=${this.series.defaultFontColor || '#000'}
86
- ></ox-input-color>
87
- <label> <ox-i18n msgid="label.font-size">Font Size</ox-i18n> </label>
88
- <input type="number" value-key="series.defaultFontSize" .value=${this.series.defaultFontSize || 10} />
89
- <label> <ox-i18n msgid="label.position">Position</ox-i18n> </label>
90
- <select value-key="series.dataLabelAnchor" .value=${this.series.dataLabelAnchor || 'center'}>
91
- <option value="start">Start</option>
92
- <option value="center" selected>Center</option>
93
- <option value="end">End</option>
94
- </select>
95
- `
96
- : html``}
97
- `
98
- }
99
-
100
- editorTemplate(props: Properties) {
101
- return html``
102
- }
103
-
104
- get data() {
105
- return this.value.data
106
- }
107
-
108
- set data(data) {
109
- this.value.data = data
110
- }
111
-
112
- get datasets() {
113
- if (!this.data.datasets) this.data.datasets = []
114
-
115
- return this.data.datasets
116
- }
117
-
118
- set datasets(datasets) {
119
- this.datasets = datasets
120
- }
121
-
122
- get series() {
123
- if (!this.datasets[this.currentSeriesIndex]) this.datasets[this.currentSeriesIndex] = {}
124
- return this.datasets[this.currentSeriesIndex]
125
- }
126
-
127
- set series(series) {
128
- !this.data ? (this.data = { dataset: [series] }) : (this.datasets[this.currentSeriesIndex] = series)
129
- }
130
-
131
- set dataKey(key) {
132
- this.series.dataKey = key
133
- }
134
-
135
- get dataKey() {
136
- return this.series.dataKey
137
- }
138
-
139
- get legend() {
140
- !this.value.options && (this.value.options = {})
141
- return this.value.options.legend
142
- }
143
-
144
- set legend(legend) {
145
- this.value.options.legend = legend
146
- }
147
-
148
- get theme() {
149
- return this.value.options && this.value.options.theme
150
- }
151
-
152
- set theme(theme) {
153
- !this.value.options && (this.value.options = {})
154
- this.value.options.theme = theme
155
- }
156
-
157
- get tooltip() {
158
- return !this.value.options || this.value.options.tooltip !== false /* default true */
159
- }
160
-
161
- set tooltip(tooltip) {
162
- this.value.options.tooltip = tooltip
163
- }
164
-
165
- get animation() {
166
- return !this.value.options || this.value.options.animation !== false /* default true */
167
- }
168
-
169
- set animation(animation) {
170
- this.value.options.animation = animation
171
- }
172
-
173
- get scales() {
174
- return this.value.options.scales
175
- }
176
-
177
- set scales(scales) {
178
- !this.value.options && (this.value.options = {})
179
- this.value.options.scales = scales
180
- }
181
-
182
- get display() {
183
- return this.legend && this.legend.display
184
- }
185
-
186
- set display(display) {
187
- this.legend.display = display
188
- }
189
-
190
- get position() {
191
- return this.legend.position
192
- }
193
-
194
- set position(position) {
195
- this.legend.position = position
196
- }
197
-
198
- get stacked() {
199
- return this.value.options.stacked
200
- }
201
-
202
- set stacked(stacked) {
203
- this.value.options.stacked = stacked
204
- }
205
-
206
- get labelDataKey() {
207
- return this.data && this.data.labelDataKey
208
- }
209
-
210
- set labelDataKey(labelDataKey) {
211
- this.data.labelDataKey = labelDataKey
212
- }
213
-
214
- set options(options) {
215
- this.value.options = options
216
- }
217
-
218
- get options() {
219
- return this.value.options
220
- }
221
-
222
- onValuesChanged(e: Event) {
223
- var element = e.target as HTMLInputElement
224
- var key = element.getAttribute('value-key')
225
- var value = element.value
226
-
227
- if (!key) {
228
- return
229
- }
230
-
231
- value = this._getElementValue(element)
232
-
233
- var attrs = key.split('.')
234
- var attr = attrs.shift() || ''
235
- var variable = this
236
-
237
- while (attrs.length > 0) {
238
- //@ts-ignore
239
- variable = variable[attr]
240
- attr = attrs.shift() || ''
241
- }
242
-
243
- //@ts-ignore
244
- variable[attr] = value
245
-
246
- this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
247
- this.requestUpdate()
248
- }
249
-
250
- onTapAddTab(e: Event) {
251
- if (!this.value.data.datasets) return
252
-
253
- var lastSeriesIndex = this.value.data.datasets.length
254
- var chartType = this.series.type || this.value.type
255
- var lastSeriesColor = new TinyColor(this.datasets[lastSeriesIndex - 1].backgroundColor)
256
-
257
- var seriesModel = this._getSeriesModel({
258
- chartType,
259
- datasetsLength: lastSeriesIndex,
260
- lastSeriesColor
261
- })
262
-
263
- this.value.data.datasets.push(seriesModel)
264
- this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
265
- this.currentSeriesIndex = lastSeriesIndex
266
- }
267
-
268
- onTapRemoveCurrentTab(e: Event) {
269
- if (!this.value.data.datasets) return
270
-
271
- var currIndex = this.currentSeriesIndex
272
- this.value.data.datasets.splice(currIndex, 1)
273
-
274
- currIndex--
275
-
276
- if (currIndex < 0) currIndex = 0
277
-
278
- this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
279
- this.currentSeriesIndex = currIndex
280
-
281
- this.requestUpdate()
282
- }
283
-
284
- _getSeriesModel({
285
- chartType,
286
- datasetsLength,
287
- lastSeriesColor
288
- }: {
289
- chartType: any
290
- datasetsLength: number
291
- lastSeriesColor: TinyColor
292
- }) {
293
- var addSeriesOption: any = {
294
- label: `series ${datasetsLength + 1}`,
295
- data: [],
296
- borderWidth: 1,
297
- dataKey: '',
298
- yAxisID: 'left',
299
- color: randomColor({
300
- hue: lastSeriesColor as any
301
- }).toRgbString()
302
- }
303
-
304
- addSeriesOption.type = addSeriesOption.chartType = chartType
305
- return addSeriesOption
306
- }
307
-
308
- _getElementValue(element: HTMLElement) {
309
- switch (element.tagName) {
310
- case 'INPUT':
311
- switch ((element as HTMLInputElement).type) {
312
- case 'checkbox':
313
- return (element as HTMLInputElement).checked
314
- case 'number':
315
- return Number((element as HTMLInputElement).value) || 0
316
- case 'text':
317
- return String((element as HTMLInputElement).value)
318
- }
319
-
320
- default:
321
- return (element as any).value
322
- }
323
- }
324
- }
@@ -1,157 +0,0 @@
1
- import '@material/web/icon/icon.js'
2
- import '@material/web/button/elevated-button.js'
3
- import '@material/web/tabs/tabs.js'
4
-
5
- import '@operato/i18n/ox-i18n.js'
6
-
7
- import { html } from 'lit'
8
- import { customElement } from 'lit/decorators.js'
9
-
10
- import PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract'
11
-
12
- @customElement('property-editor-chartjs-hbar')
13
- export default class PropertyEditorChartJSHBar extends PropertyEditorChartJSMultiSeriesAbstract {
14
- static styles = [...PropertyEditorChartJSMultiSeriesAbstract.styles]
15
-
16
- editorTemplate() {
17
- return html`
18
- <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
19
- ${this.multiSeriesTabTemplate()}
20
-
21
- <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
22
-
23
- <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
24
- <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
25
-
26
- <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
27
- <input type="text" value-key="yAxes0.axisTitle" .value=${this.yAxes0.axisTitle || ''} />
28
-
29
- <label><ox-i18n msgid="label.bar-spacing">Bar Spacing</ox-i18n></label>
30
- <input
31
- type="number"
32
- min="0"
33
- max="1"
34
- step="0.1"
35
- value-key="yAxes0.barSpacing"
36
- .value=${this.yAxes0.barSpacing || NaN}
37
- />
38
- <label><ox-i18n msgid="label.tick-spacing">Tick Spacing</ox-i18n></label>
39
- <input
40
- type="number"
41
- min="0"
42
- max="1"
43
- step="0.1"
44
- value-key="yAxes0.categorySpacing"
45
- .value=${this.yAxes0.categorySpacing || NaN}
46
- />
47
-
48
- <input type="checkbox" value-key="value.options.xGridLine" .checked=${this.value.options.xGridLine} />
49
- <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
50
-
51
- <input type="checkbox" value-key="xAxes0.ticks.display" .checked=${this.xAxes0.ticks.display} />
52
- <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
53
-
54
- <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
55
-
56
- <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
57
- <input type="text" value-key="xAxes0.title" .value=${this.xAxes0.axisTitle || ''} />
58
-
59
- <input type="checkbox" value-key="xAxes0.ticks.autoMin" .checked=${this.xAxes0.ticks.autoMin} />
60
- <label> <ox-i18n msgid="label.axis-min-auto">Axis Min Auto</ox-i18n> </label>
61
-
62
- <input type="checkbox" value-key="xAxes0.ticks.autoMax" .checked=${this.xAxes0.ticks.autoMax} />
63
- <label> <ox-i18n msgid="label.axis-max-auto">Axis Max Auto</ox-i18n> </label>
64
-
65
- ${!this.xAxes0.ticks.autoMin
66
- ? html`
67
- <label> <ox-i18n msgid="label.axis-min">Axis Min</ox-i18n> </label>
68
- <input type="number" value-key="xAxes0.ticks.min" .value=${this.xAxes0.ticks.min} />
69
- `
70
- : html``}
71
- ${!this.xAxes0.ticks.autoMax
72
- ? html`
73
- <label> <ox-i18n msgid="label.axis-max">Axis Max</ox-i18n> </label>
74
- <input type="number" value-key="xAxes0.ticks.max" .value=${this.xAxes0.ticks.max} />
75
- `
76
- : html``}
77
-
78
- <label> <ox-i18n msgid="label.axis-step-size">Axis Step Size</ox-i18n> </label>
79
- <input type="number" value-key="yAxes0.ticks.stepSize" .value=${this.yAxes0.ticks.stepSize} />
80
-
81
- <input type="checkbox" .checked=${this.value.options.yGridLine} />
82
- <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
83
-
84
- <input type="checkbox" value-key="yAxes0.ticks.display" .checked=${this.yAxes0.ticks.display} />
85
- <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
86
- `
87
- }
88
-
89
- multiSeriesTabTemplate() {
90
- return html`
91
- <div id="series-properties-container" fullwidth>
92
- <div id="tab-header">
93
- <md-icon
94
- id="tab-nav-left-button"
95
- @tap=${(e: Event) => {
96
- this._onTabScrollNavLeft(e)
97
- }}
98
- disabled
99
- >chevron_left</md-icon
100
- >
101
- <div
102
- id="tabs"
103
- @change=${(e: Event) => {
104
- this.currentSeriesIndex = (e.target as any).activeTabIndex
105
- }}
106
- active-tab-index=${this.currentSeriesIndex}
107
- fit-container
108
- >
109
- ${this.datasets.map(
110
- (dataset: any, index: number) => html`
111
- <div
112
- data-series=${index + 1}
113
- data-tab-index=${index}
114
- tab
115
- ?selected=${index == this.currentSeriesIndex}
116
- @click=${(e: Event) => {
117
- const target = e.target as HTMLDivElement
118
- this.currentSeriesIndex = Number(target.getAttribute('data-tab-index'))
119
- }}
120
- >
121
- ${index + 1}
122
- ${!this.datasets || (this.datasets.length != 1 && this.currentSeriesIndex == index)
123
- ? html` <md-icon @tap="${(e: Event) => this.onTapRemoveCurrentTab(e)}"> close </md-icon> `
124
- : html``}
125
- </div>
126
- `
127
- )}
128
- </div>
129
- <md-icon
130
- id="tab-nav-right-button"
131
- @click=${(e: Event) => {
132
- this._onTabScrollNavRight(e)
133
- }}
134
- disabled
135
- >chevron_right</md-icon
136
- >
137
- </div>
138
- <div id="add-series-button-container">
139
- <md-icon id="add-series-button" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>
140
- </div>
141
-
142
- <div class="tab-content">
143
- <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
144
- <input type="text" value-key="dataKey" .value=${this.dataKey} />
145
- <label> <ox-i18n msgid="label.label">Label</ox-i18n> </label>
146
- <input type="text" value-key="series.label" .value=${this.series.label} />
147
- <label> <ox-i18n msgid="label.color">Color</ox-i18n> </label>
148
- <ox-input-color value-key="color" .value=${this.color}></ox-input-color>
149
- <label> <ox-i18n msgid="label.stack-group">Stack Group</ox-i18n> </label>
150
- <input type="text" value-key="series.stack" .value=${this.series.stack || ''} />
151
-
152
- ${this.displayValueTemplate()}
153
- </div>
154
- </div>
155
- `
156
- }
157
- }
@@ -1,199 +0,0 @@
1
- import '@operato/i18n/ox-i18n.js'
2
-
3
- import { html } from 'lit'
4
- import { customElement } from 'lit/decorators.js'
5
-
6
- import { Properties } from '@hatiolab/things-scene'
7
-
8
- import PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract'
9
-
10
- @customElement('property-editor-chartjs-mixed')
11
- export default class PropertyEditorChartJSMixed extends PropertyEditorChartJSMultiSeriesAbstract {
12
- static styles = PropertyEditorChartJSMultiSeriesAbstract.styles
13
-
14
- constructor() {
15
- super()
16
-
17
- this.value = {
18
- options: {
19
- legend: {},
20
- scales: {
21
- xAxes: [
22
- {
23
- ticks: {}
24
- }
25
- ],
26
- yAxes: [
27
- {
28
- ticks: {}
29
- }
30
- ]
31
- }
32
- },
33
- data: {
34
- datasets: []
35
- }
36
- }
37
- }
38
-
39
- get xAxes0() {
40
- return this.scales.xAxes[0]
41
- }
42
-
43
- set xAxes0(xAxes0) {
44
- this.scales.xAxes[0] = xAxes0
45
- }
46
-
47
- get yAxes0() {
48
- return this.scales.yAxes[0]
49
- }
50
-
51
- set yAxes0(yAxes0) {
52
- this.scales.yAxes[0] = yAxes0
53
- }
54
-
55
- get yAxes1() {
56
- return this.scales.yAxes[1]
57
- }
58
-
59
- set yAxes1(yAxes1) {
60
- this.scales.yAxes[1] = yAxes1
61
- }
62
-
63
- get multiAxis() {
64
- return this.value.options.multiAxis
65
- }
66
-
67
- set multiAxis(multiAxis) {
68
- this.value.options.multiAxis = multiAxis
69
- }
70
-
71
- editorTemplate(props: Properties) {
72
- return html`
73
- <input type="checkbox" value-key="multiAxis" .checked=${this.multiAxis} />
74
- <label> <ox-i18n msgid="label.multi-axis">Multi Axis</ox-i18n> </label>
75
-
76
- <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
77
-
78
- <div fullwidth>${this.multiSeriesTabTemplate()}</div>
79
-
80
- <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
81
-
82
- <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
83
- <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
84
-
85
- <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
86
- <input type="text" value-key="xAxes0.axisTitle" .value=${this.xAxes0.axisTitle || ''} />
87
-
88
- ${this._hasBarSeries(this.value)
89
- ? html`
90
- <label><ox-i18n msgid="label.bar-spacing">Bar Spacing</ox-i18n></label>
91
- <input
92
- type="number"
93
- min="0"
94
- max="1"
95
- step="0.1"
96
- value-key="xAxes0.barSpacing"
97
- .value=${this.xAxes0.barSpacing || NaN}
98
- />
99
- <label><ox-i18n msgid="label.tick-spacing">Tick Spacing</ox-i18n></label>
100
- <input
101
- type="number"
102
- min="0"
103
- max="1"
104
- step="0.1"
105
- value-key="xAxes0.categorySpacing"
106
- .value=${this.xAxes0.categorySpacing || NaN}
107
- />
108
- `
109
- : html``}
110
-
111
- <input type="checkbox" value-key="value.options.xGridLine" .checked=${props.value.options.xGridLine} />
112
- <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
113
-
114
- <input type="checkbox" value-key="xAxes0.ticks.display" .checked=${this.xAxes0.ticks.display} />
115
- <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
116
-
117
- <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
118
-
119
- <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
120
- <input type="text" value-key="yAxes0.axisTitle" .value=${this.yAxes0.axisTitle || ''} />
121
-
122
- <input type="checkbox" value-key="yAxes0.ticks.autoMin" .checked=${this.yAxes0.ticks.autoMin} />
123
- <label> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
124
-
125
- <input type="checkbox" value-key="yAxes0.ticks.autoMax" .checked=${this.yAxes0.ticks.autoMax} />
126
- <label> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
127
-
128
- ${!this.yAxes0.ticks.autoMin
129
- ? html`
130
- <label> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
131
- <input type="number" value-key="yAxes0.ticks.min" .value=${this.yAxes0.ticks.min} />
132
- `
133
- : html``}
134
- ${!this.yAxes0.ticks.autoMax
135
- ? html`
136
- <label> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
137
- <input type="number" value-key="yAxes0.ticks.max" .value=${this.yAxes0.ticks.max} />
138
- `
139
- : html``}
140
-
141
- <label> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
142
- <input type="number" value-key="yAxes0.ticks.stepSize" .value=${this.yAxes0.ticks.stepSize} />
143
-
144
- <input type="checkbox" value-key="value.options.yGridLine" .checked=${props.value.options.yGridLine} />
145
- <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
146
-
147
- <input type="checkbox" value-key="yAxes0.ticks.display" .checked=${this.yAxes0.ticks.display} />
148
- <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
149
-
150
- ${props.value.options.multiAxis
151
- ? html`
152
- <legend><ox-i18n msgid="label.y-2nd-axes">Y 2nd Axes</ox-i18n></legend>
153
-
154
- <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
155
- <input type="text" value-key="yAxes1.axisTitle" .value=${this.yAxes1.axisTitle || ''} />
156
-
157
- <input type="checkbox" value-key="yAxes1.ticks.autoMin" .checked=${this.yAxes1.ticks.autoMin} />
158
- <label> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
159
-
160
- <input type="checkbox" value-key="yAxes1.ticks.autoMax" .checked=${this.yAxes1.ticks.autoMax} />
161
- <label> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
162
-
163
- ${!this.yAxes1.ticks.autoMin
164
- ? html`
165
- <label> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
166
- <input type="number" value-key="yAxes1.ticks.min" .value=${this.yAxes1.ticks.min} />
167
- `
168
- : html``}
169
- ${!this.yAxes1.ticks.autoMax
170
- ? html`
171
- <label> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
172
- <input type="number" value-key="yAxes1.ticks.max" .value=${this.yAxes1.ticks.max} />
173
- `
174
- : html``}
175
-
176
- <label> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
177
- <input type="number" value-key="yAxes1.ticks.stepSize" .value=${this.yAxes1.ticks.stepSize} />
178
-
179
- <input
180
- type="checkbox"
181
- value-key="value.options.y2ndGridLine"
182
- .checked=${props.value.options.y2ndGridLine}
183
- />
184
- <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
185
-
186
- <input type="checkbox" value-key="yAxes1.ticks.display" .checked=${this.yAxes1.ticks.display} />
187
- <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
188
- `
189
- : html``}
190
- `
191
- }
192
-
193
- _hasBarSeries(chart: any) {
194
- var hasBarSeries = false
195
- hasBarSeries = chart.data.datasets.some((s: any) => s.type == 'bar')
196
-
197
- return hasBarSeries
198
- }
199
- }