@record-evolution/widget-gauge 1.5.34 → 1.6.3

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 (10) hide show
  1. package/README.md +132 -53
  2. package/dist/src/widget-gauge.d.ts +3 -1
  3. package/dist/tsconfig.tsbuildinfo +1 -1
  4. package/dist/widget-gauge.js +296 -451
  5. package/dist/widget-gauge.js.map +1 -1
  6. package/package.json +22 -22
  7. package/src/default-data.json +9 -7
  8. package/src/definition-schema.d.ts +33 -29
  9. package/src/definition-schema.json +58 -50
  10. package/src/widget-gauge.ts +70 -51
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "REWidget widget-gauge",
4
4
  "license": "MIT",
5
5
  "author": "widget-gauge",
6
- "version": "1.5.34",
6
+ "version": "1.6.3",
7
7
  "type": "module",
8
8
  "main": "dist/widget-gauge.js",
9
9
  "types": "dist/src/widget-gauge.d.ts",
@@ -23,32 +23,32 @@
23
23
  "release": "npm version patch --tag-version-prefix='' && git push && git push --tag"
24
24
  },
25
25
  "dependencies": {
26
- "echarts": "^5.4.3",
27
- "lit": "^3.1.0"
26
+ "echarts": "^5.5.1",
27
+ "lit": "^3.2.0"
28
28
  },
29
29
  "devDependencies": {
30
- "@custom-elements-manifest/analyzer": "^0.9.0",
30
+ "@custom-elements-manifest/analyzer": "^0.10.3",
31
31
  "@rollup/plugin-babel": "^6.0.4",
32
- "@rollup/plugin-commonjs": "^25.0.7",
33
- "@rollup/plugin-node-resolve": "^15.2.3",
34
- "@rollup/plugin-replace": "^5.0.5",
35
- "@rollup/plugin-typescript": "^11.1.5",
36
- "@typescript-eslint/eslint-plugin": "^6.9.1",
37
- "@typescript-eslint/parser": "^6.9.1",
38
- "@web/dev-server": "^0.4.0",
39
- "concurrently": "^8.2.2",
32
+ "@rollup/plugin-commonjs": "^28.0.0",
33
+ "@rollup/plugin-node-resolve": "^15.3.0",
34
+ "@rollup/plugin-replace": "^6.0.1",
35
+ "@rollup/plugin-typescript": "^12.1.0",
36
+ "@typescript-eslint/eslint-plugin": "^8.8.0",
37
+ "@typescript-eslint/parser": "^8.8.0",
38
+ "@web/dev-server": "^0.4.6",
39
+ "concurrently": "^9.0.1",
40
40
  "deepmerge": "^4.3.1",
41
41
  "es-dev-server": "^2.1.0",
42
- "eslint": "^8.53.0",
43
- "eslint-config-prettier": "^9.0.0",
44
- "husky": "^8.0.3",
45
- "json-schema-to-typescript": "^13.1.1",
46
- "lint-staged": "^15.0.2",
47
- "prettier": "^3.0.3",
48
- "rimraf": "^5.0.5",
49
- "rollup": "^4.9.1",
50
- "tslib": "^2.6.2",
51
- "typescript": "^5.3.2"
42
+ "eslint": "^9.11.1",
43
+ "eslint-config-prettier": "^9.1.0",
44
+ "husky": "^9.1.6",
45
+ "json-schema-to-typescript": "^15.0.2",
46
+ "lint-staged": "^15.2.10",
47
+ "prettier": "^3.3.3",
48
+ "rimraf": "^6.0.1",
49
+ "rollup": "^4.24.0",
50
+ "tslib": "^2.7.0",
51
+ "typescript": "^5.6.2"
52
52
  },
53
53
  "repository": {
54
54
  "type": "git",
package/src/default-data.json CHANGED
@@ -5,21 +5,23 @@
5
5
  "label": "Demo Gauge Temperature",
6
6
  "unit": "°C",
7
7
  "valueColor": "black",
8
- "sections": [-20, 80, 90, 120],
9
- "backgroundColors": ["#AAC8A7", "#F1C27B", "#FF9B9B"],
10
- "averageLatest": 1,
11
8
  "data": [
12
9
  {
13
- "value": 90,
14
- "pivot": "Frankfurt"
10
+ "value": 90
15
11
  }
16
- ]
12
+ ],
13
+ "sections": {
14
+ "sectionLimits": [-20, 80, 90, 120],
15
+ "backgroundColors": ["#AAC8A7", "#F1C27B", "#FF9B9B"]
16
+ },
17
+ "advanced": {
18
+ "averageLatest": 1
19
+ }
17
20
  },
18
21
  {
19
22
  "label": "Demo Gauge Pascal",
20
23
  "unit": "Pa",
21
24
  "valueColor": "green",
22
- "averageLatest": 1,
23
25
  "data": [
24
26
  {
25
27
  "value": 79
package/src/definition-schema.d.ts CHANGED
@@ -12,35 +12,17 @@ export type Label = string;
12
12
  * The unit of the values. e.g. °C or km/h
13
13
  */
14
14
  export type Unit = string;
15
- /**
16
- * The amount of gauge sections. Starting from the min value, ending with the max value.
17
- */
18
- export type Sections = number[];
19
- /**
20
- * Background color for each section. This Array is one shorter than the number of sections.
21
- */
22
- export type SectionBackgroundColors = {
23
- [k: string]: unknown;
24
- }[];
25
- /**
26
- * Calculate the average over the given number of newest values. (If pivoted, then per each of the pivot dataseries.) If not specified then the latest value is shown without modification.
27
- */
28
- export type AverageLatestValues = number;
29
- /**
30
- * If you provide timestamp data, the delivered value is only shown in the gauge when the age of the data is not older than the given maximum Latency in seconds.
31
- */
32
- export type MaximumLatency = number;
33
15
  /**
34
16
  * This should be an ISO String date like 2023-11-04T22:47:52.351152+00:00. Will only be used to detect data age of data.
35
17
  */
36
18
  export type Timestamp = string;
37
19
  export type Value = number;
38
20
  /**
39
- * You can specify a column in the input data to autogenerate dataseries for each distinct entry in this column. E.g. if you have a table with columns [city, timestamp, temperature] and specify ''city'' as pivot column, then you will get a gauge for each city.
21
+ * You can specify a table column to autogenerate dataseries for each distinct entry in this column. E.g. if you have a table with columns [city, timestamp, temperature] and specify ''city'' as pivot column, then you will get a gauge for each city.
40
22
  */
41
23
  export type PivotColumn = string;
42
24
  /**
43
- * The data used to draw this data series.
25
+ * The data used to draw this gauge.
44
26
  */
45
27
  export type Data = {
46
28
  tsp?: Timestamp;
@@ -48,28 +30,50 @@ export type Data = {
48
30
  pivot?: PivotColumn;
49
31
  [k: string]: unknown;
50
32
  }[];
33
+ /**
34
+ * The limits of the gauge sections. Starting from the min value, ending with the max value.
35
+ */
36
+ export type SectionLimits = number[];
37
+ /**
38
+ * Background color for each section. This Array is one shorter than the number of sections.
39
+ */
40
+ export type SectionBackgroundColors = {
41
+ [k: string]: unknown;
42
+ }[];
43
+ /**
44
+ * Calculate the average over the given number of newest values. (If pivoted, then per each of the pivot dataseries.) If not specified then the latest value is shown without modification.
45
+ */
46
+ export type AverageLatestValues = number;
47
+ /**
48
+ * If you provide timestamp data, the delivered value is only shown in the gauge when the age of the data is not older than the given maximum Latency in seconds.
49
+ */
50
+ export type MaximumLatency = number;
51
51
  export type Gauges = {
52
52
  label?: Label;
53
53
  valueColor?: ValueColor;
54
54
  unit?: Unit;
55
- sections?: Sections;
56
- backgroundColors?: SectionBackgroundColors;
57
- averageLatest?: AverageLatestValues;
58
- maxLatency?: MaximumLatency;
59
55
  data?: Data;
56
+ sections?: SectionsConfiguration;
57
+ advanced?: AdvancedConfiguration;
60
58
  [k: string]: unknown;
61
59
  }[];
62
60
 
63
61
  export interface GaugeChartConfiguration {
64
- settings?: GlobalSettings;
65
- dataseries?: Gauges;
66
- [k: string]: unknown;
67
- }
68
- export interface GlobalSettings {
69
62
  title?: Title;
70
63
  subTitle?: Subtitle;
64
+ dataseries?: Gauges;
71
65
  [k: string]: unknown;
72
66
  }
73
67
  export interface ValueColor {
74
68
  [k: string]: unknown;
75
69
  }
70
+ export interface SectionsConfiguration {
71
+ sectionLimits?: SectionLimits;
72
+ backgroundColors?: SectionBackgroundColors;
73
+ [k: string]: unknown;
74
+ }
75
+ export interface AdvancedConfiguration {
76
+ averageLatest?: AverageLatestValues;
77
+ maxLatency?: MaximumLatency;
78
+ [k: string]: unknown;
79
+ }
package/src/definition-schema.json CHANGED
@@ -2,22 +2,15 @@
2
2
  "title": "Gauge-chart Configuration",
3
3
  "type": "object",
4
4
  "properties": {
5
- "settings": {
6
- "title": "Global Settings",
7
- "type": "object",
8
- "order": 1,
9
- "properties": {
10
- "title": {
11
- "title": "Title",
12
- "type": "string",
13
- "order": 1
14
- },
15
- "subTitle": {
16
- "title": "Subtitle",
17
- "type": "string",
18
- "order": 2
19
- }
20
- }
5
+ "title": {
6
+ "title": "Title",
7
+ "type": "string",
8
+ "order": 1
9
+ },
10
+ "subTitle": {
11
+ "title": "Subtitle",
12
+ "type": "string",
13
+ "order": 2
21
14
  },
22
15
  "dataseries": {
23
16
  "title": "Gauges",
@@ -43,42 +36,11 @@
43
36
  "type": "string",
44
37
  "order": 3
45
38
  },
46
- "sections": {
47
- "title": "Sections",
48
- "description": "The amount of gauge sections. Starting from the min value, ending with the max value.",
49
- "type": "array",
50
- "order": 4,
51
- "items": {
52
- "type": "number"
53
- }
54
- },
55
- "backgroundColors": {
56
- "title": "Section background colors",
57
- "description": "Background color for each section. This Array is one shorter than the number of sections.",
58
- "type": "array",
59
- "items": {
60
- "type": "color"
61
- },
62
- "order": 5
63
- },
64
- "averageLatest": {
65
- "title": "Average Latest Values",
66
- "description": "Calculate the average over the given number of newest values. (If pivoted, then per each of the pivot dataseries.) If not specified then the latest value is shown without modification.",
67
- "type": "number",
68
- "order": 6
69
- },
70
- "maxLatency": {
71
- "title": "Maximum Latency",
72
- "description": "If you provide timestamp data, the delivered value is only shown in the gauge when the age of the data is not older than the given maximum Latency in seconds.",
73
- "type": "number",
74
- "order": 7
75
- },
76
39
  "data": {
77
40
  "title": "Data",
78
- "description": "The data used to draw this data series.",
41
+ "description": "The data used to draw this gauge.",
79
42
  "type": "array",
80
- "order": 8,
81
- "buffersize": 1000,
43
+ "order": 4,
82
44
  "items": {
83
45
  "type": "object",
84
46
  "properties": {
@@ -96,12 +58,58 @@
96
58
  },
97
59
  "pivot": {
98
60
  "title": "Pivot Column",
99
- "description": "You can specify a column in the input data to autogenerate dataseries for each distinct entry in this column. E.g. if you have a table with columns [city, timestamp, temperature] and specify ''city'' as pivot column, then you will get a gauge for each city.",
61
+ "description": "You can specify a table column to autogenerate dataseries for each distinct entry in this column. E.g. if you have a table with columns [city, timestamp, temperature] and specify ''city'' as pivot column, then you will get a gauge for each city.",
100
62
  "order": 3,
101
63
  "type": "string"
102
64
  }
103
65
  }
104
66
  }
67
+ },
68
+ "sections": {
69
+ "title": "Sections Configuration",
70
+ "description": "",
71
+ "type": "object",
72
+ "order": 5,
73
+ "properties": {
74
+ "sectionLimits": {
75
+ "title": "Section Limits",
76
+ "description": "The limits of the gauge sections. Starting from the min value, ending with the max value.",
77
+ "type": "array",
78
+ "order": 4,
79
+ "items": {
80
+ "type": "number"
81
+ }
82
+ },
83
+ "backgroundColors": {
84
+ "title": "Section background colors",
85
+ "description": "Background color for each section. This Array is one shorter than the number of sections.",
86
+ "type": "array",
87
+ "items": {
88
+ "type": "color"
89
+ },
90
+ "order": 5
91
+ }
92
+ }
93
+ },
94
+ "advanced": {
95
+ "title": "Advanced Configuration",
96
+ "description": "",
97
+ "type": "object",
98
+ "order": 6,
99
+ "properties": {
100
+ "averageLatest": {
101
+ "title": "Average Latest Values",
102
+ "description": "Calculate the average over the given number of newest values. (If pivoted, then per each of the pivot dataseries.) If not specified then the latest value is shown without modification.",
103
+ "type": "number",
104
+ "order": 6
105
+ },
106
+ "maxLatency": {
107
+ "title": "Maximum Latency",
108
+ "description": "If you provide timestamp data, the delivered value is only shown in the gauge when the age of the data is not older than the given maximum Latency in seconds.",
109
+ "type": "number",
110
+ "order": 7
111
+ }
112
+ }
105
113
  }
106
114
  }
107
115
  }
package/src/widget-gauge.ts CHANGED
@@ -20,13 +20,14 @@ export class WidgetGauge extends LitElement {
20
20
  @state()
21
21
  private canvasList: any = {}
22
22
 
23
- resizeObserver: ResizeObserver
23
+ private resizeObserver: ResizeObserver
24
24
  boxes?: HTMLDivElement[]
25
25
  origWidth: number = 0
26
26
  origHeight: number = 0
27
27
  template: any
28
28
  modifier: number = 1
29
29
  version: string = 'versionplaceholder'
30
+ gaugeContainer: HTMLDivElement | null | undefined
30
31
  constructor() {
31
32
  super()
32
33
  this.resizeObserver = new ResizeObserver(this.adjustSizes.bind(this))
@@ -117,9 +118,16 @@ export class WidgetGauge extends LitElement {
117
118
  }
118
119
  }
119
120
 
121
+ disconnectedCallback() {
122
+ super.disconnectedCallback()
123
+ if (this.resizeObserver) {
124
+ this.resizeObserver.disconnect()
125
+ }
126
+ }
127
+
120
128
  update(changedProperties: Map<string, any>) {
121
129
  changedProperties.forEach((oldValue, propName) => {
122
- if (propName === 'inputData') {
130
+ if (propName === 'inputData' && this.gaugeContainer) {
123
131
  this.transformData()
124
132
  this.adjustSizes()
125
133
  }
@@ -130,7 +138,8 @@ export class WidgetGauge extends LitElement {
130
138
 
131
139
  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
132
140
  this.resizeObserver.observe(this.shadowRoot?.querySelector('.wrapper') as HTMLDivElement)
133
-
141
+ this.gaugeContainer = this.shadowRoot?.querySelector('.gauge-container')
142
+ console.log('First Updated', this.gaugeContainer)
134
143
  this.sizingSetup()
135
144
  this.transformData()
136
145
  this.adjustSizes()
@@ -151,10 +160,9 @@ export class WidgetGauge extends LitElement {
151
160
 
152
161
  adjustSizes() {
153
162
  // if (!this.origHeight) return
154
- const container = this.shadowRoot?.querySelector('.gauge-container') as HTMLDivElement
155
- if (!container) return
156
- const userWidth = container.getBoundingClientRect().width
157
- const userHeight = container.getBoundingClientRect().height
163
+ if (!this.gaugeContainer) return
164
+ const userWidth = this.gaugeContainer.getBoundingClientRect().width
165
+ const userHeight = this.gaugeContainer.getBoundingClientRect().height
158
166
  const count = this.dataSets.length
159
167
 
160
168
  const width = this.origWidth
@@ -221,22 +229,26 @@ export class WidgetGauge extends LitElement {
221
229
  const pds: any = {
222
230
  label: prefix + `${ds.label ?? ''}`,
223
231
  unit: ds.unit,
224
- averageLatest: ds.averageLatest,
232
+ advanced: ds.advanced,
225
233
  valueColor: ds.valueColor,
226
234
  sections: ds.sections,
227
- backgroundColors: ds.backgroundColors,
228
235
  data: distincts.length === 1 ? ds.data : ds?.data?.filter((d) => d.pivot === piv)
229
236
  }
230
237
  this.dataSets.push(pds)
231
238
  })
232
239
  })
233
240
 
234
- // console.log('Gauge Datasets', this.dataSets)
241
+ this.setupCharts()
242
+
243
+ console.log('Gauge Datasets', this.dataSets)
235
244
  }
236
245
 
237
246
  applyData() {
247
+ console.log(
248
+ 'Apply Data',
249
+ this.dataSets.map((d) => d.label)
250
+ )
238
251
  const modifier = this.modifier
239
- this.setupCharts()
240
252
  this.dataSets.forEach((d) => {
241
253
  d.label ??= ''
242
254
  })
@@ -247,16 +259,20 @@ export class WidgetGauge extends LitElement {
247
259
  for (const ds of this.dataSets) {
248
260
  // compute derivative values
249
261
  // filter latest values and calculate average
250
- if (typeof ds.averageLatest !== 'number' || !isNaN(ds.averageLatest)) ds.averageLatest = 1
251
- const data = ds?.data?.slice(0, ds.averageLatest ?? 1) ?? []
262
+ ds.advanced ??= {}
263
+ if (typeof ds.advanced?.averageLatest !== 'number' || isNaN(ds.advanced?.averageLatest))
264
+ ds.advanced.averageLatest = 1
265
+ const data = ds?.data?.slice(0, ds.advanced?.averageLatest || 1) ?? []
252
266
  const values = (data?.map((d) => d.value)?.filter((p) => p !== undefined) ?? []) as number[]
253
267
  const average = values.reduce((p, c) => p + c, 0) / values.length
254
268
 
255
- ds.needleValue = isNaN(average) ? ds.sections?.[0] : average
269
+ ds.needleValue = isNaN(average) ? ds.sections?.sectionLimits?.[0] : average
256
270
 
257
- ds.range = (ds.sections?.[ds.sections?.length - 1] ?? 100) - (ds.sections?.[0] ?? 0)
271
+ ds.range =
272
+ (ds.sections?.sectionLimits?.[ds.sections?.sectionLimits?.length - 1] ?? 100) -
273
+ (ds.sections?.sectionLimits?.[0] ?? 0)
258
274
  if (isNaN(ds.range as number)) ds.range = 100
259
- ds.ranges = ds.sections?.map((v, i, a) => v - (a?.[i - 1] ?? 0)).slice(1) ?? []
275
+ ds.ranges = ds.sections?.sectionLimits?.map((v, i, a) => v - (a?.[i - 1] ?? 0)).slice(1) ?? []
260
276
 
261
277
  // const option = this.canvasList[ds.label].getOption()
262
278
  const option = structuredClone(this.template)
@@ -272,7 +288,7 @@ export class WidgetGauge extends LitElement {
272
288
  const tsp = Date.parse(ds?.data?.[0]?.tsp ?? '')
273
289
  if (isNaN(tsp)) {
274
290
  const now = new Date().getTime()
275
- if (now - tsp > (ds.maxLatency ?? Infinity) * 1000) ds.needleValue = undefined
291
+ if (now - tsp > (ds.advanced?.maxLatency ?? Infinity) * 1000) ds.needleValue = undefined
276
292
  }
277
293
 
278
294
  ga.data[0].value = ds.needleValue
@@ -286,12 +302,15 @@ export class WidgetGauge extends LitElement {
286
302
  // ga.pointer.itemStyle.color = ds.valueColor
287
303
 
288
304
  // Axis
289
- ga2.min = ds.sections?.length ? Math.min(...ds.sections) : 0
290
- ga2.max = ds.sections?.length ? Math.max(...ds.sections) : 100
305
+ ga2.min = ds.sections?.sectionLimits?.length ? Math.min(...ds.sections?.sectionLimits) : 0
306
+ ga2.max = ds.sections?.sectionLimits?.length ? Math.max(...ds.sections?.sectionLimits) : 100
291
307
  ga.min = ga2.min
292
308
  ga.max = ga2.max
293
- const colorSections = ds.backgroundColors
294
- ?.map((b, i) => [((ds.sections?.[i + 1] ?? ga.min) - ga.min) / (ds.range as number), b])
309
+ const colorSections = ds.sections?.backgroundColors
310
+ ?.map((b, i) => [
311
+ ((ds.sections?.sectionLimits?.[i + 1] ?? ga.min) - ga.min) / (ds.range as number),
312
+ b
313
+ ])
295
314
  .filter(([s]) => !isNaN(s as number))
296
315
  ga2.axisLine.lineStyle.width = 8 * modifier
297
316
  ga2.axisLine.lineStyle.color = colorSections?.length
@@ -304,35 +323,54 @@ export class WidgetGauge extends LitElement {
304
323
  ga2.splitLine.distance = -16 * modifier
305
324
 
306
325
  // Progress
307
- let progressColor = ds.backgroundColors?.[ds.backgroundColors.length - 1] ?? 'green'
308
- for (const [i, s] of ds.sections?.entries() ?? []) {
326
+ let progressColor =
327
+ ds.sections?.backgroundColors?.[ds.sections?.backgroundColors.length - 1] ?? 'green'
328
+ for (const [i, s] of ds.sections?.sectionLimits?.entries() ?? []) {
309
329
  if (s > (ds.needleValue as number)) {
310
- progressColor = ds.backgroundColors?.[i - 1] ?? ds.backgroundColors?.[0] ?? 'green'
330
+ progressColor =
331
+ ds.sections?.backgroundColors?.[i - 1] ??
332
+ ds.sections?.backgroundColors?.[0] ??
333
+ 'green'
311
334
  break
312
335
  }
313
336
  }
314
337
  ga.progress.itemStyle.color = progressColor
315
338
  ga.progress.width = 80 * modifier
316
339
  // Apply
340
+ console.log('Set Option', ds.label, option)
317
341
  this.canvasList[ds.label ?? '']?.setOption(option)
318
342
  }
319
343
  }
320
344
 
321
345
  setupCharts() {
322
346
  // remove the gauge canvases of non provided data series
347
+ console.log('Setup Charts', this.canvasList, this.dataSets)
323
348
  for (const label in this.canvasList) {
324
349
  const ex = this.dataSets.find((ds) => ds.label === label)
325
- if (!ex) delete this.canvasList[label]
350
+ if (!ex) {
351
+ delete this.canvasList[label]
352
+ const containerDiv = this.gaugeContainer?.querySelector(`[name="${label}"]`)
353
+ containerDiv?.remove()
354
+ }
326
355
  }
327
356
 
328
357
  this.dataSets.forEach((ds) => {
329
358
  if (this.canvasList[ds.label ?? '']) return
330
- const canvas = this.shadowRoot?.querySelector(`[name="${ds.label}"]`) as HTMLCanvasElement
331
- if (!canvas) return
359
+ const newCanvas = document.createElement('div')
360
+ newCanvas.setAttribute('name', ds.label ?? '')
361
+ newCanvas.setAttribute('class', 'chart')
362
+ newCanvas.setAttribute(
363
+ 'style',
364
+ `min-width: 600px; min-height: 400px; width: 600px; height: 400px;`
365
+ )
366
+
367
+ this.gaugeContainer!.appendChild(newCanvas)
368
+ console.log('Create Chart', ds.label)
332
369
  // @ts-ignore
333
- this.canvasList[ds.label ?? ''] = echarts.init(canvas)
370
+ this.canvasList[ds.label ?? ''] = echarts.init(newCanvas)
334
371
  this.canvasList[ds.label ?? ''].setOption(structuredClone(this.template))
335
372
  })
373
+ this.sizingSetup()
336
374
  }
337
375
 
338
376
  static styles = css`
@@ -401,30 +439,11 @@ export class WidgetGauge extends LitElement {
401
439
  render() {
402
440
  return html`
403
441
  <div class="wrapper">
404
- <header
405
- class="paging"
406
- ?active=${this.inputData?.settings?.title || this.inputData?.settings?.subTitle}
407
- >
408
- <h3 class="paging" ?active=${this.inputData?.settings?.title}>
409
- ${this.inputData?.settings?.title}
410
- </h3>
411
- <p class="paging" ?active=${this.inputData?.settings?.subTitle}>
412
- ${this.inputData?.settings?.subTitle}
413
- </p>
442
+ <header class="paging" ?active=${this.inputData?.title || this.inputData?.subTitle}>
443
+ <h3 class="paging" ?active=${this.inputData?.title}>${this.inputData?.title}</h3>
444
+ <p class="paging" ?active=${this.inputData?.subTitle}>${this.inputData?.subTitle}</p>
414
445
  </header>
415
- <div class="gauge-container">
416
- ${repeat(
417
- this.dataSets,
418
- (ds) => ds.label,
419
- (ds) => html`
420
- <div
421
- name="${ds.label ?? ''}"
422
- class="chart"
423
- style="min-width: 600px; min-height: 400px; width: 600px; height: 400px;"
424
- ></div>
425
- `
426
- )}
427
- </div>
446
+ <div class="gauge-container"></div>
428
447
  </div>
429
448
  `
430
449
  }