@sproutsocial/seeds-react-data-viz 0.4.0 → 0.4.1

package/dist/esm/index.js

@@ -1473,6 +1473,19 @@ var donutChartStyles = css2`
   .highcharts-point-hover {
     fill-opacity: none;
   }
+
+  // apply cursor pointer when click functionality is turned on
+  ${({ $hasOnClick }) => $hasOnClick && `
+ 			.highcharts-series,
+ 			.highcharts-point {
+ 				cursor: pointer;
+ 			}
+ 			.highcharts-plot-background,
+ 			.highcharts-crosshair,
+ 			.highcharts-grid-line {
+ 				fill: transparent;
+ 				cursor: pointer;
+ 		}`}
 `;
 
 // src/components/AreaChart/AreaChart.tsx
@@ -1615,6 +1628,7 @@ var DonutChartLegend = memo15(
 import { memo as memo16 } from "react";
 import { Box as Box10 } from "@sproutsocial/seeds-react-box";
 import { Duration as Duration2 } from "@sproutsocial/seeds-react-duration";
+import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
 import { Numeral as Numeral2 } from "@sproutsocial/seeds-react-numeral";
 import { Text as Text5 } from "@sproutsocial/seeds-react-text";
 import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -1628,7 +1642,9 @@ var DonutChartTooltip = memo16(
     value,
     currency,
     icon,
-    numberFormat
+    numberFormat,
+    onClick,
+    tooltipClickLabel
   }) {
     const rows = [
       {
@@ -1663,7 +1679,13 @@ var DonutChartTooltip = memo16(
         ]
       }
     ];
-    return /* @__PURE__ */ jsx17(ChartTooltip, { children: /* @__PURE__ */ jsx17(ChartTooltipTable, { rows }) });
+    return /* @__PURE__ */ jsxs5(ChartTooltip, { children: [
+      /* @__PURE__ */ jsx17(ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx17(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs5(Box10, { display: "flex", alignItems: "center", gap: 300, children: [
+        /* @__PURE__ */ jsx17(Icon2, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
+        /* @__PURE__ */ jsx17(Text5, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+      ] }) : tooltipClickLabel }) : null
+    ] });
   }
 );
 
@@ -1704,7 +1726,9 @@ var DonutChartWithData = memo17(
     disableTooltips = false,
     hideLegend = false,
     numberFormat = "decimal",
-    tooltip
+    tooltip,
+    onClick,
+    tooltipClickLabel
   }) {
     const [options, setOptions] = useState4(donutChartOptions);
     const [chart, setChart] = useState4(null);
@@ -1745,7 +1769,12 @@ var DonutChartWithData = memo17(
               return {
                 name: item.name,
                 y: item.value,
-                colorIndex: index
+                colorIndex: index,
+                events: onClick ? {
+                  click: function() {
+                    onClick({ x: item.name });
+                  }
+                } : void 0
               };
             })
           }
@@ -1760,40 +1789,50 @@ var DonutChartWithData = memo17(
     );
     return /* @__PURE__ */ jsxs6(Fragment3, { children: [
       /* @__PURE__ */ jsx18(GlobalChartStyleOverrides, {}),
-      /* @__PURE__ */ jsxs6(StyledBox4, { $colors: colors, bg: "container.background.base", children: [
-        /* @__PURE__ */ jsx18(
-          HighchartsReact2,
-          {
-            highcharts: Highcharts2,
-            options,
-            callback
-          }
-        ),
-        chart && !disableTooltips ? /* @__PURE__ */ jsx18(
-          ChartTooltipPortal,
-          {
-            chart,
-            renderContent: (context) => {
-              const { color, icon, name, percent, value } = transformDonutChartTooltipData({ context, data });
-              return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ jsx18(
-                DonutChartTooltip,
-                {
-                  color,
-                  currency,
-                  icon,
-                  name,
-                  numberFormat,
-                  numberLocale,
-                  percent,
-                  textLocale,
-                  value
+      /* @__PURE__ */ jsxs6(
+        StyledBox4,
+        {
+          $colors: colors,
+          $hasOnClick: Boolean(onClick),
+          bg: "container.background.base",
+          children: [
+            /* @__PURE__ */ jsx18(
+              HighchartsReact2,
+              {
+                highcharts: Highcharts2,
+                options,
+                callback
+              }
+            ),
+            chart && !disableTooltips ? /* @__PURE__ */ jsx18(
+              ChartTooltipPortal,
+              {
+                chart,
+                renderContent: (context) => {
+                  const { color, icon, name, percent, value } = transformDonutChartTooltipData({ context, data });
+                  return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ jsx18(
+                    DonutChartTooltip,
+                    {
+                      color,
+                      currency,
+                      icon,
+                      name,
+                      numberFormat,
+                      numberLocale,
+                      percent,
+                      textLocale,
+                      value,
+                      onClick,
+                      tooltipClickLabel
+                    }
+                  );
                 }
-              );
-            }
-          }
-        ) : null,
-        hideLegend ? null : /* @__PURE__ */ jsx18(Box11, { mt: 350, children: /* @__PURE__ */ jsx18(DonutChartLegend, { data }) })
-      ] })
+              }
+            ) : null,
+            hideLegend ? null : /* @__PURE__ */ jsx18(Box11, { mt: 350, children: /* @__PURE__ */ jsx18(DonutChartLegend, { data }) })
+          ]
+        }
+      )
     ] });
   }
 );
@@ -1918,7 +1957,7 @@ var LineChartLegend = memo19(
 import { memo as memo20 } from "react";
 import { Box as Box13 } from "@sproutsocial/seeds-react-box";
 import { Duration as Duration4 } from "@sproutsocial/seeds-react-duration";
-import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
+import { Icon as Icon3 } from "@sproutsocial/seeds-react-icon";
 import { Numeral as Numeral4 } from "@sproutsocial/seeds-react-numeral";
 import { Text as Text7 } from "@sproutsocial/seeds-react-text";
 import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -1964,7 +2003,7 @@ var LineChartTooltip = memo20(
       /* @__PURE__ */ jsx21(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
       /* @__PURE__ */ jsx21(ChartTooltipTable, { rows }),
       onClick && tooltipClickLabel ? /* @__PURE__ */ jsx21(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs8(Box13, { display: "flex", alignItems: "center", gap: 300, children: [
-        /* @__PURE__ */ jsx21(Icon2, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
+        /* @__PURE__ */ jsx21(Icon3, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
         /* @__PURE__ */ jsx21(Text7, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
       ] }) : tooltipClickLabel }) : null
     ] });