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

package/dist/index.d.mts

@@ -283,6 +283,10 @@ type TypeDonutChartProps = Readonly<{
     hideLegend?: boolean;
     numberFormat?: TypeChartNumberFormat;
     tooltip?: ({ color, name, percent, value, }: TypeDonutChartTooltipProps) => ReactNode;
+    onClick?: ({ x }: Readonly<{
+        x: string;
+    }>) => void;
+    tooltipClickLabel?: ReactNode;
 }>;
 declare const DonutChart: react.NamedExoticComponent<Readonly<{
     data: ReadonlyArray<Readonly<{
@@ -298,6 +302,10 @@ declare const DonutChart: react.NamedExoticComponent<Readonly<{
     hideLegend?: boolean;
     numberFormat?: TypeChartNumberFormat;
     tooltip?: ({ color, name, percent, value, }: TypeDonutChartTooltipProps) => ReactNode;
+    onClick?: ({ x }: Readonly<{
+        x: string;
+    }>) => void;
+    tooltipClickLabel?: ReactNode;
 }>>;
 
 type TypeDonutChartLegendTableProps = Readonly<{
@@ -499,6 +507,7 @@ declare const areaChartStyles: styled_components.FlattenInterpolation<styled_com
 }>, any>>;
 declare const donutChartStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Readonly<{
     $colors: ReadonlyArray<TypeChartStyleColor>;
+    $hasOnClick: TypeChartStyleHasOnClick;
 }>, any>>;
 
 export { AreaChart, ChartLegend, ChartLegendLabel, ChartTable, ChartTooltip, ChartTooltipFooter, ChartTooltipHeader, ChartTooltipPortal, ChartTooltipTable, ChartTooltipTitle, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, DonutChart, DonutChartLegendTable, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, GlobalChartStyleOverrides, LineChart, NetworkColorBox, TIME_SERIES_CHART_HEIGHT, type TypeAreaChartProps, type TypeChartDataPoint, type TypeChartDataStyles, type TypeChartLegendLabelProps, type TypeChartLegendProps, type TypeChartNumberFormat, type TypeChartStyleColor, type TypeChartStyleHasOnClick, type TypeChartStylePattern, type TypeChartTableProps, type TypeChartTimeFormat, type TypeChartTooltipDateFormatter, type TypeChartTooltipProps, type TypeChartTooltipTableProps, type TypeChartXAnnotations, type TypeChartXAnnotationsDetails, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeExtendedChart, type TypeLegendLabel, type TypeLineChartProps, type TypeSeriesType, type TypeVerticalBarChartProps, VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT, areaChartOptions, areaChartStyles, baseChartOptions, baseChartStyles, columnChartOptions, donutChartOptions, donutChartStyles, generateChartTooltipPortalId, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, getStorybookCategoricalData, getStorybookSparseTimelineData, isCategoricalHourData, isHourlyTimeData, lineChartOptions, lineChartStyles, timeSeriesChartOptions, timeSeriesChartStyles, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };

package/dist/index.d.ts

@@ -283,6 +283,10 @@ type TypeDonutChartProps = Readonly<{
     hideLegend?: boolean;
     numberFormat?: TypeChartNumberFormat;
     tooltip?: ({ color, name, percent, value, }: TypeDonutChartTooltipProps) => ReactNode;
+    onClick?: ({ x }: Readonly<{
+        x: string;
+    }>) => void;
+    tooltipClickLabel?: ReactNode;
 }>;
 declare const DonutChart: react.NamedExoticComponent<Readonly<{
     data: ReadonlyArray<Readonly<{
@@ -298,6 +302,10 @@ declare const DonutChart: react.NamedExoticComponent<Readonly<{
     hideLegend?: boolean;
     numberFormat?: TypeChartNumberFormat;
     tooltip?: ({ color, name, percent, value, }: TypeDonutChartTooltipProps) => ReactNode;
+    onClick?: ({ x }: Readonly<{
+        x: string;
+    }>) => void;
+    tooltipClickLabel?: ReactNode;
 }>>;
 
 type TypeDonutChartLegendTableProps = Readonly<{
@@ -499,6 +507,7 @@ declare const areaChartStyles: styled_components.FlattenInterpolation<styled_com
 }>, any>>;
 declare const donutChartStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Readonly<{
     $colors: ReadonlyArray<TypeChartStyleColor>;
+    $hasOnClick: TypeChartStyleHasOnClick;
 }>, any>>;
 
 export { AreaChart, ChartLegend, ChartLegendLabel, ChartTable, ChartTooltip, ChartTooltipFooter, ChartTooltipHeader, ChartTooltipPortal, ChartTooltipTable, ChartTooltipTitle, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, DonutChart, DonutChartLegendTable, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, GlobalChartStyleOverrides, LineChart, NetworkColorBox, TIME_SERIES_CHART_HEIGHT, type TypeAreaChartProps, type TypeChartDataPoint, type TypeChartDataStyles, type TypeChartLegendLabelProps, type TypeChartLegendProps, type TypeChartNumberFormat, type TypeChartStyleColor, type TypeChartStyleHasOnClick, type TypeChartStylePattern, type TypeChartTableProps, type TypeChartTimeFormat, type TypeChartTooltipDateFormatter, type TypeChartTooltipProps, type TypeChartTooltipTableProps, type TypeChartXAnnotations, type TypeChartXAnnotationsDetails, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeExtendedChart, type TypeLegendLabel, type TypeLineChartProps, type TypeSeriesType, type TypeVerticalBarChartProps, VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT, areaChartOptions, areaChartStyles, baseChartOptions, baseChartStyles, columnChartOptions, donutChartOptions, donutChartStyles, generateChartTooltipPortalId, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, getStorybookCategoricalData, getStorybookSparseTimelineData, isCategoricalHourData, isHourlyTimeData, lineChartOptions, lineChartStyles, timeSeriesChartOptions, timeSeriesChartStyles, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };

package/dist/index.js

@@ -1553,6 +1553,19 @@ var donutChartStyles = import_styled_components7.css`
   .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
@@ -1695,6 +1708,7 @@ var DonutChartLegend = (0, import_react17.memo)(
 var import_react18 = require("react");
 var import_seeds_react_box10 = require("@sproutsocial/seeds-react-box");
 var import_seeds_react_duration3 = require("@sproutsocial/seeds-react-duration");
+var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
 var import_seeds_react_numeral3 = require("@sproutsocial/seeds-react-numeral");
 var import_seeds_react_text5 = require("@sproutsocial/seeds-react-text");
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -1708,7 +1722,9 @@ var DonutChartTooltip = (0, import_react18.memo)(
     value,
     currency,
     icon,
-    numberFormat
+    numberFormat,
+    onClick,
+    tooltipClickLabel
   }) {
     const rows = [
       {
@@ -1743,7 +1759,13 @@ var DonutChartTooltip = (0, import_react18.memo)(
         ]
       }
     ];
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartTooltip, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartTooltipTable, { rows }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ChartTooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_seeds_react_box10.Box, { display: "flex", alignItems: "center", gap: 300, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_seeds_react_icon2.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_seeds_react_text5.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+      ] }) : tooltipClickLabel }) : null
+    ] });
   }
 );
 
@@ -1784,7 +1806,9 @@ var DonutChartWithData = (0, import_react19.memo)(
     disableTooltips = false,
     hideLegend = false,
     numberFormat = "decimal",
-    tooltip
+    tooltip,
+    onClick,
+    tooltipClickLabel
   }) {
     const [options, setOptions] = (0, import_react19.useState)(donutChartOptions);
     const [chart, setChart] = (0, import_react19.useState)(null);
@@ -1825,7 +1849,12 @@ var DonutChartWithData = (0, import_react19.memo)(
               return {
                 name: item.name,
                 y: item.value,
-                colorIndex: index
+                colorIndex: index,
+                events: onClick ? {
+                  click: function() {
+                    onClick({ x: item.name });
+                  }
+                } : void 0
               };
             })
           }
@@ -1840,40 +1869,50 @@ var DonutChartWithData = (0, import_react19.memo)(
     );
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(GlobalChartStyleOverrides, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(StyledBox4, { $colors: colors, bg: "container.background.base", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_highcharts_react_official2.HighchartsReact,
-          {
-            highcharts: import_highcharts4.default,
-            options,
-            callback
-          }
-        ),
-        chart && !disableTooltips ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          ChartTooltipPortal,
-          {
-            chart,
-            renderContent: (context) => {
-              const { color, icon, name, percent, value } = transformDonutChartTooltipData({ context, data });
-              return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                DonutChartTooltip,
-                {
-                  color,
-                  currency,
-                  icon,
-                  name,
-                  numberFormat,
-                  numberLocale,
-                  percent,
-                  textLocale,
-                  value
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        StyledBox4,
+        {
+          $colors: colors,
+          $hasOnClick: Boolean(onClick),
+          bg: "container.background.base",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              import_highcharts_react_official2.HighchartsReact,
+              {
+                highcharts: import_highcharts4.default,
+                options,
+                callback
+              }
+            ),
+            chart && !disableTooltips ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              ChartTooltipPortal,
+              {
+                chart,
+                renderContent: (context) => {
+                  const { color, icon, name, percent, value } = transformDonutChartTooltipData({ context, data });
+                  return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    DonutChartTooltip,
+                    {
+                      color,
+                      currency,
+                      icon,
+                      name,
+                      numberFormat,
+                      numberLocale,
+                      percent,
+                      textLocale,
+                      value,
+                      onClick,
+                      tooltipClickLabel
+                    }
+                  );
                 }
-              );
-            }
-          }
-        ) : null,
-        hideLegend ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_seeds_react_box11.Box, { mt: 350, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DonutChartLegend, { data }) })
-      ] })
+              }
+            ) : null,
+            hideLegend ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_seeds_react_box11.Box, { mt: 350, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DonutChartLegend, { data }) })
+          ]
+        }
+      )
     ] });
   }
 );
@@ -1998,7 +2037,7 @@ var LineChartLegend = (0, import_react21.memo)(
 var import_react22 = require("react");
 var import_seeds_react_box13 = require("@sproutsocial/seeds-react-box");
 var import_seeds_react_duration5 = require("@sproutsocial/seeds-react-duration");
-var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
+var import_seeds_react_icon3 = require("@sproutsocial/seeds-react-icon");
 var import_seeds_react_numeral5 = require("@sproutsocial/seeds-react-numeral");
 var import_seeds_react_text7 = require("@sproutsocial/seeds-react-text");
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -2044,7 +2083,7 @@ var LineChartTooltip = (0, import_react22.memo)(
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartTooltipTable, { rows }),
       onClick && tooltipClickLabel ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_seeds_react_box13.Box, { display: "flex", alignItems: "center", gap: 300, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_icon2.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_icon3.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_text7.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
       ] }) : tooltipClickLabel }) : null
     ] });