@economic/taco 2.47.0-server.4 → 2.47.0-server.5

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

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import cn from 'clsx';
+import { extends as _extends } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { PieChart, Tooltip, Pie, Cell } from 'recharts';
 import { getThemeColor } from '../../utils/color.js';
 import { getTooltipProps } from '../../utils/common.js';
@@ -8,99 +9,133 @@ import { HOVER_DONUT_WIDTH, DONUT_WIDTH } from './util.js';
 import { CenteredLabel } from './CenteredLabel.js';
 import { ActiveShape } from './ActiveShape.js';
 
-const Segment = _ => null;
-const DonutChart = function DonutChart({
-  children,
-  formatter,
-  onClick,
-  showLegend = false,
-  legendPosition = 'bottom',
-  label
-}) {
-  const ref = React__default.useRef(null);
-  const [radius, setRadius] = React__default.useState(0);
-  const [hoveredItem, setHoveredItem] = React__default.useState([]);
+var Segment = function Segment(_) {
+  return null;
+};
+var DonutChart = function DonutChart(_ref) {
+  var _cn;
+  var children = _ref.children,
+    formatter = _ref.formatter,
+    onClick = _ref.onClick,
+    _ref$showLegend = _ref.showLegend,
+    showLegend = _ref$showLegend === void 0 ? false : _ref$showLegend,
+    _ref$legendPosition = _ref.legendPosition,
+    legendPosition = _ref$legendPosition === void 0 ? 'bottom' : _ref$legendPosition,
+    label = _ref.label;
+  var ref = React__default.useRef(null);
+  var _React$useState = React__default.useState(0),
+    radius = _React$useState[0],
+    setRadius = _React$useState[1];
+  var _React$useState2 = React__default.useState([]),
+    hoveredItem = _React$useState2[0],
+    setHoveredItem = _React$useState2[1];
   // used for right legends
-  const [selectedItem, setSelectedItem] = React__default.useState([]);
+  var _React$useState3 = React__default.useState([]),
+    selectedItem = _React$useState3[0],
+    setSelectedItem = _React$useState3[1];
   // used for bottom legends
-  const [visibleItems, setVisibleItems] = React__default.useState(() => {
-    const keys = {};
-    React__default.Children.forEach(children, child => {
-      keys[child.props.id] = true;
-    });
-    return keys;
-  });
-  React__default.useEffect(() => {
+  var _React$useState4 = React__default.useState(function () {
+      var keys = {};
+      React__default.Children.forEach(children, function (child) {
+        keys[child.props.id] = true;
+      });
+      return keys;
+    }),
+    visibleItems = _React$useState4[0],
+    setVisibleItems = _React$useState4[1];
+  React__default.useEffect(function () {
     if (ref.current) {
       var _ref$current$parentEl;
-      const rect = (_ref$current$parentEl = ref.current.parentElement) === null || _ref$current$parentEl === void 0 ? void 0 : _ref$current$parentEl.getBoundingClientRect();
+      var rect = (_ref$current$parentEl = ref.current.parentElement) === null || _ref$current$parentEl === void 0 ? void 0 : _ref$current$parentEl.getBoundingClientRect();
       if (rect) {
-        const width = showLegend ? rect.width / 2 : rect.width;
-        const max = rect.height < width ? rect.height : width;
+        var width = showLegend ? rect.width / 2 : rect.width;
+        var max = rect.height < width ? rect.height : width;
         setRadius(max / 2);
       }
     }
   }, [showLegend]);
-  const diameter = radius * 2; // get dimensions of the parent container to find the max radius, so we can fill the container AND always have a 16px wide donut
-  const data = React__default.Children.map(children, child => ({
-    id: child.props.id,
-    color: child.props.color,
-    label: child.props.label,
-    value: child.props.value
-  }));
-  const displayedData = data.filter(child => visibleItems[child.id]);
-  const total = displayedData.reduce((accum, entry) => accum + entry.value, 0);
-  const showTooltip = (!showLegend || legendPosition === 'bottom') && displayedData.length > 0;
-  const handleLegendClick = entry => {
+  var diameter = radius * 2; // get dimensions of the parent container to find the max radius, so we can fill the container AND always have a 16px wide donut
+  var data = React__default.Children.map(children, function (child) {
+    return {
+      id: child.props.id,
+      color: child.props.color,
+      label: child.props.label,
+      value: child.props.value
+    };
+  });
+  var displayedData = data.filter(function (child) {
+    return visibleItems[child.id];
+  });
+  var total = displayedData.reduce(function (accum, entry) {
+    return accum + entry.value;
+  }, 0);
+  var showTooltip = (!showLegend || legendPosition === 'bottom') && displayedData.length > 0;
+  var handleLegendClick = function handleLegendClick(entry) {
     if (legendPosition === 'bottom' && !Array.isArray(entry)) {
-      setVisibleItems({
-        ...visibleItems,
-        [entry.id]: !visibleItems[entry.id]
-      });
+      var _extends2;
+      setVisibleItems(_extends({}, visibleItems, (_extends2 = {}, _extends2[entry.id] = !visibleItems[entry.id], _extends2)));
     } else {
-      const nextSelectedItem = Array.isArray(entry) ? entry.map(entryItem => entryItem.id) : [entry.id];
+      var nextSelectedItem = Array.isArray(entry) ? entry.map(function (entryItem) {
+        return entryItem.id;
+      }) : [entry.id];
       // Using slice to avoid mutation of the react state 'selectedItem'
-      const isCurrentSegmentActive = selectedItem.slice().sort().join(',') === nextSelectedItem.sort().join(',');
+      var isCurrentSegmentActive = selectedItem.slice().sort().join(',') === nextSelectedItem.sort().join(',');
       if (onClick && !isCurrentSegmentActive) {
         onClick(entry);
       }
       setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);
     }
   };
-  const handlePieClick = React__default.useCallback(pieId => {
+  var handlePieClick = React__default.useCallback(function (pieId) {
     if (onClick && pieId !== undefined) {
-      const pieProps = displayedData.find(item => item.id === pieId);
+      var pieProps = displayedData.find(function (item) {
+        return item.id === pieId;
+      });
       onClick(pieProps);
     }
   }, [onClick, displayedData]);
-  const singlePieDonutChart = displayedData.length === 1;
-  const activeShapeColor = React__default.useMemo(() => {
-    const getSegmentColor = item => item.reduce((colors, itemId) => {
-      const visibleHoveredItem = displayedData.find(dataItem => dataItem.id === itemId);
-      if (visibleHoveredItem) {
-        colors[visibleHoveredItem.id] = visibleHoveredItem.color;
-      }
-      return colors;
-    }, {});
-    const hoveredSegmentColor = getSegmentColor(hoveredItem);
-    const selectedSegmentColor = getSegmentColor(selectedItem);
+  var singlePieDonutChart = displayedData.length === 1;
+  var activeShapeColor = React__default.useMemo(function () {
+    var getSegmentColor = function getSegmentColor(item) {
+      return item.reduce(function (colors, itemId) {
+        var visibleHoveredItem = displayedData.find(function (dataItem) {
+          return dataItem.id === itemId;
+        });
+        if (visibleHoveredItem) {
+          colors[visibleHoveredItem.id] = visibleHoveredItem.color;
+        }
+        return colors;
+      }, {});
+    };
+    var hoveredSegmentColor = getSegmentColor(hoveredItem);
+    var selectedSegmentColor = getSegmentColor(selectedItem);
     return legendPosition === 'bottom' || hoveredItem.length !== 0 ? hoveredSegmentColor : selectedSegmentColor;
   }, [hoveredItem, selectedItem, legendPosition]);
   if (ref.current && !radius) {
     return null;
   }
-  const getActiveIndex = () => {
+  var getActiveIndex = function getActiveIndex() {
     if (hoveredItem.length > 0) {
-      return hoveredItem.map(itemId => displayedData.findIndex(element => element.id === itemId));
+      return hoveredItem.map(function (itemId) {
+        return displayedData.findIndex(function (element) {
+          return element.id === itemId;
+        });
+      });
     }
-    return selectedItem.map(selectedItemId => displayedData.findIndex(element => element.id === selectedItemId));
+    return selectedItem.map(function (selectedItemId) {
+      return displayedData.findIndex(function (element) {
+        return element.id === selectedItemId;
+      });
+    });
   };
-  const content = () => {
-    const elements = React__default.Children.toArray(children).filter(child => /*#__PURE__*/React__default.isValidElement(child) && visibleItems[child.props.id]);
-    return elements.length > 0 ? elements.map((child, index) => {
+  var content = function content() {
+    var elements = React__default.Children.toArray(children).filter(function (child) {
+      return /*#__PURE__*/React__default.isValidElement(child) && visibleItems[child.props.id];
+    });
+    return elements.length > 0 ? elements.map(function (child, index) {
       var _getThemeColor;
       return /*#__PURE__*/React__default.createElement(Cell, {
-        key: `cell-${index}`,
+        key: "cell-" + index,
         name: child.props.label,
         fill: (_getThemeColor = getThemeColor(child.props.color)) !== null && _getThemeColor !== void 0 ? _getThemeColor : getThemeColor('blue-300')
       });
@@ -111,10 +146,7 @@ const DonutChart = function DonutChart({
     }));
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: cn('relative h-full w-full', {
-      [`flex `]: showLegend,
-      'flex-col items-center': legendPosition === 'bottom'
-    }),
+    className: cn('relative h-full w-full', (_cn = {}, _cn["flex "] = showLegend, _cn['flex-col items-center'] = legendPosition === 'bottom', _cn)),
     ref: ref
   }, /*#__PURE__*/React__default.createElement(CenteredLabel, {
     radius: radius,
@@ -134,7 +166,7 @@ const DonutChart = function DonutChart({
     style: {
       transform: 'rotate(90deg) scale(-1,1)'
     },
-    singlePieDonutChart
+    singlePieDonutChart: singlePieDonutChart
   })))) : null, /*#__PURE__*/React__default.createElement(Pie, {
     isAnimationActive: false,
     activeIndex: getActiveIndex(),
@@ -145,8 +177,12 @@ const DonutChart = function DonutChart({
     data: displayedData.length > 0 ? displayedData : [],
     dataKey: "value",
     innerRadius: radius - HOVER_DONUT_WIDTH - DONUT_WIDTH,
-    onMouseEnter: segment => displayedData.length > 0 && setHoveredItem([segment.id]),
-    onMouseLeave: () => setHoveredItem([]),
+    onMouseEnter: function onMouseEnter(segment) {
+      return displayedData.length > 0 && setHoveredItem([segment.id]);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHoveredItem([]);
+    },
     outerRadius: radius - HOVER_DONUT_WIDTH,
     paddingAngle: 2,
     // Prevents the pie group element from being focusable

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

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

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

@@ -88,40 +88,47 @@ import '../../../primitives/Table/useTableDataLoader2.js';
 import '../../../hooks/useBoundaryOverflowDetection.js';
 import '../../../utils/hooks/useOnClickOutside.js';
 
-const Legend = ({
-  legendPosition,
-  hoveredItem,
-  selectedItem,
-  data,
-  onClick,
-  setHoveredItem,
-  formatter,
-  total,
-  visibleItems,
-  label
-}) => {
-  const isTotalLegendSelected = selectedItem.length === data.length;
-  const isTotalLegendHovered = hoveredItem.length === data.length;
-  const handleMouseLeave = () => setHoveredItem([]);
-  const renderLegendItem = (entry, index) => {
-    const isTotal = entry === null;
+var Legend = function Legend(_ref) {
+  var legendPosition = _ref.legendPosition,
+    hoveredItem = _ref.hoveredItem,
+    selectedItem = _ref.selectedItem,
+    data = _ref.data,
+    _onClick = _ref.onClick,
+    setHoveredItem = _ref.setHoveredItem,
+    formatter = _ref.formatter,
+    total = _ref.total,
+    visibleItems = _ref.visibleItems,
+    label = _ref.label;
+  var isTotalLegendSelected = selectedItem.length === data.length;
+  var isTotalLegendHovered = hoveredItem.length === data.length;
+  var handleMouseLeave = function handleMouseLeave() {
+    return setHoveredItem([]);
+  };
+  var renderLegendItem = function renderLegendItem(entry, index) {
+    var isTotal = entry === null;
     // We can't use `isTotal` here because TypeScript is unable to infer the type when `entry` is not null.
-    const itemData = entry === null ? {
+    var itemData = entry === null ? {
       id: 'total',
-      label,
+      label: label,
       value: total,
       color: 'grey-300'
     } : entry;
-    const isSelected = isTotal ? isTotalLegendSelected : selectedItem.includes(itemData.id);
-    const isHovered = isTotal ? isTotalLegendHovered : hoveredItem.includes(itemData.id);
+    var isSelected = isTotal ? isTotalLegendSelected : selectedItem.includes(itemData.id);
+    var isHovered = isTotal ? isTotalLegendHovered : hoveredItem.includes(itemData.id);
     return /*#__PURE__*/React__default.createElement("li", {
-      key: isTotal ? 'total' : `${itemData.label}-${index}`,
+      key: isTotal ? 'total' : itemData.label + "-" + index,
       className: cn('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {
         'bg-grey-100': isHovered && (!isTotal || legendPosition === 'right'),
         'bg-grey-200': isSelected && (!isTotal || legendPosition === 'right')
       }),
-      onClick: () => onClick(isTotal ? data : itemData),
-      onMouseEnter: () => setHoveredItem(isTotal ? data.map(item => item.id) : [itemData.id]),
+      onClick: function onClick() {
+        return _onClick(isTotal ? data : itemData);
+      },
+      onMouseEnter: function onMouseEnter() {
+        return setHoveredItem(isTotal ? data.map(function (item) {
+          return item.id;
+        }) : [itemData.id]);
+      },
       onMouseLeave: handleMouseLeave
     }, legendPosition === 'bottom' ? (/*#__PURE__*/React__default.createElement("div", {
       className: "flex items-center gap-1"
@@ -144,11 +151,13 @@ const Legend = ({
       className: "-mt-1 flex w-full text-lg font-bold"
     }, formatter ? formatter(itemData.value) : itemData.value)))));
   };
-  const moreButton = moreButtonText => (/*#__PURE__*/React__default.createElement(Button, {
-    appearance: "transparent",
-    className: "text-grey-700"
-  }, moreButtonText));
-  const className = cn('flex-grow pl-4', {
+  var moreButton = function moreButton(moreButtonText) {
+    return /*#__PURE__*/React__default.createElement(Button, {
+      appearance: "transparent",
+      className: "text-grey-700"
+    }, moreButtonText);
+  };
+  var className = cn('flex-grow pl-4', {
     'w-full': legendPosition === 'bottom'
   });
   return /*#__PURE__*/React__default.createElement("div", {

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","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","_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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"}

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

@@ -1,5 +1,5 @@
-const DONUT_WIDTH = 16;
-const HOVER_DONUT_WIDTH = 10;
+var DONUT_WIDTH = 16;
+var 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":"MAAaA,WAAW,GAAG;MACdC,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":"IAAaA,WAAW,GAAG;IACdC,iBAAiB,GAAG;;;;"}

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

@@ -88,28 +88,30 @@ import '../../hooks/useBoundaryOverflowDetection.js';
 import '../../utils/hooks/useOnClickOutside.js';
 
 function Legend(props) {
-  const {
-    activeIndex,
-    onMouseEnter,
-    onMouseLeave,
-    onClick,
-    payload,
-    layout,
-    activeItems
-  } = props;
-  const [hoverIndex, setHoverIndex] = useState(null);
-  const handleMouseEnter = (entry, index) => {
+  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) {
     setHoverIndex(index);
     if (activeItems[entry.dataKey]) onMouseEnter(entry, index);
   };
-  const handleMouseLeave = () => {
+  var handleMouseLeave = function handleMouseLeave() {
     onMouseLeave();
     setHoverIndex(null);
   };
-  const moreButton = moreButtonText => (/*#__PURE__*/React__default.createElement(Button, {
-    appearance: "transparent",
-    className: "text-grey-700"
-  }, moreButtonText));
+  var moreButton = function moreButton(moreButtonText) {
+    return /*#__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", {
@@ -119,27 +121,33 @@ function Legend(props) {
   }, /*#__PURE__*/React__default.createElement(OverflowGroup, {
     className: "w-full items-center py-1",
     moreButton: moreButton
-  }, 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)))))));
+  }, 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));
+  }))));
 }
 
 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","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;;;;"}
+{"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;;;;"}