@record-evolution/widget-linechart 1.6.28 → 1.6.30
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 +52 -16
- package/dist/widget-linechart.js +275 -262
- package/dist/widget-linechart.js.map +1 -1
- package/package.json +5 -1
- package/src/widget-linechart.ts +37 -21
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
|
|
|
@@ -25,7 +27,7 @@ Then import and use:
|
|
|
25
27
|
import '@record-evolution/widget-linechart/widget-linechart.js'
|
|
26
28
|
</script>
|
|
27
29
|
|
|
28
|
-
<widget-linechart-1.6.
|
|
30
|
+
<widget-linechart-1.6.28></widget-linechart-1.6.28>
|
|
29
31
|
```
|
|
30
32
|
|
|
31
33
|
The bundler will automatically deduplicate echarts across multiple widgets.
|
|
@@ -37,7 +39,7 @@ For CDN usage without a bundler, configure an import map with all dependencies:
|
|
|
37
39
|
```html
|
|
38
40
|
<script>
|
|
39
41
|
// Polyfill for Node.js process.env required by echarts
|
|
40
|
-
window.process = { env: { NODE_ENV: 'production' } }
|
|
42
|
+
window.process = { env: { NODE_ENV: 'production' } }
|
|
41
43
|
</script>
|
|
42
44
|
|
|
43
45
|
<script type="importmap">
|
|
@@ -57,10 +59,10 @@ For CDN usage without a bundler, configure an import map with all dependencies:
|
|
|
57
59
|
|
|
58
60
|
<script
|
|
59
61
|
type="module"
|
|
60
|
-
src="https://cdn.jsdelivr.net/npm/@record-evolution/widget-linechart@1.6.
|
|
62
|
+
src="https://cdn.jsdelivr.net/npm/@record-evolution/widget-linechart@1.6.28/dist/widget-linechart.js"
|
|
61
63
|
></script>
|
|
62
64
|
|
|
63
|
-
<widget-linechart-1.6.
|
|
65
|
+
<widget-linechart-1.6.28></widget-linechart-1.6.28>
|
|
64
66
|
```
|
|
65
67
|
|
|
66
68
|
**Note:** Version matching is critical - echarts 6.0.0 requires zrender 6.0.0 exactly.
|
|
@@ -74,9 +76,45 @@ This widget has been optimized to externalize heavy dependencies:
|
|
|
74
76
|
|
|
75
77
|
Bundle size: ~36KB (down from 625KB with bundled echarts)
|
|
76
78
|
|
|
77
|
-
##
|
|
78
|
-
|
|
79
|
-
|
|
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.
|
|
80
118
|
|
|
81
119
|
## Features
|
|
82
120
|
|
|
@@ -84,8 +122,10 @@ Please take a look at the src/default-data.json to see what data is expected to
|
|
|
84
122
|
- **Time series:** Set `axis.timeseries: true` for date-based x-axis
|
|
85
123
|
- **Multi-chart:** Use `advanced.chartName` to split series into separate charts
|
|
86
124
|
- **Pivot/Split:** `data[].pivot` auto-generates series per distinct value
|
|
87
|
-
- **Adaptive animation:** Animation duration automatically matches data update frequency
|
|
88
|
-
- **Dynamic theming:** Supports ECharts theme objects
|
|
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
|
|
89
129
|
|
|
90
130
|
## Performance Optimizations
|
|
91
131
|
|
|
@@ -94,14 +134,10 @@ Please take a look at the src/default-data.json to see what data is expected to
|
|
|
94
134
|
- ResizeObserver-based chart resizing (no polling)
|
|
95
135
|
- Adaptive animation timing based on actual update intervals
|
|
96
136
|
|
|
97
|
-
##
|
|
98
|
-
|
|
99
|
-
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
|
|
100
|
-
|
|
101
|
-
## Local Demo with Vite
|
|
137
|
+
## Local Demo
|
|
102
138
|
|
|
103
139
|
```bash
|
|
104
140
|
npm start
|
|
105
141
|
```
|
|
106
142
|
|
|
107
|
-
|
|
143
|
+
Runs a development server at http://localhost:8000/demo/
|