@sproutsocial/seeds-react-data-viz 0.19.0 → 0.21.0

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

@@ -1 +1 @@
-{"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\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"],"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;;;ADNM;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"]}
+{"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 so the chart fills its container and\n      // the pie auto-centers. The container bounds the width (see styles.ts) so\n      // the legend below wraps to the donut and centers with it.\n      height: props.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,MAAM,UAAU;AAAA;AAAA,MAExB,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"]}