cats-charts 0.0.29 → 0.0.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 +261 -105
- package/assets/images/leftArrow.svg +3 -0
- package/assets/images/rightArrow.svg +3 -0
- package/fesm2022/cats-charts.mjs +199 -61
- package/fesm2022/cats-charts.mjs.map +1 -1
- package/index.d.ts +35 -17
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,19 +6,19 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
**CATS4U Charts** is a reusable Angular chart library built on **Apache ECharts** and **ngx-echarts**.
|
|
9
|
-
It provides easy-to-use components for rendering interactive charts such as **Bar, Line, Area, Pie, Doughnut, Sankey**, and more.
|
|
9
|
+
It provides easy-to-use components for rendering interactive charts such as **Bar, Line, Area, Pie, Doughnut, Sankey, Timeline**, and more.
|
|
10
10
|
|
|
11
11
|
---
|
|
12
12
|
|
|
13
13
|
# ✨ Features
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
15
|
+
- 📊 Multiple chart types
|
|
16
|
+
- ⚡ Powered by Apache ECharts
|
|
17
|
+
- 🔌 Angular Standalone Components
|
|
18
|
+
- 🎨 Built-in theme support
|
|
19
|
+
- 🖱 Click & drill-down events
|
|
20
|
+
- 🧩 Easy integration
|
|
21
|
+
- 📦 Lightweight and reusable
|
|
22
22
|
|
|
23
23
|
---
|
|
24
24
|
|
|
@@ -27,30 +27,9 @@ It provides easy-to-use components for rendering interactive charts such as **Ba
|
|
|
27
27
|
Install the package along with required dependencies:
|
|
28
28
|
|
|
29
29
|
```bash
|
|
30
|
-
npm install cats-charts
|
|
30
|
+
npm install cats-charts
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
---
|
|
34
|
-
|
|
35
|
-
# ⚙️ Setup ngx-echarts
|
|
36
|
-
|
|
37
|
-
Configure **ECharts** in your Angular application.
|
|
38
|
-
|
|
39
|
-
### app.config.ts or app.module.ts
|
|
40
|
-
|
|
41
|
-
```ts
|
|
42
|
-
import { provideEchartsCore } from 'ngx-echarts';
|
|
43
|
-
import * as echarts from 'echarts/core';
|
|
44
|
-
|
|
45
|
-
export const appConfig = {
|
|
46
|
-
providers: [
|
|
47
|
-
provideEchartsCore({ echarts })
|
|
48
|
-
]
|
|
49
|
-
};
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
---
|
|
53
|
-
|
|
54
33
|
# 🚀 Usage
|
|
55
34
|
|
|
56
35
|
## Import Library
|
|
@@ -59,103 +38,280 @@ export const appConfig = {
|
|
|
59
38
|
import { ChartsLib } from 'cats-charts';
|
|
60
39
|
```
|
|
61
40
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
## HTML Example
|
|
65
|
-
|
|
66
|
-
```html
|
|
67
|
-
<lib-charts-lib
|
|
68
|
-
[chartType]="'bar'"
|
|
69
|
-
[columns]="columns"
|
|
70
|
-
[data]="data"
|
|
71
|
-
[themeName]="'default'"
|
|
72
|
-
[showContextMenu]="true"
|
|
73
|
-
[contextMenuOptions]="contextMenuOptions"
|
|
74
|
-
(contextMenuClick)="onContextMenuClick($event)"
|
|
75
|
-
(chartEvent)="onChartEvent($event)"
|
|
76
|
-
></lib-charts-lib>>
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
---
|
|
80
|
-
|
|
81
|
-
<!-- # 📊 Example
|
|
82
|
-
|
|
83
|
-
### Component TypeScript
|
|
41
|
+
## TS Syntax
|
|
84
42
|
|
|
85
43
|
```ts
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
44
|
+
import {
|
|
45
|
+
BarChart,
|
|
46
|
+
CustomChartComponent,
|
|
47
|
+
DoughnutChart,
|
|
48
|
+
LinesChart,
|
|
49
|
+
PieChart,
|
|
50
|
+
SankeyChart
|
|
51
|
+
} from 'cats-charts';
|
|
52
|
+
|
|
53
|
+
@Component({
|
|
54
|
+
...,
|
|
55
|
+
imports: [
|
|
56
|
+
BarChart,
|
|
57
|
+
CustomChartComponent,
|
|
58
|
+
DoughnutChart,
|
|
59
|
+
LinesChart,
|
|
60
|
+
PieChart,
|
|
61
|
+
SankeyChart
|
|
62
|
+
],
|
|
63
|
+
})
|
|
64
|
+
export class App {}
|
|
65
|
+
```
|
|
95
66
|
|
|
96
67
|
---
|
|
97
68
|
|
|
98
69
|
# ⚙️ Inputs
|
|
99
70
|
|
|
100
|
-
| Input
|
|
101
|
-
|
|
102
|
-
|
|
|
103
|
-
|
|
|
104
|
-
|
|
|
105
|
-
|
|
|
106
|
-
| themeName | 'default' \| 'dark' \ | Chart theme |
|
|
107
|
-
| contextMenuList | ContextMenuListItem[] | Context menu configuration |
|
|
108
|
-
| contextMenuOptions | any[] | List of context menu items to display on right-click |
|
|
109
|
-
| showContextMenu | boolean | Whether to show the context menu on right-click (default: `false`) |
|
|
71
|
+
| Input | Type | Description |
|
|
72
|
+
| ------------------ | ------------------------------------------------- | -------------------------------------------------------------- | --- | --- |
|
|
73
|
+
| config | | configuration options to customize chart and pass dynamic data | | |
|
|
74
|
+
| theme | string | default \| dark \| vintage \| essos \| chalk \| roma |
|
|
75
|
+
| contextMenuOptions | { label: string, value: string, icon?: string }[] | Context menu options |
|
|
76
|
+
| events | string[] | ['click', 'contextmenu', 'dblclick'] |
|
|
110
77
|
|
|
111
78
|
---
|
|
112
79
|
|
|
113
80
|
# 📤 Outputs
|
|
114
81
|
|
|
115
|
-
| Output
|
|
116
|
-
|
|
117
|
-
| contextMenuClick |
|
|
118
|
-
| chartEvent
|
|
82
|
+
| Output | Description |
|
|
83
|
+
| ---------------- | ---------------------- |
|
|
84
|
+
| contextMenuClick | ( event: any ) => void |
|
|
85
|
+
| chartEvent | ( event: any ) => void |
|
|
119
86
|
|
|
120
|
-
|
|
87
|
+
## Bar chart config
|
|
121
88
|
|
|
122
89
|
```ts
|
|
123
|
-
|
|
124
|
-
|
|
90
|
+
BarChartConfig {
|
|
91
|
+
series: {
|
|
92
|
+
name: string;
|
|
93
|
+
data: number[];
|
|
94
|
+
[key: string]: any;
|
|
95
|
+
}[];
|
|
96
|
+
xAxisData: string[];
|
|
97
|
+
colors?: string[];
|
|
98
|
+
backgroundColor?: string;
|
|
99
|
+
|
|
100
|
+
// --------------- Title configs ---------------
|
|
101
|
+
title?: string;
|
|
102
|
+
titlePosition?: string;
|
|
103
|
+
showTitle?: boolean;
|
|
104
|
+
|
|
105
|
+
// --------------- Tooltip configs ---------------
|
|
106
|
+
showTooltip?: boolean;
|
|
107
|
+
tooltipFormatter?: (params: any) => void;
|
|
108
|
+
|
|
109
|
+
// --------------- Grid configs ---------------
|
|
110
|
+
gridLeft?: string | number;
|
|
111
|
+
gridRight?: string | number;
|
|
112
|
+
gridBottom?: string | number;
|
|
113
|
+
gridTop?: string | number;
|
|
114
|
+
|
|
115
|
+
// --------------- Zoom Slider configs ---------------
|
|
116
|
+
showZoomSlider?: boolean;
|
|
117
|
+
zoomStart?: number;
|
|
118
|
+
zoomEnd?: number;
|
|
119
|
+
zoomControlButtonStyle?: any;
|
|
120
|
+
|
|
121
|
+
yAxis?: any;
|
|
122
|
+
xAxis?: any;
|
|
123
|
+
stacked?: boolean;
|
|
124
|
+
|
|
125
|
+
barWidth?: string | number;
|
|
126
|
+
|
|
127
|
+
borderRadius?: number;
|
|
128
|
+
showLabel?: boolean;
|
|
129
|
+
labelPosition?: string;
|
|
130
|
+
showXAxisLine?: boolean;
|
|
131
|
+
showYAxisLine?: boolean;
|
|
132
|
+
// Legend
|
|
133
|
+
hideLegend?: boolean;
|
|
134
|
+
legendPosition?: 'top' | 'bottom' | 'left' | 'right' | string;
|
|
135
|
+
legendAlign?: 'left' | 'center' | 'right' | string;
|
|
136
|
+
legendDirection?: 'horizontal' | 'vertical' | string;
|
|
137
|
+
legendTextColor?: string;
|
|
138
|
+
legendFontSize?: number;
|
|
139
|
+
legendContainerWidth?: number; // 0-1
|
|
140
|
+
legendIndicatorHeight?: number; // number value is in px
|
|
125
141
|
}
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
## Line and Area Chart config
|
|
126
145
|
|
|
127
|
-
|
|
128
|
-
|
|
146
|
+
```ts
|
|
147
|
+
LineChartConfig {
|
|
148
|
+
isTrendChart?: boolean;
|
|
149
|
+
title?: string;
|
|
150
|
+
showTitle?: boolean;
|
|
151
|
+
titlePosition?: string;
|
|
152
|
+
xAxisData: string[];
|
|
153
|
+
tooltipFormatter?: (params: any) => void;
|
|
154
|
+
colors?: string[];
|
|
155
|
+
series: {
|
|
156
|
+
name: string;
|
|
157
|
+
data: number[];
|
|
158
|
+
areaColor?: string;
|
|
159
|
+
smooth?: boolean;
|
|
160
|
+
area?: boolean;
|
|
161
|
+
[key: string]: any;
|
|
162
|
+
}[];
|
|
163
|
+
// --------------- Grid configs ---------------
|
|
164
|
+
gridLeft?: string | number;
|
|
165
|
+
gridRight?: string | number;
|
|
166
|
+
gridBottom?: string | number;
|
|
167
|
+
gridTop?: string | number;
|
|
168
|
+
|
|
169
|
+
borderRadius?: number;
|
|
170
|
+
showLabel?: boolean;
|
|
171
|
+
labelPosition?: string;
|
|
172
|
+
|
|
173
|
+
yAxis?: any;
|
|
174
|
+
xAxis?: any;
|
|
175
|
+
showXAxisLine?: boolean;
|
|
176
|
+
showYAxisLine?: boolean;
|
|
177
|
+
showTooltip?: boolean;
|
|
178
|
+
|
|
179
|
+
backgroundColor?: string;
|
|
180
|
+
|
|
181
|
+
// Legend
|
|
182
|
+
hideLegend?: boolean;
|
|
183
|
+
legendPosition?: 'top' | 'bottom' | 'left' | 'right' | string;
|
|
184
|
+
legendAlign?: 'left' | 'center' | 'right' | string;
|
|
185
|
+
legendDirection?: 'horizontal' | 'vertical' | string;
|
|
186
|
+
legendTextColor?: string;
|
|
187
|
+
legendFontSize?: number;
|
|
188
|
+
legendContainerWidth?: number; // 0-1
|
|
189
|
+
legendIndicatorHeight?: number; // number value is in px
|
|
129
190
|
}
|
|
130
191
|
```
|
|
131
192
|
|
|
132
|
-
|
|
193
|
+
## Pie and Donut chart config
|
|
194
|
+
|
|
195
|
+
```ts
|
|
196
|
+
DoughnutChartConfig {
|
|
197
|
+
title?: string;
|
|
198
|
+
showTitle?: boolean;
|
|
199
|
+
titlePosition?: 'left' | 'center' | 'right';
|
|
200
|
+
top?: any;
|
|
201
|
+
bottom?: any;
|
|
202
|
+
backgroundColor?: string;
|
|
203
|
+
series?: any;
|
|
204
|
+
data: {
|
|
205
|
+
name: string;
|
|
206
|
+
value: number;
|
|
207
|
+
[key: string]: any;
|
|
208
|
+
}[];
|
|
209
|
+
|
|
210
|
+
colors?: string[];
|
|
211
|
+
|
|
212
|
+
// Doughnut
|
|
213
|
+
innerRadius?: string;
|
|
214
|
+
outerRadius?: string;
|
|
215
|
+
center?: string[];
|
|
216
|
+
// Center Text
|
|
217
|
+
showCenterText?: boolean;
|
|
218
|
+
centerLabel?: any;
|
|
219
|
+
centerValue?: string;
|
|
220
|
+
centerValueFromTotal?: boolean;
|
|
221
|
+
|
|
222
|
+
// Tooltip
|
|
223
|
+
showTooltip?: boolean;
|
|
224
|
+
showTooltipPercent?: boolean;
|
|
225
|
+
tooltipFormatter?: (params: any, config: DoughnutChartConfig) => void;
|
|
226
|
+
valueFormatter?: (value: number) => string;
|
|
227
|
+
|
|
228
|
+
// Legend
|
|
229
|
+
hideLegend?: boolean;
|
|
230
|
+
legendBottom?: number;
|
|
231
|
+
legendPosition?: 'top' | 'bottom' | 'left' | 'right' | string;
|
|
232
|
+
legendAlign?: 'left' | 'center' | 'right' | string;
|
|
233
|
+
legendDirection?: 'horizontal' | 'vertical' | string;
|
|
234
|
+
legendTextColor?: string;
|
|
235
|
+
legendFontSize?: number;
|
|
236
|
+
legendContainerWidth?: number; // 0-1
|
|
237
|
+
// Labels
|
|
238
|
+
showLabel?: boolean;
|
|
239
|
+
labelPosition?: 'inside' | 'outside' | 'center';
|
|
240
|
+
showLabelValue?: boolean;
|
|
241
|
+
showLabelPercentage?: boolean;
|
|
242
|
+
|
|
243
|
+
// Emphasis
|
|
244
|
+
emphasisScale?: boolean;
|
|
245
|
+
|
|
246
|
+
// Style
|
|
247
|
+
borderRadius?: number;
|
|
248
|
+
borderColor?: string;
|
|
249
|
+
borderWidth?: number;
|
|
250
|
+
|
|
251
|
+
enableHoverEffect?: boolean;
|
|
252
|
+
}
|
|
253
|
+
```
|
|
133
254
|
|
|
134
|
-
|
|
255
|
+
## Custom chart config
|
|
135
256
|
|
|
136
257
|
```ts
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
258
|
+
CustomChartConfig {
|
|
259
|
+
startHour?: string;
|
|
260
|
+
endHour?: string;
|
|
261
|
+
|
|
262
|
+
shiftColor?: string;
|
|
263
|
+
chartMode: 'weekly' | 'daily' | string;
|
|
264
|
+
|
|
265
|
+
yAxisData: string[];
|
|
266
|
+
categories: string[];
|
|
267
|
+
legends: TimeLineLegends;
|
|
268
|
+
|
|
269
|
+
barHeight?: number;
|
|
270
|
+
shiftHeight?: number;
|
|
271
|
+
|
|
272
|
+
data: TimelineData[];
|
|
273
|
+
hideLegendCategory?: boolean;
|
|
274
|
+
}
|
|
145
275
|
```
|
|
146
276
|
|
|
147
|
-
|
|
277
|
+
## Sankey Chart config
|
|
278
|
+
|
|
279
|
+
```ts
|
|
280
|
+
SankeyChartConfig {
|
|
281
|
+
title?: string;
|
|
282
|
+
showTitle?: boolean;
|
|
283
|
+
backgroundColor?: string;
|
|
284
|
+
|
|
285
|
+
nodes: {
|
|
286
|
+
name: string;
|
|
287
|
+
color?: string;
|
|
288
|
+
}[];
|
|
289
|
+
|
|
290
|
+
links: {
|
|
291
|
+
source: string;
|
|
292
|
+
target: string;
|
|
293
|
+
value: number;
|
|
294
|
+
}[];
|
|
295
|
+
|
|
296
|
+
nodeWidth?: number;
|
|
297
|
+
nodeGap?: number;
|
|
298
|
+
|
|
299
|
+
lineCurveness?: number;
|
|
300
|
+
|
|
301
|
+
tooltipFormatter?: (params: any) => string;
|
|
302
|
+
}
|
|
303
|
+
```
|
|
148
304
|
|
|
149
305
|
# 📊 Supported Charts
|
|
150
306
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
307
|
+
- Bar Chart
|
|
308
|
+
- Line Chart
|
|
309
|
+
- Area Chart
|
|
310
|
+
- Pie Chart
|
|
311
|
+
- Doughnut Chart
|
|
312
|
+
- Stacked Area Chart
|
|
313
|
+
- Sankey Chart
|
|
314
|
+
- Custom Charts
|
|
159
315
|
|
|
160
316
|
---
|
|
161
317
|
|
|
@@ -163,12 +319,12 @@ contextMenuList: ContextMenuListItem[]
|
|
|
163
319
|
|
|
164
320
|
Available chart themes:
|
|
165
321
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
322
|
+
- default
|
|
323
|
+
- dark
|
|
324
|
+
- vintage
|
|
325
|
+
- essos
|
|
326
|
+
- chalk
|
|
327
|
+
- roma
|
|
172
328
|
|
|
173
329
|
---
|
|
174
330
|
|