@classic-homes/charts-core 0.1.36 → 0.2.0
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/dist/{chunk-ZRG25JNX.js → chunk-JM72YHZD.js} +38 -3
- package/dist/index.cjs +299 -6
- package/dist/index.d.cts +171 -4
- package/dist/index.d.ts +171 -4
- package/dist/index.js +243 -7
- package/dist/theme/index.cjs +40 -1
- package/dist/theme/index.d.cts +33 -2
- package/dist/theme/index.d.ts +33 -2
- package/dist/theme/index.js +1 -1
- package/dist/types/index.d.cts +189 -12
- package/dist/types/index.d.ts +189 -12
- package/package.json +3 -2
package/dist/types/index.d.cts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { EChartsOption } from 'echarts';
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* Data structure types for all chart components
|
|
3
5
|
*/
|
|
@@ -14,6 +16,8 @@ interface LineSeriesData {
|
|
|
14
16
|
data: number[];
|
|
15
17
|
/** Override theme color for this series */
|
|
16
18
|
color?: string;
|
|
19
|
+
/** Per-point label text, by data index (shown on those points; templates allowed) */
|
|
20
|
+
labels?: (string | null | undefined)[];
|
|
17
21
|
}
|
|
18
22
|
interface BarChartData {
|
|
19
23
|
/** Category labels */
|
|
@@ -28,6 +32,8 @@ interface BarSeriesData {
|
|
|
28
32
|
data: number[];
|
|
29
33
|
/** Override theme color for this series */
|
|
30
34
|
color?: string;
|
|
35
|
+
/** Per-point label text, by data index (shown on those points; templates allowed) */
|
|
36
|
+
labels?: (string | null | undefined)[];
|
|
31
37
|
}
|
|
32
38
|
interface PieSliceData {
|
|
33
39
|
/** Slice name (shown in legend/tooltip) */
|
|
@@ -36,6 +42,8 @@ interface PieSliceData {
|
|
|
36
42
|
value: number;
|
|
37
43
|
/** Override theme color for this slice */
|
|
38
44
|
color?: string;
|
|
45
|
+
/** Label text shown for this slice instead of the default (templates allowed) */
|
|
46
|
+
label?: string;
|
|
39
47
|
}
|
|
40
48
|
interface AreaChartData {
|
|
41
49
|
/** X-axis category labels */
|
|
@@ -50,6 +58,8 @@ interface AreaSeriesData {
|
|
|
50
58
|
data: number[];
|
|
51
59
|
/** Override theme color for this series */
|
|
52
60
|
color?: string;
|
|
61
|
+
/** Per-point label text, by data index (shown on those points; templates allowed) */
|
|
62
|
+
labels?: (string | null | undefined)[];
|
|
53
63
|
}
|
|
54
64
|
interface ScatterChartData {
|
|
55
65
|
/** Data series */
|
|
@@ -62,6 +72,8 @@ interface ScatterSeriesData {
|
|
|
62
72
|
data: [number, number][];
|
|
63
73
|
/** Override theme color for this series */
|
|
64
74
|
color?: string;
|
|
75
|
+
/** Per-point label text, by data index (shown on those points; templates allowed) */
|
|
76
|
+
labels?: (string | null | undefined)[];
|
|
65
77
|
}
|
|
66
78
|
interface RadarChartData {
|
|
67
79
|
/** Data series */
|
|
@@ -90,6 +102,8 @@ interface FunnelSliceData {
|
|
|
90
102
|
value: number;
|
|
91
103
|
/** Override theme color for this slice */
|
|
92
104
|
color?: string;
|
|
105
|
+
/** Label text shown for this stage instead of the default (templates allowed) */
|
|
106
|
+
label?: string;
|
|
93
107
|
}
|
|
94
108
|
interface HeatmapData {
|
|
95
109
|
/** Data points as [xIndex, yIndex, value] */
|
|
@@ -108,6 +122,8 @@ interface TreemapNode {
|
|
|
108
122
|
children?: TreemapNode[];
|
|
109
123
|
/** Override theme color for this node */
|
|
110
124
|
color?: string;
|
|
125
|
+
/** Label text shown for this node instead of the default (templates allowed) */
|
|
126
|
+
label?: string;
|
|
111
127
|
}
|
|
112
128
|
interface TreemapLevel {
|
|
113
129
|
/** Level index (0 = root) */
|
|
@@ -153,6 +169,8 @@ interface SankeyNode {
|
|
|
153
169
|
name: string;
|
|
154
170
|
/** Override theme color for this node */
|
|
155
171
|
color?: string;
|
|
172
|
+
/** Label text shown for this node instead of the default (templates allowed) */
|
|
173
|
+
label?: string;
|
|
156
174
|
}
|
|
157
175
|
interface SankeyLink {
|
|
158
176
|
/** Source node name */
|
|
@@ -272,6 +290,119 @@ interface SankeyEventParams extends BaseEventParams {
|
|
|
272
290
|
target?: string;
|
|
273
291
|
}
|
|
274
292
|
|
|
293
|
+
/**
|
|
294
|
+
* Types for customising chart labels, axes, tooltips and legends
|
|
295
|
+
*/
|
|
296
|
+
/**
|
|
297
|
+
* A formatter: either an ECharts string template (e.g. `'{b}: {c}'`) or a
|
|
298
|
+
* function returning the text to show.
|
|
299
|
+
*/
|
|
300
|
+
type ChartFormatter<P> = string | ((params: P) => string);
|
|
301
|
+
/**
|
|
302
|
+
* Normalised parameters passed to label and tooltip formatter functions
|
|
303
|
+
*/
|
|
304
|
+
interface LabelFormatterParams {
|
|
305
|
+
/** Category, slice or node name */
|
|
306
|
+
name: string;
|
|
307
|
+
/** Data value ([x, y] for scatter, [x, y, value] for heatmap) */
|
|
308
|
+
value: number | number[];
|
|
309
|
+
/** Series name */
|
|
310
|
+
seriesName: string;
|
|
311
|
+
/** Series index */
|
|
312
|
+
seriesIndex: number;
|
|
313
|
+
/** Data index within the series */
|
|
314
|
+
dataIndex: number;
|
|
315
|
+
/** Share of the total, for pie, donut and funnel slices */
|
|
316
|
+
percent?: number;
|
|
317
|
+
/** Colour of the data point */
|
|
318
|
+
color?: string;
|
|
319
|
+
/** Per-point label text supplied in the chart data, if any */
|
|
320
|
+
label?: string;
|
|
321
|
+
}
|
|
322
|
+
/**
|
|
323
|
+
* Parameters passed to a tooltip formatter function, one entry per series
|
|
324
|
+
* under the pointer (a single entry for item tooltips)
|
|
325
|
+
*/
|
|
326
|
+
interface TooltipFormatterParams extends LabelFormatterParams {
|
|
327
|
+
/** HTML for the coloured dot ECharts draws before each series */
|
|
328
|
+
marker: string;
|
|
329
|
+
/** Axis value under the pointer, for axis tooltips */
|
|
330
|
+
axisValue?: string | number;
|
|
331
|
+
}
|
|
332
|
+
/**
|
|
333
|
+
* Axis customisation for charts with cartesian axes. Refers to the visual
|
|
334
|
+
* axis: `xAxisConfig` is always the horizontal one.
|
|
335
|
+
*/
|
|
336
|
+
interface AxisConfig {
|
|
337
|
+
/** Show the axis (defaults to true) */
|
|
338
|
+
show?: boolean;
|
|
339
|
+
/** Axis title */
|
|
340
|
+
name?: string;
|
|
341
|
+
/** Where the axis title sits (defaults to 'middle') */
|
|
342
|
+
nameLocation?: 'start' | 'middle' | 'end';
|
|
343
|
+
/** Distance between the axis title and the axis line, in pixels */
|
|
344
|
+
nameGap?: number;
|
|
345
|
+
/** Tick label formatter: a template such as `'{value} kg'` or a function */
|
|
346
|
+
formatter?: string | ((value: string | number, index: number) => string);
|
|
347
|
+
/** Tick label rotation in degrees */
|
|
348
|
+
rotate?: number;
|
|
349
|
+
/** Axis minimum */
|
|
350
|
+
min?: number | 'dataMin';
|
|
351
|
+
/** Axis maximum */
|
|
352
|
+
max?: number | 'dataMax';
|
|
353
|
+
/** Fixed interval between ticks (value axes) */
|
|
354
|
+
interval?: number;
|
|
355
|
+
}
|
|
356
|
+
/** Where the legend is placed */
|
|
357
|
+
type ChartLegendPosition = 'top' | 'right' | 'bottom' | 'left';
|
|
358
|
+
/**
|
|
359
|
+
* Built-in legend customisation
|
|
360
|
+
*/
|
|
361
|
+
interface ChartLegendConfig {
|
|
362
|
+
/** Legend placement (defaults to 'bottom') */
|
|
363
|
+
position?: ChartLegendPosition;
|
|
364
|
+
/** Alignment along the legend's edge (defaults to 'center') */
|
|
365
|
+
align?: 'start' | 'center' | 'end';
|
|
366
|
+
/** Item flow; defaults to horizontal for top/bottom, vertical for left/right */
|
|
367
|
+
orient?: 'horizontal' | 'vertical';
|
|
368
|
+
/** Legend marker shape */
|
|
369
|
+
icon?: 'circle' | 'rect' | 'roundRect' | 'line' | 'none';
|
|
370
|
+
/** Item text: a template such as `'{name}'` or a function of the series name */
|
|
371
|
+
formatter?: ChartFormatter<string>;
|
|
372
|
+
/** Page the legend when items overflow instead of wrapping */
|
|
373
|
+
scroll?: boolean;
|
|
374
|
+
}
|
|
375
|
+
/**
|
|
376
|
+
* One entry of a chart legend
|
|
377
|
+
*/
|
|
378
|
+
interface LegendItem {
|
|
379
|
+
/** Series, slice or indicator name */
|
|
380
|
+
name: string;
|
|
381
|
+
/** Colour the chart draws the item in */
|
|
382
|
+
color: string;
|
|
383
|
+
/** Whether the item is currently shown */
|
|
384
|
+
visible: boolean;
|
|
385
|
+
}
|
|
386
|
+
/**
|
|
387
|
+
* State and actions handed to a custom legend renderer
|
|
388
|
+
*/
|
|
389
|
+
interface LegendRenderProps {
|
|
390
|
+
/** Legend entries in chart order */
|
|
391
|
+
items: LegendItem[];
|
|
392
|
+
/** Requested legend placement */
|
|
393
|
+
position: ChartLegendPosition;
|
|
394
|
+
/** Chart title, for labelling the legend */
|
|
395
|
+
chartTitle: string;
|
|
396
|
+
/** Show or hide an item */
|
|
397
|
+
toggle: (name: string) => void;
|
|
398
|
+
/** Set an item's visibility */
|
|
399
|
+
setVisible: (name: string, visible: boolean) => void;
|
|
400
|
+
/** Show only this item */
|
|
401
|
+
showOnly: (name: string) => void;
|
|
402
|
+
/** Show every item */
|
|
403
|
+
showAll: () => void;
|
|
404
|
+
}
|
|
405
|
+
|
|
275
406
|
/**
|
|
276
407
|
* Base chart props shared across all chart components
|
|
277
408
|
*/
|
|
@@ -302,13 +433,53 @@ interface BaseChartProps {
|
|
|
302
433
|
showTooltip?: boolean;
|
|
303
434
|
/** Show grid lines (where applicable) */
|
|
304
435
|
showGrid?: boolean;
|
|
436
|
+
/**
|
|
437
|
+
* Custom tooltip content: an ECharts template or a function returning HTML.
|
|
438
|
+
* The function always receives an array (one entry for item tooltips).
|
|
439
|
+
* Escape any data you interpolate (see `escapeHtml`).
|
|
440
|
+
*/
|
|
441
|
+
tooltipFormatter?: ChartFormatter<TooltipFormatterParams[]>;
|
|
442
|
+
/** Format the values in the default tooltip, e.g. as currency */
|
|
443
|
+
tooltipValueFormatter?: (value: number) => string;
|
|
444
|
+
/**
|
|
445
|
+
* Raw ECharts option deep-merged over the generated one, for anything the
|
|
446
|
+
* props do not cover. Arrays such as `series` merge by index.
|
|
447
|
+
*/
|
|
448
|
+
option?: EChartsOption;
|
|
305
449
|
/** Custom CSS class */
|
|
306
450
|
class?: string;
|
|
307
451
|
}
|
|
452
|
+
/**
|
|
453
|
+
* Props for charts with a legend
|
|
454
|
+
*/
|
|
455
|
+
interface LegendChartProps {
|
|
456
|
+
/** Built-in legend placement and formatting */
|
|
457
|
+
legend?: ChartLegendConfig;
|
|
458
|
+
/** Called when legend items are shown or hidden, with every item's visibility */
|
|
459
|
+
onLegendChange?: (visible: Record<string, boolean>) => void;
|
|
460
|
+
}
|
|
461
|
+
/**
|
|
462
|
+
* Props for charts with data labels
|
|
463
|
+
*/
|
|
464
|
+
interface LabelChartProps {
|
|
465
|
+
/** Data label text: an ECharts template or a function */
|
|
466
|
+
labelFormatter?: ChartFormatter<LabelFormatterParams>;
|
|
467
|
+
}
|
|
468
|
+
/**
|
|
469
|
+
* Props for charts with cartesian axes
|
|
470
|
+
*/
|
|
471
|
+
interface AxisChartProps {
|
|
472
|
+
/** Horizontal axis customisation */
|
|
473
|
+
xAxisConfig?: AxisConfig;
|
|
474
|
+
/** Vertical axis customisation */
|
|
475
|
+
yAxisConfig?: AxisConfig;
|
|
476
|
+
}
|
|
308
477
|
/**
|
|
309
478
|
* Line chart specific props
|
|
310
479
|
*/
|
|
311
|
-
interface LineChartProps extends BaseChartProps {
|
|
480
|
+
interface LineChartProps extends BaseChartProps, LegendChartProps, LabelChartProps, AxisChartProps {
|
|
481
|
+
/** Show data labels */
|
|
482
|
+
showLabels?: boolean;
|
|
312
483
|
/** Chart data */
|
|
313
484
|
data: LineChartData;
|
|
314
485
|
/** Use smooth curved lines */
|
|
@@ -327,7 +498,7 @@ interface LineChartProps extends BaseChartProps {
|
|
|
327
498
|
/**
|
|
328
499
|
* Bar chart specific props
|
|
329
500
|
*/
|
|
330
|
-
interface BarChartProps extends BaseChartProps {
|
|
501
|
+
interface BarChartProps extends BaseChartProps, LegendChartProps, LabelChartProps, AxisChartProps {
|
|
331
502
|
/** Chart data */
|
|
332
503
|
data: BarChartData;
|
|
333
504
|
/** Bar orientation */
|
|
@@ -342,7 +513,7 @@ interface BarChartProps extends BaseChartProps {
|
|
|
342
513
|
/**
|
|
343
514
|
* Pie chart specific props
|
|
344
515
|
*/
|
|
345
|
-
interface PieChartProps extends BaseChartProps {
|
|
516
|
+
interface PieChartProps extends BaseChartProps, LegendChartProps, LabelChartProps {
|
|
346
517
|
/** Chart data */
|
|
347
518
|
data: PieSliceData[];
|
|
348
519
|
/** Show slice labels */
|
|
@@ -368,7 +539,9 @@ interface DonutChartProps extends Omit<PieChartProps, 'innerRadius'> {
|
|
|
368
539
|
/**
|
|
369
540
|
* Area chart specific props
|
|
370
541
|
*/
|
|
371
|
-
interface AreaChartProps extends BaseChartProps {
|
|
542
|
+
interface AreaChartProps extends BaseChartProps, LegendChartProps, LabelChartProps, AxisChartProps {
|
|
543
|
+
/** Show data labels */
|
|
544
|
+
showLabels?: boolean;
|
|
372
545
|
/** Chart data */
|
|
373
546
|
data: AreaChartData;
|
|
374
547
|
/** Use smooth curved lines */
|
|
@@ -383,7 +556,9 @@ interface AreaChartProps extends BaseChartProps {
|
|
|
383
556
|
/**
|
|
384
557
|
* Scatter chart specific props
|
|
385
558
|
*/
|
|
386
|
-
interface ScatterChartProps extends BaseChartProps {
|
|
559
|
+
interface ScatterChartProps extends BaseChartProps, LegendChartProps, LabelChartProps, AxisChartProps {
|
|
560
|
+
/** Show data labels */
|
|
561
|
+
showLabels?: boolean;
|
|
387
562
|
/** Chart data */
|
|
388
563
|
data: ScatterChartData;
|
|
389
564
|
/** Show trend/regression line */
|
|
@@ -396,7 +571,9 @@ interface ScatterChartProps extends BaseChartProps {
|
|
|
396
571
|
/**
|
|
397
572
|
* Radar chart specific props
|
|
398
573
|
*/
|
|
399
|
-
interface RadarChartProps extends BaseChartProps {
|
|
574
|
+
interface RadarChartProps extends BaseChartProps, LegendChartProps, LabelChartProps {
|
|
575
|
+
/** Show data labels */
|
|
576
|
+
showLabels?: boolean;
|
|
400
577
|
/** Chart data */
|
|
401
578
|
data: RadarChartData;
|
|
402
579
|
/** Radar indicators/dimensions */
|
|
@@ -407,7 +584,7 @@ interface RadarChartProps extends BaseChartProps {
|
|
|
407
584
|
/**
|
|
408
585
|
* Funnel chart specific props
|
|
409
586
|
*/
|
|
410
|
-
interface FunnelChartProps extends BaseChartProps {
|
|
587
|
+
interface FunnelChartProps extends BaseChartProps, LegendChartProps, LabelChartProps {
|
|
411
588
|
/** Chart data */
|
|
412
589
|
data: FunnelSliceData[];
|
|
413
590
|
/** Sort order */
|
|
@@ -439,7 +616,7 @@ interface GaugeChartProps extends BaseChartProps {
|
|
|
439
616
|
/**
|
|
440
617
|
* Heatmap chart specific props
|
|
441
618
|
*/
|
|
442
|
-
interface HeatmapChartProps extends BaseChartProps {
|
|
619
|
+
interface HeatmapChartProps extends BaseChartProps, LabelChartProps, AxisChartProps {
|
|
443
620
|
/** Chart data */
|
|
444
621
|
data: HeatmapData;
|
|
445
622
|
/** X-axis labels */
|
|
@@ -454,7 +631,7 @@ interface HeatmapChartProps extends BaseChartProps {
|
|
|
454
631
|
/**
|
|
455
632
|
* Treemap chart specific props
|
|
456
633
|
*/
|
|
457
|
-
interface TreemapChartProps extends BaseChartProps {
|
|
634
|
+
interface TreemapChartProps extends BaseChartProps, LabelChartProps {
|
|
458
635
|
/** Hierarchical data */
|
|
459
636
|
data: TreemapNode[];
|
|
460
637
|
/** Level configurations */
|
|
@@ -465,7 +642,7 @@ interface TreemapChartProps extends BaseChartProps {
|
|
|
465
642
|
/**
|
|
466
643
|
* Candlestick chart specific props
|
|
467
644
|
*/
|
|
468
|
-
interface CandlestickChartProps extends BaseChartProps {
|
|
645
|
+
interface CandlestickChartProps extends BaseChartProps, AxisChartProps {
|
|
469
646
|
/** Chart data */
|
|
470
647
|
data: CandlestickData;
|
|
471
648
|
/** Show volume bars */
|
|
@@ -476,7 +653,7 @@ interface CandlestickChartProps extends BaseChartProps {
|
|
|
476
653
|
/**
|
|
477
654
|
* Sankey chart specific props
|
|
478
655
|
*/
|
|
479
|
-
interface SankeyChartProps extends BaseChartProps {
|
|
656
|
+
interface SankeyChartProps extends BaseChartProps, LabelChartProps {
|
|
480
657
|
/** Chart data with nodes and links */
|
|
481
658
|
data: SankeyData;
|
|
482
659
|
/** Flow orientation */
|
|
@@ -485,4 +662,4 @@ interface SankeyChartProps extends BaseChartProps {
|
|
|
485
662
|
onClick?: (params: SankeyEventParams) => void;
|
|
486
663
|
}
|
|
487
664
|
|
|
488
|
-
export type { AreaChartData, AreaChartProps, AreaSeriesData, BarChartData, BarChartProps, BarSeriesData, BaseChartProps, BaseEventParams, CandlestickChartProps, CandlestickData, CandlestickEventParams, CandlestickItem, DataPointEventParams, DonutChartProps, FunnelChartProps, FunnelSliceData, GaugeChartProps, HeatmapChartProps, HeatmapData, HeatmapEventParams, LineChartData, LineChartProps, LineSeriesData, PieChartProps, PieSliceData, RadarChartData, RadarChartProps, RadarIndicator, RadarSeriesData, SankeyChartProps, SankeyData, SankeyEventParams, SankeyLink, SankeyNode, ScatterChartData, ScatterChartProps, ScatterSeriesData, SliceEventParams, TreemapChartProps, TreemapEventParams, TreemapLevel, TreemapNode };
|
|
665
|
+
export type { AreaChartData, AreaChartProps, AreaSeriesData, AxisChartProps, AxisConfig, BarChartData, BarChartProps, BarSeriesData, BaseChartProps, BaseEventParams, CandlestickChartProps, CandlestickData, CandlestickEventParams, CandlestickItem, ChartFormatter, ChartLegendConfig, ChartLegendPosition, DataPointEventParams, DonutChartProps, FunnelChartProps, FunnelSliceData, GaugeChartProps, HeatmapChartProps, HeatmapData, HeatmapEventParams, LabelChartProps, LabelFormatterParams, LegendChartProps, LegendItem, LegendRenderProps, LineChartData, LineChartProps, LineSeriesData, PieChartProps, PieSliceData, RadarChartData, RadarChartProps, RadarIndicator, RadarSeriesData, SankeyChartProps, SankeyData, SankeyEventParams, SankeyLink, SankeyNode, ScatterChartData, ScatterChartProps, ScatterSeriesData, SliceEventParams, TooltipFormatterParams, TreemapChartProps, TreemapEventParams, TreemapLevel, TreemapNode };
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { EChartsOption } from 'echarts';
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* Data structure types for all chart components
|
|
3
5
|
*/
|
|
@@ -14,6 +16,8 @@ interface LineSeriesData {
|
|
|
14
16
|
data: number[];
|
|
15
17
|
/** Override theme color for this series */
|
|
16
18
|
color?: string;
|
|
19
|
+
/** Per-point label text, by data index (shown on those points; templates allowed) */
|
|
20
|
+
labels?: (string | null | undefined)[];
|
|
17
21
|
}
|
|
18
22
|
interface BarChartData {
|
|
19
23
|
/** Category labels */
|
|
@@ -28,6 +32,8 @@ interface BarSeriesData {
|
|
|
28
32
|
data: number[];
|
|
29
33
|
/** Override theme color for this series */
|
|
30
34
|
color?: string;
|
|
35
|
+
/** Per-point label text, by data index (shown on those points; templates allowed) */
|
|
36
|
+
labels?: (string | null | undefined)[];
|
|
31
37
|
}
|
|
32
38
|
interface PieSliceData {
|
|
33
39
|
/** Slice name (shown in legend/tooltip) */
|
|
@@ -36,6 +42,8 @@ interface PieSliceData {
|
|
|
36
42
|
value: number;
|
|
37
43
|
/** Override theme color for this slice */
|
|
38
44
|
color?: string;
|
|
45
|
+
/** Label text shown for this slice instead of the default (templates allowed) */
|
|
46
|
+
label?: string;
|
|
39
47
|
}
|
|
40
48
|
interface AreaChartData {
|
|
41
49
|
/** X-axis category labels */
|
|
@@ -50,6 +58,8 @@ interface AreaSeriesData {
|
|
|
50
58
|
data: number[];
|
|
51
59
|
/** Override theme color for this series */
|
|
52
60
|
color?: string;
|
|
61
|
+
/** Per-point label text, by data index (shown on those points; templates allowed) */
|
|
62
|
+
labels?: (string | null | undefined)[];
|
|
53
63
|
}
|
|
54
64
|
interface ScatterChartData {
|
|
55
65
|
/** Data series */
|
|
@@ -62,6 +72,8 @@ interface ScatterSeriesData {
|
|
|
62
72
|
data: [number, number][];
|
|
63
73
|
/** Override theme color for this series */
|
|
64
74
|
color?: string;
|
|
75
|
+
/** Per-point label text, by data index (shown on those points; templates allowed) */
|
|
76
|
+
labels?: (string | null | undefined)[];
|
|
65
77
|
}
|
|
66
78
|
interface RadarChartData {
|
|
67
79
|
/** Data series */
|
|
@@ -90,6 +102,8 @@ interface FunnelSliceData {
|
|
|
90
102
|
value: number;
|
|
91
103
|
/** Override theme color for this slice */
|
|
92
104
|
color?: string;
|
|
105
|
+
/** Label text shown for this stage instead of the default (templates allowed) */
|
|
106
|
+
label?: string;
|
|
93
107
|
}
|
|
94
108
|
interface HeatmapData {
|
|
95
109
|
/** Data points as [xIndex, yIndex, value] */
|
|
@@ -108,6 +122,8 @@ interface TreemapNode {
|
|
|
108
122
|
children?: TreemapNode[];
|
|
109
123
|
/** Override theme color for this node */
|
|
110
124
|
color?: string;
|
|
125
|
+
/** Label text shown for this node instead of the default (templates allowed) */
|
|
126
|
+
label?: string;
|
|
111
127
|
}
|
|
112
128
|
interface TreemapLevel {
|
|
113
129
|
/** Level index (0 = root) */
|
|
@@ -153,6 +169,8 @@ interface SankeyNode {
|
|
|
153
169
|
name: string;
|
|
154
170
|
/** Override theme color for this node */
|
|
155
171
|
color?: string;
|
|
172
|
+
/** Label text shown for this node instead of the default (templates allowed) */
|
|
173
|
+
label?: string;
|
|
156
174
|
}
|
|
157
175
|
interface SankeyLink {
|
|
158
176
|
/** Source node name */
|
|
@@ -272,6 +290,119 @@ interface SankeyEventParams extends BaseEventParams {
|
|
|
272
290
|
target?: string;
|
|
273
291
|
}
|
|
274
292
|
|
|
293
|
+
/**
|
|
294
|
+
* Types for customising chart labels, axes, tooltips and legends
|
|
295
|
+
*/
|
|
296
|
+
/**
|
|
297
|
+
* A formatter: either an ECharts string template (e.g. `'{b}: {c}'`) or a
|
|
298
|
+
* function returning the text to show.
|
|
299
|
+
*/
|
|
300
|
+
type ChartFormatter<P> = string | ((params: P) => string);
|
|
301
|
+
/**
|
|
302
|
+
* Normalised parameters passed to label and tooltip formatter functions
|
|
303
|
+
*/
|
|
304
|
+
interface LabelFormatterParams {
|
|
305
|
+
/** Category, slice or node name */
|
|
306
|
+
name: string;
|
|
307
|
+
/** Data value ([x, y] for scatter, [x, y, value] for heatmap) */
|
|
308
|
+
value: number | number[];
|
|
309
|
+
/** Series name */
|
|
310
|
+
seriesName: string;
|
|
311
|
+
/** Series index */
|
|
312
|
+
seriesIndex: number;
|
|
313
|
+
/** Data index within the series */
|
|
314
|
+
dataIndex: number;
|
|
315
|
+
/** Share of the total, for pie, donut and funnel slices */
|
|
316
|
+
percent?: number;
|
|
317
|
+
/** Colour of the data point */
|
|
318
|
+
color?: string;
|
|
319
|
+
/** Per-point label text supplied in the chart data, if any */
|
|
320
|
+
label?: string;
|
|
321
|
+
}
|
|
322
|
+
/**
|
|
323
|
+
* Parameters passed to a tooltip formatter function, one entry per series
|
|
324
|
+
* under the pointer (a single entry for item tooltips)
|
|
325
|
+
*/
|
|
326
|
+
interface TooltipFormatterParams extends LabelFormatterParams {
|
|
327
|
+
/** HTML for the coloured dot ECharts draws before each series */
|
|
328
|
+
marker: string;
|
|
329
|
+
/** Axis value under the pointer, for axis tooltips */
|
|
330
|
+
axisValue?: string | number;
|
|
331
|
+
}
|
|
332
|
+
/**
|
|
333
|
+
* Axis customisation for charts with cartesian axes. Refers to the visual
|
|
334
|
+
* axis: `xAxisConfig` is always the horizontal one.
|
|
335
|
+
*/
|
|
336
|
+
interface AxisConfig {
|
|
337
|
+
/** Show the axis (defaults to true) */
|
|
338
|
+
show?: boolean;
|
|
339
|
+
/** Axis title */
|
|
340
|
+
name?: string;
|
|
341
|
+
/** Where the axis title sits (defaults to 'middle') */
|
|
342
|
+
nameLocation?: 'start' | 'middle' | 'end';
|
|
343
|
+
/** Distance between the axis title and the axis line, in pixels */
|
|
344
|
+
nameGap?: number;
|
|
345
|
+
/** Tick label formatter: a template such as `'{value} kg'` or a function */
|
|
346
|
+
formatter?: string | ((value: string | number, index: number) => string);
|
|
347
|
+
/** Tick label rotation in degrees */
|
|
348
|
+
rotate?: number;
|
|
349
|
+
/** Axis minimum */
|
|
350
|
+
min?: number | 'dataMin';
|
|
351
|
+
/** Axis maximum */
|
|
352
|
+
max?: number | 'dataMax';
|
|
353
|
+
/** Fixed interval between ticks (value axes) */
|
|
354
|
+
interval?: number;
|
|
355
|
+
}
|
|
356
|
+
/** Where the legend is placed */
|
|
357
|
+
type ChartLegendPosition = 'top' | 'right' | 'bottom' | 'left';
|
|
358
|
+
/**
|
|
359
|
+
* Built-in legend customisation
|
|
360
|
+
*/
|
|
361
|
+
interface ChartLegendConfig {
|
|
362
|
+
/** Legend placement (defaults to 'bottom') */
|
|
363
|
+
position?: ChartLegendPosition;
|
|
364
|
+
/** Alignment along the legend's edge (defaults to 'center') */
|
|
365
|
+
align?: 'start' | 'center' | 'end';
|
|
366
|
+
/** Item flow; defaults to horizontal for top/bottom, vertical for left/right */
|
|
367
|
+
orient?: 'horizontal' | 'vertical';
|
|
368
|
+
/** Legend marker shape */
|
|
369
|
+
icon?: 'circle' | 'rect' | 'roundRect' | 'line' | 'none';
|
|
370
|
+
/** Item text: a template such as `'{name}'` or a function of the series name */
|
|
371
|
+
formatter?: ChartFormatter<string>;
|
|
372
|
+
/** Page the legend when items overflow instead of wrapping */
|
|
373
|
+
scroll?: boolean;
|
|
374
|
+
}
|
|
375
|
+
/**
|
|
376
|
+
* One entry of a chart legend
|
|
377
|
+
*/
|
|
378
|
+
interface LegendItem {
|
|
379
|
+
/** Series, slice or indicator name */
|
|
380
|
+
name: string;
|
|
381
|
+
/** Colour the chart draws the item in */
|
|
382
|
+
color: string;
|
|
383
|
+
/** Whether the item is currently shown */
|
|
384
|
+
visible: boolean;
|
|
385
|
+
}
|
|
386
|
+
/**
|
|
387
|
+
* State and actions handed to a custom legend renderer
|
|
388
|
+
*/
|
|
389
|
+
interface LegendRenderProps {
|
|
390
|
+
/** Legend entries in chart order */
|
|
391
|
+
items: LegendItem[];
|
|
392
|
+
/** Requested legend placement */
|
|
393
|
+
position: ChartLegendPosition;
|
|
394
|
+
/** Chart title, for labelling the legend */
|
|
395
|
+
chartTitle: string;
|
|
396
|
+
/** Show or hide an item */
|
|
397
|
+
toggle: (name: string) => void;
|
|
398
|
+
/** Set an item's visibility */
|
|
399
|
+
setVisible: (name: string, visible: boolean) => void;
|
|
400
|
+
/** Show only this item */
|
|
401
|
+
showOnly: (name: string) => void;
|
|
402
|
+
/** Show every item */
|
|
403
|
+
showAll: () => void;
|
|
404
|
+
}
|
|
405
|
+
|
|
275
406
|
/**
|
|
276
407
|
* Base chart props shared across all chart components
|
|
277
408
|
*/
|
|
@@ -302,13 +433,53 @@ interface BaseChartProps {
|
|
|
302
433
|
showTooltip?: boolean;
|
|
303
434
|
/** Show grid lines (where applicable) */
|
|
304
435
|
showGrid?: boolean;
|
|
436
|
+
/**
|
|
437
|
+
* Custom tooltip content: an ECharts template or a function returning HTML.
|
|
438
|
+
* The function always receives an array (one entry for item tooltips).
|
|
439
|
+
* Escape any data you interpolate (see `escapeHtml`).
|
|
440
|
+
*/
|
|
441
|
+
tooltipFormatter?: ChartFormatter<TooltipFormatterParams[]>;
|
|
442
|
+
/** Format the values in the default tooltip, e.g. as currency */
|
|
443
|
+
tooltipValueFormatter?: (value: number) => string;
|
|
444
|
+
/**
|
|
445
|
+
* Raw ECharts option deep-merged over the generated one, for anything the
|
|
446
|
+
* props do not cover. Arrays such as `series` merge by index.
|
|
447
|
+
*/
|
|
448
|
+
option?: EChartsOption;
|
|
305
449
|
/** Custom CSS class */
|
|
306
450
|
class?: string;
|
|
307
451
|
}
|
|
452
|
+
/**
|
|
453
|
+
* Props for charts with a legend
|
|
454
|
+
*/
|
|
455
|
+
interface LegendChartProps {
|
|
456
|
+
/** Built-in legend placement and formatting */
|
|
457
|
+
legend?: ChartLegendConfig;
|
|
458
|
+
/** Called when legend items are shown or hidden, with every item's visibility */
|
|
459
|
+
onLegendChange?: (visible: Record<string, boolean>) => void;
|
|
460
|
+
}
|
|
461
|
+
/**
|
|
462
|
+
* Props for charts with data labels
|
|
463
|
+
*/
|
|
464
|
+
interface LabelChartProps {
|
|
465
|
+
/** Data label text: an ECharts template or a function */
|
|
466
|
+
labelFormatter?: ChartFormatter<LabelFormatterParams>;
|
|
467
|
+
}
|
|
468
|
+
/**
|
|
469
|
+
* Props for charts with cartesian axes
|
|
470
|
+
*/
|
|
471
|
+
interface AxisChartProps {
|
|
472
|
+
/** Horizontal axis customisation */
|
|
473
|
+
xAxisConfig?: AxisConfig;
|
|
474
|
+
/** Vertical axis customisation */
|
|
475
|
+
yAxisConfig?: AxisConfig;
|
|
476
|
+
}
|
|
308
477
|
/**
|
|
309
478
|
* Line chart specific props
|
|
310
479
|
*/
|
|
311
|
-
interface LineChartProps extends BaseChartProps {
|
|
480
|
+
interface LineChartProps extends BaseChartProps, LegendChartProps, LabelChartProps, AxisChartProps {
|
|
481
|
+
/** Show data labels */
|
|
482
|
+
showLabels?: boolean;
|
|
312
483
|
/** Chart data */
|
|
313
484
|
data: LineChartData;
|
|
314
485
|
/** Use smooth curved lines */
|
|
@@ -327,7 +498,7 @@ interface LineChartProps extends BaseChartProps {
|
|
|
327
498
|
/**
|
|
328
499
|
* Bar chart specific props
|
|
329
500
|
*/
|
|
330
|
-
interface BarChartProps extends BaseChartProps {
|
|
501
|
+
interface BarChartProps extends BaseChartProps, LegendChartProps, LabelChartProps, AxisChartProps {
|
|
331
502
|
/** Chart data */
|
|
332
503
|
data: BarChartData;
|
|
333
504
|
/** Bar orientation */
|
|
@@ -342,7 +513,7 @@ interface BarChartProps extends BaseChartProps {
|
|
|
342
513
|
/**
|
|
343
514
|
* Pie chart specific props
|
|
344
515
|
*/
|
|
345
|
-
interface PieChartProps extends BaseChartProps {
|
|
516
|
+
interface PieChartProps extends BaseChartProps, LegendChartProps, LabelChartProps {
|
|
346
517
|
/** Chart data */
|
|
347
518
|
data: PieSliceData[];
|
|
348
519
|
/** Show slice labels */
|
|
@@ -368,7 +539,9 @@ interface DonutChartProps extends Omit<PieChartProps, 'innerRadius'> {
|
|
|
368
539
|
/**
|
|
369
540
|
* Area chart specific props
|
|
370
541
|
*/
|
|
371
|
-
interface AreaChartProps extends BaseChartProps {
|
|
542
|
+
interface AreaChartProps extends BaseChartProps, LegendChartProps, LabelChartProps, AxisChartProps {
|
|
543
|
+
/** Show data labels */
|
|
544
|
+
showLabels?: boolean;
|
|
372
545
|
/** Chart data */
|
|
373
546
|
data: AreaChartData;
|
|
374
547
|
/** Use smooth curved lines */
|
|
@@ -383,7 +556,9 @@ interface AreaChartProps extends BaseChartProps {
|
|
|
383
556
|
/**
|
|
384
557
|
* Scatter chart specific props
|
|
385
558
|
*/
|
|
386
|
-
interface ScatterChartProps extends BaseChartProps {
|
|
559
|
+
interface ScatterChartProps extends BaseChartProps, LegendChartProps, LabelChartProps, AxisChartProps {
|
|
560
|
+
/** Show data labels */
|
|
561
|
+
showLabels?: boolean;
|
|
387
562
|
/** Chart data */
|
|
388
563
|
data: ScatterChartData;
|
|
389
564
|
/** Show trend/regression line */
|
|
@@ -396,7 +571,9 @@ interface ScatterChartProps extends BaseChartProps {
|
|
|
396
571
|
/**
|
|
397
572
|
* Radar chart specific props
|
|
398
573
|
*/
|
|
399
|
-
interface RadarChartProps extends BaseChartProps {
|
|
574
|
+
interface RadarChartProps extends BaseChartProps, LegendChartProps, LabelChartProps {
|
|
575
|
+
/** Show data labels */
|
|
576
|
+
showLabels?: boolean;
|
|
400
577
|
/** Chart data */
|
|
401
578
|
data: RadarChartData;
|
|
402
579
|
/** Radar indicators/dimensions */
|
|
@@ -407,7 +584,7 @@ interface RadarChartProps extends BaseChartProps {
|
|
|
407
584
|
/**
|
|
408
585
|
* Funnel chart specific props
|
|
409
586
|
*/
|
|
410
|
-
interface FunnelChartProps extends BaseChartProps {
|
|
587
|
+
interface FunnelChartProps extends BaseChartProps, LegendChartProps, LabelChartProps {
|
|
411
588
|
/** Chart data */
|
|
412
589
|
data: FunnelSliceData[];
|
|
413
590
|
/** Sort order */
|
|
@@ -439,7 +616,7 @@ interface GaugeChartProps extends BaseChartProps {
|
|
|
439
616
|
/**
|
|
440
617
|
* Heatmap chart specific props
|
|
441
618
|
*/
|
|
442
|
-
interface HeatmapChartProps extends BaseChartProps {
|
|
619
|
+
interface HeatmapChartProps extends BaseChartProps, LabelChartProps, AxisChartProps {
|
|
443
620
|
/** Chart data */
|
|
444
621
|
data: HeatmapData;
|
|
445
622
|
/** X-axis labels */
|
|
@@ -454,7 +631,7 @@ interface HeatmapChartProps extends BaseChartProps {
|
|
|
454
631
|
/**
|
|
455
632
|
* Treemap chart specific props
|
|
456
633
|
*/
|
|
457
|
-
interface TreemapChartProps extends BaseChartProps {
|
|
634
|
+
interface TreemapChartProps extends BaseChartProps, LabelChartProps {
|
|
458
635
|
/** Hierarchical data */
|
|
459
636
|
data: TreemapNode[];
|
|
460
637
|
/** Level configurations */
|
|
@@ -465,7 +642,7 @@ interface TreemapChartProps extends BaseChartProps {
|
|
|
465
642
|
/**
|
|
466
643
|
* Candlestick chart specific props
|
|
467
644
|
*/
|
|
468
|
-
interface CandlestickChartProps extends BaseChartProps {
|
|
645
|
+
interface CandlestickChartProps extends BaseChartProps, AxisChartProps {
|
|
469
646
|
/** Chart data */
|
|
470
647
|
data: CandlestickData;
|
|
471
648
|
/** Show volume bars */
|
|
@@ -476,7 +653,7 @@ interface CandlestickChartProps extends BaseChartProps {
|
|
|
476
653
|
/**
|
|
477
654
|
* Sankey chart specific props
|
|
478
655
|
*/
|
|
479
|
-
interface SankeyChartProps extends BaseChartProps {
|
|
656
|
+
interface SankeyChartProps extends BaseChartProps, LabelChartProps {
|
|
480
657
|
/** Chart data with nodes and links */
|
|
481
658
|
data: SankeyData;
|
|
482
659
|
/** Flow orientation */
|
|
@@ -485,4 +662,4 @@ interface SankeyChartProps extends BaseChartProps {
|
|
|
485
662
|
onClick?: (params: SankeyEventParams) => void;
|
|
486
663
|
}
|
|
487
664
|
|
|
488
|
-
export type { AreaChartData, AreaChartProps, AreaSeriesData, BarChartData, BarChartProps, BarSeriesData, BaseChartProps, BaseEventParams, CandlestickChartProps, CandlestickData, CandlestickEventParams, CandlestickItem, DataPointEventParams, DonutChartProps, FunnelChartProps, FunnelSliceData, GaugeChartProps, HeatmapChartProps, HeatmapData, HeatmapEventParams, LineChartData, LineChartProps, LineSeriesData, PieChartProps, PieSliceData, RadarChartData, RadarChartProps, RadarIndicator, RadarSeriesData, SankeyChartProps, SankeyData, SankeyEventParams, SankeyLink, SankeyNode, ScatterChartData, ScatterChartProps, ScatterSeriesData, SliceEventParams, TreemapChartProps, TreemapEventParams, TreemapLevel, TreemapNode };
|
|
665
|
+
export type { AreaChartData, AreaChartProps, AreaSeriesData, AxisChartProps, AxisConfig, BarChartData, BarChartProps, BarSeriesData, BaseChartProps, BaseEventParams, CandlestickChartProps, CandlestickData, CandlestickEventParams, CandlestickItem, ChartFormatter, ChartLegendConfig, ChartLegendPosition, DataPointEventParams, DonutChartProps, FunnelChartProps, FunnelSliceData, GaugeChartProps, HeatmapChartProps, HeatmapData, HeatmapEventParams, LabelChartProps, LabelFormatterParams, LegendChartProps, LegendItem, LegendRenderProps, LineChartData, LineChartProps, LineSeriesData, PieChartProps, PieSliceData, RadarChartData, RadarChartProps, RadarIndicator, RadarSeriesData, SankeyChartProps, SankeyData, SankeyEventParams, SankeyLink, SankeyNode, ScatterChartData, ScatterChartProps, ScatterSeriesData, SliceEventParams, TooltipFormatterParams, TreemapChartProps, TreemapEventParams, TreemapLevel, TreemapNode };
|