@automattic/charts 0.57.0 → 0.58.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 +16 -2
- package/dist/charts/bar-chart/index.cjs +7 -5
- package/dist/charts/bar-chart/index.cjs.map +1 -1
- package/dist/charts/bar-chart/index.css +12 -24
- package/dist/charts/bar-chart/index.css.map +1 -1
- package/dist/charts/bar-chart/index.d.cts +3 -4
- package/dist/charts/bar-chart/index.d.ts +3 -4
- package/dist/charts/bar-chart/index.js +6 -4
- package/dist/charts/bar-list-chart/index.cjs +8 -6
- package/dist/charts/bar-list-chart/index.cjs.map +1 -1
- package/dist/charts/bar-list-chart/index.css +12 -24
- package/dist/charts/bar-list-chart/index.css.map +1 -1
- package/dist/charts/bar-list-chart/index.d.cts +3 -3
- package/dist/charts/bar-list-chart/index.d.ts +3 -3
- package/dist/charts/bar-list-chart/index.js +7 -5
- package/dist/charts/conversion-funnel-chart/index.cjs +5 -5
- package/dist/charts/conversion-funnel-chart/index.css +0 -94
- package/dist/charts/conversion-funnel-chart/index.css.map +1 -1
- package/dist/charts/conversion-funnel-chart/index.d.cts +1 -1
- package/dist/charts/conversion-funnel-chart/index.d.ts +1 -1
- package/dist/charts/conversion-funnel-chart/index.js +4 -4
- package/dist/charts/geo-chart/index.cjs +4 -4
- package/dist/charts/geo-chart/index.css +0 -94
- package/dist/charts/geo-chart/index.css.map +1 -1
- package/dist/charts/geo-chart/index.d.cts +1 -1
- package/dist/charts/geo-chart/index.d.ts +1 -1
- package/dist/charts/geo-chart/index.js +3 -3
- package/dist/charts/leaderboard-chart/index.cjs +7 -6
- package/dist/charts/leaderboard-chart/index.cjs.map +1 -1
- package/dist/charts/leaderboard-chart/index.css +12 -24
- package/dist/charts/leaderboard-chart/index.css.map +1 -1
- package/dist/charts/leaderboard-chart/index.d.cts +3 -3
- package/dist/charts/leaderboard-chart/index.d.ts +3 -3
- package/dist/charts/leaderboard-chart/index.js +6 -5
- package/dist/charts/line-chart/index.cjs +7 -5
- package/dist/charts/line-chart/index.cjs.map +1 -1
- package/dist/charts/line-chart/index.css +12 -24
- package/dist/charts/line-chart/index.css.map +1 -1
- package/dist/charts/line-chart/index.d.cts +3 -4
- package/dist/charts/line-chart/index.d.ts +3 -4
- package/dist/charts/line-chart/index.js +6 -4
- package/dist/charts/pie-chart/index.cjs +7 -6
- package/dist/charts/pie-chart/index.cjs.map +1 -1
- package/dist/charts/pie-chart/index.css +12 -24
- package/dist/charts/pie-chart/index.css.map +1 -1
- package/dist/charts/pie-chart/index.d.cts +7 -13
- package/dist/charts/pie-chart/index.d.ts +7 -13
- package/dist/charts/pie-chart/index.js +6 -5
- package/dist/charts/pie-semi-circle-chart/index.cjs +7 -6
- package/dist/charts/pie-semi-circle-chart/index.cjs.map +1 -1
- package/dist/charts/pie-semi-circle-chart/index.css +12 -24
- package/dist/charts/pie-semi-circle-chart/index.css.map +1 -1
- package/dist/charts/pie-semi-circle-chart/index.d.cts +7 -13
- package/dist/charts/pie-semi-circle-chart/index.d.ts +7 -13
- package/dist/charts/pie-semi-circle-chart/index.js +6 -5
- package/dist/charts/sparkline/index.cjs +8 -6
- package/dist/charts/sparkline/index.cjs.map +1 -1
- package/dist/charts/sparkline/index.css +12 -24
- package/dist/charts/sparkline/index.css.map +1 -1
- package/dist/charts/sparkline/index.js +7 -5
- package/dist/{chunk-32DH6JDF.js → chunk-2I67QUIV.js} +52 -420
- package/dist/chunk-2I67QUIV.js.map +1 -0
- package/dist/{chunk-WLODYNLB.js → chunk-2ICEEQOC.js} +31 -27
- package/dist/chunk-2ICEEQOC.js.map +1 -0
- package/dist/{chunk-IU4DYUAV.js → chunk-4B7BL2DD.js} +3 -3
- package/dist/{chunk-BCX5THDQ.js → chunk-4OXMTKAL.js} +24 -26
- package/dist/chunk-4OXMTKAL.js.map +1 -0
- package/dist/{chunk-4OPFE4RM.js → chunk-B6NLZFRW.js} +30 -27
- package/dist/chunk-B6NLZFRW.js.map +1 -0
- package/dist/{chunk-D2UH4CFE.cjs → chunk-BBAUQOW6.cjs} +9 -9
- package/dist/{chunk-D2UH4CFE.cjs.map → chunk-BBAUQOW6.cjs.map} +1 -1
- package/dist/{chunk-XKRJL2QT.cjs → chunk-CMMHCTBX.cjs} +45 -47
- package/dist/chunk-CMMHCTBX.cjs.map +1 -0
- package/dist/{chunk-YE2T52VZ.cjs → chunk-CPPXJATQ.cjs} +51 -47
- package/dist/chunk-CPPXJATQ.cjs.map +1 -0
- package/dist/{chunk-H2V4JMSA.js → chunk-DKU775VC.js} +3 -3
- package/dist/{chunk-ZH4F5RMG.cjs → chunk-GRA7Y2ZG.cjs} +46 -48
- package/dist/chunk-GRA7Y2ZG.cjs.map +1 -0
- package/dist/{chunk-DAU3HNEG.js → chunk-JJIMABHT.js} +9 -2
- package/dist/chunk-JJIMABHT.js.map +1 -0
- package/dist/{chunk-CZGYJKG6.js → chunk-KJHWXOCZ.js} +4 -4
- package/dist/{chunk-6CCZL2JJ.js → chunk-KRWGSOJ2.js} +30 -2
- package/dist/chunk-KRWGSOJ2.js.map +1 -0
- package/dist/{chunk-V36ERY7Y.js → chunk-LTFH7SEG.js} +24 -26
- package/dist/chunk-LTFH7SEG.js.map +1 -0
- package/dist/{chunk-PXLEMUGJ.js → chunk-MUNOKLLE.js} +3 -3
- package/dist/{chunk-VTS3PNMS.cjs → chunk-MXGLYWVP.cjs} +9 -2
- package/dist/chunk-MXGLYWVP.cjs.map +1 -0
- package/dist/{chunk-Z45KX47P.cjs → chunk-OYC34VTO.cjs} +154 -94
- package/dist/chunk-OYC34VTO.cjs.map +1 -0
- package/dist/{chunk-77OKCVQN.cjs → chunk-PQL5I3F6.cjs} +17 -17
- package/dist/{chunk-77OKCVQN.cjs.map → chunk-PQL5I3F6.cjs.map} +1 -1
- package/dist/{chunk-I35UYJJR.cjs → chunk-REZTQ4PH.cjs} +41 -21
- package/dist/chunk-REZTQ4PH.cjs.map +1 -0
- package/dist/{chunk-RCY6XLGU.cjs → chunk-TZRUHQOH.cjs} +36 -8
- package/dist/chunk-TZRUHQOH.cjs.map +1 -0
- package/dist/{chunk-2NCY7R4G.js → chunk-UTYVIOWZ.js} +111 -51
- package/dist/chunk-UTYVIOWZ.js.map +1 -0
- package/dist/{chunk-TO3OQBXG.cjs → chunk-W2LDIX26.cjs} +5 -5
- package/dist/{chunk-TO3OQBXG.cjs.map → chunk-W2LDIX26.cjs.map} +1 -1
- package/dist/{chunk-7FQX4ALL.cjs → chunk-WSG64BVN.cjs} +6 -6
- package/dist/{chunk-7FQX4ALL.cjs.map → chunk-WSG64BVN.cjs.map} +1 -1
- package/dist/chunk-WTQYGUNF.js +400 -0
- package/dist/chunk-WTQYGUNF.js.map +1 -0
- package/dist/{chunk-RHHVEJHJ.cjs → chunk-WYK7EL5R.cjs} +68 -436
- package/dist/chunk-WYK7EL5R.cjs.map +1 -0
- package/dist/{chunk-VJM5XCB4.cjs → chunk-XC4KHJYX.cjs} +49 -46
- package/dist/chunk-XC4KHJYX.cjs.map +1 -0
- package/dist/chunk-XVBH5XHE.cjs +400 -0
- package/dist/chunk-XVBH5XHE.cjs.map +1 -0
- package/dist/{chunk-Z26M4V2M.js → chunk-YAFQVVDI.js} +41 -21
- package/dist/chunk-YAFQVVDI.js.map +1 -0
- package/dist/components/legend/index.cjs +4 -3
- package/dist/components/legend/index.cjs.map +1 -1
- package/dist/components/legend/index.css +12 -24
- package/dist/components/legend/index.css.map +1 -1
- package/dist/components/legend/index.d.cts +4 -4
- package/dist/components/legend/index.d.ts +4 -4
- package/dist/components/legend/index.js +3 -2
- package/dist/components/tooltip/index.d.cts +1 -1
- package/dist/components/tooltip/index.d.ts +1 -1
- package/dist/hooks/index.cjs +3 -5
- package/dist/hooks/index.cjs.map +1 -1
- package/dist/hooks/index.css +0 -94
- package/dist/hooks/index.css.map +1 -1
- package/dist/hooks/index.d.cts +3 -11
- package/dist/hooks/index.d.ts +3 -11
- package/dist/hooks/index.js +2 -4
- package/dist/index.cjs +18 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +12 -24
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +7 -7
- package/dist/index.d.ts +7 -7
- package/dist/index.js +17 -15
- package/dist/{leaderboard-chart-DR7CGb0L.d.cts → leaderboard-chart-BSbg0ufV.d.cts} +3 -7
- package/dist/{leaderboard-chart-BKYYXcg2.d.ts → leaderboard-chart-odEYxxEC.d.ts} +3 -7
- package/dist/{legend-C2grwnWk.d.cts → legend-DFkosEvC.d.cts} +1 -1
- package/dist/{legend-Cj0xM5dU.d.ts → legend-DLswHhOk.d.ts} +1 -1
- package/dist/providers/index.cjs +3 -3
- package/dist/providers/index.css +0 -94
- package/dist/providers/index.css.map +1 -1
- package/dist/providers/index.d.cts +3 -3
- package/dist/providers/index.d.ts +3 -3
- package/dist/providers/index.js +2 -2
- package/dist/{themes-CyjKm-P_.d.cts → themes-D0qc5JaW.d.cts} +2 -2
- package/dist/{themes-BmVGrYnF.d.ts → themes-itO4Ht5g.d.ts} +2 -2
- package/dist/{types-KtOPPzPX.d.cts → types-B5f6XQ7Q.d.cts} +1 -1
- package/dist/{types-CuUEszrM.d.ts → types-BsHooDbM.d.ts} +1 -1
- package/dist/{types-I67mddpr.d.cts → types-BuSrRM4p.d.ts} +3 -32
- package/dist/{types-DZordNiO.d.cts → types-ChOUI9-N.d.cts} +80 -40
- package/dist/{types-DZordNiO.d.ts → types-ChOUI9-N.d.ts} +80 -40
- package/dist/{types-I67mddpr.d.ts → types-Dfw9VOKI.d.cts} +3 -32
- package/dist/utils/index.cjs +2 -2
- package/dist/utils/index.d.cts +1 -1
- package/dist/utils/index.d.ts +1 -1
- package/dist/utils/index.js +1 -1
- package/package.json +6 -6
- package/src/charts/bar-chart/bar-chart.tsx +17 -18
- package/src/charts/bar-chart/test/bar-chart.test.tsx +48 -31
- package/src/charts/leaderboard-chart/leaderboard-chart.tsx +38 -41
- 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.tsx +18 -16
- 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.tsx +23 -22
- package/src/charts/pie-chart/test/composition-api.test.tsx +41 -0
- package/src/charts/pie-chart/test/pie-chart.test.tsx +9 -9
- package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx +21 -23
- package/src/charts/pie-semi-circle-chart/test/pie-semi-circle-chart.test.tsx +33 -5
- 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/components/legend/index.ts +1 -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/types.ts +7 -34
- package/src/hooks/index.ts +0 -1
- package/src/index.ts +1 -7
- package/src/types.ts +83 -38
- 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 +2 -2
- package/tsup.config.ts +1 -1
- package/dist/chunk-2NCY7R4G.js.map +0 -1
- package/dist/chunk-32DH6JDF.js.map +0 -1
- package/dist/chunk-4OPFE4RM.js.map +0 -1
- package/dist/chunk-6CCZL2JJ.js.map +0 -1
- package/dist/chunk-BCX5THDQ.js.map +0 -1
- package/dist/chunk-DAU3HNEG.js.map +0 -1
- package/dist/chunk-I35UYJJR.cjs.map +0 -1
- package/dist/chunk-RCY6XLGU.cjs.map +0 -1
- package/dist/chunk-RHHVEJHJ.cjs.map +0 -1
- package/dist/chunk-V36ERY7Y.js.map +0 -1
- package/dist/chunk-VJM5XCB4.cjs.map +0 -1
- package/dist/chunk-VTS3PNMS.cjs.map +0 -1
- package/dist/chunk-WLODYNLB.js.map +0 -1
- package/dist/chunk-XKRJL2QT.cjs.map +0 -1
- package/dist/chunk-YE2T52VZ.cjs.map +0 -1
- package/dist/chunk-Z26M4V2M.js.map +0 -1
- package/dist/chunk-Z45KX47P.cjs.map +0 -1
- package/dist/chunk-ZH4F5RMG.cjs.map +0 -1
- package/src/hooks/use-has-legend-child.ts +0 -22
- /package/dist/{chunk-IU4DYUAV.js.map → chunk-4B7BL2DD.js.map} +0 -0
- /package/dist/{chunk-H2V4JMSA.js.map → chunk-DKU775VC.js.map} +0 -0
- /package/dist/{chunk-CZGYJKG6.js.map → chunk-KJHWXOCZ.js.map} +0 -0
- /package/dist/{chunk-PXLEMUGJ.js.map → chunk-MUNOKLLE.js.map} +0 -0
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkCPPXJATQcjs = require('./chunk-CPPXJATQ.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
var _chunkASLARV7Lcjs = require('./chunk-ASLARV7L.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _chunkWYK7EL5Rcjs = require('./chunk-WYK7EL5R.cjs');
|
|
10
10
|
|
|
11
11
|
// src/charts/sparkline/sparkline.tsx
|
|
12
12
|
var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);
|
|
@@ -52,7 +52,7 @@ var SparklineComponent = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
|
|
|
52
52
|
margin: marginProp,
|
|
53
53
|
animation
|
|
54
54
|
}, ref) => {
|
|
55
|
-
const theme =
|
|
55
|
+
const theme = _chunkWYK7EL5Rcjs.useGlobalChartsTheme.call(void 0, );
|
|
56
56
|
const themeStrokeWidth = _nullishCoalesce(_optionalChain([theme, 'access', _ => _.sparkline, 'optionalAccess', _2 => _2.strokeWidth]), () => ( 1.5));
|
|
57
57
|
const strokeWidth = _nullishCoalesce(strokeWidthProp, () => ( themeStrokeWidth));
|
|
58
58
|
const seriesData = _react.useMemo.call(void 0, () => {
|
|
@@ -128,7 +128,7 @@ var SparklineComponent = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
|
|
|
128
128
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
|
|
129
129
|
ref,
|
|
130
130
|
className: _clsx2.default.call(void 0, "sparkline", sparkline_module_default.sparkline, className),
|
|
131
|
-
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
131
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCPPXJATQcjs.LineChart, {
|
|
132
132
|
data: seriesWithGradient,
|
|
133
133
|
width,
|
|
134
134
|
height,
|
|
@@ -162,4 +162,4 @@ var Sparkline = _chunkASLARV7Lcjs.withResponsive.call(void 0, SparklineUnrespons
|
|
|
162
162
|
|
|
163
163
|
|
|
164
164
|
exports.SparklineUnresponsive = SparklineUnresponsive; exports.Sparkline = Sparkline;
|
|
165
|
-
//# sourceMappingURL=chunk-
|
|
165
|
+
//# sourceMappingURL=chunk-W2LDIX26.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-TO3OQBXG.cjs","../src/charts/sparkline/sparkline.tsx","../src/charts/sparkline/sparkline.module.scss"],"names":[],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-TO3OQBXG.cjs","sourcesContent":[null,"import clsx from 'clsx';\nimport { useMemo, forwardRef } from 'react';\nimport { useGlobalChartsTheme } from '../../providers';\nimport { LineChartUnresponsive } from '../line-chart';\nimport { withResponsive } from '../private/with-responsive';\nimport styles from './sparkline.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DEFAULT_WIDTH = 100;\nconst DEFAULT_HEIGHT = 40;\n\n/**\n * Transforms a simple number array into SeriesData format for LineChart.\n * Uses index-based dates to create a linear x-axis.\n *\n * @param data - Array of numeric values to plot\n * @param color - Optional color for the line stroke\n * @param strokeWidth - Optional stroke width for the line\n * @return SeriesData array suitable for LineChart\n */\nconst transformToSeriesData = (data, color, strokeWidth) => {\n // Use a fixed base date and increment by index to create linear spacing\n const baseDate = new Date(2000, 0, 1);\n return [{\n label: 'sparkline',\n data: data.map((value, index) => ({\n date: new Date(baseDate.getTime() + index * 86400000),\n // Add days\n value\n })),\n options: {\n stroke: color,\n seriesLineStyle: strokeWidth ? {\n strokeWidth\n } : undefined\n }\n }];\n};\nconst SparklineComponent = /*#__PURE__*/forwardRef(({\n data,\n width = DEFAULT_WIDTH,\n height = DEFAULT_HEIGHT,\n color,\n strokeWidth: strokeWidthProp,\n withGradientFill = true,\n gradient,\n className,\n chartId,\n margin: marginProp,\n animation\n}, ref) => {\n const theme = useGlobalChartsTheme();\n\n // Get theme defaults for sparkline\n const themeStrokeWidth = theme.sparkline?.strokeWidth ?? 1.5;\n\n // Use prop values or fall back to theme defaults\n const strokeWidth = strokeWidthProp ?? themeStrokeWidth;\n\n // Transform number[] to SeriesData[] for LineChart\n const seriesData = useMemo(() => {\n if (!data || data.length === 0) {\n return [];\n }\n return transformToSeriesData(data, color, strokeWidth);\n }, [data, color, strokeWidth]);\n\n // Merge margins with theme defaults\n const finalMargin = useMemo(() => {\n const themeMargin = theme.sparkline?.margin ?? {\n top: 2,\n right: 2,\n bottom: 2,\n left: 2\n };\n const margin = marginProp ?? themeMargin;\n return {\n ...themeMargin,\n ...margin\n };\n }, [marginProp, theme.sparkline?.margin]);\n\n // Build gradient options for the series if custom gradient is provided\n // Note: This must be called before any early returns to follow React hooks rules\n const seriesWithGradient = useMemo(() => {\n if (!gradient || seriesData.length === 0) {\n return seriesData;\n }\n return seriesData.map(series => ({\n ...series,\n options: {\n ...series.options,\n gradient: {\n from: gradient.from || color || '#000000',\n to: gradient.to || '#ffffff',\n fromOpacity: gradient.fromOpacity ?? 0.5,\n toOpacity: gradient.toOpacity ?? 0.0\n }\n }\n }));\n }, [seriesData, gradient, color]);\n\n // Handle empty data\n if (!data || data.length === 0) {\n return /*#__PURE__*/_jsx(\"div\", {\n ref: ref,\n className: clsx('sparkline', styles.sparkline, styles['sparkline--empty'], className),\n style: {\n width,\n height\n }\n });\n }\n\n // Handle single data point - render a simple dot\n if (data.length === 1) {\n const cx = width / 2;\n const cy = height / 2;\n const resolvedColor = color || '#000000';\n return /*#__PURE__*/_jsx(\"div\", {\n ref: ref,\n className: clsx('sparkline', styles.sparkline, styles['sparkline--single-point'], className),\n style: {\n width,\n height\n },\n children: /*#__PURE__*/_jsx(\"svg\", {\n width: width,\n height: height,\n \"aria-hidden\": \"true\",\n children: /*#__PURE__*/_jsx(\"circle\", {\n cx: cx,\n cy: cy,\n r: strokeWidth * 1.5,\n fill: resolvedColor\n })\n })\n });\n }\n return /*#__PURE__*/_jsx(\"div\", {\n ref: ref,\n className: clsx('sparkline', styles.sparkline, className),\n children: /*#__PURE__*/_jsx(LineChartUnresponsive, {\n data: seriesWithGradient,\n width: width,\n height: height,\n margin: finalMargin,\n chartId: chartId,\n withGradientFill: withGradientFill,\n withTooltips: false,\n showLegend: false,\n gridVisibility: \"none\",\n options: {\n axis: {\n x: {\n display: false\n },\n y: {\n display: false\n }\n }\n },\n curveType: \"monotone\",\n animation: animation\n })\n });\n});\nSparklineComponent.displayName = 'SparklineComponent';\n\n/**\n * Sparkline - A minimal line chart for inline data visualization.\n *\n * Sparklines are compact charts designed to be embedded inline with text or\n * displayed in small spaces like table cells or dashboards. They show trends\n * without axes, labels, or other chart chrome.\n *\n * This component is built on top of LineChart with preconfigured settings\n * for minimal display (no axes, grid, tooltips, or legend).\n */\nconst SparklineUnresponsive = SparklineComponent;\nSparklineUnresponsive.displayName = 'SparklineUnresponsive';\n\n/**\n * Responsive Sparkline chart component\n */\nconst Sparkline = withResponsive(SparklineUnresponsive);\nexport { Sparkline as default, SparklineUnresponsive };","import 'css-chunk:src/charts/sparkline/sparkline.module.scss';export default {\n \"sparkline\": \"a8ccharts-o-3Z8B\",\n \"sparkline--empty\": \"a8ccharts-CbLbcd\"\n};"]}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-W2LDIX26.cjs","../src/charts/sparkline/sparkline.tsx","../src/charts/sparkline/sparkline.module.scss"],"names":[],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-W2LDIX26.cjs","sourcesContent":[null,"import clsx from 'clsx';\nimport { useMemo, forwardRef } from 'react';\nimport { useGlobalChartsTheme } from '../../providers';\nimport { LineChartUnresponsive } from '../line-chart';\nimport { withResponsive } from '../private/with-responsive';\nimport styles from './sparkline.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DEFAULT_WIDTH = 100;\nconst DEFAULT_HEIGHT = 40;\n\n/**\n * Transforms a simple number array into SeriesData format for LineChart.\n * Uses index-based dates to create a linear x-axis.\n *\n * @param data - Array of numeric values to plot\n * @param color - Optional color for the line stroke\n * @param strokeWidth - Optional stroke width for the line\n * @return SeriesData array suitable for LineChart\n */\nconst transformToSeriesData = (data, color, strokeWidth) => {\n // Use a fixed base date and increment by index to create linear spacing\n const baseDate = new Date(2000, 0, 1);\n return [{\n label: 'sparkline',\n data: data.map((value, index) => ({\n date: new Date(baseDate.getTime() + index * 86400000),\n // Add days\n value\n })),\n options: {\n stroke: color,\n seriesLineStyle: strokeWidth ? {\n strokeWidth\n } : undefined\n }\n }];\n};\nconst SparklineComponent = /*#__PURE__*/forwardRef(({\n data,\n width = DEFAULT_WIDTH,\n height = DEFAULT_HEIGHT,\n color,\n strokeWidth: strokeWidthProp,\n withGradientFill = true,\n gradient,\n className,\n chartId,\n margin: marginProp,\n animation\n}, ref) => {\n const theme = useGlobalChartsTheme();\n\n // Get theme defaults for sparkline\n const themeStrokeWidth = theme.sparkline?.strokeWidth ?? 1.5;\n\n // Use prop values or fall back to theme defaults\n const strokeWidth = strokeWidthProp ?? themeStrokeWidth;\n\n // Transform number[] to SeriesData[] for LineChart\n const seriesData = useMemo(() => {\n if (!data || data.length === 0) {\n return [];\n }\n return transformToSeriesData(data, color, strokeWidth);\n }, [data, color, strokeWidth]);\n\n // Merge margins with theme defaults\n const finalMargin = useMemo(() => {\n const themeMargin = theme.sparkline?.margin ?? {\n top: 2,\n right: 2,\n bottom: 2,\n left: 2\n };\n const margin = marginProp ?? themeMargin;\n return {\n ...themeMargin,\n ...margin\n };\n }, [marginProp, theme.sparkline?.margin]);\n\n // Build gradient options for the series if custom gradient is provided\n // Note: This must be called before any early returns to follow React hooks rules\n const seriesWithGradient = useMemo(() => {\n if (!gradient || seriesData.length === 0) {\n return seriesData;\n }\n return seriesData.map(series => ({\n ...series,\n options: {\n ...series.options,\n gradient: {\n from: gradient.from || color || '#000000',\n to: gradient.to || '#ffffff',\n fromOpacity: gradient.fromOpacity ?? 0.5,\n toOpacity: gradient.toOpacity ?? 0.0\n }\n }\n }));\n }, [seriesData, gradient, color]);\n\n // Handle empty data\n if (!data || data.length === 0) {\n return /*#__PURE__*/_jsx(\"div\", {\n ref: ref,\n className: clsx('sparkline', styles.sparkline, styles['sparkline--empty'], className),\n style: {\n width,\n height\n }\n });\n }\n\n // Handle single data point - render a simple dot\n if (data.length === 1) {\n const cx = width / 2;\n const cy = height / 2;\n const resolvedColor = color || '#000000';\n return /*#__PURE__*/_jsx(\"div\", {\n ref: ref,\n className: clsx('sparkline', styles.sparkline, styles['sparkline--single-point'], className),\n style: {\n width,\n height\n },\n children: /*#__PURE__*/_jsx(\"svg\", {\n width: width,\n height: height,\n \"aria-hidden\": \"true\",\n children: /*#__PURE__*/_jsx(\"circle\", {\n cx: cx,\n cy: cy,\n r: strokeWidth * 1.5,\n fill: resolvedColor\n })\n })\n });\n }\n return /*#__PURE__*/_jsx(\"div\", {\n ref: ref,\n className: clsx('sparkline', styles.sparkline, className),\n children: /*#__PURE__*/_jsx(LineChartUnresponsive, {\n data: seriesWithGradient,\n width: width,\n height: height,\n margin: finalMargin,\n chartId: chartId,\n withGradientFill: withGradientFill,\n withTooltips: false,\n showLegend: false,\n gridVisibility: \"none\",\n options: {\n axis: {\n x: {\n display: false\n },\n y: {\n display: false\n }\n }\n },\n curveType: \"monotone\",\n animation: animation\n })\n });\n});\nSparklineComponent.displayName = 'SparklineComponent';\n\n/**\n * Sparkline - A minimal line chart for inline data visualization.\n *\n * Sparklines are compact charts designed to be embedded inline with text or\n * displayed in small spaces like table cells or dashboards. They show trends\n * without axes, labels, or other chart chrome.\n *\n * This component is built on top of LineChart with preconfigured settings\n * for minimal display (no axes, grid, tooltips, or legend).\n */\nconst SparklineUnresponsive = SparklineComponent;\nSparklineUnresponsive.displayName = 'SparklineUnresponsive';\n\n/**\n * Responsive Sparkline chart component\n */\nconst Sparkline = withResponsive(SparklineUnresponsive);\nexport { Sparkline as default, SparklineUnresponsive };","import 'css-chunk:src/charts/sparkline/sparkline.module.scss';export default {\n \"sparkline\": \"a8ccharts-o-3Z8B\",\n \"sparkline--empty\": \"a8ccharts-CbLbcd\"\n};"]}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkXC4KHJYXcjs = require('./chunk-XC4KHJYX.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
var _chunkASLARV7Lcjs = require('./chunk-ASLARV7L.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _chunkWYK7EL5Rcjs = require('./chunk-WYK7EL5R.cjs');
|
|
11
11
|
|
|
12
12
|
// src/charts/bar-list-chart/bar-list-chart.tsx
|
|
13
13
|
var _numberformatters = require('@automattic/number-formatters');
|
|
@@ -164,7 +164,7 @@ var BarListChartInternal = ({
|
|
|
164
164
|
yOffset: _nullishCoalesce(options.yOffset, () => ( getDefaultYOffset(data, yScale, height, isMultiSeries)))
|
|
165
165
|
};
|
|
166
166
|
}, [options, width, data, height]);
|
|
167
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
167
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXC4KHJYXcjs.BarChart, {
|
|
168
168
|
orientation: "horizontal",
|
|
169
169
|
gridVisibility: "none",
|
|
170
170
|
data,
|
|
@@ -197,13 +197,13 @@ var BarListChartInternal = ({
|
|
|
197
197
|
});
|
|
198
198
|
};
|
|
199
199
|
var BarListChart = (props) => {
|
|
200
|
-
const existingContext = _react.useContext.call(void 0,
|
|
200
|
+
const existingContext = _react.useContext.call(void 0, _chunkWYK7EL5Rcjs.GlobalChartsContext);
|
|
201
201
|
if (existingContext) {
|
|
202
202
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BarListChartInternal, {
|
|
203
203
|
...props
|
|
204
204
|
});
|
|
205
205
|
}
|
|
206
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
206
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWYK7EL5Rcjs.GlobalChartsProvider, {
|
|
207
207
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BarListChartInternal, {
|
|
208
208
|
...props
|
|
209
209
|
})
|
|
@@ -216,4 +216,4 @@ var BarListChartResponsive = _chunkASLARV7Lcjs.withResponsive.call(void 0, BarLi
|
|
|
216
216
|
|
|
217
217
|
|
|
218
218
|
exports.BarListChart = BarListChart; exports.BarListChartResponsive = BarListChartResponsive;
|
|
219
|
-
//# sourceMappingURL=chunk-
|
|
219
|
+
//# sourceMappingURL=chunk-WSG64BVN.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-7FQX4ALL.cjs","../src/charts/bar-list-chart/bar-list-chart.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-7FQX4ALL.cjs","sourcesContent":[null,"import { formatNumberCompact } from '@automattic/number-formatters';\nimport { Group } from '@visx/group';\nimport { createScale, scaleBand } from '@visx/scale';\nimport { Text } from '@visx/text';\nimport { useContext, useMemo } from 'react';\nimport { GlobalChartsContext, GlobalChartsProvider } from '../../providers';\nimport { BarChartUnresponsive } from '../bar-chart';\nimport { withResponsive } from '../private/with-responsive';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * Get the bandwidth of a scale\n * @param scale - The scale to get the bandwidth of\n * @return The bandwidth of the scale\n */\nconst getScaleBandwidth = scale => {\n // Broaden type before using 'xxx' in s as typeguard.\n const s = scale;\n return s && 'bandwidth' in s ? s?.bandwidth() ?? 0 : 0;\n};\nconst DefaultLabelComponent = ({\n textProps,\n x,\n y,\n label,\n formatter\n}) => {\n return /*#__PURE__*/_jsx(Text, {\n ...textProps,\n textAnchor: \"start\",\n x: x,\n y: y,\n children: formatter(label)\n });\n};\nconst DefaultValueComponent = ({\n textProps,\n x,\n y,\n value,\n formatter\n}) => {\n return /*#__PURE__*/_jsx(Text, {\n ...textProps,\n textAnchor: \"end\",\n x: x,\n y: y,\n fontWeight: 500,\n children: formatter(value)\n });\n};\nconst AxisRenderer = ({\n ticks,\n tickLabelProps,\n yOffset,\n labelPosition,\n valuePosition,\n data,\n labelFormatter,\n valueFormatter,\n LabelComponent = DefaultLabelComponent,\n ValueComponent = DefaultValueComponent\n}) => {\n if (ticks.length === 0) {\n return null;\n }\n\n // compute the max tick label size to compute label offset\n const allTickLabelProps = ticks.map(({\n value,\n index\n }) => typeof tickLabelProps === 'function' ? tickLabelProps(value, index, ticks) : {});\n return ticks.map(({\n from,\n formattedValue\n }, index) => {\n const textProps = allTickLabelProps[index] ?? {};\n // No need to pass textAnchor and dx. It will be handled by the component.\n delete textProps.textAnchor;\n delete textProps.dx;\n const sum = data.reduce((acc, {\n data: seriesData\n }) => acc + (seriesData[index]?.value ?? 0), 0);\n const y = from.y + yOffset;\n return /*#__PURE__*/_jsxs(Group, {\n children: [/*#__PURE__*/_jsx(LabelComponent, {\n textProps: textProps,\n x: labelPosition,\n y: y,\n label: formattedValue,\n formatter: labelFormatter\n }), /*#__PURE__*/_jsx(ValueComponent, {\n textProps: textProps,\n x: valuePosition,\n y: y,\n value: sum,\n formatter: valueFormatter,\n data: data,\n index: index\n })]\n }, index);\n });\n};\n\n/**\n * Calculate the default y offset for the bar list chart.\n * @param data - The data to calculate the default y offset for.\n * @param yScaleConfig - The y scale configuration.\n * @param height - The height of the chart.\n * @param isMultiSeries - Whether the chart is a multi series chart.\n * @return The default y offset.\n */\nconst getDefaultYOffset = (data, yScaleConfig, height, isMultiSeries) => {\n if (!isMultiSeries) {\n return 0;\n }\n const dataKeys = data.map(({\n label\n }) => label);\n const yScale = createScale({\n type: 'band',\n range: [0, height],\n domain: dataKeys,\n ...yScaleConfig\n });\n const groupScale = scaleBand({\n domain: dataKeys,\n range: [0, getScaleBandwidth(yScale)],\n padding: yScaleConfig.paddingInner\n });\n const GAP_BETWEEN_BARS = 6;\n const barThickness = getScaleBandwidth(groupScale);\n\n // Use negative value to move the label up.\n return -(barThickness + GAP_BETWEEN_BARS);\n};\nconst BarListChartInternal = ({\n data,\n width,\n height,\n options = {},\n margin = {\n left: 0,\n right: 20,\n bottom: 0,\n top: 0\n },\n ...rest\n}) => {\n const chartOptions = useMemo(() => {\n const isMultiSeries = data.length > 1;\n const defaultYScale = {\n // For multi series, set default padding larger to look better.\n paddingInner: isMultiSeries ? 0.3 : 0.1,\n padding: isMultiSeries ? 0.3 : 0.1\n };\n const defaultXScale = {\n // Always begin at zero since the x axis is hidden.\n zero: true\n };\n const yScale = {\n ...defaultYScale,\n ...(options.yScale ?? {})\n };\n const xScale = {\n ...defaultXScale,\n ...(options.xScale ?? {})\n };\n return {\n yScale,\n xScale,\n labelPosition: options.labelPosition ?? (isMultiSeries ? 0 : 10),\n valueFormatter: options.valueFormatter ?? (value => formatNumberCompact(value)),\n labelFormatter: options.labelFormatter ?? (value => String(value)),\n valuePosition: options.valuePosition ?? width,\n yOffset: options.yOffset ?? getDefaultYOffset(data, yScale, height, isMultiSeries)\n };\n }, [options, width, data, height]);\n return /*#__PURE__*/_jsx(BarChartUnresponsive, {\n orientation: \"horizontal\",\n gridVisibility: 'none',\n data: data,\n width: width,\n height: height,\n margin: margin,\n options: {\n axis: {\n y: {\n children: renderProps => /*#__PURE__*/_jsx(AxisRenderer, {\n ...renderProps,\n data: data,\n yOffset: chartOptions.yOffset,\n labelPosition: chartOptions.labelPosition,\n valuePosition: chartOptions.valuePosition,\n labelFormatter: chartOptions.labelFormatter,\n valueFormatter: chartOptions.valueFormatter,\n LabelComponent: options.labelComponent,\n ValueComponent: options.valueComponent\n })\n },\n x: {\n children: () => null\n }\n },\n xScale: chartOptions.xScale,\n yScale: chartOptions.yScale\n },\n ...rest\n });\n};\nconst BarListChart = props => {\n const existingContext = useContext(GlobalChartsContext);\n\n // If we're already in a GlobalChartsProvider context, render the core component directly\n if (existingContext) {\n return /*#__PURE__*/_jsx(BarListChartInternal, {\n ...props\n });\n }\n\n // Otherwise, wrap with our own GlobalChartsProvider\n return /*#__PURE__*/_jsx(GlobalChartsProvider, {\n children: /*#__PURE__*/_jsx(BarListChartInternal, {\n ...props\n })\n });\n};\nBarListChart.displayName = 'BarListChart';\nconst BarListChartResponsive = withResponsive(BarListChart);\nexport { BarListChartResponsive as default, BarListChart as BarListChartUnresponsive };"]}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-WSG64BVN.cjs","../src/charts/bar-list-chart/bar-list-chart.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-WSG64BVN.cjs","sourcesContent":[null,"import { formatNumberCompact } from '@automattic/number-formatters';\nimport { Group } from '@visx/group';\nimport { createScale, scaleBand } from '@visx/scale';\nimport { Text } from '@visx/text';\nimport { useContext, useMemo } from 'react';\nimport { GlobalChartsContext, GlobalChartsProvider } from '../../providers';\nimport { BarChartUnresponsive } from '../bar-chart';\nimport { withResponsive } from '../private/with-responsive';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * Get the bandwidth of a scale\n * @param scale - The scale to get the bandwidth of\n * @return The bandwidth of the scale\n */\nconst getScaleBandwidth = scale => {\n // Broaden type before using 'xxx' in s as typeguard.\n const s = scale;\n return s && 'bandwidth' in s ? s?.bandwidth() ?? 0 : 0;\n};\nconst DefaultLabelComponent = ({\n textProps,\n x,\n y,\n label,\n formatter\n}) => {\n return /*#__PURE__*/_jsx(Text, {\n ...textProps,\n textAnchor: \"start\",\n x: x,\n y: y,\n children: formatter(label)\n });\n};\nconst DefaultValueComponent = ({\n textProps,\n x,\n y,\n value,\n formatter\n}) => {\n return /*#__PURE__*/_jsx(Text, {\n ...textProps,\n textAnchor: \"end\",\n x: x,\n y: y,\n fontWeight: 500,\n children: formatter(value)\n });\n};\nconst AxisRenderer = ({\n ticks,\n tickLabelProps,\n yOffset,\n labelPosition,\n valuePosition,\n data,\n labelFormatter,\n valueFormatter,\n LabelComponent = DefaultLabelComponent,\n ValueComponent = DefaultValueComponent\n}) => {\n if (ticks.length === 0) {\n return null;\n }\n\n // compute the max tick label size to compute label offset\n const allTickLabelProps = ticks.map(({\n value,\n index\n }) => typeof tickLabelProps === 'function' ? tickLabelProps(value, index, ticks) : {});\n return ticks.map(({\n from,\n formattedValue\n }, index) => {\n const textProps = allTickLabelProps[index] ?? {};\n // No need to pass textAnchor and dx. It will be handled by the component.\n delete textProps.textAnchor;\n delete textProps.dx;\n const sum = data.reduce((acc, {\n data: seriesData\n }) => acc + (seriesData[index]?.value ?? 0), 0);\n const y = from.y + yOffset;\n return /*#__PURE__*/_jsxs(Group, {\n children: [/*#__PURE__*/_jsx(LabelComponent, {\n textProps: textProps,\n x: labelPosition,\n y: y,\n label: formattedValue,\n formatter: labelFormatter\n }), /*#__PURE__*/_jsx(ValueComponent, {\n textProps: textProps,\n x: valuePosition,\n y: y,\n value: sum,\n formatter: valueFormatter,\n data: data,\n index: index\n })]\n }, index);\n });\n};\n\n/**\n * Calculate the default y offset for the bar list chart.\n * @param data - The data to calculate the default y offset for.\n * @param yScaleConfig - The y scale configuration.\n * @param height - The height of the chart.\n * @param isMultiSeries - Whether the chart is a multi series chart.\n * @return The default y offset.\n */\nconst getDefaultYOffset = (data, yScaleConfig, height, isMultiSeries) => {\n if (!isMultiSeries) {\n return 0;\n }\n const dataKeys = data.map(({\n label\n }) => label);\n const yScale = createScale({\n type: 'band',\n range: [0, height],\n domain: dataKeys,\n ...yScaleConfig\n });\n const groupScale = scaleBand({\n domain: dataKeys,\n range: [0, getScaleBandwidth(yScale)],\n padding: yScaleConfig.paddingInner\n });\n const GAP_BETWEEN_BARS = 6;\n const barThickness = getScaleBandwidth(groupScale);\n\n // Use negative value to move the label up.\n return -(barThickness + GAP_BETWEEN_BARS);\n};\nconst BarListChartInternal = ({\n data,\n width,\n height,\n options = {},\n margin = {\n left: 0,\n right: 20,\n bottom: 0,\n top: 0\n },\n ...rest\n}) => {\n const chartOptions = useMemo(() => {\n const isMultiSeries = data.length > 1;\n const defaultYScale = {\n // For multi series, set default padding larger to look better.\n paddingInner: isMultiSeries ? 0.3 : 0.1,\n padding: isMultiSeries ? 0.3 : 0.1\n };\n const defaultXScale = {\n // Always begin at zero since the x axis is hidden.\n zero: true\n };\n const yScale = {\n ...defaultYScale,\n ...(options.yScale ?? {})\n };\n const xScale = {\n ...defaultXScale,\n ...(options.xScale ?? {})\n };\n return {\n yScale,\n xScale,\n labelPosition: options.labelPosition ?? (isMultiSeries ? 0 : 10),\n valueFormatter: options.valueFormatter ?? (value => formatNumberCompact(value)),\n labelFormatter: options.labelFormatter ?? (value => String(value)),\n valuePosition: options.valuePosition ?? width,\n yOffset: options.yOffset ?? getDefaultYOffset(data, yScale, height, isMultiSeries)\n };\n }, [options, width, data, height]);\n return /*#__PURE__*/_jsx(BarChartUnresponsive, {\n orientation: \"horizontal\",\n gridVisibility: 'none',\n data: data,\n width: width,\n height: height,\n margin: margin,\n options: {\n axis: {\n y: {\n children: renderProps => /*#__PURE__*/_jsx(AxisRenderer, {\n ...renderProps,\n data: data,\n yOffset: chartOptions.yOffset,\n labelPosition: chartOptions.labelPosition,\n valuePosition: chartOptions.valuePosition,\n labelFormatter: chartOptions.labelFormatter,\n valueFormatter: chartOptions.valueFormatter,\n LabelComponent: options.labelComponent,\n ValueComponent: options.valueComponent\n })\n },\n x: {\n children: () => null\n }\n },\n xScale: chartOptions.xScale,\n yScale: chartOptions.yScale\n },\n ...rest\n });\n};\nconst BarListChart = props => {\n const existingContext = useContext(GlobalChartsContext);\n\n // If we're already in a GlobalChartsProvider context, render the core component directly\n if (existingContext) {\n return /*#__PURE__*/_jsx(BarListChartInternal, {\n ...props\n });\n }\n\n // Otherwise, wrap with our own GlobalChartsProvider\n return /*#__PURE__*/_jsx(GlobalChartsProvider, {\n children: /*#__PURE__*/_jsx(BarListChartInternal, {\n ...props\n })\n });\n};\nBarListChart.displayName = 'BarListChart';\nconst BarListChartResponsive = withResponsive(BarListChart);\nexport { BarListChartResponsive as default, BarListChart as BarListChartUnresponsive };"]}
|
|
@@ -0,0 +1,400 @@
|
|
|
1
|
+
import {
|
|
2
|
+
GlobalChartsContext,
|
|
3
|
+
useGlobalChartsContext,
|
|
4
|
+
useGlobalChartsTheme,
|
|
5
|
+
useTextTruncation
|
|
6
|
+
} from "./chunk-2I67QUIV.js";
|
|
7
|
+
import {
|
|
8
|
+
formatPercentage
|
|
9
|
+
} from "./chunk-JJIMABHT.js";
|
|
10
|
+
|
|
11
|
+
// src/components/legend/legend.tsx
|
|
12
|
+
import { useContext as useContext3, useMemo, forwardRef as forwardRef2 } from "react";
|
|
13
|
+
|
|
14
|
+
// src/charts/private/single-chart-context/single-chart-context.tsx
|
|
15
|
+
import { createContext } from "react";
|
|
16
|
+
var ChartInstanceContext = /* @__PURE__ */ createContext(null);
|
|
17
|
+
var SingleChartContext = ChartInstanceContext;
|
|
18
|
+
|
|
19
|
+
// src/charts/private/single-chart-context/use-single-chart-context.ts
|
|
20
|
+
import { useContext } from "react";
|
|
21
|
+
var useChartInstanceContext = () => {
|
|
22
|
+
const context = useContext(ChartInstanceContext);
|
|
23
|
+
if (!context) {
|
|
24
|
+
throw new Error("useChartInstanceContext must be used within a Chart component");
|
|
25
|
+
}
|
|
26
|
+
return context;
|
|
27
|
+
};
|
|
28
|
+
var useSingleChartContext = useChartInstanceContext;
|
|
29
|
+
|
|
30
|
+
// src/components/legend/private/base-legend.tsx
|
|
31
|
+
import { Group } from "@visx/group";
|
|
32
|
+
import { LegendItem, LegendLabel, LegendOrdinal, LegendShape } from "@visx/legend";
|
|
33
|
+
import { scaleOrdinal } from "@visx/scale";
|
|
34
|
+
import clsx from "clsx";
|
|
35
|
+
import { forwardRef, useCallback, useContext as useContext2 } from "react";
|
|
36
|
+
|
|
37
|
+
// src/components/legend/utils/value-or-identity.ts
|
|
38
|
+
function valueOrIdentity(_) {
|
|
39
|
+
if (_ && typeof _ === "object" && "value" in _ && typeof _.value !== "undefined")
|
|
40
|
+
return _.value;
|
|
41
|
+
return _;
|
|
42
|
+
}
|
|
43
|
+
function valueOrIdentityString(_) {
|
|
44
|
+
return String(valueOrIdentity(_));
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// src/components/legend/utils/label-transform-factory.ts
|
|
48
|
+
function labelTransformFactory({
|
|
49
|
+
scale,
|
|
50
|
+
labelFormat
|
|
51
|
+
}) {
|
|
52
|
+
return (d, i) => ({
|
|
53
|
+
datum: d,
|
|
54
|
+
index: i,
|
|
55
|
+
text: `${labelFormat(d, i)}`,
|
|
56
|
+
value: scale(d)
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// src/components/legend/private/base-legend.module.scss
|
|
61
|
+
var base_legend_module_default = {
|
|
62
|
+
"legend": "a8ccharts-89ApsU",
|
|
63
|
+
"legend--horizontal": "a8ccharts-AELBvX",
|
|
64
|
+
"legend--vertical": "a8ccharts-fX8uQe",
|
|
65
|
+
"legend--alignment-start": "a8ccharts-DEe0wg",
|
|
66
|
+
"legend--alignment-center": "a8ccharts-WBKF9I",
|
|
67
|
+
"legend--alignment-end": "a8ccharts-JfwMng",
|
|
68
|
+
"legend-item": "a8ccharts-Vflwq8",
|
|
69
|
+
"legend-item--interactive": "a8ccharts-qGsavM",
|
|
70
|
+
"legend-item--inactive": "a8ccharts-ZtDY-Q",
|
|
71
|
+
"legend-item-label": "a8ccharts-2H65Kr",
|
|
72
|
+
"legend-item-text--wrap": "a8ccharts-faSDBI",
|
|
73
|
+
"legend-item-text--ellipsis": "a8ccharts-FISUIO",
|
|
74
|
+
"legend-item-value": "a8ccharts-DTZlT-"
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
// src/components/legend/private/base-legend.tsx
|
|
78
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
79
|
+
var orientationToFlexDirection = {
|
|
80
|
+
horizontal: "row",
|
|
81
|
+
vertical: "column"
|
|
82
|
+
};
|
|
83
|
+
var LegendText = ({
|
|
84
|
+
text,
|
|
85
|
+
textOverflow,
|
|
86
|
+
maxWidth
|
|
87
|
+
}) => {
|
|
88
|
+
const isEllipsis = maxWidth != null && textOverflow === "ellipsis";
|
|
89
|
+
const [textRef, isTruncated] = useTextTruncation(Boolean(isEllipsis));
|
|
90
|
+
return /* @__PURE__ */ _jsx("span", {
|
|
91
|
+
ref: textRef,
|
|
92
|
+
className: clsx(base_legend_module_default["legend-item-text"], maxWidth != null && base_legend_module_default[`legend-item-text--${textOverflow}`]),
|
|
93
|
+
style: {
|
|
94
|
+
...maxWidth != null && {
|
|
95
|
+
maxWidth,
|
|
96
|
+
minWidth: 0
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
title: isEllipsis && isTruncated ? text : void 0,
|
|
100
|
+
children: text
|
|
101
|
+
});
|
|
102
|
+
};
|
|
103
|
+
var BaseLegend = /* @__PURE__ */ forwardRef(({
|
|
104
|
+
items,
|
|
105
|
+
className,
|
|
106
|
+
orientation = "horizontal",
|
|
107
|
+
alignment = "center",
|
|
108
|
+
shape = "rect",
|
|
109
|
+
fill = valueOrIdentityString,
|
|
110
|
+
size = valueOrIdentityString,
|
|
111
|
+
labelFormat = valueOrIdentity,
|
|
112
|
+
labelTransform = labelTransformFactory,
|
|
113
|
+
itemStyles,
|
|
114
|
+
itemClassName,
|
|
115
|
+
labelStyles,
|
|
116
|
+
labelClassName,
|
|
117
|
+
shapeStyles,
|
|
118
|
+
render,
|
|
119
|
+
interactive = false,
|
|
120
|
+
chartId
|
|
121
|
+
}, ref) => {
|
|
122
|
+
const {
|
|
123
|
+
margin: itemMargin = "0",
|
|
124
|
+
flexDirection: itemDirection = "row"
|
|
125
|
+
} = itemStyles ?? {};
|
|
126
|
+
const {
|
|
127
|
+
justifyContent: labelJustifyContent = "flex-start",
|
|
128
|
+
flex: labelFlex = "0 0 auto",
|
|
129
|
+
margin: labelMargin = "0 4px",
|
|
130
|
+
maxWidth,
|
|
131
|
+
textOverflow = "wrap"
|
|
132
|
+
} = labelStyles ?? {};
|
|
133
|
+
const {
|
|
134
|
+
width: shapeWidth = 16,
|
|
135
|
+
height: shapeHeight = 16,
|
|
136
|
+
margin: shapeMargin = "2px 4px 2px 0"
|
|
137
|
+
} = shapeStyles ?? {};
|
|
138
|
+
const theme = useGlobalChartsTheme();
|
|
139
|
+
const context = useContext2(GlobalChartsContext);
|
|
140
|
+
const legendScale = scaleOrdinal({
|
|
141
|
+
domain: items.map((item) => item.label),
|
|
142
|
+
range: items.map((item) => item.color)
|
|
143
|
+
});
|
|
144
|
+
const domain = legendScale.domain();
|
|
145
|
+
const getShapeStyle = useCallback(({
|
|
146
|
+
index
|
|
147
|
+
}) => items[index]?.shapeStyle, [items]);
|
|
148
|
+
const handleLegendClick = useCallback((seriesLabel) => {
|
|
149
|
+
if (interactive && chartId && context) {
|
|
150
|
+
context.toggleSeriesVisibility(chartId, seriesLabel);
|
|
151
|
+
}
|
|
152
|
+
}, [interactive, chartId, context]);
|
|
153
|
+
const isSeriesVisible = useCallback((seriesLabel) => {
|
|
154
|
+
if (!interactive || !chartId || !context) {
|
|
155
|
+
return true;
|
|
156
|
+
}
|
|
157
|
+
return context.isSeriesVisible(chartId, seriesLabel);
|
|
158
|
+
}, [interactive, chartId, context]);
|
|
159
|
+
const createClickHandler = useCallback((labelText) => {
|
|
160
|
+
if (!interactive) {
|
|
161
|
+
return void 0;
|
|
162
|
+
}
|
|
163
|
+
return () => handleLegendClick(labelText);
|
|
164
|
+
}, [interactive, handleLegendClick]);
|
|
165
|
+
const createKeyDownHandler = useCallback((labelText) => {
|
|
166
|
+
if (!interactive) {
|
|
167
|
+
return void 0;
|
|
168
|
+
}
|
|
169
|
+
return (event) => {
|
|
170
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
171
|
+
event.preventDefault();
|
|
172
|
+
handleLegendClick(labelText);
|
|
173
|
+
}
|
|
174
|
+
};
|
|
175
|
+
}, [interactive, handleLegendClick]);
|
|
176
|
+
return render ? render(items) : /* @__PURE__ */ _jsx(LegendOrdinal, {
|
|
177
|
+
scale: legendScale,
|
|
178
|
+
labelFormat,
|
|
179
|
+
labelTransform,
|
|
180
|
+
children: (labels) => /* @__PURE__ */ _jsx("div", {
|
|
181
|
+
ref,
|
|
182
|
+
role: "list",
|
|
183
|
+
className: clsx(base_legend_module_default.legend, base_legend_module_default[`legend--${orientation}`], base_legend_module_default[`legend--alignment-${alignment}`], className),
|
|
184
|
+
style: {
|
|
185
|
+
flexDirection: orientationToFlexDirection[orientation],
|
|
186
|
+
...theme.legend?.containerStyles
|
|
187
|
+
},
|
|
188
|
+
children: labels.map((label, i) => {
|
|
189
|
+
const visible = isSeriesVisible(label.text);
|
|
190
|
+
const handleClick = createClickHandler(label.text);
|
|
191
|
+
const handleKeyDown = createKeyDownHandler(label.text);
|
|
192
|
+
const matchedItem = items[i];
|
|
193
|
+
return /* @__PURE__ */ _jsxs(LegendItem, {
|
|
194
|
+
className: clsx("visx-legend-item", base_legend_module_default["legend-item"], interactive && base_legend_module_default["legend-item--interactive"], !visible && base_legend_module_default["legend-item--inactive"], itemClassName),
|
|
195
|
+
margin: itemMargin,
|
|
196
|
+
flexDirection: orientation === "vertical" && alignment === "end" ? "row-reverse" : itemDirection,
|
|
197
|
+
onClick: handleClick,
|
|
198
|
+
onKeyDown: handleKeyDown,
|
|
199
|
+
role: interactive ? "button" : void 0,
|
|
200
|
+
tabIndex: interactive ? 0 : void 0,
|
|
201
|
+
"aria-pressed": interactive ? visible : void 0,
|
|
202
|
+
"aria-label": interactive ? `${label.text}: ${visible ? "visible" : "hidden"}. Toggle visibility.` : void 0,
|
|
203
|
+
children: [items[i]?.renderGlyph ? /* @__PURE__ */ _jsx("svg", {
|
|
204
|
+
width: items[i]?.glyphSize * 2,
|
|
205
|
+
height: items[i]?.glyphSize * 2,
|
|
206
|
+
children: /* @__PURE__ */ _jsx(Group, {
|
|
207
|
+
children: items[i]?.renderGlyph({
|
|
208
|
+
key: `legend-glyph-${label.text}`,
|
|
209
|
+
datum: {},
|
|
210
|
+
index: i,
|
|
211
|
+
color: fill(label),
|
|
212
|
+
size: items[i]?.glyphSize,
|
|
213
|
+
x: items[i]?.glyphSize,
|
|
214
|
+
y: items[i]?.glyphSize
|
|
215
|
+
})
|
|
216
|
+
})
|
|
217
|
+
}) : /* @__PURE__ */ _jsx(LegendShape, {
|
|
218
|
+
shape,
|
|
219
|
+
height: shapeHeight,
|
|
220
|
+
width: shapeWidth,
|
|
221
|
+
margin: shapeMargin,
|
|
222
|
+
item: domain[i],
|
|
223
|
+
itemIndex: i,
|
|
224
|
+
label,
|
|
225
|
+
fill,
|
|
226
|
+
size,
|
|
227
|
+
shapeStyle: getShapeStyle
|
|
228
|
+
}), /* @__PURE__ */ _jsxs(LegendLabel, {
|
|
229
|
+
className: clsx("visx-legend-label", base_legend_module_default["legend-item-label"], labelClassName),
|
|
230
|
+
style: {
|
|
231
|
+
justifyContent: labelJustifyContent,
|
|
232
|
+
flex: labelFlex,
|
|
233
|
+
margin: labelMargin,
|
|
234
|
+
...theme.legend?.labelStyles
|
|
235
|
+
},
|
|
236
|
+
children: [/* @__PURE__ */ _jsx(LegendText, {
|
|
237
|
+
text: label.text,
|
|
238
|
+
textOverflow,
|
|
239
|
+
maxWidth
|
|
240
|
+
}), matchedItem?.value != null && matchedItem.value !== "" && /* @__PURE__ */ _jsxs("span", {
|
|
241
|
+
className: base_legend_module_default["legend-item-value"],
|
|
242
|
+
children: ["\xA0", matchedItem.value]
|
|
243
|
+
})]
|
|
244
|
+
})]
|
|
245
|
+
}, `legend-${label.text}-${i}`);
|
|
246
|
+
})
|
|
247
|
+
})
|
|
248
|
+
});
|
|
249
|
+
});
|
|
250
|
+
|
|
251
|
+
// src/components/legend/legend.tsx
|
|
252
|
+
import { jsx as _jsx2 } from "react/jsx-runtime";
|
|
253
|
+
var Legend = /* @__PURE__ */ forwardRef2(({
|
|
254
|
+
chartId,
|
|
255
|
+
items,
|
|
256
|
+
...props
|
|
257
|
+
}, ref) => {
|
|
258
|
+
const context = useContext3(GlobalChartsContext);
|
|
259
|
+
const singleChartContext = useContext3(SingleChartContext);
|
|
260
|
+
const contextChartId = chartId ?? singleChartContext?.chartId;
|
|
261
|
+
const contextItems = useMemo(() => {
|
|
262
|
+
return contextChartId && context ? context.getChartData(contextChartId)?.legendItems : void 0;
|
|
263
|
+
}, [contextChartId, context]);
|
|
264
|
+
const legendItems = items || contextItems;
|
|
265
|
+
if (!legendItems) {
|
|
266
|
+
return null;
|
|
267
|
+
}
|
|
268
|
+
return /* @__PURE__ */ _jsx2(BaseLegend, {
|
|
269
|
+
ref,
|
|
270
|
+
items: legendItems,
|
|
271
|
+
...props,
|
|
272
|
+
chartId: contextChartId
|
|
273
|
+
});
|
|
274
|
+
});
|
|
275
|
+
|
|
276
|
+
// src/components/legend/hooks/use-chart-legend-items.ts
|
|
277
|
+
import { formatNumber } from "@automattic/number-formatters";
|
|
278
|
+
import { useMemo as useMemo2 } from "react";
|
|
279
|
+
function formatPointValue(point, showValues, legendValueDisplay = "percentage") {
|
|
280
|
+
if (!showValues || legendValueDisplay === "none") {
|
|
281
|
+
return "";
|
|
282
|
+
}
|
|
283
|
+
if ("percentage" in point) {
|
|
284
|
+
const percentagePoint = point;
|
|
285
|
+
switch (legendValueDisplay) {
|
|
286
|
+
case "percentage":
|
|
287
|
+
return formatPercentage(percentagePoint.percentage);
|
|
288
|
+
case "value":
|
|
289
|
+
return formatNumber(percentagePoint.value);
|
|
290
|
+
case "valueDisplay":
|
|
291
|
+
return percentagePoint.valueDisplay || formatNumber(percentagePoint.value);
|
|
292
|
+
default:
|
|
293
|
+
return "";
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
if ("value" in point) {
|
|
297
|
+
return point.value !== null ? formatNumber(point.value) : "";
|
|
298
|
+
}
|
|
299
|
+
return "";
|
|
300
|
+
}
|
|
301
|
+
function applyGlyphToLegendItem(baseItem, withGlyph, glyph, renderGlyph, glyphSize) {
|
|
302
|
+
if (withGlyph) {
|
|
303
|
+
const glyphToUse = glyph || renderGlyph;
|
|
304
|
+
if (glyphToUse) {
|
|
305
|
+
return {
|
|
306
|
+
...baseItem,
|
|
307
|
+
glyphSize,
|
|
308
|
+
renderGlyph: glyphToUse
|
|
309
|
+
};
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
return baseItem;
|
|
313
|
+
}
|
|
314
|
+
function processSeriesData(seriesData, getElementStyles, showValues, withGlyph, glyphSize, renderGlyph, legendShape) {
|
|
315
|
+
const mapper = (series, index) => {
|
|
316
|
+
const { color, glyph, shapeStyles } = getElementStyles({
|
|
317
|
+
data: series,
|
|
318
|
+
index,
|
|
319
|
+
legendShape
|
|
320
|
+
});
|
|
321
|
+
const baseItem = {
|
|
322
|
+
label: series.label,
|
|
323
|
+
value: showValues ? series.data?.length?.toString() || "0" : "",
|
|
324
|
+
color,
|
|
325
|
+
shapeStyle: shapeStyles
|
|
326
|
+
};
|
|
327
|
+
return applyGlyphToLegendItem(baseItem, withGlyph, glyph, renderGlyph, glyphSize);
|
|
328
|
+
};
|
|
329
|
+
return seriesData.map(mapper);
|
|
330
|
+
}
|
|
331
|
+
function processPointData(pointData, getElementStyles, showValues, legendValueDisplay, withGlyph, glyphSize, renderGlyph, legendShape) {
|
|
332
|
+
const mapper = (point, index) => {
|
|
333
|
+
const { color, glyph, shapeStyles } = getElementStyles({
|
|
334
|
+
data: point,
|
|
335
|
+
index,
|
|
336
|
+
legendShape
|
|
337
|
+
});
|
|
338
|
+
const baseItem = {
|
|
339
|
+
label: point.label,
|
|
340
|
+
value: formatPointValue(point, showValues, legendValueDisplay),
|
|
341
|
+
color,
|
|
342
|
+
shapeStyle: shapeStyles
|
|
343
|
+
};
|
|
344
|
+
return applyGlyphToLegendItem(baseItem, withGlyph, glyph, renderGlyph, glyphSize);
|
|
345
|
+
};
|
|
346
|
+
return pointData.map(mapper);
|
|
347
|
+
}
|
|
348
|
+
function useChartLegendItems(data, options = {}, legendShape) {
|
|
349
|
+
const {
|
|
350
|
+
showValues = false,
|
|
351
|
+
legendValueDisplay = "percentage",
|
|
352
|
+
withGlyph = false,
|
|
353
|
+
glyphSize = 8,
|
|
354
|
+
renderGlyph
|
|
355
|
+
} = options;
|
|
356
|
+
const { getElementStyles } = useGlobalChartsContext();
|
|
357
|
+
return useMemo2(() => {
|
|
358
|
+
if (!data || !Array.isArray(data) || data.length === 0) {
|
|
359
|
+
return [];
|
|
360
|
+
}
|
|
361
|
+
if ("data" in data[0]) {
|
|
362
|
+
return processSeriesData(
|
|
363
|
+
data,
|
|
364
|
+
getElementStyles,
|
|
365
|
+
showValues,
|
|
366
|
+
withGlyph,
|
|
367
|
+
glyphSize,
|
|
368
|
+
renderGlyph,
|
|
369
|
+
legendShape
|
|
370
|
+
);
|
|
371
|
+
}
|
|
372
|
+
return processPointData(
|
|
373
|
+
data,
|
|
374
|
+
getElementStyles,
|
|
375
|
+
showValues,
|
|
376
|
+
legendValueDisplay,
|
|
377
|
+
withGlyph,
|
|
378
|
+
glyphSize,
|
|
379
|
+
renderGlyph,
|
|
380
|
+
legendShape
|
|
381
|
+
);
|
|
382
|
+
}, [
|
|
383
|
+
data,
|
|
384
|
+
getElementStyles,
|
|
385
|
+
showValues,
|
|
386
|
+
legendValueDisplay,
|
|
387
|
+
withGlyph,
|
|
388
|
+
glyphSize,
|
|
389
|
+
renderGlyph,
|
|
390
|
+
legendShape
|
|
391
|
+
]);
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
export {
|
|
395
|
+
SingleChartContext,
|
|
396
|
+
useSingleChartContext,
|
|
397
|
+
Legend,
|
|
398
|
+
useChartLegendItems
|
|
399
|
+
};
|
|
400
|
+
//# sourceMappingURL=chunk-WTQYGUNF.js.map
|