@wavemaker/react-native-echarts 1.0.0-dev.4 → 1.0.0-dev.8
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 +211 -39
- package/area/area-chart.d.ts +1 -1
- package/area/area-chart.d.ts.map +1 -1
- package/area/area-chart.js +48 -23
- package/area/area-chart.props.d.ts +4 -0
- package/area/area-chart.props.d.ts.map +1 -1
- package/area/index.d.ts +1 -1
- package/area/index.d.ts.map +1 -1
- package/bubble/bubble-chart.d.ts.map +1 -1
- package/bubble/bubble-chart.js +50 -31
- package/cartesian/tooltip/axis-tooltip-presets.d.ts +5 -0
- package/cartesian/tooltip/axis-tooltip-presets.d.ts.map +1 -0
- package/cartesian/tooltip/axis-tooltip-presets.js +46 -0
- package/cartesian/tooltip/axis-tooltip.types.d.ts +38 -0
- package/cartesian/tooltip/axis-tooltip.types.d.ts.map +1 -0
- package/cartesian/tooltip/axis-tooltip.types.js +4 -0
- package/cartesian/tooltip/axis-tooltip.utils.d.ts +10 -0
- package/cartesian/tooltip/axis-tooltip.utils.d.ts.map +1 -0
- package/cartesian/tooltip/axis-tooltip.utils.js +121 -0
- package/cartesian/tooltip/default-axis-tooltip.d.ts +9 -0
- package/cartesian/tooltip/default-axis-tooltip.d.ts.map +1 -0
- package/cartesian/tooltip/default-axis-tooltip.js +53 -0
- package/cartesian/tooltip/index.d.ts +7 -0
- package/cartesian/tooltip/index.d.ts.map +1 -0
- package/cartesian/tooltip/index.js +4 -0
- package/cartesian/tooltip/use-axis-tooltip.d.ts +38 -0
- package/cartesian/tooltip/use-axis-tooltip.d.ts.map +1 -0
- package/cartesian/tooltip/use-axis-tooltip.js +54 -0
- package/column/column-chart.d.ts.map +1 -1
- package/column/column-chart.js +73 -20
- package/geo/geo-chart.d.ts.map +1 -1
- package/geo/geo-chart.js +56 -24
- package/geo/geo-chart.props.d.ts +11 -5
- package/geo/geo-chart.props.d.ts.map +1 -1
- package/geo/index.d.ts +1 -0
- package/geo/index.d.ts.map +1 -1
- package/geo/index.js +1 -0
- package/geo/tooltip/default-geo-tooltip.d.ts +6 -0
- package/geo/tooltip/default-geo-tooltip.d.ts.map +1 -0
- package/geo/tooltip/default-geo-tooltip.js +47 -0
- package/geo/tooltip/geo-item-tooltip-presets.d.ts +5 -0
- package/geo/tooltip/geo-item-tooltip-presets.d.ts.map +1 -0
- package/geo/tooltip/geo-item-tooltip-presets.js +35 -0
- package/geo/tooltip/geo-item-tooltip.types.d.ts +19 -0
- package/geo/tooltip/geo-item-tooltip.types.d.ts.map +1 -0
- package/geo/tooltip/geo-item-tooltip.types.js +3 -0
- package/geo/tooltip/geo-item-tooltip.utils.d.ts +14 -0
- package/geo/tooltip/geo-item-tooltip.utils.d.ts.map +1 -0
- package/geo/tooltip/geo-item-tooltip.utils.js +220 -0
- package/geo/tooltip/index.d.ts +7 -0
- package/geo/tooltip/index.d.ts.map +1 -0
- package/geo/tooltip/index.js +4 -0
- package/geo/tooltip/use-geo-item-tooltip.d.ts +26 -0
- package/geo/tooltip/use-geo-item-tooltip.d.ts.map +1 -0
- package/geo/tooltip/use-geo-item-tooltip.js +59 -0
- package/geo/us-chart.js +1 -1
- package/geo/us-states.json +54 -0
- package/geo/world.json +1 -0
- package/index.d.ts +2 -0
- package/index.d.ts.map +1 -1
- package/index.js +2 -0
- package/line/index.d.ts +1 -1
- package/line/index.d.ts.map +1 -1
- package/line/line-chart.d.ts +1 -1
- package/line/line-chart.d.ts.map +1 -1
- package/line/line-chart.props.d.ts +5 -0
- package/line/line-chart.props.d.ts.map +1 -1
- package/package.json +7 -4
- package/pie/index.d.ts +1 -0
- package/pie/index.d.ts.map +1 -1
- package/pie/index.js +1 -0
- package/pie/pie-chart.d.ts.map +1 -1
- package/pie/pie-chart.js +59 -36
- package/pie/pie-chart.props.d.ts +12 -6
- package/pie/pie-chart.props.d.ts.map +1 -1
- package/pie/tooltip/default-pie-tooltip.d.ts +5 -0
- package/pie/tooltip/default-pie-tooltip.d.ts.map +1 -0
- package/pie/tooltip/default-pie-tooltip.js +57 -0
- package/pie/tooltip/index.d.ts +7 -0
- package/pie/tooltip/index.d.ts.map +1 -0
- package/pie/tooltip/index.js +4 -0
- package/pie/tooltip/pie-item-tooltip-presets.d.ts +5 -0
- package/pie/tooltip/pie-item-tooltip-presets.d.ts.map +1 -0
- package/pie/tooltip/pie-item-tooltip-presets.js +39 -0
- package/pie/tooltip/pie-item-tooltip.types.d.ts +28 -0
- package/pie/tooltip/pie-item-tooltip.types.d.ts.map +1 -0
- package/pie/tooltip/pie-item-tooltip.types.js +3 -0
- package/pie/tooltip/pie-item-tooltip.utils.d.ts +9 -0
- package/pie/tooltip/pie-item-tooltip.utils.d.ts.map +1 -0
- package/pie/tooltip/pie-item-tooltip.utils.js +139 -0
- package/pie/tooltip/use-pie-item-tooltip.d.ts +24 -0
- package/pie/tooltip/use-pie-item-tooltip.d.ts.map +1 -0
- package/pie/tooltip/use-pie-item-tooltip.js +45 -0
- package/props/cartesian.d.ts +18 -2
- package/props/cartesian.d.ts.map +1 -1
- package/radar/index.d.ts +1 -0
- package/radar/index.d.ts.map +1 -1
- package/radar/index.js +1 -0
- package/radar/radar-chart.d.ts.map +1 -1
- package/radar/radar-chart.js +52 -10
- package/radar/radar-chart.props.d.ts +13 -0
- package/radar/radar-chart.props.d.ts.map +1 -1
- package/radar/tooltip/default-radar-tooltip.d.ts +6 -0
- package/radar/tooltip/default-radar-tooltip.d.ts.map +1 -0
- package/radar/tooltip/default-radar-tooltip.js +47 -0
- package/radar/tooltip/index.d.ts +7 -0
- package/radar/tooltip/index.d.ts.map +1 -0
- package/radar/tooltip/index.js +4 -0
- package/radar/tooltip/radar-item-tooltip-presets.d.ts +5 -0
- package/radar/tooltip/radar-item-tooltip-presets.d.ts.map +1 -0
- package/radar/tooltip/radar-item-tooltip-presets.js +50 -0
- package/radar/tooltip/radar-item-tooltip.types.d.ts +28 -0
- package/radar/tooltip/radar-item-tooltip.types.d.ts.map +1 -0
- package/radar/tooltip/radar-item-tooltip.types.js +3 -0
- package/radar/tooltip/radar-item-tooltip.utils.d.ts +9 -0
- package/radar/tooltip/radar-item-tooltip.utils.d.ts.map +1 -0
- package/radar/tooltip/radar-item-tooltip.utils.js +77 -0
- package/radar/tooltip/use-radar-item-tooltip.d.ts +22 -0
- package/radar/tooltip/use-radar-item-tooltip.d.ts.map +1 -0
- package/radar/tooltip/use-radar-item-tooltip.js +43 -0
- package/radial/index.d.ts +1 -0
- package/radial/index.d.ts.map +1 -1
- package/radial/index.js +1 -0
- package/radial/radial-chart.d.ts.map +1 -1
- package/radial/radial-chart.js +42 -10
- package/radial/radial-chart.props.d.ts +14 -1
- package/radial/radial-chart.props.d.ts.map +1 -1
- package/radial/tooltip/default-radial-tooltip.d.ts +6 -0
- package/radial/tooltip/default-radial-tooltip.d.ts.map +1 -0
- package/radial/tooltip/default-radial-tooltip.js +52 -0
- package/radial/tooltip/index.d.ts +7 -0
- package/radial/tooltip/index.d.ts.map +1 -0
- package/radial/tooltip/index.js +4 -0
- package/radial/tooltip/radial-item-tooltip-presets.d.ts +5 -0
- package/radial/tooltip/radial-item-tooltip-presets.d.ts.map +1 -0
- package/radial/tooltip/radial-item-tooltip-presets.js +43 -0
- package/radial/tooltip/radial-item-tooltip.types.d.ts +23 -0
- package/radial/tooltip/radial-item-tooltip.types.d.ts.map +1 -0
- package/radial/tooltip/radial-item-tooltip.types.js +3 -0
- package/radial/tooltip/radial-item-tooltip.utils.d.ts +9 -0
- package/radial/tooltip/radial-item-tooltip.utils.d.ts.map +1 -0
- package/radial/tooltip/radial-item-tooltip.utils.js +122 -0
- package/radial/tooltip/use-radial-item-tooltip.d.ts +22 -0
- package/radial/tooltip/use-radial-item-tooltip.d.ts.map +1 -0
- package/radial/tooltip/use-radial-item-tooltip.js +43 -0
- package/scatter/index.d.ts +1 -0
- package/scatter/index.d.ts.map +1 -1
- package/scatter/index.js +1 -0
- package/scatter/scatter-chart.d.ts.map +1 -1
- package/scatter/scatter-chart.js +46 -12
- package/scatter/scatter-chart.props.d.ts +7 -1
- package/scatter/scatter-chart.props.d.ts.map +1 -1
- package/scatter/tooltip/default-scatter-tooltip.d.ts +8 -0
- package/scatter/tooltip/default-scatter-tooltip.d.ts.map +1 -0
- package/scatter/tooltip/default-scatter-tooltip.js +57 -0
- package/scatter/tooltip/index.d.ts +7 -0
- package/scatter/tooltip/index.d.ts.map +1 -0
- package/scatter/tooltip/index.js +4 -0
- package/scatter/tooltip/scatter-item-tooltip-presets.d.ts +5 -0
- package/scatter/tooltip/scatter-item-tooltip-presets.d.ts.map +1 -0
- package/scatter/tooltip/scatter-item-tooltip-presets.js +49 -0
- package/scatter/tooltip/scatter-item-tooltip.types.d.ts +22 -0
- package/scatter/tooltip/scatter-item-tooltip.types.d.ts.map +1 -0
- package/scatter/tooltip/scatter-item-tooltip.types.js +3 -0
- package/scatter/tooltip/scatter-item-tooltip.utils.d.ts +9 -0
- package/scatter/tooltip/scatter-item-tooltip.utils.d.ts.map +1 -0
- package/scatter/tooltip/scatter-item-tooltip.utils.js +83 -0
- package/scatter/tooltip/use-scatter-item-tooltip.d.ts +25 -0
- package/scatter/tooltip/use-scatter-item-tooltip.d.ts.map +1 -0
- package/scatter/tooltip/use-scatter-item-tooltip.js +46 -0
- package/tooltip/chart-pointer-tooltip-overlay.d.ts +11 -0
- package/tooltip/chart-pointer-tooltip-overlay.d.ts.map +1 -0
- package/tooltip/chart-pointer-tooltip-overlay.js +88 -0
- package/tooltip/chart-tooltip-preset-shells.d.ts +66 -0
- package/tooltip/chart-tooltip-preset-shells.d.ts.map +1 -0
- package/tooltip/chart-tooltip-preset-shells.js +409 -0
- package/tooltip/index.d.ts +7 -0
- package/tooltip/index.d.ts.map +1 -0
- package/tooltip/index.js +1 -0
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
function resolveDataIndexInside(data, evt) {
|
|
2
|
+
if (typeof evt?.dataIndexInside === 'number' && !Number.isNaN(evt.dataIndexInside)) {
|
|
3
|
+
return evt.dataIndexInside;
|
|
4
|
+
}
|
|
5
|
+
if (typeof evt?.dataIndex === 'number' && !Number.isNaN(evt.dataIndex)) {
|
|
6
|
+
const mapped = typeof data?.indexOfRawIndex === 'function' ? data.indexOfRawIndex(evt.dataIndex) : evt.dataIndex;
|
|
7
|
+
if (typeof mapped === 'number' && !Number.isNaN(mapped))
|
|
8
|
+
return mapped;
|
|
9
|
+
}
|
|
10
|
+
return null;
|
|
11
|
+
}
|
|
12
|
+
function pieSectorCenter(data, diInside) {
|
|
13
|
+
const layout = data.getItemLayout?.(diInside);
|
|
14
|
+
if (!layout || !Number.isFinite(layout.cx) || !Number.isFinite(layout.cy))
|
|
15
|
+
return null;
|
|
16
|
+
const cx = Number(layout.cx);
|
|
17
|
+
const cy = Number(layout.cy);
|
|
18
|
+
const r = Number(layout.r);
|
|
19
|
+
const r0 = Number(layout.r0 ?? 0);
|
|
20
|
+
const startAngle = Number(layout.startAngle);
|
|
21
|
+
const endAngle = Number(layout.endAngle);
|
|
22
|
+
if (!Number.isFinite(startAngle) || !Number.isFinite(endAngle))
|
|
23
|
+
return null;
|
|
24
|
+
const mid = (startAngle + endAngle) / 2;
|
|
25
|
+
const avgR = (r0 + r) / 2;
|
|
26
|
+
return {
|
|
27
|
+
x: cx + Math.cos(mid) * avgR,
|
|
28
|
+
y: cy + Math.sin(mid) * avgR,
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
function pointerFromEventOrSector(chart, evt, seriesModel, data, diInside) {
|
|
32
|
+
const ex = evt?.x;
|
|
33
|
+
const ey = evt?.y;
|
|
34
|
+
if (typeof ex === 'number' && typeof ey === 'number' && !Number.isNaN(ex) && !Number.isNaN(ey)) {
|
|
35
|
+
return { x: ex, y: ey };
|
|
36
|
+
}
|
|
37
|
+
return pieSectorCenter(data, diInside);
|
|
38
|
+
}
|
|
39
|
+
function sliceValueAt(data, diInside) {
|
|
40
|
+
try {
|
|
41
|
+
const dim = typeof data.mapDimension === 'function' ? data.mapDimension('value') : null;
|
|
42
|
+
if (dim != null) {
|
|
43
|
+
const v = data.get(dim, diInside);
|
|
44
|
+
const n = Number(v);
|
|
45
|
+
if (Number.isFinite(n))
|
|
46
|
+
return n;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
catch {
|
|
50
|
+
/* ignore */
|
|
51
|
+
}
|
|
52
|
+
const v0 = data.get?.(0, diInside);
|
|
53
|
+
const n0 = Number(v0);
|
|
54
|
+
if (Number.isFinite(n0))
|
|
55
|
+
return n0;
|
|
56
|
+
try {
|
|
57
|
+
const n1 = Number(data.get?.('value', diInside));
|
|
58
|
+
if (Number.isFinite(n1))
|
|
59
|
+
return n1;
|
|
60
|
+
}
|
|
61
|
+
catch {
|
|
62
|
+
/* ignore */
|
|
63
|
+
}
|
|
64
|
+
return NaN;
|
|
65
|
+
}
|
|
66
|
+
function seriesValueTotal(data) {
|
|
67
|
+
const n = typeof data.count === 'function' ? data.count() : 0;
|
|
68
|
+
let total = 0;
|
|
69
|
+
for (let i = 0; i < n; i++) {
|
|
70
|
+
const v = sliceValueAt(data, i);
|
|
71
|
+
if (Number.isFinite(v))
|
|
72
|
+
total += v;
|
|
73
|
+
}
|
|
74
|
+
return total;
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Build pie item tooltip params from an ECharts `showTip` payload and chart instance.
|
|
78
|
+
* Ignores axis-style payloads (`dataByCoordSys`).
|
|
79
|
+
*/
|
|
80
|
+
export function pieItemParamsFromShowTip(chart, evt, ctx, themeSeries) {
|
|
81
|
+
if (!chart || !evt)
|
|
82
|
+
return null;
|
|
83
|
+
if (Array.isArray(evt.dataByCoordSys) && evt.dataByCoordSys.length > 0)
|
|
84
|
+
return null;
|
|
85
|
+
const si = evt.seriesIndex;
|
|
86
|
+
if (typeof si !== 'number' || si < 0)
|
|
87
|
+
return null;
|
|
88
|
+
const seriesModel = chart.getModel?.().getSeriesByIndex?.(si);
|
|
89
|
+
const seriesKind = seriesModel?.subType ?? seriesModel?.get?.('type');
|
|
90
|
+
if (!seriesModel || seriesKind !== 'pie')
|
|
91
|
+
return null;
|
|
92
|
+
const data = seriesModel.getData?.();
|
|
93
|
+
if (!data)
|
|
94
|
+
return null;
|
|
95
|
+
const diInside = resolveDataIndexInside(data, evt);
|
|
96
|
+
if (diInside == null || diInside < 0)
|
|
97
|
+
return null;
|
|
98
|
+
const pixel = pointerFromEventOrSector(chart, evt, seriesModel, data, diInside);
|
|
99
|
+
if (!pixel)
|
|
100
|
+
return null;
|
|
101
|
+
const ring = ctx.normalizedSeries[si];
|
|
102
|
+
const row = ring?.data?.[diInside];
|
|
103
|
+
if (!row)
|
|
104
|
+
return null;
|
|
105
|
+
const name = String(data.getName?.(diInside) ?? row.name ?? '');
|
|
106
|
+
const fromModel = sliceValueAt(data, diInside);
|
|
107
|
+
const value = Number.isFinite(fromModel) ? fromModel : Number(row.value);
|
|
108
|
+
const total = seriesValueTotal(data);
|
|
109
|
+
const percent = total > 0 ? (value / total) * 100 : 0;
|
|
110
|
+
let color;
|
|
111
|
+
try {
|
|
112
|
+
const style = data.getItemVisual?.(diInside, 'style');
|
|
113
|
+
const fill = style?.fill;
|
|
114
|
+
if (typeof fill === 'string' && fill !== '')
|
|
115
|
+
color = fill;
|
|
116
|
+
}
|
|
117
|
+
catch {
|
|
118
|
+
/* ignore */
|
|
119
|
+
}
|
|
120
|
+
if (color == null) {
|
|
121
|
+
const themeLen = Math.max(themeSeries.length, 1);
|
|
122
|
+
color = themeSeries[diInside % themeLen]?.color;
|
|
123
|
+
}
|
|
124
|
+
const ringNameRaw = seriesModel.get?.('name');
|
|
125
|
+
const ringName = typeof ringNameRaw === 'string' && ringNameRaw !== '' ? ringNameRaw : ring?.name != null && ring.name !== ''
|
|
126
|
+
? String(ring.name)
|
|
127
|
+
: undefined;
|
|
128
|
+
return {
|
|
129
|
+
pointerX: pixel.x,
|
|
130
|
+
pointerY: pixel.y,
|
|
131
|
+
seriesIndex: si,
|
|
132
|
+
dataIndex: diInside,
|
|
133
|
+
name,
|
|
134
|
+
value,
|
|
135
|
+
percent,
|
|
136
|
+
...(typeof color === 'string' ? { color } : {}),
|
|
137
|
+
...(ringName != null ? { ringName } : {}),
|
|
138
|
+
};
|
|
139
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { PieItemTooltipContext, PieItemTooltipParams } from './pie-item-tooltip.types';
|
|
3
|
+
export interface UsePieItemTooltipOptions {
|
|
4
|
+
active: boolean;
|
|
5
|
+
renderTooltip: (params: PieItemTooltipParams) => React.ReactNode;
|
|
6
|
+
contextRef: React.RefObject<PieItemTooltipContext>;
|
|
7
|
+
themeSeriesRef: React.RefObject<Array<{
|
|
8
|
+
color: string;
|
|
9
|
+
}>>;
|
|
10
|
+
width: number;
|
|
11
|
+
height: number;
|
|
12
|
+
}
|
|
13
|
+
export interface UsePieItemTooltipResult {
|
|
14
|
+
attachPieItemTooltipListeners: (chart: {
|
|
15
|
+
on: (ev: string, fn: (...args: any[]) => void) => void;
|
|
16
|
+
off: (ev: string, fn: (...args: any[]) => void) => void;
|
|
17
|
+
}) => () => void;
|
|
18
|
+
renderPieTooltipOverlay: () => React.ReactNode;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Pie / donut item tooltip as React Native UI (`trigger: 'item'`).
|
|
22
|
+
*/
|
|
23
|
+
export declare function usePieItemTooltip(options: UsePieItemTooltipOptions): UsePieItemTooltipResult;
|
|
24
|
+
//# sourceMappingURL=use-pie-item-tooltip.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-pie-item-tooltip.d.ts","sourceRoot":"","sources":["../../../../../components/chart/pie/tooltip/use-pie-item-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAG5F,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,KAAK,CAAC,SAAS,CAAC;IACjE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC;IACnD,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,uBAAuB;IACtC,6BAA6B,EAAE,CAAC,KAAK,EAAE;QACrC,EAAE,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,KAAK,IAAI,CAAC;QACvD,GAAG,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,KAAK,IAAI,CAAC;KACzD,KAAK,MAAM,IAAI,CAAC;IACjB,uBAAuB,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAChD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,wBAAwB,GAAG,uBAAuB,CAiD5F"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React, { useCallback, useEffect, useState } from 'react';
|
|
2
|
+
import { ChartPointerTooltipOverlay } from '../../tooltip/chart-pointer-tooltip-overlay';
|
|
3
|
+
import { pieItemParamsFromShowTip } from './pie-item-tooltip.utils';
|
|
4
|
+
/**
|
|
5
|
+
* Pie / donut item tooltip as React Native UI (`trigger: 'item'`).
|
|
6
|
+
*/
|
|
7
|
+
export function usePieItemTooltip(options) {
|
|
8
|
+
const { active, renderTooltip, contextRef, themeSeriesRef, width, height } = options;
|
|
9
|
+
const [params, setParams] = useState(null);
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
if (!active)
|
|
12
|
+
setParams(null);
|
|
13
|
+
}, [active]);
|
|
14
|
+
const attachPieItemTooltipListeners = useCallback((chart) => {
|
|
15
|
+
if (!active)
|
|
16
|
+
return () => { };
|
|
17
|
+
const onShowTip = (evt) => {
|
|
18
|
+
const ctx = contextRef.current;
|
|
19
|
+
if (!ctx?.normalizedSeries?.length) {
|
|
20
|
+
setParams(null);
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
const next = pieItemParamsFromShowTip(chart, evt, ctx, themeSeriesRef.current ?? []);
|
|
24
|
+
setParams(next);
|
|
25
|
+
};
|
|
26
|
+
const onHideTip = () => setParams(null);
|
|
27
|
+
chart.on('showTip', onShowTip);
|
|
28
|
+
chart.on('hideTip', onHideTip);
|
|
29
|
+
return () => {
|
|
30
|
+
chart.off('showTip', onShowTip);
|
|
31
|
+
chart.off('hideTip', onHideTip);
|
|
32
|
+
};
|
|
33
|
+
}, [active, contextRef, themeSeriesRef]);
|
|
34
|
+
const renderPieTooltipOverlay = useCallback(() => {
|
|
35
|
+
if (!active || params == null)
|
|
36
|
+
return null;
|
|
37
|
+
return (<ChartPointerTooltipOverlay width={width} height={height} pointerX={params.pointerX} pointerY={params.pointerY}>
|
|
38
|
+
{renderTooltip(params)}
|
|
39
|
+
</ChartPointerTooltipOverlay>);
|
|
40
|
+
}, [active, renderTooltip, params, width, height]);
|
|
41
|
+
return {
|
|
42
|
+
attachPieItemTooltipListeners,
|
|
43
|
+
renderPieTooltipOverlay,
|
|
44
|
+
};
|
|
45
|
+
}
|
package/props/cartesian.d.ts
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { AxisTooltipParams } from '../cartesian/tooltip/axis-tooltip.types';
|
|
3
|
+
import type { ChartTooltipOption } from '../tooltip';
|
|
1
4
|
import type { CommonChartProps } from './common';
|
|
2
5
|
/**
|
|
3
6
|
* Emitted when the user taps/clicks a series data point on Cartesian-based charts
|
|
@@ -100,10 +103,17 @@ export interface CartesianChartProps extends CommonChartProps {
|
|
|
100
103
|
*/
|
|
101
104
|
showLegend?: boolean;
|
|
102
105
|
/**
|
|
103
|
-
* Whether
|
|
104
|
-
*
|
|
106
|
+
* Whether ECharts applies **emphasis** (hover highlight) while the axis pointer / tooltip is near the series.
|
|
107
|
+
* Column and bar charts default this to `false`; area defaults to `true`.
|
|
105
108
|
*/
|
|
106
109
|
showHighlighter?: boolean;
|
|
110
|
+
/**
|
|
111
|
+
* Built-in axis tooltip preset when `renderTooltip` is omitted (area, line, column, bar). Use `none` to hide the overlay.
|
|
112
|
+
* When `renderTooltip` is set, it replaces the preset body. The overlay is hidden only when `tooltip` is `none` and `renderTooltip` is omitted.
|
|
113
|
+
* Scatter and bubble use the same prop for **item** tooltips.
|
|
114
|
+
* @default 'card'
|
|
115
|
+
*/
|
|
116
|
+
tooltip?: ChartTooltipOption;
|
|
107
117
|
/**
|
|
108
118
|
* Formatter for X-axis tick labels. (value, index?) => string
|
|
109
119
|
*/
|
|
@@ -116,5 +126,11 @@ export interface CartesianChartProps extends CommonChartProps {
|
|
|
116
126
|
* Called when the user selects (taps/clicks) a data point on a series (when supported).
|
|
117
127
|
*/
|
|
118
128
|
onSelect?: (event: CartesianChartSelectEvent) => void;
|
|
129
|
+
/**
|
|
130
|
+
* Overrides the default React Native axis tooltip body for charts that use the axis tooltip overlay (area, line, column, bar).
|
|
131
|
+
* Scatter and bubble charts use item tooltip `renderTooltip` on their own props instead.
|
|
132
|
+
* Takes precedence over {@link tooltip}.
|
|
133
|
+
*/
|
|
134
|
+
renderTooltip?: (params: AxisTooltipParams) => ReactNode;
|
|
119
135
|
}
|
|
120
136
|
//# sourceMappingURL=cartesian.d.ts.map
|
package/props/cartesian.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cartesian.d.ts","sourceRoot":"","sources":["../../../../components/chart/props/cartesian.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD;;;GAGG;AACH,MAAM,WAAW,yBAAyB;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,+DAA+D;IAC/D,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,yDAAyD;IACzD,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7E;;OAEG;IACH,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"cartesian.d.ts","sourceRoot":"","sources":["../../../../components/chart/props/cartesian.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD;;;GAGG;AACH,MAAM,WAAW,yBAAyB;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,+DAA+D;IAC/D,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,yDAAyD;IACzD,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;OAEG;IACH,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7E;;OAEG;IACH,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACtD;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,SAAS,CAAC;CAC1D"}
|
package/radar/index.d.ts
CHANGED
package/radar/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/radar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,cAAc,EACd,eAAe,GAChB,MAAM,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/radar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,cAAc,EACd,eAAe,GAChB,MAAM,qBAAqB,CAAC;AAC7B,cAAc,WAAW,CAAC"}
|
package/radar/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radar-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/radar/radar-chart.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"radar-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/radar/radar-chart.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,qBAAqB,CAAC;AAW7B,OAAO,KAAqC,MAAM,OAAO,CAAC;AAG1D,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,cAAc,EACd,eAAe,GAChB,MAAM,qBAAqB,CAAC;AAgQ7B,eAAO,MAAM,UAAU;;;;;;;CAErB,CAAC"}
|
package/radar/radar-chart.js
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { withResponsiveContainer } from '../chart-container';
|
|
2
2
|
import { useChartTheme, withChartTheme } from '../chart-theme.context';
|
|
3
|
+
import { axisTooltipShowContentFlag } from '../cartesian/tooltip';
|
|
4
|
+
import { createRadarTooltipPreset, useRadarItemTooltip } from './tooltip';
|
|
3
5
|
import { SkiaChart, SkiaRenderer } from '@wuba/react-native-echarts';
|
|
4
6
|
import { RadarChart as EChartsRadarChart } from 'echarts/charts';
|
|
5
7
|
import { GridComponent, LegendComponent, TooltipComponent, } from 'echarts/components';
|
|
6
8
|
import * as echarts from 'echarts/core';
|
|
7
9
|
import React, { useEffect, useMemo, useRef } from 'react';
|
|
10
|
+
import { View } from 'react-native';
|
|
8
11
|
echarts.use([
|
|
9
12
|
TooltipComponent,
|
|
10
13
|
GridComponent,
|
|
@@ -27,17 +30,41 @@ function normalizeRadarSeries(data, indicatorCount) {
|
|
|
27
30
|
value: item.value,
|
|
28
31
|
}));
|
|
29
32
|
}
|
|
30
|
-
const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol = 'none', symbolSize, showLegend = false, showHighlighter = true, showIndicatorLabels = true, showSplitLine = true, showAxisLine = true, onSelect, ...props }) => {
|
|
33
|
+
const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol = 'none', symbolSize, showLegend = false, showHighlighter = true, showIndicatorLabels = true, showSplitLine = true, showAxisLine = true, tooltip = 'card', renderTooltip, onSelect, ...props }) => {
|
|
31
34
|
const { theme } = useChartTheme(props.theme, props.colors);
|
|
32
35
|
const chartRef = useRef(null);
|
|
33
36
|
const onSelectRef = useRef(onSelect);
|
|
34
37
|
onSelectRef.current = onSelect;
|
|
35
|
-
const
|
|
38
|
+
const radarContextRef = useRef({
|
|
39
|
+
indicators: [],
|
|
40
|
+
normalizedSeries: [],
|
|
41
|
+
});
|
|
42
|
+
const themeSeriesRef = useRef(theme.series);
|
|
43
|
+
themeSeriesRef.current = theme.series;
|
|
44
|
+
const tooltipOverlayActive = renderTooltip != null || tooltip !== 'none';
|
|
45
|
+
const renderTooltipFn = useMemo(() => {
|
|
46
|
+
if (renderTooltip != null)
|
|
47
|
+
return renderTooltip;
|
|
48
|
+
if (tooltip === 'none')
|
|
49
|
+
return () => null;
|
|
50
|
+
return createRadarTooltipPreset(tooltip);
|
|
51
|
+
}, [renderTooltip, tooltip]);
|
|
52
|
+
const { attachRadarItemTooltipListeners, renderRadarTooltipOverlay } = useRadarItemTooltip({
|
|
53
|
+
active: tooltipOverlayActive,
|
|
54
|
+
renderTooltip: renderTooltipFn,
|
|
55
|
+
contextRef: radarContextRef,
|
|
56
|
+
themeSeriesRef,
|
|
57
|
+
width,
|
|
58
|
+
height,
|
|
59
|
+
});
|
|
36
60
|
const normalizedSeries = useMemo(() => {
|
|
37
61
|
const count = indicators?.length ?? 0;
|
|
38
62
|
return normalizeRadarSeries(data, count);
|
|
39
63
|
}, [data, indicators?.length]);
|
|
40
|
-
|
|
64
|
+
radarContextRef.current = {
|
|
65
|
+
indicators: (indicators ?? []).map((ind) => ({ name: ind.name })),
|
|
66
|
+
normalizedSeries,
|
|
67
|
+
};
|
|
41
68
|
const indicatorMax = useMemo(() => {
|
|
42
69
|
if (!indicators?.length)
|
|
43
70
|
return [];
|
|
@@ -103,7 +130,11 @@ const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol =
|
|
|
103
130
|
lineStyle: { color: seriesColor, width: seriesLineWidth },
|
|
104
131
|
areaStyle: { color: areaColor },
|
|
105
132
|
emphasis: showHighlighter
|
|
106
|
-
? {
|
|
133
|
+
? {
|
|
134
|
+
focus: 'none',
|
|
135
|
+
lineStyle: { width: seriesLineWidth + 1 },
|
|
136
|
+
areaStyle: { opacity: 0.8 },
|
|
137
|
+
}
|
|
107
138
|
: { focus: 'none' },
|
|
108
139
|
};
|
|
109
140
|
}),
|
|
@@ -118,12 +149,16 @@ const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol =
|
|
|
118
149
|
backgroundColor: theme.legend.backgroundColor,
|
|
119
150
|
}
|
|
120
151
|
: undefined;
|
|
152
|
+
const tooltipConfig = tooltipOverlayActive
|
|
153
|
+
? {
|
|
154
|
+
trigger: 'item',
|
|
155
|
+
...axisTooltipShowContentFlag(true),
|
|
156
|
+
}
|
|
157
|
+
: { show: false };
|
|
121
158
|
const config = {
|
|
122
159
|
radar: radarConfig,
|
|
123
160
|
series: [seriesConfig],
|
|
124
|
-
tooltip:
|
|
125
|
-
trigger: 'item',
|
|
126
|
-
},
|
|
161
|
+
tooltip: tooltipConfig,
|
|
127
162
|
};
|
|
128
163
|
if (legendConfig)
|
|
129
164
|
config.legend = legendConfig;
|
|
@@ -140,9 +175,11 @@ const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol =
|
|
|
140
175
|
showIndicatorLabels,
|
|
141
176
|
showSplitLine,
|
|
142
177
|
showAxisLine,
|
|
178
|
+
tooltipOverlayActive,
|
|
143
179
|
]);
|
|
144
180
|
useEffect(() => {
|
|
145
181
|
let chart;
|
|
182
|
+
let detachRadarTooltip = () => { };
|
|
146
183
|
if (chartRef.current) {
|
|
147
184
|
try {
|
|
148
185
|
chart = echarts.init(chartRef.current, 'light', {
|
|
@@ -150,6 +187,7 @@ const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol =
|
|
|
150
187
|
height,
|
|
151
188
|
});
|
|
152
189
|
chart.setOption(option);
|
|
190
|
+
detachRadarTooltip = attachRadarItemTooltipListeners(chart);
|
|
153
191
|
const handleRadarClick = (params) => {
|
|
154
192
|
const cb = onSelectRef.current;
|
|
155
193
|
if (typeof cb !== 'function')
|
|
@@ -161,7 +199,7 @@ const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol =
|
|
|
161
199
|
const dataIndex = params.dataIndex;
|
|
162
200
|
if (typeof dataIndex !== 'number' || dataIndex < 0)
|
|
163
201
|
return;
|
|
164
|
-
const row =
|
|
202
|
+
const row = radarContextRef.current.normalizedSeries[dataIndex];
|
|
165
203
|
if (!row)
|
|
166
204
|
return;
|
|
167
205
|
const event = {
|
|
@@ -179,6 +217,7 @@ const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol =
|
|
|
179
217
|
}
|
|
180
218
|
}
|
|
181
219
|
return () => {
|
|
220
|
+
detachRadarTooltip();
|
|
182
221
|
if (chart) {
|
|
183
222
|
try {
|
|
184
223
|
chart.dispose();
|
|
@@ -188,8 +227,11 @@ const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol =
|
|
|
188
227
|
}
|
|
189
228
|
}
|
|
190
229
|
};
|
|
191
|
-
}, [option, width, height]);
|
|
192
|
-
return <
|
|
230
|
+
}, [option, width, height, attachRadarItemTooltipListeners]);
|
|
231
|
+
return (<View style={{ width, height, position: 'relative' }}>
|
|
232
|
+
<SkiaChart ref={chartRef} useRNGH/>
|
|
233
|
+
{renderRadarTooltipOverlay()}
|
|
234
|
+
</View>);
|
|
193
235
|
};
|
|
194
236
|
const RadarChartComponent = withResponsiveContainer(withChartTheme(ChartComponent));
|
|
195
237
|
export const RadarChart = Object.assign(RadarChartComponent, {
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import type { CommonChartProps } from '../props/common';
|
|
2
|
+
import type { ChartTooltipOption } from '../tooltip';
|
|
3
|
+
import type { RadarItemTooltipParams } from './tooltip/radar-item-tooltip.types';
|
|
4
|
+
import type { ReactNode } from 'react';
|
|
2
5
|
/** Emitted when the user taps/clicks a radar series (polygon). */
|
|
3
6
|
export interface RadarChartSelectEvent {
|
|
4
7
|
seriesIndex: number;
|
|
@@ -72,6 +75,16 @@ export interface RadarChartProps extends CommonChartProps {
|
|
|
72
75
|
* @default true
|
|
73
76
|
*/
|
|
74
77
|
showAxisLine?: boolean;
|
|
78
|
+
/**
|
|
79
|
+
* Built-in item tooltip preset when `renderTooltip` is omitted. Use `none` to hide the overlay.
|
|
80
|
+
* @default 'card'
|
|
81
|
+
*/
|
|
82
|
+
tooltip?: ChartTooltipOption;
|
|
83
|
+
/**
|
|
84
|
+
* Overrides the default React Native item tooltip body (see {@link RadarItemTooltipParams}).
|
|
85
|
+
* Takes precedence over {@link tooltip}.
|
|
86
|
+
*/
|
|
87
|
+
renderTooltip?: (params: RadarItemTooltipParams) => ReactNode;
|
|
75
88
|
/**
|
|
76
89
|
* Called when the user selects (taps/clicks) a radar series polygon.
|
|
77
90
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radar-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/radar/radar-chart.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"radar-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/radar/radar-chart.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,kEAAkE;AAClE,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,MAAM,MAAM,eAAe,GACvB,MAAM,EAAE,GACR,KAAK,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC,CAAC;AAE9C;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD;;;OAGG;IACH,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IACtG;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IACzE;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,SAAS,CAAC;IAC9D;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACnD"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ChartTheme } from '../../chart-theme.context';
|
|
3
|
+
import type { RadarItemTooltipParams } from './radar-item-tooltip.types';
|
|
4
|
+
/** Themed default radar item tooltip (React Native). */
|
|
5
|
+
export declare function createDefaultRadarTooltip(theme: Pick<ChartTheme, 'tooltip'>): (params: RadarItemTooltipParams) => React.ReactElement;
|
|
6
|
+
//# sourceMappingURL=default-radar-tooltip.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default-radar-tooltip.d.ts","sourceRoot":"","sources":["../../../../../components/chart/radar/tooltip/default-radar-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEzE,wDAAwD;AACxD,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,GACjC,CAAC,MAAM,EAAE,sBAAsB,KAAK,KAAK,CAAC,YAAY,CA+BxD"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StyleSheet, Text, View } from 'react-native';
|
|
3
|
+
/** Themed default radar item tooltip (React Native). */
|
|
4
|
+
export function createDefaultRadarTooltip(theme) {
|
|
5
|
+
const t = theme.tooltip;
|
|
6
|
+
return function DefaultRadarTooltip(params) {
|
|
7
|
+
const { seriesName, dimensionValues, color } = params;
|
|
8
|
+
return (<View style={{
|
|
9
|
+
backgroundColor: t.backgroundColor,
|
|
10
|
+
borderColor: t.borderColor,
|
|
11
|
+
borderWidth: t.borderWidth,
|
|
12
|
+
borderRadius: t.borderRadius,
|
|
13
|
+
padding: t.padding,
|
|
14
|
+
}}>
|
|
15
|
+
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 6 }}>
|
|
16
|
+
{color != null && color !== '' ? (<View style={[styles.swatch, { backgroundColor: color }]}/>) : (<View style={styles.swatchPlaceholder}/>)}
|
|
17
|
+
<Text style={[styles.title, { color: t.labelColor }]}>{seriesName}</Text>
|
|
18
|
+
</View>
|
|
19
|
+
{dimensionValues.map((d) => (<Text key={d.indicatorName} style={[styles.line, { color: t.valueColor }]}>
|
|
20
|
+
<Text style={{ color: t.labelColor }}>{d.indicatorName}: </Text>
|
|
21
|
+
{Number.isFinite(d.value) ? String(d.value) : '—'}
|
|
22
|
+
</Text>))}
|
|
23
|
+
</View>);
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
const styles = StyleSheet.create({
|
|
27
|
+
title: {
|
|
28
|
+
fontWeight: '600',
|
|
29
|
+
fontSize: 13,
|
|
30
|
+
flex: 1,
|
|
31
|
+
},
|
|
32
|
+
line: {
|
|
33
|
+
fontSize: 12,
|
|
34
|
+
marginTop: 2,
|
|
35
|
+
},
|
|
36
|
+
swatch: {
|
|
37
|
+
width: 8,
|
|
38
|
+
height: 8,
|
|
39
|
+
borderRadius: 4,
|
|
40
|
+
marginRight: 6,
|
|
41
|
+
},
|
|
42
|
+
swatchPlaceholder: {
|
|
43
|
+
width: 8,
|
|
44
|
+
height: 8,
|
|
45
|
+
marginRight: 6,
|
|
46
|
+
},
|
|
47
|
+
});
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { createDefaultRadarTooltip } from './default-radar-tooltip';
|
|
2
|
+
export { createRadarTooltipPreset } from './radar-item-tooltip-presets';
|
|
3
|
+
export type { RadarItemTooltipContext, RadarItemTooltipDimension, RadarItemTooltipParams, } from './radar-item-tooltip.types';
|
|
4
|
+
export { radarItemParamsFromShowTip } from './radar-item-tooltip.utils';
|
|
5
|
+
export { useRadarItemTooltip } from './use-radar-item-tooltip';
|
|
6
|
+
export type { UseRadarItemTooltipOptions, UseRadarItemTooltipResult } from './use-radar-item-tooltip';
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/chart/radar/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,YAAY,EACV,uBAAuB,EACvB,yBAAyB,EACzB,sBAAsB,GACvB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,YAAY,EAAE,0BAA0B,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { createDefaultRadarTooltip } from './default-radar-tooltip';
|
|
2
|
+
export { createRadarTooltipPreset } from './radar-item-tooltip-presets';
|
|
3
|
+
export { radarItemParamsFromShowTip } from './radar-item-tooltip.utils';
|
|
4
|
+
export { useRadarItemTooltip } from './use-radar-item-tooltip';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ChartTooltipPreset } from '../../tooltip';
|
|
3
|
+
import type { RadarItemTooltipParams } from './radar-item-tooltip.types';
|
|
4
|
+
export declare function createRadarTooltipPreset(preset: ChartTooltipPreset): (params: RadarItemTooltipParams) => React.ReactElement;
|
|
5
|
+
//# sourceMappingURL=radar-item-tooltip-presets.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radar-item-tooltip-presets.d.ts","sourceRoot":"","sources":["../../../../../components/chart/radar/tooltip/radar-item-tooltip-presets.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAOxD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAqEzE,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,kBAAkB,GACzB,CAAC,MAAM,EAAE,sBAAsB,KAAK,KAAK,CAAC,YAAY,CAYxD"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TooltipPresetCard, TooltipPresetCompact, TooltipPresetKpi, TooltipPresetStriped, } from '../../tooltip/chart-tooltip-preset-shells';
|
|
3
|
+
function radarCardFromParams(p) {
|
|
4
|
+
const { seriesName, dimensionValues, color } = p;
|
|
5
|
+
return (<TooltipPresetCard header={{ swatchColor: color, title: seriesName }} keyValueRows={dimensionValues.map((d) => ({
|
|
6
|
+
key: d.indicatorName,
|
|
7
|
+
left: d.indicatorName,
|
|
8
|
+
right: String(d.value),
|
|
9
|
+
}))}/>);
|
|
10
|
+
}
|
|
11
|
+
function radarCompactFromParams(p) {
|
|
12
|
+
const { seriesName, dimensionValues } = p;
|
|
13
|
+
const avg = dimensionValues.length > 0
|
|
14
|
+
? dimensionValues.reduce((s, d) => s + (Number.isFinite(d.value) ? d.value : 0), 0) / dimensionValues.length
|
|
15
|
+
: 0;
|
|
16
|
+
return (<TooltipPresetCompact emphasis={seriesName} detail={`avg ${avg.toFixed(1)} · ${dimensionValues.length} axes`} wrap/>);
|
|
17
|
+
}
|
|
18
|
+
function radarKpiFromParams(p) {
|
|
19
|
+
const { seriesName, dimensionValues, color } = p;
|
|
20
|
+
const primary = dimensionValues[0];
|
|
21
|
+
const rest = dimensionValues.slice(1);
|
|
22
|
+
return (<TooltipPresetKpi accentColor={color ?? '#3b82f6'} minWidth={160} overline={seriesName} metric={primary != null ? String(primary.value) : ''} caption={primary?.indicatorName} footerRows={rest.length > 0
|
|
23
|
+
? rest.map((d) => ({
|
|
24
|
+
key: d.indicatorName,
|
|
25
|
+
left: d.indicatorName,
|
|
26
|
+
right: String(d.value),
|
|
27
|
+
}))
|
|
28
|
+
: undefined}/>);
|
|
29
|
+
}
|
|
30
|
+
function radarStripedFromParams(p) {
|
|
31
|
+
const { seriesName, dimensionValues, color } = p;
|
|
32
|
+
return (<TooltipPresetStriped headerSwatch={{ color: color ?? '#64748b', title: seriesName }} rows={dimensionValues.map((d) => ({
|
|
33
|
+
key: d.indicatorName,
|
|
34
|
+
leftLabel: d.indicatorName,
|
|
35
|
+
right: String(d.value),
|
|
36
|
+
}))}/>);
|
|
37
|
+
}
|
|
38
|
+
export function createRadarTooltipPreset(preset) {
|
|
39
|
+
switch (preset) {
|
|
40
|
+
case 'card':
|
|
41
|
+
return (p) => radarCardFromParams(p);
|
|
42
|
+
case 'compact':
|
|
43
|
+
return (p) => radarCompactFromParams(p);
|
|
44
|
+
case 'kpi':
|
|
45
|
+
return (p) => radarKpiFromParams(p);
|
|
46
|
+
case 'striped':
|
|
47
|
+
return (p) => radarStripedFromParams(p);
|
|
48
|
+
}
|
|
49
|
+
throw new Error(`Unknown tooltip preset: ${String(preset)}`);
|
|
50
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Item tooltip for radar (`trigger: 'item'`, one ECharts radar series with multiple polygons).
|
|
3
|
+
*/
|
|
4
|
+
export interface RadarItemTooltipDimension {
|
|
5
|
+
indicatorName: string;
|
|
6
|
+
value: number;
|
|
7
|
+
}
|
|
8
|
+
export interface RadarItemTooltipParams {
|
|
9
|
+
pointerX: number;
|
|
10
|
+
pointerY: number;
|
|
11
|
+
/** ECharts series index (typically `0` for a single radar series). */
|
|
12
|
+
seriesIndex: number;
|
|
13
|
+
/** Index of the hovered polygon / named series row. */
|
|
14
|
+
dataIndex: number;
|
|
15
|
+
seriesName: string;
|
|
16
|
+
dimensionValues: RadarItemTooltipDimension[];
|
|
17
|
+
color?: string;
|
|
18
|
+
}
|
|
19
|
+
export interface RadarItemTooltipContext {
|
|
20
|
+
indicators: Array<{
|
|
21
|
+
name: string;
|
|
22
|
+
}>;
|
|
23
|
+
normalizedSeries: Array<{
|
|
24
|
+
name: string;
|
|
25
|
+
value: number[];
|
|
26
|
+
}>;
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=radar-item-tooltip.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radar-item-tooltip.types.d.ts","sourceRoot":"","sources":["../../../../../components/chart/radar/tooltip/radar-item-tooltip.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,WAAW,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,yBAAyB,EAAE,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpC,gBAAgB,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAC;CAC5D"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { RadarItemTooltipContext, RadarItemTooltipParams } from './radar-item-tooltip.types';
|
|
2
|
+
/**
|
|
3
|
+
* Build radar item tooltip params from an ECharts `showTip` payload.
|
|
4
|
+
* Ignores axis-style payloads (`dataByCoordSys`).
|
|
5
|
+
*/
|
|
6
|
+
export declare function radarItemParamsFromShowTip(chart: any, evt: any, ctx: RadarItemTooltipContext, themeSeries: Array<{
|
|
7
|
+
color: string;
|
|
8
|
+
}>): RadarItemTooltipParams | null;
|
|
9
|
+
//# sourceMappingURL=radar-item-tooltip.utils.d.ts.map
|