@sproutsocial/seeds-react-data-viz 0.27.2 → 0.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{annotations-CjFoRPXf.d.mts → annotations-YfJndb5S.d.mts} +2 -2
- package/dist/{annotations-CjFoRPXf.d.ts → annotations-YfJndb5S.d.ts} +2 -2
- package/dist/{axis-DVx6Mn1k.d.mts → axis-Byl9vNMR.d.mts} +9 -9
- package/dist/{axis-DQXvjzBs.d.ts → axis-Cn8NAgwb.d.ts} +9 -9
- package/dist/bar/index.d.mts +25 -47
- package/dist/bar/index.d.ts +25 -47
- package/dist/bar/index.js +14 -14
- package/dist/bar/index.js.map +1 -1
- package/dist/bubble/index.d.mts +29 -40
- package/dist/bubble/index.d.ts +29 -40
- package/dist/bubble/index.js +18 -20
- package/dist/bubble/index.js.map +1 -1
- package/dist/{chartExport-CKYpuhik.d.mts → chartExport-B0imEQ8Y.d.mts} +4 -4
- package/dist/{chartExport-CKYpuhik.d.ts → chartExport-B0imEQ8Y.d.ts} +4 -4
- package/dist/{chartBase-Cd405GIA.d.mts → chartProps-BgGx1GTo.d.mts} +67 -23
- package/dist/{chartBase-BYipK7MZ.d.ts → chartProps-C2Lxty-_.d.ts} +67 -23
- package/dist/{chunk-WMKO3RGT.js → chunk-2S7XMWJ4.js} +3 -3
- package/dist/chunk-2S7XMWJ4.js.map +1 -0
- package/dist/{chunk-6EIJCJCN.js → chunk-I72SSPMX.js} +1 -1
- package/dist/chunk-I72SSPMX.js.map +1 -0
- package/dist/{chunk-CV45MD47.js → chunk-RDS2VCPO.js} +3 -3
- package/dist/chunk-RDS2VCPO.js.map +1 -0
- package/dist/{chunk-5TWNMPQU.js → chunk-V5EXL244.js} +73 -63
- package/dist/chunk-V5EXL244.js.map +1 -0
- package/dist/{chunk-34OKRQET.js → chunk-XH7ZKGHD.js} +5 -5
- package/dist/{chunk-34OKRQET.js.map → chunk-XH7ZKGHD.js.map} +1 -1
- package/dist/donut/index.d.mts +21 -36
- package/dist/donut/index.d.ts +21 -36
- package/dist/donut/index.js +8 -8
- package/dist/donut/index.js.map +1 -1
- package/dist/esm/bar/index.js +5 -5
- package/dist/esm/bar/index.js.map +1 -1
- package/dist/esm/bubble/index.js +10 -12
- package/dist/esm/bubble/index.js.map +1 -1
- package/dist/esm/{chunk-P3MVYSHX.js → chunk-37QVUJXM.js} +1 -1
- package/dist/esm/chunk-37QVUJXM.js.map +1 -0
- package/dist/esm/{chunk-332X77M5.js → chunk-JNQC3ZRQ.js} +3 -3
- package/dist/esm/chunk-JNQC3ZRQ.js.map +1 -0
- package/dist/esm/{chunk-MVNO5UV6.js → chunk-NBMVFYDJ.js} +2 -2
- package/dist/esm/chunk-NBMVFYDJ.js.map +1 -0
- package/dist/esm/{chunk-AL3OTBTT.js → chunk-THDIQMFN.js} +2 -2
- package/dist/esm/chunk-THDIQMFN.js.map +1 -0
- package/dist/esm/{chunk-CYCKJ5ML.js → chunk-YCYACOQU.js} +34 -24
- package/dist/esm/chunk-YCYACOQU.js.map +1 -0
- package/dist/esm/donut/index.js +3 -3
- package/dist/esm/donut/index.js.map +1 -1
- package/dist/esm/export/index.js.map +1 -1
- package/dist/esm/index.js +4 -4
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/line-area/index.js +5 -5
- package/dist/esm/line-area/index.js.map +1 -1
- package/dist/esm/sparkline/index.js +3 -3
- package/dist/esm/sparkline/index.js.map +1 -1
- package/dist/esm/wordcloud/index.js +4 -3
- package/dist/esm/wordcloud/index.js.map +1 -1
- package/dist/export/index.d.mts +5 -5
- package/dist/export/index.d.ts +5 -5
- package/dist/export/index.js.map +1 -1
- package/dist/index.js +92 -92
- package/dist/index.js.map +1 -1
- package/dist/{interactions-pEXA1XxF.d.ts → interactions-D2a4O6iM.d.mts} +8 -8
- package/dist/{interactions-pEXA1XxF.d.mts → interactions-D2a4O6iM.d.ts} +8 -8
- package/dist/line-area/index.d.mts +22 -48
- package/dist/line-area/index.d.ts +22 -48
- package/dist/line-area/index.js +14 -14
- package/dist/line-area/index.js.map +1 -1
- package/dist/pointerClick-4LUDwS3L.d.mts +15 -0
- package/dist/pointerClick-4LUDwS3L.d.ts +15 -0
- package/dist/sparkline/index.d.mts +24 -33
- package/dist/sparkline/index.d.ts +24 -33
- package/dist/sparkline/index.js +7 -7
- package/dist/sparkline/index.js.map +1 -1
- package/dist/wordcloud/index.d.mts +22 -20
- package/dist/wordcloud/index.d.ts +22 -20
- package/dist/wordcloud/index.js +11 -10
- package/dist/wordcloud/index.js.map +1 -1
- package/package.json +11 -11
- package/dist/chunk-5TWNMPQU.js.map +0 -1
- package/dist/chunk-6EIJCJCN.js.map +0 -1
- package/dist/chunk-CV45MD47.js.map +0 -1
- package/dist/chunk-WMKO3RGT.js.map +0 -1
- package/dist/esm/chunk-332X77M5.js.map +0 -1
- package/dist/esm/chunk-AL3OTBTT.js.map +0 -1
- package/dist/esm/chunk-CYCKJ5ML.js.map +0 -1
- package/dist/esm/chunk-MVNO5UV6.js.map +0 -1
- package/dist/esm/chunk-P3MVYSHX.js.map +0 -1
package/dist/bubble/index.d.mts
CHANGED
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode, MouseEventHandler } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
3
|
+
import { T as TypeChartBaseProps, a as TypeChartSizingProps, b as TypeChartTooltipDisplayProps, c as TypeChartTooltipClickFooterProps, e as TypeChartTooltipRenderProps, f as TypeChartTooltipDataRow, d as TypeValueFormat } from '../chartProps-BgGx1GTo.mjs';
|
|
4
|
+
import { T as TypeChartColorableEntity, a as TypeChartIconableEntity, c as TypeChartHoverHandler } from '../interactions-D2a4O6iM.mjs';
|
|
5
|
+
import { T as TypeChartPointerClickData } from '../pointerClick-4LUDwS3L.mjs';
|
|
6
6
|
export { h as defaultBubbleChartWidth } from '../chartOptions-D6MzNjbB.mjs';
|
|
7
|
+
export { T as TypeChartExportHandle } from '../chartExport-B0imEQ8Y.mjs';
|
|
7
8
|
import '@sproutsocial/seeds-react-icon';
|
|
8
9
|
import '../types-DxrhdAdn.mjs';
|
|
9
10
|
import 'highcharts';
|
|
10
11
|
|
|
11
|
-
/** A single inner bubble within a category. An `icon` renders inside the bubble's data label (see `
|
|
12
|
-
interface
|
|
12
|
+
/** A single inner bubble within a category. An `icon` renders inside the bubble's data label (see `TypeBubbleChartProps.format` for value display, not label assembly). */
|
|
13
|
+
interface TypeBubbleInnerDataPoint extends TypeChartIconableEntity {
|
|
13
14
|
value: number;
|
|
14
15
|
}
|
|
15
16
|
/** One outer category — its own packedbubble series, clustering its inner bubbles. */
|
|
16
|
-
interface
|
|
17
|
-
innerBubbles:
|
|
17
|
+
interface TypeBubbleCategoryDataPoint extends TypeChartColorableEntity, TypeChartIconableEntity {
|
|
18
|
+
innerBubbles: TypeBubbleInnerDataPoint[];
|
|
18
19
|
}
|
|
19
|
-
interface
|
|
20
|
+
interface TypeBubbleChartAccessibility {
|
|
20
21
|
/** The chart region's accessible name (Highcharts `svgContainerLabel`). */
|
|
21
22
|
svgContainerLabel?: string;
|
|
22
23
|
/** Long-form data summary (Highcharts `accessibility.description`). */
|
|
@@ -34,58 +35,46 @@ interface BubbleChartAccessibility {
|
|
|
34
35
|
};
|
|
35
36
|
}
|
|
36
37
|
/** A bubble tooltip row — always carries the outer/inner index pair so consumers can map back to their own category/entity data. */
|
|
37
|
-
interface
|
|
38
|
+
interface TypeBubbleChartTooltipRow extends TypeChartTooltipDataRow {
|
|
38
39
|
seriesIndex: number;
|
|
39
40
|
pointIndex: number;
|
|
40
41
|
}
|
|
41
42
|
/** Tooltip render-prop signature for BubbleChart. `data` is always a single-row array (one hovered bubble). */
|
|
42
|
-
interface
|
|
43
|
-
data:
|
|
43
|
+
interface TypeBubbleChartTooltipProps extends Omit<TypeChartTooltipRenderProps, "data"> {
|
|
44
|
+
data: TypeBubbleChartTooltipRow[];
|
|
44
45
|
}
|
|
45
|
-
interface
|
|
46
|
+
interface TypeBubbleChartClickData extends TypeChartPointerClickData {
|
|
46
47
|
name: string;
|
|
47
48
|
value: number;
|
|
49
|
+
/** Index of the clicked bubble's outer category series. */
|
|
48
50
|
seriesIndex: number;
|
|
49
|
-
pointIndex: number;
|
|
50
|
-
pageX: number;
|
|
51
|
-
pageY: number;
|
|
52
51
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
/**
|
|
53
|
+
* `description` comes from this family's richer `accessibility` object rather
|
|
54
|
+
* than the core tier, and `tooltip` is narrowed to bubble's row-typed
|
|
55
|
+
* signature — hence the two `Omit`s (see `shared/chartProps.ts`).
|
|
56
|
+
*/
|
|
57
|
+
interface TypeBubbleChartProps extends Omit<TypeChartBaseProps, "description">, TypeChartSizingProps, Omit<TypeChartTooltipDisplayProps, "tooltip">, TypeChartTooltipClickFooterProps {
|
|
58
|
+
data: TypeBubbleCategoryDataPoint[];
|
|
59
|
+
accessibility: TypeBubbleChartAccessibility;
|
|
56
60
|
/** Splits each category into its own packed cluster (drilldown). Defaults to `false` (overview: one bubble per category). */
|
|
57
61
|
splitSeries?: boolean;
|
|
58
|
-
/** Applied to the outermost container element for layout/spacing overrides. */
|
|
59
|
-
className?: string;
|
|
60
|
-
/** Chart height in pixels. Defaults to 600 (v1 parity). */
|
|
61
|
-
height?: number;
|
|
62
62
|
/** Override for the default tooltip content. Receives a single-row `data` array (the hovered bubble). */
|
|
63
|
-
tooltip?: (args:
|
|
64
|
-
/** Footer content shown in the default tooltip when `onClick` is set. */
|
|
65
|
-
tooltipClickLabel?: ReactNode;
|
|
66
|
-
/** Override for the value shown when a data point is `null`. Defaults to an em-dash. */
|
|
67
|
-
invalidNumberLabel?: ReactNode;
|
|
63
|
+
tooltip?: (args: TypeBubbleChartTooltipProps) => ReactNode;
|
|
68
64
|
/** Controls number/currency/locale formatting for the default tooltip's value. */
|
|
69
|
-
format?:
|
|
65
|
+
format?: TypeValueFormat;
|
|
70
66
|
/** Space reserved between bubbles. Defaults to 16px (v1 parity). */
|
|
71
67
|
bubblePadding?: number;
|
|
72
68
|
/** Max bubble size, as a percent of the plot area (e.g. `"100%"`). Values over 100 clip. Defaults to `"100%"` (v1 parity). */
|
|
73
69
|
maxBubbleSize?: string | number;
|
|
74
70
|
/** Click handler for a bubble point. */
|
|
75
|
-
onClick?: (data:
|
|
71
|
+
onClick?: (data: TypeBubbleChartClickData) => void;
|
|
76
72
|
/** Click handler for the plot background (outside any bubble). */
|
|
77
73
|
onPlotBackgroundClick?: MouseEventHandler<HTMLDivElement>;
|
|
78
74
|
/** Fired when the pointer enters a bubble (also on keyboard focus), with the bubble `name` as `position`. */
|
|
79
|
-
onMouseEnter?:
|
|
75
|
+
onMouseEnter?: TypeChartHoverHandler<string>;
|
|
80
76
|
/** Fired when the pointer leaves a bubble (also on keyboard blur), with the bubble `name` as `position`. */
|
|
81
|
-
onMouseLeave?:
|
|
82
|
-
/**
|
|
83
|
-
* Chart title included in the exported image (PNG/SVG/PDF) only — it does
|
|
84
|
-
* *not* render on screen. Omit for no title.
|
|
85
|
-
*/
|
|
86
|
-
exportTitle?: string;
|
|
87
|
-
/** Fired once per chart instance with a handle for PNG/SVG/PDF/CSV exports. */
|
|
88
|
-
onReady?: (handle: ChartExportHandle) => void;
|
|
77
|
+
onMouseLeave?: TypeChartHoverHandler<string>;
|
|
89
78
|
}
|
|
90
79
|
|
|
91
80
|
/**
|
|
@@ -97,6 +86,6 @@ interface BubbleChartProps {
|
|
|
97
86
|
* both `@sproutsocial/seeds-react-data-viz/chart-styles.css` and
|
|
98
87
|
* `.../bubble.css` once (the component never self-imports its CSS).
|
|
99
88
|
*/
|
|
100
|
-
declare const BubbleChart: react.NamedExoticComponent<
|
|
89
|
+
declare const BubbleChart: react.NamedExoticComponent<TypeBubbleChartProps>;
|
|
101
90
|
|
|
102
|
-
export {
|
|
91
|
+
export { BubbleChart, type TypeBubbleCategoryDataPoint, type TypeBubbleChartAccessibility, type TypeBubbleChartClickData, type TypeBubbleChartProps, type TypeBubbleChartTooltipProps, type TypeBubbleChartTooltipRow, type TypeBubbleInnerDataPoint, TypeChartHoverHandler, TypeValueFormat };
|
package/dist/bubble/index.d.ts
CHANGED
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode, MouseEventHandler } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
3
|
+
import { T as TypeChartBaseProps, a as TypeChartSizingProps, b as TypeChartTooltipDisplayProps, c as TypeChartTooltipClickFooterProps, e as TypeChartTooltipRenderProps, f as TypeChartTooltipDataRow, d as TypeValueFormat } from '../chartProps-C2Lxty-_.js';
|
|
4
|
+
import { T as TypeChartColorableEntity, a as TypeChartIconableEntity, c as TypeChartHoverHandler } from '../interactions-D2a4O6iM.js';
|
|
5
|
+
import { T as TypeChartPointerClickData } from '../pointerClick-4LUDwS3L.js';
|
|
6
6
|
export { h as defaultBubbleChartWidth } from '../chartOptions-D6MzNjbB.js';
|
|
7
|
+
export { T as TypeChartExportHandle } from '../chartExport-B0imEQ8Y.js';
|
|
7
8
|
import '@sproutsocial/seeds-react-icon';
|
|
8
9
|
import '../types-DxrhdAdn.js';
|
|
9
10
|
import 'highcharts';
|
|
10
11
|
|
|
11
|
-
/** A single inner bubble within a category. An `icon` renders inside the bubble's data label (see `
|
|
12
|
-
interface
|
|
12
|
+
/** A single inner bubble within a category. An `icon` renders inside the bubble's data label (see `TypeBubbleChartProps.format` for value display, not label assembly). */
|
|
13
|
+
interface TypeBubbleInnerDataPoint extends TypeChartIconableEntity {
|
|
13
14
|
value: number;
|
|
14
15
|
}
|
|
15
16
|
/** One outer category — its own packedbubble series, clustering its inner bubbles. */
|
|
16
|
-
interface
|
|
17
|
-
innerBubbles:
|
|
17
|
+
interface TypeBubbleCategoryDataPoint extends TypeChartColorableEntity, TypeChartIconableEntity {
|
|
18
|
+
innerBubbles: TypeBubbleInnerDataPoint[];
|
|
18
19
|
}
|
|
19
|
-
interface
|
|
20
|
+
interface TypeBubbleChartAccessibility {
|
|
20
21
|
/** The chart region's accessible name (Highcharts `svgContainerLabel`). */
|
|
21
22
|
svgContainerLabel?: string;
|
|
22
23
|
/** Long-form data summary (Highcharts `accessibility.description`). */
|
|
@@ -34,58 +35,46 @@ interface BubbleChartAccessibility {
|
|
|
34
35
|
};
|
|
35
36
|
}
|
|
36
37
|
/** A bubble tooltip row — always carries the outer/inner index pair so consumers can map back to their own category/entity data. */
|
|
37
|
-
interface
|
|
38
|
+
interface TypeBubbleChartTooltipRow extends TypeChartTooltipDataRow {
|
|
38
39
|
seriesIndex: number;
|
|
39
40
|
pointIndex: number;
|
|
40
41
|
}
|
|
41
42
|
/** Tooltip render-prop signature for BubbleChart. `data` is always a single-row array (one hovered bubble). */
|
|
42
|
-
interface
|
|
43
|
-
data:
|
|
43
|
+
interface TypeBubbleChartTooltipProps extends Omit<TypeChartTooltipRenderProps, "data"> {
|
|
44
|
+
data: TypeBubbleChartTooltipRow[];
|
|
44
45
|
}
|
|
45
|
-
interface
|
|
46
|
+
interface TypeBubbleChartClickData extends TypeChartPointerClickData {
|
|
46
47
|
name: string;
|
|
47
48
|
value: number;
|
|
49
|
+
/** Index of the clicked bubble's outer category series. */
|
|
48
50
|
seriesIndex: number;
|
|
49
|
-
pointIndex: number;
|
|
50
|
-
pageX: number;
|
|
51
|
-
pageY: number;
|
|
52
51
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
/**
|
|
53
|
+
* `description` comes from this family's richer `accessibility` object rather
|
|
54
|
+
* than the core tier, and `tooltip` is narrowed to bubble's row-typed
|
|
55
|
+
* signature — hence the two `Omit`s (see `shared/chartProps.ts`).
|
|
56
|
+
*/
|
|
57
|
+
interface TypeBubbleChartProps extends Omit<TypeChartBaseProps, "description">, TypeChartSizingProps, Omit<TypeChartTooltipDisplayProps, "tooltip">, TypeChartTooltipClickFooterProps {
|
|
58
|
+
data: TypeBubbleCategoryDataPoint[];
|
|
59
|
+
accessibility: TypeBubbleChartAccessibility;
|
|
56
60
|
/** Splits each category into its own packed cluster (drilldown). Defaults to `false` (overview: one bubble per category). */
|
|
57
61
|
splitSeries?: boolean;
|
|
58
|
-
/** Applied to the outermost container element for layout/spacing overrides. */
|
|
59
|
-
className?: string;
|
|
60
|
-
/** Chart height in pixels. Defaults to 600 (v1 parity). */
|
|
61
|
-
height?: number;
|
|
62
62
|
/** Override for the default tooltip content. Receives a single-row `data` array (the hovered bubble). */
|
|
63
|
-
tooltip?: (args:
|
|
64
|
-
/** Footer content shown in the default tooltip when `onClick` is set. */
|
|
65
|
-
tooltipClickLabel?: ReactNode;
|
|
66
|
-
/** Override for the value shown when a data point is `null`. Defaults to an em-dash. */
|
|
67
|
-
invalidNumberLabel?: ReactNode;
|
|
63
|
+
tooltip?: (args: TypeBubbleChartTooltipProps) => ReactNode;
|
|
68
64
|
/** Controls number/currency/locale formatting for the default tooltip's value. */
|
|
69
|
-
format?:
|
|
65
|
+
format?: TypeValueFormat;
|
|
70
66
|
/** Space reserved between bubbles. Defaults to 16px (v1 parity). */
|
|
71
67
|
bubblePadding?: number;
|
|
72
68
|
/** Max bubble size, as a percent of the plot area (e.g. `"100%"`). Values over 100 clip. Defaults to `"100%"` (v1 parity). */
|
|
73
69
|
maxBubbleSize?: string | number;
|
|
74
70
|
/** Click handler for a bubble point. */
|
|
75
|
-
onClick?: (data:
|
|
71
|
+
onClick?: (data: TypeBubbleChartClickData) => void;
|
|
76
72
|
/** Click handler for the plot background (outside any bubble). */
|
|
77
73
|
onPlotBackgroundClick?: MouseEventHandler<HTMLDivElement>;
|
|
78
74
|
/** Fired when the pointer enters a bubble (also on keyboard focus), with the bubble `name` as `position`. */
|
|
79
|
-
onMouseEnter?:
|
|
75
|
+
onMouseEnter?: TypeChartHoverHandler<string>;
|
|
80
76
|
/** Fired when the pointer leaves a bubble (also on keyboard blur), with the bubble `name` as `position`. */
|
|
81
|
-
onMouseLeave?:
|
|
82
|
-
/**
|
|
83
|
-
* Chart title included in the exported image (PNG/SVG/PDF) only — it does
|
|
84
|
-
* *not* render on screen. Omit for no title.
|
|
85
|
-
*/
|
|
86
|
-
exportTitle?: string;
|
|
87
|
-
/** Fired once per chart instance with a handle for PNG/SVG/PDF/CSV exports. */
|
|
88
|
-
onReady?: (handle: ChartExportHandle) => void;
|
|
77
|
+
onMouseLeave?: TypeChartHoverHandler<string>;
|
|
89
78
|
}
|
|
90
79
|
|
|
91
80
|
/**
|
|
@@ -97,6 +86,6 @@ interface BubbleChartProps {
|
|
|
97
86
|
* both `@sproutsocial/seeds-react-data-viz/chart-styles.css` and
|
|
98
87
|
* `.../bubble.css` once (the component never self-imports its CSS).
|
|
99
88
|
*/
|
|
100
|
-
declare const BubbleChart: react.NamedExoticComponent<
|
|
89
|
+
declare const BubbleChart: react.NamedExoticComponent<TypeBubbleChartProps>;
|
|
101
90
|
|
|
102
|
-
export {
|
|
91
|
+
export { BubbleChart, type TypeBubbleCategoryDataPoint, type TypeBubbleChartAccessibility, type TypeBubbleChartClickData, type TypeBubbleChartProps, type TypeBubbleChartTooltipProps, type TypeBubbleChartTooltipRow, type TypeBubbleInnerDataPoint, TypeChartHoverHandler, TypeValueFormat };
|
package/dist/bubble/index.js
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
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 _chunkI72SSPMXjs = require('../chunk-I72SSPMX.js');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
var _chunk5TWNMPQUjs = require('../chunk-5TWNMPQU.js');
|
|
9
8
|
|
|
9
|
+
var _chunkV5EXL244js = require('../chunk-V5EXL244.js');
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
|
|
15
|
+
var _chunkXH7ZKGHDjs = require('../chunk-XH7ZKGHD.js');
|
|
15
16
|
|
|
16
17
|
// src/charts/bubble/BubbleChart.tsx
|
|
17
18
|
var _react = require('react');
|
|
@@ -86,18 +87,15 @@ function transformBubbleDataToSeries(data) {
|
|
|
86
87
|
}));
|
|
87
88
|
}
|
|
88
89
|
function transformBubbleClickData(event) {
|
|
89
|
-
|
|
90
|
+
return {
|
|
90
91
|
name: event.point.name,
|
|
92
|
+
// Optional on the event type only to keep it comparable with Highcharts'
|
|
93
|
+
// `Point` (see `TypeSeedsChartBubbleClickEvent`); always set at runtime.
|
|
91
94
|
value: event.point.value,
|
|
92
95
|
seriesIndex: event.point.series.index,
|
|
93
|
-
pointIndex: event.point.index
|
|
96
|
+
pointIndex: event.point.index,
|
|
97
|
+
..._chunkV5EXL244js.deriveClickCoords.call(void 0, event)
|
|
94
98
|
};
|
|
95
|
-
const isClickEvent = event.type === "click";
|
|
96
|
-
if (!isClickEvent && event.target) {
|
|
97
|
-
const rect = event.target.getBoundingClientRect();
|
|
98
|
-
return { ...base, pageX: rect.x, pageY: rect.y };
|
|
99
|
-
}
|
|
100
|
-
return { ...base, pageX: _nullishCoalesce(event.pageX, () => ( 0)), pageY: _nullishCoalesce(event.pageY, () => ( 0)) };
|
|
101
99
|
}
|
|
102
100
|
function mapBubbleTooltipRow(data) {
|
|
103
101
|
const row = data[0];
|
|
@@ -106,7 +104,7 @@ function mapBubbleTooltipRow(data) {
|
|
|
106
104
|
}
|
|
107
105
|
function buildBubbleChartOptions(props) {
|
|
108
106
|
const hasOnClick = Boolean(props.onClick);
|
|
109
|
-
const base =
|
|
107
|
+
const base = _chunkV5EXL244js.buildBaseChartOptions.call(void 0, {
|
|
110
108
|
type: "packedbubble",
|
|
111
109
|
description: props.accessibility.description,
|
|
112
110
|
svgContainerLabel: props.accessibility.svgContainerLabel,
|
|
@@ -121,12 +119,12 @@ function buildBubbleChartOptions(props) {
|
|
|
121
119
|
chart: {
|
|
122
120
|
...base.chart,
|
|
123
121
|
type: "packedbubble",
|
|
124
|
-
height: _nullishCoalesce(props.height, () => (
|
|
122
|
+
height: _nullishCoalesce(props.height, () => ( _chunkXH7ZKGHDjs.BUBBLE_CHART_HEIGHT))
|
|
125
123
|
},
|
|
126
124
|
plotOptions: {
|
|
127
125
|
packedbubble: {
|
|
128
126
|
minSize: "30%",
|
|
129
|
-
maxSize: _nullishCoalesce(props.maxBubbleSize, () => (
|
|
127
|
+
maxSize: _nullishCoalesce(props.maxBubbleSize, () => ( _chunkXH7ZKGHDjs.BUBBLE_CHART_DEFAULT_MAX_SIZE)),
|
|
130
128
|
draggable: false,
|
|
131
129
|
states: { hover: { enabled: false } },
|
|
132
130
|
layoutAlgorithm: {
|
|
@@ -134,12 +132,12 @@ function buildBubbleChartOptions(props) {
|
|
|
134
132
|
seriesInteraction: true,
|
|
135
133
|
parentNodeLimit: true,
|
|
136
134
|
enableSimulation: false,
|
|
137
|
-
bubblePadding: _nullishCoalesce(props.bubblePadding, () => (
|
|
135
|
+
bubblePadding: _nullishCoalesce(props.bubblePadding, () => ( _chunkXH7ZKGHDjs.BUBBLE_CHART_DEFAULT_PADDING)),
|
|
138
136
|
splitSeries: _nullishCoalesce(props.splitSeries, () => ( false))
|
|
139
137
|
},
|
|
140
138
|
dataLabels: {
|
|
141
139
|
enabled: true,
|
|
142
|
-
// See chartBase.tsx's
|
|
140
|
+
// See chartBase.tsx's TypeSeedsChartPackedBubblePlotOptions.dataLabels —
|
|
143
141
|
// the label formatter returns HTML (icon + wrapped text); preserved
|
|
144
142
|
// for functional parity (known useHTML gap, mirrors bar's axis
|
|
145
143
|
// labels).
|
|
@@ -181,13 +179,13 @@ function buildBubbleChartOptions(props) {
|
|
|
181
179
|
// src/charts/bubble/BubbleChart.tsx
|
|
182
180
|
var _jsxruntime = require('react/jsx-runtime');
|
|
183
181
|
var BubbleChart = _react.memo.call(void 0, function BubbleChart2(props) {
|
|
184
|
-
const { colors } =
|
|
182
|
+
const { colors } = _chunkV5EXL244js.useSeedsChartSetup.call(void 0, {
|
|
185
183
|
series: props.data.map((d) => ({ color: d.color }))
|
|
186
184
|
});
|
|
187
185
|
const options = _react.useMemo.call(void 0, () => buildBubbleChartOptions(props), [props]);
|
|
188
186
|
const hasOnClick = Boolean(props.onClick);
|
|
189
187
|
const hasOnPlotBackgroundClick = Boolean(props.onPlotBackgroundClick);
|
|
190
|
-
const containerProps =
|
|
188
|
+
const containerProps = _chunkI72SSPMXjs.getChartContainerProps.call(void 0, {
|
|
191
189
|
familyClasses: ["seeds-chart-bubble"],
|
|
192
190
|
colors: props.data.map((d) => d.color),
|
|
193
191
|
hasOnClick,
|
|
@@ -205,7 +203,7 @@ var BubbleChart = _react.memo.call(void 0, function BubbleChart2(props) {
|
|
|
205
203
|
...hasOnPlotBackgroundClick ? { "data-has-on-plot-background-click": "" } : {},
|
|
206
204
|
onClick: props.onPlotBackgroundClick,
|
|
207
205
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
208
|
-
|
|
206
|
+
_chunkV5EXL244js.ChartRenderer,
|
|
209
207
|
{
|
|
210
208
|
options,
|
|
211
209
|
series: props.data.map((d, i) => ({
|
|
@@ -230,5 +228,5 @@ var BubbleChart = _react.memo.call(void 0, function BubbleChart2(props) {
|
|
|
230
228
|
|
|
231
229
|
|
|
232
230
|
|
|
233
|
-
exports.BubbleChart = BubbleChart; exports.defaultBubbleChartWidth =
|
|
231
|
+
exports.BubbleChart = BubbleChart; exports.defaultBubbleChartWidth = _chunkXH7ZKGHDjs.defaultBubbleChartWidth;
|
|
234
232
|
//# sourceMappingURL=index.js.map
|
package/dist/bubble/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/bubble/index.js","../../src/charts/bubble/BubbleChart.tsx","../../src/charts/bubble/iconMarkup.ts","../../src/charts/bubble/adapter.ts"],"names":[],"mappings":"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","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/bubble/index.js","sourcesContent":[null,"import { memo, useMemo } from \"react\";\nimport {\n ChartRenderer,\n useSeedsChartSetup,\n type ChartTooltipProps,\n} from \"../shared/chartBase\";\nimport { getChartContainerProps } from \"../shared/chartContainer\";\nimport { buildBubbleChartOptions, mapBubbleTooltipRow } from \"./adapter\";\nimport type { BubbleChartProps } from \"./types\";\n\n/**\n * BubbleChart renders a Highcharts packedbubble (clustered, axis-less) chart\n * from a list of categories, each with its own nested inner bubbles.\n *\n * Like DonutChart, it carries no `styled-components`: the wrapper is a plain\n * `<div>` and the Highcharts styling ships as static CSS. Consumers import\n * both `@sproutsocial/seeds-react-data-viz/chart-styles.css` and\n * `.../bubble.css` once (the component never self-imports its CSS).\n */\nexport const BubbleChart = memo(function BubbleChart(props: BubbleChartProps) {\n const { colors } = useSeedsChartSetup({\n series: props.data.map((d) => ({ color: d.color })),\n });\n\n const options = useMemo(() => buildBubbleChartOptions(props), [props]);\n const hasOnClick = Boolean(props.onClick);\n const hasOnPlotBackgroundClick = Boolean(props.onPlotBackgroundClick);\n\n // RAW per-category colors only — an unset category falls through to\n // chart-styles.css's --highcharts-color-N default, matching the bar\n // convention (bubble's outer categories are separate series, like bar's,\n // not donut's single-series-many-points model).\n const containerProps = getChartContainerProps({\n familyClasses: [\"seeds-chart-bubble\"],\n colors: props.data.map((d) => d.color),\n hasOnClick,\n className: props.className,\n });\n\n // `ChartRenderer` expects `(ChartTooltipProps) => ReactNode`; the consumer's\n // function expects the narrower `BubbleChartTooltipProps` (required\n // seriesIndex/pointIndex). Wrap rather than cast the function type so the\n // intent is explicit; `mapBubbleTooltipRow` applies the remount-desync null\n // guard.\n const tooltip = props.tooltip\n ? (args: ChartTooltipProps) => {\n const row = mapBubbleTooltipRow(args.data);\n if (!row) return null;\n return props.tooltip!({ ...args, data: [row] });\n }\n : undefined;\n\n return (\n <div\n {...containerProps}\n {...(hasOnPlotBackgroundClick\n ? { \"data-has-on-plot-background-click\": \"\" }\n : {})}\n onClick={props.onPlotBackgroundClick}\n >\n <ChartRenderer\n // Highcharts <12.2.0 can't re-run the packedbubble split layout when\n // `splitSeries` toggles (highcharts/highcharts#21972, fixed by #22186\n // in 12.2.0), so we force a full remount via `key`. REMOVE this `key`\n // once seeds is on Highcharts >=12.2.0.\n // Unrelated, but a watch-item for that same upgrade: the #21972 fix\n // (#22186) introduced a still-open regression, #24134, where 2+\n // packedbubble charts that are BOTH in split mode at the same time on\n // one page share a global `allParentNodes` array, causing one chart's\n // bubbles to drift outside its plot area. A single bubble chart (or\n // several where at most one is split) is unaffected — only\n // simultaneous multi-chart split mode triggers it. Doesn't affect this\n // usage today (Smart Categories renders one bubble chart at a time),\n // but if a future surface ever renders 2+ split bubble charts at\n // once post-upgrade, apply the maintainers' workaround (reset\n // `allParentNodes` on chart `init`) until Highcharts ships a fix.\n key={`Bubble-Chart-${props.splitSeries ? \"SplitSeries\" : \"\"}`}\n options={options}\n series={props.data.map((d, i) => ({\n name: d.name,\n color: d.color ?? colors[i],\n }))}\n colors={colors}\n tooltip={tooltip}\n hasOnClick={hasOnClick}\n tooltipClickLabel={props.tooltipClickLabel}\n invalidNumberLabel={props.invalidNumberLabel}\n valueFormat={props.format}\n hideLegend\n exportTitle={props.exportTitle}\n onReady={props.onReady}\n />\n </div>\n );\n});\n","/**\n * TEMPORARY — remove when CE-202 lands (this file and its import in\n * `adapter.ts`).\n *\n * Raw inline-SVG markup for the bubble chart's data-label icons, duplicated\n * verbatim from web-app-core v1's `smartCategoryToSVGMap`\n * (`SmartCategoriesBubbleChart.tsx`), re-keyed from entity type to the Seeds\n * icon name the chart's `icon` prop actually receives (the Listening consumer\n * maps entity type -> icon name via `EntityTypeIconMap`). Copying v1's exact\n * glyphs is what guarantees pixel parity with the live chart.\n *\n * WHY inline SVG rather than the Seeds sprite `<use xlink:href=\"#seeds-svgs_...\">`:\n * Highcharts renders `useHTML` data labels outside the light-DOM tree the\n * sprite sheet is injected into, so cross-tree `<use>` resolution fails. This\n * is the same wall v1 hit, which is why it hand-copied raw path data instead\n * of referencing the sprite. The general fix — a lightweight per-icon markup\n * export from seeds-icons that avoids pulling the whole ~300KB+/category\n * sprite bundle into every `seeds-react-data-viz` consumer — is tracked by\n * CE-202; when it lands, resolve icons through that and delete this file.\n *\n * Fills are `currentColor` so each glyph inherits the data-label text color.\n * Each SVG keeps its native `width`/`height` for v1-identical inline sizing.\n * An icon outside this map degrades to the no-icon (name-only) label rather\n * than rendering nothing.\n */\nexport const BUBBLE_ICON_MARKUP: Record<string, string> = {\n \"user-outline\": `<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5.72756 6C7.38441 6 8.72756 4.65685 8.72756 3C8.72756 1.34315 7.38441 0 5.72756 0C4.07071 0 2.72756 1.34315 2.72756 3C2.72756 4.65685 4.07071 6 5.72756 6Z\" fill=\"currentColor\"/>\n<path d=\"M5.72756 12C8.50201 12 10.1833 10.1963 11.0339 8.89858C11.4669 8.23803 11.0644 7.41859 10.2861 7.28445C8.63561 7 7.15327 7 5.72756 7C4.30185 7 2.81951 7 1.16899 7.28445C0.390671 7.41859 -0.0117778 8.23803 0.421187 8.89858C1.2718 10.1963 2.95311 12 5.72756 12Z\" fill=\"currentColor\"/>\n</svg>`,\n \"location-pin-outline\": `<svg width=\"10\" height=\"12\" viewBox=\"0 0 10 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M4.99992 12C6.33325 12 9.66659 7.244 9.66659 4.66667C9.66659 2.08934 7.57725 0 4.99992 0C2.42259 0 0.333252 2.08934 0.333252 4.66667C0.333252 7.244 3.66659 12 4.99992 12ZM4.99992 4.66667C5.36811 4.66667 5.66659 4.36819 5.66659 4C5.66659 3.63181 5.36811 3.33333 4.99992 3.33333C4.63173 3.33333 4.33325 3.63181 4.33325 4C4.33325 4.36819 4.63173 4.66667 4.99992 4.66667Z\" fill=\"currentColor\"/>\n</svg>`,\n \"cart-outline\": `<svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M0.666748 1.83333H1.76749C1.93793 1.83333 2.08092 1.96192 2.09895 2.1314L2.75892 8.33515C1.9651 8.37397 1.33341 9.02988 1.33341 9.83333C1.33341 10.6618 2.00499 11.3333 2.83341 11.3333C3.66184 11.3333 4.33341 10.6618 4.33341 9.83333C4.33341 9.777 4.33031 9.72139 4.32426 9.66667H7.34257C7.33652 9.72139 7.33341 9.777 7.33341 9.83333C7.33341 10.6618 8.00499 11.3333 8.83341 11.3333C9.66184 11.3333 10.3334 10.6618 10.3334 9.83333C10.3334 9.00491 9.66184 8.33333 8.83341 8.33333H4.09959L3.92228 6.66667H9.18028C9.65696 6.66667 10.0674 6.33021 10.1609 5.86278L10.9203 2.06537C10.9616 1.85911 10.8038 1.66667 10.5935 1.66667H3.35763C3.14364 0.98448 2.50729 0.5 1.76749 0.5H0.666748V1.83333Z\" fill=\"currentColor\"/>\n</svg>`,\n \"briefcase-outline\": `<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M3.5 1.83333V2H1C0.447715 2 0 2.44772 0 3V10.3333C0 10.8856 0.447715 11.3333 1 11.3333H11C11.5523 11.3333 12 10.8856 12 10.3333V3C12 2.44772 11.5523 2 11 2H8.5V1.83333C8.5 0.820811 7.67919 0 6.66667 0H5.33333C4.32081 0 3.5 0.820811 3.5 1.83333ZM5.33333 1C4.8731 1 4.5 1.3731 4.5 1.83333V2H7.5V1.83333C7.5 1.3731 7.1269 1 6.66667 1H5.33333ZM6.66667 5.33333C6.66667 5.70152 6.36819 6 6 6C5.63181 6 5.33333 5.70152 5.33333 5.33333C5.33333 4.96514 5.63181 4.66667 6 4.66667C6.36819 4.66667 6.66667 4.96514 6.66667 5.33333ZM10.6667 6.88767V5.74479C9.44176 6.48334 7.81474 6.95116 6 6.95116C4.18526 6.95116 2.55823 6.48334 1.33333 5.74479V6.88767C2.64682 7.55696 4.25842 7.95116 6 7.95116C7.74158 7.95116 9.35318 7.55696 10.6667 6.88767Z\" fill=\"currentColor\"/>\n</svg>`,\n \"laptop-mobile-outline\": `<svg width=\"13\" height=\"10\" viewBox=\"0 0 13 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M2.84994 0.333313C2.29765 0.333313 1.84993 0.781028 1.84993 1.33331V7.33331H0.516602C0.516602 7.8856 0.964317 8.33331 1.5166 8.33331H6.84994V3.33331C6.84994 2.22874 7.74537 1.33331 8.84994 1.33331H11.1833C11.1833 0.781028 10.7356 0.333313 10.1833 0.333313H2.84994Z\" fill=\"currentColor\"/>\n<path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M7.84994 3.33331C7.84994 2.78103 8.29765 2.33331 8.84994 2.33331H11.5166C12.0689 2.33331 12.5166 2.78103 12.5166 3.33331V8.66665C12.5166 9.21893 12.0689 9.66665 11.5166 9.66665H8.84994C8.29765 9.66665 7.84994 9.21893 7.84994 8.66665V3.33331ZM10.6833 8.16665C10.6833 8.44279 10.4594 8.66665 10.1833 8.66665C9.90713 8.66665 9.68327 8.44279 9.68327 8.16665C9.68327 7.8905 9.90713 7.66665 10.1833 7.66665C10.4594 7.66665 10.6833 7.8905 10.6833 8.16665Z\" fill=\"currentColor\"/>\n</svg>`,\n \"calendar-day-outline\": `<svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M3.3632 1.33333H7.69653V0H8.69653V1.33333H9.8632C10.4155 1.33333 10.8632 1.78105 10.8632 2.33333V10.3333C10.8632 10.8856 10.4155 11.3333 9.8632 11.3333H1.19653C0.644248 11.3333 0.196533 10.8856 0.196533 10.3333V2.33333C0.196533 1.78105 0.644248 1.33333 1.19653 1.33333H2.3632V0H3.3632V1.33333ZM1.52987 2.66667V4H9.52987V2.66667H1.52987ZM3.8632 5.33333H1.8632V7.33333H3.8632V5.33333Z\" fill=\"currentColor\"/>\n</svg>`,\n \"chart-pie-outline\": `<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M10.9888 9.33342C11.6481 8.34673 12 7.18669 12 6H6V0C4.81331 0 3.65328 0.351894 2.66658 1.01118C1.67989 1.67047 0.910851 2.60754 0.456725 3.7039C0.00259971 4.80026 -0.11622 6.00666 0.115291 7.17054C0.346802 8.33443 0.918247 9.40353 1.75736 10.2426C2.59648 11.0818 3.66557 11.6532 4.82946 11.8847C5.99335 12.1162 7.19975 11.9974 8.2961 11.5433C9.39246 11.0892 10.3295 10.3201 10.9888 9.33342ZM7.33334 4.66672L11.8513 4.66656C11.3422 2.42346 9.57645 0.657717 7.33334 0.148727V4.66672Z\" fill=\"currentColor\"/>\n</svg>`,\n \"paper-outline\": `<svg width=\"10\" height=\"12\" viewBox=\"0 0 10 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1.06836 12C0.516075 12 0.0683594 11.5523 0.0683594 11V1C0.0683594 0.447715 0.516075 0 1.06836 0H3.73503C4.28731 0 4.73503 0.447715 4.73503 1V2.83333C4.73503 4.02995 5.70508 5 6.90169 5H8.40169C8.95398 5 9.40169 5.44772 9.40169 6V11C9.40169 11.5523 8.95398 12 8.40169 12H1.06836Z\" fill=\"currentColor\"/>\n<path d=\"M5.73503 2.49999V0.107381C7.61938 0.518781 9.07818 2.06865 9.35443 3.99999H7.23503C6.4066 3.99999 5.73503 3.32841 5.73503 2.49999Z\" fill=\"currentColor\"/>\n</svg>`,\n};\n","import type { TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { BUBBLE_ICON_MARKUP } from \"./iconMarkup\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport type {\n ChartTooltipDataRow,\n SeedsChartBubbleClickEvent,\n SeedsChartBubbleDataLabelFormatterContext,\n SeedsChartOptions,\n SeedsChartPackedBubbleSeriesOptions,\n} from \"../shared/chartBase\";\nimport {\n BUBBLE_CHART_DEFAULT_MAX_SIZE,\n BUBBLE_CHART_DEFAULT_PADDING,\n BUBBLE_CHART_HEIGHT,\n} from \"../../constants/chartOptions\";\nimport type {\n BubbleCategoryDataPoint,\n BubbleChartClickData,\n BubbleChartProps,\n BubbleChartTooltipRow,\n} from \"./types\";\n\nfunction defaultPointDescriptionFormatter(point: {\n name: string;\n value: number;\n}): string {\n return `${point.name}: ${point.value}. Press Enter or Space to activate.`;\n}\n\n/**\n * A bare icon name (no `-outline`/`-solid` suffix) resolves to its default\n * variant, matching `seeds-react-icon`'s own `resolveIconName` (`outline` at\n * this label's rendered size — mirrors non-mini `<Icon>` sizing, since\n * `BUBBLE_ICON_MARKUP` only stocks the outline variant).\n */\nfunction resolveIconName(name: TypeIconName): string {\n return name.endsWith(\"-outline\") || name.endsWith(\"-solid\")\n ? name\n : `${name}-outline`;\n}\n\n// Icon markup lives in ./iconMarkup (a verbatim, temporary duplicate of v1's\n// raw-SVG map — see that file's header and CE-202). Kept out of this adapter so\n// the eventual general fix is a one-file deletion, not a surgical edit here.\nfunction buildIconMarkup(icon: TypeIconName): string | undefined {\n return BUBBLE_ICON_MARKUP[resolveIconName(icon)];\n}\n\nfunction escapeHtml(value: string): string {\n return value\n .replace(/&/g, \"&\")\n .replace(/</g, \"<\")\n .replace(/>/g, \">\")\n .replace(/\"/g, \""\");\n}\n\n// v1's radius thresholds (`MINIMUM_BUBBLE_RADIUS_FOR_CATEGORY_TEXT` /\n// `MINIMUM_BUBBLE_RADIUS_FOR_DATALABEL_TEXT`), generalized per SPEC decision\n// 9a: the rule is icon-presence-driven, not view-mode-driven. v1 conflated the\n// two because overview-mode categories were the only points it ever assigned\n// an icon to — incidental, not load-bearing.\nconst ICON_LABEL_TEXT_MIN_RADIUS = 40;\nconst NO_ICON_LABEL_MIN_RADIUS = 25;\n\n/**\n * Assembles a packedbubble data label as an HTML string (`useHTML: true`,\n * required — see `charts/README.md`'s known gap, mirrored from v1). Icon\n * present → icon always renders, name conditional on radius; no icon → hidden\n * below a radius floor, else the name clipped/wrapped to the bubble's\n * diameter. Mirrors v1's `dataLabelFormatter` exactly: a plain `<div>` with the\n * inline icon to the left of the name (v1 does nothing more — it relies on the\n * browser-default inline `<svg>`; see bubble.css for the Tailwind-Preflight\n * override that keeps that default intact here). An `icon` outside\n * `BUBBLE_ICON_MARKUP`'s current coverage falls through to the no-icon branch\n * (name only) rather than rendering an empty/broken icon.\n */\nfunction buildBubbleDataLabel(\n point: { name: string; icon?: TypeIconName },\n radius: number\n): string {\n const name = escapeHtml(point.name);\n const iconMarkup = point.icon ? buildIconMarkup(point.icon) : undefined;\n if (iconMarkup) {\n const showName = radius > ICON_LABEL_TEXT_MIN_RADIUS;\n return `<div>${iconMarkup}${showName ? ` <span>${name}</span>` : \"\"}</div>`;\n }\n if (radius < NO_ICON_LABEL_MIN_RADIUS) return \"\";\n const diameter = radius * 2;\n return `<div style=\"max-width: ${diameter}px; max-height: ${diameter}px; overflow: hidden; text-overflow: ellipsis; white-space: wrap;\" title=\"${name}\">${name}</div>`;\n}\n\nexport function transformBubbleDataToSeries(\n data: Array<BubbleCategoryDataPoint>\n): Array<SeedsChartPackedBubbleSeriesOptions> {\n return data.map((category, index) => ({\n type: \"packedbubble\",\n name: category.name,\n data: category.innerBubbles.map((bubble) => ({\n name: bubble.name,\n value: bubble.value,\n })),\n color: category.color,\n colorIndex: index,\n }));\n}\n\n/**\n * Keyboard activation has no `stopPropagation` and its `type` isn't `\"click\"`;\n * derive `pageX`/`pageY` from the target's bounding rect for keyboard, from\n * the raw event for a mouse click. Mirrors v1's `transformBubbleChartClickData`.\n */\nexport function transformBubbleClickData(\n event: SeedsChartBubbleClickEvent\n): BubbleChartClickData {\n const base = {\n name: event.point.name,\n value: event.point.value,\n seriesIndex: event.point.series.index,\n pointIndex: event.point.index,\n };\n const isClickEvent = event.type === \"click\";\n if (!isClickEvent && event.target) {\n const rect = (event.target as HTMLElement).getBoundingClientRect();\n return { ...base, pageX: rect.x, pageY: rect.y };\n }\n return { ...base, pageX: event.pageX ?? 0, pageY: event.pageY ?? 0 };\n}\n\n/**\n * During the split<->unsplit remount transition the tooltip context is\n * briefly missing data (name/seriesIndex undefined) — bail rather than render\n * a broken tooltip. Mirrors v1.\n */\nexport function mapBubbleTooltipRow(\n data: ChartTooltipDataRow[]\n): BubbleChartTooltipRow | null {\n const row = data[0] as BubbleChartTooltipRow | undefined;\n if (row?.name == null || row?.seriesIndex == null) return null;\n return row;\n}\n\nexport function buildBubbleChartOptions(\n props: BubbleChartProps\n): SeedsChartOptions {\n const hasOnClick = Boolean(props.onClick);\n const base = buildBaseChartOptions({\n type: \"packedbubble\",\n description: props.accessibility.description,\n svgContainerLabel: props.accessibility.svgContainerLabel,\n ...(hasOnClick\n ? {\n point: {\n descriptionFormatter:\n props.accessibility.point?.descriptionFormatter ??\n defaultPointDescriptionFormatter,\n },\n }\n : {}),\n });\n\n return {\n ...base,\n chart: {\n ...base.chart,\n type: \"packedbubble\",\n height: props.height ?? BUBBLE_CHART_HEIGHT,\n },\n plotOptions: {\n packedbubble: {\n minSize: \"30%\",\n maxSize: props.maxBubbleSize ?? BUBBLE_CHART_DEFAULT_MAX_SIZE,\n draggable: false,\n states: { hover: { enabled: false } },\n layoutAlgorithm: {\n gravitationalConstant: 0.05,\n seriesInteraction: true,\n parentNodeLimit: true,\n enableSimulation: false,\n bubblePadding: props.bubblePadding ?? BUBBLE_CHART_DEFAULT_PADDING,\n splitSeries: props.splitSeries ?? false,\n },\n dataLabels: {\n enabled: true,\n // See chartBase.tsx's SeedsChartPackedBubblePlotOptions.dataLabels —\n // the label formatter returns HTML (icon + wrapped text); preserved\n // for functional parity (known useHTML gap, mirrors bar's axis\n // labels).\n useHTML: true,\n formatter(this: SeedsChartBubbleDataLabelFormatterContext) {\n const inner =\n props.data[this.point.series.index]?.innerBubbles[\n this.point.index\n ];\n return buildBubbleDataLabel(\n { name: this.point.name, icon: inner?.icon },\n this.radius\n );\n },\n },\n accessibility: {\n enabled: true,\n keyboardNavigation: { enabled: true },\n point: { valueDescriptionFormat: \"{point.name}: {point.value}\" },\n },\n point: {\n events: {\n click: hasOnClick\n ? (event: SeedsChartBubbleClickEvent) => {\n event.stopPropagation?.();\n // Keyboard events have no `target` when not a genuine click.\n if (event.type !== \"click\" && !event.target) return;\n props.onClick!(transformBubbleClickData(event));\n }\n : undefined,\n mouseOver: props.onMouseEnter\n ? function (this: { name: string }) {\n props.onMouseEnter!({ position: this.name });\n }\n : undefined,\n mouseOut: props.onMouseLeave\n ? function (this: { name: string }) {\n props.onMouseLeave!({ position: this.name });\n }\n : undefined,\n },\n },\n },\n },\n series: transformBubbleDataToSeries(props.data),\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/bubble/index.js","../../src/charts/bubble/BubbleChart.tsx","../../src/charts/bubble/iconMarkup.ts","../../src/charts/bubble/adapter.ts"],"names":[],"mappings":"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","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/bubble/index.js","sourcesContent":[null,"import { memo, useMemo } from \"react\";\nimport { ChartRenderer, useSeedsChartSetup } from \"../shared/chartBase\";\nimport type { TypeChartTooltipRenderProps } from \"../shared/chartTooltip\";\nimport { getChartContainerProps } from \"../shared/chartContainer\";\nimport { buildBubbleChartOptions, mapBubbleTooltipRow } from \"./adapter\";\nimport type { TypeBubbleChartProps } from \"./types\";\n\n/**\n * BubbleChart renders a Highcharts packedbubble (clustered, axis-less) chart\n * from a list of categories, each with its own nested inner bubbles.\n *\n * Like DonutChart, it carries no `styled-components`: the wrapper is a plain\n * `<div>` and the Highcharts styling ships as static CSS. Consumers import\n * both `@sproutsocial/seeds-react-data-viz/chart-styles.css` and\n * `.../bubble.css` once (the component never self-imports its CSS).\n */\nexport const BubbleChart = memo(function BubbleChart(\n props: TypeBubbleChartProps\n) {\n const { colors } = useSeedsChartSetup({\n series: props.data.map((d) => ({ color: d.color })),\n });\n\n const options = useMemo(() => buildBubbleChartOptions(props), [props]);\n const hasOnClick = Boolean(props.onClick);\n const hasOnPlotBackgroundClick = Boolean(props.onPlotBackgroundClick);\n\n // RAW per-category colors only — an unset category falls through to\n // chart-styles.css's --highcharts-color-N default, matching the bar\n // convention (bubble's outer categories are separate series, like bar's,\n // not donut's single-series-many-points model).\n const containerProps = getChartContainerProps({\n familyClasses: [\"seeds-chart-bubble\"],\n colors: props.data.map((d) => d.color),\n hasOnClick,\n className: props.className,\n });\n\n // `ChartRenderer` expects `(TypeChartTooltipRenderProps) => ReactNode`; the consumer's\n // function expects the narrower `TypeBubbleChartTooltipProps` (required\n // seriesIndex/pointIndex). Wrap rather than cast the function type so the\n // intent is explicit; `mapBubbleTooltipRow` applies the remount-desync null\n // guard.\n const tooltip = props.tooltip\n ? (args: TypeChartTooltipRenderProps) => {\n const row = mapBubbleTooltipRow(args.data);\n if (!row) return null;\n return props.tooltip!({ ...args, data: [row] });\n }\n : undefined;\n\n return (\n <div\n {...containerProps}\n {...(hasOnPlotBackgroundClick\n ? { \"data-has-on-plot-background-click\": \"\" }\n : {})}\n onClick={props.onPlotBackgroundClick}\n >\n <ChartRenderer\n // Highcharts <12.2.0 can't re-run the packedbubble split layout when\n // `splitSeries` toggles (highcharts/highcharts#21972, fixed by #22186\n // in 12.2.0), so we force a full remount via `key`. REMOVE this `key`\n // once seeds is on Highcharts >=12.2.0.\n // Unrelated, but a watch-item for that same upgrade: the #21972 fix\n // (#22186) introduced a still-open regression, #24134, where 2+\n // packedbubble charts that are BOTH in split mode at the same time on\n // one page share a global `allParentNodes` array, causing one chart's\n // bubbles to drift outside its plot area. A single bubble chart (or\n // several where at most one is split) is unaffected — only\n // simultaneous multi-chart split mode triggers it. Doesn't affect this\n // usage today (Smart Categories renders one bubble chart at a time),\n // but if a future surface ever renders 2+ split bubble charts at\n // once post-upgrade, apply the maintainers' workaround (reset\n // `allParentNodes` on chart `init`) until Highcharts ships a fix.\n key={`Bubble-Chart-${props.splitSeries ? \"SplitSeries\" : \"\"}`}\n options={options}\n series={props.data.map((d, i) => ({\n name: d.name,\n color: d.color ?? colors[i],\n }))}\n colors={colors}\n tooltip={tooltip}\n hasOnClick={hasOnClick}\n tooltipClickLabel={props.tooltipClickLabel}\n invalidNumberLabel={props.invalidNumberLabel}\n valueFormat={props.format}\n hideLegend\n exportTitle={props.exportTitle}\n onReady={props.onReady}\n />\n </div>\n );\n});\n","/**\n * TEMPORARY — remove when CE-202 lands (this file and its import in\n * `adapter.ts`).\n *\n * Raw inline-SVG markup for the bubble chart's data-label icons, duplicated\n * verbatim from web-app-core v1's `smartCategoryToSVGMap`\n * (`SmartCategoriesBubbleChart.tsx`), re-keyed from entity type to the Seeds\n * icon name the chart's `icon` prop actually receives (the Listening consumer\n * maps entity type -> icon name via `EntityTypeIconMap`). Copying v1's exact\n * glyphs is what guarantees pixel parity with the live chart.\n *\n * WHY inline SVG rather than the Seeds sprite `<use xlink:href=\"#seeds-svgs_...\">`:\n * Highcharts renders `useHTML` data labels outside the light-DOM tree the\n * sprite sheet is injected into, so cross-tree `<use>` resolution fails. This\n * is the same wall v1 hit, which is why it hand-copied raw path data instead\n * of referencing the sprite. The general fix — a lightweight per-icon markup\n * export from seeds-icons that avoids pulling the whole ~300KB+/category\n * sprite bundle into every `seeds-react-data-viz` consumer — is tracked by\n * CE-202; when it lands, resolve icons through that and delete this file.\n *\n * Fills are `currentColor` so each glyph inherits the data-label text color.\n * Each SVG keeps its native `width`/`height` for v1-identical inline sizing.\n * An icon outside this map degrades to the no-icon (name-only) label rather\n * than rendering nothing.\n */\nexport const BUBBLE_ICON_MARKUP: Record<string, string> = {\n \"user-outline\": `<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5.72756 6C7.38441 6 8.72756 4.65685 8.72756 3C8.72756 1.34315 7.38441 0 5.72756 0C4.07071 0 2.72756 1.34315 2.72756 3C2.72756 4.65685 4.07071 6 5.72756 6Z\" fill=\"currentColor\"/>\n<path d=\"M5.72756 12C8.50201 12 10.1833 10.1963 11.0339 8.89858C11.4669 8.23803 11.0644 7.41859 10.2861 7.28445C8.63561 7 7.15327 7 5.72756 7C4.30185 7 2.81951 7 1.16899 7.28445C0.390671 7.41859 -0.0117778 8.23803 0.421187 8.89858C1.2718 10.1963 2.95311 12 5.72756 12Z\" fill=\"currentColor\"/>\n</svg>`,\n \"location-pin-outline\": `<svg width=\"10\" height=\"12\" viewBox=\"0 0 10 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M4.99992 12C6.33325 12 9.66659 7.244 9.66659 4.66667C9.66659 2.08934 7.57725 0 4.99992 0C2.42259 0 0.333252 2.08934 0.333252 4.66667C0.333252 7.244 3.66659 12 4.99992 12ZM4.99992 4.66667C5.36811 4.66667 5.66659 4.36819 5.66659 4C5.66659 3.63181 5.36811 3.33333 4.99992 3.33333C4.63173 3.33333 4.33325 3.63181 4.33325 4C4.33325 4.36819 4.63173 4.66667 4.99992 4.66667Z\" fill=\"currentColor\"/>\n</svg>`,\n \"cart-outline\": `<svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M0.666748 1.83333H1.76749C1.93793 1.83333 2.08092 1.96192 2.09895 2.1314L2.75892 8.33515C1.9651 8.37397 1.33341 9.02988 1.33341 9.83333C1.33341 10.6618 2.00499 11.3333 2.83341 11.3333C3.66184 11.3333 4.33341 10.6618 4.33341 9.83333C4.33341 9.777 4.33031 9.72139 4.32426 9.66667H7.34257C7.33652 9.72139 7.33341 9.777 7.33341 9.83333C7.33341 10.6618 8.00499 11.3333 8.83341 11.3333C9.66184 11.3333 10.3334 10.6618 10.3334 9.83333C10.3334 9.00491 9.66184 8.33333 8.83341 8.33333H4.09959L3.92228 6.66667H9.18028C9.65696 6.66667 10.0674 6.33021 10.1609 5.86278L10.9203 2.06537C10.9616 1.85911 10.8038 1.66667 10.5935 1.66667H3.35763C3.14364 0.98448 2.50729 0.5 1.76749 0.5H0.666748V1.83333Z\" fill=\"currentColor\"/>\n</svg>`,\n \"briefcase-outline\": `<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M3.5 1.83333V2H1C0.447715 2 0 2.44772 0 3V10.3333C0 10.8856 0.447715 11.3333 1 11.3333H11C11.5523 11.3333 12 10.8856 12 10.3333V3C12 2.44772 11.5523 2 11 2H8.5V1.83333C8.5 0.820811 7.67919 0 6.66667 0H5.33333C4.32081 0 3.5 0.820811 3.5 1.83333ZM5.33333 1C4.8731 1 4.5 1.3731 4.5 1.83333V2H7.5V1.83333C7.5 1.3731 7.1269 1 6.66667 1H5.33333ZM6.66667 5.33333C6.66667 5.70152 6.36819 6 6 6C5.63181 6 5.33333 5.70152 5.33333 5.33333C5.33333 4.96514 5.63181 4.66667 6 4.66667C6.36819 4.66667 6.66667 4.96514 6.66667 5.33333ZM10.6667 6.88767V5.74479C9.44176 6.48334 7.81474 6.95116 6 6.95116C4.18526 6.95116 2.55823 6.48334 1.33333 5.74479V6.88767C2.64682 7.55696 4.25842 7.95116 6 7.95116C7.74158 7.95116 9.35318 7.55696 10.6667 6.88767Z\" fill=\"currentColor\"/>\n</svg>`,\n \"laptop-mobile-outline\": `<svg width=\"13\" height=\"10\" viewBox=\"0 0 13 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M2.84994 0.333313C2.29765 0.333313 1.84993 0.781028 1.84993 1.33331V7.33331H0.516602C0.516602 7.8856 0.964317 8.33331 1.5166 8.33331H6.84994V3.33331C6.84994 2.22874 7.74537 1.33331 8.84994 1.33331H11.1833C11.1833 0.781028 10.7356 0.333313 10.1833 0.333313H2.84994Z\" fill=\"currentColor\"/>\n<path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M7.84994 3.33331C7.84994 2.78103 8.29765 2.33331 8.84994 2.33331H11.5166C12.0689 2.33331 12.5166 2.78103 12.5166 3.33331V8.66665C12.5166 9.21893 12.0689 9.66665 11.5166 9.66665H8.84994C8.29765 9.66665 7.84994 9.21893 7.84994 8.66665V3.33331ZM10.6833 8.16665C10.6833 8.44279 10.4594 8.66665 10.1833 8.66665C9.90713 8.66665 9.68327 8.44279 9.68327 8.16665C9.68327 7.8905 9.90713 7.66665 10.1833 7.66665C10.4594 7.66665 10.6833 7.8905 10.6833 8.16665Z\" fill=\"currentColor\"/>\n</svg>`,\n \"calendar-day-outline\": `<svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M3.3632 1.33333H7.69653V0H8.69653V1.33333H9.8632C10.4155 1.33333 10.8632 1.78105 10.8632 2.33333V10.3333C10.8632 10.8856 10.4155 11.3333 9.8632 11.3333H1.19653C0.644248 11.3333 0.196533 10.8856 0.196533 10.3333V2.33333C0.196533 1.78105 0.644248 1.33333 1.19653 1.33333H2.3632V0H3.3632V1.33333ZM1.52987 2.66667V4H9.52987V2.66667H1.52987ZM3.8632 5.33333H1.8632V7.33333H3.8632V5.33333Z\" fill=\"currentColor\"/>\n</svg>`,\n \"chart-pie-outline\": `<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M10.9888 9.33342C11.6481 8.34673 12 7.18669 12 6H6V0C4.81331 0 3.65328 0.351894 2.66658 1.01118C1.67989 1.67047 0.910851 2.60754 0.456725 3.7039C0.00259971 4.80026 -0.11622 6.00666 0.115291 7.17054C0.346802 8.33443 0.918247 9.40353 1.75736 10.2426C2.59648 11.0818 3.66557 11.6532 4.82946 11.8847C5.99335 12.1162 7.19975 11.9974 8.2961 11.5433C9.39246 11.0892 10.3295 10.3201 10.9888 9.33342ZM7.33334 4.66672L11.8513 4.66656C11.3422 2.42346 9.57645 0.657717 7.33334 0.148727V4.66672Z\" fill=\"currentColor\"/>\n</svg>`,\n \"paper-outline\": `<svg width=\"10\" height=\"12\" viewBox=\"0 0 10 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1.06836 12C0.516075 12 0.0683594 11.5523 0.0683594 11V1C0.0683594 0.447715 0.516075 0 1.06836 0H3.73503C4.28731 0 4.73503 0.447715 4.73503 1V2.83333C4.73503 4.02995 5.70508 5 6.90169 5H8.40169C8.95398 5 9.40169 5.44772 9.40169 6V11C9.40169 11.5523 8.95398 12 8.40169 12H1.06836Z\" fill=\"currentColor\"/>\n<path d=\"M5.73503 2.49999V0.107381C7.61938 0.518781 9.07818 2.06865 9.35443 3.99999H7.23503C6.4066 3.99999 5.73503 3.32841 5.73503 2.49999Z\" fill=\"currentColor\"/>\n</svg>`,\n};\n","import type { TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { BUBBLE_ICON_MARKUP } from \"./iconMarkup\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport { deriveClickCoords } from \"../shared/pointerClick\";\nimport type {\n TypeSeedsChartBubbleDataLabelFormatterContext,\n TypeSeedsChartOptions,\n TypeSeedsChartPackedBubbleSeriesOptions,\n} from \"../shared/chartBase\";\nimport type { TypeChartTooltipDataRow } from \"../shared/chartTooltip\";\nimport {\n BUBBLE_CHART_DEFAULT_MAX_SIZE,\n BUBBLE_CHART_DEFAULT_PADDING,\n BUBBLE_CHART_HEIGHT,\n} from \"../../constants/chartOptions\";\nimport type {\n TypeBubbleCategoryDataPoint,\n TypeBubbleChartClickData,\n TypeBubbleChartProps,\n TypeBubbleChartTooltipRow,\n TypeSeedsChartBubbleClickEvent,\n} from \"./types\";\n\nfunction defaultPointDescriptionFormatter(point: {\n name: string;\n value: number;\n}): string {\n return `${point.name}: ${point.value}. Press Enter or Space to activate.`;\n}\n\n/**\n * A bare icon name (no `-outline`/`-solid` suffix) resolves to its default\n * variant, matching `seeds-react-icon`'s own `resolveIconName` (`outline` at\n * this label's rendered size — mirrors non-mini `<Icon>` sizing, since\n * `BUBBLE_ICON_MARKUP` only stocks the outline variant).\n */\nfunction resolveIconName(name: TypeIconName): string {\n return name.endsWith(\"-outline\") || name.endsWith(\"-solid\")\n ? name\n : `${name}-outline`;\n}\n\n// Icon markup lives in ./iconMarkup (a verbatim, temporary duplicate of v1's\n// raw-SVG map — see that file's header and CE-202). Kept out of this adapter so\n// the eventual general fix is a one-file deletion, not a surgical edit here.\nfunction buildIconMarkup(icon: TypeIconName): string | undefined {\n return BUBBLE_ICON_MARKUP[resolveIconName(icon)];\n}\n\nfunction escapeHtml(value: string): string {\n return value\n .replace(/&/g, \"&\")\n .replace(/</g, \"<\")\n .replace(/>/g, \">\")\n .replace(/\"/g, \""\");\n}\n\n// v1's radius thresholds (`MINIMUM_BUBBLE_RADIUS_FOR_CATEGORY_TEXT` /\n// `MINIMUM_BUBBLE_RADIUS_FOR_DATALABEL_TEXT`), generalized per SPEC decision\n// 9a: the rule is icon-presence-driven, not view-mode-driven. v1 conflated the\n// two because overview-mode categories were the only points it ever assigned\n// an icon to — incidental, not load-bearing.\nconst ICON_LABEL_TEXT_MIN_RADIUS = 40;\nconst NO_ICON_LABEL_MIN_RADIUS = 25;\n\n/**\n * Assembles a packedbubble data label as an HTML string (`useHTML: true`,\n * required — see `charts/README.md`'s known gap, mirrored from v1). Icon\n * present → icon always renders, name conditional on radius; no icon → hidden\n * below a radius floor, else the name clipped/wrapped to the bubble's\n * diameter. Mirrors v1's `dataLabelFormatter` exactly: a plain `<div>` with the\n * inline icon to the left of the name (v1 does nothing more — it relies on the\n * browser-default inline `<svg>`; see bubble.css for the Tailwind-Preflight\n * override that keeps that default intact here). An `icon` outside\n * `BUBBLE_ICON_MARKUP`'s current coverage falls through to the no-icon branch\n * (name only) rather than rendering an empty/broken icon.\n */\nfunction buildBubbleDataLabel(\n point: { name: string; icon?: TypeIconName },\n radius: number\n): string {\n const name = escapeHtml(point.name);\n const iconMarkup = point.icon ? buildIconMarkup(point.icon) : undefined;\n if (iconMarkup) {\n const showName = radius > ICON_LABEL_TEXT_MIN_RADIUS;\n return `<div>${iconMarkup}${showName ? ` <span>${name}</span>` : \"\"}</div>`;\n }\n if (radius < NO_ICON_LABEL_MIN_RADIUS) return \"\";\n const diameter = radius * 2;\n return `<div style=\"max-width: ${diameter}px; max-height: ${diameter}px; overflow: hidden; text-overflow: ellipsis; white-space: wrap;\" title=\"${name}\">${name}</div>`;\n}\n\nexport function transformBubbleDataToSeries(\n data: TypeBubbleCategoryDataPoint[]\n): TypeSeedsChartPackedBubbleSeriesOptions[] {\n return data.map((category, index) => ({\n type: \"packedbubble\",\n name: category.name,\n data: category.innerBubbles.map((bubble) => ({\n name: bubble.name,\n value: bubble.value,\n })),\n color: category.color,\n colorIndex: index,\n }));\n}\n\n/**\n * Keyboard activation has no `stopPropagation` and its `type` isn't `\"click\"`;\n * derive `pageX`/`pageY` from the target's bounding rect for keyboard, from\n * the raw event for a mouse click. Mirrors v1's `transformBubbleChartClickData`.\n */\nexport function transformBubbleClickData(\n event: TypeSeedsChartBubbleClickEvent\n): TypeBubbleChartClickData {\n return {\n name: event.point.name,\n // Optional on the event type only to keep it comparable with Highcharts'\n // `Point` (see `TypeSeedsChartBubbleClickEvent`); always set at runtime.\n value: event.point.value!,\n seriesIndex: event.point.series.index,\n pointIndex: event.point.index,\n ...deriveClickCoords(event),\n };\n}\n\n/**\n * During the split<->unsplit remount transition the tooltip context is\n * briefly missing data (name/seriesIndex undefined) — bail rather than render\n * a broken tooltip. Mirrors v1.\n */\nexport function mapBubbleTooltipRow(\n data: TypeChartTooltipDataRow[]\n): TypeBubbleChartTooltipRow | null {\n const row = data[0] as TypeBubbleChartTooltipRow | undefined;\n if (row?.name == null || row?.seriesIndex == null) return null;\n return row;\n}\n\nexport function buildBubbleChartOptions(\n props: TypeBubbleChartProps\n): TypeSeedsChartOptions {\n const hasOnClick = Boolean(props.onClick);\n const base = buildBaseChartOptions({\n type: \"packedbubble\",\n description: props.accessibility.description,\n svgContainerLabel: props.accessibility.svgContainerLabel,\n ...(hasOnClick\n ? {\n point: {\n descriptionFormatter:\n props.accessibility.point?.descriptionFormatter ??\n defaultPointDescriptionFormatter,\n },\n }\n : {}),\n });\n\n return {\n ...base,\n chart: {\n ...base.chart,\n type: \"packedbubble\",\n height: props.height ?? BUBBLE_CHART_HEIGHT,\n },\n plotOptions: {\n packedbubble: {\n minSize: \"30%\",\n maxSize: props.maxBubbleSize ?? BUBBLE_CHART_DEFAULT_MAX_SIZE,\n draggable: false,\n states: { hover: { enabled: false } },\n layoutAlgorithm: {\n gravitationalConstant: 0.05,\n seriesInteraction: true,\n parentNodeLimit: true,\n enableSimulation: false,\n bubblePadding: props.bubblePadding ?? BUBBLE_CHART_DEFAULT_PADDING,\n splitSeries: props.splitSeries ?? false,\n },\n dataLabels: {\n enabled: true,\n // See chartBase.tsx's TypeSeedsChartPackedBubblePlotOptions.dataLabels —\n // the label formatter returns HTML (icon + wrapped text); preserved\n // for functional parity (known useHTML gap, mirrors bar's axis\n // labels).\n useHTML: true,\n formatter(this: TypeSeedsChartBubbleDataLabelFormatterContext) {\n const inner =\n props.data[this.point.series.index]?.innerBubbles[\n this.point.index\n ];\n return buildBubbleDataLabel(\n { name: this.point.name, icon: inner?.icon },\n this.radius\n );\n },\n },\n accessibility: {\n enabled: true,\n keyboardNavigation: { enabled: true },\n point: { valueDescriptionFormat: \"{point.name}: {point.value}\" },\n },\n point: {\n events: {\n click: hasOnClick\n ? (event: TypeSeedsChartBubbleClickEvent) => {\n event.stopPropagation?.();\n // Keyboard events have no `target` when not a genuine click.\n if (event.type !== \"click\" && !event.target) return;\n props.onClick!(transformBubbleClickData(event));\n }\n : undefined,\n mouseOver: props.onMouseEnter\n ? function (this: { name: string }) {\n props.onMouseEnter!({ position: this.name });\n }\n : undefined,\n mouseOut: props.onMouseLeave\n ? function (this: { name: string }) {\n props.onMouseLeave!({ position: this.name });\n }\n : undefined,\n },\n },\n },\n },\n series: transformBubbleDataToSeries(props.data),\n };\n}\n"]}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* an optional `filename` overrides the generated default. No Highcharts type,
|
|
5
5
|
* ref, or method shape crosses this boundary.
|
|
6
6
|
*/
|
|
7
|
-
interface
|
|
7
|
+
interface TypeChartExportHandle {
|
|
8
8
|
exportPNG: (opts?: {
|
|
9
9
|
filename?: string;
|
|
10
10
|
}) => Promise<void>;
|
|
@@ -20,9 +20,9 @@ interface ChartExportHandle {
|
|
|
20
20
|
}
|
|
21
21
|
/**
|
|
22
22
|
* Canonical client-side export formats offered by `ChartExportMenu`. Co-located
|
|
23
|
-
* with `
|
|
23
|
+
* with `TypeChartExportHandle` so the format vocabulary lives next to the handle it
|
|
24
24
|
* maps onto; this leaf imports nothing, so re-exporting it carries no cycle risk.
|
|
25
25
|
*/
|
|
26
|
-
type
|
|
26
|
+
type TypeChartExportFormat = "png" | "svg" | "pdf" | "csv";
|
|
27
27
|
|
|
28
|
-
export type {
|
|
28
|
+
export type { TypeChartExportHandle as T, TypeChartExportFormat as a };
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* an optional `filename` overrides the generated default. No Highcharts type,
|
|
5
5
|
* ref, or method shape crosses this boundary.
|
|
6
6
|
*/
|
|
7
|
-
interface
|
|
7
|
+
interface TypeChartExportHandle {
|
|
8
8
|
exportPNG: (opts?: {
|
|
9
9
|
filename?: string;
|
|
10
10
|
}) => Promise<void>;
|
|
@@ -20,9 +20,9 @@ interface ChartExportHandle {
|
|
|
20
20
|
}
|
|
21
21
|
/**
|
|
22
22
|
* Canonical client-side export formats offered by `ChartExportMenu`. Co-located
|
|
23
|
-
* with `
|
|
23
|
+
* with `TypeChartExportHandle` so the format vocabulary lives next to the handle it
|
|
24
24
|
* maps onto; this leaf imports nothing, so re-exporting it carries no cycle risk.
|
|
25
25
|
*/
|
|
26
|
-
type
|
|
26
|
+
type TypeChartExportFormat = "png" | "svg" | "pdf" | "csv";
|
|
27
27
|
|
|
28
|
-
export type {
|
|
28
|
+
export type { TypeChartExportHandle as T, TypeChartExportFormat as a };
|