@record-evolution/widget-linechart 1.6.27 → 1.6.29
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.
- package/README.md +110 -30
- package/dist/widget-linechart.js +247 -234
- package/dist/widget-linechart.js.map +1 -1
- package/package.json +5 -1
- package/src/definition-schema.d.ts +2 -2
- package/src/definition-schema.json +11 -1
- package/src/widget-linechart.ts +27 -16
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# \<widget-linechart>
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A Lit 3.x web component for rendering interactive line, bar, and scatter charts using ECharts. Part of the IronFlock widget ecosystem.
|
|
4
|
+
|
|
5
|
+
|
|
4
6
|
|
|
5
7
|
## Installation
|
|
6
8
|
|
|
@@ -10,54 +12,132 @@ npm i @record-evolution/widget-linechart
|
|
|
10
12
|
|
|
11
13
|
## Usage
|
|
12
14
|
|
|
15
|
+
### Bundled Application (Vite/Webpack)
|
|
16
|
+
|
|
17
|
+
When using a bundler, install the widget and its peer dependencies:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm i @record-evolution/widget-linechart echarts@^6.0.0 tinycolor2@^1.6.0
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Then import and use:
|
|
24
|
+
|
|
13
25
|
```html
|
|
14
26
|
<script type="module">
|
|
15
|
-
import 'widget-linechart/widget-linechart.js'
|
|
27
|
+
import '@record-evolution/widget-linechart/widget-linechart.js'
|
|
16
28
|
</script>
|
|
17
29
|
|
|
18
|
-
<widget-linechart-1.
|
|
30
|
+
<widget-linechart-1.6.28></widget-linechart-1.6.28>
|
|
19
31
|
```
|
|
20
32
|
|
|
21
|
-
|
|
33
|
+
The bundler will automatically deduplicate echarts across multiple widgets.
|
|
22
34
|
|
|
23
|
-
|
|
35
|
+
### CDN / Import Maps
|
|
24
36
|
|
|
25
|
-
|
|
37
|
+
For CDN usage without a bundler, configure an import map with all dependencies:
|
|
26
38
|
|
|
27
|
-
|
|
39
|
+
```html
|
|
40
|
+
<script>
|
|
41
|
+
// Polyfill for Node.js process.env required by echarts
|
|
42
|
+
window.process = { env: { NODE_ENV: 'production' } }
|
|
43
|
+
</script>
|
|
28
44
|
|
|
29
|
-
|
|
45
|
+
<script type="importmap">
|
|
46
|
+
{
|
|
47
|
+
"imports": {
|
|
48
|
+
"echarts/core": "https://cdn.jsdelivr.net/npm/echarts@6.0.0/core.js",
|
|
49
|
+
"echarts/charts": "https://cdn.jsdelivr.net/npm/echarts@6.0.0/charts.js",
|
|
50
|
+
"echarts/components": "https://cdn.jsdelivr.net/npm/echarts@6.0.0/components.js",
|
|
51
|
+
"echarts/renderers": "https://cdn.jsdelivr.net/npm/echarts@6.0.0/renderers.js",
|
|
52
|
+
"echarts/features": "https://cdn.jsdelivr.net/npm/echarts@6.0.0/features.js",
|
|
53
|
+
"zrender/": "https://cdn.jsdelivr.net/npm/zrender@6.0.0/",
|
|
54
|
+
"tslib": "https://cdn.jsdelivr.net/npm/tslib@2.8.1/tslib.es6.mjs",
|
|
55
|
+
"tinycolor2": "https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/+esm"
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
</script>
|
|
30
59
|
|
|
31
|
-
|
|
60
|
+
<script
|
|
61
|
+
type="module"
|
|
62
|
+
src="https://cdn.jsdelivr.net/npm/@record-evolution/widget-linechart@1.6.28/dist/widget-linechart.js"
|
|
63
|
+
></script>
|
|
32
64
|
|
|
65
|
+
<widget-linechart-1.6.28></widget-linechart-1.6.28>
|
|
33
66
|
```
|
|
34
|
-
interface Point {
|
|
35
|
-
radius: number,
|
|
36
|
-
pointStyle: 'circle' | 'cross' | 'crossRot' | 'dash' | 'line' | 'rect' | 'rectRounded' | 'rectRot' | 'star' | 'triangle' | false,
|
|
37
|
-
backgroundColor: string,
|
|
38
|
-
borderColor: string,
|
|
39
|
-
borderWidth: number
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
interface Line {
|
|
44
|
-
backgroundColor: string,
|
|
45
|
-
borderColor: string,
|
|
46
|
-
borderWidth: number,
|
|
47
|
-
fill: boolean,
|
|
48
|
-
}
|
|
49
|
-
```
|
|
50
67
|
|
|
51
|
-
|
|
68
|
+
**Note:** Version matching is critical - echarts 6.0.0 requires zrender 6.0.0 exactly.
|
|
69
|
+
|
|
70
|
+
## Dependencies
|
|
71
|
+
|
|
72
|
+
This widget has been optimized to externalize heavy dependencies:
|
|
73
|
+
|
|
74
|
+
- **echarts** (^6.0.0) - Chart rendering engine (~300KB)
|
|
75
|
+
- **tinycolor2** (^1.6.0) - Color manipulation utilities
|
|
76
|
+
|
|
77
|
+
Bundle size: ~36KB (down from 625KB with bundled echarts)
|
|
78
|
+
|
|
79
|
+
## Configuration
|
|
80
|
+
|
|
81
|
+
The widget accepts an `inputData` property with the following structure:
|
|
82
|
+
|
|
83
|
+
### Axis Configuration (`axis`)
|
|
84
|
+
|
|
85
|
+
| Option | Type | Default | Description |
|
|
86
|
+
| -------------- | ------- | ------- | --------------------------------------------------------- |
|
|
87
|
+
| `showLegend` | boolean | `true` | Display the chart legend |
|
|
88
|
+
| `showTitle` | boolean | `true` | Display the chart title |
|
|
89
|
+
| `showBox` | boolean | `false` | Display a border frame around the chart area |
|
|
90
|
+
| `timeseries` | boolean | `false` | Enable time series x-axis (x-values should be timestamps) |
|
|
91
|
+
| `columnLayout` | boolean | `false` | Stack multiple charts vertically instead of horizontally |
|
|
92
|
+
| `xAxisLabel` | string | - | Label for the x-axis |
|
|
93
|
+
| `showXAxis` | boolean | `true` | Show/hide x-axis and labels |
|
|
94
|
+
| `xAxisZoom` | boolean | `false` | Enable zoom tool on x-axis |
|
|
95
|
+
| `yAxisLabel` | string | - | Label for the y-axis (positioned at top) |
|
|
96
|
+
| `showYAxis` | boolean | `true` | Show/hide y-axis and labels |
|
|
97
|
+
| `yAxisScaling` | boolean | `false` | Scale y-axis to data range (otherwise starts at 0) |
|
|
98
|
+
|
|
99
|
+
### Data Series (`dataseries[]`)
|
|
100
|
+
|
|
101
|
+
| Option | Type | Description |
|
|
102
|
+
| --------------------- | ---------------------------------- | ------------------------------------------------------------- |
|
|
103
|
+
| `label` | string | Series name shown in legend |
|
|
104
|
+
| `type` | `"line"` \| `"bar"` \| `"scatter"` | Chart type for this series |
|
|
105
|
+
| `data` | array | Array of `{ x, y, r?, pivot? }` data points |
|
|
106
|
+
| `backgroundColor` | color | Fill color for area/bars |
|
|
107
|
+
| `borderColor` | color | Line/border color |
|
|
108
|
+
| `styling.borderWidth` | number | Line width (default: 2) |
|
|
109
|
+
| `styling.borderDash` | string | Line style: `"solid"`, `"dashed"`, `"dotted"` |
|
|
110
|
+
| `styling.fill` | boolean | Fill area under line |
|
|
111
|
+
| `styling.pointStyle` | string | Point shape: `"circle"`, `"rect"`, `"triangle"`, `"none"` |
|
|
112
|
+
| `advanced.chartName` | string | Group series into named charts; use `#split#` for auto-naming |
|
|
113
|
+
| `advanced.drawOrder` | number | Z-index for layering series |
|
|
114
|
+
|
|
115
|
+
## Expected Data Format
|
|
116
|
+
|
|
117
|
+
See [src/default-data.json](src/default-data.json) for a complete example.
|
|
118
|
+
|
|
119
|
+
## Features
|
|
120
|
+
|
|
121
|
+
- **Chart types:** line, bar, scatter (via `dataseries[].type`)
|
|
122
|
+
- **Time series:** Set `axis.timeseries: true` for date-based x-axis
|
|
123
|
+
- **Multi-chart:** Use `advanced.chartName` to split series into separate charts
|
|
124
|
+
- **Pivot/Split:** `data[].pivot` auto-generates series per distinct value
|
|
125
|
+
- **Adaptive animation:** Animation duration automatically matches data update frequency
|
|
126
|
+
- **Dynamic theming:** Supports ECharts theme objects via the `theme` property
|
|
127
|
+
- **Visibility controls:** Toggle legend, title, axes, and box frame independently
|
|
128
|
+
- **Y-axis label:** Positioned at top of axis to avoid overlap with tick labels
|
|
52
129
|
|
|
53
|
-
|
|
130
|
+
## Performance Optimizations
|
|
54
131
|
|
|
55
|
-
|
|
132
|
+
- Efficient data-only updates using `setOption()` merge mode
|
|
133
|
+
- Full rebuild only on configuration changes (detected via config fingerprinting)
|
|
134
|
+
- ResizeObserver-based chart resizing (no polling)
|
|
135
|
+
- Adaptive animation timing based on actual update intervals
|
|
56
136
|
|
|
57
|
-
## Local Demo
|
|
137
|
+
## Local Demo
|
|
58
138
|
|
|
59
139
|
```bash
|
|
60
140
|
npm start
|
|
61
141
|
```
|
|
62
142
|
|
|
63
|
-
|
|
143
|
+
Runs a development server at http://localhost:8000/demo/
|