@economic/taco 11.0.1-react-v19.0 → 12.0.0-alpha.0

package/dist/charts/components/Bar/BarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.cjs","sources":["../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getInverseThemeColor } from '../../utils/color';\nimport { getAxisProps, stripCartesianProps } from '../../utils/common';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps } from '../types';\nimport type { ChartShape } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst BAR_WIDTH = 18;\nexport type BarChartProps<TData extends object> = {\n    /** Orientation of the bars\n     * @default false\n     */\n    orientation?: 'horizontal' | 'vertical';\n    /** Show bar values as labels next to/inside the bar\n     * @default vertical\n     */\n    showLabels?: boolean;\n    /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n} & CartesianChartProps<TData>;\n\nexport function BarChart<TData extends object>(props: BarChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        orientation: _1,\n        showLabels = false,\n        showLegend = false,\n        stacked = false,\n        tooltipTitle,\n        ...attributes\n    } = stripCartesianProps<BarChartProps<TData>>(props);\n    const isHorizontal = props.orientation === 'horizontal';\n\n    const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar\">\n                <RechartsPrimitive.BarChart\n                    data={data}\n                    // style props - these are % so that they \"look okay\" for really wide charts as well as small ones\n                    barCategoryGap=\"15%\"\n                    barGap=\"7.5%\"\n                    margin={{\n                        bottom: 0,\n                        left: 0,\n                        right: 0,\n                        // ensures labels on top of bars don't get cropped\n                        top: isHorizontal ? 0 : 10,\n                    }}\n                    layout={isHorizontal ? 'vertical' : undefined}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid horizontal={!isHorizontal} vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props, isHorizontal)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props, isHorizontal)} />\n                    {renderBars(shapes, showLabels, stacked, isHorizontal)}\n                </RechartsPrimitive.BarChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n/**\n * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.\n */\nexport const renderBars = (\n    shapes: ChartShape[],\n    showLabels: boolean = false,\n    stacked: boolean | 'expand' = false,\n    isHorizontal: boolean = false\n) => {\n    return shapes.map((shape, index) => (\n        <RechartsPrimitive.Bar\n            key={shape.dataKey}\n            {...shape}\n            activeBar={{ fillOpacity: 1, strokeWidth: 0 }}\n            maxBarSize={BAR_WIDTH}\n            radius={getRadius(index, shapes.length, !!stacked, isHorizontal)}\n            stackId={stacked ? 'stack' : undefined}\n            strokeWidth={0}>\n            {showLabels ? (\n                <RechartsPrimitive.LabelList\n                    position={isHorizontal ? 'insideRight' : 'top'}\n                    formatter={shape.formatter}\n                    offset={6}\n                    fill={isHorizontal ? getInverseThemeColor(shape.color ?? '') : 'black'}\n                    fontSize={11}\n                />\n            ) : null}\n        </RechartsPrimitive.Bar>\n    ));\n};\n\nfunction getRadius(\n    index: number,\n    length: number,\n    stacked: boolean,\n    isHorizontal: boolean\n): number | [number, number, number, number] {\n    if (stacked) {\n        if (index === 0) {\n            return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];\n        }\n\n        if (index === length - 1) {\n            return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];\n        }\n\n        return 0;\n    }\n\n    return 3;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarChartBarProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Bar<TData extends object>(_: BarChartBarProps<TData>): React.JSX.Element | null {\n    return null;\n}\nBarChart.Bar = Bar;\n"],"names":["stripCartesianProps","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend","getInverseThemeColor"],"mappings":"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"}
+{"version":3,"file":"BarChart.cjs","sources":["../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getInverseThemeColor } from '../../utils/color';\nimport { getAxisProps, stripCartesianProps } from '../../utils/common';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps } from '../types';\nimport type { ChartShape } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst BAR_WIDTH = 18;\nexport type BarChartProps<TData extends object> = {\n    /** Orientation of the bars\n     * @default false\n     */\n    orientation?: 'horizontal' | 'vertical';\n    /** Show bar values as labels next to/inside the bar\n     * @default vertical\n     */\n    showLabels?: boolean;\n    /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n} & CartesianChartProps<TData>;\n\nexport function BarChart<TData extends object>(props: BarChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        orientation: _1,\n        showLabels = false,\n        showLegend = false,\n        stacked = false,\n        tooltipTitle,\n        ...attributes\n    } = stripCartesianProps<BarChartProps<TData>>(props);\n    const isHorizontal = props.orientation === 'horizontal';\n\n    const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar\">\n                <RechartsPrimitive.BarChart\n                    data={data}\n                    // style props - these are % so that they \"look okay\" for really wide charts as well as small ones\n                    barCategoryGap=\"15%\"\n                    barGap=\"7.5%\"\n                    margin={{\n                        bottom: 0,\n                        left: 0,\n                        right: 0,\n                        // ensures labels on top of bars don't get cropped\n                        top: isHorizontal ? 0 : 10,\n                    }}\n                    layout={isHorizontal ? 'vertical' : undefined}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid horizontal={!isHorizontal} vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props, isHorizontal)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props, isHorizontal)} />\n                    {renderBars(shapes, showLabels, stacked, isHorizontal)}\n                </RechartsPrimitive.BarChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n/**\n * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.\n */\nexport const renderBars = (\n    shapes: ChartShape[],\n    showLabels: boolean = false,\n    stacked: boolean | 'expand' = false,\n    isHorizontal: boolean = false\n) => {\n    return shapes.map((shape, index) => (\n        <RechartsPrimitive.Bar\n            key={shape.dataKey}\n            {...shape}\n            activeBar={{ fillOpacity: 1, strokeWidth: 0 }}\n            maxBarSize={BAR_WIDTH}\n            radius={getRadius(index, shapes.length, !!stacked, isHorizontal)}\n            stackId={stacked ? 'stack' : undefined}\n            strokeWidth={0}>\n            {showLabels ? (\n                <RechartsPrimitive.LabelList\n                    position={isHorizontal ? 'insideRight' : 'top'}\n                    // LabelList's LabelFormatter (single arg, non-JSX return) is incompatible with the\n                    // series Formatter stored on the shape; the runtime label value is always numeric\n                    formatter={shape.formatter as React.ComponentProps<typeof RechartsPrimitive.LabelList>['formatter']}\n                    offset={6}\n                    fill={isHorizontal ? getInverseThemeColor(shape.color ?? '') : 'black'}\n                    fontSize={11}\n                />\n            ) : null}\n        </RechartsPrimitive.Bar>\n    ));\n};\n\nfunction getRadius(\n    index: number,\n    length: number,\n    stacked: boolean,\n    isHorizontal: boolean\n): number | [number, number, number, number] {\n    if (stacked) {\n        if (index === 0) {\n            return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];\n        }\n\n        if (index === length - 1) {\n            return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];\n        }\n\n        return 0;\n    }\n\n    return 3;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarChartBarProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Bar<TData extends object>(_: BarChartBarProps<TData>): React.JSX.Element | null {\n    return null;\n}\nBarChart.Bar = Bar;\n"],"names":["stripCartesianProps","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend","getInverseThemeColor"],"mappings":"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"}

package/dist/charts/components/Bar/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","sources":["../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getInverseThemeColor } from '../../utils/color';\nimport { getAxisProps, stripCartesianProps } from '../../utils/common';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps } from '../types';\nimport type { ChartShape } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst BAR_WIDTH = 18;\nexport type BarChartProps<TData extends object> = {\n    /** Orientation of the bars\n     * @default false\n     */\n    orientation?: 'horizontal' | 'vertical';\n    /** Show bar values as labels next to/inside the bar\n     * @default vertical\n     */\n    showLabels?: boolean;\n    /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n} & CartesianChartProps<TData>;\n\nexport function BarChart<TData extends object>(props: BarChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        orientation: _1,\n        showLabels = false,\n        showLegend = false,\n        stacked = false,\n        tooltipTitle,\n        ...attributes\n    } = stripCartesianProps<BarChartProps<TData>>(props);\n    const isHorizontal = props.orientation === 'horizontal';\n\n    const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar\">\n                <RechartsPrimitive.BarChart\n                    data={data}\n                    // style props - these are % so that they \"look okay\" for really wide charts as well as small ones\n                    barCategoryGap=\"15%\"\n                    barGap=\"7.5%\"\n                    margin={{\n                        bottom: 0,\n                        left: 0,\n                        right: 0,\n                        // ensures labels on top of bars don't get cropped\n                        top: isHorizontal ? 0 : 10,\n                    }}\n                    layout={isHorizontal ? 'vertical' : undefined}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid horizontal={!isHorizontal} vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props, isHorizontal)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props, isHorizontal)} />\n                    {renderBars(shapes, showLabels, stacked, isHorizontal)}\n                </RechartsPrimitive.BarChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n/**\n * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.\n */\nexport const renderBars = (\n    shapes: ChartShape[],\n    showLabels: boolean = false,\n    stacked: boolean | 'expand' = false,\n    isHorizontal: boolean = false\n) => {\n    return shapes.map((shape, index) => (\n        <RechartsPrimitive.Bar\n            key={shape.dataKey}\n            {...shape}\n            activeBar={{ fillOpacity: 1, strokeWidth: 0 }}\n            maxBarSize={BAR_WIDTH}\n            radius={getRadius(index, shapes.length, !!stacked, isHorizontal)}\n            stackId={stacked ? 'stack' : undefined}\n            strokeWidth={0}>\n            {showLabels ? (\n                <RechartsPrimitive.LabelList\n                    position={isHorizontal ? 'insideRight' : 'top'}\n                    formatter={shape.formatter}\n                    offset={6}\n                    fill={isHorizontal ? getInverseThemeColor(shape.color ?? '') : 'black'}\n                    fontSize={11}\n                />\n            ) : null}\n        </RechartsPrimitive.Bar>\n    ));\n};\n\nfunction getRadius(\n    index: number,\n    length: number,\n    stacked: boolean,\n    isHorizontal: boolean\n): number | [number, number, number, number] {\n    if (stacked) {\n        if (index === 0) {\n            return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];\n        }\n\n        if (index === length - 1) {\n            return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];\n        }\n\n        return 0;\n    }\n\n    return 3;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarChartBarProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Bar<TData extends object>(_: BarChartBarProps<TData>): React.JSX.Element | null {\n    return null;\n}\nBarChart.Bar = Bar;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"BarChart.js","sources":["../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getInverseThemeColor } from '../../utils/color';\nimport { getAxisProps, stripCartesianProps } from '../../utils/common';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps } from '../types';\nimport type { ChartShape } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst BAR_WIDTH = 18;\nexport type BarChartProps<TData extends object> = {\n    /** Orientation of the bars\n     * @default false\n     */\n    orientation?: 'horizontal' | 'vertical';\n    /** Show bar values as labels next to/inside the bar\n     * @default vertical\n     */\n    showLabels?: boolean;\n    /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n} & CartesianChartProps<TData>;\n\nexport function BarChart<TData extends object>(props: BarChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        orientation: _1,\n        showLabels = false,\n        showLegend = false,\n        stacked = false,\n        tooltipTitle,\n        ...attributes\n    } = stripCartesianProps<BarChartProps<TData>>(props);\n    const isHorizontal = props.orientation === 'horizontal';\n\n    const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar\">\n                <RechartsPrimitive.BarChart\n                    data={data}\n                    // style props - these are % so that they \"look okay\" for really wide charts as well as small ones\n                    barCategoryGap=\"15%\"\n                    barGap=\"7.5%\"\n                    margin={{\n                        bottom: 0,\n                        left: 0,\n                        right: 0,\n                        // ensures labels on top of bars don't get cropped\n                        top: isHorizontal ? 0 : 10,\n                    }}\n                    layout={isHorizontal ? 'vertical' : undefined}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid horizontal={!isHorizontal} vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props, isHorizontal)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props, isHorizontal)} />\n                    {renderBars(shapes, showLabels, stacked, isHorizontal)}\n                </RechartsPrimitive.BarChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n/**\n * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.\n */\nexport const renderBars = (\n    shapes: ChartShape[],\n    showLabels: boolean = false,\n    stacked: boolean | 'expand' = false,\n    isHorizontal: boolean = false\n) => {\n    return shapes.map((shape, index) => (\n        <RechartsPrimitive.Bar\n            key={shape.dataKey}\n            {...shape}\n            activeBar={{ fillOpacity: 1, strokeWidth: 0 }}\n            maxBarSize={BAR_WIDTH}\n            radius={getRadius(index, shapes.length, !!stacked, isHorizontal)}\n            stackId={stacked ? 'stack' : undefined}\n            strokeWidth={0}>\n            {showLabels ? (\n                <RechartsPrimitive.LabelList\n                    position={isHorizontal ? 'insideRight' : 'top'}\n                    // LabelList's LabelFormatter (single arg, non-JSX return) is incompatible with the\n                    // series Formatter stored on the shape; the runtime label value is always numeric\n                    formatter={shape.formatter as React.ComponentProps<typeof RechartsPrimitive.LabelList>['formatter']}\n                    offset={6}\n                    fill={isHorizontal ? getInverseThemeColor(shape.color ?? '') : 'black'}\n                    fontSize={11}\n                />\n            ) : null}\n        </RechartsPrimitive.Bar>\n    ));\n};\n\nfunction getRadius(\n    index: number,\n    length: number,\n    stacked: boolean,\n    isHorizontal: boolean\n): number | [number, number, number, number] {\n    if (stacked) {\n        if (index === 0) {\n            return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];\n        }\n\n        if (index === length - 1) {\n            return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];\n        }\n\n        return 0;\n    }\n\n    return 3;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarChartBarProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Bar<TData extends object>(_: BarChartBarProps<TData>): React.JSX.Element | null {\n    return null;\n}\nBarChart.Bar = Bar;\n"],"names":["React"],"mappings":"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"}

package/dist/charts/components/LegacyDonut/ActiveShape.cjs

@@ -23,8 +23,10 @@ function _interopNamespaceDefault(e) {
 }
 const RechartsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(RechartsPrimitive);
 const ActiveShape = (props) => {
-  const { cx, cy, id, innerRadius, onClick, outerRadius = 0, pieColors, startAngle, endAngle, fill } = props;
-  return /* @__PURE__ */ React.createElement("g", { onClick: () => onClick(id), className: cn({ "cursor-pointer": !!onClick }) }, /* @__PURE__ */ React.createElement(
+  const { activeColorById, cx, cy, innerRadius, onClick, outerRadius = 0, payload, startAngle, endAngle, fill } = props;
+  const id = payload?.id;
+  const isActive = id !== void 0 && Object.prototype.hasOwnProperty.call(activeColorById, id);
+  return /* @__PURE__ */ React.createElement("g", { onClick: () => onClick?.(id), className: cn({ "cursor-pointer": !!onClick }) }, /* @__PURE__ */ React.createElement(
     RechartsPrimitive__namespace.Sector,
     {
       cx,
@@ -35,7 +37,7 @@ const ActiveShape = (props) => {
       endAngle,
       fill
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), isActive ? /* @__PURE__ */ React.createElement(
     RechartsPrimitive__namespace.Sector,
     {
       cx,
@@ -44,10 +46,10 @@ const ActiveShape = (props) => {
       endAngle,
       innerRadius: outerRadius + 2,
       outerRadius: outerRadius + util.HOVER_DONUT_WIDTH,
-      fill: id === void 0 ? color.getThemeColor("blue-500") : color.getThemeColor(pieColors[id], "blue-500"),
+      fill: color.getThemeColor(activeColorById[id], "blue-500"),
       opacity: 0.4
     }
-  ));
+  ) : null);
 };
 exports.ActiveShape = ActiveShape;
 //# sourceMappingURL=ActiveShape.cjs.map

package/dist/charts/components/LegacyDonut/ActiveShape.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveShape.cjs","sources":["../../../../src/charts/components/LegacyDonut/ActiveShape.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as Recharts from 'recharts';\nimport type { PieSectorDataItem } from 'recharts/types/polar/Pie';\n\nimport { getThemeColor } from '../../utils/color';\n\nimport { HOVER_DONUT_WIDTH } from './util';\n\ntype ActiveShapeProps = Omit<PieSectorDataItem, 'onClick'> & {\n    onClick: (id: string | undefined) => void;\n    pieColors: Record<string, string>;\n};\n\nexport const ActiveShape = (props: ActiveShapeProps) => {\n    const { cx, cy, id, innerRadius, onClick, outerRadius = 0, pieColors, startAngle, endAngle, fill } = props;\n\n    return (\n        <g onClick={() => onClick(id)} className={cn({ 'cursor-pointer': !!onClick })}>\n            <Recharts.Sector\n                cx={cx}\n                cy={cy}\n                innerRadius={innerRadius}\n                outerRadius={outerRadius}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                fill={fill}\n            />\n            <Recharts.Sector\n                cx={cx}\n                cy={cy}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                innerRadius={outerRadius + 2}\n                outerRadius={outerRadius + HOVER_DONUT_WIDTH}\n                fill={id === undefined ? getThemeColor('blue-500') : getThemeColor(pieColors[id], 'blue-500')}\n                opacity={0.4}\n            />\n        </g>\n    );\n};\n"],"names":["Recharts","HOVER_DONUT_WIDTH","getThemeColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,cAAc,CAAC,UAA4B;AACpD,QAAM,EAAE,IAAI,IAAI,IAAI,aAAa,SAAS,cAAc,GAAG,WAAW,YAAY,UAAU,KAAA,IAAS;AAErG,SACI,sBAAA,cAAC,KAAA,EAAE,SAAS,MAAM,QAAQ,EAAE,GAAG,WAAW,GAAG,EAAE,kBAAkB,CAAC,CAAC,QAAA,CAAS,EAAA,GACxE,sBAAA;AAAA,IAACA,6BAAS;AAAA,IAAT;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA,GAEJ,sBAAA;AAAA,IAACA,6BAAS;AAAA,IAAT;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,cAAc;AAAA,MAC3B,aAAa,cAAcC,KAAAA;AAAAA,MAC3B,MAAM,OAAO,SAAYC,oBAAc,UAAU,IAAIA,MAAAA,cAAc,UAAU,EAAE,GAAG,UAAU;AAAA,MAC5F,SAAS;AAAA,IAAA;AAAA,EAAA,CAEjB;AAER;;"}
+{"version":3,"file":"ActiveShape.cjs","sources":["../../../../src/charts/components/LegacyDonut/ActiveShape.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as Recharts from 'recharts';\nimport type { PieSectorDataItem } from 'recharts/types/polar/Pie';\n\nimport { getThemeColor } from '../../utils/color';\n\nimport { HOVER_DONUT_WIDTH } from './util';\n\ntype ActiveShapeProps = Partial<Omit<PieSectorDataItem, 'onClick' | 'payload'>> & {\n    // v3 removed Pie's `activeIndex`, so the highlight is no longer driven by recharts. Instead this shape\n    // renders every sector and draws the outer highlight ring itself when the sector's id is active.\n    activeColorById: Record<string, string>;\n    onClick?: (id: string | undefined) => void;\n    payload?: { id?: string };\n};\n\nexport const ActiveShape = (props: ActiveShapeProps) => {\n    const { activeColorById, cx, cy, innerRadius, onClick, outerRadius = 0, payload, startAngle, endAngle, fill } = props;\n    const id = payload?.id;\n    const isActive = id !== undefined && Object.prototype.hasOwnProperty.call(activeColorById, id);\n\n    return (\n        <g onClick={() => onClick?.(id)} className={cn({ 'cursor-pointer': !!onClick })}>\n            <Recharts.Sector\n                cx={cx}\n                cy={cy}\n                innerRadius={innerRadius}\n                outerRadius={outerRadius}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                fill={fill}\n            />\n            {isActive ? (\n                <Recharts.Sector\n                    cx={cx}\n                    cy={cy}\n                    startAngle={startAngle}\n                    endAngle={endAngle}\n                    innerRadius={outerRadius + 2}\n                    outerRadius={outerRadius + HOVER_DONUT_WIDTH}\n                    fill={getThemeColor(activeColorById[id], 'blue-500')}\n                    opacity={0.4}\n                />\n            ) : null}\n        </g>\n    );\n};\n"],"names":["Recharts","HOVER_DONUT_WIDTH","getThemeColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAM,cAAc,CAAC,UAA4B;AACpD,QAAM,EAAE,iBAAiB,IAAI,IAAI,aAAa,SAAS,cAAc,GAAG,SAAS,YAAY,UAAU,KAAA,IAAS;AAChH,QAAM,KAAK,SAAS;AACpB,QAAM,WAAW,OAAO,UAAa,OAAO,UAAU,eAAe,KAAK,iBAAiB,EAAE;AAE7F,SACI,sBAAA,cAAC,KAAA,EAAE,SAAS,MAAM,UAAU,EAAE,GAAG,WAAW,GAAG,EAAE,kBAAkB,CAAC,CAAC,QAAA,CAAS,EAAA,GAC1E,sBAAA;AAAA,IAACA,6BAAS;AAAA,IAAT;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA,GAEH,WACG,sBAAA;AAAA,IAACA,6BAAS;AAAA,IAAT;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,cAAc;AAAA,MAC3B,aAAa,cAAcC,KAAAA;AAAAA,MAC3B,MAAMC,MAAAA,cAAc,gBAAgB,EAAE,GAAG,UAAU;AAAA,MACnD,SAAS;AAAA,IAAA;AAAA,EAAA,IAEb,IACR;AAER;;"}

package/dist/charts/components/LegacyDonut/ActiveShape.d.ts

@@ -1,8 +1,11 @@
 import { default as React } from 'react';
 import { PieSectorDataItem } from 'recharts/types/polar/Pie';
-type ActiveShapeProps = Omit<PieSectorDataItem, 'onClick'> & {
-    onClick: (id: string | undefined) => void;
-    pieColors: Record<string, string>;
+type ActiveShapeProps = Partial<Omit<PieSectorDataItem, 'onClick' | 'payload'>> & {
+    activeColorById: Record<string, string>;
+    onClick?: (id: string | undefined) => void;
+    payload?: {
+        id?: string;
+    };
 };
 export declare const ActiveShape: (props: ActiveShapeProps) => React.JSX.Element;
 export {};

package/dist/charts/components/LegacyDonut/ActiveShape.js

@@ -4,8 +4,10 @@ import * as RechartsPrimitive from "recharts";
 import { getThemeColor } from "../../utils/color.js";
 import { HOVER_DONUT_WIDTH } from "./util.js";
 const ActiveShape = (props) => {
-  const { cx, cy, id, innerRadius, onClick, outerRadius = 0, pieColors, startAngle, endAngle, fill } = props;
-  return /* @__PURE__ */ React__default.createElement("g", { onClick: () => onClick(id), className: cn({ "cursor-pointer": !!onClick }) }, /* @__PURE__ */ React__default.createElement(
+  const { activeColorById, cx, cy, innerRadius, onClick, outerRadius = 0, payload, startAngle, endAngle, fill } = props;
+  const id = payload?.id;
+  const isActive = id !== void 0 && Object.prototype.hasOwnProperty.call(activeColorById, id);
+  return /* @__PURE__ */ React__default.createElement("g", { onClick: () => onClick?.(id), className: cn({ "cursor-pointer": !!onClick }) }, /* @__PURE__ */ React__default.createElement(
     RechartsPrimitive.Sector,
     {
       cx,
@@ -16,7 +18,7 @@ const ActiveShape = (props) => {
       endAngle,
       fill
     }
-  ), /* @__PURE__ */ React__default.createElement(
+  ), isActive ? /* @__PURE__ */ React__default.createElement(
     RechartsPrimitive.Sector,
     {
       cx,
@@ -25,10 +27,10 @@ const ActiveShape = (props) => {
       endAngle,
       innerRadius: outerRadius + 2,
       outerRadius: outerRadius + HOVER_DONUT_WIDTH,
-      fill: id === void 0 ? getThemeColor("blue-500") : getThemeColor(pieColors[id], "blue-500"),
+      fill: getThemeColor(activeColorById[id], "blue-500"),
       opacity: 0.4
     }
-  ));
+  ) : null);
 };
 export {
   ActiveShape

package/dist/charts/components/LegacyDonut/ActiveShape.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveShape.js","sources":["../../../../src/charts/components/LegacyDonut/ActiveShape.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as Recharts from 'recharts';\nimport type { PieSectorDataItem } from 'recharts/types/polar/Pie';\n\nimport { getThemeColor } from '../../utils/color';\n\nimport { HOVER_DONUT_WIDTH } from './util';\n\ntype ActiveShapeProps = Omit<PieSectorDataItem, 'onClick'> & {\n    onClick: (id: string | undefined) => void;\n    pieColors: Record<string, string>;\n};\n\nexport const ActiveShape = (props: ActiveShapeProps) => {\n    const { cx, cy, id, innerRadius, onClick, outerRadius = 0, pieColors, startAngle, endAngle, fill } = props;\n\n    return (\n        <g onClick={() => onClick(id)} className={cn({ 'cursor-pointer': !!onClick })}>\n            <Recharts.Sector\n                cx={cx}\n                cy={cy}\n                innerRadius={innerRadius}\n                outerRadius={outerRadius}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                fill={fill}\n            />\n            <Recharts.Sector\n                cx={cx}\n                cy={cy}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                innerRadius={outerRadius + 2}\n                outerRadius={outerRadius + HOVER_DONUT_WIDTH}\n                fill={id === undefined ? getThemeColor('blue-500') : getThemeColor(pieColors[id], 'blue-500')}\n                opacity={0.4}\n            />\n        </g>\n    );\n};\n"],"names":["React","Recharts"],"mappings":";;;;;AAcO,MAAM,cAAc,CAAC,UAA4B;AACpD,QAAM,EAAE,IAAI,IAAI,IAAI,aAAa,SAAS,cAAc,GAAG,WAAW,YAAY,UAAU,KAAA,IAAS;AAErG,SACIA,+BAAA,cAAC,KAAA,EAAE,SAAS,MAAM,QAAQ,EAAE,GAAG,WAAW,GAAG,EAAE,kBAAkB,CAAC,CAAC,QAAA,CAAS,EAAA,GACxEA,+BAAA;AAAA,IAACC,kBAAS;AAAA,IAAT;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA,GAEJD,+BAAA;AAAA,IAACC,kBAAS;AAAA,IAAT;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,cAAc;AAAA,MAC3B,aAAa,cAAc;AAAA,MAC3B,MAAM,OAAO,SAAY,cAAc,UAAU,IAAI,cAAc,UAAU,EAAE,GAAG,UAAU;AAAA,MAC5F,SAAS;AAAA,IAAA;AAAA,EAAA,CAEjB;AAER;"}
+{"version":3,"file":"ActiveShape.js","sources":["../../../../src/charts/components/LegacyDonut/ActiveShape.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as Recharts from 'recharts';\nimport type { PieSectorDataItem } from 'recharts/types/polar/Pie';\n\nimport { getThemeColor } from '../../utils/color';\n\nimport { HOVER_DONUT_WIDTH } from './util';\n\ntype ActiveShapeProps = Partial<Omit<PieSectorDataItem, 'onClick' | 'payload'>> & {\n    // v3 removed Pie's `activeIndex`, so the highlight is no longer driven by recharts. Instead this shape\n    // renders every sector and draws the outer highlight ring itself when the sector's id is active.\n    activeColorById: Record<string, string>;\n    onClick?: (id: string | undefined) => void;\n    payload?: { id?: string };\n};\n\nexport const ActiveShape = (props: ActiveShapeProps) => {\n    const { activeColorById, cx, cy, innerRadius, onClick, outerRadius = 0, payload, startAngle, endAngle, fill } = props;\n    const id = payload?.id;\n    const isActive = id !== undefined && Object.prototype.hasOwnProperty.call(activeColorById, id);\n\n    return (\n        <g onClick={() => onClick?.(id)} className={cn({ 'cursor-pointer': !!onClick })}>\n            <Recharts.Sector\n                cx={cx}\n                cy={cy}\n                innerRadius={innerRadius}\n                outerRadius={outerRadius}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                fill={fill}\n            />\n            {isActive ? (\n                <Recharts.Sector\n                    cx={cx}\n                    cy={cy}\n                    startAngle={startAngle}\n                    endAngle={endAngle}\n                    innerRadius={outerRadius + 2}\n                    outerRadius={outerRadius + HOVER_DONUT_WIDTH}\n                    fill={getThemeColor(activeColorById[id], 'blue-500')}\n                    opacity={0.4}\n                />\n            ) : null}\n        </g>\n    );\n};\n"],"names":["React","Recharts"],"mappings":";;;;;AAiBO,MAAM,cAAc,CAAC,UAA4B;AACpD,QAAM,EAAE,iBAAiB,IAAI,IAAI,aAAa,SAAS,cAAc,GAAG,SAAS,YAAY,UAAU,KAAA,IAAS;AAChH,QAAM,KAAK,SAAS;AACpB,QAAM,WAAW,OAAO,UAAa,OAAO,UAAU,eAAe,KAAK,iBAAiB,EAAE;AAE7F,SACIA,+BAAA,cAAC,KAAA,EAAE,SAAS,MAAM,UAAU,EAAE,GAAG,WAAW,GAAG,EAAE,kBAAkB,CAAC,CAAC,QAAA,CAAS,EAAA,GAC1EA,+BAAA;AAAA,IAACC,kBAAS;AAAA,IAAT;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA,GAEH,WACGD,+BAAA;AAAA,IAACC,kBAAS;AAAA,IAAT;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,cAAc;AAAA,MAC3B,aAAa,cAAc;AAAA,MAC3B,MAAM,cAAc,gBAAgB,EAAE,GAAG,UAAU;AAAA,MACnD,SAAS;AAAA,IAAA;AAAA,EAAA,IAEb,IACR;AAER;"}

package/dist/charts/components/LegacyDonut/LegacyDonutChart.cjs

@@ -80,12 +80,6 @@ const LegacyDonutChart = function LegacyDonutChart2({ children, formatter, onCli
   if (ref.current && !radius) {
     return null;
   }
-  const getActiveIndex = () => {
-    if (hoveredItem.length > 0) {
-      return hoveredItem.map((itemId) => data.findIndex((element) => element.id === itemId));
-    }
-    return selectedItem.map((selectedItemId) => data.findIndex((element) => element.id === selectedItemId));
-  };
   const content = () => {
     const elements = React.Children.toArray(children).filter(
       (child) => React.isValidElement(child)
@@ -105,12 +99,23 @@ const LegacyDonutChart = function LegacyDonutChart2({ children, formatter, onCli
     RechartsPrimitive__namespace.Pie,
     {
       isAnimationActive: false,
-      activeIndex: getActiveIndex(),
-      activeShape: /* @__PURE__ */ React.createElement(ActiveShape.ActiveShape, { pieColors: activeShapeColor, onClick: handlePieClick }),
+      shape: (sectorProps) => /* @__PURE__ */ React.createElement(
+        ActiveShape.ActiveShape,
+        {
+          ...sectorProps,
+          activeColorById: activeShapeColor,
+          onClick: onClick ? handlePieClick : void 0
+        }
+      ),
       data: data.length > 0 ? data : [],
       dataKey: "value",
       innerRadius: radius - util.HOVER_DONUT_WIDTH - util.DONUT_WIDTH,
-      onMouseEnter: (segment) => data.length > 0 && setHoveredItem([segment.id]),
+      onMouseEnter: (segment) => {
+        const id = segment.payload?.id;
+        if (data.length > 0 && id !== void 0) {
+          setHoveredItem([id]);
+        }
+      },
       onMouseLeave: () => setHoveredItem([]),
       outerRadius: radius - util.HOVER_DONUT_WIDTH,
       paddingAngle: 2.5,

package/dist/charts/components/LegacyDonut/LegacyDonutChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LegacyDonutChart.cjs","sources":["../../../../src/charts/components/LegacyDonut/LegacyDonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\n\nimport type { Color } from '../../utils/color';\nimport { getThemeColor } from '../../utils/color';\n\nimport { ActiveShape } from './ActiveShape';\nimport { CenteredLabel } from './CenteredLabel';\nimport { Legend } from './Legend';\nimport { DONUT_WIDTH, HOVER_DONUT_WIDTH } from './util';\n\nconst Segment = (_: LegacyDonutChartSegmentProps) => null;\n\nexport type LegacyDonutChartSegmentProps = {\n    color: Color;\n    id: string;\n    label: string;\n    value: number;\n};\n\nexport type LegacyDonutSegmentIds = string[];\n\nexport type LegacyDonutChartProps = {\n    children: React.ReactElement<LegacyDonutChartSegmentProps> | React.ReactElement<LegacyDonutChartSegmentProps>[];\n    formatter?: (value: number) => string;\n    onClick?: (segment: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]) => void;\n    label: string;\n};\n\nexport const LegacyDonutChart = function LegacyDonutChart({ children, formatter, onClick, label }: LegacyDonutChartProps) {\n    const ref = React.useRef<HTMLDivElement>(null);\n    const [radius, setRadius] = React.useState<number>(0);\n\n    const [hoveredItem, setHoveredItem] = React.useState<LegacyDonutSegmentIds>([]);\n    const [selectedItem, setSelectedItem] = React.useState<LegacyDonutSegmentIds>([]);\n\n    React.useEffect(() => {\n        if (ref.current) {\n            const rect = ref.current.parentElement?.getBoundingClientRect();\n\n            if (rect) {\n                const width = rect.width / 2;\n                const max: number = rect.height < width ? rect.height : width;\n                setRadius(max / 2);\n            }\n        }\n    }, [ref.current]);\n\n    const diameter = radius * 2; // get dimensions of the parent container to find the max radius, so we can fill the container AND always have a 16px wide donut\n    const data: LegacyDonutChartSegmentProps[] = React.Children.map(children, child => ({\n        id: child.props.id,\n        color: child.props.color,\n        label: child.props.label,\n        value: child.props.value,\n    }));\n\n    const total = data.reduce((accum, entry) => accum + entry.value, 0);\n\n    const handleLegendClick = (entry: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]): void => {\n        const nextSelectedItem = Array.isArray(entry) ? entry.map(entryItem => entryItem.id) : [entry.id];\n\n        // Using slice to avoid mutation of the react state 'selectedItem'\n        const isCurrentSegmentActive = selectedItem.slice().sort().join(',') === nextSelectedItem.sort().join(',');\n\n        if (onClick && !isCurrentSegmentActive) {\n            onClick(entry);\n        }\n\n        setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);\n    };\n    const handlePieClick = React.useCallback(\n        (pieId: string | undefined) => {\n            if (onClick && pieId !== undefined) {\n                const pieProps = data.find(item => item.id === pieId);\n\n                onClick(pieProps as LegacyDonutChartSegmentProps);\n            }\n        },\n        [onClick, data]\n    );\n\n    const activeShapeColor = React.useMemo(() => {\n        const getSegmentColor = (item: LegacyDonutSegmentIds) =>\n            item.reduce<Record<string, string>>((colors, itemId) => {\n                const visibleHoveredItem = data.find(dataItem => dataItem.id === itemId);\n\n                if (visibleHoveredItem) {\n                    colors[visibleHoveredItem.id] = visibleHoveredItem.color;\n                }\n\n                return colors;\n            }, {});\n\n        const hoveredSegmentColor = getSegmentColor(hoveredItem);\n        const selectedSegmentColor = getSegmentColor(selectedItem);\n\n        return hoveredItem.length === 0 ? selectedSegmentColor : hoveredSegmentColor;\n    }, [hoveredItem, selectedItem]);\n\n    if (ref.current && !radius) {\n        return null;\n    }\n\n    const getActiveIndex = () => {\n        if (hoveredItem.length > 0) {\n            return hoveredItem.map(itemId => data.findIndex(element => element.id === itemId));\n        }\n\n        return selectedItem.map(selectedItemId => data.findIndex(element => element.id === selectedItemId));\n    };\n\n    const content = () => {\n        const elements = React.Children.toArray(children).filter(\n            (child): child is React.ReactElement<LegacyDonutChartSegmentProps> =>\n                React.isValidElement<LegacyDonutChartSegmentProps>(child)\n        );\n\n        return elements.length > 0 ? (\n            elements.map((child, index) => {\n                return (\n                    <Recharts.Cell\n                        key={`cell-${index}`}\n                        name={child.props.label}\n                        fill={getThemeColor(child.props.color) ?? getThemeColor('blue-300')}\n                    />\n                );\n            })\n        ) : (\n            <Recharts.Cell key=\"empty-chart\" name={''} fill={getThemeColor('grey-200')} />\n        );\n    };\n\n    return (\n        <div className=\"relative flex h-full w-full\" ref={ref}>\n            <CenteredLabel radius={radius} label={label} total={total} formatter={formatter} />\n            <Recharts.PieChart data={data} height={diameter} width={diameter} style={{ transform: 'rotate(90deg) scale(-1,1)' }}>\n                <Recharts.Pie\n                    isAnimationActive={false}\n                    activeIndex={getActiveIndex()}\n                    activeShape={<ActiveShape pieColors={activeShapeColor} onClick={handlePieClick} />}\n                    data={data.length > 0 ? data : []}\n                    dataKey=\"value\"\n                    innerRadius={radius - HOVER_DONUT_WIDTH - DONUT_WIDTH} // offset the 12px wider hover state, and then make the donut 16px wide\n                    onMouseEnter={(segment: LegacyDonutChartSegmentProps) => data.length > 0 && setHoveredItem([segment.id])}\n                    onMouseLeave={() => setHoveredItem([])}\n                    outerRadius={radius - HOVER_DONUT_WIDTH} // offset the 12px wide hover state\n                    paddingAngle={2.5}\n                    stroke=\"0\"\n                    // Prevents the pie group element from being focusable\n                    rootTabIndex={-1}>\n                    {content()}\n                </Recharts.Pie>\n            </Recharts.PieChart>\n            <Legend\n                data={data}\n                onClick={handleLegendClick}\n                total={total}\n                setHoveredItem={setHoveredItem}\n                label={label}\n                hoveredItem={hoveredItem}\n                selectedItem={selectedItem}\n                formatter={formatter}\n            />\n        </div>\n    );\n};\n\nLegacyDonutChart.Segment = Segment;\n"],"names":["LegacyDonutChart","Recharts","getThemeColor","CenteredLabel","ActiveShape","HOVER_DONUT_WIDTH","DONUT_WIDTH","Legend"],"mappings":"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"}
+{"version":3,"file":"LegacyDonutChart.cjs","sources":["../../../../src/charts/components/LegacyDonut/LegacyDonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\n\nimport type { Color } from '../../utils/color';\nimport { getThemeColor } from '../../utils/color';\n\nimport { ActiveShape } from './ActiveShape';\nimport { CenteredLabel } from './CenteredLabel';\nimport { Legend } from './Legend';\nimport { DONUT_WIDTH, HOVER_DONUT_WIDTH } from './util';\n\nconst Segment = (_: LegacyDonutChartSegmentProps) => null;\n\n/**\n * @deprecated\n */\nexport type LegacyDonutChartSegmentProps = {\n    color: Color;\n    id: string;\n    label: string;\n    value: number;\n};\n\n/**\n * @deprecated\n */\nexport type LegacyDonutSegmentIds = string[];\n\n/**\n * @deprecated\n */\nexport type LegacyDonutChartProps = {\n    children: React.ReactElement<LegacyDonutChartSegmentProps> | React.ReactElement<LegacyDonutChartSegmentProps>[];\n    formatter?: (value: number) => string;\n    onClick?: (segment: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]) => void;\n    label: string;\n};\n\n/**\n * @deprecated\n */\nexport const LegacyDonutChart = function LegacyDonutChart({ children, formatter, onClick, label }: LegacyDonutChartProps) {\n    const ref = React.useRef<HTMLDivElement>(null);\n    const [radius, setRadius] = React.useState<number>(0);\n\n    const [hoveredItem, setHoveredItem] = React.useState<LegacyDonutSegmentIds>([]);\n    const [selectedItem, setSelectedItem] = React.useState<LegacyDonutSegmentIds>([]);\n\n    React.useEffect(() => {\n        if (ref.current) {\n            const rect = ref.current.parentElement?.getBoundingClientRect();\n\n            if (rect) {\n                const width = rect.width / 2;\n                const max: number = rect.height < width ? rect.height : width;\n                setRadius(max / 2);\n            }\n        }\n    }, [ref.current]);\n\n    const diameter = radius * 2; // get dimensions of the parent container to find the max radius, so we can fill the container AND always have a 16px wide donut\n    const data: LegacyDonutChartSegmentProps[] = React.Children.map(children, child => ({\n        id: child.props.id,\n        color: child.props.color,\n        label: child.props.label,\n        value: child.props.value,\n    }));\n\n    const total = data.reduce((accum, entry) => accum + entry.value, 0);\n\n    const handleLegendClick = (entry: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]): void => {\n        const nextSelectedItem = Array.isArray(entry) ? entry.map(entryItem => entryItem.id) : [entry.id];\n\n        // Using slice to avoid mutation of the react state 'selectedItem'\n        const isCurrentSegmentActive = selectedItem.slice().sort().join(',') === nextSelectedItem.sort().join(',');\n\n        if (onClick && !isCurrentSegmentActive) {\n            onClick(entry);\n        }\n\n        setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);\n    };\n    const handlePieClick = React.useCallback(\n        (pieId: string | undefined) => {\n            if (onClick && pieId !== undefined) {\n                const pieProps = data.find(item => item.id === pieId);\n\n                onClick(pieProps as LegacyDonutChartSegmentProps);\n            }\n        },\n        [onClick, data]\n    );\n\n    const activeShapeColor = React.useMemo(() => {\n        const getSegmentColor = (item: LegacyDonutSegmentIds) =>\n            item.reduce<Record<string, string>>((colors, itemId) => {\n                const visibleHoveredItem = data.find(dataItem => dataItem.id === itemId);\n\n                if (visibleHoveredItem) {\n                    colors[visibleHoveredItem.id] = visibleHoveredItem.color;\n                }\n\n                return colors;\n            }, {});\n\n        const hoveredSegmentColor = getSegmentColor(hoveredItem);\n        const selectedSegmentColor = getSegmentColor(selectedItem);\n\n        return hoveredItem.length === 0 ? selectedSegmentColor : hoveredSegmentColor;\n    }, [hoveredItem, selectedItem]);\n\n    if (ref.current && !radius) {\n        return null;\n    }\n\n    const content = () => {\n        const elements = React.Children.toArray(children).filter(\n            (child): child is React.ReactElement<LegacyDonutChartSegmentProps> =>\n                React.isValidElement<LegacyDonutChartSegmentProps>(child)\n        );\n\n        return elements.length > 0 ? (\n            elements.map((child, index) => {\n                return (\n                    <Recharts.Cell\n                        key={`cell-${index}`}\n                        name={child.props.label}\n                        fill={getThemeColor(child.props.color) ?? getThemeColor('blue-300')}\n                    />\n                );\n            })\n        ) : (\n            <Recharts.Cell key=\"empty-chart\" name={''} fill={getThemeColor('grey-200')} />\n        );\n    };\n\n    return (\n        <div className=\"relative flex h-full w-full\" ref={ref}>\n            <CenteredLabel radius={radius} label={label} total={total} formatter={formatter} />\n            <Recharts.PieChart data={data} height={diameter} width={diameter} style={{ transform: 'rotate(90deg) scale(-1,1)' }}>\n                <Recharts.Pie\n                    isAnimationActive={false}\n                    shape={sectorProps => (\n                        <ActiveShape\n                            {...sectorProps}\n                            activeColorById={activeShapeColor}\n                            onClick={onClick ? handlePieClick : undefined}\n                        />\n                    )}\n                    data={data.length > 0 ? data : []}\n                    dataKey=\"value\"\n                    innerRadius={radius - HOVER_DONUT_WIDTH - DONUT_WIDTH} // offset the 12px wider hover state, and then make the donut 16px wide\n                    onMouseEnter={segment => {\n                        const id = segment.payload?.id;\n\n                        if (data.length > 0 && id !== undefined) {\n                            setHoveredItem([id]);\n                        }\n                    }}\n                    onMouseLeave={() => setHoveredItem([])}\n                    outerRadius={radius - HOVER_DONUT_WIDTH} // offset the 12px wide hover state\n                    paddingAngle={2.5}\n                    stroke=\"0\"\n                    // Prevents the pie group element from being focusable\n                    rootTabIndex={-1}>\n                    {content()}\n                </Recharts.Pie>\n            </Recharts.PieChart>\n            <Legend\n                data={data}\n                onClick={handleLegendClick}\n                total={total}\n                setHoveredItem={setHoveredItem}\n                label={label}\n                hoveredItem={hoveredItem}\n                selectedItem={selectedItem}\n                formatter={formatter}\n            />\n        </div>\n    );\n};\n\nLegacyDonutChart.Segment = Segment;\n"],"names":["LegacyDonutChart","Recharts","getThemeColor","CenteredLabel","ActiveShape","HOVER_DONUT_WIDTH","DONUT_WIDTH","Legend"],"mappings":"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"}

package/dist/charts/components/LegacyDonut/LegacyDonutChart.d.ts

@@ -1,18 +1,30 @@
 import { default as React } from 'react';
 import { Color } from '../../utils/color';
+/**
+ * @deprecated
+ */
 export type LegacyDonutChartSegmentProps = {
     color: Color;
     id: string;
     label: string;
     value: number;
 };
+/**
+ * @deprecated
+ */
 export type LegacyDonutSegmentIds = string[];
+/**
+ * @deprecated
+ */
 export type LegacyDonutChartProps = {
     children: React.ReactElement<LegacyDonutChartSegmentProps> | React.ReactElement<LegacyDonutChartSegmentProps>[];
     formatter?: (value: number) => string;
     onClick?: (segment: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]) => void;
     label: string;
 };
+/**
+ * @deprecated
+ */
 export declare const LegacyDonutChart: {
     ({ children, formatter, onClick, label }: LegacyDonutChartProps): React.JSX.Element | null;
     Segment: (_: LegacyDonutChartSegmentProps) => null;

package/dist/charts/components/LegacyDonut/LegacyDonutChart.js

@@ -61,12 +61,6 @@ const LegacyDonutChart = function LegacyDonutChart2({ children, formatter, onCli
   if (ref.current && !radius) {
     return null;
   }
-  const getActiveIndex = () => {
-    if (hoveredItem.length > 0) {
-      return hoveredItem.map((itemId) => data.findIndex((element) => element.id === itemId));
-    }
-    return selectedItem.map((selectedItemId) => data.findIndex((element) => element.id === selectedItemId));
-  };
   const content = () => {
     const elements = React__default.Children.toArray(children).filter(
       (child) => React__default.isValidElement(child)
@@ -86,12 +80,23 @@ const LegacyDonutChart = function LegacyDonutChart2({ children, formatter, onCli
     RechartsPrimitive.Pie,
     {
       isAnimationActive: false,
-      activeIndex: getActiveIndex(),
-      activeShape: /* @__PURE__ */ React__default.createElement(ActiveShape, { pieColors: activeShapeColor, onClick: handlePieClick }),
+      shape: (sectorProps) => /* @__PURE__ */ React__default.createElement(
+        ActiveShape,
+        {
+          ...sectorProps,
+          activeColorById: activeShapeColor,
+          onClick: onClick ? handlePieClick : void 0
+        }
+      ),
       data: data.length > 0 ? data : [],
       dataKey: "value",
       innerRadius: radius - HOVER_DONUT_WIDTH - DONUT_WIDTH,
-      onMouseEnter: (segment) => data.length > 0 && setHoveredItem([segment.id]),
+      onMouseEnter: (segment) => {
+        const id = segment.payload?.id;
+        if (data.length > 0 && id !== void 0) {
+          setHoveredItem([id]);
+        }
+      },
       onMouseLeave: () => setHoveredItem([]),
       outerRadius: radius - HOVER_DONUT_WIDTH,
       paddingAngle: 2.5,

package/dist/charts/components/LegacyDonut/LegacyDonutChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"LegacyDonutChart.js","sources":["../../../../src/charts/components/LegacyDonut/LegacyDonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\n\nimport type { Color } from '../../utils/color';\nimport { getThemeColor } from '../../utils/color';\n\nimport { ActiveShape } from './ActiveShape';\nimport { CenteredLabel } from './CenteredLabel';\nimport { Legend } from './Legend';\nimport { DONUT_WIDTH, HOVER_DONUT_WIDTH } from './util';\n\nconst Segment = (_: LegacyDonutChartSegmentProps) => null;\n\nexport type LegacyDonutChartSegmentProps = {\n    color: Color;\n    id: string;\n    label: string;\n    value: number;\n};\n\nexport type LegacyDonutSegmentIds = string[];\n\nexport type LegacyDonutChartProps = {\n    children: React.ReactElement<LegacyDonutChartSegmentProps> | React.ReactElement<LegacyDonutChartSegmentProps>[];\n    formatter?: (value: number) => string;\n    onClick?: (segment: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]) => void;\n    label: string;\n};\n\nexport const LegacyDonutChart = function LegacyDonutChart({ children, formatter, onClick, label }: LegacyDonutChartProps) {\n    const ref = React.useRef<HTMLDivElement>(null);\n    const [radius, setRadius] = React.useState<number>(0);\n\n    const [hoveredItem, setHoveredItem] = React.useState<LegacyDonutSegmentIds>([]);\n    const [selectedItem, setSelectedItem] = React.useState<LegacyDonutSegmentIds>([]);\n\n    React.useEffect(() => {\n        if (ref.current) {\n            const rect = ref.current.parentElement?.getBoundingClientRect();\n\n            if (rect) {\n                const width = rect.width / 2;\n                const max: number = rect.height < width ? rect.height : width;\n                setRadius(max / 2);\n            }\n        }\n    }, [ref.current]);\n\n    const diameter = radius * 2; // get dimensions of the parent container to find the max radius, so we can fill the container AND always have a 16px wide donut\n    const data: LegacyDonutChartSegmentProps[] = React.Children.map(children, child => ({\n        id: child.props.id,\n        color: child.props.color,\n        label: child.props.label,\n        value: child.props.value,\n    }));\n\n    const total = data.reduce((accum, entry) => accum + entry.value, 0);\n\n    const handleLegendClick = (entry: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]): void => {\n        const nextSelectedItem = Array.isArray(entry) ? entry.map(entryItem => entryItem.id) : [entry.id];\n\n        // Using slice to avoid mutation of the react state 'selectedItem'\n        const isCurrentSegmentActive = selectedItem.slice().sort().join(',') === nextSelectedItem.sort().join(',');\n\n        if (onClick && !isCurrentSegmentActive) {\n            onClick(entry);\n        }\n\n        setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);\n    };\n    const handlePieClick = React.useCallback(\n        (pieId: string | undefined) => {\n            if (onClick && pieId !== undefined) {\n                const pieProps = data.find(item => item.id === pieId);\n\n                onClick(pieProps as LegacyDonutChartSegmentProps);\n            }\n        },\n        [onClick, data]\n    );\n\n    const activeShapeColor = React.useMemo(() => {\n        const getSegmentColor = (item: LegacyDonutSegmentIds) =>\n            item.reduce<Record<string, string>>((colors, itemId) => {\n                const visibleHoveredItem = data.find(dataItem => dataItem.id === itemId);\n\n                if (visibleHoveredItem) {\n                    colors[visibleHoveredItem.id] = visibleHoveredItem.color;\n                }\n\n                return colors;\n            }, {});\n\n        const hoveredSegmentColor = getSegmentColor(hoveredItem);\n        const selectedSegmentColor = getSegmentColor(selectedItem);\n\n        return hoveredItem.length === 0 ? selectedSegmentColor : hoveredSegmentColor;\n    }, [hoveredItem, selectedItem]);\n\n    if (ref.current && !radius) {\n        return null;\n    }\n\n    const getActiveIndex = () => {\n        if (hoveredItem.length > 0) {\n            return hoveredItem.map(itemId => data.findIndex(element => element.id === itemId));\n        }\n\n        return selectedItem.map(selectedItemId => data.findIndex(element => element.id === selectedItemId));\n    };\n\n    const content = () => {\n        const elements = React.Children.toArray(children).filter(\n            (child): child is React.ReactElement<LegacyDonutChartSegmentProps> =>\n                React.isValidElement<LegacyDonutChartSegmentProps>(child)\n        );\n\n        return elements.length > 0 ? (\n            elements.map((child, index) => {\n                return (\n                    <Recharts.Cell\n                        key={`cell-${index}`}\n                        name={child.props.label}\n                        fill={getThemeColor(child.props.color) ?? getThemeColor('blue-300')}\n                    />\n                );\n            })\n        ) : (\n            <Recharts.Cell key=\"empty-chart\" name={''} fill={getThemeColor('grey-200')} />\n        );\n    };\n\n    return (\n        <div className=\"relative flex h-full w-full\" ref={ref}>\n            <CenteredLabel radius={radius} label={label} total={total} formatter={formatter} />\n            <Recharts.PieChart data={data} height={diameter} width={diameter} style={{ transform: 'rotate(90deg) scale(-1,1)' }}>\n                <Recharts.Pie\n                    isAnimationActive={false}\n                    activeIndex={getActiveIndex()}\n                    activeShape={<ActiveShape pieColors={activeShapeColor} onClick={handlePieClick} />}\n                    data={data.length > 0 ? data : []}\n                    dataKey=\"value\"\n                    innerRadius={radius - HOVER_DONUT_WIDTH - DONUT_WIDTH} // offset the 12px wider hover state, and then make the donut 16px wide\n                    onMouseEnter={(segment: LegacyDonutChartSegmentProps) => data.length > 0 && setHoveredItem([segment.id])}\n                    onMouseLeave={() => setHoveredItem([])}\n                    outerRadius={radius - HOVER_DONUT_WIDTH} // offset the 12px wide hover state\n                    paddingAngle={2.5}\n                    stroke=\"0\"\n                    // Prevents the pie group element from being focusable\n                    rootTabIndex={-1}>\n                    {content()}\n                </Recharts.Pie>\n            </Recharts.PieChart>\n            <Legend\n                data={data}\n                onClick={handleLegendClick}\n                total={total}\n                setHoveredItem={setHoveredItem}\n                label={label}\n                hoveredItem={hoveredItem}\n                selectedItem={selectedItem}\n                formatter={formatter}\n            />\n        </div>\n    );\n};\n\nLegacyDonutChart.Segment = Segment;\n"],"names":["LegacyDonutChart","React","Recharts"],"mappings":"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"}
+{"version":3,"file":"LegacyDonutChart.js","sources":["../../../../src/charts/components/LegacyDonut/LegacyDonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\n\nimport type { Color } from '../../utils/color';\nimport { getThemeColor } from '../../utils/color';\n\nimport { ActiveShape } from './ActiveShape';\nimport { CenteredLabel } from './CenteredLabel';\nimport { Legend } from './Legend';\nimport { DONUT_WIDTH, HOVER_DONUT_WIDTH } from './util';\n\nconst Segment = (_: LegacyDonutChartSegmentProps) => null;\n\n/**\n * @deprecated\n */\nexport type LegacyDonutChartSegmentProps = {\n    color: Color;\n    id: string;\n    label: string;\n    value: number;\n};\n\n/**\n * @deprecated\n */\nexport type LegacyDonutSegmentIds = string[];\n\n/**\n * @deprecated\n */\nexport type LegacyDonutChartProps = {\n    children: React.ReactElement<LegacyDonutChartSegmentProps> | React.ReactElement<LegacyDonutChartSegmentProps>[];\n    formatter?: (value: number) => string;\n    onClick?: (segment: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]) => void;\n    label: string;\n};\n\n/**\n * @deprecated\n */\nexport const LegacyDonutChart = function LegacyDonutChart({ children, formatter, onClick, label }: LegacyDonutChartProps) {\n    const ref = React.useRef<HTMLDivElement>(null);\n    const [radius, setRadius] = React.useState<number>(0);\n\n    const [hoveredItem, setHoveredItem] = React.useState<LegacyDonutSegmentIds>([]);\n    const [selectedItem, setSelectedItem] = React.useState<LegacyDonutSegmentIds>([]);\n\n    React.useEffect(() => {\n        if (ref.current) {\n            const rect = ref.current.parentElement?.getBoundingClientRect();\n\n            if (rect) {\n                const width = rect.width / 2;\n                const max: number = rect.height < width ? rect.height : width;\n                setRadius(max / 2);\n            }\n        }\n    }, [ref.current]);\n\n    const diameter = radius * 2; // get dimensions of the parent container to find the max radius, so we can fill the container AND always have a 16px wide donut\n    const data: LegacyDonutChartSegmentProps[] = React.Children.map(children, child => ({\n        id: child.props.id,\n        color: child.props.color,\n        label: child.props.label,\n        value: child.props.value,\n    }));\n\n    const total = data.reduce((accum, entry) => accum + entry.value, 0);\n\n    const handleLegendClick = (entry: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]): void => {\n        const nextSelectedItem = Array.isArray(entry) ? entry.map(entryItem => entryItem.id) : [entry.id];\n\n        // Using slice to avoid mutation of the react state 'selectedItem'\n        const isCurrentSegmentActive = selectedItem.slice().sort().join(',') === nextSelectedItem.sort().join(',');\n\n        if (onClick && !isCurrentSegmentActive) {\n            onClick(entry);\n        }\n\n        setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);\n    };\n    const handlePieClick = React.useCallback(\n        (pieId: string | undefined) => {\n            if (onClick && pieId !== undefined) {\n                const pieProps = data.find(item => item.id === pieId);\n\n                onClick(pieProps as LegacyDonutChartSegmentProps);\n            }\n        },\n        [onClick, data]\n    );\n\n    const activeShapeColor = React.useMemo(() => {\n        const getSegmentColor = (item: LegacyDonutSegmentIds) =>\n            item.reduce<Record<string, string>>((colors, itemId) => {\n                const visibleHoveredItem = data.find(dataItem => dataItem.id === itemId);\n\n                if (visibleHoveredItem) {\n                    colors[visibleHoveredItem.id] = visibleHoveredItem.color;\n                }\n\n                return colors;\n            }, {});\n\n        const hoveredSegmentColor = getSegmentColor(hoveredItem);\n        const selectedSegmentColor = getSegmentColor(selectedItem);\n\n        return hoveredItem.length === 0 ? selectedSegmentColor : hoveredSegmentColor;\n    }, [hoveredItem, selectedItem]);\n\n    if (ref.current && !radius) {\n        return null;\n    }\n\n    const content = () => {\n        const elements = React.Children.toArray(children).filter(\n            (child): child is React.ReactElement<LegacyDonutChartSegmentProps> =>\n                React.isValidElement<LegacyDonutChartSegmentProps>(child)\n        );\n\n        return elements.length > 0 ? (\n            elements.map((child, index) => {\n                return (\n                    <Recharts.Cell\n                        key={`cell-${index}`}\n                        name={child.props.label}\n                        fill={getThemeColor(child.props.color) ?? getThemeColor('blue-300')}\n                    />\n                );\n            })\n        ) : (\n            <Recharts.Cell key=\"empty-chart\" name={''} fill={getThemeColor('grey-200')} />\n        );\n    };\n\n    return (\n        <div className=\"relative flex h-full w-full\" ref={ref}>\n            <CenteredLabel radius={radius} label={label} total={total} formatter={formatter} />\n            <Recharts.PieChart data={data} height={diameter} width={diameter} style={{ transform: 'rotate(90deg) scale(-1,1)' }}>\n                <Recharts.Pie\n                    isAnimationActive={false}\n                    shape={sectorProps => (\n                        <ActiveShape\n                            {...sectorProps}\n                            activeColorById={activeShapeColor}\n                            onClick={onClick ? handlePieClick : undefined}\n                        />\n                    )}\n                    data={data.length > 0 ? data : []}\n                    dataKey=\"value\"\n                    innerRadius={radius - HOVER_DONUT_WIDTH - DONUT_WIDTH} // offset the 12px wider hover state, and then make the donut 16px wide\n                    onMouseEnter={segment => {\n                        const id = segment.payload?.id;\n\n                        if (data.length > 0 && id !== undefined) {\n                            setHoveredItem([id]);\n                        }\n                    }}\n                    onMouseLeave={() => setHoveredItem([])}\n                    outerRadius={radius - HOVER_DONUT_WIDTH} // offset the 12px wide hover state\n                    paddingAngle={2.5}\n                    stroke=\"0\"\n                    // Prevents the pie group element from being focusable\n                    rootTabIndex={-1}>\n                    {content()}\n                </Recharts.Pie>\n            </Recharts.PieChart>\n            <Legend\n                data={data}\n                onClick={handleLegendClick}\n                total={total}\n                setHoveredItem={setHoveredItem}\n                label={label}\n                hoveredItem={hoveredItem}\n                selectedItem={selectedItem}\n                formatter={formatter}\n            />\n        </div>\n    );\n};\n\nLegacyDonutChart.Segment = Segment;\n"],"names":["LegacyDonutChart","React","Recharts"],"mappings":"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"}

package/dist/charts/components/Pie/util.cjs

@@ -29,7 +29,6 @@ function usePieChart(children, options) {
     _setRadius((width - 2 * (PIE_ACTIVE_WIDTH + PIE_ACTIVE_WIDTH_OFFSET)) / 2);
   }
   const pieProps = {
-    activeIndex,
     activeShape: (props) => /* @__PURE__ */ React.createElement(ActiveShape, { ...props }),
     children: shapes.map((shape) => /* @__PURE__ */ React.createElement(RechartsPrimitive__namespace.Cell, { key: shape.dataKey, color: shape.color, fill: shape.fill })),
     // data props

package/dist/charts/components/Pie/util.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"util.cjs","sources":["../../../../src/charts/components/Pie/util.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport type { PieSectorDataItem } from 'recharts/types/polar/Pie';\n\nimport type { useChartOptions } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst PIE_ACTIVE_WIDTH = 10;\nconst PIE_ACTIVE_WIDTH_OFFSET = 2;\n\nexport function usePieChart<TData extends object>(children: React.ReactNode, options?: useChartOptions) {\n    const { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem } = useChart<TData>(children, options);\n    const [radius, _setRadius] = React.useState<number>(0);\n\n    function setRadius(width: number) {\n        _setRadius((width - 2 * (PIE_ACTIVE_WIDTH + PIE_ACTIVE_WIDTH_OFFSET)) / 2);\n    }\n\n    const pieProps = {\n        activeIndex,\n        activeShape: (props: any) => <ActiveShape {...props} />,\n        children: shapes.map(shape => <RechartsPrimitive.Cell key={shape.dataKey} color={shape.color} fill={shape.fill} />),\n        // data props\n        data: items.filter(item => !item.isHidden),\n        dataKey: 'value',\n        nameKey: 'label',\n        // style props\n        isAnimationActive: false,\n        startAngle: 90,\n        endAngle: -270,\n        stroke: '0',\n        labelLine: false,\n        outerRadius: radius,\n    };\n\n    return { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, globalFormatter, toggleItem, shapes };\n}\n\nconst PIE_CHART_HOVER = 10;\nconst PIE_CHART_HOVER_OFFSET = 2;\n\ntype ActiveShapeProps = {\n    pieColors: Record<string, string>;\n} & PieSectorDataItem;\n\nfunction ActiveShape(props: ActiveShapeProps) {\n    const { outerRadius = 0, ...attributes } = props;\n\n    return (\n        <>\n            <RechartsPrimitive.Sector {...attributes} outerRadius={outerRadius} />\n            <RechartsPrimitive.Sector\n                {...attributes}\n                innerRadius={outerRadius + PIE_CHART_HOVER_OFFSET}\n                outerRadius={outerRadius + PIE_CHART_HOVER}\n                opacity={0.4}\n            />\n        </>\n    );\n}\n"],"names":["useChart","RechartsPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,mBAAmB;AACzB,MAAM,0BAA0B;AAEzB,SAAS,YAAkC,UAA2B,SAA2B;AACpG,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,eAAeA,aAAAA,SAAgB,UAAU,OAAO;AACrH,QAAM,CAAC,QAAQ,UAAU,IAAI,MAAM,SAAiB,CAAC;AAErD,WAAS,UAAU,OAAe;AAC9B,gBAAY,QAAQ,KAAK,mBAAmB,4BAA4B,CAAC;AAAA,EAC7E;AAEA,QAAM,WAAW;AAAA,IACb;AAAA,IACA,aAAa,CAAC,UAAe,sBAAA,cAAC,aAAA,EAAa,GAAG,OAAO;AAAA,IACrD,UAAU,OAAO,IAAI,CAAA,UAAS,sBAAA,cAACC,6BAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAS,OAAO,MAAM,OAAO,MAAM,MAAM,MAAM,CAAE;AAAA;AAAA,IAElH,MAAM,MAAM,OAAO,CAAA,SAAQ,CAAC,KAAK,QAAQ;AAAA,IACzC,SAAS;AAAA,IACT,SAAS;AAAA;AAAA,IAET,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,aAAa;AAAA,EAAA;AAGjB,SAAO,EAAE,UAAU,QAAQ,WAAW,OAAO,aAAa,gBAAgB,iBAAiB,YAAY,OAAA;AAC3G;AAEA,MAAM,kBAAkB;AACxB,MAAM,yBAAyB;AAM/B,SAAS,YAAY,OAAyB;AAC1C,QAAM,EAAE,cAAc,GAAG,GAAG,eAAe;AAE3C,SACI,sBAAA,cAAA,MAAA,UAAA,0CACKA,6BAAkB,QAAlB,EAA0B,GAAG,YAAY,aAA0B,GACpE,sBAAA;AAAA,IAACA,6BAAkB;AAAA,IAAlB;AAAA,MACI,GAAG;AAAA,MACJ,aAAa,cAAc;AAAA,MAC3B,aAAa,cAAc;AAAA,MAC3B,SAAS;AAAA,IAAA;AAAA,EAAA,CAEjB;AAER;;"}
+{"version":3,"file":"util.cjs","sources":["../../../../src/charts/components/Pie/util.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport type { PieSectorDataItem } from 'recharts/types/polar/Pie';\n\nimport type { useChartOptions } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst PIE_ACTIVE_WIDTH = 10;\nconst PIE_ACTIVE_WIDTH_OFFSET = 2;\n\nexport function usePieChart<TData extends object>(children: React.ReactNode, options?: useChartOptions) {\n    const { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem } = useChart<TData>(children, options);\n    const [radius, _setRadius] = React.useState<number>(0);\n\n    function setRadius(width: number) {\n        _setRadius((width - 2 * (PIE_ACTIVE_WIDTH + PIE_ACTIVE_WIDTH_OFFSET)) / 2);\n    }\n\n    const pieProps = {\n        activeShape: (props: any) => <ActiveShape {...props} />,\n        children: shapes.map(shape => <RechartsPrimitive.Cell key={shape.dataKey} color={shape.color} fill={shape.fill} />),\n        // data props\n        data: items.filter(item => !item.isHidden),\n        dataKey: 'value',\n        nameKey: 'label',\n        // style props\n        isAnimationActive: false,\n        startAngle: 90,\n        endAngle: -270,\n        stroke: '0',\n        labelLine: false,\n        outerRadius: radius,\n    };\n\n    return { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, globalFormatter, toggleItem, shapes };\n}\n\nconst PIE_CHART_HOVER = 10;\nconst PIE_CHART_HOVER_OFFSET = 2;\n\ntype ActiveShapeProps = {\n    pieColors: Record<string, string>;\n} & PieSectorDataItem;\n\nfunction ActiveShape(props: ActiveShapeProps) {\n    const { outerRadius = 0, ...attributes } = props;\n\n    return (\n        <>\n            <RechartsPrimitive.Sector {...attributes} outerRadius={outerRadius} />\n            <RechartsPrimitive.Sector\n                {...attributes}\n                innerRadius={outerRadius + PIE_CHART_HOVER_OFFSET}\n                outerRadius={outerRadius + PIE_CHART_HOVER}\n                opacity={0.4}\n            />\n        </>\n    );\n}\n"],"names":["useChart","RechartsPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,mBAAmB;AACzB,MAAM,0BAA0B;AAEzB,SAAS,YAAkC,UAA2B,SAA2B;AACpG,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,eAAeA,aAAAA,SAAgB,UAAU,OAAO;AACrH,QAAM,CAAC,QAAQ,UAAU,IAAI,MAAM,SAAiB,CAAC;AAErD,WAAS,UAAU,OAAe;AAC9B,gBAAY,QAAQ,KAAK,mBAAmB,4BAA4B,CAAC;AAAA,EAC7E;AAEA,QAAM,WAAW;AAAA,IACb,aAAa,CAAC,UAAe,sBAAA,cAAC,aAAA,EAAa,GAAG,OAAO;AAAA,IACrD,UAAU,OAAO,IAAI,CAAA,UAAS,sBAAA,cAACC,6BAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAS,OAAO,MAAM,OAAO,MAAM,MAAM,MAAM,CAAE;AAAA;AAAA,IAElH,MAAM,MAAM,OAAO,CAAA,SAAQ,CAAC,KAAK,QAAQ;AAAA,IACzC,SAAS;AAAA,IACT,SAAS;AAAA;AAAA,IAET,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,aAAa;AAAA,EAAA;AAGjB,SAAO,EAAE,UAAU,QAAQ,WAAW,OAAO,aAAa,gBAAgB,iBAAiB,YAAY,OAAA;AAC3G;AAEA,MAAM,kBAAkB;AACxB,MAAM,yBAAyB;AAM/B,SAAS,YAAY,OAAyB;AAC1C,QAAM,EAAE,cAAc,GAAG,GAAG,eAAe;AAE3C,SACI,sBAAA,cAAA,MAAA,UAAA,0CACKA,6BAAkB,QAAlB,EAA0B,GAAG,YAAY,aAA0B,GACpE,sBAAA;AAAA,IAACA,6BAAkB;AAAA,IAAlB;AAAA,MACI,GAAG;AAAA,MACJ,aAAa,cAAc;AAAA,MAC3B,aAAa,cAAc;AAAA,MAC3B,SAAS;AAAA,IAAA;AAAA,EAAA,CAEjB;AAER;;"}

package/dist/charts/components/Pie/util.d.ts

@@ -2,7 +2,6 @@ import { default as React } from 'react';
 import { useChartOptions } from '../useChartData';
 export declare function usePieChart<TData extends object>(children: React.ReactNode, options?: useChartOptions): {
     pieProps: {
-        activeIndex: number | undefined;
         activeShape: (props: any) => React.JSX.Element;
         children: React.JSX.Element[];
         data: import('../types').ChartChildProps<TData>[];

package/dist/charts/components/Pie/util.js

@@ -10,7 +10,6 @@ function usePieChart(children, options) {
     _setRadius((width - 2 * (PIE_ACTIVE_WIDTH + PIE_ACTIVE_WIDTH_OFFSET)) / 2);
   }
   const pieProps = {
-    activeIndex,
     activeShape: (props) => /* @__PURE__ */ React__default.createElement(ActiveShape, { ...props }),
     children: shapes.map((shape) => /* @__PURE__ */ React__default.createElement(RechartsPrimitive.Cell, { key: shape.dataKey, color: shape.color, fill: shape.fill })),
     // data props

package/dist/charts/components/Pie/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../src/charts/components/Pie/util.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport type { PieSectorDataItem } from 'recharts/types/polar/Pie';\n\nimport type { useChartOptions } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst PIE_ACTIVE_WIDTH = 10;\nconst PIE_ACTIVE_WIDTH_OFFSET = 2;\n\nexport function usePieChart<TData extends object>(children: React.ReactNode, options?: useChartOptions) {\n    const { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem } = useChart<TData>(children, options);\n    const [radius, _setRadius] = React.useState<number>(0);\n\n    function setRadius(width: number) {\n        _setRadius((width - 2 * (PIE_ACTIVE_WIDTH + PIE_ACTIVE_WIDTH_OFFSET)) / 2);\n    }\n\n    const pieProps = {\n        activeIndex,\n        activeShape: (props: any) => <ActiveShape {...props} />,\n        children: shapes.map(shape => <RechartsPrimitive.Cell key={shape.dataKey} color={shape.color} fill={shape.fill} />),\n        // data props\n        data: items.filter(item => !item.isHidden),\n        dataKey: 'value',\n        nameKey: 'label',\n        // style props\n        isAnimationActive: false,\n        startAngle: 90,\n        endAngle: -270,\n        stroke: '0',\n        labelLine: false,\n        outerRadius: radius,\n    };\n\n    return { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, globalFormatter, toggleItem, shapes };\n}\n\nconst PIE_CHART_HOVER = 10;\nconst PIE_CHART_HOVER_OFFSET = 2;\n\ntype ActiveShapeProps = {\n    pieColors: Record<string, string>;\n} & PieSectorDataItem;\n\nfunction ActiveShape(props: ActiveShapeProps) {\n    const { outerRadius = 0, ...attributes } = props;\n\n    return (\n        <>\n            <RechartsPrimitive.Sector {...attributes} outerRadius={outerRadius} />\n            <RechartsPrimitive.Sector\n                {...attributes}\n                innerRadius={outerRadius + PIE_CHART_HOVER_OFFSET}\n                outerRadius={outerRadius + PIE_CHART_HOVER}\n                opacity={0.4}\n            />\n        </>\n    );\n}\n"],"names":["React"],"mappings":";;;AAOA,MAAM,mBAAmB;AACzB,MAAM,0BAA0B;AAEzB,SAAS,YAAkC,UAA2B,SAA2B;AACpG,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,eAAe,SAAgB,UAAU,OAAO;AACrH,QAAM,CAAC,QAAQ,UAAU,IAAIA,eAAM,SAAiB,CAAC;AAErD,WAAS,UAAU,OAAe;AAC9B,gBAAY,QAAQ,KAAK,mBAAmB,4BAA4B,CAAC;AAAA,EAC7E;AAEA,QAAM,WAAW;AAAA,IACb;AAAA,IACA,aAAa,CAAC,UAAeA,+BAAA,cAAC,aAAA,EAAa,GAAG,OAAO;AAAA,IACrD,UAAU,OAAO,IAAI,CAAA,UAASA,+BAAA,cAAC,kBAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAS,OAAO,MAAM,OAAO,MAAM,MAAM,MAAM,CAAE;AAAA;AAAA,IAElH,MAAM,MAAM,OAAO,CAAA,SAAQ,CAAC,KAAK,QAAQ;AAAA,IACzC,SAAS;AAAA,IACT,SAAS;AAAA;AAAA,IAET,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,aAAa;AAAA,EAAA;AAGjB,SAAO,EAAE,UAAU,QAAQ,WAAW,OAAO,aAAa,gBAAgB,iBAAiB,YAAY,OAAA;AAC3G;AAEA,MAAM,kBAAkB;AACxB,MAAM,yBAAyB;AAM/B,SAAS,YAAY,OAAyB;AAC1C,QAAM,EAAE,cAAc,GAAG,GAAG,eAAe;AAE3C,SACIA,+BAAA,cAAAA,eAAA,UAAA,mDACK,kBAAkB,QAAlB,EAA0B,GAAG,YAAY,aAA0B,GACpEA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACI,GAAG;AAAA,MACJ,aAAa,cAAc;AAAA,MAC3B,aAAa,cAAc;AAAA,MAC3B,SAAS;AAAA,IAAA;AAAA,EAAA,CAEjB;AAER;"}
+{"version":3,"file":"util.js","sources":["../../../../src/charts/components/Pie/util.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport type { PieSectorDataItem } from 'recharts/types/polar/Pie';\n\nimport type { useChartOptions } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst PIE_ACTIVE_WIDTH = 10;\nconst PIE_ACTIVE_WIDTH_OFFSET = 2;\n\nexport function usePieChart<TData extends object>(children: React.ReactNode, options?: useChartOptions) {\n    const { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem } = useChart<TData>(children, options);\n    const [radius, _setRadius] = React.useState<number>(0);\n\n    function setRadius(width: number) {\n        _setRadius((width - 2 * (PIE_ACTIVE_WIDTH + PIE_ACTIVE_WIDTH_OFFSET)) / 2);\n    }\n\n    const pieProps = {\n        activeShape: (props: any) => <ActiveShape {...props} />,\n        children: shapes.map(shape => <RechartsPrimitive.Cell key={shape.dataKey} color={shape.color} fill={shape.fill} />),\n        // data props\n        data: items.filter(item => !item.isHidden),\n        dataKey: 'value',\n        nameKey: 'label',\n        // style props\n        isAnimationActive: false,\n        startAngle: 90,\n        endAngle: -270,\n        stroke: '0',\n        labelLine: false,\n        outerRadius: radius,\n    };\n\n    return { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, globalFormatter, toggleItem, shapes };\n}\n\nconst PIE_CHART_HOVER = 10;\nconst PIE_CHART_HOVER_OFFSET = 2;\n\ntype ActiveShapeProps = {\n    pieColors: Record<string, string>;\n} & PieSectorDataItem;\n\nfunction ActiveShape(props: ActiveShapeProps) {\n    const { outerRadius = 0, ...attributes } = props;\n\n    return (\n        <>\n            <RechartsPrimitive.Sector {...attributes} outerRadius={outerRadius} />\n            <RechartsPrimitive.Sector\n                {...attributes}\n                innerRadius={outerRadius + PIE_CHART_HOVER_OFFSET}\n                outerRadius={outerRadius + PIE_CHART_HOVER}\n                opacity={0.4}\n            />\n        </>\n    );\n}\n"],"names":["React"],"mappings":";;;AAOA,MAAM,mBAAmB;AACzB,MAAM,0BAA0B;AAEzB,SAAS,YAAkC,UAA2B,SAA2B;AACpG,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,eAAe,SAAgB,UAAU,OAAO;AACrH,QAAM,CAAC,QAAQ,UAAU,IAAIA,eAAM,SAAiB,CAAC;AAErD,WAAS,UAAU,OAAe;AAC9B,gBAAY,QAAQ,KAAK,mBAAmB,4BAA4B,CAAC;AAAA,EAC7E;AAEA,QAAM,WAAW;AAAA,IACb,aAAa,CAAC,UAAeA,+BAAA,cAAC,aAAA,EAAa,GAAG,OAAO;AAAA,IACrD,UAAU,OAAO,IAAI,CAAA,UAASA,+BAAA,cAAC,kBAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAS,OAAO,MAAM,OAAO,MAAM,MAAM,MAAM,CAAE;AAAA;AAAA,IAElH,MAAM,MAAM,OAAO,CAAA,SAAQ,CAAC,KAAK,QAAQ;AAAA,IACzC,SAAS;AAAA,IACT,SAAS;AAAA;AAAA,IAET,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,aAAa;AAAA,EAAA;AAGjB,SAAO,EAAE,UAAU,QAAQ,WAAW,OAAO,aAAa,gBAAgB,iBAAiB,YAAY,OAAA;AAC3G;AAEA,MAAM,kBAAkB;AACxB,MAAM,yBAAyB;AAM/B,SAAS,YAAY,OAAyB;AAC1C,QAAM,EAAE,cAAc,GAAG,GAAG,eAAe;AAE3C,SACIA,+BAAA,cAAAA,eAAA,UAAA,mDACK,kBAAkB,QAAlB,EAA0B,GAAG,YAAY,aAA0B,GACpEA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACI,GAAG;AAAA,MACJ,aAAa,cAAc;AAAA,MAC3B,aAAa,cAAc;AAAA,MAC3B,SAAS;AAAA,IAAA;AAAA,EAAA,CAEjB;AAER;"}

package/dist/charts/components/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../src/charts/components/Tooltip.tsx"],"sourcesContent":["import React from 'react';\nimport type * as RechartsPrimitive from 'recharts';\n\nexport type TooltipProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Tooltip>, 'formatter'> & {\n    active?: boolean;\n    style?: React.CSSProperties;\n    title?: React.JSX.Element | string | null | false;\n};\n\nexport function Tooltip(props: TooltipProps) {\n    const { active, payload = [], style, title } = props;\n\n    if (active && payload.length) {\n        return (\n            <div className=\"z-20 z-[999] flex flex-col gap-y-1 rounded border border-gray-300 bg-white px-2 py-1.5 text-xs shadow-sm\">\n                {title ? <span className=\"font-bold\">{title}</span> : null}\n                <dl className=\"m-0 grid grid-cols-[max-content_max-content] gap-x-4 gap-y-0.5\" style={style}>\n                    {payload.map((entry, index) => {\n                        // some components like pie chart double nest\n                        const color = entry.color ?? entry.payload.color;\n                        const formatter = entry.formatter ?? entry.payload.formatter;\n                        const unit = entry.unit ?? entry.payload.unit;\n\n                        return (\n                            <React.Fragment key={`${entry.name}-${index}`}>\n                                <dt className=\"mb-0 flex items-center gap-1 font-normal text-gray-700\" data-taco=\"chart-tooltip\">\n                                    <span className=\"-mt-px h-2.5 w-2.5 rounded-sm\" style={{ background: color }} />\n                                    {entry.name}\n                                </dt>\n                                <dd className=\"mb-0 text-right font-bold tabular-nums text-black\">\n                                    {formatter?.(entry.value ?? '', entry.name ?? '', entry, index, entry.payload) ?? entry.value}\n                                    {unit ? <span className=\"pl-0.5 text-gray-700\">{unit}</span> : null}\n                                </dd>\n                            </React.Fragment>\n                        );\n                    })}\n                </dl>\n            </div>\n        );\n    }\n\n    return null;\n}\n"],"names":[],"mappings":";;;AASO,SAAS,QAAQ,OAAqB;AACzC,QAAM,EAAE,QAAQ,UAAU,CAAA,GAAI,OAAO,UAAU;AAE/C,MAAI,UAAU,QAAQ,QAAQ;AAC1B,WACI,sBAAA,cAAC,SAAI,WAAU,2GAAA,GACV,QAAQ,sBAAA,cAAC,QAAA,EAAK,WAAU,YAAA,GAAa,KAAM,IAAU,MACtD,sBAAA,cAAC,QAAG,WAAU,kEAAiE,SAC1E,QAAQ,IAAI,CAAC,OAAO,UAAU;AAE3B,YAAM,QAAQ,MAAM,SAAS,MAAM,QAAQ;AAC3C,YAAM,YAAY,MAAM,aAAa,MAAM,QAAQ;AACnD,YAAM,OAAO,MAAM,QAAQ,MAAM,QAAQ;AAEzC,aACI,sBAAA,cAAC,MAAM,UAAN,EAAe,KAAK,GAAG,MAAM,IAAI,IAAI,KAAK,GAAA,GACvC,sBAAA,cAAC,MAAA,EAAG,WAAU,0DAAyD,aAAU,gBAAA,GAC7E,sBAAA,cAAC,QAAA,EAAK,WAAU,iCAAgC,OAAO,EAAE,YAAY,MAAA,EAAM,CAAG,GAC7E,MAAM,IACX,GACA,sBAAA,cAAC,MAAA,EAAG,WAAU,oDAAA,GACT,YAAY,MAAM,SAAS,IAAI,MAAM,QAAQ,IAAI,OAAO,OAAO,MAAM,OAAO,KAAK,MAAM,OACvF,OAAO,sBAAA,cAAC,QAAA,EAAK,WAAU,uBAAA,GAAwB,IAAK,IAAU,IACnE,CACJ;AAAA,IAER,CAAC,CACL,CACJ;AAAA,EAER;AAEA,SAAO;AACX;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../src/charts/components/Tooltip.tsx"],"sourcesContent":["import React from 'react';\nimport type { TooltipContentProps } from 'recharts';\n\nexport type TooltipProps = Partial<Omit<TooltipContentProps, 'formatter'>> & {\n    style?: React.CSSProperties;\n    title?: React.JSX.Element | string | null | false;\n};\n\nexport function Tooltip(props: TooltipProps) {\n    const { active, payload = [], style, title } = props;\n\n    if (active && payload.length) {\n        return (\n            <div className=\"z-20 z-[999] flex flex-col gap-y-1 rounded border border-gray-300 bg-white px-2 py-1.5 text-xs shadow-sm\">\n                {title ? <span className=\"font-bold\">{title}</span> : null}\n                <dl className=\"m-0 grid grid-cols-[max-content_max-content] gap-x-4 gap-y-0.5\" style={style}>\n                    {payload.map((entry, index) => {\n                        // some components like pie chart double nest\n                        const color = entry.color ?? entry.payload.color;\n                        const formatter = entry.formatter ?? entry.payload.formatter;\n                        const unit = entry.unit ?? entry.payload.unit;\n\n                        return (\n                            <React.Fragment key={`${entry.name}-${index}`}>\n                                <dt className=\"mb-0 flex items-center gap-1 font-normal text-gray-700\" data-taco=\"chart-tooltip\">\n                                    <span className=\"-mt-px h-2.5 w-2.5 rounded-sm\" style={{ background: color }} />\n                                    {entry.name}\n                                </dt>\n                                <dd className=\"mb-0 text-right font-bold tabular-nums text-black\">\n                                    {formatter?.(entry.value ?? '', entry.name ?? '', entry, index, entry.payload) ?? entry.value}\n                                    {unit ? <span className=\"pl-0.5 text-gray-700\">{unit}</span> : null}\n                                </dd>\n                            </React.Fragment>\n                        );\n                    })}\n                </dl>\n            </div>\n        );\n    }\n\n    return null;\n}\n"],"names":[],"mappings":";;;AAQO,SAAS,QAAQ,OAAqB;AACzC,QAAM,EAAE,QAAQ,UAAU,CAAA,GAAI,OAAO,UAAU;AAE/C,MAAI,UAAU,QAAQ,QAAQ;AAC1B,WACI,sBAAA,cAAC,SAAI,WAAU,2GAAA,GACV,QAAQ,sBAAA,cAAC,QAAA,EAAK,WAAU,YAAA,GAAa,KAAM,IAAU,MACtD,sBAAA,cAAC,QAAG,WAAU,kEAAiE,SAC1E,QAAQ,IAAI,CAAC,OAAO,UAAU;AAE3B,YAAM,QAAQ,MAAM,SAAS,MAAM,QAAQ;AAC3C,YAAM,YAAY,MAAM,aAAa,MAAM,QAAQ;AACnD,YAAM,OAAO,MAAM,QAAQ,MAAM,QAAQ;AAEzC,aACI,sBAAA,cAAC,MAAM,UAAN,EAAe,KAAK,GAAG,MAAM,IAAI,IAAI,KAAK,GAAA,GACvC,sBAAA,cAAC,MAAA,EAAG,WAAU,0DAAyD,aAAU,gBAAA,GAC7E,sBAAA,cAAC,QAAA,EAAK,WAAU,iCAAgC,OAAO,EAAE,YAAY,MAAA,EAAM,CAAG,GAC7E,MAAM,IACX,GACA,sBAAA,cAAC,MAAA,EAAG,WAAU,oDAAA,GACT,YAAY,MAAM,SAAS,IAAI,MAAM,QAAQ,IAAI,OAAO,OAAO,MAAM,OAAO,KAAK,MAAM,OACvF,OAAO,sBAAA,cAAC,QAAA,EAAK,WAAU,uBAAA,GAAwB,IAAK,IAAU,IACnE,CACJ;AAAA,IAER,CAAC,CACL,CACJ;AAAA,EAER;AAEA,SAAO;AACX;;"}

package/dist/charts/components/Tooltip.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
-import type * as RechartsPrimitive from 'recharts';
-export type TooltipProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Tooltip>, 'formatter'> & {
-    active?: boolean;
+import { TooltipContentProps } from 'recharts';
+export type TooltipProps = Partial<Omit<TooltipContentProps, 'formatter'>> & {
     style?: React.CSSProperties;
     title?: React.JSX.Element | string | null | false;
 };

package/dist/charts/components/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/charts/components/Tooltip.tsx"],"sourcesContent":["import React from 'react';\nimport type * as RechartsPrimitive from 'recharts';\n\nexport type TooltipProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Tooltip>, 'formatter'> & {\n    active?: boolean;\n    style?: React.CSSProperties;\n    title?: React.JSX.Element | string | null | false;\n};\n\nexport function Tooltip(props: TooltipProps) {\n    const { active, payload = [], style, title } = props;\n\n    if (active && payload.length) {\n        return (\n            <div className=\"z-20 z-[999] flex flex-col gap-y-1 rounded border border-gray-300 bg-white px-2 py-1.5 text-xs shadow-sm\">\n                {title ? <span className=\"font-bold\">{title}</span> : null}\n                <dl className=\"m-0 grid grid-cols-[max-content_max-content] gap-x-4 gap-y-0.5\" style={style}>\n                    {payload.map((entry, index) => {\n                        // some components like pie chart double nest\n                        const color = entry.color ?? entry.payload.color;\n                        const formatter = entry.formatter ?? entry.payload.formatter;\n                        const unit = entry.unit ?? entry.payload.unit;\n\n                        return (\n                            <React.Fragment key={`${entry.name}-${index}`}>\n                                <dt className=\"mb-0 flex items-center gap-1 font-normal text-gray-700\" data-taco=\"chart-tooltip\">\n                                    <span className=\"-mt-px h-2.5 w-2.5 rounded-sm\" style={{ background: color }} />\n                                    {entry.name}\n                                </dt>\n                                <dd className=\"mb-0 text-right font-bold tabular-nums text-black\">\n                                    {formatter?.(entry.value ?? '', entry.name ?? '', entry, index, entry.payload) ?? entry.value}\n                                    {unit ? <span className=\"pl-0.5 text-gray-700\">{unit}</span> : null}\n                                </dd>\n                            </React.Fragment>\n                        );\n                    })}\n                </dl>\n            </div>\n        );\n    }\n\n    return null;\n}\n"],"names":["React"],"mappings":";AASO,SAAS,QAAQ,OAAqB;AACzC,QAAM,EAAE,QAAQ,UAAU,CAAA,GAAI,OAAO,UAAU;AAE/C,MAAI,UAAU,QAAQ,QAAQ;AAC1B,WACIA,+BAAA,cAAC,SAAI,WAAU,2GAAA,GACV,QAAQA,+BAAA,cAAC,QAAA,EAAK,WAAU,YAAA,GAAa,KAAM,IAAU,MACtDA,+BAAA,cAAC,QAAG,WAAU,kEAAiE,SAC1E,QAAQ,IAAI,CAAC,OAAO,UAAU;AAE3B,YAAM,QAAQ,MAAM,SAAS,MAAM,QAAQ;AAC3C,YAAM,YAAY,MAAM,aAAa,MAAM,QAAQ;AACnD,YAAM,OAAO,MAAM,QAAQ,MAAM,QAAQ;AAEzC,aACIA,+BAAA,cAACA,eAAM,UAAN,EAAe,KAAK,GAAG,MAAM,IAAI,IAAI,KAAK,GAAA,GACvCA,+BAAA,cAAC,MAAA,EAAG,WAAU,0DAAyD,aAAU,gBAAA,GAC7EA,+BAAA,cAAC,QAAA,EAAK,WAAU,iCAAgC,OAAO,EAAE,YAAY,MAAA,EAAM,CAAG,GAC7E,MAAM,IACX,GACAA,+BAAA,cAAC,MAAA,EAAG,WAAU,oDAAA,GACT,YAAY,MAAM,SAAS,IAAI,MAAM,QAAQ,IAAI,OAAO,OAAO,MAAM,OAAO,KAAK,MAAM,OACvF,OAAOA,+BAAA,cAAC,QAAA,EAAK,WAAU,uBAAA,GAAwB,IAAK,IAAU,IACnE,CACJ;AAAA,IAER,CAAC,CACL,CACJ;AAAA,EAER;AAEA,SAAO;AACX;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/charts/components/Tooltip.tsx"],"sourcesContent":["import React from 'react';\nimport type { TooltipContentProps } from 'recharts';\n\nexport type TooltipProps = Partial<Omit<TooltipContentProps, 'formatter'>> & {\n    style?: React.CSSProperties;\n    title?: React.JSX.Element | string | null | false;\n};\n\nexport function Tooltip(props: TooltipProps) {\n    const { active, payload = [], style, title } = props;\n\n    if (active && payload.length) {\n        return (\n            <div className=\"z-20 z-[999] flex flex-col gap-y-1 rounded border border-gray-300 bg-white px-2 py-1.5 text-xs shadow-sm\">\n                {title ? <span className=\"font-bold\">{title}</span> : null}\n                <dl className=\"m-0 grid grid-cols-[max-content_max-content] gap-x-4 gap-y-0.5\" style={style}>\n                    {payload.map((entry, index) => {\n                        // some components like pie chart double nest\n                        const color = entry.color ?? entry.payload.color;\n                        const formatter = entry.formatter ?? entry.payload.formatter;\n                        const unit = entry.unit ?? entry.payload.unit;\n\n                        return (\n                            <React.Fragment key={`${entry.name}-${index}`}>\n                                <dt className=\"mb-0 flex items-center gap-1 font-normal text-gray-700\" data-taco=\"chart-tooltip\">\n                                    <span className=\"-mt-px h-2.5 w-2.5 rounded-sm\" style={{ background: color }} />\n                                    {entry.name}\n                                </dt>\n                                <dd className=\"mb-0 text-right font-bold tabular-nums text-black\">\n                                    {formatter?.(entry.value ?? '', entry.name ?? '', entry, index, entry.payload) ?? entry.value}\n                                    {unit ? <span className=\"pl-0.5 text-gray-700\">{unit}</span> : null}\n                                </dd>\n                            </React.Fragment>\n                        );\n                    })}\n                </dl>\n            </div>\n        );\n    }\n\n    return null;\n}\n"],"names":["React"],"mappings":";AAQO,SAAS,QAAQ,OAAqB;AACzC,QAAM,EAAE,QAAQ,UAAU,CAAA,GAAI,OAAO,UAAU;AAE/C,MAAI,UAAU,QAAQ,QAAQ;AAC1B,WACIA,+BAAA,cAAC,SAAI,WAAU,2GAAA,GACV,QAAQA,+BAAA,cAAC,QAAA,EAAK,WAAU,YAAA,GAAa,KAAM,IAAU,MACtDA,+BAAA,cAAC,QAAG,WAAU,kEAAiE,SAC1E,QAAQ,IAAI,CAAC,OAAO,UAAU;AAE3B,YAAM,QAAQ,MAAM,SAAS,MAAM,QAAQ;AAC3C,YAAM,YAAY,MAAM,aAAa,MAAM,QAAQ;AACnD,YAAM,OAAO,MAAM,QAAQ,MAAM,QAAQ;AAEzC,aACIA,+BAAA,cAACA,eAAM,UAAN,EAAe,KAAK,GAAG,MAAM,IAAI,IAAI,KAAK,GAAA,GACvCA,+BAAA,cAAC,MAAA,EAAG,WAAU,0DAAyD,aAAU,gBAAA,GAC7EA,+BAAA,cAAC,QAAA,EAAK,WAAU,iCAAgC,OAAO,EAAE,YAAY,MAAA,EAAM,CAAG,GAC7E,MAAM,IACX,GACAA,+BAAA,cAAC,MAAA,EAAG,WAAU,oDAAA,GACT,YAAY,MAAM,SAAS,IAAI,MAAM,QAAQ,IAAI,OAAO,OAAO,MAAM,OAAO,KAAK,MAAM,OACvF,OAAOA,+BAAA,cAAC,QAAA,EAAK,WAAU,uBAAA,GAAwB,IAAK,IAAU,IACnE,CACJ;AAAA,IAER,CAAC,CACL,CACJ;AAAA,EAER;AAEA,SAAO;AACX;"}

package/dist/charts/components/types.d.ts

@@ -1,8 +1,9 @@
-import { Payload } from 'recharts/types/component/DefaultLegendContent';
+import { LegendPayload } from 'recharts';
+import { CustomScaleDefinition } from 'recharts/types/util/scale/CustomScaleDefinition';
 import { ScaleType } from 'recharts/types/util/types';
 import { Color } from '../utils/color';
 export type ActiveChartItems<TType> = Record<keyof TType & string, boolean>;
-export type PayloadType<TType> = Payload & {
+export type PayloadType<TType> = LegendPayload & {
     dataKey: keyof TType & string;
 };
 export type LegacyChartChildProps = {
@@ -10,6 +11,8 @@ export type LegacyChartChildProps = {
     color: Color;
     label: string;
 };
+/** A string scale shortcut, or a custom d3-compatible scale, matching Recharts' axis `scale` prop. */
+export type ChartAxisScale = ScaleType | CustomScaleDefinition | CustomScaleDefinition<string> | CustomScaleDefinition<number> | CustomScaleDefinition<Date>;
 export type ChartValueFormatter = (value: number) => string | React.JSX.Element;
 export type TickFormatter = (value: any) => string;
 export type CurveType = 'natural' | 'linear' | 'step';
@@ -37,13 +40,13 @@ export type CartesianChartProps<TData extends object> = {
     /**
      * @default auto
      */
-    xAxisScale?: ScaleType | Function;
+    xAxisScale?: ChartAxisScale;
     /** Format the value shown for each tick on the X Axis */
     xAxisTickFormatter?: TickFormatter;
     /**
      * @default auto
      */
-    yAxisScale?: ScaleType | Function;
+    yAxisScale?: ChartAxisScale;
     /** Format the value shown for each tick on the Y Axis */
     yAxisTickFormatter?: TickFormatter;
     /** Adjust the width of the Y Axis to reduce whitespace