@automattic/charts 0.57.0 → 0.59.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/CHANGELOG.md +36 -2
- package/README.md +7 -54
- package/dist/index.cjs +9607 -21
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +32 -49
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +1612 -33
- package/dist/index.d.ts +1612 -33
- package/dist/index.js +9640 -54
- package/dist/index.js.map +1 -1
- package/package.json +9 -126
- package/src/charts/bar-chart/bar-chart.module.scss +0 -5
- package/src/charts/bar-chart/bar-chart.tsx +142 -149
- package/src/charts/bar-chart/test/bar-chart.test.tsx +48 -31
- package/src/charts/leaderboard-chart/leaderboard-chart.tsx +54 -74
- package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx +4 -5
- package/src/charts/leaderboard-chart/types.ts +1 -11
- package/src/charts/line-chart/line-chart.module.scss +0 -5
- package/src/charts/line-chart/line-chart.tsx +202 -193
- package/src/charts/line-chart/private/line-chart-annotations-overlay.tsx +1 -2
- package/src/charts/line-chart/test/line-chart.test.tsx +49 -27
- package/src/charts/line-chart/types.ts +0 -1
- package/src/charts/pie-chart/pie-chart.module.scss +2 -10
- package/src/charts/pie-chart/pie-chart.tsx +212 -212
- package/src/charts/pie-chart/test/composition-api.test.tsx +44 -3
- package/src/charts/pie-chart/test/pie-chart.test.tsx +51 -44
- package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss +2 -8
- package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx +166 -168
- package/src/charts/pie-semi-circle-chart/test/pie-semi-circle-chart.test.tsx +58 -30
- package/src/charts/private/chart-composition/index.ts +2 -0
- package/src/charts/private/chart-composition/render-legend-slot.ts +22 -0
- package/src/charts/private/chart-composition/test/render-legend-slot.test.tsx +60 -0
- package/src/charts/private/chart-composition/test/use-chart-children.test.tsx +91 -0
- package/src/charts/private/chart-composition/use-chart-children.ts +34 -2
- package/src/charts/private/chart-layout/chart-layout.module.scss +7 -0
- package/src/charts/private/chart-layout/chart-layout.tsx +106 -0
- package/src/charts/private/chart-layout/index.ts +2 -0
- package/src/charts/private/chart-layout/test/chart-layout.test.tsx +167 -0
- package/src/charts/private/single-chart-context/single-chart-context.tsx +2 -2
- package/src/charts/private/svg-empty-state/index.ts +1 -0
- package/src/charts/private/svg-empty-state/svg-empty-state.module.scss +7 -0
- package/src/charts/private/svg-empty-state/svg-empty-state.tsx +40 -0
- package/src/components/legend/hooks/test/use-chart-legend-items.test.tsx +12 -8
- package/src/components/legend/hooks/use-chart-legend-items.ts +12 -13
- package/src/components/legend/index.ts +1 -8
- package/src/components/legend/legend.tsx +33 -8
- package/src/components/legend/private/base-legend.module.scss +19 -37
- package/src/components/legend/private/base-legend.tsx +0 -2
- package/src/components/legend/test/legend.test.tsx +93 -1
- package/src/components/legend/types.ts +7 -34
- package/src/hooks/index.ts +1 -1
- package/src/hooks/use-data-with-percentages.ts +24 -0
- package/src/hooks/use-interactive-legend-data.ts +18 -15
- package/src/index.ts +66 -9
- package/src/providers/chart-context/global-charts-provider.tsx +7 -1
- package/src/providers/chart-context/hooks/use-chart-registration.ts +2 -1
- package/src/providers/chart-context/types.ts +2 -2
- package/src/types.ts +110 -45
- package/src/utils/date-parsing.ts +10 -1
- package/src/utils/test/date-parsing.test.ts +12 -0
- package/src/utils/test/resolve-css-var.test.ts +4 -2
- package/tsup.config.ts +1 -1
- package/dist/base-tooltip-DOq93wjU.d.cts +0 -38
- package/dist/base-tooltip-DOq93wjU.d.ts +0 -38
- package/dist/charts/bar-chart/index.cjs +0 -15
- package/dist/charts/bar-chart/index.cjs.map +0 -1
- package/dist/charts/bar-chart/index.css +0 -153
- package/dist/charts/bar-chart/index.css.map +0 -1
- package/dist/charts/bar-chart/index.d.cts +0 -37
- package/dist/charts/bar-chart/index.d.ts +0 -37
- package/dist/charts/bar-chart/index.js +0 -15
- package/dist/charts/bar-chart/index.js.map +0 -1
- package/dist/charts/bar-list-chart/index.cjs +0 -16
- package/dist/charts/bar-list-chart/index.cjs.map +0 -1
- package/dist/charts/bar-list-chart/index.css +0 -153
- package/dist/charts/bar-list-chart/index.css.map +0 -1
- package/dist/charts/bar-list-chart/index.d.cts +0 -92
- package/dist/charts/bar-list-chart/index.d.ts +0 -92
- package/dist/charts/bar-list-chart/index.js +0 -16
- package/dist/charts/bar-list-chart/index.js.map +0 -1
- package/dist/charts/conversion-funnel-chart/index.cjs +0 -11
- package/dist/charts/conversion-funnel-chart/index.cjs.map +0 -1
- package/dist/charts/conversion-funnel-chart/index.css +0 -251
- package/dist/charts/conversion-funnel-chart/index.css.map +0 -1
- package/dist/charts/conversion-funnel-chart/index.d.cts +0 -97
- package/dist/charts/conversion-funnel-chart/index.d.ts +0 -97
- package/dist/charts/conversion-funnel-chart/index.js +0 -11
- package/dist/charts/conversion-funnel-chart/index.js.map +0 -1
- package/dist/charts/geo-chart/index.cjs +0 -13
- package/dist/charts/geo-chart/index.cjs.map +0 -1
- package/dist/charts/geo-chart/index.css +0 -117
- package/dist/charts/geo-chart/index.css.map +0 -1
- package/dist/charts/geo-chart/index.d.cts +0 -67
- package/dist/charts/geo-chart/index.d.ts +0 -67
- package/dist/charts/geo-chart/index.js +0 -13
- package/dist/charts/geo-chart/index.js.map +0 -1
- package/dist/charts/leaderboard-chart/index.cjs +0 -20
- package/dist/charts/leaderboard-chart/index.cjs.map +0 -1
- package/dist/charts/leaderboard-chart/index.css +0 -172
- package/dist/charts/leaderboard-chart/index.css.map +0 -1
- package/dist/charts/leaderboard-chart/index.d.cts +0 -46
- package/dist/charts/leaderboard-chart/index.d.ts +0 -46
- package/dist/charts/leaderboard-chart/index.js +0 -20
- package/dist/charts/leaderboard-chart/index.js.map +0 -1
- package/dist/charts/line-chart/index.cjs +0 -15
- package/dist/charts/line-chart/index.cjs.map +0 -1
- package/dist/charts/line-chart/index.css +0 -225
- package/dist/charts/line-chart/index.css.map +0 -1
- package/dist/charts/line-chart/index.d.cts +0 -99
- package/dist/charts/line-chart/index.d.ts +0 -99
- package/dist/charts/line-chart/index.js +0 -15
- package/dist/charts/line-chart/index.js.map +0 -1
- package/dist/charts/pie-chart/index.cjs +0 -18
- package/dist/charts/pie-chart/index.cjs.map +0 -1
- package/dist/charts/pie-chart/index.css +0 -143
- package/dist/charts/pie-chart/index.css.map +0 -1
- package/dist/charts/pie-chart/index.d.cts +0 -97
- package/dist/charts/pie-chart/index.d.ts +0 -97
- package/dist/charts/pie-chart/index.js +0 -18
- package/dist/charts/pie-chart/index.js.map +0 -1
- package/dist/charts/pie-semi-circle-chart/index.cjs +0 -17
- package/dist/charts/pie-semi-circle-chart/index.cjs.map +0 -1
- package/dist/charts/pie-semi-circle-chart/index.css +0 -144
- package/dist/charts/pie-semi-circle-chart/index.css.map +0 -1
- package/dist/charts/pie-semi-circle-chart/index.d.cts +0 -94
- package/dist/charts/pie-semi-circle-chart/index.d.ts +0 -94
- package/dist/charts/pie-semi-circle-chart/index.js +0 -17
- package/dist/charts/pie-semi-circle-chart/index.js.map +0 -1
- package/dist/charts/sparkline/index.cjs +0 -16
- package/dist/charts/sparkline/index.cjs.map +0 -1
- package/dist/charts/sparkline/index.css +0 -242
- package/dist/charts/sparkline/index.css.map +0 -1
- package/dist/charts/sparkline/index.d.cts +0 -113
- package/dist/charts/sparkline/index.d.ts +0 -113
- package/dist/charts/sparkline/index.js +0 -16
- package/dist/charts/sparkline/index.js.map +0 -1
- package/dist/chunk-2A34OA5O.cjs +0 -51
- package/dist/chunk-2A34OA5O.cjs.map +0 -1
- package/dist/chunk-2NCY7R4G.js +0 -3897
- package/dist/chunk-2NCY7R4G.js.map +0 -1
- package/dist/chunk-32DH6JDF.js +0 -1263
- package/dist/chunk-32DH6JDF.js.map +0 -1
- package/dist/chunk-4OPFE4RM.js +0 -614
- package/dist/chunk-4OPFE4RM.js.map +0 -1
- package/dist/chunk-6CCZL2JJ.js +0 -63
- package/dist/chunk-6CCZL2JJ.js.map +0 -1
- package/dist/chunk-77OKCVQN.cjs +0 -421
- package/dist/chunk-77OKCVQN.cjs.map +0 -1
- package/dist/chunk-7FQX4ALL.cjs +0 -219
- package/dist/chunk-7FQX4ALL.cjs.map +0 -1
- package/dist/chunk-ASLARV7L.cjs +0 -81
- package/dist/chunk-ASLARV7L.cjs.map +0 -1
- package/dist/chunk-BCX5THDQ.js +0 -403
- package/dist/chunk-BCX5THDQ.js.map +0 -1
- package/dist/chunk-BPYKWMI7.js +0 -194
- package/dist/chunk-BPYKWMI7.js.map +0 -1
- package/dist/chunk-CZGYJKG6.js +0 -421
- package/dist/chunk-CZGYJKG6.js.map +0 -1
- package/dist/chunk-D2UH4CFE.cjs +0 -120
- package/dist/chunk-D2UH4CFE.cjs.map +0 -1
- package/dist/chunk-DAU3HNEG.js +0 -344
- package/dist/chunk-DAU3HNEG.js.map +0 -1
- package/dist/chunk-H2V4JMSA.js +0 -219
- package/dist/chunk-H2V4JMSA.js.map +0 -1
- package/dist/chunk-I2276W3I.cjs +0 -66
- package/dist/chunk-I2276W3I.cjs.map +0 -1
- package/dist/chunk-I35UYJJR.cjs +0 -468
- package/dist/chunk-I35UYJJR.cjs.map +0 -1
- package/dist/chunk-IU4DYUAV.js +0 -120
- package/dist/chunk-IU4DYUAV.js.map +0 -1
- package/dist/chunk-KXRWNFQJ.js +0 -51
- package/dist/chunk-KXRWNFQJ.js.map +0 -1
- package/dist/chunk-OP6PHB2U.js +0 -81
- package/dist/chunk-OP6PHB2U.js.map +0 -1
- package/dist/chunk-PXLEMUGJ.js +0 -165
- package/dist/chunk-PXLEMUGJ.js.map +0 -1
- package/dist/chunk-RCY6XLGU.cjs +0 -63
- package/dist/chunk-RCY6XLGU.cjs.map +0 -1
- package/dist/chunk-RHHVEJHJ.cjs +0 -1263
- package/dist/chunk-RHHVEJHJ.cjs.map +0 -1
- package/dist/chunk-TO3OQBXG.cjs +0 -165
- package/dist/chunk-TO3OQBXG.cjs.map +0 -1
- package/dist/chunk-V36ERY7Y.js +0 -375
- package/dist/chunk-V36ERY7Y.js.map +0 -1
- package/dist/chunk-VJM5XCB4.cjs +0 -614
- package/dist/chunk-VJM5XCB4.cjs.map +0 -1
- package/dist/chunk-VTS3PNMS.cjs +0 -344
- package/dist/chunk-VTS3PNMS.cjs.map +0 -1
- package/dist/chunk-WLODYNLB.js +0 -1067
- package/dist/chunk-WLODYNLB.js.map +0 -1
- package/dist/chunk-XKRJL2QT.cjs +0 -375
- package/dist/chunk-XKRJL2QT.cjs.map +0 -1
- package/dist/chunk-XWYZIFZW.js +0 -66
- package/dist/chunk-XWYZIFZW.js.map +0 -1
- package/dist/chunk-Y3NNQMAX.cjs +0 -194
- package/dist/chunk-Y3NNQMAX.cjs.map +0 -1
- package/dist/chunk-YE2T52VZ.cjs +0 -1067
- package/dist/chunk-YE2T52VZ.cjs.map +0 -1
- package/dist/chunk-Z26M4V2M.js +0 -468
- package/dist/chunk-Z26M4V2M.js.map +0 -1
- package/dist/chunk-Z45KX47P.cjs +0 -3897
- package/dist/chunk-Z45KX47P.cjs.map +0 -1
- package/dist/chunk-ZH4F5RMG.cjs +0 -403
- package/dist/chunk-ZH4F5RMG.cjs.map +0 -1
- package/dist/components/legend/index.cjs +0 -11
- package/dist/components/legend/index.cjs.map +0 -1
- package/dist/components/legend/index.css +0 -103
- package/dist/components/legend/index.css.map +0 -1
- package/dist/components/legend/index.d.cts +0 -37
- package/dist/components/legend/index.d.ts +0 -37
- package/dist/components/legend/index.js +0 -11
- package/dist/components/legend/index.js.map +0 -1
- package/dist/components/tooltip/index.cjs +0 -12
- package/dist/components/tooltip/index.cjs.map +0 -1
- package/dist/components/tooltip/index.css +0 -13
- package/dist/components/tooltip/index.css.map +0 -1
- package/dist/components/tooltip/index.d.cts +0 -71
- package/dist/components/tooltip/index.d.ts +0 -71
- package/dist/components/tooltip/index.js +0 -12
- package/dist/components/tooltip/index.js.map +0 -1
- package/dist/components/trend-indicator/index.cjs +0 -8
- package/dist/components/trend-indicator/index.cjs.map +0 -1
- package/dist/components/trend-indicator/index.css +0 -27
- package/dist/components/trend-indicator/index.css.map +0 -1
- package/dist/components/trend-indicator/index.d.cts +0 -44
- package/dist/components/trend-indicator/index.d.ts +0 -44
- package/dist/components/trend-indicator/index.js +0 -8
- package/dist/components/trend-indicator/index.js.map +0 -1
- package/dist/format-metric-value-MXm5DtQ_.d.cts +0 -24
- package/dist/format-metric-value-MXm5DtQ_.d.ts +0 -24
- package/dist/hooks/index.cjs +0 -31
- package/dist/hooks/index.cjs.map +0 -1
- package/dist/hooks/index.css +0 -103
- package/dist/hooks/index.css.map +0 -1
- package/dist/hooks/index.d.cts +0 -272
- package/dist/hooks/index.d.ts +0 -272
- package/dist/hooks/index.js +0 -31
- package/dist/hooks/index.js.map +0 -1
- package/dist/leaderboard-chart-BKYYXcg2.d.ts +0 -83
- package/dist/leaderboard-chart-DR7CGb0L.d.cts +0 -83
- package/dist/legend-C2grwnWk.d.cts +0 -9
- package/dist/legend-Cj0xM5dU.d.ts +0 -9
- package/dist/providers/index.cjs +0 -21
- package/dist/providers/index.cjs.map +0 -1
- package/dist/providers/index.css +0 -103
- package/dist/providers/index.css.map +0 -1
- package/dist/providers/index.d.cts +0 -28
- package/dist/providers/index.d.ts +0 -28
- package/dist/providers/index.js +0 -21
- package/dist/providers/index.js.map +0 -1
- package/dist/themes-BmVGrYnF.d.ts +0 -67
- package/dist/themes-CyjKm-P_.d.cts +0 -67
- package/dist/types-CuUEszrM.d.ts +0 -19
- package/dist/types-DZordNiO.d.cts +0 -505
- package/dist/types-DZordNiO.d.ts +0 -505
- package/dist/types-I67mddpr.d.cts +0 -78
- package/dist/types-I67mddpr.d.ts +0 -78
- package/dist/types-KtOPPzPX.d.cts +0 -19
- package/dist/utils/index.cjs +0 -44
- package/dist/utils/index.cjs.map +0 -1
- package/dist/utils/index.d.cts +0 -226
- package/dist/utils/index.d.ts +0 -226
- package/dist/utils/index.js +0 -44
- package/dist/utils/index.js.map +0 -1
- package/dist/with-responsive-CNfhzAUu.d.cts +0 -18
- package/dist/with-responsive-CNfhzAUu.d.ts +0 -18
- package/src/hooks/use-has-legend-child.ts +0 -22
package/dist/chunk-BCX5THDQ.js
DELETED
|
@@ -1,403 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
getStringWidth
|
|
3
|
-
} from "./chunk-NFRB2POF.js";
|
|
4
|
-
import {
|
|
5
|
-
radial_wipe_animation_default
|
|
6
|
-
} from "./chunk-KXRWNFQJ.js";
|
|
7
|
-
import {
|
|
8
|
-
ChartHTML,
|
|
9
|
-
ChartSVG,
|
|
10
|
-
useChartChildren
|
|
11
|
-
} from "./chunk-6CCZL2JJ.js";
|
|
12
|
-
import {
|
|
13
|
-
BaseTooltip
|
|
14
|
-
} from "./chunk-BPYKWMI7.js";
|
|
15
|
-
import {
|
|
16
|
-
Stack
|
|
17
|
-
} from "./chunk-Z26M4V2M.js";
|
|
18
|
-
import {
|
|
19
|
-
withResponsive
|
|
20
|
-
} from "./chunk-OP6PHB2U.js";
|
|
21
|
-
import {
|
|
22
|
-
GlobalChartsContext,
|
|
23
|
-
GlobalChartsProvider,
|
|
24
|
-
Legend,
|
|
25
|
-
SingleChartContext,
|
|
26
|
-
useChartId,
|
|
27
|
-
useChartLegendItems,
|
|
28
|
-
useChartRegistration,
|
|
29
|
-
useElementSize,
|
|
30
|
-
useGlobalChartsContext,
|
|
31
|
-
useGlobalChartsTheme,
|
|
32
|
-
useInteractiveLegendData,
|
|
33
|
-
usePrefersReducedMotion
|
|
34
|
-
} from "./chunk-32DH6JDF.js";
|
|
35
|
-
import {
|
|
36
|
-
attachSubComponents
|
|
37
|
-
} from "./chunk-DAU3HNEG.js";
|
|
38
|
-
|
|
39
|
-
// src/charts/pie-chart/pie-chart.tsx
|
|
40
|
-
import { Group } from "@visx/group";
|
|
41
|
-
import { Pie } from "@visx/shape";
|
|
42
|
-
import { useTooltip, useTooltipInPortal } from "@visx/tooltip";
|
|
43
|
-
import { __ } from "@wordpress/i18n";
|
|
44
|
-
import clsx from "clsx";
|
|
45
|
-
import { useCallback, useContext, useMemo } from "react";
|
|
46
|
-
|
|
47
|
-
// src/charts/pie-chart/pie-chart.module.scss
|
|
48
|
-
var pie_chart_module_default = {
|
|
49
|
-
"pie-chart": "a8ccharts-C-n-Gu",
|
|
50
|
-
"pie-chart--responsive": "a8ccharts-IQVR6j",
|
|
51
|
-
"pie-chart__svg-wrapper": "a8ccharts-iQ1Rki"
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
// src/charts/pie-chart/pie-chart.tsx
|
|
55
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
56
|
-
var renderDefaultPieTooltip = ({
|
|
57
|
-
tooltipData
|
|
58
|
-
}) => {
|
|
59
|
-
return /* @__PURE__ */ _jsx(BaseTooltip, {
|
|
60
|
-
data: tooltipData,
|
|
61
|
-
top: 0,
|
|
62
|
-
left: 0,
|
|
63
|
-
renderContainer: false
|
|
64
|
-
});
|
|
65
|
-
};
|
|
66
|
-
var validateData = (data) => {
|
|
67
|
-
if (!data.length) {
|
|
68
|
-
return {
|
|
69
|
-
isValid: false,
|
|
70
|
-
message: "No data available"
|
|
71
|
-
};
|
|
72
|
-
}
|
|
73
|
-
const hasNegativeValues = data.some((item) => item.percentage < 0 || item.value < 0);
|
|
74
|
-
if (hasNegativeValues) {
|
|
75
|
-
return {
|
|
76
|
-
isValid: false,
|
|
77
|
-
message: "Invalid data: Negative values are not allowed"
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
const totalPercentage = data.reduce((sum, item) => sum + item.percentage, 0);
|
|
81
|
-
if (Math.abs(totalPercentage - 100) > 0.01) {
|
|
82
|
-
return {
|
|
83
|
-
isValid: false,
|
|
84
|
-
message: "Invalid percentage total: Must equal 100"
|
|
85
|
-
};
|
|
86
|
-
}
|
|
87
|
-
return {
|
|
88
|
-
isValid: true,
|
|
89
|
-
message: ""
|
|
90
|
-
};
|
|
91
|
-
};
|
|
92
|
-
var PieChartInternal = ({
|
|
93
|
-
data,
|
|
94
|
-
chartId: providedChartId,
|
|
95
|
-
withTooltips = false,
|
|
96
|
-
className,
|
|
97
|
-
showLegend = false,
|
|
98
|
-
legendOrientation = "horizontal",
|
|
99
|
-
legendPosition = "bottom",
|
|
100
|
-
legendAlignment = "center",
|
|
101
|
-
legendMaxWidth,
|
|
102
|
-
legendTextOverflow = "wrap",
|
|
103
|
-
legendItemClassName,
|
|
104
|
-
legendShape = "circle",
|
|
105
|
-
width: propWidth,
|
|
106
|
-
height: propHeight,
|
|
107
|
-
size,
|
|
108
|
-
animation,
|
|
109
|
-
thickness = 1,
|
|
110
|
-
padding = 0,
|
|
111
|
-
gapScale = 0,
|
|
112
|
-
cornerScale = 0,
|
|
113
|
-
showLabels = true,
|
|
114
|
-
legendValueDisplay = "percentage",
|
|
115
|
-
legendInteractive = false,
|
|
116
|
-
children = null,
|
|
117
|
-
tooltipOffsetX = 0,
|
|
118
|
-
tooltipOffsetY = -15,
|
|
119
|
-
renderTooltip = renderDefaultPieTooltip,
|
|
120
|
-
gap = "md"
|
|
121
|
-
}) => {
|
|
122
|
-
const providerTheme = useGlobalChartsTheme();
|
|
123
|
-
const chartId = useChartId(providedChartId);
|
|
124
|
-
const [svgWrapperRef, svgWrapperWidth, svgWrapperHeight] = useElementSize();
|
|
125
|
-
const {
|
|
126
|
-
tooltipOpen,
|
|
127
|
-
tooltipLeft,
|
|
128
|
-
tooltipTop,
|
|
129
|
-
tooltipData,
|
|
130
|
-
hideTooltip,
|
|
131
|
-
showTooltip
|
|
132
|
-
} = useTooltip();
|
|
133
|
-
const {
|
|
134
|
-
containerRef,
|
|
135
|
-
TooltipInPortal,
|
|
136
|
-
containerBounds
|
|
137
|
-
} = useTooltipInPortal({
|
|
138
|
-
detectBounds: true,
|
|
139
|
-
scroll: true,
|
|
140
|
-
debounce: 0
|
|
141
|
-
});
|
|
142
|
-
const onMouseLeave = useCallback(() => {
|
|
143
|
-
if (!withTooltips) {
|
|
144
|
-
return;
|
|
145
|
-
}
|
|
146
|
-
hideTooltip();
|
|
147
|
-
}, [withTooltips, hideTooltip]);
|
|
148
|
-
const {
|
|
149
|
-
getElementStyles,
|
|
150
|
-
isSeriesVisible
|
|
151
|
-
} = useGlobalChartsContext();
|
|
152
|
-
const {
|
|
153
|
-
visibleData,
|
|
154
|
-
allSegmentsHidden,
|
|
155
|
-
legendData
|
|
156
|
-
} = useInteractiveLegendData({
|
|
157
|
-
data,
|
|
158
|
-
chartId,
|
|
159
|
-
legendInteractive,
|
|
160
|
-
isSeriesVisible
|
|
161
|
-
});
|
|
162
|
-
const legendOptions = useMemo(() => ({
|
|
163
|
-
showValues: true,
|
|
164
|
-
legendValueDisplay
|
|
165
|
-
}), [legendValueDisplay]);
|
|
166
|
-
const legendItems = useChartLegendItems(legendData, legendOptions);
|
|
167
|
-
const {
|
|
168
|
-
isValid,
|
|
169
|
-
message
|
|
170
|
-
} = validateData(data);
|
|
171
|
-
const {
|
|
172
|
-
svgChildren,
|
|
173
|
-
htmlChildren,
|
|
174
|
-
otherChildren
|
|
175
|
-
} = useChartChildren(children, "PieChart");
|
|
176
|
-
const chartMetadata = useMemo(() => ({
|
|
177
|
-
thickness,
|
|
178
|
-
gapScale,
|
|
179
|
-
cornerScale
|
|
180
|
-
}), [thickness, gapScale, cornerScale]);
|
|
181
|
-
useChartRegistration({
|
|
182
|
-
chartId,
|
|
183
|
-
legendItems,
|
|
184
|
-
chartType: "pie",
|
|
185
|
-
isDataValid: isValid,
|
|
186
|
-
metadata: chartMetadata
|
|
187
|
-
});
|
|
188
|
-
const prefersReducedMotion = usePrefersReducedMotion();
|
|
189
|
-
if (!isValid) {
|
|
190
|
-
return /* @__PURE__ */ _jsx("div", {
|
|
191
|
-
className: clsx("pie-chart", pie_chart_module_default["pie-chart"], className),
|
|
192
|
-
children: /* @__PURE__ */ _jsx("div", {
|
|
193
|
-
className: pie_chart_module_default["error-message"],
|
|
194
|
-
children: message
|
|
195
|
-
})
|
|
196
|
-
});
|
|
197
|
-
}
|
|
198
|
-
const availableWidth = svgWrapperWidth > 0 ? svgWrapperWidth : 300;
|
|
199
|
-
const availableHeight = svgWrapperHeight > 0 ? svgWrapperHeight : 300;
|
|
200
|
-
const availableSize = Math.min(availableWidth, availableHeight);
|
|
201
|
-
const actualSize = size ? Math.min(size, availableSize) : availableSize;
|
|
202
|
-
const width = actualSize;
|
|
203
|
-
const height = actualSize;
|
|
204
|
-
const radius = Math.min(width, height) / 2;
|
|
205
|
-
const centerX = width / 2;
|
|
206
|
-
const centerY = height / 2;
|
|
207
|
-
const padAngle = gapScale * (2 * Math.PI / data.length);
|
|
208
|
-
const outerRadius = radius - padding;
|
|
209
|
-
const innerRadius = thickness === 0 ? 0 : outerRadius * (1 - thickness);
|
|
210
|
-
const maxCornerRadius = (outerRadius - innerRadius) / 2;
|
|
211
|
-
const cornerRadius = cornerScale ? Math.min(cornerScale * outerRadius, maxCornerRadius) : 0;
|
|
212
|
-
const dataWithIndex = visibleData.map((d) => {
|
|
213
|
-
const originalIndex = data.findIndex((item) => item.label === d.label);
|
|
214
|
-
return {
|
|
215
|
-
...d,
|
|
216
|
-
index: originalIndex >= 0 ? originalIndex : 0
|
|
217
|
-
};
|
|
218
|
-
});
|
|
219
|
-
const accessors = {
|
|
220
|
-
value: (d) => d.value,
|
|
221
|
-
fill: (d) => {
|
|
222
|
-
return getElementStyles({
|
|
223
|
-
data: d,
|
|
224
|
-
index: d.index
|
|
225
|
-
}).color;
|
|
226
|
-
}
|
|
227
|
-
};
|
|
228
|
-
const legendElement = showLegend && /* @__PURE__ */ _jsx(Legend, {
|
|
229
|
-
orientation: legendOrientation,
|
|
230
|
-
position: legendPosition,
|
|
231
|
-
alignment: legendAlignment,
|
|
232
|
-
labelStyles: {
|
|
233
|
-
maxWidth: legendMaxWidth,
|
|
234
|
-
textOverflow: legendTextOverflow
|
|
235
|
-
},
|
|
236
|
-
itemClassName: legendItemClassName,
|
|
237
|
-
shape: legendShape,
|
|
238
|
-
chartId,
|
|
239
|
-
interactive: legendInteractive
|
|
240
|
-
});
|
|
241
|
-
return /* @__PURE__ */ _jsx(SingleChartContext.Provider, {
|
|
242
|
-
value: {
|
|
243
|
-
chartId,
|
|
244
|
-
chartWidth: width,
|
|
245
|
-
chartHeight: height
|
|
246
|
-
},
|
|
247
|
-
children: /* @__PURE__ */ _jsxs(Stack, {
|
|
248
|
-
ref: containerRef,
|
|
249
|
-
direction: "column",
|
|
250
|
-
gap,
|
|
251
|
-
className: clsx(
|
|
252
|
-
"pie-chart",
|
|
253
|
-
pie_chart_module_default["pie-chart"],
|
|
254
|
-
// Fill parent when no explicit dimensions provided
|
|
255
|
-
{
|
|
256
|
-
[pie_chart_module_default["pie-chart--responsive"]]: !propWidth && !propHeight
|
|
257
|
-
},
|
|
258
|
-
className
|
|
259
|
-
),
|
|
260
|
-
style: {
|
|
261
|
-
width: propWidth || void 0,
|
|
262
|
-
height: propHeight || void 0
|
|
263
|
-
},
|
|
264
|
-
children: [legendPosition === "top" && legendElement, /* @__PURE__ */ _jsx("div", {
|
|
265
|
-
className: pie_chart_module_default["pie-chart__svg-wrapper"],
|
|
266
|
-
ref: svgWrapperRef,
|
|
267
|
-
children: /* @__PURE__ */ _jsxs("svg", {
|
|
268
|
-
viewBox: `0 0 ${width} ${height}`,
|
|
269
|
-
preserveAspectRatio: "xMidYMid meet",
|
|
270
|
-
width,
|
|
271
|
-
height,
|
|
272
|
-
children: [/* @__PURE__ */ _jsx("defs", {
|
|
273
|
-
children: /* @__PURE__ */ _jsx(radial_wipe_animation_default, {
|
|
274
|
-
id: `radial-wipe-${chartId}`,
|
|
275
|
-
radius: outerRadius,
|
|
276
|
-
innerRadius
|
|
277
|
-
})
|
|
278
|
-
}), /* @__PURE__ */ _jsxs(Group, {
|
|
279
|
-
top: centerY,
|
|
280
|
-
left: centerX,
|
|
281
|
-
mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,
|
|
282
|
-
children: [allSegmentsHidden ? /* @__PURE__ */ _jsx("text", {
|
|
283
|
-
textAnchor: "middle",
|
|
284
|
-
dy: ".33em",
|
|
285
|
-
fill: providerTheme.gridColor || "#ccc",
|
|
286
|
-
fontSize: "14",
|
|
287
|
-
fontFamily: "-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif",
|
|
288
|
-
children: __("All segments are hidden. Click legend items to show data.", "jetpack-charts")
|
|
289
|
-
}) : /* @__PURE__ */ _jsx(Pie, {
|
|
290
|
-
data: dataWithIndex,
|
|
291
|
-
pieValue: accessors.value,
|
|
292
|
-
outerRadius,
|
|
293
|
-
innerRadius,
|
|
294
|
-
padAngle,
|
|
295
|
-
cornerRadius,
|
|
296
|
-
children: (pie) => {
|
|
297
|
-
return pie.arcs.map((arc, index) => {
|
|
298
|
-
const [centroidX, centroidY] = pie.path.centroid(arc);
|
|
299
|
-
const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;
|
|
300
|
-
const handleMouseMove = (event) => {
|
|
301
|
-
if (!withTooltips) {
|
|
302
|
-
return;
|
|
303
|
-
}
|
|
304
|
-
if (containerBounds.width === 0 || containerBounds.height === 0) {
|
|
305
|
-
return;
|
|
306
|
-
}
|
|
307
|
-
showTooltip({
|
|
308
|
-
tooltipData: arc.data,
|
|
309
|
-
tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,
|
|
310
|
-
tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY
|
|
311
|
-
});
|
|
312
|
-
};
|
|
313
|
-
const pathProps = {
|
|
314
|
-
d: pie.path(arc) || "",
|
|
315
|
-
fill: accessors.fill(arc.data),
|
|
316
|
-
"data-testid": "pie-segment"
|
|
317
|
-
};
|
|
318
|
-
const groupProps = {};
|
|
319
|
-
if (withTooltips) {
|
|
320
|
-
groupProps.onMouseMove = handleMouseMove;
|
|
321
|
-
groupProps.onMouseLeave = onMouseLeave;
|
|
322
|
-
}
|
|
323
|
-
const fontSize = 12;
|
|
324
|
-
const estimatedTextWidth = getStringWidth(arc.data.label, {
|
|
325
|
-
fontSize
|
|
326
|
-
});
|
|
327
|
-
const labelPadding = 6;
|
|
328
|
-
const backgroundWidth = estimatedTextWidth + labelPadding * 2;
|
|
329
|
-
const backgroundHeight = fontSize + labelPadding * 2;
|
|
330
|
-
return /* @__PURE__ */ _jsxs("g", {
|
|
331
|
-
...groupProps,
|
|
332
|
-
children: [/* @__PURE__ */ _jsx("path", {
|
|
333
|
-
...pathProps
|
|
334
|
-
}), showLabels && hasSpaceForLabel && /* @__PURE__ */ _jsxs("g", {
|
|
335
|
-
children: [providerTheme.labelBackgroundColor && /* @__PURE__ */ _jsx("rect", {
|
|
336
|
-
x: centroidX - backgroundWidth / 2,
|
|
337
|
-
y: centroidY - backgroundHeight / 2,
|
|
338
|
-
width: backgroundWidth,
|
|
339
|
-
height: backgroundHeight,
|
|
340
|
-
fill: providerTheme.labelBackgroundColor,
|
|
341
|
-
rx: 4,
|
|
342
|
-
ry: 4,
|
|
343
|
-
pointerEvents: "none"
|
|
344
|
-
}), /* @__PURE__ */ _jsx("text", {
|
|
345
|
-
x: centroidX,
|
|
346
|
-
y: centroidY,
|
|
347
|
-
dy: ".33em",
|
|
348
|
-
fill: providerTheme.labelTextColor || "#333",
|
|
349
|
-
fontSize,
|
|
350
|
-
textAnchor: "middle",
|
|
351
|
-
pointerEvents: "none",
|
|
352
|
-
children: arc.data.label
|
|
353
|
-
})]
|
|
354
|
-
})]
|
|
355
|
-
}, `arc-${index}`);
|
|
356
|
-
});
|
|
357
|
-
}
|
|
358
|
-
}), !allSegmentsHidden && svgChildren]
|
|
359
|
-
})]
|
|
360
|
-
})
|
|
361
|
-
}), legendPosition === "bottom" && legendElement, withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ _jsx(TooltipInPortal, {
|
|
362
|
-
top: tooltipTop || 0,
|
|
363
|
-
left: tooltipLeft || 0,
|
|
364
|
-
children: /* @__PURE__ */ _jsx("div", {
|
|
365
|
-
role: "tooltip",
|
|
366
|
-
children: renderTooltip({
|
|
367
|
-
tooltipData
|
|
368
|
-
})
|
|
369
|
-
})
|
|
370
|
-
}), htmlChildren, otherChildren]
|
|
371
|
-
})
|
|
372
|
-
});
|
|
373
|
-
};
|
|
374
|
-
var PieChartWithProvider = (props) => {
|
|
375
|
-
const existingContext = useContext(GlobalChartsContext);
|
|
376
|
-
if (existingContext) {
|
|
377
|
-
return /* @__PURE__ */ _jsx(PieChartInternal, {
|
|
378
|
-
...props
|
|
379
|
-
});
|
|
380
|
-
}
|
|
381
|
-
return /* @__PURE__ */ _jsx(GlobalChartsProvider, {
|
|
382
|
-
children: /* @__PURE__ */ _jsx(PieChartInternal, {
|
|
383
|
-
...props
|
|
384
|
-
})
|
|
385
|
-
});
|
|
386
|
-
};
|
|
387
|
-
PieChartWithProvider.displayName = "PieChart";
|
|
388
|
-
var PieChart = attachSubComponents(PieChartWithProvider, {
|
|
389
|
-
Legend,
|
|
390
|
-
SVG: ChartSVG,
|
|
391
|
-
HTML: ChartHTML
|
|
392
|
-
});
|
|
393
|
-
var PieChartResponsive = attachSubComponents(withResponsive(PieChartWithProvider), {
|
|
394
|
-
Legend,
|
|
395
|
-
SVG: ChartSVG,
|
|
396
|
-
HTML: ChartHTML
|
|
397
|
-
});
|
|
398
|
-
|
|
399
|
-
export {
|
|
400
|
-
PieChart,
|
|
401
|
-
PieChartResponsive
|
|
402
|
-
};
|
|
403
|
-
//# sourceMappingURL=chunk-BCX5THDQ.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/charts/pie-chart/pie-chart.tsx","../src/charts/pie-chart/pie-chart.module.scss"],"sourcesContent":["import { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { useTooltip, useTooltipInPortal } from '@visx/tooltip';\nimport { __ } from '@wordpress/i18n';\nimport { Stack } from '@wordpress/ui';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { Legend, useChartLegendItems } from '../../components/legend';\nimport { BaseTooltip } from '../../components/tooltip';\nimport { useElementSize, useInteractiveLegendData, usePrefersReducedMotion } from '../../hooks';\nimport { GlobalChartsProvider, useChartId, useChartRegistration, useGlobalChartsContext, useGlobalChartsTheme, GlobalChartsContext } from '../../providers';\nimport { attachSubComponents } from '../../utils';\nimport { getStringWidth } from '../../visx/text';\nimport { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';\nimport { RadialWipeAnimation } from '../private/radial-wipe-animation/';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport styles from './pie-chart.module.scss';\n\n/**\n * Parameters passed to the renderTooltip function for pie charts.\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * Default tooltip renderer for pie charts.\n * Renders a BaseTooltip with the hovered segment's data.\n *\n * @param {PieChartRenderTooltipParams} params - The tooltip parameters containing the hovered data point\n * @return {ReactNode} The rendered tooltip content\n */\nconst renderDefaultPieTooltip = ({\n tooltipData\n}) => {\n return /*#__PURE__*/_jsx(BaseTooltip, {\n data: tooltipData,\n top: 0,\n left: 0,\n renderContainer: false\n });\n};\n\n// Base props type with optional responsive properties\n\n// Composition API types\n\n/**\n * Validates the pie chart data\n * @param data - The data to validate\n * @return Object containing validation result and error message\n */\nconst validateData = data => {\n if (!data.length) {\n return {\n isValid: false,\n message: 'No data available'\n };\n }\n\n // Check for negative values\n const hasNegativeValues = data.some(item => item.percentage < 0 || item.value < 0);\n if (hasNegativeValues) {\n return {\n isValid: false,\n message: 'Invalid data: Negative values are not allowed'\n };\n }\n\n // Validate total percentage\n const totalPercentage = data.reduce((sum, item) => sum + item.percentage, 0);\n if (Math.abs(totalPercentage - 100) > 0.01) {\n // Using small epsilon for floating point comparison\n return {\n isValid: false,\n message: 'Invalid percentage total: Must equal 100'\n };\n }\n return {\n isValid: true,\n message: ''\n };\n};\n\n/**\n * Renders a pie or donut chart using the provided data.\n *\n * @param {PieChartProps} props - Component props\n * @return {JSX.Element} The rendered chart component\n */\nconst PieChartInternal = ({\n data,\n chartId: providedChartId,\n withTooltips = false,\n className,\n showLegend = false,\n legendOrientation = 'horizontal',\n legendPosition = 'bottom',\n legendAlignment = 'center',\n legendMaxWidth,\n legendTextOverflow = 'wrap',\n legendItemClassName,\n legendShape = 'circle',\n width: propWidth,\n height: propHeight,\n size,\n animation,\n thickness = 1,\n padding = 0,\n gapScale = 0,\n cornerScale = 0,\n showLabels = true,\n legendValueDisplay = 'percentage',\n legendInteractive = false,\n children = null,\n tooltipOffsetX = 0,\n tooltipOffsetY = -15,\n renderTooltip = renderDefaultPieTooltip,\n gap = 'md'\n}) => {\n const providerTheme = useGlobalChartsTheme();\n const chartId = useChartId(providedChartId);\n const [svgWrapperRef, svgWrapperWidth, svgWrapperHeight] = useElementSize();\n const {\n tooltipOpen,\n tooltipLeft,\n tooltipTop,\n tooltipData,\n hideTooltip,\n showTooltip\n } = useTooltip();\n\n // Set up portal tooltip for better z-index handling\n // We get containerBounds to cancel out stale offsets in the position calculation\n const {\n containerRef,\n TooltipInPortal,\n containerBounds\n } = useTooltipInPortal({\n detectBounds: true,\n scroll: true,\n debounce: 0\n });\n const onMouseLeave = useCallback(() => {\n if (!withTooltips) {\n return;\n }\n hideTooltip();\n }, [withTooltips, hideTooltip]);\n const {\n getElementStyles,\n isSeriesVisible\n } = useGlobalChartsContext();\n\n // Filter and recalculate data for interactive legends\n const {\n visibleData,\n allSegmentsHidden,\n legendData\n } = useInteractiveLegendData({\n data,\n chartId,\n legendInteractive,\n isSeriesVisible\n });\n\n // Memoize legend options to prevent unnecessary re-calculations\n const legendOptions = useMemo(() => ({\n showValues: true,\n legendValueDisplay\n }), [legendValueDisplay]);\n\n // Create legend items using legendData (has recalculated percentages for visible items)\n const legendItems = useChartLegendItems(legendData, legendOptions);\n const {\n isValid,\n message\n } = validateData(data);\n\n // Process children to extract compound components\n const {\n svgChildren,\n htmlChildren,\n otherChildren\n } = useChartChildren(children, 'PieChart');\n\n // Memoize metadata to prevent unnecessary re-registration\n const chartMetadata = useMemo(() => ({\n thickness,\n gapScale,\n cornerScale\n }), [thickness, gapScale, cornerScale]);\n\n // Register chart with context only if data is valid\n useChartRegistration({\n chartId,\n legendItems,\n chartType: 'pie',\n isDataValid: isValid,\n metadata: chartMetadata\n });\n const prefersReducedMotion = usePrefersReducedMotion();\n if (!isValid) {\n return /*#__PURE__*/_jsx(\"div\", {\n className: clsx('pie-chart', styles['pie-chart'], className),\n children: /*#__PURE__*/_jsx(\"div\", {\n className: styles['error-message'],\n children: message\n })\n });\n }\n\n // Calculate the actual pie size:\n // - Measure available space from the svg-wrapper\n // - If size prop provided: use it as max, but shrink if container is smaller\n // - If no size prop: fill available space\n const availableWidth = svgWrapperWidth > 0 ? svgWrapperWidth : 300;\n const availableHeight = svgWrapperHeight > 0 ? svgWrapperHeight : 300;\n const availableSize = Math.min(availableWidth, availableHeight);\n const actualSize = size ? Math.min(size, availableSize) : availableSize;\n const width = actualSize;\n const height = actualSize;\n\n // Calculate radius based on width/height\n const radius = Math.min(width, height) / 2;\n\n // Center the chart in the available space\n const centerX = width / 2;\n const centerY = height / 2;\n\n // Calculate the angle between each (use original data length for consistent spacing)\n const padAngle = gapScale * (2 * Math.PI / data.length);\n const outerRadius = radius - padding;\n const innerRadius = thickness === 0 ? 0 : outerRadius * (1 - thickness);\n const maxCornerRadius = (outerRadius - innerRadius) / 2;\n const cornerRadius = cornerScale ? Math.min(cornerScale * outerRadius, maxCornerRadius) : 0;\n\n // Map the data to include index for color assignment\n // When interactive, we need to find the original index to maintain consistent colors\n const dataWithIndex = visibleData.map(d => {\n const originalIndex = data.findIndex(item => item.label === d.label);\n return {\n ...d,\n index: originalIndex >= 0 ? originalIndex : 0\n };\n });\n const accessors = {\n value: d => d.value,\n fill: d => {\n return getElementStyles({\n data: d,\n index: d.index\n }).color;\n }\n };\n const legendElement = showLegend && /*#__PURE__*/_jsx(Legend, {\n orientation: legendOrientation,\n position: legendPosition,\n alignment: legendAlignment,\n labelStyles: {\n maxWidth: legendMaxWidth,\n textOverflow: legendTextOverflow\n },\n itemClassName: legendItemClassName,\n shape: legendShape,\n chartId: chartId,\n interactive: legendInteractive\n });\n return /*#__PURE__*/_jsx(SingleChartContext.Provider, {\n value: {\n chartId,\n chartWidth: width,\n chartHeight: height\n },\n children: /*#__PURE__*/_jsxs(Stack, {\n ref: containerRef,\n direction: \"column\",\n gap: gap,\n className: clsx('pie-chart', styles['pie-chart'],\n // Fill parent when no explicit dimensions provided\n {\n [styles['pie-chart--responsive']]: !propWidth && !propHeight\n }, className),\n style: {\n width: propWidth || undefined,\n height: propHeight || undefined\n },\n children: [legendPosition === 'top' && legendElement, /*#__PURE__*/_jsx(\"div\", {\n className: styles['pie-chart__svg-wrapper'],\n ref: svgWrapperRef,\n children: /*#__PURE__*/_jsxs(\"svg\", {\n viewBox: `0 0 ${width} ${height}`,\n preserveAspectRatio: \"xMidYMid meet\",\n width: width,\n height: height,\n children: [/*#__PURE__*/_jsx(\"defs\", {\n children: /*#__PURE__*/_jsx(RadialWipeAnimation, {\n id: `radial-wipe-${chartId}`,\n radius: outerRadius,\n innerRadius: innerRadius\n })\n }), /*#__PURE__*/_jsxs(Group, {\n top: centerY,\n left: centerX,\n mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,\n children: [allSegmentsHidden ? /*#__PURE__*/_jsx(\"text\", {\n textAnchor: \"middle\",\n dy: \".33em\",\n fill: providerTheme.gridColor || '#ccc',\n fontSize: \"14\",\n fontFamily: \"-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif\",\n children: __('All segments are hidden. Click legend items to show data.', 'jetpack-charts')\n }) : /*#__PURE__*/_jsx(Pie, {\n data: dataWithIndex,\n pieValue: accessors.value,\n outerRadius: outerRadius,\n innerRadius: innerRadius,\n padAngle: padAngle,\n cornerRadius: cornerRadius,\n children: pie => {\n return pie.arcs.map((arc, index) => {\n const [centroidX, centroidY] = pie.path.centroid(arc);\n const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;\n const handleMouseMove = event => {\n if (!withTooltips) {\n return;\n }\n\n // Don't show tooltip until container bounds are measured\n if (containerBounds.width === 0 || containerBounds.height === 0) {\n return;\n }\n\n // Use clientX/Y and subtract containerBounds to cancel out any stale offset.\n // TooltipInPortal calculates: tooltipLeft + containerBounds.left + scrollX\n // By passing (clientX - containerBounds.left), we get:\n // (clientX - containerBounds.left) + containerBounds.left + scrollX = clientX + scrollX\n // This gives correct page coordinates regardless of stale bounds.\n showTooltip({\n tooltipData: arc.data,\n tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,\n tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY\n });\n };\n const pathProps = {\n d: pie.path(arc) || '',\n fill: accessors.fill(arc.data),\n 'data-testid': 'pie-segment'\n };\n const groupProps = {};\n if (withTooltips) {\n groupProps.onMouseMove = handleMouseMove;\n groupProps.onMouseLeave = onMouseLeave;\n }\n\n // Estimate text width more accurately for background sizing\n const fontSize = 12;\n const estimatedTextWidth = getStringWidth(arc.data.label, {\n fontSize\n });\n const labelPadding = 6;\n const backgroundWidth = estimatedTextWidth + labelPadding * 2;\n const backgroundHeight = fontSize + labelPadding * 2;\n return /*#__PURE__*/_jsxs(\"g\", {\n ...groupProps,\n children: [/*#__PURE__*/_jsx(\"path\", {\n ...pathProps\n }), showLabels && hasSpaceForLabel && /*#__PURE__*/_jsxs(\"g\", {\n children: [providerTheme.labelBackgroundColor && /*#__PURE__*/_jsx(\"rect\", {\n x: centroidX - backgroundWidth / 2,\n y: centroidY - backgroundHeight / 2,\n width: backgroundWidth,\n height: backgroundHeight,\n fill: providerTheme.labelBackgroundColor,\n rx: 4,\n ry: 4,\n pointerEvents: \"none\"\n }), /*#__PURE__*/_jsx(\"text\", {\n x: centroidX,\n y: centroidY,\n dy: \".33em\",\n fill: providerTheme.labelTextColor || '#333',\n fontSize: fontSize,\n textAnchor: \"middle\",\n pointerEvents: \"none\",\n children: arc.data.label\n })]\n })]\n }, `arc-${index}`);\n });\n }\n }), !allSegmentsHidden && svgChildren]\n })]\n })\n }), legendPosition === 'bottom' && legendElement, withTooltips && tooltipOpen && tooltipData && /*#__PURE__*/_jsx(TooltipInPortal, {\n top: tooltipTop || 0,\n left: tooltipLeft || 0,\n children: /*#__PURE__*/_jsx(\"div\", {\n role: \"tooltip\",\n children: renderTooltip({\n tooltipData\n })\n })\n }), htmlChildren, otherChildren]\n })\n });\n};\nconst PieChartWithProvider = props => {\n const existingContext = useContext(GlobalChartsContext);\n\n // If we're already in a GlobalChartsProvider context, don't create a new one\n if (existingContext) {\n return /*#__PURE__*/_jsx(PieChartInternal, {\n ...props\n });\n }\n\n // Otherwise, create our own GlobalChartsProvider\n return /*#__PURE__*/_jsx(GlobalChartsProvider, {\n children: /*#__PURE__*/_jsx(PieChartInternal, {\n ...props\n })\n });\n};\nPieChartWithProvider.displayName = 'PieChart';\n\n// Create PieChart with composition API\nconst PieChart = attachSubComponents(PieChartWithProvider, {\n Legend: Legend,\n SVG: ChartSVG,\n HTML: ChartHTML\n});\n\n// Create responsive PieChart with composition API\nconst PieChartResponsive = attachSubComponents(withResponsive(PieChartWithProvider), {\n Legend: Legend,\n SVG: ChartSVG,\n HTML: ChartHTML\n});\nexport { PieChartResponsive as default, PieChart as PieChartUnresponsive };","import 'css-chunk:src/charts/pie-chart/pie-chart.module.scss';export default {\n \"pie-chart\": \"a8ccharts-C-n-Gu\",\n \"pie-chart--responsive\": \"a8ccharts-IQVR6j\",\n \"pie-chart__svg-wrapper\": \"a8ccharts-iQ1Rki\"\n};"],"mappings":"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","names":[]}
|
package/dist/chunk-BPYKWMI7.js
DELETED
|
@@ -1,194 +0,0 @@
|
|
|
1
|
-
// src/components/tooltip/base-tooltip.tsx
|
|
2
|
-
import { formatNumber } from "@automattic/number-formatters";
|
|
3
|
-
|
|
4
|
-
// src/components/tooltip/base-tooltip.module.scss
|
|
5
|
-
var base_tooltip_module_default = {
|
|
6
|
-
"tooltip": "a8ccharts-OfX6nd"
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
// src/components/tooltip/base-tooltip.tsx
|
|
10
|
-
import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
-
var DefaultTooltipContent = ({
|
|
12
|
-
data
|
|
13
|
-
}) => /* @__PURE__ */ _jsxs(_Fragment, {
|
|
14
|
-
children: [data?.label, ": ", data?.valueDisplay || formatNumber(data?.value)]
|
|
15
|
-
});
|
|
16
|
-
var BaseTooltip = ({
|
|
17
|
-
data,
|
|
18
|
-
top,
|
|
19
|
-
left,
|
|
20
|
-
component: Component = DefaultTooltipContent,
|
|
21
|
-
children,
|
|
22
|
-
className,
|
|
23
|
-
style,
|
|
24
|
-
renderContainer = true
|
|
25
|
-
}) => {
|
|
26
|
-
const content = children || data && /* @__PURE__ */ _jsx(Component, {
|
|
27
|
-
data,
|
|
28
|
-
className
|
|
29
|
-
});
|
|
30
|
-
if (!renderContainer) {
|
|
31
|
-
return content;
|
|
32
|
-
}
|
|
33
|
-
return /* @__PURE__ */ _jsx("div", {
|
|
34
|
-
className: base_tooltip_module_default.tooltip,
|
|
35
|
-
style: {
|
|
36
|
-
top,
|
|
37
|
-
left,
|
|
38
|
-
...style
|
|
39
|
-
},
|
|
40
|
-
role: "tooltip",
|
|
41
|
-
children: content
|
|
42
|
-
});
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
// src/components/tooltip/accessible-tooltip.tsx
|
|
46
|
-
import { Tooltip, TooltipContext } from "@visx/xychart";
|
|
47
|
-
import { useContext, useEffect, useCallback, useMemo } from "react";
|
|
48
|
-
import { jsx as _jsx2 } from "react/jsx-runtime";
|
|
49
|
-
var AccessibleTooltip = ({
|
|
50
|
-
renderTooltip,
|
|
51
|
-
selectedIndex,
|
|
52
|
-
tooltipRef,
|
|
53
|
-
keyboardFocusedClassName,
|
|
54
|
-
series = [],
|
|
55
|
-
mode = "group",
|
|
56
|
-
...props
|
|
57
|
-
}) => {
|
|
58
|
-
const tooltipContext = useContext(TooltipContext);
|
|
59
|
-
const tooltipData = useMemo(() => {
|
|
60
|
-
if (mode !== "individual") return [];
|
|
61
|
-
if (series.length === 0) return [];
|
|
62
|
-
const maxDataPoints = Math.max(...series.map((s) => s.data.length));
|
|
63
|
-
const flattened = [];
|
|
64
|
-
for (let dataPointIndex = 0; dataPointIndex < maxDataPoints; dataPointIndex++) {
|
|
65
|
-
for (let seriesIndex = 0; seriesIndex < series.length; seriesIndex++) {
|
|
66
|
-
const seriesData = series[seriesIndex];
|
|
67
|
-
if (dataPointIndex < seriesData.data.length) {
|
|
68
|
-
flattened.push({
|
|
69
|
-
datum: seriesData.data[dataPointIndex],
|
|
70
|
-
seriesLabel: seriesData.label,
|
|
71
|
-
seriesIndex,
|
|
72
|
-
dataPointIndex
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
return flattened;
|
|
78
|
-
}, [series, mode]);
|
|
79
|
-
useEffect(() => {
|
|
80
|
-
if (selectedIndex === void 0) {
|
|
81
|
-
tooltipContext?.hideTooltip();
|
|
82
|
-
return;
|
|
83
|
-
}
|
|
84
|
-
if (mode === "group") {
|
|
85
|
-
series.forEach((s, index) => {
|
|
86
|
-
if (selectedIndex < s.data.length) {
|
|
87
|
-
const datum = s.data[selectedIndex];
|
|
88
|
-
tooltipContext?.showTooltip({
|
|
89
|
-
datum,
|
|
90
|
-
key: s.label,
|
|
91
|
-
index
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
|
-
});
|
|
95
|
-
} else if (mode === "individual") {
|
|
96
|
-
if (selectedIndex < tooltipData.length) {
|
|
97
|
-
const tooltipItem = tooltipData[selectedIndex];
|
|
98
|
-
tooltipContext?.showTooltip({
|
|
99
|
-
datum: tooltipItem.datum,
|
|
100
|
-
key: tooltipItem.seriesLabel,
|
|
101
|
-
index: tooltipItem.seriesIndex
|
|
102
|
-
});
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
}, [selectedIndex, tooltipData, series]);
|
|
106
|
-
const focusableRenderTooltip = useMemo(() => {
|
|
107
|
-
if (!renderTooltip) return void 0;
|
|
108
|
-
return (params) => {
|
|
109
|
-
const tooltipContent = renderTooltip(params);
|
|
110
|
-
if (selectedIndex !== void 0) {
|
|
111
|
-
return /* @__PURE__ */ _jsx2("div", {
|
|
112
|
-
ref: tooltipRef,
|
|
113
|
-
tabIndex: -1,
|
|
114
|
-
role: "tooltip",
|
|
115
|
-
"aria-atomic": "true",
|
|
116
|
-
className: keyboardFocusedClassName,
|
|
117
|
-
children: tooltipContent
|
|
118
|
-
}, `chart-tooltip-${selectedIndex}`);
|
|
119
|
-
}
|
|
120
|
-
return /* @__PURE__ */ _jsx2("div", {
|
|
121
|
-
role: "tooltip",
|
|
122
|
-
"aria-live": "polite",
|
|
123
|
-
children: tooltipContent
|
|
124
|
-
});
|
|
125
|
-
};
|
|
126
|
-
}, [renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName]);
|
|
127
|
-
return /* @__PURE__ */ _jsx2(Tooltip, {
|
|
128
|
-
...props,
|
|
129
|
-
renderTooltip: focusableRenderTooltip
|
|
130
|
-
});
|
|
131
|
-
};
|
|
132
|
-
var useKeyboardNavigation = ({
|
|
133
|
-
selectedIndex,
|
|
134
|
-
setSelectedIndex,
|
|
135
|
-
isNavigating,
|
|
136
|
-
setIsNavigating,
|
|
137
|
-
chartRef,
|
|
138
|
-
totalPoints
|
|
139
|
-
}) => {
|
|
140
|
-
const tooltipRef = useCallback((element) => {
|
|
141
|
-
if (element && selectedIndex !== void 0) {
|
|
142
|
-
element.focus();
|
|
143
|
-
}
|
|
144
|
-
}, [selectedIndex]);
|
|
145
|
-
const onChartFocus = useCallback(() => {
|
|
146
|
-
if (!isNavigating && selectedIndex !== void 0) {
|
|
147
|
-
setSelectedIndex(0);
|
|
148
|
-
}
|
|
149
|
-
}, [isNavigating, selectedIndex, setSelectedIndex]);
|
|
150
|
-
const onChartBlur = useCallback(() => {
|
|
151
|
-
setIsNavigating(false);
|
|
152
|
-
}, [setIsNavigating]);
|
|
153
|
-
const onChartKeyDown = useCallback((event) => {
|
|
154
|
-
if (totalPoints === 0) return;
|
|
155
|
-
if (event.key === "Tab") {
|
|
156
|
-
chartRef.current?.focus();
|
|
157
|
-
setSelectedIndex(void 0);
|
|
158
|
-
setIsNavigating(false);
|
|
159
|
-
return;
|
|
160
|
-
}
|
|
161
|
-
const currentSelectedIndex = selectedIndex === void 0 ? -1 : selectedIndex;
|
|
162
|
-
if (currentSelectedIndex + 1 >= totalPoints && ["ArrowRight"].includes(event.key)) {
|
|
163
|
-
chartRef.current?.focus();
|
|
164
|
-
setSelectedIndex(void 0);
|
|
165
|
-
setIsNavigating(false);
|
|
166
|
-
return;
|
|
167
|
-
}
|
|
168
|
-
event.preventDefault();
|
|
169
|
-
if (["ArrowRight"].includes(event.key)) {
|
|
170
|
-
setIsNavigating(true);
|
|
171
|
-
setSelectedIndex((currentSelectedIndex + 1) % totalPoints);
|
|
172
|
-
} else if (["ArrowLeft"].includes(event.key)) {
|
|
173
|
-
setIsNavigating(true);
|
|
174
|
-
setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);
|
|
175
|
-
} else if (event.key === "Escape") {
|
|
176
|
-
setSelectedIndex(void 0);
|
|
177
|
-
setIsNavigating(false);
|
|
178
|
-
chartRef.current?.focus();
|
|
179
|
-
}
|
|
180
|
-
}, [totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef]);
|
|
181
|
-
return {
|
|
182
|
-
tooltipRef,
|
|
183
|
-
onChartFocus,
|
|
184
|
-
onChartBlur,
|
|
185
|
-
onChartKeyDown
|
|
186
|
-
};
|
|
187
|
-
};
|
|
188
|
-
|
|
189
|
-
export {
|
|
190
|
-
BaseTooltip,
|
|
191
|
-
AccessibleTooltip,
|
|
192
|
-
useKeyboardNavigation
|
|
193
|
-
};
|
|
194
|
-
//# sourceMappingURL=chunk-BPYKWMI7.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/tooltip/base-tooltip.tsx","../src/components/tooltip/base-tooltip.module.scss","../src/components/tooltip/accessible-tooltip.tsx"],"sourcesContent":["import { formatNumber } from '@automattic/number-formatters';\nimport styles from './base-tooltip.module.scss';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nconst DefaultTooltipContent = ({\n data\n}) => /*#__PURE__*/_jsxs(_Fragment, {\n children: [data?.label, \": \", data?.valueDisplay || formatNumber(data?.value)]\n});\nexport const BaseTooltip = ({\n data,\n top,\n left,\n component: Component = DefaultTooltipContent,\n children,\n className,\n style,\n renderContainer = true\n}) => {\n const content = children || data && /*#__PURE__*/_jsx(Component, {\n data: data,\n className: className\n });\n if (!renderContainer) {\n return content;\n }\n return /*#__PURE__*/_jsx(\"div\", {\n className: styles.tooltip,\n style: {\n top,\n left,\n ...style\n },\n role: \"tooltip\",\n children: content\n });\n};","import 'css-chunk:src/components/tooltip/base-tooltip.module.scss';export default {\n \"tooltip\": \"a8ccharts-OfX6nd\"\n};","import { Tooltip, TooltipContext } from '@visx/xychart';\nimport { useContext, useEffect, useCallback, useMemo } from 'react';\n\n// Type for flattened tooltip data used in individual mode\n\n// Enhanced tooltip with keyboard navigation and accessibility\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const AccessibleTooltip = ({\n renderTooltip,\n selectedIndex,\n tooltipRef,\n keyboardFocusedClassName,\n series = [],\n mode = 'group',\n ...props\n}) => {\n const tooltipContext = useContext(TooltipContext);\n const tooltipData = useMemo(() => {\n if (mode !== 'individual') return [];\n if (series.length === 0) return [];\n const maxDataPoints = Math.max(...series.map(s => s.data.length));\n const flattened = [];\n\n // Pattern: [series1[0], series2[0], series3[0], series1[1], series2[1], series3[1], ...]\n for (let dataPointIndex = 0; dataPointIndex < maxDataPoints; dataPointIndex++) {\n for (let seriesIndex = 0; seriesIndex < series.length; seriesIndex++) {\n const seriesData = series[seriesIndex];\n if (dataPointIndex < seriesData.data.length) {\n flattened.push({\n datum: seriesData.data[dataPointIndex],\n seriesLabel: seriesData.label,\n seriesIndex,\n dataPointIndex\n });\n }\n }\n }\n return flattened;\n }, [series, mode]);\n\n // Handle tooltip highlighting for keyboard navigation\n useEffect(() => {\n if (selectedIndex === undefined) {\n tooltipContext?.hideTooltip();\n return;\n }\n if (mode === 'group') {\n // Show all series at the selected data point index in single tooltip.\n series.forEach((s, index) => {\n if (selectedIndex < s.data.length) {\n const datum = s.data[selectedIndex];\n tooltipContext?.showTooltip({\n datum,\n key: s.label,\n index\n });\n }\n });\n } else if (mode === 'individual') {\n // Show individual tooltips for each datapoint from each series.\n if (selectedIndex < tooltipData.length) {\n const tooltipItem = tooltipData[selectedIndex];\n tooltipContext?.showTooltip({\n datum: tooltipItem.datum,\n key: tooltipItem.seriesLabel,\n index: tooltipItem.seriesIndex\n });\n }\n }\n\n // Don't include tooltipContext in the dependency array to avoid loop.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedIndex, tooltipData, series]);\n\n // Create a focusable renderTooltip that includes accessibility features\n const focusableRenderTooltip = useMemo(() => {\n if (!renderTooltip) return undefined;\n return params => {\n const tooltipContent = renderTooltip(params);\n if (selectedIndex !== undefined) {\n return /*#__PURE__*/_jsx(\"div\", {\n ref: tooltipRef,\n tabIndex: -1,\n role: \"tooltip\",\n \"aria-atomic\": \"true\",\n className: keyboardFocusedClassName,\n children: tooltipContent\n }, `chart-tooltip-${selectedIndex}`);\n }\n return /*#__PURE__*/_jsx(\"div\", {\n role: \"tooltip\",\n \"aria-live\": \"polite\",\n children: tooltipContent\n });\n };\n }, [renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName]);\n return /*#__PURE__*/_jsx(Tooltip, {\n ...props,\n renderTooltip: focusableRenderTooltip\n });\n};\n\n// Keyboard navigation hook for charts\n\nexport const useKeyboardNavigation = ({\n selectedIndex,\n setSelectedIndex,\n isNavigating,\n setIsNavigating,\n chartRef,\n totalPoints\n}) => {\n // Focus the tooltip as soon as it is rendered\n const tooltipRef = useCallback(element => {\n if (element && selectedIndex !== undefined) {\n element.focus();\n }\n }, [selectedIndex]);\n\n // On each focus of chart, reset the selectedIndex to 0, if keyboard navigation is not already active\n const onChartFocus = useCallback(() => {\n if (!isNavigating && selectedIndex !== undefined) {\n setSelectedIndex(0);\n }\n }, [isNavigating, selectedIndex, setSelectedIndex]);\n\n // On each blur of chart, keyboard navigation should restart from first tooltip\n const onChartBlur = useCallback(() => {\n setIsNavigating(false);\n }, [setIsNavigating]);\n const onChartKeyDown = useCallback(event => {\n if (totalPoints === 0) return;\n\n // Keep focus on the chart if tab is pressed\n if (event.key === 'Tab') {\n chartRef.current?.focus();\n setSelectedIndex(undefined);\n setIsNavigating(false);\n return;\n }\n const currentSelectedIndex = selectedIndex === undefined ? -1 : selectedIndex;\n if (currentSelectedIndex + 1 >= totalPoints && ['ArrowRight'].includes(event.key)) {\n chartRef.current?.focus();\n setSelectedIndex(undefined);\n setIsNavigating(false);\n return;\n }\n event.preventDefault();\n if (['ArrowRight'].includes(event.key)) {\n setIsNavigating(true);\n setSelectedIndex((currentSelectedIndex + 1) % totalPoints);\n } else if (['ArrowLeft'].includes(event.key)) {\n setIsNavigating(true);\n setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);\n } else if (event.key === 'Escape') {\n setSelectedIndex(undefined);\n setIsNavigating(false);\n chartRef.current?.focus();\n }\n }, [totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef]);\n return {\n tooltipRef,\n onChartFocus,\n onChartBlur,\n onChartKeyDown\n };\n};\n\n// Re-export the base Tooltip for backwards compatibility\nexport { Tooltip };"],"mappings":"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","names":["_jsx"]}
|