@record-evolution/widget-linechart 1.6.23 → 1.6.25

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 (9) hide show
  1. package/dist/widget-linechart.js +25132 -55208
  2. package/dist/widget-linechart.js.map +1 -1
  3. package/package.json +10 -15
  4. package/src/default-data.json +22 -71
  5. package/src/definition-schema.d.ts +36 -11
  6. package/src/definition-schema.json +66 -42
  7. package/src/widget-linechart.ts +72 -23
  8. package/dist/src/widget-linechart.d.ts +0 -63
  9. package/dist/tsconfig.tsbuildinfo +0 -1
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@record-evolution/widget-linechart",
3
- "description": "Webcomponent widget-linechart following open-wc recommendations",
3
+ "description": "REWidget widget-linechart",
4
4
  "license": "MIT",
5
5
  "author": "widget-linechart",
6
- "version": "1.6.23",
6
+ "version": "1.6.25",
7
7
  "type": "module",
8
8
  "main": "dist/widget-linechart.js",
9
9
  "types": "dist/src/widget-linechart.d.ts",
@@ -14,32 +14,27 @@
14
14
  ],
15
15
  "scripts": {
16
16
  "analyze": "cem analyze --litelement",
17
- "start": "concurrently -k -r \"npm run watch\" \"wds\"",
17
+ "start": "vite",
18
+ "build": "vite build",
19
+ "watch": "vite build --watch",
18
20
  "link": "npm run build && npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-linechart",
19
21
  "unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-linechart && npm i @record-evolution/widget-linechart",
20
- "build": "rollup -c rollup.config.js",
21
- "watch": "rollup -w -c rollup.config.js",
22
22
  "types": "cat src/definition-schema.json | json2ts --style.tabWidth=4 > src/definition-schema.d.ts",
23
23
  "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag && npm run build"
24
24
  },
25
25
  "dependencies": {
26
26
  "echarts": "6.0.0",
27
- "lit": "^3.3.1",
28
- "tinycolor2": "^1.6.0"
27
+ "lit": "^3.3.2",
28
+ "tinycolor2": "^1.6.0",
29
+ "tslib": "^2.8.1"
29
30
  },
30
31
  "devDependencies": {
31
32
  "@custom-elements-manifest/analyzer": "^0.10.4",
32
- "@rollup/plugin-babel": "^6.0.4",
33
- "@rollup/plugin-commonjs": "^28.0.5",
34
- "@rollup/plugin-node-resolve": "^16.0.1",
35
33
  "@rollup/plugin-replace": "^6.0.2",
36
- "@rollup/plugin-typescript": "^12.1.2",
37
34
  "@types/tinycolor2": "^1.4.6",
38
- "@web/dev-server": "^0.4.6",
39
- "concurrently": "^9.1.2",
40
35
  "json-schema-to-typescript": "^15.0.4",
41
- "tslib": "^2.8.1",
42
- "typescript": "^5.8.3"
36
+ "typescript": "5.9.3",
37
+ "vite": "^7.3.0"
43
38
  },
44
39
  "repository": {
45
40
  "type": "git",
package/src/default-data.json CHANGED
@@ -1,5 +1,10 @@
1
1
  {
2
2
  "axis": {
3
+ "showXAxis": true,
4
+ "showYAxis": true,
5
+ "showLegend": true,
6
+ "showBox": false,
7
+ "showTitle": true,
3
8
  "timeseries": true,
4
9
  "xAxisLabel": "Time",
5
10
  "xAxisZoom": false,
@@ -11,91 +16,37 @@
11
16
  {
12
17
  "label": "Demo Bubble",
13
18
  "type": "scatter",
14
- "styling": {
15
- "borderWidth": 2,
16
- "fill": false
17
- },
18
- "advanced": {
19
- "drawOrder": 1
20
- },
19
+ "styling": { "borderWidth": 2, "fill": false },
20
+ "advanced": { "drawOrder": 1 },
21
21
  "data": [
22
- {
23
- "x": "2023-11-05T12:47:52.351152+00:00",
24
- "y": 40,
25
- "r": 10
26
- },
27
- {
28
- "x": "2023-11-07T12:47:52.351152+00:00",
29
- "y": 40,
30
- "r": 70
31
- },
32
- {
33
- "x": "2023-11-11T22:47:52.351152+00:00",
34
- "y": 32,
35
- "r": 27
36
- }
22
+ { "x": "2023-11-05T12:47:52.351152+00:00", "y": 40, "r": 10 },
23
+ { "x": "2023-11-07T12:47:52.351152+00:00", "y": 40, "r": 70 },
24
+ { "x": "2023-11-11T22:47:52.351152+00:00", "y": 32, "r": 27 }
37
25
  ]
38
26
  },
39
27
  {
40
28
  "label": "Demo Bar",
41
29
  "type": "bar",
42
- "styling": {
43
- "borderWidth": 2,
44
- "pointStyle": "circle",
45
- "fill": false
46
- },
47
- "advanced": {
48
- "drawOrder": 2
49
- },
30
+ "styling": { "borderWidth": 2, "pointStyle": "circle", "fill": false },
31
+ "advanced": { "drawOrder": 2 },
50
32
  "data": [
51
- {
52
- "x": "2023-11-04T22:47:52.351152+00:00",
53
- "y": 28
54
- },
55
- {
56
- "x": "2023-11-05T22:47:52.351152+00:00",
57
- "y": 10
58
- },
59
- {
60
- "x": "2023-11-07T22:47:52.351152+00:00",
61
- "y": 59
62
- },
63
- {
64
- "x": "2023-11-10T22:47:52.351152+00:00",
65
- "y": 42
66
- }
33
+ { "x": "2023-11-04T22:47:52.351152+00:00", "y": 28 },
34
+ { "x": "2023-11-05T22:47:52.351152+00:00", "y": 10 },
35
+ { "x": "2023-11-07T22:47:52.351152+00:00", "y": 59 },
36
+ { "x": "2023-11-10T22:47:52.351152+00:00", "y": 42 }
67
37
  ]
68
38
  },
69
39
  {
70
40
  "label": "Demo Line",
71
41
  "type": "line",
72
- "styling": {
73
- "fill": false,
74
- "borderWidth": 2,
75
- "borderDash": "dashed",
76
- "pointStyle": "circle"
77
- },
42
+ "styling": { "fill": false, "borderWidth": 2, "borderDash": "dashed", "pointStyle": "circle" },
78
43
 
79
- "advanced": {
80
- "drawOrder": 3
81
- },
44
+ "advanced": { "drawOrder": 3 },
82
45
  "data": [
83
- {
84
- "x": "2023-11-03T22:47:52.351152+00:00",
85
- "y": 20
86
- },
87
- {
88
- "x": "2023-11-06T09:47:52.351152+00:00",
89
- "y": 40
90
- },
91
- {
92
- "x": "2023-11-08T09:47:52.351152+00:00",
93
- "y": 45
94
- },
95
- {
96
- "x": "2023-11-11T22:47:52.351152+00:00",
97
- "y": 20
98
- }
46
+ { "x": "2023-11-03T22:47:52.351152+00:00", "y": 20 },
47
+ { "x": "2023-11-06T09:47:52.351152+00:00", "y": 40 },
48
+ { "x": "2023-11-08T09:47:52.351152+00:00", "y": 45 },
49
+ { "x": "2023-11-11T22:47:52.351152+00:00", "y": 20 }
99
50
  ]
100
51
  }
101
52
  ]
package/src/definition-schema.d.ts CHANGED
@@ -7,24 +7,44 @@
7
7
 
8
8
  export type Title = string;
9
9
  export type Subtitle = string;
10
- export type XAxisLabel = string;
11
- export type YAxisLabel = string;
10
+ /**
11
+ * Display the chart legend.
12
+ */
13
+ export type ShowLegend = boolean;
14
+ /**
15
+ * Display the chart title.
16
+ */
17
+ export type ShowTitle = boolean;
18
+ /**
19
+ * Display a border frame around the chart area.
20
+ */
21
+ export type ShowBoxFrame = boolean;
12
22
  /**
13
23
  * This will apply a proper time series x-Axis. Check if your x-values are timestamps.
14
24
  */
15
25
  export type TimeseriesChart = boolean;
26
+ /**
27
+ * When multiple charts are drawn, then they will be layed out horizontically or vertically.
28
+ */
29
+ export type VerticalLayout = boolean;
30
+ export type XAxisLabel = string;
31
+ /**
32
+ * Display the x-axis with labels. When hidden, bottom padding is removed.
33
+ */
34
+ export type ShowXAxis = boolean;
16
35
  /**
17
36
  * If checked, a zoom tool will be shown on the x-axis to zoom into the chart.
18
37
  */
19
38
  export type XAxisZoomTool = boolean;
39
+ export type YAxisLabel = string;
20
40
  /**
21
- * If checked, the Y-Axis will be scaled to the data range. If not checked, the Y-Axis will always start at 0.
41
+ * Display the y-axis with labels. When hidden, left padding is removed.
22
42
  */
23
- export type YAxisScaling = boolean;
43
+ export type ShowYAxis = boolean;
24
44
  /**
25
- * When multiple charts are drawn, then they will be layed out horizontically or vertically.
45
+ * If checked, the Y-Axis will be scaled to the data range. If not checked, the Y-Axis will always start at 0.
26
46
  */
27
- export type VerticalLayout = boolean;
47
+ export type YAxisScaling = boolean;
28
48
  /**
29
49
  * The name for this data series
30
50
  */
@@ -85,17 +105,22 @@ export type Dataseries = {
85
105
  export interface InputData {
86
106
  title?: Title;
87
107
  subTitle?: Subtitle;
88
- axis?: AxisSettings;
108
+ axis?: Configuration;
89
109
  dataseries?: Dataseries;
90
110
  [k: string]: unknown;
91
111
  }
92
- export interface AxisSettings {
93
- xAxisLabel?: XAxisLabel;
94
- yAxisLabel?: YAxisLabel;
112
+ export interface Configuration {
113
+ showLegend?: ShowLegend;
114
+ showTitle?: ShowTitle;
115
+ showBox?: ShowBoxFrame;
95
116
  timeseries?: TimeseriesChart;
117
+ columnLayout?: VerticalLayout;
118
+ xAxisLabel?: XAxisLabel;
119
+ showXAxis?: ShowXAxis;
96
120
  xAxisZoom?: XAxisZoomTool;
121
+ yAxisLabel?: YAxisLabel;
122
+ showYAxis?: ShowYAxis;
97
123
  yAxisScaling?: YAxisScaling;
98
- columnLayout?: VerticalLayout;
99
124
  [k: string]: unknown;
100
125
  }
101
126
  /**
package/src/definition-schema.json CHANGED
@@ -2,60 +2,94 @@
2
2
  "title": "inputData",
3
3
  "type": "object",
4
4
  "properties": {
5
- "title": {
6
- "title": "Title",
7
- "type": "string",
8
- "order": 1
9
- },
10
- "subTitle": {
11
- "title": "Subtitle",
12
- "type": "string",
13
- "order": 2
14
- },
5
+ "title": { "title": "Title", "type": "string", "order": 1 },
6
+ "subTitle": { "title": "Subtitle", "type": "string", "order": 2 },
15
7
  "axis": {
16
- "title": "Axis Settings",
8
+ "title": "Configuration",
17
9
  "type": "object",
18
10
  "order": 3,
19
11
  "properties": {
20
- "xAxisLabel": {
21
- "title": "X-Axis Label",
22
- "type": "string",
23
- "dataDrivenDisabled": false,
24
- "order": 3
12
+ "showLegend": {
13
+ "title": "Show Legend",
14
+ "description": "Display the chart legend.",
15
+ "type": "boolean",
16
+ "default": true,
17
+ "dataDrivenDisabled": true,
18
+ "order": 1
25
19
  },
26
- "yAxisLabel": {
27
- "title": "Y-Axis Label",
28
- "type": "string",
29
- "dataDrivenDisabled": false,
30
- "order": 4
20
+ "showTitle": {
21
+ "title": "Show Title",
22
+ "description": "Display the chart title.",
23
+ "type": "boolean",
24
+ "default": true,
25
+ "dataDrivenDisabled": true,
26
+ "order": 2
27
+ },
28
+ "showBox": {
29
+ "title": "Show Box Frame",
30
+ "description": "Display a border frame around the chart area.",
31
+ "type": "boolean",
32
+ "default": false,
33
+ "dataDrivenDisabled": true,
34
+ "order": 3
31
35
  },
32
36
  "timeseries": {
33
37
  "title": "Timeseries Chart",
34
38
  "description": "This will apply a proper time series x-Axis. Check if your x-values are timestamps.",
35
39
  "type": "boolean",
36
40
  "dataDrivenDisabled": true,
41
+ "order": 4
42
+ },
43
+ "columnLayout": {
44
+ "title": "Vertical Layout",
45
+ "description": "When multiple charts are drawn, then they will be layed out horizontically or vertically.",
46
+ "type": "boolean",
47
+ "dataDrivenDisabled": true,
37
48
  "order": 5
38
49
  },
50
+
51
+ "xAxisLabel": {
52
+ "title": "X-Axis Label",
53
+ "type": "string",
54
+ "dataDrivenDisabled": false,
55
+ "order": 6
56
+ },
57
+ "showXAxis": {
58
+ "title": "Show X-Axis",
59
+ "description": "Display the x-axis with labels. When hidden, bottom padding is removed.",
60
+ "type": "boolean",
61
+ "default": true,
62
+ "dataDrivenDisabled": true,
63
+ "order": 7
64
+ },
39
65
  "xAxisZoom": {
40
66
  "title": "X-Axis Zoom Tool",
41
67
  "type": "boolean",
42
68
  "description": "If checked, a zoom tool will be shown on the x-axis to zoom into the chart.",
43
69
  "dataDrivenDisabled": true,
44
- "order": 6
70
+ "order": 8
45
71
  },
46
- "yAxisScaling": {
47
- "title": "Y-Axis Scaling",
48
- "description": "If checked, the Y-Axis will be scaled to the data range. If not checked, the Y-Axis will always start at 0.",
72
+
73
+ "yAxisLabel": {
74
+ "title": "Y-Axis Label",
75
+ "type": "string",
76
+ "dataDrivenDisabled": false,
77
+ "order": 9
78
+ },
79
+ "showYAxis": {
80
+ "title": "Show Y-Axis",
81
+ "description": "Display the y-axis with labels. When hidden, left padding is removed.",
49
82
  "type": "boolean",
83
+ "default": true,
50
84
  "dataDrivenDisabled": true,
51
- "order": 7
85
+ "order": 10
52
86
  },
53
- "columnLayout": {
54
- "title": "Vertical Layout",
55
- "description": "When multiple charts are drawn, then they will be layed out horizontically or vertically.",
87
+ "yAxisScaling": {
88
+ "title": "Y-Axis Scaling",
89
+ "description": "If checked, the Y-Axis will be scaled to the data range. If not checked, the Y-Axis will always start at 0.",
56
90
  "type": "boolean",
57
91
  "dataDrivenDisabled": true,
58
- "order": 8
92
+ "order": 11
59
93
  }
60
94
  }
61
95
  },
@@ -89,12 +123,7 @@
89
123
  "color": true,
90
124
  "order": 3
91
125
  },
92
- "borderColor": {
93
- "title": "Line Color",
94
- "type": "color",
95
- "color": true,
96
- "order": 4
97
- },
126
+ "borderColor": { "title": "Line Color", "type": "color", "color": true, "order": 4 },
98
127
  "styling": {
99
128
  "title": "Styling",
100
129
  "description": "",
@@ -177,12 +206,7 @@
177
206
  "order": 1,
178
207
  "required": true
179
208
  },
180
- "y": {
181
- "title": "Y-Value",
182
- "type": "string",
183
- "order": 2,
184
- "required": true
185
- },
209
+ "y": { "title": "Y-Value", "type": "string", "order": 2, "required": true },
186
210
  "r": {
187
211
  "title": "Bubble Size",
188
212
  "description": "Controls the symbol size for line and scatter charts.",
package/src/widget-linechart.ts CHANGED
@@ -11,7 +11,7 @@ import {
11
11
  GridComponent
12
12
  } from 'echarts/components'
13
13
  import { LineChart, BarChart, ScatterChart } from 'echarts/charts'
14
- import { UniversalTransition } from 'echarts/features'
14
+ import { UniversalTransition, LegacyGridContainLabel } from 'echarts/features'
15
15
  import { CanvasRenderer } from 'echarts/renderers'
16
16
  import tinycolor, { ColorInput } from 'tinycolor2'
17
17
 
@@ -26,7 +26,8 @@ echarts.use([
26
26
  BarChart,
27
27
  ScatterChart,
28
28
  CanvasRenderer,
29
- UniversalTransition
29
+ UniversalTransition,
30
+ LegacyGridContainLabel
30
31
  ])
31
32
 
32
33
  import { InputData } from './definition-schema'
@@ -59,6 +60,7 @@ export class WidgetLinechart extends LitElement {
59
60
  lastUpdateTime?: number
60
61
  updateIntervals?: number[]
61
62
  lastMaxTimestamp?: number
63
+ lastConfig?: string
62
64
  }
63
65
  > = new Map()
64
66
 
@@ -97,11 +99,10 @@ export class WidgetLinechart extends LitElement {
97
99
  top: 0
98
100
  },
99
101
  grid: {
100
- backgroundColor: 'rgba(0, 255, 0, 0.1)',
101
102
  top: 30,
102
103
  bottom: 20,
103
104
  left: 20,
104
- right: 10,
105
+ right: 0,
105
106
  containLabel: true // ensures labels are not cut off
106
107
  },
107
108
  toolbox: {
@@ -225,7 +226,18 @@ export class WidgetLinechart extends LitElement {
225
226
 
226
227
  if (!theme || !theme.theme_object || !theme.theme_name) return
227
228
 
228
- echarts.registerTheme(theme.theme_name, theme.theme_object)
229
+ // Filter out component keys that would trigger warnings about unregistered components
230
+ const excludeKeys = [
231
+ 'parallel',
232
+ 'geo',
233
+ 'timeline',
234
+ 'visualMap',
235
+ 'markPoint'
236
+ ]
237
+ const filteredTheme = Object.fromEntries(
238
+ Object.entries(theme.theme_object).filter(([key]) => !excludeKeys.includes(key))
239
+ )
240
+ echarts.registerTheme(theme.theme_name, filteredTheme)
229
241
  }
230
242
 
231
243
  transformData() {
@@ -410,56 +422,92 @@ export class WidgetLinechart extends LitElement {
410
422
  this.canvasList.forEach((chart, label) => {
411
423
  chart.series.sort((a, b) => ((a.name as string) > (b.name as string) ? 1 : -1))
412
424
 
413
- const option: any = chart.echart?.getOption() ?? window.structuredClone(this.template)
425
+ // Visibility controls
426
+ const showLegend = this.inputData?.axis?.showLegend ?? true
427
+ const showTitle = this.inputData?.axis?.showTitle ?? true
428
+ const showXAxis = this.inputData?.axis?.showXAxis ?? true
429
+ const showYAxis = this.inputData?.axis?.showYAxis ?? true
430
+ const showBox = this.inputData?.axis?.showBox ?? false
431
+
432
+ // Track config changes to determine if full rebuild needed
433
+ const currentConfig = JSON.stringify({
434
+ showLegend,
435
+ showTitle,
436
+ showXAxis,
437
+ showYAxis,
438
+ showBox,
439
+ xAxisLabel: this.inputData?.axis?.xAxisLabel,
440
+ yAxisLabel: this.inputData?.axis?.yAxisLabel,
441
+ xAxisZoom: this.inputData?.axis?.xAxisZoom,
442
+ yAxisScaling: this.inputData?.axis?.yAxisScaling,
443
+ xAxisType: this.xAxisType(),
444
+ yAxisType: this.yAxisType(),
445
+ seriesCount: chart.series.length
446
+ })
447
+ const configChanged = chart.lastConfig !== currentConfig
448
+ chart.lastConfig = currentConfig
449
+
450
+ // Use efficient merge for data-only updates, full rebuild for config changes
451
+ const option: any = configChanged ? window.structuredClone(this.template) : chart.echart?.getOption() ?? window.structuredClone(this.template)
452
+
414
453
  // Title
415
454
  option.title.text = label
416
- // option.title.textStyle.fontSize = 25 * modifier
455
+ option.title.show = showTitle
417
456
 
418
457
  // Axis
419
458
  option.xAxis.name = this.inputData?.axis?.xAxisLabel ?? ''
459
+ option.xAxis.type = this.xAxisType()
460
+ option.xAxis.show = showXAxis
420
461
  if (this.xAxisType() === 'time') {
421
462
  const axisMax = chart.series.map((s) => s.maxDate ?? 0).reduce((a, b) => Math.max(a, b), 0)
422
463
  const axisMin = chart.series
423
464
  .map((s) => s.minDate ?? Infinity)
424
465
  .reduce((a, b) => Math.min(a, b), Infinity)
425
- // console.log('Setting xAxis time range', label, new Date(axisMin), new Date(axisMax))
426
466
  option.xAxis = {
427
467
  ...option.xAxis,
428
- min: axisMin ?? new Date().getTime() - 1 * 24 * 60 * 60 * 1000, // 1 days ago,
429
- max: axisMax ?? new Date().getTime() // today
468
+ min: axisMin ?? new Date().getTime() - 1 * 24 * 60 * 60 * 1000,
469
+ max: axisMax ?? new Date().getTime()
430
470
  }
431
471
  }
432
472
  option.dataZoom[0].show = this.inputData?.axis?.xAxisZoom ?? false
433
473
  option.toolbox.show = this.inputData?.axis?.xAxisZoom ?? false
434
- // option.xAxis.axisLine.lineStyle.width = 2 * modifier
435
- // option.xAxis.axisLabel.fontSize = 20 * modifier
436
- option.xAxis.type = this.xAxisType()
437
- option.yAxis.type = this.yAxisType()
438
474
 
475
+ option.yAxis.type = this.yAxisType()
439
476
  option.yAxis.name = this.inputData?.axis?.yAxisLabel ?? ''
440
- // option.yAxis.axisLine.lineStyle.width = 2 * modifier
441
- // option.yAxis.axisLabel.fontSize = 20 * modifier
442
477
  option.yAxis.scale = this.inputData?.axis?.yAxisScaling ?? false
478
+ option.yAxis.show = showYAxis
443
479
  if (['value', 'log'].includes(option.yAxis.type))
444
480
  option.yAxis.axisLabel = {
445
481
  'font-size': 14,
446
482
  formatter: (value: number) => Math.round(value * 100) / 100
447
483
  }
448
484
 
449
- const notMerge = option.series.length !== chart.series.length
450
485
  option.series = chart.series
451
- // console.log('Applying data to chart', label, option)
452
- if (chart.series.length <= 1) option.legend.show = false
486
+ option.legend.show = showLegend
487
+
488
+ // Dynamic grid padding based on visible elements
489
+ option.grid = {
490
+ ...option.grid,
491
+ show: showBox,
492
+ backgroundColor: 'transparent',
493
+ borderWidth: showBox ? 1 : 0,
494
+ borderColor: this.themeTitleColor ?? '#ccc',
495
+ top: showTitle ? 30 : 0,
496
+ bottom: showXAxis ? 20 : 0,
497
+ left: showYAxis ? 20 : 0,
498
+ right: 0,
499
+ containLabel: showXAxis || showYAxis
500
+ }
453
501
 
454
502
  // Calculate animation duration based on update frequency
455
503
  const animationDuration = this.calculateAnimationDuration(chart, label)
456
504
  option.animation = true
457
- option.animationEasing = 'linear' // Use linear easing for predictable timing
505
+ option.animationEasing = 'linear'
458
506
  option.animationDuration = animationDuration
459
- option.animationDurationUpdate = animationDuration // Explicitly set update animation
507
+ option.animationDurationUpdate = animationDuration
460
508
  chart.echart?.on('finished', () => (chart.drawing = false))
461
509
  chart.drawing = true
462
- chart.echart?.setOption(option, { notMerge, lazyUpdate: true })
510
+ chart.echart?.setOption(option, { notMerge: configChanged, lazyUpdate: true })
463
511
  // chart.echart?.resize()
464
512
  })
465
513
  }
@@ -519,6 +567,7 @@ export class WidgetLinechart extends LitElement {
519
567
  box-sizing: border-box;
520
568
  position: relative;
521
569
  margin: auto;
570
+ container-type: size;
522
571
  }
523
572
 
524
573
  .paging:not([active]) {
@@ -530,7 +579,7 @@ export class WidgetLinechart extends LitElement {
530
579
  flex-direction: column;
531
580
  height: 100%;
532
581
  width: 100%;
533
- padding: 16px;
582
+ padding: 2cqh 2cqw;
534
583
  box-sizing: border-box;
535
584
  gap: 12px;
536
585
  }
package/dist/src/widget-linechart.d.ts DELETED
@@ -1,63 +0,0 @@
1
- import { LitElement, PropertyValueMap } from 'lit';
2
- import * as echarts from 'echarts/core';
3
- import { InputData } from './definition-schema';
4
- import { EChartsOption, SeriesOption } from 'echarts';
5
- type Theme = {
6
- theme_name: string;
7
- theme_object: any;
8
- };
9
- type SeriesOptionX = SeriesOption & {
10
- minDate?: number;
11
- maxDate?: number;
12
- drawOrder: number;
13
- };
14
- export declare class WidgetLinechart extends LitElement {
15
- inputData?: InputData;
16
- theme?: Theme;
17
- private canvasList;
18
- private themeBgColor?;
19
- private themeTitleColor?;
20
- private themeSubtitleColor?;
21
- boxes?: HTMLDivElement[];
22
- origWidth: number;
23
- origHeight: number;
24
- template: EChartsOption;
25
- modifier: number;
26
- version: string;
27
- chartContainer: HTMLDivElement | null | undefined;
28
- resizeObserver?: ResizeObserver;
29
- updateThresholdMs: number;
30
- private maxIntervalSamples;
31
- constructor();
32
- update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
33
- protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
34
- registerTheme(theme?: Theme): void;
35
- transformData(): void;
36
- xAxisType(): 'value' | 'log' | 'category' | 'time' | undefined;
37
- yAxisType(): 'value' | 'log' | 'category' | undefined;
38
- calculateAnimationDuration(chart: any, label: string): number;
39
- applyData(): void;
40
- deleteCharts(): void;
41
- setupChart(label: string): {
42
- echart?: echarts.ECharts;
43
- series: SeriesOptionX[];
44
- doomed?: boolean;
45
- element?: HTMLDivElement;
46
- drawing: boolean;
47
- lastUpdateTime?: number;
48
- updateIntervals?: number[];
49
- lastMaxTimestamp?: number;
50
- } | {
51
- echart: echarts.ECharts;
52
- series: SeriesOptionX[];
53
- element: HTMLDivElement;
54
- drawing: boolean;
55
- lastUpdateTime: number;
56
- updateIntervals: never[];
57
- lastMaxTimestamp: number;
58
- } | undefined;
59
- disconnectedCallback(): void;
60
- static styles: import("lit").CSSResult;
61
- render(): import("lit-html").TemplateResult<1>;
62
- }
63
- export {};