@operato/scene-chartjs 1.1.8 → 1.1.11

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 (41) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/editors/property-editor-chartjs-abstract.d.ts +1 -0
  3. package/dist/editors/property-editor-chartjs-abstract.js +14 -13
  4. package/dist/editors/property-editor-chartjs-abstract.js.map +1 -1
  5. package/dist/editors/property-editor-chartjs-hbar.d.ts +1 -0
  6. package/dist/editors/property-editor-chartjs-hbar.js +22 -21
  7. package/dist/editors/property-editor-chartjs-hbar.js.map +1 -1
  8. package/dist/editors/property-editor-chartjs-mixed.d.ts +1 -0
  9. package/dist/editors/property-editor-chartjs-mixed.js +28 -27
  10. package/dist/editors/property-editor-chartjs-mixed.js.map +1 -1
  11. package/dist/editors/property-editor-chartjs-multi-series-abstract.d.ts +1 -0
  12. package/dist/editors/property-editor-chartjs-multi-series-abstract.js +38 -37
  13. package/dist/editors/property-editor-chartjs-multi-series-abstract.js.map +1 -1
  14. package/dist/editors/property-editor-chartjs-pie.d.ts +1 -0
  15. package/dist/editors/property-editor-chartjs-pie.js +6 -5
  16. package/dist/editors/property-editor-chartjs-pie.js.map +1 -1
  17. package/dist/editors/property-editor-chartjs-radar.d.ts +1 -0
  18. package/dist/editors/property-editor-chartjs-radar.js +4 -3
  19. package/dist/editors/property-editor-chartjs-radar.js.map +1 -1
  20. package/dist/editors/property-editor-chartjs.d.ts +1 -0
  21. package/dist/editors/property-editor-chartjs.js +2 -1
  22. package/dist/editors/property-editor-chartjs.js.map +1 -1
  23. package/logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json +3 -13
  24. package/logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json +3 -13
  25. package/logs/application-2022-11-07-00.log +6 -0
  26. package/logs/connections-2022-11-07-00.log +35 -0
  27. package/package.json +2 -2
  28. package/src/editors/property-editor-chartjs-abstract.ts +15 -13
  29. package/src/editors/property-editor-chartjs-hbar.ts +23 -21
  30. package/src/editors/property-editor-chartjs-mixed.ts +29 -27
  31. package/src/editors/property-editor-chartjs-multi-series-abstract.ts +39 -37
  32. package/src/editors/property-editor-chartjs-pie.ts +7 -5
  33. package/src/editors/property-editor-chartjs-radar.ts +5 -3
  34. package/src/editors/property-editor-chartjs.ts +3 -1
  35. package/tsconfig.tsbuildinfo +1 -1
  36. package/logs/application-2022-10-17-18.log +0 -18
  37. package/logs/application-2022-10-17-19.log +0 -16
  38. package/logs/application-2022-10-17-22.log +0 -7
  39. package/logs/connections-2022-10-17-18.log +0 -105
  40. package/logs/connections-2022-10-17-19.log +0 -70
  41. package/logs/connections-2022-10-17-22.log +0 -35
package/src/editors/property-editor-chartjs-abstract.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import '@operato/i18n/ox-i18n.js'
2
+
1
3
  import { html, LitElement } from 'lit'
2
4
  import { property } from 'lit/decorators.js'
3
5
 
@@ -14,29 +16,29 @@ export default class PropertyEditorChartJSAbstract extends LitElement {
14
16
 
15
17
  render() {
16
18
  return html`
17
- <legend><i18n-msg msgid="label.chart">Chart</i18n-msg></legend>
19
+ <legend><ox-i18n msgid="label.chart">Chart</ox-i18n></legend>
18
20
 
19
- <label> <i18n-msg msgid="label.theme">theme</i18n-msg> </label>
21
+ <label> <ox-i18n msgid="label.theme">theme</ox-i18n> </label>
20
22
  <select value-key="theme" class="select-content" .value=${this.theme}>
21
23
  <option value="dark">dark</option>
22
24
  <option value="light">light</option>
23
25
  </select>
24
26
 
25
27
  <input type="checkbox" value-key="tooltip" .checked=${this.tooltip} />
26
- <label> <i18n-msg msgid="label.tooltip">Tooltip</i18n-msg> </label>
28
+ <label> <ox-i18n msgid="label.tooltip">Tooltip</ox-i18n> </label>
27
29
 
28
30
  <input type="checkbox" value-key="animation" .checked=${this.animation} />
29
- <label> <i18n-msg msgid="label.animation">Animation</i18n-msg> </label>
31
+ <label> <ox-i18n msgid="label.animation">Animation</ox-i18n> </label>
30
32
 
31
33
  <input type="checkbox" value-key="display" .checked=${this.display} />
32
- <label> <i18n-msg msgid="label.legend">Legend</i18n-msg> </label>
34
+ <label> <ox-i18n msgid="label.legend">Legend</ox-i18n> </label>
33
35
 
34
36
  <input type="checkbox" value-key="stacked" .checked=${this.stacked} />
35
- <label> <i18n-msg msgid="label.stacked">Stacked</i18n-msg> </label>
37
+ <label> <ox-i18n msgid="label.stacked">Stacked</ox-i18n> </label>
36
38
 
37
39
  ${this.display
38
40
  ? html`
39
- <label> <i18n-msg msgid="label.position">Position</i18n-msg> </label>
41
+ <label> <ox-i18n msgid="label.position">Position</ox-i18n> </label>
40
42
  <select value-key="position" class="select-content" .value=${this.position}>
41
43
  <option value="top">top</option>
42
44
  <option value="right">right</option>
@@ -55,25 +57,25 @@ export default class PropertyEditorChartJSAbstract extends LitElement {
55
57
 
56
58
  displayValueTemplate() {
57
59
  return html`
58
- <label> <i18n-msg msgid="label.value-prefix">Value Prefix</i18n-msg> </label>
60
+ <label> <ox-i18n msgid="label.value-prefix">Value Prefix</ox-i18n> </label>
59
61
  <input type="text" value-key="series.valuePrefix" .value=${this.series.valuePrefix || ''} />
60
62
 
61
- <label> <i18n-msg msgid="label.value-suffix">Value suffix</i18n-msg> </label>
63
+ <label> <ox-i18n msgid="label.value-suffix">Value suffix</ox-i18n> </label>
62
64
  <input type="text" value-key="series.valueSuffix" .value=${this.series.valueSuffix || ''} />
63
65
 
64
66
  <input type="checkbox" value-key="series.displayValue" .checked=${this.series.displayValue || false} />
65
- <label> <i18n-msg msgid="label.value-display">Value Display</i18n-msg> </label>
67
+ <label> <ox-i18n msgid="label.value-display">Value Display</ox-i18n> </label>
66
68
 
67
69
  ${this.series.displayValue
68
70
  ? html`
69
- <label> <i18n-msg msgid="label.font-color">Font Color</i18n-msg> </label>
71
+ <label> <ox-i18n msgid="label.font-color">Font Color</ox-i18n> </label>
70
72
  <ox-input-color
71
73
  value-key="series.defaultFontColor"
72
74
  .value=${this.series.defaultFontColor || '#000'}
73
75
  ></ox-input-color>
74
- <label> <i18n-msg msgid="label.font-size">Font Size</i18n-msg> </label>
76
+ <label> <ox-i18n msgid="label.font-size">Font Size</ox-i18n> </label>
75
77
  <input type="number" value-key="series.defaultFontSize" .value=${this.series.defaultFontSize || 10} />
76
- <label> <i18n-msg msgid="label.position">Position</i18n-msg> </label>
78
+ <label> <ox-i18n msgid="label.position">Position</ox-i18n> </label>
77
79
  <select value-key="series.dataLabelAnchor" .value=${this.series.dataLabelAnchor || 'center'}>
78
80
  <option value="start">Start</option>
79
81
  <option value="center" selected>Center</option>
package/src/editors/property-editor-chartjs-hbar.ts CHANGED
@@ -2,6 +2,8 @@ import '@polymer/paper-icon-button/paper-icon-button'
2
2
  import '@polymer/paper-tabs/paper-tabs'
3
3
  import '@polymer/iron-pages/iron-pages'
4
4
 
5
+ import '@operato/i18n/ox-i18n.js'
6
+
5
7
  import { html } from 'lit'
6
8
  import { customElement } from 'lit/decorators.js'
7
9
 
@@ -11,18 +13,18 @@ import PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-
11
13
  export default class PropertyEditorChartJSHBar extends PropertyEditorChartJSMultiSeriesAbstract {
12
14
  editorTemplate() {
13
15
  return html`
14
- <legend><i18n-msg msgid="label.series">Series</i18n-msg></legend>
16
+ <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
15
17
  ${this.multiSeriesTabTemplate()}
16
18
 
17
- <legend><i18n-msg msgid="label.y-axes">Y Axes</i18n-msg></legend>
19
+ <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
18
20
 
19
- <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
21
+ <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
20
22
  <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
21
23
 
22
- <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
24
+ <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
23
25
  <input type="text" value-key="yAxes0.axisTitle" .value=${this.yAxes0.axisTitle || ''} />
24
26
 
25
- <label><i18n-msg msgid="label.bar-spacing">Bar Spacing</i18n-msg></label>
27
+ <label><ox-i18n msgid="label.bar-spacing">Bar Spacing</ox-i18n></label>
26
28
  <input
27
29
  type="number"
28
30
  min="0"
@@ -31,7 +33,7 @@ export default class PropertyEditorChartJSHBar extends PropertyEditorChartJSMult
31
33
  value-key="yAxes0.barSpacing"
32
34
  .value=${this.yAxes0.barSpacing || NaN}
33
35
  />
34
- <label><i18n-msg msgid="label.tick-spacing">Tick Spacing</i18n-msg></label>
36
+ <label><ox-i18n msgid="label.tick-spacing">Tick Spacing</ox-i18n></label>
35
37
  <input
36
38
  type="number"
37
39
  min="0"
@@ -42,43 +44,43 @@ export default class PropertyEditorChartJSHBar extends PropertyEditorChartJSMult
42
44
  />
43
45
 
44
46
  <input type="checkbox" value-key="value.options.xGridLine" .checked=${this.value.options.xGridLine} />
45
- <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
47
+ <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
46
48
 
47
49
  <input type="checkbox" value-key="xAxes0.ticks.display" .checked=${this.xAxes0.ticks.display} />
48
- <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
50
+ <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
49
51
 
50
- <legend><i18n-msg msgid="label.x-axes">X Axes</i18n-msg></legend>
52
+ <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
51
53
 
52
- <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
54
+ <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
53
55
  <input type="text" value-key="xAxes0.title" .value=${this.xAxes0.axisTitle || ''} />
54
56
 
55
57
  <input type="checkbox" value-key="xAxes0.ticks.autoMin" .checked=${this.xAxes0.ticks.autoMin} />
56
- <label> <i18n-msg msgid="label.axis-min-auto">Axis Min Auto</i18n-msg> </label>
58
+ <label> <ox-i18n msgid="label.axis-min-auto">Axis Min Auto</ox-i18n> </label>
57
59
 
58
60
  <input type="checkbox" value-key="xAxes0.ticks.autoMax" .checked=${this.xAxes0.ticks.autoMax} />
59
- <label> <i18n-msg msgid="label.axis-max-auto">Axis Max Auto</i18n-msg> </label>
61
+ <label> <ox-i18n msgid="label.axis-max-auto">Axis Max Auto</ox-i18n> </label>
60
62
 
61
63
  ${!this.xAxes0.ticks.autoMin
62
64
  ? html`
63
- <label> <i18n-msg msgid="label.axis-min">Axis Min</i18n-msg> </label>
65
+ <label> <ox-i18n msgid="label.axis-min">Axis Min</ox-i18n> </label>
64
66
  <input type="number" value-key="xAxes0.ticks.min" .value=${this.xAxes0.ticks.min} />
65
67
  `
66
68
  : html``}
67
69
  ${!this.xAxes0.ticks.autoMax
68
70
  ? html`
69
- <label> <i18n-msg msgid="label.axis-max">Axis Max</i18n-msg> </label>
71
+ <label> <ox-i18n msgid="label.axis-max">Axis Max</ox-i18n> </label>
70
72
  <input type="number" value-key="xAxes0.ticks.max" .value=${this.xAxes0.ticks.max} />
71
73
  `
72
74
  : html``}
73
75
 
74
- <label> <i18n-msg msgid="label.axis-step-size">Axis Step Size</i18n-msg> </label>
76
+ <label> <ox-i18n msgid="label.axis-step-size">Axis Step Size</ox-i18n> </label>
75
77
  <input type="number" value-key="yAxes0.ticks.stepSize" .value=${this.yAxes0.ticks.stepSize} />
76
78
 
77
79
  <input type="checkbox" .checked=${this.value.options.yGridLine} />
78
- <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
80
+ <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
79
81
 
80
82
  <input type="checkbox" value-key="yAxes0.ticks.display" .checked=${this.yAxes0.ticks.display} />
81
- <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
83
+ <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
82
84
  `
83
85
  }
84
86
 
@@ -139,13 +141,13 @@ export default class PropertyEditorChartJSHBar extends PropertyEditorChartJSMult
139
141
  ${this.datasets.map(
140
142
  (dataset: any, index: number) => html`
141
143
  <div class="tab-content" series-index="${index}">
142
- <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
144
+ <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
143
145
  <input type="text" value-key="dataKey" .value=${this.dataKey} />
144
- <label> <i18n-msg msgid="label.label">Label</i18n-msg> </label>
146
+ <label> <ox-i18n msgid="label.label">Label</ox-i18n> </label>
145
147
  <input type="text" value-key="series.label" .value=${this.series.label} />
146
- <label> <i18n-msg msgid="label.color">Color</i18n-msg> </label>
148
+ <label> <ox-i18n msgid="label.color">Color</ox-i18n> </label>
147
149
  <ox-input-color value-key="color" .value=${this.color}></ox-input-color>
148
- <label> <i18n-msg msgid="label.stack-group">Stack Group</i18n-msg> </label>
150
+ <label> <ox-i18n msgid="label.stack-group">Stack Group</ox-i18n> </label>
149
151
  <input type="text" value-key="series.stack" .value=${this.series.stack || ''} />
150
152
 
151
153
  ${this.displayValueTemplate()}
package/src/editors/property-editor-chartjs-mixed.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import '@operato/i18n/ox-i18n.js'
2
+
1
3
  import { html } from 'lit'
2
4
  import { customElement } from 'lit/decorators.js'
3
5
 
@@ -69,23 +71,23 @@ export default class PropertyEditorChartJSMixed extends PropertyEditorChartJSMul
69
71
  editorTemplate(props: Properties) {
70
72
  return html`
71
73
  <input type="checkbox" value-key="multiAxis" .checked=${this.multiAxis} />
72
- <label> <i18n-msg msgid="label.multi-axis">Multi Axis</i18n-msg> </label>
74
+ <label> <ox-i18n msgid="label.multi-axis">Multi Axis</ox-i18n> </label>
73
75
 
74
- <legend><i18n-msg msgid="label.series">Series</i18n-msg></legend>
76
+ <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
75
77
 
76
78
  <div fullwidth>${this.multiSeriesTabTemplate()}</div>
77
79
 
78
- <legend><i18n-msg msgid="label.x-axes">X Axes</i18n-msg></legend>
80
+ <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
79
81
 
80
- <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
82
+ <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
81
83
  <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
82
84
 
83
- <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
85
+ <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
84
86
  <input type="text" value-key="xAxes0.axisTitle" .value=${this.xAxes0.axisTitle || ''} />
85
87
 
86
88
  ${this._hasBarSeries(this.value)
87
89
  ? html`
88
- <label><i18n-msg msgid="label.bar-spacing">Bar Spacing</i18n-msg></label>
90
+ <label><ox-i18n msgid="label.bar-spacing">Bar Spacing</ox-i18n></label>
89
91
  <input
90
92
  type="number"
91
93
  min="0"
@@ -94,7 +96,7 @@ export default class PropertyEditorChartJSMixed extends PropertyEditorChartJSMul
94
96
  value-key="xAxes0.barSpacing"
95
97
  .value=${this.xAxes0.barSpacing || NaN}
96
98
  />
97
- <label><i18n-msg msgid="label.tick-spacing">Tick Spacing</i18n-msg></label>
99
+ <label><ox-i18n msgid="label.tick-spacing">Tick Spacing</ox-i18n></label>
98
100
  <input
99
101
  type="number"
100
102
  min="0"
@@ -107,71 +109,71 @@ export default class PropertyEditorChartJSMixed extends PropertyEditorChartJSMul
107
109
  : html``}
108
110
 
109
111
  <input type="checkbox" value-key="value.options.xGridLine" .checked=${props.value.options.xGridLine} />
110
- <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
112
+ <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
111
113
 
112
114
  <input type="checkbox" value-key="xAxes0.ticks.display" .checked=${this.xAxes0.ticks.display} />
113
- <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
115
+ <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
114
116
 
115
- <legend><i18n-msg msgid="label.y-axes">Y Axes</i18n-msg></legend>
117
+ <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
116
118
 
117
- <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
119
+ <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
118
120
  <input type="text" value-key="yAxes0.axisTitle" .value=${this.yAxes0.axisTitle || ''} />
119
121
 
120
122
  <input type="checkbox" value-key="yAxes0.ticks.autoMin" .checked=${this.yAxes0.ticks.autoMin} />
121
- <label> <i18n-msg msgid="label.axis-min-auto">Min Auto</i18n-msg> </label>
123
+ <label> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
122
124
 
123
125
  <input type="checkbox" value-key="yAxes0.ticks.autoMax" .checked=${this.yAxes0.ticks.autoMax} />
124
- <label> <i18n-msg msgid="label.axis-max-auto">Max Auto</i18n-msg> </label>
126
+ <label> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
125
127
 
126
128
  ${!this.yAxes0.ticks.autoMin
127
129
  ? html`
128
- <label> <i18n-msg msgid="label.axis-min">Min</i18n-msg> </label>
130
+ <label> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
129
131
  <input type="number" value-key="yAxes0.ticks.min" .value=${this.yAxes0.ticks.min} />
130
132
  `
131
133
  : html``}
132
134
  ${!this.yAxes0.ticks.autoMax
133
135
  ? html`
134
- <label> <i18n-msg msgid="label.axis-max">Max</i18n-msg> </label>
136
+ <label> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
135
137
  <input type="number" value-key="yAxes0.ticks.max" .value=${this.yAxes0.ticks.max} />
136
138
  `
137
139
  : html``}
138
140
 
139
- <label> <i18n-msg msgid="label.axis-step-size">StepSize</i18n-msg> </label>
141
+ <label> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
140
142
  <input type="number" value-key="yAxes0.ticks.stepSize" .value=${this.yAxes0.ticks.stepSize} />
141
143
 
142
144
  <input type="checkbox" value-key="value.options.yGridLine" .checked=${props.value.options.yGridLine} />
143
- <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
145
+ <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
144
146
 
145
147
  <input type="checkbox" value-key="yAxes0.ticks.display" .checked=${this.yAxes0.ticks.display} />
146
- <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
148
+ <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
147
149
 
148
150
  ${props.value.options.multiAxis
149
151
  ? html`
150
- <legend><i18n-msg msgid="label.y-2nd-axes">Y 2nd Axes</i18n-msg></legend>
152
+ <legend><ox-i18n msgid="label.y-2nd-axes">Y 2nd Axes</ox-i18n></legend>
151
153
 
152
- <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
154
+ <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
153
155
  <input type="text" value-key="yAxes1.axisTitle" .value=${this.yAxes1.axisTitle || ''} />
154
156
 
155
157
  <input type="checkbox" value-key="yAxes1.ticks.autoMin" .checked=${this.yAxes1.ticks.autoMin} />
156
- <label> <i18n-msg msgid="label.axis-min-auto">Min Auto</i18n-msg> </label>
158
+ <label> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
157
159
 
158
160
  <input type="checkbox" value-key="yAxes1.ticks.autoMax" .checked=${this.yAxes1.ticks.autoMax} />
159
- <label> <i18n-msg msgid="label.axis-max-auto">Max Auto</i18n-msg> </label>
161
+ <label> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
160
162
 
161
163
  ${!this.yAxes1.ticks.autoMin
162
164
  ? html`
163
- <label> <i18n-msg msgid="label.axis-min">Min</i18n-msg> </label>
165
+ <label> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
164
166
  <input type="number" value-key="yAxes1.ticks.min" .value=${this.yAxes1.ticks.min} />
165
167
  `
166
168
  : html``}
167
169
  ${!this.yAxes1.ticks.autoMax
168
170
  ? html`
169
- <label> <i18n-msg msgid="label.axis-max">Max</i18n-msg> </label>
171
+ <label> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
170
172
  <input type="number" value-key="yAxes1.ticks.max" .value=${this.yAxes1.ticks.max} />
171
173
  `
172
174
  : html``}
173
175
 
174
- <label> <i18n-msg msgid="label.axis-step-size">StepSize</i18n-msg> </label>
176
+ <label> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
175
177
  <input type="number" value-key="yAxes1.ticks.stepSize" .value=${this.yAxes1.ticks.stepSize} />
176
178
 
177
179
  <input
@@ -179,10 +181,10 @@ export default class PropertyEditorChartJSMixed extends PropertyEditorChartJSMul
179
181
  value-key="value.options.y2ndGridLine"
180
182
  .checked=${props.value.options.y2ndGridLine}
181
183
  />
182
- <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
184
+ <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
183
185
 
184
186
  <input type="checkbox" value-key="yAxes1.ticks.display" .checked=${this.yAxes1.ticks.display} />
185
- <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
187
+ <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
186
188
  `
187
189
  : html``}
188
190
  `
package/src/editors/property-editor-chartjs-multi-series-abstract.ts CHANGED
@@ -2,6 +2,8 @@ import '@polymer/iron-pages/iron-pages'
2
2
  import '@polymer/paper-icon-button/paper-icon-button'
3
3
  import '@polymer/paper-tabs/paper-tabs'
4
4
 
5
+ import '@operato/i18n/ox-i18n.js'
6
+
5
7
  import { css, html } from 'lit'
6
8
  import { query } from 'lit/decorators.js'
7
9
 
@@ -113,96 +115,96 @@ export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEd
113
115
  editorTemplate(props: Properties) {
114
116
  return html`
115
117
  <input type="checkbox" value-key="multiAxis" .checked=${this.multiAxis} />
116
- <label> <i18n-msg msgid="label.multi-axis">Multi Axis</i18n-msg> </label>
118
+ <label> <ox-i18n msgid="label.multi-axis">Multi Axis</ox-i18n> </label>
117
119
 
118
- <legend><i18n-msg msgid="label.series">Series</i18n-msg></legend>
120
+ <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
119
121
 
120
122
  ${this.multiSeriesTabTemplate()}
121
123
 
122
- <legend><i18n-msg msgid="label.x-axes">X Axes</i18n-msg></legend>
124
+ <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
123
125
 
124
- <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
126
+ <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
125
127
  <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
126
128
 
127
- <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
129
+ <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
128
130
  <input type="text" value-key="xAxes0.axisTitle" .value=${this.xAxes0.axisTitle || ''} />
129
131
 
130
- <label> <i18n-msg msgid="label.thickness">Thickness</i18n-msg> </label>
132
+ <label> <ox-i18n msgid="label.thickness">Thickness</ox-i18n> </label>
131
133
  <input type="number" value-key="xAxes0.barPercentage" .value=${this.xAxes0.barPercentage} />
132
134
 
133
135
  <input type="checkbox" value-key="value.options.xGridLine" .checked=${this.value.options.xGridLine} />
134
- <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
136
+ <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
135
137
 
136
138
  <input type="checkbox" value-key="xAxes0.ticks.display" .checked=${this.xAxes0.ticks.display} />
137
- <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
139
+ <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
138
140
 
139
- <legend><i18n-msg msgid="label.y-axes">Y Axes</i18n-msg></legend>
141
+ <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
140
142
 
141
- <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
143
+ <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
142
144
  <input type="text" value-key="yAxes0.axisTitle" .value=${this.yAxes0.axisTitle || ''} />
143
145
 
144
146
  <input type="checkbox" value-key="yAxes0.ticks.autoMin" .checked=${this.yAxes0.ticks.autoMin} />
145
- <label> <i18n-msg msgid="label.axis-min-auto">Min Auto</i18n-msg> </label>
147
+ <label> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
146
148
 
147
149
  <input type="checkbox" value-key="yAxes0.ticks.autoMax" .checked=${this.yAxes0.ticks.autoMax} />
148
- <label> <i18n-msg msgid="label.axis-max-auto">Max Auto</i18n-msg> </label>
150
+ <label> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
149
151
 
150
152
  ${!this.yAxes0.ticks.autoMin
151
153
  ? html`
152
- <label> <i18n-msg msgid="label.axis-min">Min</i18n-msg> </label>
154
+ <label> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
153
155
  <input type="number" value-key="yAxes0.ticks.min" .value=${this.yAxes0.ticks.min} />
154
156
  `
155
157
  : html``}
156
158
  ${!this.yAxes0.ticks.autoMax
157
159
  ? html`
158
- <label> <i18n-msg msgid="label.axis-max">Max</i18n-msg> </label>
160
+ <label> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
159
161
  <input type="number" value-key="yAxes0.ticks.max" .value=${this.yAxes0.ticks.max} />
160
162
  `
161
163
  : html``}
162
164
 
163
- <label> <i18n-msg msgid="label.axis-step-size">StepSize</i18n-msg> </label>
165
+ <label> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
164
166
  <input type="number" value-key="yAxes0.ticks.stepSize" .value=${this.yAxes0.ticks.stepSize} />
165
167
 
166
168
  <input type="checkbox" value-key="value.options.yGridLine" .checked=${this.value.options.yGridLine} />
167
- <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
169
+ <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
168
170
 
169
171
  <input type="checkbox" value-key="yAxes0.ticks.display" .checked=${this.yAxes0.ticks.display} />
170
- <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
172
+ <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
171
173
 
172
174
  ${this.value.options.multiAxis
173
175
  ? html`
174
- <legend><i18n-msg msgid="label.y-2nd-axes">Y 2nd Axes</i18n-msg></legend>
176
+ <legend><ox-i18n msgid="label.y-2nd-axes">Y 2nd Axes</ox-i18n></legend>
175
177
 
176
- <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
178
+ <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
177
179
  <input type="text" value-key="yAxes1.axisTitle" .value=${this.yAxes1.axisTitle || ''} />
178
180
 
179
181
  <input type="checkbox" value-key="yAxes1.ticks.autoMin" .checked=${this.yAxes1.ticks.autoMin} />
180
- <label> <i18n-msg msgid="label.axis-min-auto">Min Auto</i18n-msg> </label>
182
+ <label> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
181
183
 
182
184
  <input type="checkbox" value-key="yAxes1.ticks.autoMax" .checked=${this.yAxes1.ticks.autoMax} />
183
- <label> <i18n-msg msgid="label.axis-max-auto">Max Auto</i18n-msg> </label>
185
+ <label> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
184
186
 
185
187
  ${!this.yAxes1.ticks.autoMin
186
188
  ? html`
187
- <label> <i18n-msg msgid="label.axis-min">Min</i18n-msg> </label>
189
+ <label> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
188
190
  <input type="number" value-key="yAxes1.ticks.min" .value=${this.yAxes1.ticks.min} />
189
191
  `
190
192
  : html``}
191
193
  ${!this.yAxes1.ticks.autoMax
192
194
  ? html`
193
- <label> <i18n-msg msgid="label.axis-max">Max</i18n-msg> </label>
195
+ <label> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
194
196
  <input type="number" value-key="yAxes1.ticks.max" .value=${this.yAxes1.ticks.max} />
195
197
  `
196
198
  : html``}
197
199
 
198
- <label> <i18n-msg msgid="label.axis-step-size">StepSize</i18n-msg> </label>
200
+ <label> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
199
201
  <input type="number" value-key="yAxes1.ticks.stepSize" .value=${this.yAxes1.ticks.stepSize} />
200
202
 
201
203
  <input type="checkbox" value-key="value.options.y2ndGridLine" .checked=${this.value.options.y2ndGridLine} />
202
- <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
204
+ <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
203
205
 
204
206
  <input type="checkbox" value-key="yAxes1.ticks.display" .checked=${this.yAxes1.ticks.display} />
205
- <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
207
+ <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
206
208
  `
207
209
  : html``}
208
210
  `
@@ -265,12 +267,12 @@ export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEd
265
267
  ${this.datasets.map(
266
268
  (dataset: any, index: number) => html`
267
269
  <div class="tab-content" series-index="${index}">
268
- <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
270
+ <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
269
271
  <input type="text" value-key="dataKey" .value=${this.dataKey} />
270
272
 
271
273
  ${this.value.type == 'bar'
272
274
  ? html`
273
- <label> <i18n-msg msgid="label.type">type</i18n-msg> </label>
275
+ <label> <ox-i18n msgid="label.type">type</ox-i18n> </label>
274
276
  <select class="select-content" value-key="series.type" .value=${this.series.type}>
275
277
  <option value="bar" selected>bar</option>
276
278
  <option value="line">line</option>
@@ -278,12 +280,12 @@ export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEd
278
280
  `
279
281
  : html``}
280
282
 
281
- <label> <i18n-msg msgid="label.label">label</i18n-msg> </label>
283
+ <label> <ox-i18n msgid="label.label">label</ox-i18n> </label>
282
284
  <input type="text" value-key="series.label" .value=${this.series.label} />
283
285
 
284
286
  ${this.series.type == 'line'
285
287
  ? html`
286
- <label> <i18n-msg msgid="label.line-tension">line tension</i18n-msg> </label>
288
+ <label> <ox-i18n msgid="label.line-tension">line tension</ox-i18n> </label>
287
289
  <select class="select-content" value-key="series.lineTension" .value=${this.series.lineTension}>
288
290
  <option value="0.4">smooth</option>
289
291
  <option value="0">angled</option>
@@ -292,17 +294,17 @@ export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEd
292
294
  : html``}
293
295
  ${this.series.type == 'line'
294
296
  ? html`
295
- <label> <i18n-msg msgid="label.border-width">border width</i18n-msg> </label>
297
+ <label> <ox-i18n msgid="label.border-width">border width</ox-i18n> </label>
296
298
  <input type="number" value-key="series.borderWidth" .value=${this.series.borderWidth} />
297
299
  `
298
300
  : html``}
299
301
 
300
- <label> <i18n-msg msgid="label.color">color</i18n-msg> </label>
302
+ <label> <ox-i18n msgid="label.color">color</ox-i18n> </label>
301
303
  <ox-input-color value-key="color" .value=${this.color}></ox-input-color>
302
304
 
303
305
  ${this.series.type == 'line'
304
306
  ? html`
305
- <label> <i18n-msg msgid="label.point-shape">point shape</i18n-msg> </label>
307
+ <label> <ox-i18n msgid="label.point-shape">point shape</ox-i18n> </label>
306
308
  <select class="select-content" value-key="series.pointStyle" .value=${this.series.pointStyle}>
307
309
  <option value="circle">⚬</option>
308
310
  <option value="triangle">▵</option>
@@ -315,20 +317,20 @@ export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEd
315
317
  <option value="dash">┄</option>
316
318
  </select>
317
319
 
318
- <label> <i18n-msg msgid="label.point-size">point size</i18n-msg> </label>
320
+ <label> <ox-i18n msgid="label.point-size">point size</ox-i18n> </label>
319
321
  <input type="number" value-key="series.pointRadius" .value=${this.series.pointRadius} />
320
322
  `
321
- : html``} <label> <i18n-msg msgid="label.stack-group">Stack group</i18n-msg> </label>
323
+ : html``} <label> <ox-i18n msgid="label.stack-group">Stack group</ox-i18n> </label>
322
324
  <input type="text" value-key="series.stack" .value=${this.series.stack || ''} /> ${this.series.type ==
323
325
  'line'
324
326
  ? html`
325
327
  <input type="checkbox" value-key="series.fill" .checked=${this.series.fill} />
326
- <label> <i18n-msg msgid="label.fill">fill</i18n-msg> </label>
328
+ <label> <ox-i18n msgid="label.fill">fill</ox-i18n> </label>
327
329
  `
328
330
  : html``}
329
331
  ${this.multiAxis
330
332
  ? html`
331
- <label> <i18n-msg msgid="label.target-axis">target axis</i18n-msg> </label>
333
+ <label> <ox-i18n msgid="label.target-axis">target axis</ox-i18n> </label>
332
334
  <select class="select-content" value-key="series.yAxisID" .value=${this.series.yAxisID}>
333
335
  <option value="left">left</option>
334
336
  <option value="right">right</option>
package/src/editors/property-editor-chartjs-pie.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import '@operato/i18n/ox-i18n.js'
2
+
1
3
  import { Properties } from '@hatiolab/things-scene'
2
4
  import PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract'
3
5
  import { customElement } from 'lit/decorators.js'
@@ -57,19 +59,19 @@ export default class PropertyEditorChartJSPie extends PropertyEditorChartJSAbstr
57
59
 
58
60
  editorTemplate(props: Properties) {
59
61
  return html`
60
- <legend><i18n-msg msgid="label.series">Series</i18n-msg></legend>
62
+ <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
61
63
 
62
- <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
64
+ <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
63
65
  <input type="text" value-key="dataKey" .value=${this.series.dataKey} />
64
66
 
65
- <label> <i18n-msg msgid="label.color">color</i18n-msg> </label>
67
+ <label> <ox-i18n msgid="label.color">color</ox-i18n> </label>
66
68
  <ox-input-multiple-colors value-key="color" .value=${this.color}></ox-input-multiple-colors>
67
69
 
68
70
  ${this.displayValueTemplate()}
69
71
 
70
- <legend><i18n-msg msgid="label.axes">Axes</i18n-msg></legend>
72
+ <legend><ox-i18n msgid="label.axes">Axes</ox-i18n></legend>
71
73
 
72
- <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
74
+ <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
73
75
  <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
74
76
  `
75
77
  }
package/src/editors/property-editor-chartjs-radar.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import '@operato/i18n/ox-i18n.js'
2
+
1
3
  import { html } from 'lit'
2
4
  import { customElement } from 'lit/decorators.js'
3
5
 
@@ -24,13 +26,13 @@ export default class PropertyEditorChartJSRadar extends PropertyEditorChartJSMul
24
26
 
25
27
  editorTemplate(props: Properties) {
26
28
  return html`
27
- <legend><i18n-msg msgid="label.series">Series</i18n-msg></legend>
29
+ <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
28
30
 
29
31
  <div fullwidth>${this.multiSeriesTabTemplate()}</div>
30
32
 
31
- <legend><i18n-msg msgid="label.axes">Axes</i18n-msg></legend>
33
+ <legend><ox-i18n msgid="label.axes">Axes</ox-i18n></legend>
32
34
 
33
- <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
35
+ <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
34
36
  <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
35
37
  `
36
38
  }