@operato/scene-chartjs 1.1.8 → 1.1.13

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 (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
  `