@economic/taco 14.0.0 → 14.1.0-EC-85807-code-report-fixes.0

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

@@ -1 +1 @@
-{"version":3,"file":"Legend.cjs","sources":["../../../../src/charts/components/LegacyDonut/Legend.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { getThemeColor } from '@/charts/utils/color';\n\nimport type { LegacyDonutChartProps, LegacyDonutChartSegmentProps, LegacyDonutSegmentIds } from './LegacyDonutChart';\n\ntype LegendProps = Pick<LegacyDonutChartProps, 'formatter' | 'label'> & {\n    data: LegacyDonutChartSegmentProps[];\n    hoveredItem: LegacyDonutSegmentIds;\n    onClick: (entry: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]) => void;\n    selectedItem: LegacyDonutSegmentIds;\n    setHoveredItem: React.Dispatch<React.SetStateAction<LegacyDonutSegmentIds>>;\n    total: number;\n};\n\nexport const Legend = ({ hoveredItem, selectedItem, data, onClick, setHoveredItem, formatter, total, label }: LegendProps) => {\n    const isTotalLegendSelected = selectedItem.length === data.length;\n    const isTotalLegendHovered = hoveredItem.length === data.length;\n\n    const handleMouseLeave = () => setHoveredItem([]);\n\n    const renderLegendItem = (entry: LegacyDonutChartSegmentProps | null, index?: number) => {\n        const isTotal = entry === null;\n        // We can't use `isTotal` here because TypeScript is unable to infer the type when `entry` is not null.\n        const itemData = entry === null ? { id: 'total', label, value: total, color: 'grey-300' } : entry;\n        const isSelected = isTotal ? isTotalLegendSelected : selectedItem.includes(itemData.id);\n        const isHovered = isTotal ? isTotalLegendHovered : hoveredItem.includes(itemData.id);\n\n        return (\n            <li\n                key={isTotal ? 'total' : `${itemData.label}-${index}`}\n                // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\n                className={cn('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {\n                    'bg-gray-100': isHovered,\n                    'bg-gray-200': isSelected,\n                })}\n                onClick={() => onClick(isTotal ? data : itemData)}\n                onMouseEnter={() => setHoveredItem(isTotal ? data.map(item => item.id) : [itemData.id])}\n                onMouseLeave={handleMouseLeave}>\n                <span className=\"ml-1 mt-1 h-9 w-2 rounded-sm\" style={{ backgroundColor: getThemeColor(itemData.color) }} />\n                <div>\n                    {itemData.label}\n                    <span className=\"-mt-1 flex w-full text-lg font-bold\">\n                        {formatter ? formatter(itemData.value) : itemData.value}\n                    </span>\n                </div>\n            </li>\n        );\n    };\n\n    return (\n        <div className=\"flex-grow pl-4\">\n            <ul className=\"mb-0 ml-0 mt-4 flex flex-col justify-center gap-1 space-y-1\">\n                {renderLegendItem(null)}\n                {data.map(renderLegendItem)}\n            </ul>\n        </div>\n    );\n};\n"],"names":["getThemeColor"],"mappings":";;;;;AAgBO,MAAM,SAAS,CAAC,EAAE,aAAa,cAAc,MAAM,SAAS,gBAAgB,WAAW,OAAO,YAAyB;AAC1H,QAAM,wBAAwB,aAAa,WAAW,KAAK;AAC3D,QAAM,uBAAuB,YAAY,WAAW,KAAK;AAEzD,QAAM,mBAAmB,MAAM,eAAe,EAAE;AAEhD,QAAM,mBAAmB,CAAC,OAA4C,UAAmB;AACrF,UAAM,UAAU,UAAU;AAE1B,UAAM,WAAW,UAAU,OAAO,EAAE,IAAI,SAAS,OAAO,OAAO,OAAO,OAAO,WAAA,IAAe;AAC5F,UAAM,aAAa,UAAU,wBAAwB,aAAa,SAAS,SAAS,EAAE;AACtF,UAAM,YAAY,UAAU,uBAAuB,YAAY,SAAS,SAAS,EAAE;AAEnF,WACI,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK,UAAU,UAAU,GAAG,SAAS,KAAK,IAAI,KAAK;AAAA,QAEnD,WAAW,GAAG,oDAAoD;AAAA,UAC9D,eAAe;AAAA,UACf,eAAe;AAAA,QAAA,CAClB;AAAA,QACD,SAAS,MAAM,QAAQ,UAAU,OAAO,QAAQ;AAAA,QAChD,cAAc,MAAM,eAAe,UAAU,KAAK,IAAI,CAAA,SAAQ,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;AAAA,QACtF,cAAc;AAAA,MAAA;AAAA,MACd,sBAAA,cAAC,QAAA,EAAK,WAAU,gCAA+B,OAAO,EAAE,iBAAiBA,MAAAA,cAAc,SAAS,KAAK,EAAA,EAAE,CAAG;AAAA,MAC1G,sBAAA,cAAC,OAAA,MACI,SAAS,2CACT,QAAA,EAAK,WAAU,sCAAA,GACX,YAAY,UAAU,SAAS,KAAK,IAAI,SAAS,KACtD,CACJ;AAAA,IAAA;AAAA,EAGZ;AAEA,SACI,sBAAA,cAAC,OAAA,EAAI,WAAU,iBAAA,uCACV,MAAA,EAAG,WAAU,8DAAA,GACT,iBAAiB,IAAI,GACrB,KAAK,IAAI,gBAAgB,CAC9B,CACJ;AAER;;"}
+{"version":3,"file":"Legend.cjs","sources":["../../../../src/charts/components/LegacyDonut/Legend.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { getThemeColor } from '@/charts/utils/color';\n\nimport type { LegacyDonutChartProps, LegacyDonutChartSegmentProps, LegacyDonutSegmentIds } from './LegacyDonutChart';\n\ntype LegendProps = Pick<LegacyDonutChartProps, 'formatter' | 'label'> & {\n    data: LegacyDonutChartSegmentProps[];\n    hoveredItem: LegacyDonutSegmentIds;\n    onClick: (entry: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]) => void;\n    selectedItem: LegacyDonutSegmentIds;\n    setHoveredItem: React.Dispatch<React.SetStateAction<LegacyDonutSegmentIds>>;\n    total: number;\n};\n\nexport const Legend = ({ hoveredItem, selectedItem, data, onClick, setHoveredItem, formatter, total, label }: LegendProps) => {\n    const isTotalLegendSelected = selectedItem.length === data.length;\n    const isTotalLegendHovered = hoveredItem.length === data.length;\n\n    const handleMouseLeave = () => setHoveredItem([]);\n\n    const renderLegendItem = (entry: LegacyDonutChartSegmentProps | null, index?: number) => {\n        const isTotal = entry === null;\n        // We can't use `isTotal` here because TypeScript is unable to infer the type when `entry` is not null.\n        const itemData = entry === null ? { id: 'total', label, value: total, color: 'grey-300' } : entry;\n        const isSelected = isTotal ? isTotalLegendSelected : selectedItem.includes(itemData.id);\n        const isHovered = isTotal ? isTotalLegendHovered : hoveredItem.includes(itemData.id);\n\n        return (\n            <li\n                key={isTotal ? 'total' : `${itemData.label}-${index}`}\n                // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\n                className={cn('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {\n                    'bg-gray-100': isHovered,\n                    'bg-gray-200': isSelected,\n                })}\n                onClick={() => onClick(isTotal ? data : itemData)}\n                onMouseEnter={() => setHoveredItem(isTotal ? data.map(item => item.id) : [itemData.id])}\n                onMouseLeave={handleMouseLeave}>\n                <span className=\"ml-1 mt-1 h-9 w-2 rounded-sm\" style={{ backgroundColor: getThemeColor(itemData.color) }} />\n                <div>\n                    {itemData.label}\n                    <span className=\"-mt-1 flex w-full text-lg font-bold\">\n                        {formatter ? formatter(itemData.value) : itemData.value}\n                    </span>\n                </div>\n            </li>\n        );\n    };\n\n    return (\n        <div className=\"flex-grow pl-4\">\n            <ul className=\"mb-0 ml-0 mt-4 flex flex-col justify-center gap-1 space-y-1\">\n                {renderLegendItem(null)}\n                {data.map(item => renderLegendItem(item))}\n            </ul>\n        </div>\n    );\n};\n"],"names":["getThemeColor"],"mappings":";;;;;AAgBO,MAAM,SAAS,CAAC,EAAE,aAAa,cAAc,MAAM,SAAS,gBAAgB,WAAW,OAAO,YAAyB;AAC1H,QAAM,wBAAwB,aAAa,WAAW,KAAK;AAC3D,QAAM,uBAAuB,YAAY,WAAW,KAAK;AAEzD,QAAM,mBAAmB,MAAM,eAAe,EAAE;AAEhD,QAAM,mBAAmB,CAAC,OAA4C,UAAmB;AACrF,UAAM,UAAU,UAAU;AAE1B,UAAM,WAAW,UAAU,OAAO,EAAE,IAAI,SAAS,OAAO,OAAO,OAAO,OAAO,WAAA,IAAe;AAC5F,UAAM,aAAa,UAAU,wBAAwB,aAAa,SAAS,SAAS,EAAE;AACtF,UAAM,YAAY,UAAU,uBAAuB,YAAY,SAAS,SAAS,EAAE;AAEnF,WACI,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK,UAAU,UAAU,GAAG,SAAS,KAAK,IAAI,KAAK;AAAA,QAEnD,WAAW,GAAG,oDAAoD;AAAA,UAC9D,eAAe;AAAA,UACf,eAAe;AAAA,QAAA,CAClB;AAAA,QACD,SAAS,MAAM,QAAQ,UAAU,OAAO,QAAQ;AAAA,QAChD,cAAc,MAAM,eAAe,UAAU,KAAK,IAAI,CAAA,SAAQ,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;AAAA,QACtF,cAAc;AAAA,MAAA;AAAA,MACd,sBAAA,cAAC,QAAA,EAAK,WAAU,gCAA+B,OAAO,EAAE,iBAAiBA,MAAAA,cAAc,SAAS,KAAK,EAAA,EAAE,CAAG;AAAA,MAC1G,sBAAA,cAAC,OAAA,MACI,SAAS,2CACT,QAAA,EAAK,WAAU,sCAAA,GACX,YAAY,UAAU,SAAS,KAAK,IAAI,SAAS,KACtD,CACJ;AAAA,IAAA;AAAA,EAGZ;AAEA,6CACK,OAAA,EAAI,WAAU,oBACX,sBAAA,cAAC,MAAA,EAAG,WAAU,8DAAA,GACT,iBAAiB,IAAI,GACrB,KAAK,IAAI,CAAA,SAAQ,iBAAiB,IAAI,CAAC,CAC5C,CACJ;AAER;;"}

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

@@ -26,7 +26,7 @@ const Legend = ({ hoveredItem, selectedItem, data, onClick, setHoveredItem, form
       /* @__PURE__ */ React__default.createElement("div", null, itemData.label, /* @__PURE__ */ React__default.createElement("span", { className: "-mt-1 flex w-full text-lg font-bold" }, formatter ? formatter(itemData.value) : itemData.value))
     );
   };
-  return /* @__PURE__ */ React__default.createElement("div", { className: "flex-grow pl-4" }, /* @__PURE__ */ React__default.createElement("ul", { className: "mb-0 ml-0 mt-4 flex flex-col justify-center gap-1 space-y-1" }, renderLegendItem(null), data.map(renderLegendItem)));
+  return /* @__PURE__ */ React__default.createElement("div", { className: "flex-grow pl-4" }, /* @__PURE__ */ React__default.createElement("ul", { className: "mb-0 ml-0 mt-4 flex flex-col justify-center gap-1 space-y-1" }, renderLegendItem(null), data.map((item) => renderLegendItem(item))));
 };
 export {
   Legend

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

@@ -1 +1 @@
-{"version":3,"file":"Legend.js","sources":["../../../../src/charts/components/LegacyDonut/Legend.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { getThemeColor } from '@/charts/utils/color';\n\nimport type { LegacyDonutChartProps, LegacyDonutChartSegmentProps, LegacyDonutSegmentIds } from './LegacyDonutChart';\n\ntype LegendProps = Pick<LegacyDonutChartProps, 'formatter' | 'label'> & {\n    data: LegacyDonutChartSegmentProps[];\n    hoveredItem: LegacyDonutSegmentIds;\n    onClick: (entry: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]) => void;\n    selectedItem: LegacyDonutSegmentIds;\n    setHoveredItem: React.Dispatch<React.SetStateAction<LegacyDonutSegmentIds>>;\n    total: number;\n};\n\nexport const Legend = ({ hoveredItem, selectedItem, data, onClick, setHoveredItem, formatter, total, label }: LegendProps) => {\n    const isTotalLegendSelected = selectedItem.length === data.length;\n    const isTotalLegendHovered = hoveredItem.length === data.length;\n\n    const handleMouseLeave = () => setHoveredItem([]);\n\n    const renderLegendItem = (entry: LegacyDonutChartSegmentProps | null, index?: number) => {\n        const isTotal = entry === null;\n        // We can't use `isTotal` here because TypeScript is unable to infer the type when `entry` is not null.\n        const itemData = entry === null ? { id: 'total', label, value: total, color: 'grey-300' } : entry;\n        const isSelected = isTotal ? isTotalLegendSelected : selectedItem.includes(itemData.id);\n        const isHovered = isTotal ? isTotalLegendHovered : hoveredItem.includes(itemData.id);\n\n        return (\n            <li\n                key={isTotal ? 'total' : `${itemData.label}-${index}`}\n                // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\n                className={cn('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {\n                    'bg-gray-100': isHovered,\n                    'bg-gray-200': isSelected,\n                })}\n                onClick={() => onClick(isTotal ? data : itemData)}\n                onMouseEnter={() => setHoveredItem(isTotal ? data.map(item => item.id) : [itemData.id])}\n                onMouseLeave={handleMouseLeave}>\n                <span className=\"ml-1 mt-1 h-9 w-2 rounded-sm\" style={{ backgroundColor: getThemeColor(itemData.color) }} />\n                <div>\n                    {itemData.label}\n                    <span className=\"-mt-1 flex w-full text-lg font-bold\">\n                        {formatter ? formatter(itemData.value) : itemData.value}\n                    </span>\n                </div>\n            </li>\n        );\n    };\n\n    return (\n        <div className=\"flex-grow pl-4\">\n            <ul className=\"mb-0 ml-0 mt-4 flex flex-col justify-center gap-1 space-y-1\">\n                {renderLegendItem(null)}\n                {data.map(renderLegendItem)}\n            </ul>\n        </div>\n    );\n};\n"],"names":["React"],"mappings":";;;AAgBO,MAAM,SAAS,CAAC,EAAE,aAAa,cAAc,MAAM,SAAS,gBAAgB,WAAW,OAAO,YAAyB;AAC1H,QAAM,wBAAwB,aAAa,WAAW,KAAK;AAC3D,QAAM,uBAAuB,YAAY,WAAW,KAAK;AAEzD,QAAM,mBAAmB,MAAM,eAAe,EAAE;AAEhD,QAAM,mBAAmB,CAAC,OAA4C,UAAmB;AACrF,UAAM,UAAU,UAAU;AAE1B,UAAM,WAAW,UAAU,OAAO,EAAE,IAAI,SAAS,OAAO,OAAO,OAAO,OAAO,WAAA,IAAe;AAC5F,UAAM,aAAa,UAAU,wBAAwB,aAAa,SAAS,SAAS,EAAE;AACtF,UAAM,YAAY,UAAU,uBAAuB,YAAY,SAAS,SAAS,EAAE;AAEnF,WACIA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK,UAAU,UAAU,GAAG,SAAS,KAAK,IAAI,KAAK;AAAA,QAEnD,WAAW,GAAG,oDAAoD;AAAA,UAC9D,eAAe;AAAA,UACf,eAAe;AAAA,QAAA,CAClB;AAAA,QACD,SAAS,MAAM,QAAQ,UAAU,OAAO,QAAQ;AAAA,QAChD,cAAc,MAAM,eAAe,UAAU,KAAK,IAAI,CAAA,SAAQ,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;AAAA,QACtF,cAAc;AAAA,MAAA;AAAA,MACdA,+BAAA,cAAC,QAAA,EAAK,WAAU,gCAA+B,OAAO,EAAE,iBAAiB,cAAc,SAAS,KAAK,EAAA,EAAE,CAAG;AAAA,MAC1GA,+BAAA,cAAC,OAAA,MACI,SAAS,oDACT,QAAA,EAAK,WAAU,sCAAA,GACX,YAAY,UAAU,SAAS,KAAK,IAAI,SAAS,KACtD,CACJ;AAAA,IAAA;AAAA,EAGZ;AAEA,SACIA,+BAAA,cAAC,OAAA,EAAI,WAAU,iBAAA,gDACV,MAAA,EAAG,WAAU,8DAAA,GACT,iBAAiB,IAAI,GACrB,KAAK,IAAI,gBAAgB,CAC9B,CACJ;AAER;"}
+{"version":3,"file":"Legend.js","sources":["../../../../src/charts/components/LegacyDonut/Legend.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { getThemeColor } from '@/charts/utils/color';\n\nimport type { LegacyDonutChartProps, LegacyDonutChartSegmentProps, LegacyDonutSegmentIds } from './LegacyDonutChart';\n\ntype LegendProps = Pick<LegacyDonutChartProps, 'formatter' | 'label'> & {\n    data: LegacyDonutChartSegmentProps[];\n    hoveredItem: LegacyDonutSegmentIds;\n    onClick: (entry: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]) => void;\n    selectedItem: LegacyDonutSegmentIds;\n    setHoveredItem: React.Dispatch<React.SetStateAction<LegacyDonutSegmentIds>>;\n    total: number;\n};\n\nexport const Legend = ({ hoveredItem, selectedItem, data, onClick, setHoveredItem, formatter, total, label }: LegendProps) => {\n    const isTotalLegendSelected = selectedItem.length === data.length;\n    const isTotalLegendHovered = hoveredItem.length === data.length;\n\n    const handleMouseLeave = () => setHoveredItem([]);\n\n    const renderLegendItem = (entry: LegacyDonutChartSegmentProps | null, index?: number) => {\n        const isTotal = entry === null;\n        // We can't use `isTotal` here because TypeScript is unable to infer the type when `entry` is not null.\n        const itemData = entry === null ? { id: 'total', label, value: total, color: 'grey-300' } : entry;\n        const isSelected = isTotal ? isTotalLegendSelected : selectedItem.includes(itemData.id);\n        const isHovered = isTotal ? isTotalLegendHovered : hoveredItem.includes(itemData.id);\n\n        return (\n            <li\n                key={isTotal ? 'total' : `${itemData.label}-${index}`}\n                // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\n                className={cn('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {\n                    'bg-gray-100': isHovered,\n                    'bg-gray-200': isSelected,\n                })}\n                onClick={() => onClick(isTotal ? data : itemData)}\n                onMouseEnter={() => setHoveredItem(isTotal ? data.map(item => item.id) : [itemData.id])}\n                onMouseLeave={handleMouseLeave}>\n                <span className=\"ml-1 mt-1 h-9 w-2 rounded-sm\" style={{ backgroundColor: getThemeColor(itemData.color) }} />\n                <div>\n                    {itemData.label}\n                    <span className=\"-mt-1 flex w-full text-lg font-bold\">\n                        {formatter ? formatter(itemData.value) : itemData.value}\n                    </span>\n                </div>\n            </li>\n        );\n    };\n\n    return (\n        <div className=\"flex-grow pl-4\">\n            <ul className=\"mb-0 ml-0 mt-4 flex flex-col justify-center gap-1 space-y-1\">\n                {renderLegendItem(null)}\n                {data.map(item => renderLegendItem(item))}\n            </ul>\n        </div>\n    );\n};\n"],"names":["React"],"mappings":";;;AAgBO,MAAM,SAAS,CAAC,EAAE,aAAa,cAAc,MAAM,SAAS,gBAAgB,WAAW,OAAO,YAAyB;AAC1H,QAAM,wBAAwB,aAAa,WAAW,KAAK;AAC3D,QAAM,uBAAuB,YAAY,WAAW,KAAK;AAEzD,QAAM,mBAAmB,MAAM,eAAe,EAAE;AAEhD,QAAM,mBAAmB,CAAC,OAA4C,UAAmB;AACrF,UAAM,UAAU,UAAU;AAE1B,UAAM,WAAW,UAAU,OAAO,EAAE,IAAI,SAAS,OAAO,OAAO,OAAO,OAAO,WAAA,IAAe;AAC5F,UAAM,aAAa,UAAU,wBAAwB,aAAa,SAAS,SAAS,EAAE;AACtF,UAAM,YAAY,UAAU,uBAAuB,YAAY,SAAS,SAAS,EAAE;AAEnF,WACIA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK,UAAU,UAAU,GAAG,SAAS,KAAK,IAAI,KAAK;AAAA,QAEnD,WAAW,GAAG,oDAAoD;AAAA,UAC9D,eAAe;AAAA,UACf,eAAe;AAAA,QAAA,CAClB;AAAA,QACD,SAAS,MAAM,QAAQ,UAAU,OAAO,QAAQ;AAAA,QAChD,cAAc,MAAM,eAAe,UAAU,KAAK,IAAI,CAAA,SAAQ,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;AAAA,QACtF,cAAc;AAAA,MAAA;AAAA,MACdA,+BAAA,cAAC,QAAA,EAAK,WAAU,gCAA+B,OAAO,EAAE,iBAAiB,cAAc,SAAS,KAAK,EAAA,EAAE,CAAG;AAAA,MAC1GA,+BAAA,cAAC,OAAA,MACI,SAAS,oDACT,QAAA,EAAK,WAAU,sCAAA,GACX,YAAY,UAAU,SAAS,KAAK,IAAI,SAAS,KACtD,CACJ;AAAA,IAAA;AAAA,EAGZ;AAEA,sDACK,OAAA,EAAI,WAAU,oBACXA,+BAAA,cAAC,MAAA,EAAG,WAAU,8DAAA,GACT,iBAAiB,IAAI,GACrB,KAAK,IAAI,CAAA,SAAQ,iBAAiB,IAAI,CAAC,CAC5C,CACJ;AAER;"}

package/dist/charts/components/Legend.cjs

@@ -10,7 +10,7 @@ function getDarkerThemeColor(color$1) {
   if (!colorName) {
     return void 0;
   }
-  return color.getThemeColor(colorName.replace(/-\d+$/, "-300"));
+  return color.getThemeColor(colorName.replace(/-\d+$/u, "-300"));
 }
 function Legend(props) {
   const { items, onHover: handleHover, onToggle: handleToggle } = props;

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

@@ -1 +1 @@
-{"version":3,"file":"Legend.cjs","sources":["../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React from 'react';\n\nimport { colors, getThemeColor } from '@/charts/utils/color';\nimport { Icon, LegacyButton, OverflowGroup } from '@/components';\n\nimport type { ChartChildProps } from './types';\n\nexport type LegendProps<TData extends object> = {\n    items: ChartChildProps<TData>[];\n    hoverIndex: number | undefined;\n    onHover: (index: number | undefined) => void;\n    onToggle: (name: keyof TData) => void;\n};\n\nfunction getDarkerThemeColor(color: string | undefined) {\n    const colorName = Object.keys(colors).find(name => colors[name] === color);\n\n    if (!colorName) {\n        return undefined;\n    }\n\n    return getThemeColor(colorName.replace(/-\\d+$/, '-300'));\n}\n\nexport function Legend<TData extends object>(props: LegendProps<TData>) {\n    const { items, onHover: handleHover, onToggle: handleToggle } = props;\n\n    const handleMouseEnter = (item: ChartChildProps<TData>, index: number) => {\n        if (item.isHidden) {\n            return;\n        }\n\n        handleHover(index);\n    };\n    const handleMouseLeave = () => handleHover(undefined);\n\n    const handleClick = (item: ChartChildProps<TData>) => {\n        // remove hover if hiding the item\n        if (!item.isHidden) {\n            handleHover(undefined);\n        }\n\n        handleToggle(item.dataKey);\n    };\n\n    const moreButton = (moreButtonText: string) => (\n        <LegacyButton appearance=\"transparent\" className=\"!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700\">\n            {moreButtonText}\n        </LegacyButton>\n    );\n\n    return (\n        // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\n        <OverflowGroup className=\"mt-3 w-full gap-x-1\" moreButton={moreButton}>\n            {items.map((item, index) => {\n                const className = 'mr-1 flex h-3.5 w-3.5 rounded-sm border';\n                const style: React.CSSProperties = {};\n                const darkerThemeColor = getDarkerThemeColor(item.color);\n\n                if (!item.isHidden) {\n                    style.backgroundColor = item.color;\n                    style.borderColor = darkerThemeColor;\n                }\n\n                return (\n                    <button\n                        key={`${item.label}_${index}`}\n                        className=\"flex items-center rounded px-1 !text-xs hover:bg-gray-100 focus-visible:yt-focus\"\n                        onClick={event => {\n                            event?.preventDefault();\n                            handleClick(item);\n                        }}\n                        onMouseEnter={() => handleMouseEnter(item, index)}\n                        onMouseLeave={() => handleMouseLeave()}>\n                        <span className={className} style={style}>\n                            {item.isHidden ? null : <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" />}\n                        </span>\n                        {item.label}\n                    </button>\n                );\n            })}\n        </OverflowGroup>\n    );\n}\n"],"names":["color","colors","getThemeColor","LegacyButton","OverflowGroup","Icon"],"mappings":";;;;;;;AAcA,SAAS,oBAAoBA,SAA2B;AACpD,QAAM,YAAY,OAAO,KAAKC,YAAM,EAAE,KAAK,CAAA,SAAQA,MAAAA,OAAO,IAAI,MAAMD,OAAK;AAEzE,MAAI,CAAC,WAAW;AACZ,WAAO;AAAA,EACX;AAEA,SAAOE,MAAAA,cAAc,UAAU,QAAQ,SAAS,MAAM,CAAC;AAC3D;AAEO,SAAS,OAA6B,OAA2B;AACpE,QAAM,EAAE,OAAO,SAAS,aAAa,UAAU,iBAAiB;AAEhE,QAAM,mBAAmB,CAAC,MAA8B,UAAkB;AACtE,QAAI,KAAK,UAAU;AACf;AAAA,IACJ;AAEA,gBAAY,KAAK;AAAA,EACrB;AACA,QAAM,mBAAmB,MAAM,YAAY,MAAS;AAEpD,QAAM,cAAc,CAAC,SAAiC;AAElD,QAAI,CAAC,KAAK,UAAU;AAChB,kBAAY,MAAS;AAAA,IACzB;AAEA,iBAAa,KAAK,OAAO;AAAA,EAC7B;AAEA,QAAM,aAAa,CAAC,mBAChB,sBAAA,cAACC,OAAAA,gBAAa,YAAW,eAAc,WAAU,sDAAA,GAC5C,cACL;AAGJ;AAAA;AAAA,IAEI,sBAAA,cAACC,+BAAc,WAAU,uBAAsB,cAC1C,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,YAAM,YAAY;AAClB,YAAM,QAA6B,CAAA;AACnC,YAAM,mBAAmB,oBAAoB,KAAK,KAAK;AAEvD,UAAI,CAAC,KAAK,UAAU;AAChB,cAAM,kBAAkB,KAAK;AAC7B,cAAM,cAAc;AAAA,MACxB;AAEA,aACI,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,KAAK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,UAC3B,WAAU;AAAA,UACV,SAAS,CAAA,UAAS;AACd,mBAAO,eAAA;AACP,wBAAY,IAAI;AAAA,UACpB;AAAA,UACA,cAAc,MAAM,iBAAiB,MAAM,KAAK;AAAA,UAChD,cAAc,MAAM,iBAAA;AAAA,QAAiB;AAAA,QACrC,sBAAA,cAAC,QAAA,EAAK,WAAsB,MAAA,GACvB,KAAK,WAAW,OAAO,sBAAA,cAACC,KAAAA,MAAA,EAAK,MAAK,aAAY,WAAU,8BAA6B,CAC1F;AAAA,QACC,KAAK;AAAA,MAAA;AAAA,IAGlB,CAAC,CACL;AAAA;AAER;;"}
+{"version":3,"file":"Legend.cjs","sources":["../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React from 'react';\n\nimport { colors, getThemeColor } from '@/charts/utils/color';\nimport { Icon, LegacyButton, OverflowGroup } from '@/components';\n\nimport type { ChartChildProps } from './types';\n\nexport type LegendProps<TData extends object> = {\n    items: ChartChildProps<TData>[];\n    hoverIndex: number | undefined;\n    onHover: (index: number | undefined) => void;\n    onToggle: (name: keyof TData) => void;\n};\n\nfunction getDarkerThemeColor(color: string | undefined) {\n    const colorName = Object.keys(colors).find(name => colors[name] === color);\n\n    if (!colorName) {\n        return undefined;\n    }\n\n    return getThemeColor(colorName.replace(/-\\d+$/u, '-300'));\n}\n\nexport function Legend<TData extends object>(props: LegendProps<TData>) {\n    const { items, onHover: handleHover, onToggle: handleToggle } = props;\n\n    const handleMouseEnter = (item: ChartChildProps<TData>, index: number) => {\n        if (item.isHidden) {\n            return;\n        }\n\n        handleHover(index);\n    };\n    const handleMouseLeave = () => handleHover(undefined);\n\n    const handleClick = (item: ChartChildProps<TData>) => {\n        // remove hover if hiding the item\n        if (!item.isHidden) {\n            handleHover(undefined);\n        }\n\n        handleToggle(item.dataKey);\n    };\n\n    const moreButton = (moreButtonText: string) => (\n        <LegacyButton appearance=\"transparent\" className=\"!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700\">\n            {moreButtonText}\n        </LegacyButton>\n    );\n\n    return (\n        // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\n        <OverflowGroup className=\"mt-3 w-full gap-x-1\" moreButton={moreButton}>\n            {items.map((item, index) => {\n                const className = 'mr-1 flex h-3.5 w-3.5 rounded-sm border';\n                const style: React.CSSProperties = {};\n                const darkerThemeColor = getDarkerThemeColor(item.color);\n\n                if (!item.isHidden) {\n                    style.backgroundColor = item.color;\n                    style.borderColor = darkerThemeColor;\n                }\n\n                return (\n                    <button\n                        key={`${item.label}_${index}`}\n                        className=\"flex items-center rounded px-1 !text-xs hover:bg-gray-100 focus-visible:yt-focus\"\n                        onClick={event => {\n                            event?.preventDefault();\n                            handleClick(item);\n                        }}\n                        onMouseEnter={() => handleMouseEnter(item, index)}\n                        onMouseLeave={() => handleMouseLeave()}>\n                        <span className={className} style={style}>\n                            {item.isHidden ? null : <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" />}\n                        </span>\n                        {item.label}\n                    </button>\n                );\n            })}\n        </OverflowGroup>\n    );\n}\n"],"names":["color","colors","getThemeColor","LegacyButton","OverflowGroup","Icon"],"mappings":";;;;;;;AAcA,SAAS,oBAAoBA,SAA2B;AACpD,QAAM,YAAY,OAAO,KAAKC,YAAM,EAAE,KAAK,CAAA,SAAQA,MAAAA,OAAO,IAAI,MAAMD,OAAK;AAEzE,MAAI,CAAC,WAAW;AACZ,WAAO;AAAA,EACX;AAEA,SAAOE,MAAAA,cAAc,UAAU,QAAQ,UAAU,MAAM,CAAC;AAC5D;AAEO,SAAS,OAA6B,OAA2B;AACpE,QAAM,EAAE,OAAO,SAAS,aAAa,UAAU,iBAAiB;AAEhE,QAAM,mBAAmB,CAAC,MAA8B,UAAkB;AACtE,QAAI,KAAK,UAAU;AACf;AAAA,IACJ;AAEA,gBAAY,KAAK;AAAA,EACrB;AACA,QAAM,mBAAmB,MAAM,YAAY,MAAS;AAEpD,QAAM,cAAc,CAAC,SAAiC;AAElD,QAAI,CAAC,KAAK,UAAU;AAChB,kBAAY,MAAS;AAAA,IACzB;AAEA,iBAAa,KAAK,OAAO;AAAA,EAC7B;AAEA,QAAM,aAAa,CAAC,mBAChB,sBAAA,cAACC,OAAAA,gBAAa,YAAW,eAAc,WAAU,sDAAA,GAC5C,cACL;AAGJ;AAAA;AAAA,IAEI,sBAAA,cAACC,+BAAc,WAAU,uBAAsB,cAC1C,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,YAAM,YAAY;AAClB,YAAM,QAA6B,CAAA;AACnC,YAAM,mBAAmB,oBAAoB,KAAK,KAAK;AAEvD,UAAI,CAAC,KAAK,UAAU;AAChB,cAAM,kBAAkB,KAAK;AAC7B,cAAM,cAAc;AAAA,MACxB;AAEA,aACI,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,KAAK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,UAC3B,WAAU;AAAA,UACV,SAAS,CAAA,UAAS;AACd,mBAAO,eAAA;AACP,wBAAY,IAAI;AAAA,UACpB;AAAA,UACA,cAAc,MAAM,iBAAiB,MAAM,KAAK;AAAA,UAChD,cAAc,MAAM,iBAAA;AAAA,QAAiB;AAAA,QACrC,sBAAA,cAAC,QAAA,EAAK,WAAsB,MAAA,GACvB,KAAK,WAAW,OAAO,sBAAA,cAACC,KAAAA,MAAA,EAAK,MAAK,aAAY,WAAU,8BAA6B,CAC1F;AAAA,QACC,KAAK;AAAA,MAAA;AAAA,IAGlB,CAAC,CACL;AAAA;AAER;;"}

package/dist/charts/components/Legend.js

@@ -8,7 +8,7 @@ function getDarkerThemeColor(color) {
   if (!colorName) {
     return void 0;
   }
-  return getThemeColor(colorName.replace(/-\d+$/, "-300"));
+  return getThemeColor(colorName.replace(/-\d+$/u, "-300"));
 }
 function Legend(props) {
   const { items, onHover: handleHover, onToggle: handleToggle } = props;

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

@@ -1 +1 @@
-{"version":3,"file":"Legend.js","sources":["../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React from 'react';\n\nimport { colors, getThemeColor } from '@/charts/utils/color';\nimport { Icon, LegacyButton, OverflowGroup } from '@/components';\n\nimport type { ChartChildProps } from './types';\n\nexport type LegendProps<TData extends object> = {\n    items: ChartChildProps<TData>[];\n    hoverIndex: number | undefined;\n    onHover: (index: number | undefined) => void;\n    onToggle: (name: keyof TData) => void;\n};\n\nfunction getDarkerThemeColor(color: string | undefined) {\n    const colorName = Object.keys(colors).find(name => colors[name] === color);\n\n    if (!colorName) {\n        return undefined;\n    }\n\n    return getThemeColor(colorName.replace(/-\\d+$/, '-300'));\n}\n\nexport function Legend<TData extends object>(props: LegendProps<TData>) {\n    const { items, onHover: handleHover, onToggle: handleToggle } = props;\n\n    const handleMouseEnter = (item: ChartChildProps<TData>, index: number) => {\n        if (item.isHidden) {\n            return;\n        }\n\n        handleHover(index);\n    };\n    const handleMouseLeave = () => handleHover(undefined);\n\n    const handleClick = (item: ChartChildProps<TData>) => {\n        // remove hover if hiding the item\n        if (!item.isHidden) {\n            handleHover(undefined);\n        }\n\n        handleToggle(item.dataKey);\n    };\n\n    const moreButton = (moreButtonText: string) => (\n        <LegacyButton appearance=\"transparent\" className=\"!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700\">\n            {moreButtonText}\n        </LegacyButton>\n    );\n\n    return (\n        // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\n        <OverflowGroup className=\"mt-3 w-full gap-x-1\" moreButton={moreButton}>\n            {items.map((item, index) => {\n                const className = 'mr-1 flex h-3.5 w-3.5 rounded-sm border';\n                const style: React.CSSProperties = {};\n                const darkerThemeColor = getDarkerThemeColor(item.color);\n\n                if (!item.isHidden) {\n                    style.backgroundColor = item.color;\n                    style.borderColor = darkerThemeColor;\n                }\n\n                return (\n                    <button\n                        key={`${item.label}_${index}`}\n                        className=\"flex items-center rounded px-1 !text-xs hover:bg-gray-100 focus-visible:yt-focus\"\n                        onClick={event => {\n                            event?.preventDefault();\n                            handleClick(item);\n                        }}\n                        onMouseEnter={() => handleMouseEnter(item, index)}\n                        onMouseLeave={() => handleMouseLeave()}>\n                        <span className={className} style={style}>\n                            {item.isHidden ? null : <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" />}\n                        </span>\n                        {item.label}\n                    </button>\n                );\n            })}\n        </OverflowGroup>\n    );\n}\n"],"names":["React"],"mappings":";;;;;AAcA,SAAS,oBAAoB,OAA2B;AACpD,QAAM,YAAY,OAAO,KAAK,MAAM,EAAE,KAAK,CAAA,SAAQ,OAAO,IAAI,MAAM,KAAK;AAEzE,MAAI,CAAC,WAAW;AACZ,WAAO;AAAA,EACX;AAEA,SAAO,cAAc,UAAU,QAAQ,SAAS,MAAM,CAAC;AAC3D;AAEO,SAAS,OAA6B,OAA2B;AACpE,QAAM,EAAE,OAAO,SAAS,aAAa,UAAU,iBAAiB;AAEhE,QAAM,mBAAmB,CAAC,MAA8B,UAAkB;AACtE,QAAI,KAAK,UAAU;AACf;AAAA,IACJ;AAEA,gBAAY,KAAK;AAAA,EACrB;AACA,QAAM,mBAAmB,MAAM,YAAY,MAAS;AAEpD,QAAM,cAAc,CAAC,SAAiC;AAElD,QAAI,CAAC,KAAK,UAAU;AAChB,kBAAY,MAAS;AAAA,IACzB;AAEA,iBAAa,KAAK,OAAO;AAAA,EAC7B;AAEA,QAAM,aAAa,CAAC,mBAChBA,+BAAA,cAAC,gBAAa,YAAW,eAAc,WAAU,sDAAA,GAC5C,cACL;AAGJ;AAAA;AAAA,IAEIA,+BAAA,cAAC,iBAAc,WAAU,uBAAsB,cAC1C,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,YAAM,YAAY;AAClB,YAAM,QAA6B,CAAA;AACnC,YAAM,mBAAmB,oBAAoB,KAAK,KAAK;AAEvD,UAAI,CAAC,KAAK,UAAU;AAChB,cAAM,kBAAkB,KAAK;AAC7B,cAAM,cAAc;AAAA,MACxB;AAEA,aACIA,+BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,KAAK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,UAC3B,WAAU;AAAA,UACV,SAAS,CAAA,UAAS;AACd,mBAAO,eAAA;AACP,wBAAY,IAAI;AAAA,UACpB;AAAA,UACA,cAAc,MAAM,iBAAiB,MAAM,KAAK;AAAA,UAChD,cAAc,MAAM,iBAAA;AAAA,QAAiB;AAAA,QACrCA,+BAAA,cAAC,QAAA,EAAK,WAAsB,MAAA,GACvB,KAAK,WAAW,OAAOA,+BAAA,cAAC,MAAA,EAAK,MAAK,aAAY,WAAU,8BAA6B,CAC1F;AAAA,QACC,KAAK;AAAA,MAAA;AAAA,IAGlB,CAAC,CACL;AAAA;AAER;"}
+{"version":3,"file":"Legend.js","sources":["../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React from 'react';\n\nimport { colors, getThemeColor } from '@/charts/utils/color';\nimport { Icon, LegacyButton, OverflowGroup } from '@/components';\n\nimport type { ChartChildProps } from './types';\n\nexport type LegendProps<TData extends object> = {\n    items: ChartChildProps<TData>[];\n    hoverIndex: number | undefined;\n    onHover: (index: number | undefined) => void;\n    onToggle: (name: keyof TData) => void;\n};\n\nfunction getDarkerThemeColor(color: string | undefined) {\n    const colorName = Object.keys(colors).find(name => colors[name] === color);\n\n    if (!colorName) {\n        return undefined;\n    }\n\n    return getThemeColor(colorName.replace(/-\\d+$/u, '-300'));\n}\n\nexport function Legend<TData extends object>(props: LegendProps<TData>) {\n    const { items, onHover: handleHover, onToggle: handleToggle } = props;\n\n    const handleMouseEnter = (item: ChartChildProps<TData>, index: number) => {\n        if (item.isHidden) {\n            return;\n        }\n\n        handleHover(index);\n    };\n    const handleMouseLeave = () => handleHover(undefined);\n\n    const handleClick = (item: ChartChildProps<TData>) => {\n        // remove hover if hiding the item\n        if (!item.isHidden) {\n            handleHover(undefined);\n        }\n\n        handleToggle(item.dataKey);\n    };\n\n    const moreButton = (moreButtonText: string) => (\n        <LegacyButton appearance=\"transparent\" className=\"!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700\">\n            {moreButtonText}\n        </LegacyButton>\n    );\n\n    return (\n        // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\n        <OverflowGroup className=\"mt-3 w-full gap-x-1\" moreButton={moreButton}>\n            {items.map((item, index) => {\n                const className = 'mr-1 flex h-3.5 w-3.5 rounded-sm border';\n                const style: React.CSSProperties = {};\n                const darkerThemeColor = getDarkerThemeColor(item.color);\n\n                if (!item.isHidden) {\n                    style.backgroundColor = item.color;\n                    style.borderColor = darkerThemeColor;\n                }\n\n                return (\n                    <button\n                        key={`${item.label}_${index}`}\n                        className=\"flex items-center rounded px-1 !text-xs hover:bg-gray-100 focus-visible:yt-focus\"\n                        onClick={event => {\n                            event?.preventDefault();\n                            handleClick(item);\n                        }}\n                        onMouseEnter={() => handleMouseEnter(item, index)}\n                        onMouseLeave={() => handleMouseLeave()}>\n                        <span className={className} style={style}>\n                            {item.isHidden ? null : <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" />}\n                        </span>\n                        {item.label}\n                    </button>\n                );\n            })}\n        </OverflowGroup>\n    );\n}\n"],"names":["React"],"mappings":";;;;;AAcA,SAAS,oBAAoB,OAA2B;AACpD,QAAM,YAAY,OAAO,KAAK,MAAM,EAAE,KAAK,CAAA,SAAQ,OAAO,IAAI,MAAM,KAAK;AAEzE,MAAI,CAAC,WAAW;AACZ,WAAO;AAAA,EACX;AAEA,SAAO,cAAc,UAAU,QAAQ,UAAU,MAAM,CAAC;AAC5D;AAEO,SAAS,OAA6B,OAA2B;AACpE,QAAM,EAAE,OAAO,SAAS,aAAa,UAAU,iBAAiB;AAEhE,QAAM,mBAAmB,CAAC,MAA8B,UAAkB;AACtE,QAAI,KAAK,UAAU;AACf;AAAA,IACJ;AAEA,gBAAY,KAAK;AAAA,EACrB;AACA,QAAM,mBAAmB,MAAM,YAAY,MAAS;AAEpD,QAAM,cAAc,CAAC,SAAiC;AAElD,QAAI,CAAC,KAAK,UAAU;AAChB,kBAAY,MAAS;AAAA,IACzB;AAEA,iBAAa,KAAK,OAAO;AAAA,EAC7B;AAEA,QAAM,aAAa,CAAC,mBAChBA,+BAAA,cAAC,gBAAa,YAAW,eAAc,WAAU,sDAAA,GAC5C,cACL;AAGJ;AAAA;AAAA,IAEIA,+BAAA,cAAC,iBAAc,WAAU,uBAAsB,cAC1C,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,YAAM,YAAY;AAClB,YAAM,QAA6B,CAAA;AACnC,YAAM,mBAAmB,oBAAoB,KAAK,KAAK;AAEvD,UAAI,CAAC,KAAK,UAAU;AAChB,cAAM,kBAAkB,KAAK;AAC7B,cAAM,cAAc;AAAA,MACxB;AAEA,aACIA,+BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,KAAK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,UAC3B,WAAU;AAAA,UACV,SAAS,CAAA,UAAS;AACd,mBAAO,eAAA;AACP,wBAAY,IAAI;AAAA,UACpB;AAAA,UACA,cAAc,MAAM,iBAAiB,MAAM,KAAK;AAAA,UAChD,cAAc,MAAM,iBAAA;AAAA,QAAiB;AAAA,QACrCA,+BAAA,cAAC,QAAA,EAAK,WAAsB,MAAA,GACvB,KAAK,WAAW,OAAOA,+BAAA,cAAC,MAAA,EAAK,MAAK,aAAY,WAAU,8BAA6B,CAC1F;AAAA,QACC,KAAK;AAAA,MAAA;AAAA,IAGlB,CAAC,CACL;AAAA;AAER;"}

package/dist/charts/components/Line/LineChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.cjs","sources":["../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { useChart } from '../useChartData';\n\nexport type LineChartProps<TData extends object> = {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function LineChart<TData extends object>(props: LineChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<LineChartProps<TData>>(props);\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-line\">\n                <RechartsPrimitive.LineChart\n                    data={data}\n                    margin={{\n                        bottom: 0,\n                        // ensures dots on the edges of the chart don't get cropped\n                        left: 4,\n                        right: 4,\n                        top: 4,\n                    }}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {renderLines(shapes, showDots, type)}\n                </RechartsPrimitive.LineChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n/**\n * Helper function to render line shapes as Recharts Line primitives. Extracted to be reusable across LineChart and ComposedChart.\n */\nexport const renderLines = (shapes: any[], showDots: boolean = false, type: CurveType = 'natural') => {\n    return shapes.map(shape => (\n        <RechartsPrimitive.Line key={shape.dataKey} {...shape} dot={showDots ? shape.dot : false} type={type} />\n    ));\n};\n\n// oxlint-disable-next-line no-empty-object-type\nexport type LineChartAreaProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Line<TData extends object>(_: LineChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nLineChart.Line = Line;\n"],"names":["stripCartesianProps","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACHA,OAAAA,oBAA2C,KAAK;AAEpD,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAeC,aAAAA,SAAgB,QAAQ;AAE3F,SACI,sBAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjC,sBAAA,cAACC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9D,sBAAA;AAAA,IAACC,6BAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,IACT;AAAA,IACA,sBAAA,cAACA,6BAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClD,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtE,sBAAA,cAACD,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACvD,sBAAA,cAACF,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACtD,YAAY,QAAQ,UAAU,IAAI;AAAA,EAAA,CAE3C,GACC,aACG,sBAAA,cAACC,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKO,MAAM,cAAc,CAAC,QAAe,WAAoB,OAAO,OAAkB,cAAc;AAClG,SAAO,OAAO,IAAI,CAAA,8CACbH,6BAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAU,GAAG,OAAO,KAAK,WAAW,MAAM,MAAM,OAAO,MAAY,CACzG;AACL;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;;;"}
+{"version":3,"file":"LineChart.cjs","sources":["../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { type ChartShape, useChart } from '../useChartData';\n\nexport type LineChartProps<TData extends object> = {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function LineChart<TData extends object>(props: LineChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<TData, LineChartProps<TData>>(props);\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-line\">\n                <RechartsPrimitive.LineChart\n                    data={data}\n                    margin={{\n                        bottom: 0,\n                        // ensures dots on the edges of the chart don't get cropped\n                        left: 4,\n                        right: 4,\n                        top: 4,\n                    }}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {renderLines(shapes, showDots, type)}\n                </RechartsPrimitive.LineChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n/**\n * Helper function to render line shapes as Recharts Line primitives. Extracted to be reusable across LineChart and ComposedChart.\n */\nexport const renderLines = (shapes: ChartShape[], showDots: boolean = false, type: CurveType = 'natural') => {\n    return shapes.map(shape => (\n        <RechartsPrimitive.Line key={shape.dataKey} {...shape} dot={showDots ? shape.dot : false} type={type} />\n    ));\n};\n\n// oxlint-disable-next-line no-empty-object-type\nexport type LineChartAreaProps<TData extends object> = ChartChildProps<TData>;\n\nfunction Line<TData extends object>(_: LineChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nLineChart.Line = Line;\n"],"names":["stripCartesianProps","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACHA,OAAAA,oBAAkD,KAAK;AAE3D,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAeC,aAAAA,SAAgB,QAAQ;AAE3F,SACI,sBAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjC,sBAAA,cAACC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9D,sBAAA;AAAA,IAACC,6BAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,IACT;AAAA,IACA,sBAAA,cAACA,6BAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClD,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtE,sBAAA,cAACD,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACvD,sBAAA,cAACF,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACtD,YAAY,QAAQ,UAAU,IAAI;AAAA,EAAA,CAE3C,GACC,aACG,sBAAA,cAACC,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKO,MAAM,cAAc,CAAC,QAAsB,WAAoB,OAAO,OAAkB,cAAc;AACzG,SAAO,OAAO,IAAI,CAAA,8CACbH,6BAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAU,GAAG,OAAO,KAAK,WAAW,MAAM,MAAM,OAAO,MAAY,CACzG;AACL;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;;;"}

package/dist/charts/components/Line/LineChart.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { ChartChildProps, CartesianChartProps, CurveType } from '../types';
+import { ChartShape } from '../useChartData';
 export type LineChartProps<TData extends object> = {
     /** Show dots for each data point
      * @default false
@@ -17,5 +18,5 @@ export declare namespace LineChart {
 /**
  * Helper function to render line shapes as Recharts Line primitives. Extracted to be reusable across LineChart and ComposedChart.
  */
-export declare const renderLines: (shapes: any[], showDots?: boolean, type?: CurveType) => React.JSX.Element[];
-export type LineChartAreaProps<TData extends object> = {} & ChartChildProps<TData>;
+export declare const renderLines: (shapes: ChartShape[], showDots?: boolean, type?: CurveType) => React.JSX.Element[];
+export type LineChartAreaProps<TData extends object> = ChartChildProps<TData>;

package/dist/charts/components/Line/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","sources":["../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { useChart } from '../useChartData';\n\nexport type LineChartProps<TData extends object> = {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function LineChart<TData extends object>(props: LineChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<LineChartProps<TData>>(props);\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-line\">\n                <RechartsPrimitive.LineChart\n                    data={data}\n                    margin={{\n                        bottom: 0,\n                        // ensures dots on the edges of the chart don't get cropped\n                        left: 4,\n                        right: 4,\n                        top: 4,\n                    }}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {renderLines(shapes, showDots, type)}\n                </RechartsPrimitive.LineChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n/**\n * Helper function to render line shapes as Recharts Line primitives. Extracted to be reusable across LineChart and ComposedChart.\n */\nexport const renderLines = (shapes: any[], showDots: boolean = false, type: CurveType = 'natural') => {\n    return shapes.map(shape => (\n        <RechartsPrimitive.Line key={shape.dataKey} {...shape} dot={showDots ? shape.dot : false} type={type} />\n    ));\n};\n\n// oxlint-disable-next-line no-empty-object-type\nexport type LineChartAreaProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Line<TData extends object>(_: LineChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nLineChart.Line = Line;\n"],"names":["React"],"mappings":";;;;;;;;AAuBO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH,oBAA2C,KAAK;AAEpD,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAe,SAAgB,QAAQ;AAE3F,SACIA,+BAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjCA,+BAAA,cAAC,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9DA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,IACT;AAAA,IACAA,+BAAA,cAAC,kBAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClDA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtEA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACvDA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACtD,YAAY,QAAQ,UAAU,IAAI;AAAA,EAAA,CAE3C,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKO,MAAM,cAAc,CAAC,QAAe,WAAoB,OAAO,OAAkB,cAAc;AAClG,SAAO,OAAO,IAAI,CAAA,uDACb,kBAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAU,GAAG,OAAO,KAAK,WAAW,MAAM,MAAM,OAAO,MAAY,CACzG;AACL;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;"}
+{"version":3,"file":"LineChart.js","sources":["../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { type ChartShape, useChart } from '../useChartData';\n\nexport type LineChartProps<TData extends object> = {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function LineChart<TData extends object>(props: LineChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<TData, LineChartProps<TData>>(props);\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-line\">\n                <RechartsPrimitive.LineChart\n                    data={data}\n                    margin={{\n                        bottom: 0,\n                        // ensures dots on the edges of the chart don't get cropped\n                        left: 4,\n                        right: 4,\n                        top: 4,\n                    }}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {renderLines(shapes, showDots, type)}\n                </RechartsPrimitive.LineChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n/**\n * Helper function to render line shapes as Recharts Line primitives. Extracted to be reusable across LineChart and ComposedChart.\n */\nexport const renderLines = (shapes: ChartShape[], showDots: boolean = false, type: CurveType = 'natural') => {\n    return shapes.map(shape => (\n        <RechartsPrimitive.Line key={shape.dataKey} {...shape} dot={showDots ? shape.dot : false} type={type} />\n    ));\n};\n\n// oxlint-disable-next-line no-empty-object-type\nexport type LineChartAreaProps<TData extends object> = ChartChildProps<TData>;\n\nfunction Line<TData extends object>(_: LineChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nLineChart.Line = Line;\n"],"names":["React"],"mappings":";;;;;;;;AAuBO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH,oBAAkD,KAAK;AAE3D,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAe,SAAgB,QAAQ;AAE3F,SACIA,+BAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjCA,+BAAA,cAAC,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9DA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,IACT;AAAA,IACAA,+BAAA,cAAC,kBAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClDA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtEA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACvDA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACtD,YAAY,QAAQ,UAAU,IAAI;AAAA,EAAA,CAE3C,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKO,MAAM,cAAc,CAAC,QAAsB,WAAoB,OAAO,OAAkB,cAAc;AACzG,SAAO,OAAO,IAAI,CAAA,uDACb,kBAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAU,GAAG,OAAO,KAAK,WAAW,MAAM,MAAM,OAAO,MAAY,CACzG;AACL;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;"}

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

@@ -40,10 +40,10 @@ function Segment(_) {
 PieChart.Segment = Segment;
 const RADIAN = Math.PI / 180;
 function Label(props) {
-  const { cx, cy, midAngle, name, innerRadius, outerRadius } = props;
-  const radius = innerRadius + (outerRadius - innerRadius) * 0.7;
-  const x = cx + radius * Math.cos(-midAngle * RADIAN);
-  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+  const { cx = 0, cy = 0, midAngle = 0, name, innerRadius = 0, outerRadius = 0 } = props;
+  const radius = Number(innerRadius) + (Number(outerRadius) - Number(innerRadius)) * 0.7;
+  const x = Number(cx) + radius * Math.cos(-midAngle * RADIAN);
+  const y = Number(cy) + radius * Math.sin(-midAngle * RADIAN);
   return /* @__PURE__ */ React.createElement(
     "text",
     {

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

@@ -1 +1 @@
-{"version":3,"file":"PieChart.cjs","sources":["../../../../src/charts/components/Pie/PieChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getInverseThemeColor } from '@/charts/utils/color';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, PolarChartProps } from '../types';\n\nimport { usePieChart } from './util';\n\nexport type PieChartProps = {\n    /** Show labels inside each segment\n     * @default false\n     */\n    showLabels?: boolean;\n} & PolarChartProps;\n\nexport function PieChart<TData extends object>(props: PieChartProps) {\n    const { children, formatter, showLabels = false, showLegend = false, tooltipTitle, unit, ...attributes } = props;\n    const { pieProps, setRadius, items, activeIndex, setActiveIndex, toggleItem } = usePieChart<TData>(children, {\n        formatter,\n        unit,\n    });\n    const className = cn('aspect-square', attributes.className);\n\n    return (\n        <div className=\"relative\" data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className={className} data-taco=\"chart-pie\" onSetWidth={setRadius}>\n                <RechartsPrimitive.PieChart>\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.Pie {...pieProps} label={showLabels ? <Label /> : undefined} />\n                </RechartsPrimitive.PieChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\nexport type PieChartSegmentProps<TData extends object> = {\n    value: number;\n} & Omit<ChartChildProps<TData>, 'dataKey' | 'formatter' | 'unit'>;\n\nfunction Segment<TData extends object>(_: PieChartSegmentProps<TData>): React.JSX.Element | null {\n    return null;\n}\nPieChart.Segment = Segment;\n\nconst RADIAN = Math.PI / 180;\n\nfunction Label(props: any) {\n    const { cx, cy, midAngle, name, innerRadius, outerRadius } = props;\n    const radius = innerRadius + (outerRadius - innerRadius) * 0.7;\n    const x = cx + radius * Math.cos(-midAngle * RADIAN);\n    const y = cy + radius * Math.sin(-midAngle * RADIAN);\n\n    return (\n        <text\n            x={x}\n            y={y}\n            fontSize={12}\n            fill={getInverseThemeColor(props.payload?.payload?.color ?? '')}\n            textAnchor=\"middle\"\n            dominantBaseline=\"middle\">\n            {name}\n        </text>\n    );\n}\n"],"names":["usePieChart","ChartWrapper","RechartsPrimitive","Tooltip","Legend","getInverseThemeColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,SAAS,SAA+B,OAAsB;AACjE,QAAM,EAAE,UAAU,WAAW,aAAa,OAAO,aAAa,OAAO,cAAc,MAAM,GAAG,WAAA,IAAe;AAC3G,QAAM,EAAE,UAAU,WAAW,OAAO,aAAa,gBAAgB,WAAA,IAAeA,KAAAA,YAAmB,UAAU;AAAA,IACzG;AAAA,IACA;AAAA,EAAA,CACH;AACD,QAAM,YAAY,GAAG,iBAAiB,WAAW,SAAS;AAE1D,SACI,sBAAA,cAAC,OAAA,EAAI,WAAU,YAAW,aAAU,gBAAA,GAChC,sBAAA,cAACC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAsB,aAAU,aAAY,YAAY,UAAA,GAClF,sBAAA,cAACC,6BAAkB,UAAlB,MACG,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,GAAI,GACtE,sBAAA,cAACD,6BAAkB,KAAlB,EAAuB,GAAG,UAAU,OAAO,aAAa,sBAAA,cAAC,OAAA,IAAM,IAAK,OAAA,CAAW,CACpF,CACJ,GACC,aACG,sBAAA,cAACE,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAMA,SAAS,QAA8B,GAA0D;AAC7F,SAAO;AACX;AACA,SAAS,UAAU;AAEnB,MAAM,SAAS,KAAK,KAAK;AAEzB,SAAS,MAAM,OAAY;AACvB,QAAM,EAAE,IAAI,IAAI,UAAU,MAAM,aAAa,gBAAgB;AAC7D,QAAM,SAAS,eAAe,cAAc,eAAe;AAC3D,QAAM,IAAI,KAAK,SAAS,KAAK,IAAI,CAAC,WAAW,MAAM;AACnD,QAAM,IAAI,KAAK,SAAS,KAAK,IAAI,CAAC,WAAW,MAAM;AAEnD,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,MAAMC,MAAAA,qBAAqB,MAAM,SAAS,SAAS,SAAS,EAAE;AAAA,MAC9D,YAAW;AAAA,MACX,kBAAiB;AAAA,IAAA;AAAA,IAChB;AAAA,EAAA;AAGb;;"}
+{"version":3,"file":"PieChart.cjs","sources":["../../../../src/charts/components/Pie/PieChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport type { PieLabelRenderProps } from 'recharts/types/polar/Pie';\n\nimport { getInverseThemeColor } from '@/charts/utils/color';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, PolarChartProps } from '../types';\n\nimport { usePieChart } from './util';\n\nexport type PieChartProps = {\n    /** Show labels inside each segment\n     * @default false\n     */\n    showLabels?: boolean;\n} & PolarChartProps;\n\nexport function PieChart<TData extends object>(props: PieChartProps) {\n    const { children, formatter, showLabels = false, showLegend = false, tooltipTitle, unit, ...attributes } = props;\n    const { pieProps, setRadius, items, activeIndex, setActiveIndex, toggleItem } = usePieChart<TData>(children, {\n        formatter,\n        unit,\n    });\n    const className = cn('aspect-square', attributes.className);\n\n    return (\n        <div className=\"relative\" data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className={className} data-taco=\"chart-pie\" onSetWidth={setRadius}>\n                <RechartsPrimitive.PieChart>\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.Pie {...pieProps} label={showLabels ? <Label /> : undefined} />\n                </RechartsPrimitive.PieChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\nexport type PieChartSegmentProps<TData extends object> = {\n    value: number;\n} & Omit<ChartChildProps<TData>, 'dataKey' | 'formatter' | 'unit'>;\n\nfunction Segment<TData extends object>(_: PieChartSegmentProps<TData>): React.JSX.Element | null {\n    return null;\n}\nPieChart.Segment = Segment;\n\nconst RADIAN = Math.PI / 180;\n\n// Recharts injects the render props when it clones this element, so they're all optional here.\nfunction Label(props: Partial<PieLabelRenderProps>) {\n    const { cx = 0, cy = 0, midAngle = 0, name, innerRadius = 0, outerRadius = 0 } = props;\n    const radius = Number(innerRadius) + (Number(outerRadius) - Number(innerRadius)) * 0.7;\n    const x = Number(cx) + radius * Math.cos(-midAngle * RADIAN);\n    const y = Number(cy) + radius * Math.sin(-midAngle * RADIAN);\n\n    return (\n        <text\n            x={x}\n            y={y}\n            fontSize={12}\n            fill={getInverseThemeColor(props.payload?.payload?.color ?? '')}\n            textAnchor=\"middle\"\n            dominantBaseline=\"middle\">\n            {name}\n        </text>\n    );\n}\n"],"names":["usePieChart","ChartWrapper","RechartsPrimitive","Tooltip","Legend","getInverseThemeColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBO,SAAS,SAA+B,OAAsB;AACjE,QAAM,EAAE,UAAU,WAAW,aAAa,OAAO,aAAa,OAAO,cAAc,MAAM,GAAG,WAAA,IAAe;AAC3G,QAAM,EAAE,UAAU,WAAW,OAAO,aAAa,gBAAgB,WAAA,IAAeA,KAAAA,YAAmB,UAAU;AAAA,IACzG;AAAA,IACA;AAAA,EAAA,CACH;AACD,QAAM,YAAY,GAAG,iBAAiB,WAAW,SAAS;AAE1D,SACI,sBAAA,cAAC,OAAA,EAAI,WAAU,YAAW,aAAU,gBAAA,GAChC,sBAAA,cAACC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAsB,aAAU,aAAY,YAAY,UAAA,GAClF,sBAAA,cAACC,6BAAkB,UAAlB,MACG,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,GAAI,GACtE,sBAAA,cAACD,6BAAkB,KAAlB,EAAuB,GAAG,UAAU,OAAO,aAAa,sBAAA,cAAC,OAAA,IAAM,IAAK,OAAA,CAAW,CACpF,CACJ,GACC,aACG,sBAAA,cAACE,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAMA,SAAS,QAA8B,GAA0D;AAC7F,SAAO;AACX;AACA,SAAS,UAAU;AAEnB,MAAM,SAAS,KAAK,KAAK;AAGzB,SAAS,MAAM,OAAqC;AAChD,QAAM,EAAE,KAAK,GAAG,KAAK,GAAG,WAAW,GAAG,MAAM,cAAc,GAAG,cAAc,EAAA,IAAM;AACjF,QAAM,SAAS,OAAO,WAAW,KAAK,OAAO,WAAW,IAAI,OAAO,WAAW,KAAK;AACnF,QAAM,IAAI,OAAO,EAAE,IAAI,SAAS,KAAK,IAAI,CAAC,WAAW,MAAM;AAC3D,QAAM,IAAI,OAAO,EAAE,IAAI,SAAS,KAAK,IAAI,CAAC,WAAW,MAAM;AAE3D,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,MAAMC,MAAAA,qBAAqB,MAAM,SAAS,SAAS,SAAS,EAAE;AAAA,MAC9D,YAAW;AAAA,MACX,kBAAiB;AAAA,IAAA;AAAA,IAChB;AAAA,EAAA;AAGb;;"}

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

@@ -21,10 +21,10 @@ function Segment(_) {
 PieChart.Segment = Segment;
 const RADIAN = Math.PI / 180;
 function Label(props) {
-  const { cx, cy, midAngle, name, innerRadius, outerRadius } = props;
-  const radius = innerRadius + (outerRadius - innerRadius) * 0.7;
-  const x = cx + radius * Math.cos(-midAngle * RADIAN);
-  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+  const { cx = 0, cy = 0, midAngle = 0, name, innerRadius = 0, outerRadius = 0 } = props;
+  const radius = Number(innerRadius) + (Number(outerRadius) - Number(innerRadius)) * 0.7;
+  const x = Number(cx) + radius * Math.cos(-midAngle * RADIAN);
+  const y = Number(cy) + radius * Math.sin(-midAngle * RADIAN);
   return /* @__PURE__ */ React__default.createElement(
     "text",
     {

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

@@ -1 +1 @@
-{"version":3,"file":"PieChart.js","sources":["../../../../src/charts/components/Pie/PieChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getInverseThemeColor } from '@/charts/utils/color';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, PolarChartProps } from '../types';\n\nimport { usePieChart } from './util';\n\nexport type PieChartProps = {\n    /** Show labels inside each segment\n     * @default false\n     */\n    showLabels?: boolean;\n} & PolarChartProps;\n\nexport function PieChart<TData extends object>(props: PieChartProps) {\n    const { children, formatter, showLabels = false, showLegend = false, tooltipTitle, unit, ...attributes } = props;\n    const { pieProps, setRadius, items, activeIndex, setActiveIndex, toggleItem } = usePieChart<TData>(children, {\n        formatter,\n        unit,\n    });\n    const className = cn('aspect-square', attributes.className);\n\n    return (\n        <div className=\"relative\" data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className={className} data-taco=\"chart-pie\" onSetWidth={setRadius}>\n                <RechartsPrimitive.PieChart>\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.Pie {...pieProps} label={showLabels ? <Label /> : undefined} />\n                </RechartsPrimitive.PieChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\nexport type PieChartSegmentProps<TData extends object> = {\n    value: number;\n} & Omit<ChartChildProps<TData>, 'dataKey' | 'formatter' | 'unit'>;\n\nfunction Segment<TData extends object>(_: PieChartSegmentProps<TData>): React.JSX.Element | null {\n    return null;\n}\nPieChart.Segment = Segment;\n\nconst RADIAN = Math.PI / 180;\n\nfunction Label(props: any) {\n    const { cx, cy, midAngle, name, innerRadius, outerRadius } = props;\n    const radius = innerRadius + (outerRadius - innerRadius) * 0.7;\n    const x = cx + radius * Math.cos(-midAngle * RADIAN);\n    const y = cy + radius * Math.sin(-midAngle * RADIAN);\n\n    return (\n        <text\n            x={x}\n            y={y}\n            fontSize={12}\n            fill={getInverseThemeColor(props.payload?.payload?.color ?? '')}\n            textAnchor=\"middle\"\n            dominantBaseline=\"middle\">\n            {name}\n        </text>\n    );\n}\n"],"names":["React"],"mappings":";;;;;;;;AAoBO,SAAS,SAA+B,OAAsB;AACjE,QAAM,EAAE,UAAU,WAAW,aAAa,OAAO,aAAa,OAAO,cAAc,MAAM,GAAG,WAAA,IAAe;AAC3G,QAAM,EAAE,UAAU,WAAW,OAAO,aAAa,gBAAgB,WAAA,IAAe,YAAmB,UAAU;AAAA,IACzG;AAAA,IACA;AAAA,EAAA,CACH;AACD,QAAM,YAAY,GAAG,iBAAiB,WAAW,SAAS;AAE1D,SACIA,+BAAA,cAAC,OAAA,EAAI,WAAU,YAAW,aAAU,gBAAA,GAChCA,+BAAA,cAAC,cAAA,EAAc,GAAG,YAAY,WAAsB,aAAU,aAAY,YAAY,UAAA,GAClFA,+BAAA,cAAC,kBAAkB,UAAlB,MACGA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,aAAA,CAAc,GAAI,GACtEA,+BAAA,cAAC,kBAAkB,KAAlB,EAAuB,GAAG,UAAU,OAAO,aAAaA,+BAAA,cAAC,OAAA,IAAM,IAAK,OAAA,CAAW,CACpF,CACJ,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAMA,SAAS,QAA8B,GAA0D;AAC7F,SAAO;AACX;AACA,SAAS,UAAU;AAEnB,MAAM,SAAS,KAAK,KAAK;AAEzB,SAAS,MAAM,OAAY;AACvB,QAAM,EAAE,IAAI,IAAI,UAAU,MAAM,aAAa,gBAAgB;AAC7D,QAAM,SAAS,eAAe,cAAc,eAAe;AAC3D,QAAM,IAAI,KAAK,SAAS,KAAK,IAAI,CAAC,WAAW,MAAM;AACnD,QAAM,IAAI,KAAK,SAAS,KAAK,IAAI,CAAC,WAAW,MAAM;AAEnD,SACIA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,MAAM,qBAAqB,MAAM,SAAS,SAAS,SAAS,EAAE;AAAA,MAC9D,YAAW;AAAA,MACX,kBAAiB;AAAA,IAAA;AAAA,IAChB;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"PieChart.js","sources":["../../../../src/charts/components/Pie/PieChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport type { PieLabelRenderProps } from 'recharts/types/polar/Pie';\n\nimport { getInverseThemeColor } from '@/charts/utils/color';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, PolarChartProps } from '../types';\n\nimport { usePieChart } from './util';\n\nexport type PieChartProps = {\n    /** Show labels inside each segment\n     * @default false\n     */\n    showLabels?: boolean;\n} & PolarChartProps;\n\nexport function PieChart<TData extends object>(props: PieChartProps) {\n    const { children, formatter, showLabels = false, showLegend = false, tooltipTitle, unit, ...attributes } = props;\n    const { pieProps, setRadius, items, activeIndex, setActiveIndex, toggleItem } = usePieChart<TData>(children, {\n        formatter,\n        unit,\n    });\n    const className = cn('aspect-square', attributes.className);\n\n    return (\n        <div className=\"relative\" data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className={className} data-taco=\"chart-pie\" onSetWidth={setRadius}>\n                <RechartsPrimitive.PieChart>\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.Pie {...pieProps} label={showLabels ? <Label /> : undefined} />\n                </RechartsPrimitive.PieChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\nexport type PieChartSegmentProps<TData extends object> = {\n    value: number;\n} & Omit<ChartChildProps<TData>, 'dataKey' | 'formatter' | 'unit'>;\n\nfunction Segment<TData extends object>(_: PieChartSegmentProps<TData>): React.JSX.Element | null {\n    return null;\n}\nPieChart.Segment = Segment;\n\nconst RADIAN = Math.PI / 180;\n\n// Recharts injects the render props when it clones this element, so they're all optional here.\nfunction Label(props: Partial<PieLabelRenderProps>) {\n    const { cx = 0, cy = 0, midAngle = 0, name, innerRadius = 0, outerRadius = 0 } = props;\n    const radius = Number(innerRadius) + (Number(outerRadius) - Number(innerRadius)) * 0.7;\n    const x = Number(cx) + radius * Math.cos(-midAngle * RADIAN);\n    const y = Number(cy) + radius * Math.sin(-midAngle * RADIAN);\n\n    return (\n        <text\n            x={x}\n            y={y}\n            fontSize={12}\n            fill={getInverseThemeColor(props.payload?.payload?.color ?? '')}\n            textAnchor=\"middle\"\n            dominantBaseline=\"middle\">\n            {name}\n        </text>\n    );\n}\n"],"names":["React"],"mappings":";;;;;;;;AAqBO,SAAS,SAA+B,OAAsB;AACjE,QAAM,EAAE,UAAU,WAAW,aAAa,OAAO,aAAa,OAAO,cAAc,MAAM,GAAG,WAAA,IAAe;AAC3G,QAAM,EAAE,UAAU,WAAW,OAAO,aAAa,gBAAgB,WAAA,IAAe,YAAmB,UAAU;AAAA,IACzG;AAAA,IACA;AAAA,EAAA,CACH;AACD,QAAM,YAAY,GAAG,iBAAiB,WAAW,SAAS;AAE1D,SACIA,+BAAA,cAAC,OAAA,EAAI,WAAU,YAAW,aAAU,gBAAA,GAChCA,+BAAA,cAAC,cAAA,EAAc,GAAG,YAAY,WAAsB,aAAU,aAAY,YAAY,UAAA,GAClFA,+BAAA,cAAC,kBAAkB,UAAlB,MACGA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,aAAA,CAAc,GAAI,GACtEA,+BAAA,cAAC,kBAAkB,KAAlB,EAAuB,GAAG,UAAU,OAAO,aAAaA,+BAAA,cAAC,OAAA,IAAM,IAAK,OAAA,CAAW,CACpF,CACJ,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAMA,SAAS,QAA8B,GAA0D;AAC7F,SAAO;AACX;AACA,SAAS,UAAU;AAEnB,MAAM,SAAS,KAAK,KAAK;AAGzB,SAAS,MAAM,OAAqC;AAChD,QAAM,EAAE,KAAK,GAAG,KAAK,GAAG,WAAW,GAAG,MAAM,cAAc,GAAG,cAAc,EAAA,IAAM;AACjF,QAAM,SAAS,OAAO,WAAW,KAAK,OAAO,WAAW,IAAI,OAAO,WAAW,KAAK;AACnF,QAAM,IAAI,OAAO,EAAE,IAAI,SAAS,KAAK,IAAI,CAAC,WAAW,MAAM;AAC3D,QAAM,IAAI,OAAO,EAAE,IAAI,SAAS,KAAK,IAAI,CAAC,WAAW,MAAM;AAE3D,SACIA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,MAAM,qBAAqB,MAAM,SAAS,SAAS,SAAS,EAAE;AAAA,MAC9D,YAAW;AAAA,MACX,kBAAiB;AAAA,IAAA;AAAA,IAChB;AAAA,EAAA;AAGb;"}

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        activeIndex,\n        activeShape: (props: PieSectorDataItem) => <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\nfunction ActiveShape(props: PieSectorDataItem) {\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,UAA6B,sBAAA,cAAC,aAAA,EAAa,GAAG,OAAO;AAAA,IACnE,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;AAE/B,SAAS,YAAY,OAA0B;AAC3C,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

@@ -1,9 +1,10 @@
 import { default as React } from 'react';
+import { PieSectorDataItem } from 'recharts/types/polar/Pie';
 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;
+        activeShape: (props: PieSectorDataItem) => React.JSX.Element;
         children: React.JSX.Element[];
         data: import('../types').ChartChildProps<TData>[];
         dataKey: string;

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        activeIndex,\n        activeShape: (props: PieSectorDataItem) => <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\nfunction ActiveShape(props: PieSectorDataItem) {\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,UAA6BA,+BAAA,cAAC,aAAA,EAAa,GAAG,OAAO;AAAA,IACnE,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;AAE/B,SAAS,YAAY,OAA0B;AAC3C,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,10 @@
-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 { ChartShape } from './useChartData';
 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,8 +12,10 @@ 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 TickFormatter<TValue = any> = (value: TValue) => string;
 export type CurveType = 'natural' | 'linear' | 'step';
 export type ChartProps = {
     /** Show a legend below the chart, hidden by default
@@ -37,13 +41,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

package/dist/charts/components/useChartData.cjs

@@ -22,19 +22,21 @@ function useChart(children, options) {
       };
     });
     const shapes2 = items2.filter((item) => !hiddenItems[item.dataKey]).map((item) => {
+      const format = item.formatter;
       return {
         activeDot: {
           strokeWidth: 1
         },
         color: item.color,
-        dataKey: item.dataKey,
+        dataKey: item.dataKey.toString(),
         dot: {
           fillOpacity: 1
         },
         isAnimationActive: false,
         fill: item.color,
         fillOpacity: 1,
-        formatter: item.formatter,
+        // recharts' series Formatter passes the raw datum value; our chart formatters are numeric
+        formatter: format ? (value) => format(Number(value)) : void 0,
         name: item.label,
         stroke: item.color,
         strokeWidth: 1.5,
@@ -42,7 +44,7 @@ function useChart(children, options) {
       };
     });
     return { items: items2, shapes: shapes2 };
-  }, [children, hiddenItems]);
+  }, [children, hiddenItems, globalFormatter, options?.unit]);
   return { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem };
 }
 function useChartDataHiddenState() {

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

@@ -1 +1 @@
-{"version":3,"file":"useChartData.cjs","sources":["../../../src/charts/components/useChartData.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getThemeColor } from '@/charts/utils/color';\nimport { useLocalization } from '@/components/Provider/Localization';\n\nimport type { ChartChildProps, ChartValueFormatter } from './types';\n\nexport type useChartOptions = {\n    formatter?: ChartValueFormatter;\n    unit?: string;\n};\n\nexport type ChartShape = {\n    activeDot: {\n        strokeWidth: number;\n    };\n    color: string | undefined;\n    dataKey: string;\n    dot: {\n        fillOpacity: number;\n    };\n    isAnimationActive: boolean;\n    fill: string | undefined;\n    fillOpacity: number;\n    formatter: ChartValueFormatter | undefined;\n    name: string;\n    stroke: string | undefined;\n    strokeWidth: number;\n    unit?: string;\n};\n\nexport function useChart<TData extends object>(children: React.ReactNode, options?: useChartOptions) {\n    const [activeIndex, setActiveIndex] = React.useState<number | undefined>();\n    const [hiddenItems, toggleItem] = useChartDataHiddenState<TData>();\n    const localization = useLocalization();\n\n    const defaultFormatter = (value: number) =>\n        new Intl.NumberFormat(localization.locale, { minimumFractionDigits: 2 }).format(value);\n\n    const globalFormatter = options?.formatter ?? defaultFormatter;\n\n    const { items, shapes } = React.useMemo(() => {\n        const items = React.Children.toArray(children)\n            .filter(child => React.isValidElement<ChartChildProps<TData>>(child))\n            .map(child => {\n                const dataKey = child.props.dataKey ?? child.props.label;\n                return {\n                    ...child.props,\n                    dataKey,\n                    color: getThemeColor(child.props.color, 'blue-300'),\n                    formatter: child.props.formatter ?? globalFormatter,\n                    isHidden: !!hiddenItems[dataKey],\n                    unit: child.props.unit ?? options?.unit,\n                } as ChartChildProps<TData>;\n            });\n\n        const shapes: ChartShape[] = items\n            .filter(item => !hiddenItems[item.dataKey])\n            .map((item: ChartChildProps<TData>) => {\n                return {\n                    activeDot: {\n                        strokeWidth: 1,\n                    },\n                    color: item.color,\n                    dataKey: item.dataKey as string,\n                    dot: {\n                        fillOpacity: 1,\n                    },\n                    isAnimationActive: false,\n                    fill: item.color,\n                    fillOpacity: 1,\n                    formatter: item.formatter,\n                    name: item.label,\n                    stroke: item.color,\n                    strokeWidth: 1.5,\n                    unit: item.unit,\n                };\n            });\n\n        return { items, shapes };\n    }, [children, hiddenItems]);\n\n    return { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem };\n}\n\nexport function useChartDataHiddenState<TData extends object>(): [Record<keyof TData, boolean>, (name: keyof TData) => void] {\n    const [state, setState] = React.useState<Record<keyof TData, boolean>>({} as Record<keyof TData, boolean>);\n\n    function toggle(name: keyof TData) {\n        setState(currentState => {\n            const nextState = { ...currentState };\n\n            if (currentState[name]) {\n                delete nextState[name];\n            } else {\n                nextState[name] = true;\n            }\n\n            return nextState;\n        });\n    }\n\n    return [state, toggle];\n}\n"],"names":["useLocalization","items","getThemeColor","shapes"],"mappings":";;;;;AA+BO,SAAS,SAA+B,UAA2B,SAA2B;AACjG,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAA;AAC5C,QAAM,CAAC,aAAa,UAAU,IAAI,wBAAA;AAClC,QAAM,eAAeA,aAAAA,gBAAA;AAErB,QAAM,mBAAmB,CAAC,UACtB,IAAI,KAAK,aAAa,aAAa,QAAQ,EAAE,uBAAuB,EAAA,CAAG,EAAE,OAAO,KAAK;AAEzF,QAAM,kBAAkB,SAAS,aAAa;AAE9C,QAAM,EAAE,OAAO,OAAA,IAAW,MAAM,QAAQ,MAAM;AAC1C,UAAMC,SAAQ,MAAM,SAAS,QAAQ,QAAQ,EACxC,OAAO,CAAA,UAAS,MAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAA,UAAS;AACV,YAAM,UAAU,MAAM,MAAM,WAAW,MAAM,MAAM;AACnD,aAAO;AAAA,QACH,GAAG,MAAM;AAAA,QACT;AAAA,QACA,OAAOC,MAAAA,cAAc,MAAM,MAAM,OAAO,UAAU;AAAA,QAClD,WAAW,MAAM,MAAM,aAAa;AAAA,QACpC,UAAU,CAAC,CAAC,YAAY,OAAO;AAAA,QAC/B,MAAM,MAAM,MAAM,QAAQ,SAAS;AAAA,MAAA;AAAA,IAE3C,CAAC;AAEL,UAAMC,UAAuBF,OACxB,OAAO,CAAA,SAAQ,CAAC,YAAY,KAAK,OAAO,CAAC,EACzC,IAAI,CAAC,SAAiC;AACnC,aAAO;AAAA,QACH,WAAW;AAAA,UACP,aAAa;AAAA,QAAA;AAAA,QAEjB,OAAO,KAAK;AAAA,QACZ,SAAS,KAAK;AAAA,QACd,KAAK;AAAA,UACD,aAAa;AAAA,QAAA;AAAA,QAEjB,mBAAmB;AAAA,QACnB,MAAM,KAAK;AAAA,QACX,aAAa;AAAA,QACb,WAAW,KAAK;AAAA,QAChB,MAAM,KAAK;AAAA,QACX,QAAQ,KAAK;AAAA,QACb,aAAa;AAAA,QACb,MAAM,KAAK;AAAA,MAAA;AAAA,IAEnB,CAAC;AAEL,WAAO,EAAE,OAAAA,QAAO,QAAAE,QAAAA;AAAAA,EACpB,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,SAAO,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,WAAA;AAC1E;AAEO,SAAS,0BAA6G;AACzH,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAuC,CAAA,CAAkC;AAEzG,WAAS,OAAO,MAAmB;AAC/B,aAAS,CAAA,iBAAgB;AACrB,YAAM,YAAY,EAAE,GAAG,aAAA;AAEvB,UAAI,aAAa,IAAI,GAAG;AACpB,eAAO,UAAU,IAAI;AAAA,MACzB,OAAO;AACH,kBAAU,IAAI,IAAI;AAAA,MACtB;AAEA,aAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SAAO,CAAC,OAAO,MAAM;AACzB;;;"}
+{"version":3,"file":"useChartData.cjs","sources":["../../../src/charts/components/useChartData.tsx"],"sourcesContent":["import React from 'react';\nimport type { Formatter } from 'recharts/types/component/DefaultTooltipContent';\n\nimport { getThemeColor } from '@/charts/utils/color';\nimport { useLocalization } from '@/components/Provider/Localization';\n\nimport type { ChartChildProps, ChartValueFormatter } from './types';\n\nexport type useChartOptions = {\n    formatter?: ChartValueFormatter;\n    unit?: string;\n};\n\nexport type ChartShape = {\n    activeDot: {\n        strokeWidth: number;\n    };\n    color: string | undefined;\n    dataKey: string;\n    dot: {\n        fillOpacity: number;\n    };\n    isAnimationActive: boolean;\n    fill: string | undefined;\n    fillOpacity: number;\n    formatter: Formatter | undefined;\n    name: string;\n    stroke: string | undefined;\n    strokeWidth: number;\n    unit?: string;\n};\n\nexport function useChart<TData extends object>(children: React.ReactNode, options?: useChartOptions) {\n    const [activeIndex, setActiveIndex] = React.useState<number | undefined>();\n    const [hiddenItems, toggleItem] = useChartDataHiddenState<TData>();\n    const localization = useLocalization();\n\n    const defaultFormatter = (value: number) =>\n        new Intl.NumberFormat(localization.locale, { minimumFractionDigits: 2 }).format(value);\n\n    const globalFormatter = options?.formatter ?? defaultFormatter;\n\n    const { items, shapes } = React.useMemo(() => {\n        const items = React.Children.toArray(children)\n            .filter(child => React.isValidElement<ChartChildProps<TData>>(child))\n            .map(child => {\n                const dataKey = child.props.dataKey ?? child.props.label;\n                return {\n                    ...child.props,\n                    dataKey,\n                    color: getThemeColor(child.props.color, 'blue-300'),\n                    formatter: child.props.formatter ?? globalFormatter,\n                    isHidden: !!hiddenItems[dataKey],\n                    unit: child.props.unit ?? options?.unit,\n                } as ChartChildProps<TData>;\n            });\n\n        const shapes: ChartShape[] = items\n            .filter(item => !hiddenItems[item.dataKey])\n            .map((item: ChartChildProps<TData>) => {\n                const format = item.formatter;\n                return {\n                    activeDot: {\n                        strokeWidth: 1,\n                    },\n                    color: item.color,\n                    dataKey: item.dataKey.toString(),\n                    dot: {\n                        fillOpacity: 1,\n                    },\n                    isAnimationActive: false,\n                    fill: item.color,\n                    fillOpacity: 1,\n                    // recharts' series Formatter passes the raw datum value; our chart formatters are numeric\n                    formatter: format ? value => format(Number(value)) : undefined,\n                    name: item.label,\n                    stroke: item.color,\n                    strokeWidth: 1.5,\n                    unit: item.unit,\n                };\n            });\n\n        return { items, shapes };\n    }, [children, hiddenItems, globalFormatter, options?.unit]);\n\n    return { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem };\n}\n\nexport function useChartDataHiddenState<TData extends object>(): [\n    Partial<Record<keyof TData, boolean>>,\n    (name: keyof TData) => void,\n] {\n    const [state, setState] = React.useState<Partial<Record<keyof TData, boolean>>>({});\n\n    function toggle(name: keyof TData) {\n        setState(currentState => {\n            const nextState = { ...currentState };\n\n            if (currentState[name]) {\n                delete nextState[name];\n            } else {\n                nextState[name] = true;\n            }\n\n            return nextState;\n        });\n    }\n\n    return [state, toggle];\n}\n"],"names":["useLocalization","items","getThemeColor","shapes"],"mappings":";;;;;AAgCO,SAAS,SAA+B,UAA2B,SAA2B;AACjG,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAA;AAC5C,QAAM,CAAC,aAAa,UAAU,IAAI,wBAAA;AAClC,QAAM,eAAeA,aAAAA,gBAAA;AAErB,QAAM,mBAAmB,CAAC,UACtB,IAAI,KAAK,aAAa,aAAa,QAAQ,EAAE,uBAAuB,EAAA,CAAG,EAAE,OAAO,KAAK;AAEzF,QAAM,kBAAkB,SAAS,aAAa;AAE9C,QAAM,EAAE,OAAO,OAAA,IAAW,MAAM,QAAQ,MAAM;AAC1C,UAAMC,SAAQ,MAAM,SAAS,QAAQ,QAAQ,EACxC,OAAO,CAAA,UAAS,MAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAA,UAAS;AACV,YAAM,UAAU,MAAM,MAAM,WAAW,MAAM,MAAM;AACnD,aAAO;AAAA,QACH,GAAG,MAAM;AAAA,QACT;AAAA,QACA,OAAOC,MAAAA,cAAc,MAAM,MAAM,OAAO,UAAU;AAAA,QAClD,WAAW,MAAM,MAAM,aAAa;AAAA,QACpC,UAAU,CAAC,CAAC,YAAY,OAAO;AAAA,QAC/B,MAAM,MAAM,MAAM,QAAQ,SAAS;AAAA,MAAA;AAAA,IAE3C,CAAC;AAEL,UAAMC,UAAuBF,OACxB,OAAO,CAAA,SAAQ,CAAC,YAAY,KAAK,OAAO,CAAC,EACzC,IAAI,CAAC,SAAiC;AACnC,YAAM,SAAS,KAAK;AACpB,aAAO;AAAA,QACH,WAAW;AAAA,UACP,aAAa;AAAA,QAAA;AAAA,QAEjB,OAAO,KAAK;AAAA,QACZ,SAAS,KAAK,QAAQ,SAAA;AAAA,QACtB,KAAK;AAAA,UACD,aAAa;AAAA,QAAA;AAAA,QAEjB,mBAAmB;AAAA,QACnB,MAAM,KAAK;AAAA,QACX,aAAa;AAAA;AAAA,QAEb,WAAW,SAAS,CAAA,UAAS,OAAO,OAAO,KAAK,CAAC,IAAI;AAAA,QACrD,MAAM,KAAK;AAAA,QACX,QAAQ,KAAK;AAAA,QACb,aAAa;AAAA,QACb,MAAM,KAAK;AAAA,MAAA;AAAA,IAEnB,CAAC;AAEL,WAAO,EAAE,OAAAA,QAAO,QAAAE,QAAAA;AAAAA,EACpB,GAAG,CAAC,UAAU,aAAa,iBAAiB,SAAS,IAAI,CAAC;AAE1D,SAAO,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,WAAA;AAC1E;AAEO,SAAS,0BAGd;AACE,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAgD,CAAA,CAAE;AAElF,WAAS,OAAO,MAAmB;AAC/B,aAAS,CAAA,iBAAgB;AACrB,YAAM,YAAY,EAAE,GAAG,aAAA;AAEvB,UAAI,aAAa,IAAI,GAAG;AACpB,eAAO,UAAU,IAAI;AAAA,MACzB,OAAO;AACH,kBAAU,IAAI,IAAI;AAAA,MACtB;AAEA,aAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SAAO,CAAC,OAAO,MAAM;AACzB;;;"}

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

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { Formatter } from 'recharts/types/component/DefaultTooltipContent';
 import { ChartChildProps, ChartValueFormatter } from './types';
 export type useChartOptions = {
     formatter?: ChartValueFormatter;
@@ -16,7 +17,7 @@ export type ChartShape = {
     isAnimationActive: boolean;
     fill: string | undefined;
     fillOpacity: number;
-    formatter: ChartValueFormatter | undefined;
+    formatter: Formatter | undefined;
     name: string;
     stroke: string | undefined;
     strokeWidth: number;
@@ -30,4 +31,7 @@ export declare function useChart<TData extends object>(children: React.ReactNode
     globalFormatter: ChartValueFormatter;
     toggleItem: (name: keyof TData) => void;
 };
-export declare function useChartDataHiddenState<TData extends object>(): [Record<keyof TData, boolean>, (name: keyof TData) => void];
+export declare function useChartDataHiddenState<TData extends object>(): [
+    Partial<Record<keyof TData, boolean>>,
+    (name: keyof TData) => void
+];

package/dist/charts/components/useChartData.js

@@ -20,19 +20,21 @@ function useChart(children, options) {
       };
     });
     const shapes2 = items2.filter((item) => !hiddenItems[item.dataKey]).map((item) => {
+      const format = item.formatter;
       return {
         activeDot: {
           strokeWidth: 1
         },
         color: item.color,
-        dataKey: item.dataKey,
+        dataKey: item.dataKey.toString(),
         dot: {
           fillOpacity: 1
         },
         isAnimationActive: false,
         fill: item.color,
         fillOpacity: 1,
-        formatter: item.formatter,
+        // recharts' series Formatter passes the raw datum value; our chart formatters are numeric
+        formatter: format ? (value) => format(Number(value)) : void 0,
         name: item.label,
         stroke: item.color,
         strokeWidth: 1.5,
@@ -40,7 +42,7 @@ function useChart(children, options) {
       };
     });
     return { items: items2, shapes: shapes2 };
-  }, [children, hiddenItems]);
+  }, [children, hiddenItems, globalFormatter, options?.unit]);
   return { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem };
 }
 function useChartDataHiddenState() {

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

@@ -1 +1 @@
-{"version":3,"file":"useChartData.js","sources":["../../../src/charts/components/useChartData.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getThemeColor } from '@/charts/utils/color';\nimport { useLocalization } from '@/components/Provider/Localization';\n\nimport type { ChartChildProps, ChartValueFormatter } from './types';\n\nexport type useChartOptions = {\n    formatter?: ChartValueFormatter;\n    unit?: string;\n};\n\nexport type ChartShape = {\n    activeDot: {\n        strokeWidth: number;\n    };\n    color: string | undefined;\n    dataKey: string;\n    dot: {\n        fillOpacity: number;\n    };\n    isAnimationActive: boolean;\n    fill: string | undefined;\n    fillOpacity: number;\n    formatter: ChartValueFormatter | undefined;\n    name: string;\n    stroke: string | undefined;\n    strokeWidth: number;\n    unit?: string;\n};\n\nexport function useChart<TData extends object>(children: React.ReactNode, options?: useChartOptions) {\n    const [activeIndex, setActiveIndex] = React.useState<number | undefined>();\n    const [hiddenItems, toggleItem] = useChartDataHiddenState<TData>();\n    const localization = useLocalization();\n\n    const defaultFormatter = (value: number) =>\n        new Intl.NumberFormat(localization.locale, { minimumFractionDigits: 2 }).format(value);\n\n    const globalFormatter = options?.formatter ?? defaultFormatter;\n\n    const { items, shapes } = React.useMemo(() => {\n        const items = React.Children.toArray(children)\n            .filter(child => React.isValidElement<ChartChildProps<TData>>(child))\n            .map(child => {\n                const dataKey = child.props.dataKey ?? child.props.label;\n                return {\n                    ...child.props,\n                    dataKey,\n                    color: getThemeColor(child.props.color, 'blue-300'),\n                    formatter: child.props.formatter ?? globalFormatter,\n                    isHidden: !!hiddenItems[dataKey],\n                    unit: child.props.unit ?? options?.unit,\n                } as ChartChildProps<TData>;\n            });\n\n        const shapes: ChartShape[] = items\n            .filter(item => !hiddenItems[item.dataKey])\n            .map((item: ChartChildProps<TData>) => {\n                return {\n                    activeDot: {\n                        strokeWidth: 1,\n                    },\n                    color: item.color,\n                    dataKey: item.dataKey as string,\n                    dot: {\n                        fillOpacity: 1,\n                    },\n                    isAnimationActive: false,\n                    fill: item.color,\n                    fillOpacity: 1,\n                    formatter: item.formatter,\n                    name: item.label,\n                    stroke: item.color,\n                    strokeWidth: 1.5,\n                    unit: item.unit,\n                };\n            });\n\n        return { items, shapes };\n    }, [children, hiddenItems]);\n\n    return { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem };\n}\n\nexport function useChartDataHiddenState<TData extends object>(): [Record<keyof TData, boolean>, (name: keyof TData) => void] {\n    const [state, setState] = React.useState<Record<keyof TData, boolean>>({} as Record<keyof TData, boolean>);\n\n    function toggle(name: keyof TData) {\n        setState(currentState => {\n            const nextState = { ...currentState };\n\n            if (currentState[name]) {\n                delete nextState[name];\n            } else {\n                nextState[name] = true;\n            }\n\n            return nextState;\n        });\n    }\n\n    return [state, toggle];\n}\n"],"names":["React","items","shapes"],"mappings":";;;AA+BO,SAAS,SAA+B,UAA2B,SAA2B;AACjG,QAAM,CAAC,aAAa,cAAc,IAAIA,eAAM,SAAA;AAC5C,QAAM,CAAC,aAAa,UAAU,IAAI,wBAAA;AAClC,QAAM,eAAe,gBAAA;AAErB,QAAM,mBAAmB,CAAC,UACtB,IAAI,KAAK,aAAa,aAAa,QAAQ,EAAE,uBAAuB,EAAA,CAAG,EAAE,OAAO,KAAK;AAEzF,QAAM,kBAAkB,SAAS,aAAa;AAE9C,QAAM,EAAE,OAAO,OAAA,IAAWA,eAAM,QAAQ,MAAM;AAC1C,UAAMC,SAAQD,eAAM,SAAS,QAAQ,QAAQ,EACxC,OAAO,CAAA,UAASA,eAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAA,UAAS;AACV,YAAM,UAAU,MAAM,MAAM,WAAW,MAAM,MAAM;AACnD,aAAO;AAAA,QACH,GAAG,MAAM;AAAA,QACT;AAAA,QACA,OAAO,cAAc,MAAM,MAAM,OAAO,UAAU;AAAA,QAClD,WAAW,MAAM,MAAM,aAAa;AAAA,QACpC,UAAU,CAAC,CAAC,YAAY,OAAO;AAAA,QAC/B,MAAM,MAAM,MAAM,QAAQ,SAAS;AAAA,MAAA;AAAA,IAE3C,CAAC;AAEL,UAAME,UAAuBD,OACxB,OAAO,CAAA,SAAQ,CAAC,YAAY,KAAK,OAAO,CAAC,EACzC,IAAI,CAAC,SAAiC;AACnC,aAAO;AAAA,QACH,WAAW;AAAA,UACP,aAAa;AAAA,QAAA;AAAA,QAEjB,OAAO,KAAK;AAAA,QACZ,SAAS,KAAK;AAAA,QACd,KAAK;AAAA,UACD,aAAa;AAAA,QAAA;AAAA,QAEjB,mBAAmB;AAAA,QACnB,MAAM,KAAK;AAAA,QACX,aAAa;AAAA,QACb,WAAW,KAAK;AAAA,QAChB,MAAM,KAAK;AAAA,QACX,QAAQ,KAAK;AAAA,QACb,aAAa;AAAA,QACb,MAAM,KAAK;AAAA,MAAA;AAAA,IAEnB,CAAC;AAEL,WAAO,EAAE,OAAAA,QAAO,QAAAC,QAAAA;AAAAA,EACpB,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,SAAO,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,WAAA;AAC1E;AAEO,SAAS,0BAA6G;AACzH,QAAM,CAAC,OAAO,QAAQ,IAAIF,eAAM,SAAuC,CAAA,CAAkC;AAEzG,WAAS,OAAO,MAAmB;AAC/B,aAAS,CAAA,iBAAgB;AACrB,YAAM,YAAY,EAAE,GAAG,aAAA;AAEvB,UAAI,aAAa,IAAI,GAAG;AACpB,eAAO,UAAU,IAAI;AAAA,MACzB,OAAO;AACH,kBAAU,IAAI,IAAI;AAAA,MACtB;AAEA,aAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SAAO,CAAC,OAAO,MAAM;AACzB;"}
+{"version":3,"file":"useChartData.js","sources":["../../../src/charts/components/useChartData.tsx"],"sourcesContent":["import React from 'react';\nimport type { Formatter } from 'recharts/types/component/DefaultTooltipContent';\n\nimport { getThemeColor } from '@/charts/utils/color';\nimport { useLocalization } from '@/components/Provider/Localization';\n\nimport type { ChartChildProps, ChartValueFormatter } from './types';\n\nexport type useChartOptions = {\n    formatter?: ChartValueFormatter;\n    unit?: string;\n};\n\nexport type ChartShape = {\n    activeDot: {\n        strokeWidth: number;\n    };\n    color: string | undefined;\n    dataKey: string;\n    dot: {\n        fillOpacity: number;\n    };\n    isAnimationActive: boolean;\n    fill: string | undefined;\n    fillOpacity: number;\n    formatter: Formatter | undefined;\n    name: string;\n    stroke: string | undefined;\n    strokeWidth: number;\n    unit?: string;\n};\n\nexport function useChart<TData extends object>(children: React.ReactNode, options?: useChartOptions) {\n    const [activeIndex, setActiveIndex] = React.useState<number | undefined>();\n    const [hiddenItems, toggleItem] = useChartDataHiddenState<TData>();\n    const localization = useLocalization();\n\n    const defaultFormatter = (value: number) =>\n        new Intl.NumberFormat(localization.locale, { minimumFractionDigits: 2 }).format(value);\n\n    const globalFormatter = options?.formatter ?? defaultFormatter;\n\n    const { items, shapes } = React.useMemo(() => {\n        const items = React.Children.toArray(children)\n            .filter(child => React.isValidElement<ChartChildProps<TData>>(child))\n            .map(child => {\n                const dataKey = child.props.dataKey ?? child.props.label;\n                return {\n                    ...child.props,\n                    dataKey,\n                    color: getThemeColor(child.props.color, 'blue-300'),\n                    formatter: child.props.formatter ?? globalFormatter,\n                    isHidden: !!hiddenItems[dataKey],\n                    unit: child.props.unit ?? options?.unit,\n                } as ChartChildProps<TData>;\n            });\n\n        const shapes: ChartShape[] = items\n            .filter(item => !hiddenItems[item.dataKey])\n            .map((item: ChartChildProps<TData>) => {\n                const format = item.formatter;\n                return {\n                    activeDot: {\n                        strokeWidth: 1,\n                    },\n                    color: item.color,\n                    dataKey: item.dataKey.toString(),\n                    dot: {\n                        fillOpacity: 1,\n                    },\n                    isAnimationActive: false,\n                    fill: item.color,\n                    fillOpacity: 1,\n                    // recharts' series Formatter passes the raw datum value; our chart formatters are numeric\n                    formatter: format ? value => format(Number(value)) : undefined,\n                    name: item.label,\n                    stroke: item.color,\n                    strokeWidth: 1.5,\n                    unit: item.unit,\n                };\n            });\n\n        return { items, shapes };\n    }, [children, hiddenItems, globalFormatter, options?.unit]);\n\n    return { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem };\n}\n\nexport function useChartDataHiddenState<TData extends object>(): [\n    Partial<Record<keyof TData, boolean>>,\n    (name: keyof TData) => void,\n] {\n    const [state, setState] = React.useState<Partial<Record<keyof TData, boolean>>>({});\n\n    function toggle(name: keyof TData) {\n        setState(currentState => {\n            const nextState = { ...currentState };\n\n            if (currentState[name]) {\n                delete nextState[name];\n            } else {\n                nextState[name] = true;\n            }\n\n            return nextState;\n        });\n    }\n\n    return [state, toggle];\n}\n"],"names":["React","items","shapes"],"mappings":";;;AAgCO,SAAS,SAA+B,UAA2B,SAA2B;AACjG,QAAM,CAAC,aAAa,cAAc,IAAIA,eAAM,SAAA;AAC5C,QAAM,CAAC,aAAa,UAAU,IAAI,wBAAA;AAClC,QAAM,eAAe,gBAAA;AAErB,QAAM,mBAAmB,CAAC,UACtB,IAAI,KAAK,aAAa,aAAa,QAAQ,EAAE,uBAAuB,EAAA,CAAG,EAAE,OAAO,KAAK;AAEzF,QAAM,kBAAkB,SAAS,aAAa;AAE9C,QAAM,EAAE,OAAO,OAAA,IAAWA,eAAM,QAAQ,MAAM;AAC1C,UAAMC,SAAQD,eAAM,SAAS,QAAQ,QAAQ,EACxC,OAAO,CAAA,UAASA,eAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAA,UAAS;AACV,YAAM,UAAU,MAAM,MAAM,WAAW,MAAM,MAAM;AACnD,aAAO;AAAA,QACH,GAAG,MAAM;AAAA,QACT;AAAA,QACA,OAAO,cAAc,MAAM,MAAM,OAAO,UAAU;AAAA,QAClD,WAAW,MAAM,MAAM,aAAa;AAAA,QACpC,UAAU,CAAC,CAAC,YAAY,OAAO;AAAA,QAC/B,MAAM,MAAM,MAAM,QAAQ,SAAS;AAAA,MAAA;AAAA,IAE3C,CAAC;AAEL,UAAME,UAAuBD,OACxB,OAAO,CAAA,SAAQ,CAAC,YAAY,KAAK,OAAO,CAAC,EACzC,IAAI,CAAC,SAAiC;AACnC,YAAM,SAAS,KAAK;AACpB,aAAO;AAAA,QACH,WAAW;AAAA,UACP,aAAa;AAAA,QAAA;AAAA,QAEjB,OAAO,KAAK;AAAA,QACZ,SAAS,KAAK,QAAQ,SAAA;AAAA,QACtB,KAAK;AAAA,UACD,aAAa;AAAA,QAAA;AAAA,QAEjB,mBAAmB;AAAA,QACnB,MAAM,KAAK;AAAA,QACX,aAAa;AAAA;AAAA,QAEb,WAAW,SAAS,CAAA,UAAS,OAAO,OAAO,KAAK,CAAC,IAAI;AAAA,QACrD,MAAM,KAAK;AAAA,QACX,QAAQ,KAAK;AAAA,QACb,aAAa;AAAA,QACb,MAAM,KAAK;AAAA,MAAA;AAAA,IAEnB,CAAC;AAEL,WAAO,EAAE,OAAAA,QAAO,QAAAC,QAAAA;AAAAA,EACpB,GAAG,CAAC,UAAU,aAAa,iBAAiB,SAAS,IAAI,CAAC;AAE1D,SAAO,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,WAAA;AAC1E;AAEO,SAAS,0BAGd;AACE,QAAM,CAAC,OAAO,QAAQ,IAAIF,eAAM,SAAgD,CAAA,CAAE;AAElF,WAAS,OAAO,MAAmB;AAC/B,aAAS,CAAA,iBAAgB;AACrB,YAAM,YAAY,EAAE,GAAG,aAAA;AAEvB,UAAI,aAAa,IAAI,GAAG;AACpB,eAAO,UAAU,IAAI;AAAA,MACzB,OAAO;AACH,kBAAU,IAAI,IAAI;AAAA,MACtB;AAEA,aAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SAAO,CAAC,OAAO,MAAM;AACzB;"}