@economic/taco 2.49.0-server.4 → 2.49.1

package/dist/esm/packages/taco/src/charts/components/Donut/Legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.js","sources":["../../../../../../../../src/charts/components/Donut/Legend.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Button, Icon, OverflowGroup } from '../../../index';\n\nimport { getThemeColor } from '../../utils/color';\nimport { DonutChartProps, DonutChartSegmentProps, SegmentIds } from './DonutChart';\n\ntype LegendProps = Pick<DonutChartProps, 'formatter' | 'label' | 'legendPosition'> & {\n    data: DonutChartSegmentProps[];\n    hoveredItem: SegmentIds;\n    onClick: (entry: DonutChartSegmentProps | DonutChartSegmentProps[]) => void;\n    selectedItem: SegmentIds;\n    setHoveredItem: React.Dispatch<React.SetStateAction<SegmentIds>>;\n    total: number;\n    visibleItems: Record<string, boolean>;\n};\n\nexport const Legend = ({\n    legendPosition,\n    hoveredItem,\n    selectedItem,\n    data,\n    onClick,\n    setHoveredItem,\n    formatter,\n    total,\n    visibleItems,\n    label,\n}: 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: DonutChartSegmentProps | 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                className={cn('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {\n                    'bg-grey-100': isHovered && (!isTotal || legendPosition === 'right'),\n                    'bg-grey-200': isSelected && (!isTotal || legendPosition === 'right'),\n                })}\n                onClick={() => onClick(isTotal ? data : itemData)}\n                onMouseEnter={() => setHoveredItem(isTotal ? data.map(item => item.id) : [itemData.id])}\n                onMouseLeave={handleMouseLeave}>\n                {legendPosition === 'bottom' ? (\n                    <div className=\"flex items-center gap-1\">\n                        <span\n                            className={cn('ml-1 h-3 w-3 rounded-sm', {\n                                'border-grey-300 border !bg-white': !visibleItems[itemData.id],\n                            })}\n                            style={{ backgroundColor: getThemeColor(itemData.color) }}>\n                            {visibleItems[itemData.id] && isHovered && (\n                                <Icon name=\"tick-bold\" className=\"mb-2.5 !h-full !w-full text-white\" />\n                            )}\n                        </span>\n                        <div>{itemData.label}</div>\n                    </div>\n                ) : (\n                    <>\n                        <span\n                            className=\"ml-1 mt-1 h-9 w-2 rounded-[1px]\"\n                            style={{ backgroundColor: getThemeColor(itemData.color) }}\n                        />\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                    </>\n                )}\n            </li>\n        );\n    };\n\n    const moreButton = moreButtonText => (\n        <Button appearance=\"transparent\" className=\"text-grey-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    const className = cn('flex-grow pl-4', {\n        'w-full': legendPosition === 'bottom',\n    });\n    return (\n        <div className={className}>\n            <ul\n                className={cn(\n                    'mb-0 ml-0 mt-4 flex justify-center space-y-1',\n                    legendPosition === 'right' ? 'flex-col gap-1' : 'flex-row'\n                )}>\n                {legendPosition === 'right' ? (\n                    <>\n                        {renderLegendItem(null)}\n                        {data.map(renderLegendItem)}\n                    </>\n                ) : (\n                    <OverflowGroup className=\"w-full items-center py-1\" moreButton={moreButton}>\n                        {data.map(renderLegendItem)}\n                    </OverflowGroup>\n                )}\n            </ul>\n        </div>\n    );\n};\n"],"names":["Legend","_ref","legendPosition","hoveredItem","selectedItem","data","onClick","setHoveredItem","formatter","total","visibleItems","label","isTotalLegendSelected","length","isTotalLegendHovered","handleMouseLeave","renderLegendItem","entry","index","isTotal","itemData","id","value","color","isSelected","includes","isHovered","React","key","className","cn","onMouseEnter","map","item","onMouseLeave","style","backgroundColor","getThemeColor","Icon","name","moreButton","moreButtonText","Button","appearance","OverflowGroup"],"mappings":"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"}
+{"version":3,"file":"Legend.js","sources":["../../../../../../../../src/charts/components/Donut/Legend.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Button, Icon, OverflowGroup } from '../../../index';\n\nimport { getThemeColor } from '../../utils/color';\nimport { DonutChartProps, DonutChartSegmentProps, SegmentIds } from './DonutChart';\n\ntype LegendProps = Pick<DonutChartProps, 'formatter' | 'label' | 'legendPosition'> & {\n    data: DonutChartSegmentProps[];\n    hoveredItem: SegmentIds;\n    onClick: (entry: DonutChartSegmentProps | DonutChartSegmentProps[]) => void;\n    selectedItem: SegmentIds;\n    setHoveredItem: React.Dispatch<React.SetStateAction<SegmentIds>>;\n    total: number;\n    visibleItems: Record<string, boolean>;\n};\n\nexport const Legend = ({\n    legendPosition,\n    hoveredItem,\n    selectedItem,\n    data,\n    onClick,\n    setHoveredItem,\n    formatter,\n    total,\n    visibleItems,\n    label,\n}: 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: DonutChartSegmentProps | 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                className={cn('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {\n                    'bg-grey-100': isHovered && (!isTotal || legendPosition === 'right'),\n                    'bg-grey-200': isSelected && (!isTotal || legendPosition === 'right'),\n                })}\n                onClick={() => onClick(isTotal ? data : itemData)}\n                onMouseEnter={() => setHoveredItem(isTotal ? data.map(item => item.id) : [itemData.id])}\n                onMouseLeave={handleMouseLeave}>\n                {legendPosition === 'bottom' ? (\n                    <div className=\"flex items-center gap-1\">\n                        <span\n                            className={cn('ml-1 h-3 w-3 rounded-sm', {\n                                'border-grey-300 border !bg-white': !visibleItems[itemData.id],\n                            })}\n                            style={{ backgroundColor: getThemeColor(itemData.color) }}>\n                            {visibleItems[itemData.id] && isHovered && (\n                                <Icon name=\"tick-bold\" className=\"mb-2.5 !h-full !w-full text-white\" />\n                            )}\n                        </span>\n                        <div>{itemData.label}</div>\n                    </div>\n                ) : (\n                    <>\n                        <span\n                            className=\"ml-1 mt-1 h-9 w-2 rounded-[1px]\"\n                            style={{ backgroundColor: getThemeColor(itemData.color) }}\n                        />\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                    </>\n                )}\n            </li>\n        );\n    };\n\n    const moreButton = moreButtonText => (\n        <Button appearance=\"transparent\" className=\"text-grey-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    const className = cn('flex-grow pl-4', {\n        'w-full': legendPosition === 'bottom',\n    });\n    return (\n        <div className={className}>\n            <ul\n                className={cn(\n                    'mb-0 ml-0 mt-4 flex justify-center space-y-1',\n                    legendPosition === 'right' ? 'flex-col gap-1' : 'flex-row'\n                )}>\n                {legendPosition === 'right' ? (\n                    <>\n                        {renderLegendItem(null)}\n                        {data.map(renderLegendItem)}\n                    </>\n                ) : (\n                    <OverflowGroup className=\"w-full items-center py-1\" moreButton={moreButton}>\n                        {data.map(renderLegendItem)}\n                    </OverflowGroup>\n                )}\n            </ul>\n        </div>\n    );\n};\n"],"names":["Legend","legendPosition","hoveredItem","selectedItem","data","onClick","setHoveredItem","formatter","total","visibleItems","label","isTotalLegendSelected","length","isTotalLegendHovered","handleMouseLeave","renderLegendItem","entry","index","isTotal","itemData","id","value","color","isSelected","includes","isHovered","React","key","className","cn","onMouseEnter","map","item","onMouseLeave","style","backgroundColor","getThemeColor","Icon","name","moreButton","moreButtonText","Button","appearance","OverflowGroup"],"mappings":"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"}

package/dist/esm/packages/taco/src/charts/components/Donut/util.js

@@ -1,5 +1,5 @@
-var DONUT_WIDTH = 16;
-var HOVER_DONUT_WIDTH = 10;
+const DONUT_WIDTH = 16;
+const HOVER_DONUT_WIDTH = 10;
 
 export { DONUT_WIDTH, HOVER_DONUT_WIDTH };
 //# sourceMappingURL=util.js.map

package/dist/esm/packages/taco/src/charts/components/Donut/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../../../../src/charts/components/Donut/util.ts"],"sourcesContent":["export const DONUT_WIDTH = 16;\nexport const HOVER_DONUT_WIDTH = 10;\n"],"names":["DONUT_WIDTH","HOVER_DONUT_WIDTH"],"mappings":"IAAaA,WAAW,GAAG;IACdC,iBAAiB,GAAG;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../../../../src/charts/components/Donut/util.ts"],"sourcesContent":["export const DONUT_WIDTH = 16;\nexport const HOVER_DONUT_WIDTH = 10;\n"],"names":["DONUT_WIDTH","HOVER_DONUT_WIDTH"],"mappings":"MAAaA,WAAW,GAAG;MACdC,iBAAiB,GAAG;;;;"}

package/dist/esm/packages/taco/src/charts/components/Legend.js

@@ -88,30 +88,28 @@ import '../../hooks/useBoundaryOverflowDetection.js';
 import '../../utils/hooks/useOnClickOutside.js';
 
 function Legend(props) {
-  var activeIndex = props.activeIndex,
-    onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave,
-    onClick = props.onClick,
-    payload = props.payload,
-    layout = props.layout,
-    activeItems = props.activeItems;
-  var _useState = useState(null),
-    hoverIndex = _useState[0],
-    setHoverIndex = _useState[1];
-  var handleMouseEnter = function handleMouseEnter(entry, index) {
+  const {
+    activeIndex,
+    onMouseEnter,
+    onMouseLeave,
+    onClick,
+    payload,
+    layout,
+    activeItems
+  } = props;
+  const [hoverIndex, setHoverIndex] = useState(null);
+  const handleMouseEnter = (entry, index) => {
     setHoverIndex(index);
     if (activeItems[entry.dataKey]) onMouseEnter(entry, index);
   };
-  var handleMouseLeave = function handleMouseLeave() {
+  const handleMouseLeave = () => {
     onMouseLeave();
     setHoverIndex(null);
   };
-  var moreButton = function moreButton(moreButtonText) {
-    return /*#__PURE__*/React__default.createElement(Button, {
-      appearance: "transparent",
-      className: "text-grey-700"
-    }, moreButtonText);
-  };
+  const moreButton = moreButtonText => (/*#__PURE__*/React__default.createElement(Button, {
+    appearance: "transparent",
+    className: "text-grey-700"
+  }, moreButtonText));
   return /*#__PURE__*/React__default.createElement("div", {
     className: "mx-auto w-auto max-w-full overflow-hidden"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -121,33 +119,27 @@ function Legend(props) {
   }, /*#__PURE__*/React__default.createElement(OverflowGroup, {
     className: "w-full items-center py-1",
     moreButton: moreButton
-  }, payload.map(function (entry, index) {
-    return /*#__PURE__*/React__default.createElement("span", {
-      key: entry.dataKey + "-" + index,
-      className: cn(' hover:bg-grey-100 cursor-pointer px-[8px] py-[2px] hover:rounded-[4px]', {
-        'bg-grey-100 rounded': activeIndex === index
-      }),
-      onMouseEnter: function onMouseEnter() {
-        return handleMouseEnter(entry, index);
-      },
-      onMouseLeave: handleMouseLeave,
-      onClick: onClick ? function () {
-        return onClick(entry);
-      } : undefined
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "text-grey-700 flex items-center gap-[4px]"
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: cn('-mt-px ml-1 flex h-3 w-3 rounded-sm', {
-        'border-grey-300 border !bg-white': !activeItems[entry.dataKey]
-      }),
-      style: {
-        backgroundColor: entry.color
-      }
-    }, hoverIndex === index && activeItems[entry.dataKey] && (/*#__PURE__*/React__default.createElement(Icon, {
-      name: "tick-bold",
-      className: "!h-full !w-full text-white"
-    }))), entry.value));
-  }))));
+  }, payload.map((entry, index) => (/*#__PURE__*/React__default.createElement("span", {
+    key: `${entry.dataKey}-${index}`,
+    className: cn(' hover:bg-grey-100 cursor-pointer px-[8px] py-[2px] hover:rounded-[4px]', {
+      'bg-grey-100 rounded': activeIndex === index
+    }),
+    onMouseEnter: () => handleMouseEnter(entry, index),
+    onMouseLeave: handleMouseLeave,
+    onClick: onClick ? () => onClick(entry) : undefined
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "text-grey-700 flex items-center gap-[4px]"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: cn('-mt-px ml-1 flex h-3 w-3 rounded-sm', {
+      'border-grey-300 border !bg-white': !activeItems[entry.dataKey]
+    }),
+    style: {
+      backgroundColor: entry.color
+    }
+  }, hoverIndex === index && activeItems[entry.dataKey] && (/*#__PURE__*/React__default.createElement(Icon, {
+    name: "tick-bold",
+    className: "!h-full !w-full text-white"
+  }))), entry.value)))))));
 }
 
 export { Legend };

package/dist/esm/packages/taco/src/charts/components/Legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.js","sources":["../../../../../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'clsx';\nimport { Icon, OverflowGroup, Button } from '../../index';\n\nimport { ActiveChartItems, PayloadType } from './types';\n\ntype InternalProps<TType> = {\n    payload: PayloadType<TType>[];\n    layout: string;\n    activeIndex: number | undefined;\n};\n\nexport type LegendProps<TType> = {\n    activeItems: ActiveChartItems<TType>;\n    onMouseEnter: (entry: PayloadType<TType>, index: number) => void;\n    onMouseLeave: () => void;\n    onClick: (entry: PayloadType<TType>) => void;\n};\n\nexport type Props<TType> = LegendProps<TType> & InternalProps<TType>;\n\nexport function Legend<TType>(props: LegendProps<TType>) {\n    const { activeIndex, onMouseEnter, onMouseLeave, onClick, payload, layout, activeItems } = props as Props<TType>;\n    const [hoverIndex, setHoverIndex] = useState<number | null>(null);\n\n    const handleMouseEnter = (entry: PayloadType<TType>, index: number) => {\n        setHoverIndex(index);\n        if (activeItems[entry.dataKey]) onMouseEnter(entry, index);\n    };\n\n    const handleMouseLeave = () => {\n        onMouseLeave();\n        setHoverIndex(null);\n    };\n\n    const moreButton = moreButtonText => (\n        <Button appearance=\"transparent\" className=\"text-grey-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    return (\n        <div className=\"mx-auto w-auto max-w-full overflow-hidden\">\n            <div className={cn('mb-0 ml-0 flex justify-center', { 'flex-col': layout === 'vertical' })}>\n                {/** py-1 is need to make sure the more button focus outline doesn't get cropped */}\n                <OverflowGroup className=\"w-full items-center py-1\" moreButton={moreButton}>\n                    {payload.map((entry, index) => (\n                        <span\n                            key={`${entry.dataKey}-${index}`}\n                            className={cn(' hover:bg-grey-100 cursor-pointer px-[8px] py-[2px] hover:rounded-[4px]', {\n                                'bg-grey-100 rounded': activeIndex === index,\n                            })}\n                            onMouseEnter={() => handleMouseEnter(entry, index)}\n                            onMouseLeave={handleMouseLeave}\n                            onClick={onClick ? () => onClick(entry) : undefined}>\n                            <span className=\"text-grey-700 flex items-center gap-[4px]\">\n                                <span\n                                    className={cn('-mt-px ml-1 flex h-3 w-3 rounded-sm', {\n                                        'border-grey-300 border !bg-white': !activeItems[entry.dataKey],\n                                    })}\n                                    style={{ backgroundColor: entry.color }}>\n                                    {hoverIndex === index && activeItems[entry.dataKey] && (\n                                        <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" />\n                                    )}\n                                </span>\n                                {entry.value}\n                            </span>\n                        </span>\n                    ))}\n                </OverflowGroup>\n            </div>\n        </div>\n    );\n}\n"],"names":["Legend","props","activeIndex","onMouseEnter","onMouseLeave","onClick","payload","layout","activeItems","_useState","useState","hoverIndex","setHoverIndex","handleMouseEnter","entry","index","dataKey","handleMouseLeave","moreButton","moreButtonText","React","Button","appearance","className","cn","OverflowGroup","map","key","undefined","style","backgroundColor","color","Icon","name","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqBgBA,MAAMA,CAAQC,KAAyB;EACnD,IAAQC,WAAW,GAAwED,KAAqB,CAAxGC,WAAW;IAAEC,YAAY,GAA0DF,KAAqB,CAA3FE,YAAY;IAAEC,YAAY,GAA4CH,KAAqB,CAA7EG,YAAY;IAAEC,OAAO,GAAmCJ,KAAqB,CAA/DI,OAAO;IAAEC,OAAO,GAA0BL,KAAqB,CAAtDK,OAAO;IAAEC,MAAM,GAAkBN,KAAqB,CAA7CM,MAAM;IAAEC,WAAW,GAAKP,KAAqB,CAArCO,WAAW;EACtF,IAAAC,SAAA,GAAoCC,QAAQ,CAAgB,IAAI,CAAC;IAA1DC,UAAU,GAAAF,SAAA;IAAEG,aAAa,GAAAH,SAAA;EAEhC,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,KAAyB,EAAEC,KAAa;IAC9DH,aAAa,CAACG,KAAK,CAAC;IACpB,IAAIP,WAAW,CAACM,KAAK,CAACE,OAAO,CAAC,EAAEb,YAAY,CAACW,KAAK,EAAEC,KAAK,CAAC;GAC7D;EAED,IAAME,gBAAgB,GAAG,SAAnBA,gBAAgBA;IAClBb,YAAY,EAAE;IACdQ,aAAa,CAAC,IAAI,CAAC;GACtB;EAED,IAAMM,UAAU,GAAG,SAAbA,UAAUA,CAAGC,cAAc;IAAA,oBAC7BC,6BAACC,MAAM;MAACC,UAAU,EAAC,aAAa;MAACC,SAAS,EAAC;OACtCJ,cAAc,CACV;GACZ;EAED,oBACIC;IAAKG,SAAS,EAAC;kBACXH;IAAKG,SAAS,EAAEC,EAAE,CAAC,+BAA+B,EAAE;MAAE,UAAU,EAAEjB,MAAM,KAAK;KAAY;kBAErFa,6BAACK,aAAa;IAACF,SAAS,EAAC,0BAA0B;IAACL,UAAU,EAAEA;KAC3DZ,OAAO,CAACoB,GAAG,CAAC,UAACZ,KAAK,EAAEC,KAAK;IAAA,oBACtBK;MACIO,GAAG,EAAKb,KAAK,CAACE,OAAO,SAAID,KAAO;MAChCQ,SAAS,EAAEC,EAAE,CAAC,yEAAyE,EAAE;QACrF,qBAAqB,EAAEtB,WAAW,KAAKa;OAC1C,CAAC;MACFZ,YAAY,EAAE,SAAAA;QAAA,OAAMU,gBAAgB,CAACC,KAAK,EAAEC,KAAK,CAAC;;MAClDX,YAAY,EAAEa,gBAAgB;MAC9BZ,OAAO,EAAEA,OAAO,GAAG;QAAA,OAAMA,OAAO,CAACS,KAAK,CAAC;UAAGc;oBAC1CR;MAAMG,SAAS,EAAC;oBACZH;MACIG,SAAS,EAAEC,EAAE,CAAC,qCAAqC,EAAE;QACjD,kCAAkC,EAAE,CAAChB,WAAW,CAACM,KAAK,CAACE,OAAO;OACjE,CAAC;MACFa,KAAK,EAAE;QAAEC,eAAe,EAAEhB,KAAK,CAACiB;;OAC/BpB,UAAU,KAAKI,KAAK,IAAIP,WAAW,CAACM,KAAK,CAACE,OAAO,CAAC,kBAC/CI,6BAACY,IAAI;MAACC,IAAI,EAAC,WAAW;MAACV,SAAS,EAAC;MAA+B,CACnE,CACE,EACNT,KAAK,CAACoB,KAAK,CACT,CACJ;GACV,CAAC,CACU,CACd,CACJ;AAEd;;;;"}
+{"version":3,"file":"Legend.js","sources":["../../../../../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'clsx';\nimport { Icon, OverflowGroup, Button } from '../../index';\n\nimport { ActiveChartItems, PayloadType } from './types';\n\ntype InternalProps<TType> = {\n    payload: PayloadType<TType>[];\n    layout: string;\n    activeIndex: number | undefined;\n};\n\nexport type LegendProps<TType> = {\n    activeItems: ActiveChartItems<TType>;\n    onMouseEnter: (entry: PayloadType<TType>, index: number) => void;\n    onMouseLeave: () => void;\n    onClick: (entry: PayloadType<TType>) => void;\n};\n\nexport type Props<TType> = LegendProps<TType> & InternalProps<TType>;\n\nexport function Legend<TType>(props: LegendProps<TType>) {\n    const { activeIndex, onMouseEnter, onMouseLeave, onClick, payload, layout, activeItems } = props as Props<TType>;\n    const [hoverIndex, setHoverIndex] = useState<number | null>(null);\n\n    const handleMouseEnter = (entry: PayloadType<TType>, index: number) => {\n        setHoverIndex(index);\n        if (activeItems[entry.dataKey]) onMouseEnter(entry, index);\n    };\n\n    const handleMouseLeave = () => {\n        onMouseLeave();\n        setHoverIndex(null);\n    };\n\n    const moreButton = moreButtonText => (\n        <Button appearance=\"transparent\" className=\"text-grey-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    return (\n        <div className=\"mx-auto w-auto max-w-full overflow-hidden\">\n            <div className={cn('mb-0 ml-0 flex justify-center', { 'flex-col': layout === 'vertical' })}>\n                {/** py-1 is need to make sure the more button focus outline doesn't get cropped */}\n                <OverflowGroup className=\"w-full items-center py-1\" moreButton={moreButton}>\n                    {payload.map((entry, index) => (\n                        <span\n                            key={`${entry.dataKey}-${index}`}\n                            className={cn(' hover:bg-grey-100 cursor-pointer px-[8px] py-[2px] hover:rounded-[4px]', {\n                                'bg-grey-100 rounded': activeIndex === index,\n                            })}\n                            onMouseEnter={() => handleMouseEnter(entry, index)}\n                            onMouseLeave={handleMouseLeave}\n                            onClick={onClick ? () => onClick(entry) : undefined}>\n                            <span className=\"text-grey-700 flex items-center gap-[4px]\">\n                                <span\n                                    className={cn('-mt-px ml-1 flex h-3 w-3 rounded-sm', {\n                                        'border-grey-300 border !bg-white': !activeItems[entry.dataKey],\n                                    })}\n                                    style={{ backgroundColor: entry.color }}>\n                                    {hoverIndex === index && activeItems[entry.dataKey] && (\n                                        <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" />\n                                    )}\n                                </span>\n                                {entry.value}\n                            </span>\n                        </span>\n                    ))}\n                </OverflowGroup>\n            </div>\n        </div>\n    );\n}\n"],"names":["Legend","props","activeIndex","onMouseEnter","onMouseLeave","onClick","payload","layout","activeItems","hoverIndex","setHoverIndex","useState","handleMouseEnter","entry","index","dataKey","handleMouseLeave","moreButton","moreButtonText","React","Button","appearance","className","cn","OverflowGroup","map","key","undefined","style","backgroundColor","color","Icon","name","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqBgBA,MAAMA,CAAQC,KAAyB;EACnD,MAAM;IAAEC,WAAW;IAAEC,YAAY;IAAEC,YAAY;IAAEC,OAAO;IAAEC,OAAO;IAAEC,MAAM;IAAEC;GAAa,GAAGP,KAAqB;EAChH,MAAM,CAACQ,UAAU,EAAEC,aAAa,CAAC,GAAGC,QAAQ,CAAgB,IAAI,CAAC;EAEjE,MAAMC,gBAAgB,GAAGA,CAACC,KAAyB,EAAEC,KAAa;IAC9DJ,aAAa,CAACI,KAAK,CAAC;IACpB,IAAIN,WAAW,CAACK,KAAK,CAACE,OAAO,CAAC,EAAEZ,YAAY,CAACU,KAAK,EAAEC,KAAK,CAAC;GAC7D;EAED,MAAME,gBAAgB,GAAGA;IACrBZ,YAAY,EAAE;IACdM,aAAa,CAAC,IAAI,CAAC;GACtB;EAED,MAAMO,UAAU,GAAGC,cAAc,kBAC7BC,6BAACC,MAAM;IAACC,UAAU,EAAC,aAAa;IAACC,SAAS,EAAC;KACtCJ,cAAc,CACV,CACZ;EAED,oBACIC;IAAKG,SAAS,EAAC;kBACXH;IAAKG,SAAS,EAAEC,EAAE,CAAC,+BAA+B,EAAE;MAAE,UAAU,EAAEhB,MAAM,KAAK;KAAY;kBAErFY,6BAACK,aAAa;IAACF,SAAS,EAAC,0BAA0B;IAACL,UAAU,EAAEA;KAC3DX,OAAO,CAACmB,GAAG,CAAC,CAACZ,KAAK,EAAEC,KAAK,mBACtBK;IACIO,GAAG,EAAE,GAAGb,KAAK,CAACE,OAAO,IAAID,KAAK,EAAE;IAChCQ,SAAS,EAAEC,EAAE,CAAC,yEAAyE,EAAE;MACrF,qBAAqB,EAAErB,WAAW,KAAKY;KAC1C,CAAC;IACFX,YAAY,EAAEA,MAAMS,gBAAgB,CAACC,KAAK,EAAEC,KAAK,CAAC;IAClDV,YAAY,EAAEY,gBAAgB;IAC9BX,OAAO,EAAEA,OAAO,GAAG,MAAMA,OAAO,CAACQ,KAAK,CAAC,GAAGc;kBAC1CR;IAAMG,SAAS,EAAC;kBACZH;IACIG,SAAS,EAAEC,EAAE,CAAC,qCAAqC,EAAE;MACjD,kCAAkC,EAAE,CAACf,WAAW,CAACK,KAAK,CAACE,OAAO;KACjE,CAAC;IACFa,KAAK,EAAE;MAAEC,eAAe,EAAEhB,KAAK,CAACiB;;KAC/BrB,UAAU,KAAKK,KAAK,IAAIN,WAAW,CAACK,KAAK,CAACE,OAAO,CAAC,kBAC/CI,6BAACY,IAAI;IAACC,IAAI,EAAC,WAAW;IAACV,SAAS,EAAC;IAA+B,CACnE,CACE,EACNT,KAAK,CAACoB,KAAK,CACT,CACJ,CACV,CAAC,CACU,CACd,CACJ;AAEd;;;;"}

package/dist/esm/packages/taco/src/charts/components/Line/LineChart.js

@@ -1,35 +1,31 @@
 import React__default, { useState } from 'react';
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Legend, Tooltip, Line as Line$1 } from 'recharts';
 import { getThemeColor } from '../../utils/color.js';
 import { getCartesianGridProps, getXAxisProps, getYAxisProps, getLegendProps, getTooltipProps } from '../../utils/common.js';
 import { ResponsiveContainer } from '../ResponsiveContainer.js';
 
-var _excluded = ["children", "data", "formatter"];
-var Line = function Line(_) {
-  return null;
-};
-var LineChart = function LineChart(externalProps) {
-  var children = externalProps.children,
-    data = externalProps.data,
-    formatter = externalProps.formatter,
-    props = _objectWithoutPropertiesLoose(externalProps, _excluded);
-  var _useState = useState(null),
-    hoveredLine = _useState[0],
-    setHoveredLine = _useState[1];
-  var _useState2 = useState(function () {
-      var keys = {};
-      React__default.Children.forEach(children, function (child) {
-        keys[child.props.accessor] = true;
-      });
-      return keys;
-    }),
-    activeLines = _useState2[0],
-    setActiveLines = _useState2[1];
-  var handleLegendClick = function handleLegendClick(entry) {
-    var _extends2;
+const Line = _ => null;
+const LineChart = function LineChart(externalProps) {
+  const {
+    children,
+    data,
+    formatter,
+    ...props
+  } = externalProps;
+  const [hoveredLine, setHoveredLine] = useState(null);
+  const [activeLines, setActiveLines] = useState(() => {
+    const keys = {};
+    React__default.Children.forEach(children, child => {
+      keys[child.props.accessor] = true;
+    });
+    return keys;
+  });
+  const handleLegendClick = entry => {
     setHoveredLine(null);
-    setActiveLines(_extends({}, activeLines, (_extends2 = {}, _extends2[entry.dataKey] = !activeLines[entry.dataKey], _extends2)));
+    setActiveLines({
+      ...activeLines,
+      [entry.dataKey]: !activeLines[entry.dataKey]
+    });
   };
   return /*#__PURE__*/React__default.createElement(ResponsiveContainer, null, /*#__PURE__*/React__default.createElement(LineChart$1, {
     data: data,
@@ -41,16 +37,12 @@ var LineChart = function LineChart(externalProps) {
     }
   }, /*#__PURE__*/React__default.createElement(CartesianGrid, Object.assign({}, getCartesianGridProps())), /*#__PURE__*/React__default.createElement(XAxis, Object.assign({}, getXAxisProps(props))), /*#__PURE__*/React__default.createElement(YAxis, Object.assign({}, getYAxisProps(props))), /*#__PURE__*/React__default.createElement(Legend, Object.assign({}, getLegendProps({
     onClick: handleLegendClick,
-    onMouseEnter: function onMouseEnter(entry) {
-      return setHoveredLine(entry.dataKey);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setHoveredLine(null);
-    },
+    onMouseEnter: entry => setHoveredLine(entry.dataKey),
+    onMouseLeave: () => setHoveredLine(null),
     activeItems: activeLines
   }))), /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, getTooltipProps(), {
     formatter: formatter
-  })), React__default.Children.map(children, function (child) {
+  })), React__default.Children.map(children, child => {
     var _child$props$color, _child$props$color2;
     return /*#__PURE__*/React__default.createElement(Line$1, {
       activeDot: {

package/dist/esm/packages/taco/src/charts/components/Line/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","sources":["../../../../../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport * as Recharts from 'recharts';\n\nimport { Color, getThemeColor } from '../../utils/color';\nimport {\n    CommonChartProps,\n    getCartesianGridProps,\n    getXAxisProps,\n    getYAxisProps,\n    getLegendProps,\n    getTooltipProps,\n} from '../../utils/common';\nimport { ResponsiveContainer } from '../ResponsiveContainer';\nimport { ActiveChartItems, PayloadType } from '../types';\n\ntype LineChartBarProps<TType> = {\n    accessor: keyof TType & string;\n    color?: Color;\n    label?: string;\n};\n\nconst Line = (_: LineChartBarProps<any>) => null;\n\ntype LineChartProps<TType> = CommonChartProps<TType> & {\n    children: React.ReactElement<LineChartBarProps<TType>> | React.ReactElement<LineChartBarProps<TType>>[];\n    data: TType[];\n    formatter?: (value: any) => string;\n};\n\nexport const LineChart = function LineChart<TType = unknown>(externalProps: LineChartProps<TType>) {\n    const { children, data, formatter, ...props } = externalProps;\n    const [hoveredLine, setHoveredLine] = useState<(keyof TType & string) | null>(null);\n    const [activeLines, setActiveLines] = useState<ActiveChartItems<TType>>(() => {\n        const keys = {} as ActiveChartItems<TType>;\n\n        React.Children.forEach(children, child => {\n            keys[child.props.accessor] = true;\n        });\n\n        return keys;\n    });\n\n    const handleLegendClick = (entry: PayloadType<TType>): void => {\n        setHoveredLine(null);\n        setActiveLines({ ...activeLines, [entry.dataKey]: !activeLines[entry.dataKey] });\n    };\n\n    return (\n        <ResponsiveContainer>\n            <Recharts.LineChart data={data} margin={{ top: 10, right: 0, left: -25, bottom: 0 }}>\n                <Recharts.CartesianGrid {...getCartesianGridProps()} />\n                <Recharts.XAxis {...getXAxisProps<TType>(props)} />\n                <Recharts.YAxis {...getYAxisProps<TType>(props)} />\n                <Recharts.Legend\n                    {...getLegendProps({\n                        onClick: handleLegendClick,\n                        onMouseEnter: entry => setHoveredLine(entry.dataKey),\n                        onMouseLeave: () => setHoveredLine(null),\n                        activeItems: activeLines,\n                    })}\n                />\n                <Recharts.Tooltip {...getTooltipProps()} formatter={formatter} />\n                {React.Children.map(children, child => (\n                    <Recharts.Line\n                        activeDot={{\n                            fill: getThemeColor(child.props.color ?? 'blue-300'),\n                        }}\n                        dataKey={child.props.accessor}\n                        isAnimationActive={false}\n                        dot={false}\n                        name={child.props.label}\n                        stroke={getThemeColor(child.props.color ?? 'blue-300')}\n                        strokeWidth={2}\n                        hide={!activeLines[child.props.accessor]}\n                        opacity={hoveredLine && child.props.accessor !== hoveredLine ? 0.3 : 1}\n                    />\n                ))}\n            </Recharts.LineChart>\n        </ResponsiveContainer>\n    );\n};\nLineChart.Line = Line;\n"],"names":["Line","_","LineChart","externalProps","children","data","formatter","props","_objectWithoutPropertiesLoose","_excluded","_useState","useState","hoveredLine","setHoveredLine","_useState2","keys","React","Children","forEach","child","accessor","activeLines","setActiveLines","handleLegendClick","entry","_extends","_extends2","dataKey","ResponsiveContainer","Recharts","margin","top","right","left","bottom","getCartesianGridProps","getXAxisProps","getYAxisProps","getLegendProps","onClick","onMouseEnter","onMouseLeave","activeItems","getTooltipProps","map","_child$props$color","_child$props$color2","activeDot","fill","getThemeColor","color","isAnimationActive","dot","name","label","stroke","strokeWidth","hide","opacity"],"mappings":"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"}
+{"version":3,"file":"LineChart.js","sources":["../../../../../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport * as Recharts from 'recharts';\n\nimport { Color, getThemeColor } from '../../utils/color';\nimport {\n    CommonChartProps,\n    getCartesianGridProps,\n    getXAxisProps,\n    getYAxisProps,\n    getLegendProps,\n    getTooltipProps,\n} from '../../utils/common';\nimport { ResponsiveContainer } from '../ResponsiveContainer';\nimport { ActiveChartItems, PayloadType } from '../types';\n\ntype LineChartBarProps<TType> = {\n    accessor: keyof TType & string;\n    color?: Color;\n    label?: string;\n};\n\nconst Line = (_: LineChartBarProps<any>) => null;\n\ntype LineChartProps<TType> = CommonChartProps<TType> & {\n    children: React.ReactElement<LineChartBarProps<TType>> | React.ReactElement<LineChartBarProps<TType>>[];\n    data: TType[];\n    formatter?: (value: any) => string;\n};\n\nexport const LineChart = function LineChart<TType = unknown>(externalProps: LineChartProps<TType>) {\n    const { children, data, formatter, ...props } = externalProps;\n    const [hoveredLine, setHoveredLine] = useState<(keyof TType & string) | null>(null);\n    const [activeLines, setActiveLines] = useState<ActiveChartItems<TType>>(() => {\n        const keys = {} as ActiveChartItems<TType>;\n\n        React.Children.forEach(children, child => {\n            keys[child.props.accessor] = true;\n        });\n\n        return keys;\n    });\n\n    const handleLegendClick = (entry: PayloadType<TType>): void => {\n        setHoveredLine(null);\n        setActiveLines({ ...activeLines, [entry.dataKey]: !activeLines[entry.dataKey] });\n    };\n\n    return (\n        <ResponsiveContainer>\n            <Recharts.LineChart data={data} margin={{ top: 10, right: 0, left: -25, bottom: 0 }}>\n                <Recharts.CartesianGrid {...getCartesianGridProps()} />\n                <Recharts.XAxis {...getXAxisProps<TType>(props)} />\n                <Recharts.YAxis {...getYAxisProps<TType>(props)} />\n                <Recharts.Legend\n                    {...getLegendProps({\n                        onClick: handleLegendClick,\n                        onMouseEnter: entry => setHoveredLine(entry.dataKey),\n                        onMouseLeave: () => setHoveredLine(null),\n                        activeItems: activeLines,\n                    })}\n                />\n                <Recharts.Tooltip {...getTooltipProps()} formatter={formatter} />\n                {React.Children.map(children, child => (\n                    <Recharts.Line\n                        activeDot={{\n                            fill: getThemeColor(child.props.color ?? 'blue-300'),\n                        }}\n                        dataKey={child.props.accessor}\n                        isAnimationActive={false}\n                        dot={false}\n                        name={child.props.label}\n                        stroke={getThemeColor(child.props.color ?? 'blue-300')}\n                        strokeWidth={2}\n                        hide={!activeLines[child.props.accessor]}\n                        opacity={hoveredLine && child.props.accessor !== hoveredLine ? 0.3 : 1}\n                    />\n                ))}\n            </Recharts.LineChart>\n        </ResponsiveContainer>\n    );\n};\nLineChart.Line = Line;\n"],"names":["Line","_","LineChart","externalProps","children","data","formatter","props","hoveredLine","setHoveredLine","useState","activeLines","setActiveLines","keys","React","Children","forEach","child","accessor","handleLegendClick","entry","dataKey","ResponsiveContainer","Recharts","margin","top","right","left","bottom","getCartesianGridProps","getXAxisProps","getYAxisProps","getLegendProps","onClick","onMouseEnter","onMouseLeave","activeItems","getTooltipProps","map","_child$props$color","_child$props$color2","activeDot","fill","getThemeColor","color","isAnimationActive","dot","name","label","stroke","strokeWidth","hide","opacity"],"mappings":";;;;;;AAqBA,MAAMA,IAAI,GAAIC,CAAyB,IAAK,IAAI;MAQnCC,SAAS,GAAG,SAASA,SAASA,CAAkBC,aAAoC;EAC7F,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGJ,aAAa;EAC7D,MAAM,CAACK,WAAW,EAAEC,cAAc,CAAC,GAAGC,QAAQ,CAAgC,IAAI,CAAC;EACnF,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGF,QAAQ,CAA0B;IACpE,MAAMG,IAAI,GAAG,EAA6B;IAE1CC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACZ,QAAQ,EAAEa,KAAK;MAClCJ,IAAI,CAACI,KAAK,CAACV,KAAK,CAACW,QAAQ,CAAC,GAAG,IAAI;KACpC,CAAC;IAEF,OAAOL,IAAI;GACd,CAAC;EAEF,MAAMM,iBAAiB,GAAIC,KAAyB;IAChDX,cAAc,CAAC,IAAI,CAAC;IACpBG,cAAc,CAAC;MAAE,GAAGD,WAAW;MAAE,CAACS,KAAK,CAACC,OAAO,GAAG,CAACV,WAAW,CAACS,KAAK,CAACC,OAAO;KAAG,CAAC;GACnF;EAED,oBACIP,6BAACQ,mBAAmB,qBAChBR,6BAACS,WAAkB;IAAClB,IAAI,EAAEA,IAAI;IAAEmB,MAAM,EAAE;MAAEC,GAAG,EAAE,EAAE;MAAEC,KAAK,EAAE,CAAC;MAAEC,IAAI,EAAE,CAAC,EAAE;MAAEC,MAAM,EAAE;;kBAC5Ed,6BAACS,aAAsB,oBAAKM,qBAAqB,EAAE,EAAI,eACvDf,6BAACS,KAAc,oBAAKO,aAAa,CAAQvB,KAAK,CAAC,EAAI,eACnDO,6BAACS,KAAc,oBAAKQ,aAAa,CAAQxB,KAAK,CAAC,EAAI,eACnDO,6BAACS,MAAe,oBACRS,cAAc,CAAC;IACfC,OAAO,EAAEd,iBAAiB;IAC1Be,YAAY,EAAEd,KAAK,IAAIX,cAAc,CAACW,KAAK,CAACC,OAAO,CAAC;IACpDc,YAAY,EAAEA,MAAM1B,cAAc,CAAC,IAAI,CAAC;IACxC2B,WAAW,EAAEzB;GAChB,CAAC,EACJ,eACFG,6BAACS,OAAgB,oBAAKc,eAAe,EAAE;IAAE/B,SAAS,EAAEA;KAAa,EAChEQ,cAAK,CAACC,QAAQ,CAACuB,GAAG,CAAClC,QAAQ,EAAEa,KAAK;IAAA,IAAAsB,kBAAA,EAAAC,mBAAA;IAAA,oBAC/B1B,6BAACS,MAAa;MACVkB,SAAS,EAAE;QACPC,IAAI,EAAEC,aAAa,EAAAJ,kBAAA,GAACtB,KAAK,CAACV,KAAK,CAACqC,KAAK,cAAAL,kBAAA,cAAAA,kBAAA,GAAI,UAAU;OACtD;MACDlB,OAAO,EAAEJ,KAAK,CAACV,KAAK,CAACW,QAAQ;MAC7B2B,iBAAiB,EAAE,KAAK;MACxBC,GAAG,EAAE,KAAK;MACVC,IAAI,EAAE9B,KAAK,CAACV,KAAK,CAACyC,KAAK;MACvBC,MAAM,EAAEN,aAAa,EAAAH,mBAAA,GAACvB,KAAK,CAACV,KAAK,CAACqC,KAAK,cAAAJ,mBAAA,cAAAA,mBAAA,GAAI,UAAU,CAAC;MACtDU,WAAW,EAAE,CAAC;MACdC,IAAI,EAAE,CAACxC,WAAW,CAACM,KAAK,CAACV,KAAK,CAACW,QAAQ,CAAC;MACxCkC,OAAO,EAAE5C,WAAW,IAAIS,KAAK,CAACV,KAAK,CAACW,QAAQ,KAAKV,WAAW,GAAG,GAAG,GAAG;MACvE;GACL,CAAC,CACe,CACH;AAE9B;AACAN,SAAS,CAACF,IAAI,GAAGA,IAAI;;;;"}

package/dist/esm/packages/taco/src/charts/components/ResponsiveContainer.js

@@ -2,11 +2,9 @@ import React__default from 'react';
 import { ResponsiveContainer as ResponsiveContainer$1 } from 'recharts';
 
 // A hacky fix for EC-50037 to make sure that Chart doesn't resize when it is inside a Card.
-var ResponsiveContainer = function ResponsiveContainer(props) {
-  return /*#__PURE__*/React__default.createElement(ResponsiveContainer$1, Object.assign({
-    className: "!h-[calc(100%-1px)] !w-[calc(100%-1px)]"
-  }, props));
-};
+const ResponsiveContainer = props => (/*#__PURE__*/React__default.createElement(ResponsiveContainer$1, Object.assign({
+  className: "!h-[calc(100%-1px)] !w-[calc(100%-1px)]"
+}, props)));
 
 export { ResponsiveContainer };
 //# sourceMappingURL=ResponsiveContainer.js.map

package/dist/esm/packages/taco/src/charts/components/ResponsiveContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveContainer.js","sources":["../../../../../../../src/charts/components/ResponsiveContainer.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\n\ntype ResponsiveContainerProps = Recharts.ResponsiveContainerProps & React.RefAttributes<HTMLDivElement>;\n\n// A hacky fix for EC-50037 to make sure that Chart doesn't resize when it is inside a Card.\nexport const ResponsiveContainer = (props: ResponsiveContainerProps) => (\n    <Recharts.ResponsiveContainer className=\"!h-[calc(100%-1px)] !w-[calc(100%-1px)]\" {...props} />\n);\n"],"names":["ResponsiveContainer","props","React","Recharts","className"],"mappings":";;;AAKA;IACaA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIC,KAA+B;EAAA,oBAC/DC,6BAACC,qBAA4B;IAACC,SAAS,EAAC;KAA8CH,KAAK,EAAI;AAAA;;;;"}
+{"version":3,"file":"ResponsiveContainer.js","sources":["../../../../../../../src/charts/components/ResponsiveContainer.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\n\ntype ResponsiveContainerProps = Recharts.ResponsiveContainerProps & React.RefAttributes<HTMLDivElement>;\n\n// A hacky fix for EC-50037 to make sure that Chart doesn't resize when it is inside a Card.\nexport const ResponsiveContainer = (props: ResponsiveContainerProps) => (\n    <Recharts.ResponsiveContainer className=\"!h-[calc(100%-1px)] !w-[calc(100%-1px)]\" {...props} />\n);\n"],"names":["ResponsiveContainer","props","React","Recharts","className"],"mappings":";;;AAKA;MACaA,mBAAmB,GAAIC,KAA+B,kBAC/DC,6BAACC,qBAA4B;EAACC,SAAS,EAAC;GAA8CH,KAAK,EAAI;;;;"}

package/dist/esm/packages/taco/src/charts/components/Tooltip.js

@@ -1,42 +1,41 @@
 import React__default from 'react';
 import { getThemeColor } from '../utils/color.js';
 
-var Tooltip = function Tooltip(_ref) {
-  var active = _ref.active,
-    formatter = _ref.formatter,
-    payload = _ref.payload,
-    style = _ref.style,
-    singlePieDonutChart = _ref.singlePieDonutChart;
-  var getColor = function getColor(entry) {
-    var _ref2, _entry$color;
+const Tooltip = ({
+  active,
+  formatter,
+  payload,
+  style,
+  singlePieDonutChart
+}) => {
+  const getColor = entry => {
+    var _ref, _entry$color;
     if (singlePieDonutChart) {
       // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie
       // and one with multiple pies.
       return getThemeColor(entry.payload.color);
     }
-    return (_ref2 = (_entry$color = entry.color) !== null && _entry$color !== void 0 ? _entry$color : entry.payload.fill) !== null && _ref2 !== void 0 ? _ref2 : 'blue-500';
+    return (_ref = (_entry$color = entry.color) !== null && _entry$color !== void 0 ? _entry$color : entry.payload.fill) !== null && _ref !== void 0 ? _ref : 'blue-500';
   };
   if (active && payload && payload.length) {
     return /*#__PURE__*/React__default.createElement("dl", {
       className: "z-20 grid grid-cols-[max-content_max-content] gap-x-4 rounded-md bg-white p-4 text-xs shadow-[0px_0px_1px_rgba(0,0,0,0.1),_0px_6px_18px_rgba(47,51,68,0.2)]",
       style: style
-    }, payload.map(function (entry, index) {
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-        key: entry.name + "-" + index
-      }, /*#__PURE__*/React__default.createElement("dt", {
-        className: "text-grey-700 mb-0 flex items-center gap-1 font-normal"
-      }, /*#__PURE__*/React__default.createElement("span", {
-        className: "-mt-px h-2.5 w-2.5 rounded-sm",
-        style: {
-          background: getColor(entry)
-        }
-      }),
-      // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie
-      // and one with multiple pies.
-      singlePieDonutChart ? entry.payload.label : entry.name), /*#__PURE__*/React__default.createElement("dd", {
-        className: "mb-0 text-right font-bold text-black "
-      }, formatter ? formatter(entry.value) : entry.value));
-    }));
+    }, payload.map((entry, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: `${entry.name}-${index}`
+    }, /*#__PURE__*/React__default.createElement("dt", {
+      className: "text-grey-700 mb-0 flex items-center gap-1 font-normal"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "-mt-px h-2.5 w-2.5 rounded-sm",
+      style: {
+        background: getColor(entry)
+      }
+    }),
+    // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie
+    // and one with multiple pies.
+    singlePieDonutChart ? entry.payload.label : entry.name), /*#__PURE__*/React__default.createElement("dd", {
+      className: "mb-0 text-right font-bold text-black "
+    }, formatter ? formatter(entry.value) : entry.value)))));
   }
   return null;
 };

package/dist/esm/packages/taco/src/charts/components/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/charts/components/Tooltip.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { getThemeColor } from '../utils/color';\n\ntype TooltipProps = {\n    active?: boolean;\n    formatter: (value: any) => any;\n    payload: any;\n    style?: CSSProperties;\n    singlePieDonutChart?: boolean;\n};\n\nexport const Tooltip = ({ active, formatter, payload, style, singlePieDonutChart }: TooltipProps) => {\n    const getColor = entry => {\n        if (singlePieDonutChart) {\n            // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie\n            // and one with multiple pies.\n            return getThemeColor(entry.payload.color);\n        }\n\n        return entry.color ?? entry.payload.fill ?? 'blue-500';\n    };\n\n    if (active && payload && payload.length) {\n        return (\n            <dl\n                className=\"z-20 grid grid-cols-[max-content_max-content] gap-x-4 rounded-md bg-white p-4 text-xs shadow-[0px_0px_1px_rgba(0,0,0,0.1),_0px_6px_18px_rgba(47,51,68,0.2)]\"\n                style={style}>\n                {payload.map((entry, index) => (\n                    <React.Fragment key={`${entry.name}-${index}`}>\n                        <dt className=\"text-grey-700 mb-0 flex items-center gap-1 font-normal\">\n                            <span className=\"-mt-px h-2.5 w-2.5 rounded-sm\" style={{ background: getColor(entry) }} />\n                            {\n                                // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie\n                                // and one with multiple pies.\n                                singlePieDonutChart ? entry.payload.label : entry.name\n                            }\n                        </dt>\n                        <dd className=\"mb-0 text-right font-bold text-black \">\n                            {formatter ? formatter(entry.value) : entry.value}\n                        </dd>\n                    </React.Fragment>\n                ))}\n            </dl>\n        );\n    }\n\n    return null;\n};\n"],"names":["Tooltip","_ref","active","formatter","payload","style","singlePieDonutChart","getColor","entry","getThemeColor","color","_ref2","_entry$color","fill","length","React","className","map","index","Fragment","key","name","background","label","value"],"mappings":";;;IAWaA,OAAO,GAAG,SAAVA,OAAOA,CAAAC,IAAA;MAAMC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAEC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAAEC,mBAAmB,GAAAL,IAAA,CAAnBK,mBAAmB;EAC5E,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAGC,KAAK;;IAClB,IAAIF,mBAAmB,EAAE;;;MAGrB,OAAOG,aAAa,CAACD,KAAK,CAACJ,OAAO,CAACM,KAAK,CAAC;;IAG7C,QAAAC,KAAA,IAAAC,YAAA,GAAOJ,KAAK,CAACE,KAAK,cAAAE,YAAA,cAAAA,YAAA,GAAIJ,KAAK,CAACJ,OAAO,CAACS,IAAI,cAAAF,KAAA,cAAAA,KAAA,GAAI,UAAU;GACzD;EAED,IAAIT,MAAM,IAAIE,OAAO,IAAIA,OAAO,CAACU,MAAM,EAAE;IACrC,oBACIC;MACIC,SAAS,EAAC,6JAA6J;MACvKX,KAAK,EAAEA;OACND,OAAO,CAACa,GAAG,CAAC,UAACT,KAAK,EAAEU,KAAK;MAAA,oBACtBH,6BAACA,cAAK,CAACI,QAAQ;QAACC,GAAG,EAAKZ,KAAK,CAACa,IAAI,SAAIH;sBAClCH;QAAIC,SAAS,EAAC;sBACVD;QAAMC,SAAS,EAAC,+BAA+B;QAACX,KAAK,EAAE;UAAEiB,UAAU,EAAEf,QAAQ,CAACC,KAAK;;QAAO;;;MAItFF,mBAAmB,GAAGE,KAAK,CAACJ,OAAO,CAACmB,KAAK,GAAGf,KAAK,CAACa,IAAI,CAEzD,eACLN;QAAIC,SAAS,EAAC;SACTb,SAAS,GAAGA,SAAS,CAACK,KAAK,CAACgB,KAAK,CAAC,GAAGhB,KAAK,CAACgB,KAAK,CAChD,CACQ;KACpB,CAAC,CACD;;EAIb,OAAO,IAAI;AACf;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/charts/components/Tooltip.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { getThemeColor } from '../utils/color';\n\ntype TooltipProps = {\n    active?: boolean;\n    formatter: (value: any) => any;\n    payload: any;\n    style?: CSSProperties;\n    singlePieDonutChart?: boolean;\n};\n\nexport const Tooltip = ({ active, formatter, payload, style, singlePieDonutChart }: TooltipProps) => {\n    const getColor = entry => {\n        if (singlePieDonutChart) {\n            // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie\n            // and one with multiple pies.\n            return getThemeColor(entry.payload.color);\n        }\n\n        return entry.color ?? entry.payload.fill ?? 'blue-500';\n    };\n\n    if (active && payload && payload.length) {\n        return (\n            <dl\n                className=\"z-20 grid grid-cols-[max-content_max-content] gap-x-4 rounded-md bg-white p-4 text-xs shadow-[0px_0px_1px_rgba(0,0,0,0.1),_0px_6px_18px_rgba(47,51,68,0.2)]\"\n                style={style}>\n                {payload.map((entry, index) => (\n                    <React.Fragment key={`${entry.name}-${index}`}>\n                        <dt className=\"text-grey-700 mb-0 flex items-center gap-1 font-normal\">\n                            <span className=\"-mt-px h-2.5 w-2.5 rounded-sm\" style={{ background: getColor(entry) }} />\n                            {\n                                // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie\n                                // and one with multiple pies.\n                                singlePieDonutChart ? entry.payload.label : entry.name\n                            }\n                        </dt>\n                        <dd className=\"mb-0 text-right font-bold text-black \">\n                            {formatter ? formatter(entry.value) : entry.value}\n                        </dd>\n                    </React.Fragment>\n                ))}\n            </dl>\n        );\n    }\n\n    return null;\n};\n"],"names":["Tooltip","active","formatter","payload","style","singlePieDonutChart","getColor","entry","getThemeColor","color","_ref","_entry$color","fill","length","React","className","map","index","Fragment","key","name","background","label","value"],"mappings":";;;MAWaA,OAAO,GAAGA,CAAC;EAAEC,MAAM;EAAEC,SAAS;EAAEC,OAAO;EAAEC,KAAK;EAAEC;CAAmC;EAC5F,MAAMC,QAAQ,GAAGC,KAAK;;IAClB,IAAIF,mBAAmB,EAAE;;;MAGrB,OAAOG,aAAa,CAACD,KAAK,CAACJ,OAAO,CAACM,KAAK,CAAC;;IAG7C,QAAAC,IAAA,IAAAC,YAAA,GAAOJ,KAAK,CAACE,KAAK,cAAAE,YAAA,cAAAA,YAAA,GAAIJ,KAAK,CAACJ,OAAO,CAACS,IAAI,cAAAF,IAAA,cAAAA,IAAA,GAAI,UAAU;GACzD;EAED,IAAIT,MAAM,IAAIE,OAAO,IAAIA,OAAO,CAACU,MAAM,EAAE;IACrC,oBACIC;MACIC,SAAS,EAAC,6JAA6J;MACvKX,KAAK,EAAEA;OACND,OAAO,CAACa,GAAG,CAAC,CAACT,KAAK,EAAEU,KAAK,mBACtBH,6BAACA,cAAK,CAACI,QAAQ;MAACC,GAAG,EAAE,GAAGZ,KAAK,CAACa,IAAI,IAAIH,KAAK;oBACvCH;MAAIC,SAAS,EAAC;oBACVD;MAAMC,SAAS,EAAC,+BAA+B;MAACX,KAAK,EAAE;QAAEiB,UAAU,EAAEf,QAAQ,CAACC,KAAK;;MAAO;;;IAItFF,mBAAmB,GAAGE,KAAK,CAACJ,OAAO,CAACmB,KAAK,GAAGf,KAAK,CAACa,IAAI,CAEzD,eACLN;MAAIC,SAAS,EAAC;OACTb,SAAS,GAAGA,SAAS,CAACK,KAAK,CAACgB,KAAK,CAAC,GAAGhB,KAAK,CAACgB,KAAK,CAChD,CACQ,CACpB,CAAC,CACD;;EAIb,OAAO,IAAI;AACf;;;;"}

package/dist/esm/packages/taco/src/charts/utils/color.js

@@ -1,25 +1,24 @@
-import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import themeColors from '../../../tailwind.colors.js';
 
-var mapColor = function mapColor(palette, prefix) {
-  if (prefix === void 0) {
-    prefix = '';
-  }
-  return Object.keys(palette).reduce(function (accum, color) {
+const mapColor = (palette, prefix = '') => {
+  return Object.keys(palette).reduce((accum, color) => {
     if (color === 'current') {
       return accum;
     } else if (typeof palette[color] === 'string') {
-      var _extends2;
-      return _extends({}, accum, (_extends2 = {}, _extends2[prefix ? color === 'DEFAULT' ? prefix : prefix + "-" + color : color] = palette[color], _extends2));
+      return {
+        ...accum,
+        [prefix ? color === 'DEFAULT' ? prefix : `${prefix}-${color}` : color]: palette[color]
+      };
     } else {
-      return _extends({}, accum, mapColor(palette[color], color));
+      return {
+        ...accum,
+        ...mapColor(palette[color], color)
+      };
     }
   }, {});
 };
-var colors = /*#__PURE__*/mapColor(themeColors);
-var getThemeColor = function getThemeColor(color) {
-  return colors[color];
-};
+const colors = /*#__PURE__*/mapColor(themeColors);
+const getThemeColor = color => colors[color];
 
 export { colors, getThemeColor };
 //# sourceMappingURL=color.js.map

package/dist/esm/packages/taco/src/charts/utils/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","sources":["../../../../../../../src/charts/utils/color.ts"],"sourcesContent":["import themeColors from '../../../tailwind.colors.js';\n\nconst mapColor = (palette, prefix = ''): any => {\n    return Object.keys(palette).reduce((accum, color) => {\n        if (color === 'current') {\n            return accum;\n        } else if (typeof palette[color] === 'string') {\n            return {\n                ...accum,\n                [prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color]: palette[color],\n            };\n        } else {\n            return {\n                ...accum,\n                ...mapColor(palette[color], color),\n            };\n        }\n    }, {});\n};\n\nexport const colors: Record<string, string> = mapColor(themeColors);\n\nexport type Color = keyof typeof colors;\n\nexport const getThemeColor = (color: string) => colors[color];\n"],"names":["mapColor","palette","prefix","Object","keys","reduce","accum","color","_extends2","_extends","colors","themeColors","getThemeColor"],"mappings":";;;AAEA,IAAMA,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,OAAO,EAAEC,MAAM;MAANA,MAAM;IAANA,MAAM,GAAG,EAAE;;EAClC,OAAOC,MAAM,CAACC,IAAI,CAACH,OAAO,CAAC,CAACI,MAAM,CAAC,UAACC,KAAK,EAAEC,KAAK;IAC5C,IAAIA,KAAK,KAAK,SAAS,EAAE;MACrB,OAAOD,KAAK;KACf,MAAM,IAAI,OAAOL,OAAO,CAACM,KAAK,CAAC,KAAK,QAAQ,EAAE;MAAA,IAAAC,SAAA;MAC3C,OAAAC,QAAA,KACOH,KAAK,GAAAE,SAAA,OAAAA,SAAA,CACPN,MAAM,GAAIK,KAAK,KAAK,SAAS,GAAGL,MAAM,GAAMA,MAAM,SAAIK,KAAO,GAAIA,KAAK,IAAGN,OAAO,CAACM,KAAK,CAAC,EAAAC,SAAA;KAE/F,MAAM;MACH,OAAAC,QAAA,KACOH,KAAK,EACLN,QAAQ,CAACC,OAAO,CAACM,KAAK,CAAC,EAAEA,KAAK,CAAC;;GAG7C,EAAE,EAAE,CAAC;AACV,CAAC;IAEYG,MAAM,gBAA2BV,QAAQ,CAACW,WAAW;IAIrDC,aAAa,GAAG,SAAhBA,aAAaA,CAAIL,KAAa;EAAA,OAAKG,MAAM,CAACH,KAAK,CAAC;AAAA;;;;"}
+{"version":3,"file":"color.js","sources":["../../../../../../../src/charts/utils/color.ts"],"sourcesContent":["import themeColors from '../../../tailwind.colors.js';\n\nconst mapColor = (palette, prefix = ''): any => {\n    return Object.keys(palette).reduce((accum, color) => {\n        if (color === 'current') {\n            return accum;\n        } else if (typeof palette[color] === 'string') {\n            return {\n                ...accum,\n                [prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color]: palette[color],\n            };\n        } else {\n            return {\n                ...accum,\n                ...mapColor(palette[color], color),\n            };\n        }\n    }, {});\n};\n\nexport const colors: Record<string, string> = mapColor(themeColors);\n\nexport type Color = keyof typeof colors;\n\nexport const getThemeColor = (color: string) => colors[color];\n"],"names":["mapColor","palette","prefix","Object","keys","reduce","accum","color","colors","themeColors","getThemeColor"],"mappings":";;AAEA,MAAMA,QAAQ,GAAGA,CAACC,OAAO,EAAEC,MAAM,GAAG,EAAE;EAClC,OAAOC,MAAM,CAACC,IAAI,CAACH,OAAO,CAAC,CAACI,MAAM,CAAC,CAACC,KAAK,EAAEC,KAAK;IAC5C,IAAIA,KAAK,KAAK,SAAS,EAAE;MACrB,OAAOD,KAAK;KACf,MAAM,IAAI,OAAOL,OAAO,CAACM,KAAK,CAAC,KAAK,QAAQ,EAAE;MAC3C,OAAO;QACH,GAAGD,KAAK;QACR,CAACJ,MAAM,GAAIK,KAAK,KAAK,SAAS,GAAGL,MAAM,GAAG,GAAGA,MAAM,IAAIK,KAAK,EAAE,GAAIA,KAAK,GAAGN,OAAO,CAACM,KAAK;OAC1F;KACJ,MAAM;MACH,OAAO;QACH,GAAGD,KAAK;QACR,GAAGN,QAAQ,CAACC,OAAO,CAACM,KAAK,CAAC,EAAEA,KAAK;OACpC;;GAER,EAAE,EAAE,CAAC;AACV,CAAC;MAEYC,MAAM,gBAA2BR,QAAQ,CAACS,WAAW;MAIrDC,aAAa,GAAIH,KAAa,IAAKC,MAAM,CAACD,KAAK;;;;"}

package/dist/esm/packages/taco/src/charts/utils/common.js

@@ -2,46 +2,33 @@ import React__default from 'react';
 import { Legend } from '../components/Legend.js';
 import { Tooltip } from '../components/Tooltip.js';
 
-var getCartesianGridProps = function getCartesianGridProps() {
-  return {
-    vertical: false
-  };
-};
-var getXAxisProps = function getXAxisProps(props) {
-  return {
-    axisLine: false,
-    dataKey: props.accessor,
-    fontSize: 12,
-    scale: props.xAxisScale,
-    tickLine: false,
-    tickFormatter: props.xAxisTickFormat
-  };
-};
-var getYAxisProps = function getYAxisProps(props) {
-  return {
-    axisLine: false,
-    fontSize: 12,
-    scale: props.yAxisScale,
-    tickLine: false,
-    tickFormatter: props.yAxisTickFormat
-  };
-};
-var getLegendProps = function getLegendProps(props) {
-  return {
-    content: /*#__PURE__*/React__default.createElement(Legend, Object.assign({}, props))
-  };
-};
-var getTooltipProps = function getTooltipProps(props) {
-  if (props === void 0) {
-    props = undefined;
+const getCartesianGridProps = () => ({
+  vertical: false
+});
+const getXAxisProps = props => ({
+  axisLine: false,
+  dataKey: props.accessor,
+  fontSize: 12,
+  scale: props.xAxisScale,
+  tickLine: false,
+  tickFormatter: props.xAxisTickFormat
+});
+const getYAxisProps = props => ({
+  axisLine: false,
+  fontSize: 12,
+  scale: props.yAxisScale,
+  tickLine: false,
+  tickFormatter: props.yAxisTickFormat
+});
+const getLegendProps = props => ({
+  content: /*#__PURE__*/React__default.createElement(Legend, Object.assign({}, props))
+});
+const getTooltipProps = (props = undefined) => ({
+  content: /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, props)),
+  wrapperStyle: {
+    outline: 'none'
   }
-  return {
-    content: /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, props)),
-    wrapperStyle: {
-      outline: 'none'
-    }
-  };
-};
+});
 
 export { getCartesianGridProps, getLegendProps, getTooltipProps, getXAxisProps, getYAxisProps };
 //# sourceMappingURL=common.js.map

package/dist/esm/packages/taco/src/charts/utils/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sources":["../../../../../../../src/charts/utils/common.tsx"],"sourcesContent":["import React from 'react';\nimport { ScaleType } from 'recharts/types/util/types';\n\nimport { Legend } from '../components/Legend';\nimport { Tooltip } from '../components/Tooltip';\nimport { LegendProps } from '../components/Legend';\n\nexport type CommonChartProps<TType> = {\n    accessor: keyof TType & string;\n    // eslint-disable-next-line @typescript-eslint/ban-types\n    xAxisScale?: ScaleType | Function;\n    xAxisTickFormat: (value: any) => string;\n    // eslint-disable-next-line @typescript-eslint/ban-types\n    yAxisScale?: ScaleType | Function;\n    yAxisTickFormat: (value: any) => string;\n};\n\nexport const getCartesianGridProps = () => ({\n    vertical: false,\n});\n\nexport const getXAxisProps = <TType,>(props: CommonChartProps<TType>) => ({\n    axisLine: false,\n    dataKey: props.accessor,\n    fontSize: 12,\n    scale: props.xAxisScale,\n    tickLine: false,\n    tickFormatter: props.xAxisTickFormat,\n});\n\nexport const getYAxisProps = <TType,>(props: CommonChartProps<TType>) => ({\n    axisLine: false,\n    fontSize: 12,\n    scale: props.yAxisScale,\n    tickLine: false,\n    tickFormatter: props.yAxisTickFormat,\n});\n\nexport const getLegendProps = <TType,>(props: LegendProps<TType>) => ({\n    content: <Legend {...props} />,\n});\n\nexport const getTooltipProps = (props: any = undefined) => ({\n    content: <Tooltip {...props} />,\n    wrapperStyle: { outline: 'none' },\n});\n"],"names":["getCartesianGridProps","vertical","getXAxisProps","props","axisLine","dataKey","accessor","fontSize","scale","xAxisScale","tickLine","tickFormatter","xAxisTickFormat","getYAxisProps","yAxisScale","yAxisTickFormat","getLegendProps","content","React","Legend","getTooltipProps","undefined","Tooltip","wrapperStyle","outline"],"mappings":";;;;IAiBaA,qBAAqB,GAAG,SAAxBA,qBAAqBA;EAAA,OAAU;IACxCC,QAAQ,EAAE;GACb;AAAA;IAEYC,aAAa,GAAG,SAAhBA,aAAaA,CAAYC,KAA8B;EAAA,OAAM;IACtEC,QAAQ,EAAE,KAAK;IACfC,OAAO,EAAEF,KAAK,CAACG,QAAQ;IACvBC,QAAQ,EAAE,EAAE;IACZC,KAAK,EAAEL,KAAK,CAACM,UAAU;IACvBC,QAAQ,EAAE,KAAK;IACfC,aAAa,EAAER,KAAK,CAACS;GACxB;AAAA;IAEYC,aAAa,GAAG,SAAhBA,aAAaA,CAAYV,KAA8B;EAAA,OAAM;IACtEC,QAAQ,EAAE,KAAK;IACfG,QAAQ,EAAE,EAAE;IACZC,KAAK,EAAEL,KAAK,CAACW,UAAU;IACvBJ,QAAQ,EAAE,KAAK;IACfC,aAAa,EAAER,KAAK,CAACY;GACxB;AAAA;IAEYC,cAAc,GAAG,SAAjBA,cAAcA,CAAYb,KAAyB;EAAA,OAAM;IAClEc,OAAO,eAAEC,6BAACC,MAAM,oBAAKhB,KAAK;GAC7B;AAAA;IAEYiB,eAAe,GAAG,SAAlBA,eAAeA,CAAIjB;MAAAA;IAAAA,QAAakB,SAAS;;EAAA,OAAM;IACxDJ,OAAO,eAAEC,6BAACI,OAAO,oBAAKnB,KAAK,EAAI;IAC/BoB,YAAY,EAAE;MAAEC,OAAO,EAAE;;GAC5B;AAAA;;;;"}
+{"version":3,"file":"common.js","sources":["../../../../../../../src/charts/utils/common.tsx"],"sourcesContent":["import React from 'react';\nimport { ScaleType } from 'recharts/types/util/types';\n\nimport { Legend } from '../components/Legend';\nimport { Tooltip } from '../components/Tooltip';\nimport { LegendProps } from '../components/Legend';\n\nexport type CommonChartProps<TType> = {\n    accessor: keyof TType & string;\n    // eslint-disable-next-line @typescript-eslint/ban-types\n    xAxisScale?: ScaleType | Function;\n    xAxisTickFormat: (value: any) => string;\n    // eslint-disable-next-line @typescript-eslint/ban-types\n    yAxisScale?: ScaleType | Function;\n    yAxisTickFormat: (value: any) => string;\n};\n\nexport const getCartesianGridProps = () => ({\n    vertical: false,\n});\n\nexport const getXAxisProps = <TType,>(props: CommonChartProps<TType>) => ({\n    axisLine: false,\n    dataKey: props.accessor,\n    fontSize: 12,\n    scale: props.xAxisScale,\n    tickLine: false,\n    tickFormatter: props.xAxisTickFormat,\n});\n\nexport const getYAxisProps = <TType,>(props: CommonChartProps<TType>) => ({\n    axisLine: false,\n    fontSize: 12,\n    scale: props.yAxisScale,\n    tickLine: false,\n    tickFormatter: props.yAxisTickFormat,\n});\n\nexport const getLegendProps = <TType,>(props: LegendProps<TType>) => ({\n    content: <Legend {...props} />,\n});\n\nexport const getTooltipProps = (props: any = undefined) => ({\n    content: <Tooltip {...props} />,\n    wrapperStyle: { outline: 'none' },\n});\n"],"names":["getCartesianGridProps","vertical","getXAxisProps","props","axisLine","dataKey","accessor","fontSize","scale","xAxisScale","tickLine","tickFormatter","xAxisTickFormat","getYAxisProps","yAxisScale","yAxisTickFormat","getLegendProps","content","React","Legend","getTooltipProps","undefined","Tooltip","wrapperStyle","outline"],"mappings":";;;;MAiBaA,qBAAqB,GAAGA,OAAO;EACxCC,QAAQ,EAAE;CACb;MAEYC,aAAa,GAAYC,KAA8B,KAAM;EACtEC,QAAQ,EAAE,KAAK;EACfC,OAAO,EAAEF,KAAK,CAACG,QAAQ;EACvBC,QAAQ,EAAE,EAAE;EACZC,KAAK,EAAEL,KAAK,CAACM,UAAU;EACvBC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAER,KAAK,CAACS;CACxB;MAEYC,aAAa,GAAYV,KAA8B,KAAM;EACtEC,QAAQ,EAAE,KAAK;EACfG,QAAQ,EAAE,EAAE;EACZC,KAAK,EAAEL,KAAK,CAACW,UAAU;EACvBJ,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAER,KAAK,CAACY;CACxB;MAEYC,cAAc,GAAYb,KAAyB,KAAM;EAClEc,OAAO,eAAEC,6BAACC,MAAM,oBAAKhB,KAAK;CAC7B;MAEYiB,eAAe,GAAGA,CAACjB,QAAakB,SAAS,MAAM;EACxDJ,OAAO,eAAEC,6BAACI,OAAO,oBAAKnB,KAAK,EAAI;EAC/BoB,YAAY,EAAE;IAAEC,OAAO,EAAE;;CAC5B;;;;"}