@sproutsocial/seeds-react-data-viz 0.25.1 → 0.26.1

package/dist/{chunk-TNZNBMSZ.js → chunk-NU2RCATK.js}

@@ -132,28 +132,55 @@ function resolvePointOpacity({
   const t = normalizeWeight(weight, min, max);
   return rangeMin + t * (rangeMax - rangeMin);
 }
-function transformWordCloudDataToPoints(data, groups, opacityRange, maxWordCount = WORD_CLOUD_MAXIMUM_WORD_COUNT) {
-  const capped = [...data].sort((a, b) => b.weight - a.weight).slice(0, maxWordCount);
+function allocateWordsAcrossGroups(data, maxWordCount) {
+  const buckets = /* @__PURE__ */ new Map();
+  for (const point of data) {
+    const bucket = buckets.get(point.groupId);
+    if (bucket) bucket.push(point);
+    else buckets.set(point.groupId, [point]);
+  }
+  for (const bucket of buckets.values()) {
+    bucket.sort((a, b) => b.weight - a.weight);
+  }
+  const bucketArrays = [...buckets.values()];
+  const result = [];
+  for (let round = 0; result.length < maxWordCount; round++) {
+    let addedThisRound = false;
+    for (const bucket of bucketArrays) {
+      if (result.length >= maxWordCount) break;
+      if (round < bucket.length) {
+        result.push(bucket[round]);
+        addedThisRound = true;
+      }
+    }
+    if (!addedThisRound) break;
+  }
+  return result.sort((a, b) => b.weight - a.weight);
+}
+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));
   const min = Math.min(...compressedWeights);
   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,
         isEmojiOnly: isEmojiOnlyTerm(point.name),
         opacityRange
       }),
-      className: `seeds-wordcloud-word--group-${colorIndex}`,
+      className: `seeds-wordcloud-word--group-${colorIndex} seeds-wordcloud-word--index-${i}`,
       custom: { groupId: point.groupId, rawWeight: point.weight }
     };
   });
@@ -172,13 +199,17 @@ function transformWordCloudClickData(event) {
   }
   return { ...base, pageX: _nullishCoalesce(event.pageX, () => ( 0)), pageY: _nullishCoalesce(event.pageY, () => ( 0)) };
 }
-function buildWordCloudOptions(props, containerWidth) {
+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",
@@ -215,22 +246,28 @@ function buildWordCloudOptions(props, containerWidth) {
         // Hover dim (layer 3). Off by default for column-derived series
         // (wordcloud's base class) — pie is the only series type that
         // defaults this to `true`. Without it, Highcharts never adds
-        // `.highcharts-point-inactive` to the other words on hover.
-        inactiveOtherPoints: true,
-        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))))),
+        // `.highcharts-point-inactive` to the other words on hover. Turned
+        // off entirely once the consumer has opted into `activeNames`-driven
+        // emphasis — otherwise Highcharts' own hover pass fights the
+        // consumer's `data-active-word-indices` dimming (wordcloud.css).
+        inactiveOtherPoints: !hasActiveNames,
+        // 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",
         // `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
@@ -246,6 +283,17 @@ function buildWordCloudOptions(props, containerWidth) {
               _optionalChain([event, 'access', _7 => _7.stopPropagation, 'optionalCall', _8 => _8()]);
               if (event.type !== "click" && !event.target) return;
               props.onClick(transformWordCloudClickData(event));
+            } : void 0,
+            mouseOver: props.onWordHover ? (event) => {
+              const point = event.target;
+              if (!point) return;
+              props.onWordHover({
+                name: point.name,
+                groupId: _optionalChain([point, 'access', _9 => _9.custom, 'optionalAccess', _10 => _10.groupId])
+              });
+            } : void 0,
+            mouseOut: props.onWordHover ? () => {
+              props.onWordHover(null);
             } : void 0
           }
         }
@@ -329,7 +377,7 @@ var ChartAnnotationMarkerPortal = _react.memo.call(void 0,
         (annotation) => annotation.setAttribute(MARKER_ATTR, "false")
       );
       annotationContext.labels.forEach((label) => {
-        const labelElement = _optionalChain([label, 'access', _9 => _9.graphic, 'optionalAccess', _10 => _10.div]);
+        const labelElement = _optionalChain([label, 'access', _11 => _11.graphic, 'optionalAccess', _12 => _12.div]);
         if (!labelElement) return;
         let annotationDiv = labelElement.querySelector(
           `div[${MARKER_ATTR}]`
@@ -339,7 +387,7 @@ var ChartAnnotationMarkerPortal = _react.memo.call(void 0,
           labelElement.appendChild(annotationDiv);
         }
         annotationDiv.setAttribute(MARKER_ATTR, "true");
-        const xValue = _optionalChain([label, 'access', _11 => _11.options, 'optionalAccess', _12 => _12.point, 'optionalAccess', _13 => _13.x]);
+        const xValue = _optionalChain([label, 'access', _13 => _13.options, 'optionalAccess', _14 => _14.point, 'optionalAccess', _15 => _15.x]);
         newContainers[xValue] = annotationDiv;
       });
       annotationContainers.current = newContainers;
@@ -406,9 +454,9 @@ var getDatePartsInTimezone = (date, timezone) => {
   });
   const parts = formatter.formatToParts(date);
   return {
-    day: parseInt(_nullishCoalesce(_optionalChain([parts, 'access', _14 => _14.find, 'call', _15 => _15((p) => p.type === "day"), 'optionalAccess', _16 => _16.value]), () => ( "0")), 10),
-    month: parseInt(_nullishCoalesce(_optionalChain([parts, 'access', _17 => _17.find, 'call', _18 => _18((p) => p.type === "month"), 'optionalAccess', _19 => _19.value]), () => ( "0")), 10),
-    year: parseInt(_nullishCoalesce(_optionalChain([parts, 'access', _20 => _20.find, 'call', _21 => _21((p) => p.type === "year"), 'optionalAccess', _22 => _22.value]), () => ( "0")), 10)
+    day: parseInt(_nullishCoalesce(_optionalChain([parts, 'access', _16 => _16.find, 'call', _17 => _17((p) => p.type === "day"), 'optionalAccess', _18 => _18.value]), () => ( "0")), 10),
+    month: parseInt(_nullishCoalesce(_optionalChain([parts, 'access', _19 => _19.find, 'call', _20 => _20((p) => p.type === "month"), 'optionalAccess', _21 => _21.value]), () => ( "0")), 10),
+    year: parseInt(_nullishCoalesce(_optionalChain([parts, 'access', _22 => _22.find, 'call', _23 => _23((p) => p.type === "year"), 'optionalAccess', _24 => _24.value]), () => ( "0")), 10)
   };
 };
 var deriveGranularity = (tickPositions) => {
@@ -467,20 +515,20 @@ function datetimeFormatter({
   switch (granularity) {
     case "hour":
       firstPartOptions = timeFormat === "24" ? { hour: "numeric", minute: "numeric", hour12: false } : { hour: "numeric" };
-      if (isFirst || valueParts.day !== _optionalChain([previousValueParts, 'optionalAccess', _23 => _23.day])) {
+      if (isFirst || valueParts.day !== _optionalChain([previousValueParts, 'optionalAccess', _25 => _25.day])) {
         secondPartOptions = { day: "numeric", month: "short" };
       }
       break;
     case "day":
     case "week":
       firstPartOptions = { day: "numeric" };
-      if (isFirst || valueParts.month !== _optionalChain([previousValueParts, 'optionalAccess', _24 => _24.month])) {
+      if (isFirst || valueParts.month !== _optionalChain([previousValueParts, 'optionalAccess', _26 => _26.month])) {
         secondPartOptions = { month: "short" };
       }
       break;
     case "month":
       firstPartOptions = { month: "short" };
-      if (isFirst || valueParts.year !== _optionalChain([previousValueParts, 'optionalAccess', _25 => _25.year])) {
+      if (isFirst || valueParts.year !== _optionalChain([previousValueParts, 'optionalAccess', _27 => _27.year])) {
         secondPartOptions = { year: "numeric" };
       }
       break;
@@ -813,7 +861,7 @@ function buildExportChartOptions({
   colors,
   exportTitle: rawTitle
 }) {
-  const exportTitle = _optionalChain([rawTitle, 'optionalAccess', _26 => _26.trim, 'call', _27 => _27()]);
+  const exportTitle = _optionalChain([rawTitle, 'optionalAccess', _28 => _28.trim, 'call', _29 => _29()]);
   const axisOptions = {
     lineColor: theme.colors.container.border.base,
     gridLineColor: theme.colors.container.border.base,
@@ -885,7 +933,7 @@ function buildExportChartOptions({
   };
 }
 function createChartExportHandle(chart, getExportChartOptions) {
-  const resolveName = (filename) => _nullishCoalesce(filename, () => ( defaultFilename(_optionalChain([chart, 'access', _28 => _28.options, 'access', _29 => _29.chart, 'optionalAccess', _30 => _30.type]), /* @__PURE__ */ new Date())));
+  const resolveName = (filename) => _nullishCoalesce(filename, () => ( defaultFilename(_optionalChain([chart, 'access', _30 => _30.options, 'access', _31 => _31.chart, 'optionalAccess', _32 => _32.type]), /* @__PURE__ */ new Date())));
   const exportImage = async (type, filename) => {
     chart.exportChartLocal(
       { type, filename: resolveName(filename) },
@@ -935,7 +983,7 @@ function ChartRenderer({
   const exportThemeRef = _react.useRef.call(void 0, { theme, colors, exportTitle });
   exportThemeRef.current = { theme, colors, exportTitle };
   const captureChart = _react.useCallback.call(void 0, (chartInstance) => {
-    const forExport = _optionalChain([chartInstance, 'access', _31 => _31.options, 'access', _32 => _32.chart, 'optionalAccess', _33 => _33.forExport]);
+    const forExport = _optionalChain([chartInstance, 'access', _33 => _33.options, 'access', _34 => _34.chart, 'optionalAccess', _35 => _35.forExport]);
     if (!forExport) {
       setChart(chartInstance);
       setPlotHeight(chartInstance.plotHeight);
@@ -945,7 +993,7 @@ function ChartRenderer({
   onReadyRef.current = onReady;
   _react.useEffect.call(void 0, () => {
     if (!chart) return;
-    _optionalChain([onReadyRef, 'access', _34 => _34.current, 'optionalCall', _35 => _35(
+    _optionalChain([onReadyRef, 'access', _36 => _36.current, 'optionalCall', _37 => _37(
       createChartExportHandle(
         chart,
         () => buildExportChartOptions(exportThemeRef.current)
@@ -961,18 +1009,18 @@ function ChartRenderer({
     return () => unbind();
   }, [chart]);
   const highchartsOptions = _react.useMemo.call(void 0, () => {
-    const pointDescriptionFormatter = _optionalChain([options, 'access', _36 => _36.accessibility, 'optionalAccess', _37 => _37.point, 'optionalAccess', _38 => _38.descriptionFormatter]);
-    const svgContainerLabel = _optionalChain([options, 'access', _39 => _39.accessibility, 'optionalAccess', _40 => _40.svgContainerLabel]);
-    const packedBubbleDataLabelFormatter = _optionalChain([options, 'access', _41 => _41.plotOptions, 'optionalAccess', _42 => _42.packedbubble, 'optionalAccess', _43 => _43.dataLabels, 'optionalAccess', _44 => _44.formatter]);
+    const pointDescriptionFormatter = _optionalChain([options, 'access', _38 => _38.accessibility, 'optionalAccess', _39 => _39.point, 'optionalAccess', _40 => _40.descriptionFormatter]);
+    const svgContainerLabel = _optionalChain([options, 'access', _41 => _41.accessibility, 'optionalAccess', _42 => _42.svgContainerLabel]);
+    const packedBubbleDataLabelFormatter = _optionalChain([options, 'access', _43 => _43.plotOptions, 'optionalAccess', _44 => _44.packedbubble, 'optionalAccess', _45 => _45.dataLabels, 'optionalAccess', _46 => _46.formatter]);
     return {
       ...options,
       ...packedBubbleDataLabelFormatter ? {
         plotOptions: {
           ...options.plotOptions,
           packedbubble: {
-            ..._optionalChain([options, 'access', _45 => _45.plotOptions, 'optionalAccess', _46 => _46.packedbubble]),
+            ..._optionalChain([options, 'access', _47 => _47.plotOptions, 'optionalAccess', _48 => _48.packedbubble]),
             dataLabels: {
-              ..._optionalChain([options, 'access', _47 => _47.plotOptions, 'optionalAccess', _48 => _48.packedbubble, 'optionalAccess', _49 => _49.dataLabels]),
+              ..._optionalChain([options, 'access', _49 => _49.plotOptions, 'optionalAccess', _50 => _50.packedbubble, 'optionalAccess', _51 => _51.dataLabels]),
               formatter() {
                 const bubblePoint = this.point;
                 return packedBubbleDataLabelFormatter.call({
@@ -982,7 +1030,7 @@ function ChartRenderer({
                     index: bubblePoint.index,
                     series: { index: bubblePoint.series.index }
                   },
-                  radius: _nullishCoalesce(_optionalChain([bubblePoint, 'access', _50 => _50.marker, 'optionalAccess', _51 => _51.radius]), () => ( 0))
+                  radius: _nullishCoalesce(_optionalChain([bubblePoint, 'access', _52 => _52.marker, 'optionalAccess', _53 => _53.radius]), () => ( 0))
                 });
               }
             }
@@ -990,7 +1038,7 @@ function ChartRenderer({
         }
       } : {},
       accessibility: {
-        description: _optionalChain([options, 'access', _52 => _52.accessibility, 'optionalAccess', _53 => _53.description]),
+        description: _optionalChain([options, 'access', _54 => _54.accessibility, 'optionalAccess', _55 => _55.description]),
         ...pointDescriptionFormatter ? {
           point: {
             descriptionFormatter: (point) => {
@@ -1017,7 +1065,7 @@ function ChartRenderer({
   }, [options]);
   if (series.length === 0) return null;
   const chartWithAnnotations = chart;
-  const hasRenderedAnnotations = !!_optionalChain([chartWithAnnotations, 'optionalAccess', _54 => _54.annotations, 'optionalAccess', _55 => _55.length]) && !!_optionalChain([annotationLookup, 'optionalAccess', _56 => _56.size]) && plotHeight > 0;
+  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, 
@@ -1043,7 +1091,7 @@ function ChartRenderer({
         chart,
         renderContent: (context) => {
           const ctx = context;
-          const isPackedBubble = !ctx.points && _optionalChain([ctx, 'access', _57 => _57.series, 'optionalAccess', _58 => _58.type]) === "packedbubble";
+          const isPackedBubble = !ctx.points && _optionalChain([ctx, 'access', _59 => _59.series, 'optionalAccess', _60 => _60.type]) === "packedbubble";
           const isPie = !ctx.points && !isPackedBubble;
           const data = isPackedBubble ? (
             // Mirrors v1's `transformBubbleChartTooltipData`: color comes from
@@ -1053,7 +1101,7 @@ function ChartRenderer({
                 color: _nullishCoalesce((ctx.colorIndex !== void 0 ? colors[ctx.colorIndex] : void 0), () => ( "")),
                 name: _nullishCoalesce(ctx.key, () => ( ctx.point.name)),
                 value: ctx.point.y,
-                seriesIndex: _optionalChain([ctx, 'access', _59 => _59.series, 'optionalAccess', _60 => _60.index]),
+                seriesIndex: _optionalChain([ctx, 'access', _61 => _61.series, 'optionalAccess', _62 => _62.index]),
                 pointIndex: ctx.point.index
               }
             ]
@@ -1064,7 +1112,7 @@ function ChartRenderer({
               value: ctx.point.y,
               percent: ctx.point.percentage,
               // Icon indexed by the hovered slice — same source the legend reads.
-              icon: _optionalChain([series, 'access', _61 => _61[ctx.point.index], 'optionalAccess', _62 => _62.icon])
+              icon: _optionalChain([series, 'access', _63 => _63[ctx.point.index], 'optionalAccess', _64 => _64.icon])
             }
           ] : (
             // Drop v1's `readonly` wrapper (v2 is mutable); icon is forwarded
@@ -1080,12 +1128,12 @@ function ChartRenderer({
               color: row.color,
               name: row.name,
               value: row.value,
-              icon: _optionalChain([series, 'access', _63 => _63[i], 'optionalAccess', _64 => _64.icon])
+              icon: _optionalChain([series, 'access', _65 => _65[i], 'optionalAccess', _66 => _66.icon])
             }))
           );
           const position = isPie || isPackedBubble ? _nullishCoalesce(ctx.key, () => ( ctx.point.name)) : context.x;
-          const tickPositions = _optionalChain([ctx, 'access', _65 => _65.points, 'optionalAccess', _66 => _66[0], 'optionalAccess', _67 => _67.series, 'optionalAccess', _68 => _68.xAxis, 'optionalAccess', _69 => _69.tickPositions]);
-          const resolved = _optionalChain([annotationLookup, 'optionalAccess', _70 => _70.get, 'call', _71 => _71(context.point.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 annotation = resolved ? {
             icon: resolved.icon,
             color: resolved.color,
@@ -1132,4 +1180,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-TNZNBMSZ.js.map
+//# sourceMappingURL=chunk-NU2RCATK.js.map