@operato/scene-chartjs 1.1.8 → 1.1.13

Sign up to get free protection for your applications and to get access to all the features.
Files changed (45) hide show
  1. package/CHANGELOG.md +18 -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 +3 -1
  6. package/dist/editors/property-editor-chartjs-hbar.js +34 -32
  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 +5 -4
  12. package/dist/editors/property-editor-chartjs-multi-series-abstract.js +49 -48
  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-styles.js +6 -9
  21. package/dist/editors/property-editor-chartjs-styles.js.map +1 -1
  22. package/dist/editors/property-editor-chartjs.d.ts +1 -0
  23. package/dist/editors/property-editor-chartjs.js +2 -1
  24. package/dist/editors/property-editor-chartjs.js.map +1 -1
  25. package/logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json +3 -13
  26. package/logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json +6 -11
  27. package/logs/application-2022-11-12-23.log +6 -0
  28. package/logs/connections-2022-11-07-00.log +35 -0
  29. package/logs/connections-2022-11-12-23.log +35 -0
  30. package/package.json +3 -3
  31. package/src/editors/property-editor-chartjs-abstract.ts +15 -13
  32. package/src/editors/property-editor-chartjs-hbar.ts +36 -32
  33. package/src/editors/property-editor-chartjs-mixed.ts +29 -27
  34. package/src/editors/property-editor-chartjs-multi-series-abstract.ts +53 -51
  35. package/src/editors/property-editor-chartjs-pie.ts +7 -5
  36. package/src/editors/property-editor-chartjs-radar.ts +5 -3
  37. package/src/editors/property-editor-chartjs-styles.ts +6 -9
  38. package/src/editors/property-editor-chartjs.ts +3 -1
  39. package/tsconfig.tsbuildinfo +1 -1
  40. package/logs/application-2022-10-17-18.log +0 -18
  41. package/logs/application-2022-10-17-19.log +0 -16
  42. package/logs/application-2022-10-17-22.log +0 -7
  43. package/logs/connections-2022-10-17-18.log +0 -105
  44. package/logs/connections-2022-10-17-19.log +0 -70
  45. package/logs/connections-2022-10-17-22.log +0 -35
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
@@ -1,12 +1,14 @@
1
+ import '@material/mwc-icon-button'
1
2
  import '@polymer/iron-pages/iron-pages'
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
 
8
10
  import { Properties } from '@hatiolab/things-scene'
9
- import { PaperIconButtonElement } from '@polymer/paper-icon-button/paper-icon-button'
11
+ import { IconButton } from '@material/mwc-icon-button'
10
12
 
11
13
  import PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract'
12
14
 
@@ -50,8 +52,8 @@ export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEd
50
52
  }
51
53
 
52
54
  @query('#tabs') tabs!: HTMLElement
53
- @query('#tab-nav-left-button') tabNavLeftButton!: PaperIconButtonElement
54
- @query('#tab-nav-right-button') tabNavRightButton!: PaperIconButtonElement
55
+ @query('#tab-nav-left-button') tabNavLeftButton!: IconButton
56
+ @query('#tab-nav-right-button') tabNavRightButton!: IconButton
55
57
 
56
58
  get color() {
57
59
  var oldVersionColor = this.series.backgroundColor
@@ -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
  `
@@ -212,14 +214,14 @@ export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEd
212
214
  return html`
213
215
  <div id="series-properties-container" fullwidth>
214
216
  <div id="tab-header">
215
- <paper-icon-button
217
+ <mwc-icon-button
216
218
  id="tab-nav-left-button"
217
- icon="chevron-left"
219
+ icon="chevron_left"
218
220
  @click=${(e: Event) => {
219
221
  this._onTabScrollNavLeft(e)
220
222
  }}
221
223
  disabled
222
- ></paper-icon-button>
224
+ ></mwc-icon-button>
223
225
  <paper-tabs
224
226
  id="tabs"
225
227
  @iron-select=${(e: Event) => (this.currentSeriesIndex = (e.target as any).selected)}
@@ -236,41 +238,41 @@ export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEd
236
238
  >${index + 1}
237
239
  ${!this.datasets || (this.datasets.length != 1 && this.currentSeriesIndex == index)
238
240
  ? html`
239
- <paper-icon-button icon="close" @tap=${(e: Event) => this.onTapRemoveCurrentTab(e)}>
240
- </paper-icon-button>
241
+ <mwc-icon-button icon="close" @tap=${(e: Event) => this.onTapRemoveCurrentTab(e)}>
242
+ </mwc-icon-button>
241
243
  `
242
244
  : html``}
243
245
  </paper-tab>
244
246
  `
245
247
  )}
246
248
  </paper-tabs>
247
- <paper-icon-button
249
+ <mwc-icon-button
248
250
  id="tab-nav-right-button"
249
- icon="chevron-right"
251
+ icon="chevron_right"
250
252
  @click=${(e: Event) => {
251
253
  this._onTabScrollNavRight(e)
252
254
  }}
253
255
  disabled
254
- ></paper-icon-button>
256
+ ></mwc-icon-button>
255
257
  </div>
256
258
  <div id="add-series-button-container">
257
- <paper-icon-button
259
+ <mwc-icon-button
258
260
  id="add-series-button"
259
261
  icon="add"
260
262
  @tap=${(e: Event) => this.onTapAddTab(e)}
261
- ></paper-icon-button>
263
+ ></mwc-icon-button>
262
264
  </div>
263
265
 
264
266
  <iron-pages .selected=${this.currentSeriesIndex} .attr-for-selected="series-index">
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
  }
package/src/editors/property-editor-chartjs-styles.ts CHANGED
@@ -5,6 +5,9 @@ export const PropertyEditorChartJSStyles = css`
5
5
  display: grid;
6
6
  grid-template-columns: repeat(10, 1fr);
7
7
  grid-gap: 5px;
8
+
9
+ --mdc-icon-button-size: 24px;
10
+ --mdc-icon-size: 24px;
8
11
  }
9
12
 
10
13
  :host > * {
@@ -53,19 +56,13 @@ export const PropertyEditorChartJSStyles = css`
53
56
  height: 25px;
54
57
  }
55
58
 
56
- #tab-header > paper-icon-button {
57
- padding: 0px;
58
- width: 25px;
59
- height: 25px;
60
- }
61
-
62
- #tab-header paper-tabs paper-icon-button {
59
+ #tab-header paper-tabs mwc-icon-button {
63
60
  display: flex;
64
61
  margin-left: 5px;
65
- width: 15px;
66
- height: 15px;
67
62
  padding: 2px;
68
63
  color: #585858;
64
+
65
+ --mdc-icon-size: 16px;
69
66
  }
70
67
 
71
68
  #add-series-button-container {
package/src/editors/property-editor-chartjs.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import '@operato/i18n/ox-i18n.js'
2
+
1
3
  import './property-editor-chartjs-hbar'
2
4
  import './property-editor-chartjs-mixed'
3
5
  import './property-editor-chartjs-pie'
@@ -48,7 +50,7 @@ export default class ChartJSEditor extends OxPropertyEditor {
48
50
  ${value
49
51
  ? html`
50
52
  <div id="chart-type">
51
- <label> <i18n-msg msgid="label.chart-type">Chart Type</i18n-msg> </label>
53
+ <label> <ox-i18n msgid="label.chart-type">Chart Type</ox-i18n> </label>
52
54
  <input type="text" .value=${value.type} readonly />
53
55
  </div>
54
56
  `