@sproutsocial/seeds-react-data-viz 0.18.0 → 0.20.0

package/dist/esm/donut/index.js

@@ -1,14 +1,15 @@
 import {
   DONUT_CHART_HEIGHT
 } from "../chunk-XMYGML25.js";
+import {
+  getChartContainerProps
+} from "../chunk-P3MVYSHX.js";
 import {
   ChartRenderer,
   buildBaseChartOptions,
   useSeedsChartSetup
-} from "../chunk-JLFXOEV2.js";
-import {
-  donutChartStyles
-} from "../chunk-Z4LOM4OZ.js";
+} from "../chunk-QSSYSKRP.js";
+import "../chunk-XEKQTAUH.js";
 
 // src/charts/donut/DonutChart.tsx
 import { memo, useMemo } from "react";
@@ -40,12 +41,18 @@ function buildDonutOptions(props, colors) {
         borderRadius: 0,
         dataLabels: { enabled: false },
         innerSize: "50%",
-        ...props.onClick ? {
+        ...props.onClick || props.onMouseEnter || props.onMouseLeave ? {
           point: {
             events: {
-              click() {
-                props.onClick?.({ position: this.name });
-              }
+              click: props.onClick ? function() {
+                props.onClick({ position: this.name });
+              } : void 0,
+              mouseOver: props.onMouseEnter ? function() {
+                props.onMouseEnter({ position: this.name });
+              } : void 0,
+              mouseOut: props.onMouseLeave ? function() {
+                props.onMouseLeave({ position: this.name });
+              } : void 0
             }
           }
         } : {}
@@ -65,21 +72,6 @@ function buildDonutOptions(props, colors) {
   };
 }
 
-// src/charts/donut/styles.ts
-import styled from "styled-components";
-var DonutChartContainer = styled.div`
-  background-color: ${({ theme }) => theme.colors.container.background.base};
-  ${donutChartStyles}
-
-  /* Dim non-hovered slices. Highcharts adds .highcharts-point-inactive to
-     all pie points except the hovered one. In styledMode, opacity is CSS-only
-     (JS plotOptions.states.inactive.opacity is ignored). */
-  .highcharts-pie-series .highcharts-point-inactive {
-    opacity: 0.3;
-    transition: opacity 0s;
-  }
-`;
-
 // src/charts/donut/DonutChart.tsx
 import { jsx } from "react/jsx-runtime";
 var DonutChart = memo(function DonutChart2(props) {
@@ -91,34 +83,32 @@ var DonutChart = memo(function DonutChart2(props) {
     [props, colors]
   );
   const hasOnClick = Boolean(props.onClick);
+  const containerProps = getChartContainerProps({
+    familyClasses: ["seeds-chart-donut"],
+    colors: props.data.map((d) => d.color),
+    hasOnClick,
+    className: props.className
+  });
   const tooltip = props.tooltip ? (args) => props.tooltip(args) : void 0;
-  return /* @__PURE__ */ jsx(
-    DonutChartContainer,
+  return /* @__PURE__ */ jsx("div", { ...containerProps, children: /* @__PURE__ */ jsx(
+    ChartRenderer,
     {
-      $colors: colors,
-      $hasOnClick: hasOnClick,
-      className: props.className,
-      children: /* @__PURE__ */ jsx(
-        ChartRenderer,
-        {
-          options,
-          series: props.data.map((d, i) => ({
-            name: d.name,
-            color: colors[i],
-            icon: d.icon
-          })),
-          colors,
-          tooltip,
-          hasOnClick,
-          tooltipClickLabel: props.tooltipClickLabel,
-          invalidNumberLabel: props.invalidNumberLabel,
-          valueFormat: props.format,
-          exportTitle: props.exportTitle,
-          onReady: props.onReady
-        }
-      )
+      options,
+      series: props.data.map((d, i) => ({
+        name: d.name,
+        color: colors[i],
+        icon: d.icon
+      })),
+      colors,
+      tooltip,
+      hasOnClick,
+      tooltipClickLabel: props.tooltipClickLabel,
+      invalidNumberLabel: props.invalidNumberLabel,
+      valueFormat: props.format,
+      exportTitle: props.exportTitle,
+      onReady: props.onReady
     }
-  );
+  ) });
 });
 export {
   DonutChart

package/dist/esm/donut/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/charts/donut/DonutChart.tsx","../../../src/charts/donut/adapter.ts","../../../src/charts/donut/styles.ts"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport {\n  useSeedsChartSetup,\n  ChartRenderer,\n  type ChartTooltipProps,\n} from \"../shared/chartBase\";\nimport { buildDonutOptions } from \"./adapter\";\nimport { DonutChartContainer } from \"./styles\";\nimport type { DonutChartProps, DonutChartTooltipProps } from \"./types\";\n\nexport const DonutChart = memo(function DonutChart(props: DonutChartProps) {\n  // Map each data item to { color? } so useSeedsChartSetup resolves the palette.\n  const { colors } = useSeedsChartSetup({\n    series: props.data.map((d) => ({ color: d.color })),\n  });\n\n  // Memoize to avoid spurious Highcharts redraws on parent re-renders.\n  const options = useMemo(\n    () => buildDonutOptions(props, colors),\n    [props, colors]\n  );\n  const hasOnClick = Boolean(props.onClick);\n\n  // `ChartRenderer` expects `(ChartTooltipProps) => ReactNode`. The consumer's\n  // function expects the narrower `DonutChartTooltipProps` (required `percent`).\n  // Wrap rather than cast the function type so the intent is explicit.\n  const tooltip = props.tooltip\n    ? (args: ChartTooltipProps) =>\n        props.tooltip!(args as unknown as DonutChartTooltipProps)\n    : undefined;\n\n  return (\n    <DonutChartContainer\n      $colors={colors}\n      $hasOnClick={hasOnClick}\n      className={props.className}\n    >\n      <ChartRenderer\n        options={options}\n        series={props.data.map((d, i) => ({\n          name: d.name,\n          color: colors[i],\n          icon: d.icon,\n        }))}\n        colors={colors}\n        tooltip={tooltip}\n        hasOnClick={hasOnClick}\n        tooltipClickLabel={props.tooltipClickLabel}\n        invalidNumberLabel={props.invalidNumberLabel}\n        valueFormat={props.format}\n        exportTitle={props.exportTitle}\n        onReady={props.onReady}\n      />\n    </DonutChartContainer>\n  );\n});\n","import type { SeedsChartOptions } from \"../shared/chartBase\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport { DONUT_CHART_HEIGHT } from \"../../constants/chartOptions\";\nimport type { DonutChartProps } from \"./types\";\n\nexport function buildDonutOptions(\n  props: DonutChartProps,\n  colors: ReadonlyArray<string>\n): SeedsChartOptions {\n  const base = buildBaseChartOptions({\n    type: \"pie\",\n    description: props.description,\n  });\n  return {\n    ...base,\n    chart: {\n      type: \"pie\" as const,\n      styledMode: true,\n      animation: false,\n      // Height only — width is left fluid (v1 parity) so the chart fills its\n      // container and the pie auto-centers. The container bounds the width (see\n      // styles.ts) so the legend below wraps to the donut and centers with it.\n      height: DONUT_CHART_HEIGHT,\n      // Drop Highcharts' default spacing so the donut uses the full height.\n      spacing: [0, 0, 0, 0],\n    },\n    plotOptions: {\n      pie: {\n        animation: false,\n        // borderRadius must be set in JS, not CSS, because Highcharts computes\n        // the arc path before applying it — CSS border-radius has no effect.\n        borderRadius: 0,\n        dataLabels: { enabled: false },\n        innerSize: \"50%\",\n        ...(props.onClick\n          ? {\n              point: {\n                events: {\n                  click(this: { name: string }) {\n                    props.onClick?.({ position: this.name });\n                  },\n                },\n              },\n            }\n          : {}),\n      },\n    },\n    series: [\n      {\n        type: \"pie\",\n        name: \"Data\",\n        data: props.data.map((d, i) => ({\n          name: d.name,\n          y: d.value,\n          color: d.color ?? colors[i] ?? \"\",\n        })),\n      },\n    ],\n  };\n}\n","import styled from \"styled-components\";\nimport { donutChartStyles } from \"../../styles/chartStyles\";\nimport type {\n  TypeChartStyleColor,\n  TypeChartStyleHasOnClick,\n} from \"../../types\";\n\ntype StyleProps = Readonly<{\n  $colors: ReadonlyArray<TypeChartStyleColor>;\n  $hasOnClick: TypeChartStyleHasOnClick;\n}>;\n\n// Plain styled `div` — not `Box`. Per the DS Tailwind direction (established in\n// CE-28/line-area), new components render semantic elements internally.\n//\n// No width constraint (v1 parity): the chart fills the container and the pie\n// auto-centers, while the legend centers in the same width — so the legend\n// stays on one row and centers with the donut instead of wrapping to match it.\nexport const DonutChartContainer = styled.div<StyleProps>`\n  background-color: ${({ theme }) => theme.colors.container.background.base};\n  ${donutChartStyles}\n\n  /* Dim non-hovered slices. Highcharts adds .highcharts-point-inactive to\n     all pie points except the hovered one. In styledMode, opacity is CSS-only\n     (JS plotOptions.states.inactive.opacity is ignored). */\n  .highcharts-pie-series .highcharts-point-inactive {\n    opacity: 0.3;\n    transition: opacity 0s;\n  }\n`;\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,MAAM,eAAe;;;ACKvB,SAAS,kBACd,OACA,QACmB;AACnB,QAAM,OAAO,sBAAsB;AAAA,IACjC,MAAM;AAAA,IACN,aAAa,MAAM;AAAA,EACrB,CAAC;AACD,SAAO;AAAA,IACL,GAAG;AAAA,IACH,OAAO;AAAA,MACL,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,WAAW;AAAA;AAAA;AAAA;AAAA,MAIX,QAAQ;AAAA;AAAA,MAER,SAAS,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IACtB;AAAA,IACA,aAAa;AAAA,MACX,KAAK;AAAA,QACH,WAAW;AAAA;AAAA;AAAA,QAGX,cAAc;AAAA,QACd,YAAY,EAAE,SAAS,MAAM;AAAA,QAC7B,WAAW;AAAA,QACX,GAAI,MAAM,UACN;AAAA,UACE,OAAO;AAAA,YACL,QAAQ;AAAA,cACN,QAA8B;AAC5B,sBAAM,UAAU,EAAE,UAAU,KAAK,KAAK,CAAC;AAAA,cACzC;AAAA,YACF;AAAA,UACF;AAAA,QACF,IACA,CAAC;AAAA,MACP;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM,MAAM,KAAK,IAAI,CAAC,GAAG,OAAO;AAAA,UAC9B,MAAM,EAAE;AAAA,UACR,GAAG,EAAE;AAAA,UACL,OAAO,EAAE,SAAS,OAAO,CAAC,KAAK;AAAA,QACjC,EAAE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AACF;;;AC3DA,OAAO,YAAY;AAkBZ,IAAM,sBAAsB,OAAO;AAAA,sBACpB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,IACvE,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AFiBd;AA3BC,IAAM,aAAa,KAAK,SAASA,YAAW,OAAwB;AAEzE,QAAM,EAAE,OAAO,IAAI,mBAAmB;AAAA,IACpC,QAAQ,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE;AAAA,EACpD,CAAC;AAGD,QAAM,UAAU;AAAA,IACd,MAAM,kBAAkB,OAAO,MAAM;AAAA,IACrC,CAAC,OAAO,MAAM;AAAA,EAChB;AACA,QAAM,aAAa,QAAQ,MAAM,OAAO;AAKxC,QAAM,UAAU,MAAM,UAClB,CAAC,SACC,MAAM,QAAS,IAAyC,IAC1D;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW,MAAM;AAAA,MAEjB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,QAAQ,MAAM,KAAK,IAAI,CAAC,GAAG,OAAO;AAAA,YAChC,MAAM,EAAE;AAAA,YACR,OAAO,OAAO,CAAC;AAAA,YACf,MAAM,EAAE;AAAA,UACV,EAAE;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA,mBAAmB,MAAM;AAAA,UACzB,oBAAoB,MAAM;AAAA,UAC1B,aAAa,MAAM;AAAA,UACnB,aAAa,MAAM;AAAA,UACnB,SAAS,MAAM;AAAA;AAAA,MACjB;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["DonutChart"]}
+{"version":3,"sources":["../../../src/charts/donut/DonutChart.tsx","../../../src/charts/donut/adapter.ts"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport {\n  useSeedsChartSetup,\n  ChartRenderer,\n  type ChartTooltipProps,\n} from \"../shared/chartBase\";\nimport { getChartContainerProps } from \"../shared/chartContainer\";\nimport { buildDonutOptions } from \"./adapter\";\nimport type { DonutChartProps, DonutChartTooltipProps } from \"./types\";\n\n/**\n * DonutChart renders a donut (ring) chart from a flat list of named values.\n *\n * Like SparklineChart, it carries no `styled-components`: the wrapper is a plain\n * `<div>` and the Highcharts styling ships as static CSS. Consumers import both\n * `@sproutsocial/seeds-react-data-viz/chart-styles.css` and `.../donut.css` once\n * (the component never self-imports its CSS).\n */\nexport const DonutChart = memo(function DonutChart(props: DonutChartProps) {\n  // Map each data item to { color? } so useSeedsChartSetup resolves the palette\n  // used for the Highcharts options and the legend swatches.\n  const { colors } = useSeedsChartSetup({\n    series: props.data.map((d) => ({ color: d.color })),\n  });\n\n  // Memoize to avoid spurious Highcharts redraws on parent re-renders.\n  const options = useMemo(\n    () => buildDonutOptions(props, colors),\n    [props, colors]\n  );\n  const hasOnClick = Boolean(props.onClick);\n\n  // Container props from the shared contract. RAW per-series colors only —\n  // an unset series falls through to chart-styles.css's --highcharts-color-N\n  // default (the DS data-viz palette, light/dark-correct), matching the\n  // bar/line-area convention. Only an explicit consumer override is inlined.\n  const containerProps = getChartContainerProps({\n    familyClasses: [\"seeds-chart-donut\"],\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 `DonutChartTooltipProps` (required `percent`).\n  // Wrap rather than cast the function type so the intent is explicit.\n  const tooltip = props.tooltip\n    ? (args: ChartTooltipProps) =>\n        props.tooltip!(args as unknown as DonutChartTooltipProps)\n    : undefined;\n\n  return (\n    <div {...containerProps}>\n      <ChartRenderer\n        options={options}\n        series={props.data.map((d, i) => ({\n          name: d.name,\n          color: colors[i],\n          icon: d.icon,\n        }))}\n        colors={colors}\n        tooltip={tooltip}\n        hasOnClick={hasOnClick}\n        tooltipClickLabel={props.tooltipClickLabel}\n        invalidNumberLabel={props.invalidNumberLabel}\n        valueFormat={props.format}\n        exportTitle={props.exportTitle}\n        onReady={props.onReady}\n      />\n    </div>\n  );\n});\n","import type { SeedsChartOptions } from \"../shared/chartBase\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport { DONUT_CHART_HEIGHT } from \"../../constants/chartOptions\";\nimport type { DonutChartProps } from \"./types\";\n\nexport function buildDonutOptions(\n  props: DonutChartProps,\n  colors: ReadonlyArray<string>\n): SeedsChartOptions {\n  const base = buildBaseChartOptions({\n    type: \"pie\",\n    description: props.description,\n  });\n  return {\n    ...base,\n    chart: {\n      type: \"pie\" as const,\n      styledMode: true,\n      animation: false,\n      // Height only — width is left fluid (v1 parity) so the chart fills its\n      // container and the pie auto-centers. The container bounds the width (see\n      // styles.ts) so the legend below wraps to the donut and centers with it.\n      height: DONUT_CHART_HEIGHT,\n      // Drop Highcharts' default spacing so the donut uses the full height.\n      spacing: [0, 0, 0, 0],\n    },\n    plotOptions: {\n      pie: {\n        animation: false,\n        // borderRadius must be set in JS, not CSS, because Highcharts computes\n        // the arc path before applying it — CSS border-radius has no effect.\n        borderRadius: 0,\n        dataLabels: { enabled: false },\n        innerSize: \"50%\",\n        ...(props.onClick || props.onMouseEnter || props.onMouseLeave\n          ? {\n              point: {\n                events: {\n                  click: props.onClick\n                    ? function (this: { name: string }) {\n                        props.onClick!({ position: this.name });\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      },\n    },\n    series: [\n      {\n        type: \"pie\",\n        name: \"Data\",\n        data: props.data.map((d, i) => ({\n          name: d.name,\n          y: d.value,\n          color: d.color ?? colors[i] ?? \"\",\n        })),\n      },\n    ],\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,MAAM,eAAe;;;ACKvB,SAAS,kBACd,OACA,QACmB;AACnB,QAAM,OAAO,sBAAsB;AAAA,IACjC,MAAM;AAAA,IACN,aAAa,MAAM;AAAA,EACrB,CAAC;AACD,SAAO;AAAA,IACL,GAAG;AAAA,IACH,OAAO;AAAA,MACL,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,WAAW;AAAA;AAAA;AAAA;AAAA,MAIX,QAAQ;AAAA;AAAA,MAER,SAAS,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IACtB;AAAA,IACA,aAAa;AAAA,MACX,KAAK;AAAA,QACH,WAAW;AAAA;AAAA;AAAA,QAGX,cAAc;AAAA,QACd,YAAY,EAAE,SAAS,MAAM;AAAA,QAC7B,WAAW;AAAA,QACX,GAAI,MAAM,WAAW,MAAM,gBAAgB,MAAM,eAC7C;AAAA,UACE,OAAO;AAAA,YACL,QAAQ;AAAA,cACN,OAAO,MAAM,UACT,WAAkC;AAChC,sBAAM,QAAS,EAAE,UAAU,KAAK,KAAK,CAAC;AAAA,cACxC,IACA;AAAA,cACJ,WAAW,MAAM,eACb,WAAkC;AAChC,sBAAM,aAAc,EAAE,UAAU,KAAK,KAAK,CAAC;AAAA,cAC7C,IACA;AAAA,cACJ,UAAU,MAAM,eACZ,WAAkC;AAChC,sBAAM,aAAc,EAAE,UAAU,KAAK,KAAK,CAAC;AAAA,cAC7C,IACA;AAAA,YACN;AAAA,UACF;AAAA,QACF,IACA,CAAC;AAAA,MACP;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM,MAAM,KAAK,IAAI,CAAC,GAAG,OAAO;AAAA,UAC9B,MAAM,EAAE;AAAA,UACR,GAAG,EAAE;AAAA,UACL,OAAO,EAAE,SAAS,OAAO,CAAC,KAAK;AAAA,QACjC,EAAE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AACF;;;ADlBM;AAnCC,IAAM,aAAa,KAAK,SAASA,YAAW,OAAwB;AAGzE,QAAM,EAAE,OAAO,IAAI,mBAAmB;AAAA,IACpC,QAAQ,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE;AAAA,EACpD,CAAC;AAGD,QAAM,UAAU;AAAA,IACd,MAAM,kBAAkB,OAAO,MAAM;AAAA,IACrC,CAAC,OAAO,MAAM;AAAA,EAChB;AACA,QAAM,aAAa,QAAQ,MAAM,OAAO;AAMxC,QAAM,iBAAiB,uBAAuB;AAAA,IAC5C,eAAe,CAAC,mBAAmB;AAAA,IACnC,QAAQ,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE,KAAK;AAAA,IACrC;AAAA,IACA,WAAW,MAAM;AAAA,EACnB,CAAC;AAKD,QAAM,UAAU,MAAM,UAClB,CAAC,SACC,MAAM,QAAS,IAAyC,IAC1D;AAEJ,SACE,oBAAC,SAAK,GAAG,gBACP;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ,MAAM,KAAK,IAAI,CAAC,GAAG,OAAO;AAAA,QAChC,MAAM,EAAE;AAAA,QACR,OAAO,OAAO,CAAC;AAAA,QACf,MAAM,EAAE;AAAA,MACV,EAAE;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM;AAAA,MACzB,oBAAoB,MAAM;AAAA,MAC1B,aAAa,MAAM;AAAA,MACnB,aAAa,MAAM;AAAA,MACnB,SAAS,MAAM;AAAA;AAAA,EACjB,GACF;AAEJ,CAAC;","names":["DonutChart"]}