@sproutsocial/seeds-react-data-viz 0.21.2 → 0.22.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/bar/index.d.mts +5 -9
- package/dist/bar/index.d.ts +5 -9
- package/dist/bar/index.js +12 -12
- package/dist/bar/index.js.map +1 -1
- package/dist/bubble/index.d.mts +102 -0
- package/dist/bubble/index.d.ts +102 -0
- package/dist/bubble/index.js +235 -0
- package/dist/bubble/index.js.map +1 -0
- package/dist/bubble.css +104 -0
- package/dist/{chartBase-Cn_5CUJi.d.mts → chartBase-BClSc5EN.d.mts} +4 -0
- package/dist/{chartBase-C-l7yYGx.d.ts → chartBase-CycEw2vy.d.ts} +4 -0
- package/dist/chartOptions-DHzoGRdG.d.mts +24 -0
- package/dist/chartOptions-DHzoGRdG.d.ts +24 -0
- package/dist/charts.css +105 -0
- package/dist/{chunk-46L4YBLC.js → chunk-2H2Z7PKZ.js} +1 -14
- package/dist/chunk-2H2Z7PKZ.js.map +1 -0
- package/dist/{chunk-CYQXUAJC.js → chunk-33Y5FZTT.js} +10 -2
- package/dist/chunk-33Y5FZTT.js.map +1 -0
- package/dist/{chunk-27M4FDNK.js → chunk-GWP3PWIG.js} +84 -27
- package/dist/chunk-GWP3PWIG.js.map +1 -0
- package/dist/{chunk-XYE6O77Z.js → chunk-KMJD7BW3.js} +3 -3
- package/dist/{chunk-XYE6O77Z.js.map → chunk-KMJD7BW3.js.map} +1 -1
- package/dist/donut/index.d.mts +4 -8
- package/dist/donut/index.d.ts +4 -8
- package/dist/donut/index.js +7 -7
- package/dist/esm/bar/index.js +8 -8
- package/dist/esm/bubble/index.js +235 -0
- package/dist/esm/bubble/index.js.map +1 -0
- package/dist/esm/{chunk-QSSYSKRP.js → chunk-JGM4M7QV.js} +70 -13
- package/dist/esm/chunk-JGM4M7QV.js.map +1 -0
- package/dist/esm/{chunk-KMFRRUTY.js → chunk-KQKAVIYW.js} +2 -2
- package/dist/esm/{chunk-XEKQTAUH.js → chunk-NZX3WPXT.js} +9 -22
- package/dist/esm/chunk-NZX3WPXT.js.map +1 -0
- package/dist/esm/{chunk-XMYGML25.js → chunk-XRZJACCB.js} +10 -2
- package/dist/esm/{chunk-XMYGML25.js.map → chunk-XRZJACCB.js.map} +1 -1
- package/dist/esm/donut/index.js +3 -3
- package/dist/esm/index.js +10 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/line-area/index.js +8 -8
- package/dist/esm/sparkline/index.js +2 -2
- package/dist/index.d.mts +3 -19
- package/dist/index.d.ts +3 -19
- package/dist/index.js +66 -58
- package/dist/index.js.map +1 -1
- package/dist/{interactions-DoWoL7bu.d.mts → interactions-pEXA1XxF.d.mts} +16 -1
- package/dist/{interactions-DoWoL7bu.d.ts → interactions-pEXA1XxF.d.ts} +16 -1
- package/dist/line-area/index.d.mts +4 -8
- package/dist/line-area/index.d.ts +4 -8
- package/dist/line-area/index.js +12 -12
- package/dist/line-area/index.js.map +1 -1
- package/dist/sparkline/index.d.mts +1 -1
- package/dist/sparkline/index.d.ts +1 -1
- package/dist/sparkline/index.js +4 -4
- package/package.json +16 -10
- package/dist/chunk-27M4FDNK.js.map +0 -1
- package/dist/chunk-46L4YBLC.js.map +0 -1
- package/dist/chunk-CYQXUAJC.js.map +0 -1
- package/dist/esm/chunk-QSSYSKRP.js.map +0 -1
- package/dist/esm/chunk-XEKQTAUH.js.map +0 -1
- /package/dist/esm/{chunk-KMFRRUTY.js.map → chunk-KQKAVIYW.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/chunk-
|
|
1
|
+
{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/chunk-KMJD7BW3.js","../src/charts/shared/annotations.ts","../src/charts/shared/valueAxisLabelFormatter.ts"],"names":[],"mappings":"AAAA;AACE;AACF,sDAA4B;AAC5B;AACA;ACkCO,SAAS,qBAAA,CACd,WAAA,EAIA;AACA,EAAA,GAAA,CAAI,iBAAC,WAAA,2BAAa,QAAA,EAAQ;AACxB,IAAA,OAAO,EAAE,WAAA,EAAa,KAAA,CAAA,EAAW,MAAA,EAAQ,KAAA,EAAU,CAAA;AAAA,EACrD;AACA,EAAA,MAAM,OAAA,EAGA,CAAC,CAAA;AACP,EAAA,MAAM,OAAA,kBAAgC,IAAI,GAAA,CAAI,CAAA;AAC9C,EAAA,IAAA,CAAA,MAAW,WAAA,GAAc,WAAA,EAAa;AACpC,IAAA,MAAM,EAAE,SAAS,EAAA,EAAI,UAAA;AACrB,IAAA,MAAA,CAAO,IAAA,CAAK;AAAA;AAAA,MAEV,KAAA,EAAO,EAAE,CAAA,EAAG,QAAA,EAAU,CAAA,EAAG,CAAA,EAAG,KAAA,EAAO,CAAA,EAAG,KAAA,EAAO,EAAE,CAAA;AAAA;AAAA,MAE/C,IAAA,EAAM;AAAA,IACR,CAAC,CAAA;AAID,IAAA,MAAA,CAAO,GAAA,CAAI,QAAA,EAAU,UAAU,CAAA;AAAA,EACjC;AACA,EAAA,GAAA,CAAI,MAAA,CAAO,OAAA,IAAW,CAAA,EAAG;AACvB,IAAA,OAAO,EAAE,WAAA,EAAa,KAAA,CAAA,EAAW,MAAA,EAAQ,KAAA,EAAU,CAAA;AAAA,EACrD;AACA,EAAA,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAA,EAAa,CAAC,EAAE,MAAA,EAAQ,YAAA,EAAc,EAAE,OAAA,EAAS,IAAA,EAAM,OAAA,EAAS,EAAE,EAAE,CAAC,CAAA;AAAA,IACrE;AAAA,EACF,CAAA;AACF;AD3CA;AACA;AEjCA,sEAA8B;AAW9B,IAAM,aAAA,EAAe,OAAA;AAWrB,SAAS,yBAAA,CACP,OAAA,EACkB;AAClB,EAAA,MAAM,cAAA,EAAgB,OAAA,CAAQ,IAAA,CAAK,aAAA;AACnC,EAAA,MAAM,SAAA,EACJ,cAAA,GAAiB,aAAA,CAAc,OAAA,EAAS,EAAA,EACpC,aAAA,CAAc,aAAA,CAAc,OAAA,EAAS,CAAC,EAAA,EACtC,KAAA,CAAA;AACN,EAAA,OAAO,OAAO,SAAA,IAAa,SAAA,GAAY,SAAA,EAAW,KAAA,EAAO,IAAA,EAAO,IAAA;AAClE;AAWO,SAAS,8BAAA,CAAA,EAEN;AACR,EAAA,MAAM,YAAA,EAAc,MAAA,CAAO,IAAA,CAAK,KAAK,CAAA;AAErC,EAAA,GAAA,CAAI,YAAA,IAAgB,CAAA,EAAG;AACrB,IAAA,OAAO,8CAAA,EAAgB,MAAA,EAAQ,YAAA,EAAc,MAAA,EAAQ,EAAE,CAAC,CAAA;AAAA,EAC1D;AAEA,EAAA,MAAM,WAAA,EAAa,yBAAA,CAA0B,IAAI,CAAA;AAEjD,EAAA,OAAO,8CAAA;AAAc,IACnB,UAAA;AAAA,IACA,MAAA,EAAQ,SAAA;AAAA,IACR,MAAA,EAAQ,YAAA;AAAA,IACR,MAAA,EAAQ;AAAA,EACV,CAAC,CAAA;AACH;AAYO,SAAS,2BAAA,CAA4B,MAAA,EAAqB;AAC/D,EAAA,OAAO,QAAA,CAAA,EAAwD;AAC7D,IAAA,MAAM,YAAA,EAAc,MAAA,CAAO,IAAA,CAAK,KAAK,CAAA;AAMrC,IAAA,MAAM,WAAA,EACJ,MAAA,CAAO,WAAA,IAAe,MAAA,EAAQ,MAAA,EAAQ,yBAAA,CAA0B,IAAI,CAAA;AAEtE,IAAA,OAAO,6CAAA,EAAiB,GAAG,MAAA,EAAQ,KAAA,EAAO,WAAA,EAAa,WAAW,CAAC,CAAA;AAAA,EACrE,CAAA;AACF;AFvBA;AACA;AACE;AACA;AACA;AACF,kMAAC","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/chunk-KMJD7BW3.js","sourcesContent":[null,"// Shared annotation plumbing across v2 chart families. Currently consumed by\n// BarChart; v2 Line/Area will share the same `annotations` shape and reuse\n// `buildAnnotationConfig` directly. Annotation data is purely numeric —\n// the module has no knowledge of `categories`; resolving a numeric position to\n// a display name is the tooltip's job (see chartBase `renderContent`).\n\nimport type { TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport type { SeedsChartAnnotationsOptions } from \"./chartBase\";\n\n/**\n * Annotations keyed by the numeric Highcharts index. Both consumers resolve\n * numerically: the marker portal reads `label.point.x` and the tooltip reads\n * `context.point.x` (numeric on both category and datetime axes).\n */\nexport type ChartAnnotationLookup = Map<number, ChartAnnotation>;\n\n/**\n * Declarative annotation shape — the DS renders the marker and tooltip header\n * internally; consumers don't supply render functions. See CE-7.\n */\nexport interface ChartAnnotation {\n /** Numeric x-axis coordinate — a category index (category axes) or the raw coordinate (datetime/linear axes). */\n position: number;\n /** Icon shown above the chart at `position` and inline with `title` in the tooltip header. */\n icon?: TypeIconName;\n /** Color applied to the marker's vertical line. */\n color?: string;\n /** Tooltip header line 1. */\n title?: string;\n /** Tooltip header line 2. */\n description?: string;\n}\n\n/**\n * Build the Highcharts `annotations` config and a parallel lookup keyed by the\n * numeric `position`. Both consumers (chart adapter for Highcharts, ChartRenderer\n * for the portal + tooltip) read from the same numeric lookup to stay aligned.\n */\nexport function buildAnnotationConfig(\n annotations: ChartAnnotation[] | undefined\n): {\n annotations: SeedsChartAnnotationsOptions[] | undefined;\n lookup: ChartAnnotationLookup | undefined;\n} {\n if (!annotations?.length) {\n return { annotations: undefined, lookup: undefined };\n }\n const labels: {\n point: { x: number; y: number; xAxis: 0; yAxis: 0 };\n text: string;\n }[] = [];\n const lookup: ChartAnnotationLookup = new Map();\n for (const annotation of annotations) {\n const { position } = annotation;\n labels.push({\n // Highcharts anchor — always uses `x` regardless of chart orientation.\n point: { x: position, y: 0, xAxis: 0, yAxis: 0 },\n // Space (not empty) — Highcharts reverts to its built-in label text on empty string.\n text: \" \",\n });\n // Keyed by the numeric position only. The marker portal reads\n // `label.point.x` and the tooltip reads `context.point.x` — both numeric on\n // every axis type, so no category-name keying is needed.\n lookup.set(position, annotation);\n }\n if (labels.length === 0) {\n return { annotations: undefined, lookup: undefined };\n }\n return {\n // `useHTML: true` makes Highcharts attach an HTML `graphic.div` to each\n // label, which the marker portal needs as its render target. `padding: 0`\n // removes Highcharts' default left padding so markers stay centered.\n annotations: [{ labels, labelOptions: { useHTML: true, padding: 0 } }],\n lookup,\n };\n}\n","import { formatNumeral } from \"@sproutsocial/seeds-react-numeral\";\n\nimport type { SeedsAxisLabelFormatterContext } from \"./chartBase\";\nimport { valueFormatter, type ValueFormat } from \"./formatters/valueFormatter\";\n\n/**\n * Fixed internal locale for the default value-axis formatter. Pins the en-US\n * compact symbols (2K / 1.2M / 1.2B) so output is deterministic regardless of\n * the environment's locale resolution.\n * TODO: consumer-facing locale and an override surface may be added later.\n */\nconst FIXED_LOCALE = \"en-US\";\n\n/**\n * Derive formatNumeral's `abbreviate` threshold from the axis tick scan.\n *\n * formatNumeral abbreviates above 10,000 by default; passing a numeric\n * `abbreviate` lowers that threshold to that value. When the top tick exceeds\n * 9,999 we lower it to 1,000 so the whole axis reads \"2K 4K 6K 8K 10K\" rather\n * than a mixed \"2,000 4,000 6,000 8,000 10K\". Otherwise `true` keeps the default\n * 10,000 threshold. Centralizes the 9,999 rule for both formatters below.\n */\nfunction deriveAbbreviateFromTicks(\n context: SeedsAxisLabelFormatterContext\n): boolean | number {\n const tickPositions = context.axis.tickPositions;\n const maxValue =\n tickPositions && tickPositions.length > 0\n ? tickPositions[tickPositions.length - 1]\n : undefined;\n return typeof maxValue === \"number\" && maxValue > 9999 ? 1000 : true;\n}\n\n/**\n * Internal, zero-config default value-axis label formatter for v2 chart\n * families. Abbreviates value-axis ticks (1.20K / 1.20M / 1.20B); decimal mode\n * only. Zero renders \"0\". Decimal compact precision is fixed at two fraction\n * digits, so abbreviated ticks always carry two decimals.\n *\n * Wired as a Highcharts `yAxis.labels.formatter`, invoked `this`-bound with the\n * Seeds-local context.\n */\nexport function defaultValueAxisLabelFormatter(\n this: SeedsAxisLabelFormatterContext\n): string {\n const numberValue = Number(this.value);\n\n if (numberValue === 0) {\n return formatNumeral({ locale: FIXED_LOCALE, number: 0 });\n }\n\n const abbreviate = deriveAbbreviateFromTicks(this);\n\n return formatNumeral({\n abbreviate,\n format: \"decimal\",\n locale: FIXED_LOCALE,\n number: numberValue,\n });\n}\n\n/**\n * Build a `format`-driven value-axis label formatter that runs a declarative\n * {@link ValueFormat} through the shared {@link valueFormatter}. Reuses the same\n * `tickPositions` scan as {@link defaultValueAxisLabelFormatter} so the\n * axis-wide \"smart 1k/10k\" abbreviation is preserved for decimal/currency ticks.\n *\n * Wired as a Highcharts `yAxis.labels.formatter`; invoked `this`-bound with the\n * Seeds-local context. The returned formatter never carries chart-engine types,\n * keeping the engine boundary intact.\n */\nexport function makeValueAxisLabelFormatter(format: ValueFormat) {\n return function (this: SeedsAxisLabelFormatterContext): string {\n const numberValue = Number(this.value);\n\n // Honor an explicit `abbreviate: false` opt-out; otherwise derive the\n // threshold from the same tick scan as the default formatter (abbreviation\n // only affects decimal/currency — percent and duration ignore it inside\n // valueFormatter).\n const abbreviate =\n format.abbreviate === false ? false : deriveAbbreviateFromTicks(this);\n\n return valueFormatter({ ...format, value: numberValue, abbreviate });\n };\n}\n"]}
|
package/dist/donut/index.d.mts
CHANGED
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { V as ValueFormat, C as ChartTooltipProps, a as ChartTooltipDataRow } from '../chartBase-BClSc5EN.mjs';
|
|
4
|
+
import { C as ChartColorableEntity, a as ChartIconableEntity, b as ChartClickHandler, c as ChartHoverHandler } from '../interactions-pEXA1XxF.mjs';
|
|
5
5
|
import { C as ChartExportHandle } from '../chartExport-CKYpuhik.mjs';
|
|
6
|
-
import
|
|
6
|
+
import '@sproutsocial/seeds-react-icon';
|
|
7
7
|
import '../types-DxrhdAdn.mjs';
|
|
8
8
|
import 'highcharts';
|
|
9
9
|
|
|
10
|
-
interface DonutDataPoint {
|
|
11
|
-
name: string;
|
|
10
|
+
interface DonutDataPoint extends ChartColorableEntity, ChartIconableEntity {
|
|
12
11
|
value: number | null;
|
|
13
|
-
color?: string;
|
|
14
|
-
/** Seeds icon or partner-logo name rendered in the legend chip. */
|
|
15
|
-
icon?: TypeIconName;
|
|
16
12
|
}
|
|
17
13
|
/** A donut tooltip row — always carries `percent` (Highcharts computes it for pie series). */
|
|
18
14
|
interface DonutChartTooltipRow extends ChartTooltipDataRow {
|
package/dist/donut/index.d.ts
CHANGED
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { V as ValueFormat, C as ChartTooltipProps, a as ChartTooltipDataRow } from '../chartBase-CycEw2vy.js';
|
|
4
|
+
import { C as ChartColorableEntity, a as ChartIconableEntity, b as ChartClickHandler, c as ChartHoverHandler } from '../interactions-pEXA1XxF.js';
|
|
5
5
|
import { C as ChartExportHandle } from '../chartExport-CKYpuhik.js';
|
|
6
|
-
import
|
|
6
|
+
import '@sproutsocial/seeds-react-icon';
|
|
7
7
|
import '../types-DxrhdAdn.js';
|
|
8
8
|
import 'highcharts';
|
|
9
9
|
|
|
10
|
-
interface DonutDataPoint {
|
|
11
|
-
name: string;
|
|
10
|
+
interface DonutDataPoint extends ChartColorableEntity, ChartIconableEntity {
|
|
12
11
|
value: number | null;
|
|
13
|
-
color?: string;
|
|
14
|
-
/** Seeds icon or partner-logo name rendered in the legend chip. */
|
|
15
|
-
icon?: TypeIconName;
|
|
16
12
|
}
|
|
17
13
|
/** A donut tooltip row — always carries `percent` (Highcharts computes it for pie series). */
|
|
18
14
|
interface DonutChartTooltipRow extends ChartTooltipDataRow {
|
package/dist/donut/index.js
CHANGED
|
@@ -3,20 +3,20 @@
|
|
|
3
3
|
var _chunk6EIJCJCNjs = require('../chunk-6EIJCJCN.js');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _chunk33Y5FZTTjs = require('../chunk-33Y5FZTT.js');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
var
|
|
12
|
-
require('../chunk-
|
|
11
|
+
var _chunkGWP3PWIGjs = require('../chunk-GWP3PWIG.js');
|
|
12
|
+
require('../chunk-2H2Z7PKZ.js');
|
|
13
13
|
|
|
14
14
|
// src/charts/donut/DonutChart.tsx
|
|
15
15
|
var _react = require('react');
|
|
16
16
|
|
|
17
17
|
// src/charts/donut/adapter.ts
|
|
18
18
|
function buildDonutOptions(props, colors) {
|
|
19
|
-
const base =
|
|
19
|
+
const base = _chunkGWP3PWIGjs.buildBaseChartOptions.call(void 0, {
|
|
20
20
|
type: "pie",
|
|
21
21
|
description: props.description
|
|
22
22
|
});
|
|
@@ -29,7 +29,7 @@ function buildDonutOptions(props, colors) {
|
|
|
29
29
|
// Height only — width is left fluid so the chart fills its container and
|
|
30
30
|
// the pie auto-centers. The container bounds the width (see styles.ts) so
|
|
31
31
|
// the legend below wraps to the donut and centers with it.
|
|
32
|
-
height: _nullishCoalesce(props.height, () => (
|
|
32
|
+
height: _nullishCoalesce(props.height, () => ( _chunk33Y5FZTTjs.DONUT_CHART_HEIGHT)),
|
|
33
33
|
// Drop Highcharts' default spacing so the donut uses the full height.
|
|
34
34
|
spacing: [0, 0, 0, 0]
|
|
35
35
|
},
|
|
@@ -75,7 +75,7 @@ function buildDonutOptions(props, colors) {
|
|
|
75
75
|
// src/charts/donut/DonutChart.tsx
|
|
76
76
|
var _jsxruntime = require('react/jsx-runtime');
|
|
77
77
|
var DonutChart = _react.memo.call(void 0, function DonutChart2(props) {
|
|
78
|
-
const { colors } =
|
|
78
|
+
const { colors } = _chunkGWP3PWIGjs.useSeedsChartSetup.call(void 0, {
|
|
79
79
|
series: props.data.map((d) => ({ color: d.color }))
|
|
80
80
|
});
|
|
81
81
|
const options = _react.useMemo.call(void 0,
|
|
@@ -91,7 +91,7 @@ var DonutChart = _react.memo.call(void 0, function DonutChart2(props) {
|
|
|
91
91
|
});
|
|
92
92
|
const tooltip = props.tooltip ? (args) => props.tooltip(args) : void 0;
|
|
93
93
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...containerProps, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
94
|
-
|
|
94
|
+
_chunkGWP3PWIGjs.ChartRenderer,
|
|
95
95
|
{
|
|
96
96
|
options,
|
|
97
97
|
series: props.data.map((d, i) => ({
|
package/dist/esm/bar/index.js
CHANGED
|
@@ -2,23 +2,23 @@ import {
|
|
|
2
2
|
buildAnnotationConfig,
|
|
3
3
|
defaultValueAxisLabelFormatter,
|
|
4
4
|
makeValueAxisLabelFormatter
|
|
5
|
-
} from "../chunk-
|
|
5
|
+
} from "../chunk-KQKAVIYW.js";
|
|
6
|
+
import {
|
|
7
|
+
buildDimensionalAxis,
|
|
8
|
+
resolveTooltipTimezone
|
|
9
|
+
} from "../chunk-NAKJY5PA.js";
|
|
6
10
|
import {
|
|
7
11
|
getChartContainerProps
|
|
8
12
|
} from "../chunk-P3MVYSHX.js";
|
|
9
13
|
import {
|
|
10
14
|
TIME_SERIES_CHART_HEIGHT
|
|
11
|
-
} from "../chunk-
|
|
12
|
-
import {
|
|
13
|
-
buildDimensionalAxis,
|
|
14
|
-
resolveTooltipTimezone
|
|
15
|
-
} from "../chunk-NAKJY5PA.js";
|
|
15
|
+
} from "../chunk-XRZJACCB.js";
|
|
16
16
|
import {
|
|
17
17
|
ChartRenderer,
|
|
18
18
|
buildBaseChartOptions,
|
|
19
19
|
useSeedsChartSetup
|
|
20
|
-
} from "../chunk-
|
|
21
|
-
import "../chunk-
|
|
20
|
+
} from "../chunk-JGM4M7QV.js";
|
|
21
|
+
import "../chunk-NZX3WPXT.js";
|
|
22
22
|
|
|
23
23
|
// src/charts/bar/BarChart.tsx
|
|
24
24
|
import { memo } from "react";
|
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
import {
|
|
2
|
+
getChartContainerProps
|
|
3
|
+
} from "../chunk-P3MVYSHX.js";
|
|
4
|
+
import {
|
|
5
|
+
BUBBLE_CHART_DEFAULT_MAX_SIZE,
|
|
6
|
+
BUBBLE_CHART_DEFAULT_PADDING,
|
|
7
|
+
BUBBLE_CHART_HEIGHT,
|
|
8
|
+
defaultBubbleChartWidth
|
|
9
|
+
} from "../chunk-XRZJACCB.js";
|
|
10
|
+
import {
|
|
11
|
+
ChartRenderer,
|
|
12
|
+
buildBaseChartOptions,
|
|
13
|
+
useSeedsChartSetup
|
|
14
|
+
} from "../chunk-JGM4M7QV.js";
|
|
15
|
+
import "../chunk-NZX3WPXT.js";
|
|
16
|
+
|
|
17
|
+
// src/charts/bubble/BubbleChart.tsx
|
|
18
|
+
import { memo, useMemo } from "react";
|
|
19
|
+
|
|
20
|
+
// src/charts/bubble/iconMarkup.ts
|
|
21
|
+
var BUBBLE_ICON_MARKUP = {
|
|
22
|
+
"user-outline": `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
23
|
+
<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"/>
|
|
24
|
+
<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"/>
|
|
25
|
+
</svg>`,
|
|
26
|
+
"location-pin-outline": `<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
27
|
+
<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"/>
|
|
28
|
+
</svg>`,
|
|
29
|
+
"cart-outline": `<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
30
|
+
<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"/>
|
|
31
|
+
</svg>`,
|
|
32
|
+
"briefcase-outline": `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
33
|
+
<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"/>
|
|
34
|
+
</svg>`,
|
|
35
|
+
"laptop-mobile-outline": `<svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
36
|
+
<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"/>
|
|
37
|
+
<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"/>
|
|
38
|
+
</svg>`,
|
|
39
|
+
"calendar-day-outline": `<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
40
|
+
<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"/>
|
|
41
|
+
</svg>`,
|
|
42
|
+
"chart-pie-outline": `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
43
|
+
<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"/>
|
|
44
|
+
</svg>`,
|
|
45
|
+
"paper-outline": `<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
46
|
+
<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"/>
|
|
47
|
+
<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"/>
|
|
48
|
+
</svg>`
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
// src/charts/bubble/adapter.ts
|
|
52
|
+
function defaultPointDescriptionFormatter(point) {
|
|
53
|
+
return `${point.name}: ${point.value}. Press Enter or Space to activate.`;
|
|
54
|
+
}
|
|
55
|
+
function resolveIconName(name) {
|
|
56
|
+
return name.endsWith("-outline") || name.endsWith("-solid") ? name : `${name}-outline`;
|
|
57
|
+
}
|
|
58
|
+
function buildIconMarkup(icon) {
|
|
59
|
+
return BUBBLE_ICON_MARKUP[resolveIconName(icon)];
|
|
60
|
+
}
|
|
61
|
+
function escapeHtml(value) {
|
|
62
|
+
return value.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
63
|
+
}
|
|
64
|
+
var ICON_LABEL_TEXT_MIN_RADIUS = 40;
|
|
65
|
+
var NO_ICON_LABEL_MIN_RADIUS = 25;
|
|
66
|
+
function buildBubbleDataLabel(point, radius) {
|
|
67
|
+
const name = escapeHtml(point.name);
|
|
68
|
+
const iconMarkup = point.icon ? buildIconMarkup(point.icon) : void 0;
|
|
69
|
+
if (iconMarkup) {
|
|
70
|
+
const showName = radius > ICON_LABEL_TEXT_MIN_RADIUS;
|
|
71
|
+
return `<div>${iconMarkup}${showName ? ` <span>${name}</span>` : ""}</div>`;
|
|
72
|
+
}
|
|
73
|
+
if (radius < NO_ICON_LABEL_MIN_RADIUS) return "";
|
|
74
|
+
const diameter = radius * 2;
|
|
75
|
+
return `<div style="max-width: ${diameter}px; max-height: ${diameter}px; overflow: hidden; text-overflow: ellipsis; white-space: wrap;" title="${name}">${name}</div>`;
|
|
76
|
+
}
|
|
77
|
+
function transformBubbleDataToSeries(data) {
|
|
78
|
+
return data.map((category, index) => ({
|
|
79
|
+
type: "packedbubble",
|
|
80
|
+
name: category.name,
|
|
81
|
+
data: category.innerBubbles.map((bubble) => ({
|
|
82
|
+
name: bubble.name,
|
|
83
|
+
value: bubble.value
|
|
84
|
+
})),
|
|
85
|
+
color: category.color,
|
|
86
|
+
colorIndex: index
|
|
87
|
+
}));
|
|
88
|
+
}
|
|
89
|
+
function transformBubbleClickData(event) {
|
|
90
|
+
const base = {
|
|
91
|
+
name: event.point.name,
|
|
92
|
+
value: event.point.value,
|
|
93
|
+
seriesIndex: event.point.series.index,
|
|
94
|
+
pointIndex: event.point.index
|
|
95
|
+
};
|
|
96
|
+
const isClickEvent = event.type === "click";
|
|
97
|
+
if (!isClickEvent && event.target) {
|
|
98
|
+
const rect = event.target.getBoundingClientRect();
|
|
99
|
+
return { ...base, pageX: rect.x, pageY: rect.y };
|
|
100
|
+
}
|
|
101
|
+
return { ...base, pageX: event.pageX ?? 0, pageY: event.pageY ?? 0 };
|
|
102
|
+
}
|
|
103
|
+
function mapBubbleTooltipRow(data) {
|
|
104
|
+
const row = data[0];
|
|
105
|
+
if (row?.name == null || row?.seriesIndex == null) return null;
|
|
106
|
+
return row;
|
|
107
|
+
}
|
|
108
|
+
function buildBubbleChartOptions(props) {
|
|
109
|
+
const hasOnClick = Boolean(props.onClick);
|
|
110
|
+
const base = buildBaseChartOptions({
|
|
111
|
+
type: "packedbubble",
|
|
112
|
+
description: props.accessibility.description,
|
|
113
|
+
svgContainerLabel: props.accessibility.svgContainerLabel,
|
|
114
|
+
...hasOnClick ? {
|
|
115
|
+
point: {
|
|
116
|
+
descriptionFormatter: props.accessibility.point?.descriptionFormatter ?? defaultPointDescriptionFormatter
|
|
117
|
+
}
|
|
118
|
+
} : {}
|
|
119
|
+
});
|
|
120
|
+
return {
|
|
121
|
+
...base,
|
|
122
|
+
chart: {
|
|
123
|
+
...base.chart,
|
|
124
|
+
type: "packedbubble",
|
|
125
|
+
height: props.height ?? BUBBLE_CHART_HEIGHT
|
|
126
|
+
},
|
|
127
|
+
plotOptions: {
|
|
128
|
+
packedbubble: {
|
|
129
|
+
minSize: "30%",
|
|
130
|
+
maxSize: props.maxBubbleSize ?? BUBBLE_CHART_DEFAULT_MAX_SIZE,
|
|
131
|
+
draggable: false,
|
|
132
|
+
states: { hover: { enabled: false } },
|
|
133
|
+
layoutAlgorithm: {
|
|
134
|
+
gravitationalConstant: 0.05,
|
|
135
|
+
seriesInteraction: true,
|
|
136
|
+
parentNodeLimit: true,
|
|
137
|
+
enableSimulation: false,
|
|
138
|
+
bubblePadding: props.bubblePadding ?? BUBBLE_CHART_DEFAULT_PADDING,
|
|
139
|
+
splitSeries: props.splitSeries ?? false
|
|
140
|
+
},
|
|
141
|
+
dataLabels: {
|
|
142
|
+
enabled: true,
|
|
143
|
+
// See chartBase.tsx's SeedsChartPackedBubblePlotOptions.dataLabels —
|
|
144
|
+
// the label formatter returns HTML (icon + wrapped text); preserved
|
|
145
|
+
// for functional parity (known useHTML gap, mirrors bar's axis
|
|
146
|
+
// labels).
|
|
147
|
+
useHTML: true,
|
|
148
|
+
formatter() {
|
|
149
|
+
const inner = props.data[this.point.series.index]?.innerBubbles[this.point.index];
|
|
150
|
+
return buildBubbleDataLabel(
|
|
151
|
+
{ name: this.point.name, icon: inner?.icon },
|
|
152
|
+
this.radius
|
|
153
|
+
);
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
accessibility: {
|
|
157
|
+
enabled: true,
|
|
158
|
+
keyboardNavigation: { enabled: true },
|
|
159
|
+
point: { valueDescriptionFormat: "{point.name}: {point.value}" }
|
|
160
|
+
},
|
|
161
|
+
point: {
|
|
162
|
+
events: {
|
|
163
|
+
click: hasOnClick ? (event) => {
|
|
164
|
+
event.stopPropagation?.();
|
|
165
|
+
if (event.type !== "click" && !event.target) return;
|
|
166
|
+
props.onClick(transformBubbleClickData(event));
|
|
167
|
+
} : void 0,
|
|
168
|
+
mouseOver: props.onMouseEnter ? function() {
|
|
169
|
+
props.onMouseEnter({ position: this.name });
|
|
170
|
+
} : void 0,
|
|
171
|
+
mouseOut: props.onMouseLeave ? function() {
|
|
172
|
+
props.onMouseLeave({ position: this.name });
|
|
173
|
+
} : void 0
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
series: transformBubbleDataToSeries(props.data)
|
|
179
|
+
};
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
// src/charts/bubble/BubbleChart.tsx
|
|
183
|
+
import { jsx } from "react/jsx-runtime";
|
|
184
|
+
var BubbleChart = memo(function BubbleChart2(props) {
|
|
185
|
+
const { colors } = useSeedsChartSetup({
|
|
186
|
+
series: props.data.map((d) => ({ color: d.color }))
|
|
187
|
+
});
|
|
188
|
+
const options = useMemo(() => buildBubbleChartOptions(props), [props]);
|
|
189
|
+
const hasOnClick = Boolean(props.onClick);
|
|
190
|
+
const hasOnPlotBackgroundClick = Boolean(props.onPlotBackgroundClick);
|
|
191
|
+
const containerProps = getChartContainerProps({
|
|
192
|
+
familyClasses: ["seeds-chart-bubble"],
|
|
193
|
+
colors: props.data.map((d) => d.color),
|
|
194
|
+
hasOnClick,
|
|
195
|
+
className: props.className
|
|
196
|
+
});
|
|
197
|
+
const tooltip = props.tooltip ? (args) => {
|
|
198
|
+
const row = mapBubbleTooltipRow(args.data);
|
|
199
|
+
if (!row) return null;
|
|
200
|
+
return props.tooltip({ ...args, data: [row] });
|
|
201
|
+
} : void 0;
|
|
202
|
+
return /* @__PURE__ */ jsx(
|
|
203
|
+
"div",
|
|
204
|
+
{
|
|
205
|
+
...containerProps,
|
|
206
|
+
...hasOnPlotBackgroundClick ? { "data-has-on-plot-background-click": "" } : {},
|
|
207
|
+
onClick: props.onPlotBackgroundClick,
|
|
208
|
+
children: /* @__PURE__ */ jsx(
|
|
209
|
+
ChartRenderer,
|
|
210
|
+
{
|
|
211
|
+
options,
|
|
212
|
+
series: props.data.map((d, i) => ({
|
|
213
|
+
name: d.name,
|
|
214
|
+
color: d.color ?? colors[i]
|
|
215
|
+
})),
|
|
216
|
+
colors,
|
|
217
|
+
tooltip,
|
|
218
|
+
hasOnClick,
|
|
219
|
+
tooltipClickLabel: props.tooltipClickLabel,
|
|
220
|
+
invalidNumberLabel: props.invalidNumberLabel,
|
|
221
|
+
valueFormat: props.format,
|
|
222
|
+
hideLegend: true,
|
|
223
|
+
exportTitle: props.exportTitle,
|
|
224
|
+
onReady: props.onReady
|
|
225
|
+
},
|
|
226
|
+
`Bubble-Chart-${props.splitSeries ? "SplitSeries" : ""}`
|
|
227
|
+
)
|
|
228
|
+
}
|
|
229
|
+
);
|
|
230
|
+
});
|
|
231
|
+
export {
|
|
232
|
+
BubbleChart,
|
|
233
|
+
defaultBubbleChartWidth
|
|
234
|
+
};
|
|
235
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/charts/bubble/BubbleChart.tsx","../../../src/charts/bubble/iconMarkup.ts","../../../src/charts/bubble/adapter.ts"],"sourcesContent":["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"],"mappings":"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","names":["BubbleChart"]}
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
ChartTooltipTitle,
|
|
11
11
|
GlobalChartStyleOverrides,
|
|
12
12
|
transformTimeSeriesTooltipData
|
|
13
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-NZX3WPXT.js";
|
|
14
14
|
|
|
15
15
|
// src/charts/shared/chartBase.tsx
|
|
16
16
|
import Highcharts from "highcharts";
|
|
@@ -20,6 +20,7 @@ import highchartsAnnotations from "highcharts/modules/annotations";
|
|
|
20
20
|
import highchartsExporting from "highcharts/modules/exporting";
|
|
21
21
|
import highchartsOfflineExporting from "highcharts/modules/offline-exporting";
|
|
22
22
|
import highchartsExportData from "highcharts/modules/export-data";
|
|
23
|
+
import highchartsMore from "highcharts/highcharts-more";
|
|
23
24
|
import {
|
|
24
25
|
useCallback,
|
|
25
26
|
useEffect as useEffect2,
|
|
@@ -315,6 +316,7 @@ highchartsAnnotations(Highcharts);
|
|
|
315
316
|
highchartsExporting(Highcharts);
|
|
316
317
|
highchartsOfflineExporting(Highcharts);
|
|
317
318
|
highchartsExportData(Highcharts);
|
|
319
|
+
highchartsMore(Highcharts);
|
|
318
320
|
function isChartStacked(options) {
|
|
319
321
|
const plotOptions = options.plotOptions;
|
|
320
322
|
if (!plotOptions) return false;
|
|
@@ -521,9 +523,50 @@ function ChartRenderer({
|
|
|
521
523
|
});
|
|
522
524
|
return () => unbind();
|
|
523
525
|
}, [chart]);
|
|
524
|
-
const highchartsOptions = useMemo(
|
|
525
|
-
|
|
526
|
+
const highchartsOptions = useMemo(() => {
|
|
527
|
+
const pointDescriptionFormatter = options.accessibility?.point?.descriptionFormatter;
|
|
528
|
+
const svgContainerLabel = options.accessibility?.svgContainerLabel;
|
|
529
|
+
const packedBubbleDataLabelFormatter = options.plotOptions?.packedbubble?.dataLabels?.formatter;
|
|
530
|
+
return {
|
|
526
531
|
...options,
|
|
532
|
+
...packedBubbleDataLabelFormatter ? {
|
|
533
|
+
plotOptions: {
|
|
534
|
+
...options.plotOptions,
|
|
535
|
+
packedbubble: {
|
|
536
|
+
...options.plotOptions?.packedbubble,
|
|
537
|
+
dataLabels: {
|
|
538
|
+
...options.plotOptions?.packedbubble?.dataLabels,
|
|
539
|
+
formatter() {
|
|
540
|
+
const bubblePoint = this.point;
|
|
541
|
+
return packedBubbleDataLabelFormatter.call({
|
|
542
|
+
point: {
|
|
543
|
+
name: bubblePoint.name,
|
|
544
|
+
value: bubblePoint.value ?? bubblePoint.y,
|
|
545
|
+
index: bubblePoint.index,
|
|
546
|
+
series: { index: bubblePoint.series.index }
|
|
547
|
+
},
|
|
548
|
+
radius: bubblePoint.marker?.radius ?? 0
|
|
549
|
+
});
|
|
550
|
+
}
|
|
551
|
+
}
|
|
552
|
+
}
|
|
553
|
+
}
|
|
554
|
+
} : {},
|
|
555
|
+
accessibility: {
|
|
556
|
+
description: options.accessibility?.description,
|
|
557
|
+
...pointDescriptionFormatter ? {
|
|
558
|
+
point: {
|
|
559
|
+
descriptionFormatter: (point) => {
|
|
560
|
+
const bubblePoint = point;
|
|
561
|
+
return pointDescriptionFormatter({
|
|
562
|
+
name: point.name,
|
|
563
|
+
value: bubblePoint.value ?? point.y
|
|
564
|
+
});
|
|
565
|
+
}
|
|
566
|
+
}
|
|
567
|
+
} : {}
|
|
568
|
+
},
|
|
569
|
+
...svgContainerLabel ? { lang: { accessibility: { svgContainerLabel } } } : {},
|
|
527
570
|
// useHTML is load-bearing: the tooltip portal's target div only mounts
|
|
528
571
|
// when the label renders as HTML, not SVG (see `charts/README.md`).
|
|
529
572
|
tooltip: { ...options.tooltip, useHTML: true },
|
|
@@ -533,9 +576,8 @@ function ChartRenderer({
|
|
|
533
576
|
fallbackToExportServer: false,
|
|
534
577
|
buttons: { contextButton: { enabled: false } }
|
|
535
578
|
}
|
|
536
|
-
}
|
|
537
|
-
|
|
538
|
-
);
|
|
579
|
+
};
|
|
580
|
+
}, [options]);
|
|
539
581
|
if (series.length === 0) return null;
|
|
540
582
|
const chartWithAnnotations = chart;
|
|
541
583
|
const hasRenderedAnnotations = !!chartWithAnnotations?.annotations?.length && !!annotationLookup?.size && plotHeight > 0;
|
|
@@ -564,8 +606,21 @@ function ChartRenderer({
|
|
|
564
606
|
chart,
|
|
565
607
|
renderContent: (context) => {
|
|
566
608
|
const ctx = context;
|
|
567
|
-
const
|
|
568
|
-
const
|
|
609
|
+
const isPackedBubble = !ctx.points && ctx.series?.type === "packedbubble";
|
|
610
|
+
const isPie = !ctx.points && !isPackedBubble;
|
|
611
|
+
const data = isPackedBubble ? (
|
|
612
|
+
// Mirrors v1's `transformBubbleChartTooltipData`: color comes from
|
|
613
|
+
// the outer category's colorIndex, not a per-point `.color`.
|
|
614
|
+
[
|
|
615
|
+
{
|
|
616
|
+
color: (ctx.colorIndex !== void 0 ? colors[ctx.colorIndex] : void 0) ?? "",
|
|
617
|
+
name: ctx.key ?? ctx.point.name,
|
|
618
|
+
value: ctx.point.y,
|
|
619
|
+
seriesIndex: ctx.series?.index,
|
|
620
|
+
pointIndex: ctx.point.index
|
|
621
|
+
}
|
|
622
|
+
]
|
|
623
|
+
) : isPie ? [
|
|
569
624
|
{
|
|
570
625
|
color: ctx.point.color,
|
|
571
626
|
name: ctx.point.name,
|
|
@@ -588,7 +643,7 @@ function ChartRenderer({
|
|
|
588
643
|
value: row.value
|
|
589
644
|
}))
|
|
590
645
|
);
|
|
591
|
-
const position = isPie ? ctx.key ?? ctx.point.name : context.x;
|
|
646
|
+
const position = isPie || isPackedBubble ? ctx.key ?? ctx.point.name : context.x;
|
|
592
647
|
const resolved = annotationLookup?.get(context.point.x);
|
|
593
648
|
const annotation = resolved ? {
|
|
594
649
|
icon: resolved.icon,
|
|
@@ -599,8 +654,8 @@ function ChartRenderer({
|
|
|
599
654
|
return renderTooltip({
|
|
600
655
|
data,
|
|
601
656
|
position,
|
|
602
|
-
// Pie
|
|
603
|
-
hideTitle: isPie,
|
|
657
|
+
// Pie/packedbubble have no x-axis position; a title would just repeat the point name.
|
|
658
|
+
hideTitle: isPie || isPackedBubble,
|
|
604
659
|
annotation,
|
|
605
660
|
hasOnClick,
|
|
606
661
|
tooltipClickLabel,
|
|
@@ -628,6 +683,8 @@ function ChartRenderer({
|
|
|
628
683
|
function buildBaseChartOptions({
|
|
629
684
|
type,
|
|
630
685
|
description,
|
|
686
|
+
svgContainerLabel,
|
|
687
|
+
point,
|
|
631
688
|
valueSuffix,
|
|
632
689
|
reserveTopMargin = false,
|
|
633
690
|
timezone
|
|
@@ -639,7 +696,7 @@ function buildBaseChartOptions({
|
|
|
639
696
|
animation: false,
|
|
640
697
|
...reserveTopMargin ? { marginTop: 24 } : {}
|
|
641
698
|
},
|
|
642
|
-
accessibility: { description },
|
|
699
|
+
accessibility: { description, svgContainerLabel, point },
|
|
643
700
|
title: { text: "" },
|
|
644
701
|
credits: { enabled: false },
|
|
645
702
|
legend: { enabled: false },
|
|
@@ -664,4 +721,4 @@ export {
|
|
|
664
721
|
ChartRenderer,
|
|
665
722
|
buildBaseChartOptions
|
|
666
723
|
};
|
|
667
|
-
//# sourceMappingURL=chunk-
|
|
724
|
+
//# sourceMappingURL=chunk-JGM4M7QV.js.map
|