@sproutsocial/seeds-react-data-viz 0.26.0 → 0.27.0

package/dist/{chunk-POMPBGZR.js → chunk-5TWNMPQU.js}

@@ -10,7 +10,7 @@
 
 
 
-var _chunkLWDHU4QKjs = require('./chunk-LWDHU4QK.js');
+var _chunk34OKRQETjs = require('./chunk-34OKRQET.js');
 
 // src/charts/shared/baseChartOptions.ts
 function buildBaseChartOptions({
@@ -157,7 +157,7 @@ function allocateWordsAcrossGroups(data, maxWordCount) {
   }
   return result.sort((a, b) => b.weight - a.weight);
 }
-function transformWordCloudDataToPoints(data, groups, opacityRange, maxWordCount = WORD_CLOUD_MAXIMUM_WORD_COUNT) {
+function transformWordCloudDataToPoints(data, groups, opacityRange, maxWordCount = WORD_CLOUD_MAXIMUM_WORD_COUNT, minFontSize = WORD_CLOUD_MIN_FONT_SIZE, maxFontSize = WORD_CLOUD_MAXIMUM_MAX_FONT_SIZE) {
   const hasGroups = Boolean(groups && groups.length > 0);
   const capped = hasGroups ? allocateWordsAcrossGroups(data, maxWordCount) : [...data].sort((a, b) => b.weight - a.weight).slice(0, maxWordCount);
   const compressedWeights = capped.map((point) => compressWeight(point.weight));
@@ -165,13 +165,15 @@ function transformWordCloudDataToPoints(data, groups, opacityRange, maxWordCount
   const max = Math.max(...compressedWeights);
   return capped.map((point, i) => {
     const colorIndex = resolveGroupColorIndex(point.groupId, groups);
-    const weight = compressedWeights[i];
+    const compressed = compressedWeights[i];
+    const t = normalizeWeight(compressed, min, max);
+    const weight = minFontSize + t * (maxFontSize - minFontSize);
     return {
       name: point.name,
       weight,
       colorIndex,
       opacity: resolvePointOpacity({
-        weight,
+        weight: compressed,
         min,
         max,
         hasGroups,
@@ -199,11 +201,15 @@ function transformWordCloudClickData(event) {
 }
 function buildWordCloudOptions(props, containerWidth, hasActiveNames = false) {
   const opacityRange = _nullishCoalesce(props.opacityRange, () => ( DEFAULT_OPACITY_RANGE));
+  const minFontSize = _nullishCoalesce(props.minFontSize, () => ( WORD_CLOUD_MIN_FONT_SIZE));
+  const maxFontSize = _nullishCoalesce(props.maxFontSize, () => ( deriveMaxFontSize(_nullishCoalesce(containerWidth, () => ( 0)))));
   const points = transformWordCloudDataToPoints(
     props.data,
     props.groups,
     opacityRange,
-    deriveMaxWordCount(_nullishCoalesce(containerWidth, () => ( 0)))
+    deriveMaxWordCount(_nullishCoalesce(containerWidth, () => ( 0))),
+    minFontSize,
+    maxFontSize
   );
   const base = buildBaseChartOptions({
     type: "wordcloud",
@@ -214,7 +220,7 @@ function buildWordCloudOptions(props, containerWidth, hasActiveNames = false) {
     chart: {
       ...base.chart,
       type: "wordcloud",
-      height: _nullishCoalesce(props.height, () => ( _chunkLWDHU4QKjs.WORD_CLOUD_CHART_HEIGHT))
+      height: _nullishCoalesce(props.height, () => ( _chunk34OKRQETjs.WORD_CLOUD_CHART_HEIGHT))
     },
     // `ChartRenderer`'s default-tooltip routing only recognizes "pie" and
     // "packedbubble" as single-point (non-cartesian) series types
@@ -245,20 +251,26 @@ function buildWordCloudOptions(props, containerWidth, hasActiveNames = false) {
         // emphasis — otherwise Highcharts' own hover pass fights the
         // consumer's `data-active-word-indices` dimming (wordcloud.css).
         inactiveOtherPoints: !hasActiveNames,
-        minFontSize: _nullishCoalesce(props.minFontSize, () => ( WORD_CLOUD_MIN_FONT_SIZE)),
-        // An explicit prop wins; otherwise derived from the measured
-        // container width (`WordCloud.tsx`'s `useMeasure` call). Must stay a
-        // number — see `WORD_CLOUD_MAXIMUM_MAX_FONT_SIZE`'s doc comment for
-        // why `undefined` breaks sizing.
-        maxFontSize: _nullishCoalesce(props.maxFontSize, () => ( deriveMaxFontSize(_nullishCoalesce(containerWidth, () => ( 0))))),
+        // Resolved above and shared with the transform's font-size mapping.
+        // Must stay a number — see `WORD_CLOUD_MAXIMUM_MAX_FONT_SIZE`'s doc
+        // comment for why `undefined` breaks sizing.
+        minFontSize,
+        maxFontSize,
         // Pinned horizontal — Highcharts' default tilts words vertical
         // (`{from: 0, to: 90}`).
         rotation: { from: 0, to: 0, orientations: 1 },
-        // `seedsAspectArchimedean` (a pure function above, registered onto
-        // Highcharts in chartBase.tsx) — Highcharts' own `archimedean` traces
-        // a true circle with no aspect term, so it can't grow into a wide
-        // container.
-        spiral: "seedsAspectArchimedean",
+        // Highcharts' built-in rectangular spiral. It factors the field's
+        // aspect ratio in natively (it's built on squareSpiral over the field
+        // dimensions), so it fills a wide container and packs denser than the
+        // circular `archimedean`. Chosen over the custom `seedsAspectArchimedean`
+        // after a visual comparison once the font-size hierarchy fix made word
+        // sizes vary enough for the circular spiral's gaps to show. The custom
+        // spiral stays registered in chartBase.tsx for now; drop it if
+        // rectangular holds up in-app.
+        spiral: "rectangular",
+        // Highcharts' wordcloud module defaults `style.fontWeight` to `"900"`
+        // (heavy bold) — overridden to normal weight.
+        style: { fontWeight: "normal" },
         // `seedsWordPadding` (a pure function above, registered onto
         // Highcharts in chartBase.tsx) approximates word spacing, which
         // Highcharts' wordcloud module has no native option for; it reads
@@ -664,11 +676,11 @@ function AnnotationHeader({
   const hasIconOrTitle = Boolean(icon || title);
   if (!hasIconOrTitle && !description) return null;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    hasIconOrTitle ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLWDHU4QKjs.ChartTooltipHeader, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
+    hasIconOrTitle ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk34OKRQETjs.ChartTooltipHeader, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
       icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacticon.Icon, { name: icon, size: "mini", color: "icon.base" }) : null,
       title ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.body", fontSize: 200, children: title }) : null
     ] }) }) : null,
-    description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLWDHU4QKjs.ChartTooltipHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { fontSize: 200, color: "text.subtext", children: description }) }) : null
+    description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk34OKRQETjs.ChartTooltipHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { fontSize: 200, color: "text.subtext", children: description }) }) : null
   ] });
 }
 function DefaultChartTooltip({
@@ -686,18 +698,42 @@ function DefaultChartTooltip({
   hideTitle,
   hideTotal = false
 }) {
+  const usePercentColumn = data.filter((d) => d.percent != null && !isNaN(d.percent)).length > 1;
   const rows = data.map((d) => {
     const formattedValue = d.value == null ? _nullishCoalesce(invalidNumberLabel, () => ( "\u2014")) : valueFormatter({ ...valueFormat, value: d.value, abbreviate: false });
     const nameCell = {
-      content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLWDHU4QKjs.ChartLegendLabel, { color: d.color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChartLabelWithIcon, { icon: d.icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${d.name}: `, children: d.name }) }) })
+      content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk34OKRQETjs.ChartLegendLabel, { color: d.color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChartLabelWithIcon, { icon: d.icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${d.name}: `, children: d.name }) }) })
     };
+    const percent = d.percent;
+    if (usePercentColumn) {
+      return {
+        cells: [
+          nameCell,
+          {
+            content: percent != null && !isNaN(percent) ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreacttext.Text, { children: [
+              Math.round(percent),
+              "%"
+            ] }) : null,
+            align: "right",
+            pr: 350,
+            style: { width: "1%", whiteSpace: "nowrap" }
+          },
+          {
+            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { children: formattedValue }),
+            align: "right",
+            pl: 0,
+            style: { width: "1%", whiteSpace: "nowrap" }
+          }
+        ]
+      };
+    }
     return {
       cells: [
         nameCell,
         {
-          content: d.percent != null && !isNaN(d.percent) ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "inline-flex", alignItems: "center", gap: 350, children: [
+          content: percent != null && !isNaN(percent) ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "inline-flex", alignItems: "center", gap: 350, children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreacttext.Text, { children: [
-              Math.round(d.percent),
+              Math.round(percent),
               "%"
             ] }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { fontWeight: "semibold", children: formattedValue })
@@ -714,6 +750,10 @@ function DefaultChartTooltip({
       isAppendedRow: true,
       cells: [
         {
+          // In column mode the Total has no percent, so span the label
+          // across the name + percent columns; the value then lands in
+          // the value column (col 3) without an empty <td>.
+          colSpan: usePercentColumn ? 2 : 1,
           content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { fontWeight: "semibold", "aria-label": "Total: ", children: "Total" })
         },
         {
@@ -723,12 +763,25 @@ function DefaultChartTooltip({
             value: total,
             abbreviate: false
           }) }),
-          align: "right"
+          align: "right",
+          // Only collapse to content width in percent-column mode, matching
+          // the per-series value cells above (which are gated the same way).
+          // In non-percent multi-series mode the Total stays a plain
+          // right-aligned cell so regular stacking is untouched (ticket
+          // scope) and the Total matches the series value cells stacked
+          // above it.
+          ...usePercentColumn ? {
+            pl: 0,
+            style: {
+              width: "1%",
+              whiteSpace: "nowrap"
+            }
+          } : {}
         }
       ]
     }
   ] : [];
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLWDHU4QKjs.ChartTooltip, { children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk34OKRQETjs.ChartTooltip, { children: [
     annotation ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       AnnotationHeader,
       {
@@ -737,7 +790,7 @@ function DefaultChartTooltip({
         description: annotation.description
       }
     ) : null,
-    hideTitle ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLWDHU4QKjs.ChartTooltipTitle, { children: formatTitle({
+    hideTitle ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk34OKRQETjs.ChartTooltipTitle, { children: formatTitle({
       position,
       timezone,
       timeFormat,
@@ -745,12 +798,12 @@ function DefaultChartTooltip({
       textLocale
     }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkLWDHU4QKjs.ChartTooltipTable,
+      _chunk34OKRQETjs.ChartTooltipTable,
       {
         rows: [...rows, ...totalRow]
       }
     ),
-    hasOnClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLWDHU4QKjs.ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
+    hasOnClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk34OKRQETjs.ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacticon.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
     ] }) : tooltipClickLabel }) : null
@@ -768,9 +821,18 @@ var SeriesLegend = _react.memo.call(void 0, function SeriesLegend2({
     content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChartLabelWithIcon, { icon: item.icon, children: item.name }),
     color: item.color
   }));
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLWDHU4QKjs.ChartLegend, { legendLabels: labels });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk34OKRQETjs.ChartLegend, { legendLabels: labels });
 });
 
+// src/charts/shared/stacking.ts
+function isChartPercentStacked(options) {
+  const plotOptions = options.plotOptions;
+  if (!plotOptions) return false;
+  return Object.values(plotOptions).some(
+    (slot) => slot != null && typeof slot === "object" && slot.stacking === "percent"
+  );
+}
+
 // src/charts/shared/chartExport.ts
 function defaultFilename(type, now) {
   const iso = now.toISOString();
@@ -1058,7 +1120,7 @@ function ChartRenderer({
   const chartWithAnnotations = chart;
   const hasRenderedAnnotations = !!_optionalChain([chartWithAnnotations, 'optionalAccess', _56 => _56.annotations, 'optionalAccess', _57 => _57.length]) && !!_optionalChain([annotationLookup, 'optionalAccess', _58 => _58.size]) && plotHeight > 0;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLWDHU4QKjs.GlobalChartStyleOverrides, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk34OKRQETjs.GlobalChartStyleOverrides, {}),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _highchartsreactofficial.HighchartsReact,
       {
@@ -1077,7 +1139,7 @@ function ChartRenderer({
       }
     ) : null,
     chart ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkLWDHU4QKjs.ChartTooltipPortal,
+      _chunk34OKRQETjs.ChartTooltipPortal,
       {
         chart,
         renderContent: (context) => {
@@ -1108,23 +1170,33 @@ function ChartRenderer({
           ] : (
             // Drop v1's `readonly` wrapper (v2 is mutable); icon is forwarded
             // from `series[]` by index below since the helper doesn't carry it.
-            _chunkLWDHU4QKjs.transformTimeSeriesTooltipData.call(void 0, {
-              context,
-              data: series.map((s, i) => ({
-                name: s.name,
-                points: [],
-                styles: { color: _nullishCoalesce(_nullishCoalesce(s.color, () => ( colors[i])), () => ( "")) }
-              }))
-            }).map((row, i) => ({
-              color: row.color,
-              name: row.name,
-              value: row.value,
-              icon: _optionalChain([series, 'access', _65 => _65[i], 'optionalAccess', _66 => _66.icon])
-            }))
+            (() => {
+              const showPercent = isChartPercentStacked(options) && series.length > 1;
+              const pctCtx = context;
+              const pointIndex = pctCtx.point.index;
+              const chartSeries = pctCtx.series.chart.series;
+              return _chunk34OKRQETjs.transformTimeSeriesTooltipData.call(void 0, {
+                context,
+                data: series.map((s, i) => ({
+                  name: s.name,
+                  points: [],
+                  styles: { color: _nullishCoalesce(_nullishCoalesce(s.color, () => ( colors[i])), () => ( "")) }
+                }))
+              }).map((row, i) => {
+                const percentage = _optionalChain([chartSeries, 'access', _65 => _65[i], 'optionalAccess', _66 => _66.points, 'optionalAccess', _67 => _67[pointIndex], 'optionalAccess', _68 => _68.percentage]);
+                return {
+                  color: row.color,
+                  name: row.name,
+                  value: row.value,
+                  icon: _optionalChain([series, 'access', _69 => _69[i], 'optionalAccess', _70 => _70.icon]),
+                  ...showPercent && typeof percentage === "number" && !isNaN(percentage) ? { percent: percentage } : {}
+                };
+              });
+            })()
           );
           const position = isPie || isPackedBubble ? _nullishCoalesce(ctx.key, () => ( ctx.point.name)) : context.x;
-          const tickPositions = _optionalChain([ctx, 'access', _67 => _67.points, 'optionalAccess', _68 => _68[0], 'optionalAccess', _69 => _69.series, 'optionalAccess', _70 => _70.xAxis, 'optionalAccess', _71 => _71.tickPositions]);
-          const resolved = _optionalChain([annotationLookup, 'optionalAccess', _72 => _72.get, 'call', _73 => _73(context.point.x)]);
+          const tickPositions = _optionalChain([ctx, 'access', _71 => _71.points, 'optionalAccess', _72 => _72[0], 'optionalAccess', _73 => _73.series, 'optionalAccess', _74 => _74.xAxis, 'optionalAccess', _75 => _75.tickPositions]);
+          const resolved = _optionalChain([annotationLookup, 'optionalAccess', _76 => _76.get, 'call', _77 => _77(context.point.x)]);
           const annotation = resolved ? {
             icon: resolved.icon,
             color: resolved.color,
@@ -1171,4 +1243,4 @@ function ChartRenderer({
 
 
 exports.datetimeFormatter = datetimeFormatter; exports.valueFormatter = valueFormatter; exports.buildBaseChartOptions = buildBaseChartOptions; exports.deriveMaxFontSize = deriveMaxFontSize; exports.deriveMaxWordCount = deriveMaxWordCount; exports.deriveWordPadding = deriveWordPadding; exports.buildWordCloudOptions = buildWordCloudOptions; exports.useSeedsChartSetup = useSeedsChartSetup; exports.ChartRenderer = ChartRenderer;
-//# sourceMappingURL=chunk-POMPBGZR.js.map
+//# sourceMappingURL=chunk-5TWNMPQU.js.map