npm - @economic/taco - Versions diffs - 2.49.0-server.4 → 2.49.1 - Mend

@economic/taco 2.49.0-server.4 → 2.49.1

Files changed (645) hide show

package/dist/esm/packages/taco/src/charts/components/Bar/BarChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BarChart.js","sources":["../../../../../../../../src/charts/components/Bar/BarChart.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 StacksType<TType> = Record<string, Array<keyof TType & string>>;\n\ntype BarChartBarProps<TType> = {\n accessor: keyof TType & string;\n color?: Color;\n label?: string;\n stackId?: string;\n};\n\nconst Bar = (_: BarChartBarProps<any>) => null;\n\ntype BarChartProps<TType> = CommonChartProps<TType> & {\n children: React.ReactElement<BarChartBarProps<TType>> \| React.ReactElement<BarChartBarProps<TType>>[];\n data: TType[];\n formatter?: (value: any) => string;\n layout?: 'horizontal' \| 'vertical';\n};\n\nconst getXAxisVerticalProps = <TType,>(props: CommonChartProps<TType>) => ({\n ...getXAxisProps<TType>(props),\n ...{ type: 'number' as const, dataKey: undefined },\n});\n\nconst getYAxisVerticalProps = <TType,>(props: CommonChartProps<TType>) => ({\n ...getYAxisProps<TType>(props),\n ...{ dataKey: props.accessor, type: 'category' as const },\n});\n\nexport const BarChart = function BarChart<TType = unknown>(externalProps: BarChartProps<TType>) {\n const { children, data, formatter, layout = 'horizontal', ...props } = externalProps;\n const [activeIndex, setActiveIndex] = React.useState<number \| undefined>(undefined);\n const [hoveredBar, setHoveredBar] = useState<(keyof TType & string) \| null>(null);\n const [activeBars, setActiveBars] = 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 // Recharts doesn't provide a way for us to know if a stacked bar is at the top or the bottom,\n // so we can't set proper radiuses without some \"magic\"\n const stacks = {} as StacksType<TType>;\n\n React.Children.forEach(children, child => {\n if (child.props.stackId) {\n if (!stacks[child.props.stackId]) {\n stacks[child.props.stackId] = [child.props.accessor];\n } else {\n stacks[child.props.stackId].push(child.props.accessor);\n }\n }\n });\n\n const handleLegendClick = (entry: PayloadType<TType>): void => {\n setHoveredBar(null);\n setActiveBars({ ...activeBars, [entry.dataKey]: !activeBars[entry.dataKey] });\n };\n\n const handleLegendHover = (entry: PayloadType<TType>, index: number): void => {\n setHoveredBar(entry.dataKey);\n setActiveIndex(index);\n };\n\n return (\n <ResponsiveContainer>\n <Recharts.BarChart\n layout={layout}\n data={data}\n margin={{ top: 10, right: 0, left: layout === 'vertical' ? 0 : -25, bottom: 0 }}\n onMouseMove={chartState => setActiveIndex(chartState.activeTooltipIndex)}\n onMouseLeave={() => setActiveIndex(undefined)}>\n <Recharts.CartesianGrid {...getCartesianGridProps()} />\n <Recharts.XAxis\n {...(layout === 'vertical' ? getXAxisVerticalProps<TType>(props) : getXAxisProps<TType>(props))}\n />\n <Recharts.YAxis\n {...(layout === 'vertical' ? getYAxisVerticalProps<TType>(props) : getYAxisProps<TType>(props))}\n />\n <Recharts.Legend\n {...getLegendProps({\n onClick: handleLegendClick,\n onMouseEnter: handleLegendHover,\n onMouseLeave: () => setHoveredBar(null),\n activeItems: activeBars,\n })}\n />\n <Recharts.Tooltip {...getTooltipProps()} formatter={formatter} />\n {React.Children.map(children, child => (\n <Recharts.Bar\n isAnimationActive={false}\n barSize={16}\n dataKey={child.props.accessor}\n name={child.props.label}\n onMouseEnter={(_, index) => setActiveIndex(index)}\n onMouseLeave={() => setActiveIndex(undefined)}\n fill={getThemeColor(child.props.color ? `${child.props.color}` : `blue-300`)}\n radius={getBarRadius<TType>(stacks, child.props.accessor, child.props.stackId, activeBars)}\n stackId={child.props.stackId}\n style={child.props.stackId ? { stroke: '#fff', strokeWidth: '2px' } : undefined}\n hide={!activeBars[child.props.accessor]}>\n {data.map((_, index) => (\n <Recharts.Cell\n key={`cell-${index}`}\n opacity={\n (hoveredBar && child.props.accessor !== hoveredBar) \|\|\n (activeIndex !== undefined && activeIndex !== index)\n ? 0.3\n : 1\n }\n />\n ))}\n </Recharts.Bar>\n ))}\n </Recharts.BarChart>\n </ResponsiveContainer>\n );\n};\nBarChart.Bar = Bar;\n\nconst getBarRadius = <TType,>(\n stacks: StacksType<TType>,\n accessor: keyof TType & string,\n stackId: string \| undefined,\n activeBars: ActiveChartItems<TType>\n): number \| [number, number, number, number] => {\n if (stackId && Array.isArray(stacks[stackId])) {\n const length = stacks[stackId].length - 1;\n const index: number = stacks[stackId].indexOf(accessor);\n\n if (\n Object.entries(activeBars)\n .filter(item => item[0] !== accessor)\n .every(item => !item[1])\n ) {\n return [3, 3, 0, 0];\n }\n\n if (activeBars[stacks[stackId][index + 1]] === false) {\n return [index === 0 ? 0 : 3, index === 0 ? 0 : 3, index === length - 1 ? 0 : 3, index === length - 1 ? 0 : 3];\n }\n\n if (index !== 0 && index !== length) {\n return 0;\n }\n\n return [index === 0 ? 0 : 3, index === 0 ? 0 : 3, index === length ? 0 : 3, index === length ? 0 : 3];\n }\n\n return 3;\n};\n"],"names":["Bar","_","getXAxisVerticalProps","props","_extends","getXAxisProps","type","dataKey","undefined","getYAxisVerticalProps","getYAxisProps","accessor","BarChart","externalProps","children","data","formatter","_externalProps$layout","layout","_objectWithoutPropertiesLoose","_excluded","_React$useState","React","useState","activeIndex","setActiveIndex","_useState","hoveredBar","setHoveredBar","_useState2","keys","Children","forEach","child","activeBars","setActiveBars","stacks","stackId","push","handleLegendClick","entry","_extends2","handleLegendHover","index","ResponsiveContainer","Recharts","margin","top","right","left","bottom","onMouseMove","chartState","activeTooltipIndex","onMouseLeave","getCartesianGridProps","getLegendProps","onClick","onMouseEnter","activeItems","getTooltipProps","map","isAnimationActive","barSize","name","label","fill","getThemeColor","color","radius","getBarRadius","style","stroke","strokeWidth","hide","key","opacity","Array","isArray","length","indexOf","Object","entries","filter","item","every"],"mappings":"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"}
1	+ {"version":3,"file":"BarChart.js","sources":["../../../../../../../../src/charts/components/Bar/BarChart.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 StacksType<TType> = Record<string, Array<keyof TType & string>>;\n\ntype BarChartBarProps<TType> = {\n accessor: keyof TType & string;\n color?: Color;\n label?: string;\n stackId?: string;\n};\n\nconst Bar = (_: BarChartBarProps<any>) => null;\n\ntype BarChartProps<TType> = CommonChartProps<TType> & {\n children: React.ReactElement<BarChartBarProps<TType>> \| React.ReactElement<BarChartBarProps<TType>>[];\n data: TType[];\n formatter?: (value: any) => string;\n layout?: 'horizontal' \| 'vertical';\n};\n\nconst getXAxisVerticalProps = <TType,>(props: CommonChartProps<TType>) => ({\n ...getXAxisProps<TType>(props),\n ...{ type: 'number' as const, dataKey: undefined },\n});\n\nconst getYAxisVerticalProps = <TType,>(props: CommonChartProps<TType>) => ({\n ...getYAxisProps<TType>(props),\n ...{ dataKey: props.accessor, type: 'category' as const },\n});\n\nexport const BarChart = function BarChart<TType = unknown>(externalProps: BarChartProps<TType>) {\n const { children, data, formatter, layout = 'horizontal', ...props } = externalProps;\n const [activeIndex, setActiveIndex] = React.useState<number \| undefined>(undefined);\n const [hoveredBar, setHoveredBar] = useState<(keyof TType & string) \| null>(null);\n const [activeBars, setActiveBars] = 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 // Recharts doesn't provide a way for us to know if a stacked bar is at the top or the bottom,\n // so we can't set proper radiuses without some \"magic\"\n const stacks = {} as StacksType<TType>;\n\n React.Children.forEach(children, child => {\n if (child.props.stackId) {\n if (!stacks[child.props.stackId]) {\n stacks[child.props.stackId] = [child.props.accessor];\n } else {\n stacks[child.props.stackId].push(child.props.accessor);\n }\n }\n });\n\n const handleLegendClick = (entry: PayloadType<TType>): void => {\n setHoveredBar(null);\n setActiveBars({ ...activeBars, [entry.dataKey]: !activeBars[entry.dataKey] });\n };\n\n const handleLegendHover = (entry: PayloadType<TType>, index: number): void => {\n setHoveredBar(entry.dataKey);\n setActiveIndex(index);\n };\n\n return (\n <ResponsiveContainer>\n <Recharts.BarChart\n layout={layout}\n data={data}\n margin={{ top: 10, right: 0, left: layout === 'vertical' ? 0 : -25, bottom: 0 }}\n onMouseMove={chartState => setActiveIndex(chartState.activeTooltipIndex)}\n onMouseLeave={() => setActiveIndex(undefined)}>\n <Recharts.CartesianGrid {...getCartesianGridProps()} />\n <Recharts.XAxis\n {...(layout === 'vertical' ? getXAxisVerticalProps<TType>(props) : getXAxisProps<TType>(props))}\n />\n <Recharts.YAxis\n {...(layout === 'vertical' ? getYAxisVerticalProps<TType>(props) : getYAxisProps<TType>(props))}\n />\n <Recharts.Legend\n {...getLegendProps({\n onClick: handleLegendClick,\n onMouseEnter: handleLegendHover,\n onMouseLeave: () => setHoveredBar(null),\n activeItems: activeBars,\n })}\n />\n <Recharts.Tooltip {...getTooltipProps()} formatter={formatter} />\n {React.Children.map(children, child => (\n <Recharts.Bar\n isAnimationActive={false}\n barSize={16}\n dataKey={child.props.accessor}\n name={child.props.label}\n onMouseEnter={(_, index) => setActiveIndex(index)}\n onMouseLeave={() => setActiveIndex(undefined)}\n fill={getThemeColor(child.props.color ? `${child.props.color}` : `blue-300`)}\n radius={getBarRadius<TType>(stacks, child.props.accessor, child.props.stackId, activeBars)}\n stackId={child.props.stackId}\n style={child.props.stackId ? { stroke: '#fff', strokeWidth: '2px' } : undefined}\n hide={!activeBars[child.props.accessor]}>\n {data.map((_, index) => (\n <Recharts.Cell\n key={`cell-${index}`}\n opacity={\n (hoveredBar && child.props.accessor !== hoveredBar) \|\|\n (activeIndex !== undefined && activeIndex !== index)\n ? 0.3\n : 1\n }\n />\n ))}\n </Recharts.Bar>\n ))}\n </Recharts.BarChart>\n </ResponsiveContainer>\n );\n};\nBarChart.Bar = Bar;\n\nconst getBarRadius = <TType,>(\n stacks: StacksType<TType>,\n accessor: keyof TType & string,\n stackId: string \| undefined,\n activeBars: ActiveChartItems<TType>\n): number \| [number, number, number, number] => {\n if (stackId && Array.isArray(stacks[stackId])) {\n const length = stacks[stackId].length - 1;\n const index: number = stacks[stackId].indexOf(accessor);\n\n if (\n Object.entries(activeBars)\n .filter(item => item[0] !== accessor)\n .every(item => !item[1])\n ) {\n return [3, 3, 0, 0];\n }\n\n if (activeBars[stacks[stackId][index + 1]] === false) {\n return [index === 0 ? 0 : 3, index === 0 ? 0 : 3, index === length - 1 ? 0 : 3, index === length - 1 ? 0 : 3];\n }\n\n if (index !== 0 && index !== length) {\n return 0;\n }\n\n return [index === 0 ? 0 : 3, index === 0 ? 0 : 3, index === length ? 0 : 3, index === length ? 0 : 3];\n }\n\n return 3;\n};\n"],"names":["Bar","_","getXAxisVerticalProps","props","getXAxisProps","type","dataKey","undefined","getYAxisVerticalProps","getYAxisProps","accessor","BarChart","externalProps","children","data","formatter","layout","activeIndex","setActiveIndex","React","useState","hoveredBar","setHoveredBar","activeBars","setActiveBars","keys","Children","forEach","child","stacks","stackId","push","handleLegendClick","entry","handleLegendHover","index","ResponsiveContainer","Recharts","margin","top","right","left","bottom","onMouseMove","chartState","activeTooltipIndex","onMouseLeave","getCartesianGridProps","getLegendProps","onClick","onMouseEnter","activeItems","getTooltipProps","map","isAnimationActive","barSize","name","label","fill","getThemeColor","color","radius","getBarRadius","style","stroke","strokeWidth","hide","key","opacity","Array","isArray","length","indexOf","Object","entries","filter","item","every"],"mappings":"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"}

package/dist/esm/packages/taco/src/charts/components/Donut/ActiveShape.js CHANGED Viewed

@@ -4,25 +4,24 @@ import { Sector } from 'recharts';
 import { getThemeColor } from '../../utils/color.js';
 import { HOVER_DONUT_WIDTH } from './util.js';
-var ActiveShape = function ActiveShape(props) {
+const ActiveShape = props => {
   var _getThemeColor;
-  var cx = props.cx,
-    cy = props.cy,
-    id = props.id,
-    innerRadius = props.innerRadius,
-    _onClick = props.onClick,
-    _props$outerRadius = props.outerRadius,
-    outerRadius = _props$outerRadius === void 0 ? 0 : _props$outerRadius,
-    pieColors = props.pieColors,
-    startAngle = props.startAngle,
-    endAngle = props.endAngle,
-    fill = props.fill;
+  const {
+    cx,
+    cy,
+    id,
+    innerRadius,
+    onClick,
+    outerRadius = 0,
+    pieColors,
+    startAngle,
+    endAngle,
+    fill
+  } = props;
   return /*#__PURE__*/React__default.createElement("g", {
-    onClick: function onClick() {
-      return _onClick(id);
-    },
+    onClick: () => onClick(id),
     className: cn({
-      'cursor-pointer': !!_onClick
+      'cursor-pointer': !!onClick
     })
   }, /*#__PURE__*/React__default.createElement(Sector, {
     cx: cx,

package/dist/esm/packages/taco/src/charts/components/Donut/ActiveShape.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActiveShape.js","sources":["../../../../../../../../src/charts/components/Donut/ActiveShape.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\nimport cn from 'clsx';\n\nimport { getThemeColor } from '../../utils/color';\nimport { PieSectorDataItem } from 'recharts/types/polar/Pie';\nimport { HOVER_DONUT_WIDTH } from './util';\n\ntype ActiveShapeProps = Omit<PieSectorDataItem, 'onClick'> & {\n onClick: (id: string \| undefined) => void;\n pieColors: Record<string, string>;\n};\n\nexport const ActiveShape = (props: ActiveShapeProps) => {\n const { cx, cy, id, innerRadius, onClick, outerRadius = 0, pieColors, startAngle, endAngle, fill } = props;\n\n return (\n <g onClick={() => onClick(id)} className={cn({ 'cursor-pointer': !!onClick })}>\n <Recharts.Sector\n cx={cx}\n cy={cy}\n innerRadius={innerRadius}\n outerRadius={outerRadius}\n startAngle={startAngle}\n endAngle={endAngle}\n fill={fill}\n />\n <Recharts.Sector\n cx={cx}\n cy={cy}\n startAngle={startAngle}\n endAngle={endAngle}\n innerRadius={outerRadius + 2}\n outerRadius={outerRadius + HOVER_DONUT_WIDTH}\n fill={id !== undefined ? getThemeColor(pieColors[id]) ?? getThemeColor('blue-500') : getThemeColor('blue-500')}\n opacity={0.3}\n />\n </g>\n );\n};\n"],"names":["ActiveShape","props","cx","cy","id","innerRadius","onClick","~~_props$~~outerRadius","~~outerRadius","~~pieColors","startAngle","endAngle","fill","React","className","cn","Recharts","HOVER_DONUT_WIDTH","undefined","_getThemeColor","getThemeColor","opacity"],"mappings":";;;;;;~~IAaaA~~,WAAW,~~GAAG~~,~~SAAdA,WAAWA,CAAIC,~~KAAuB;;EAC/C,~~IAAQC~~,EAAE~~,GAA2FD,KAAK,CAAlGC,EAAE~~;IAAEC,EAAE~~,GAAuFF,KAAK,CAA9FE,EAAE~~;IAAEC,EAAE~~,GAAmFH,KAAK,CAA1FG,EAAE~~;IAAEC,WAAW~~,GAAsEJ,KAAK,CAAtFI,WAAW~~;IAAEC,~~QAAO,GAA6DL,KAAK,CAAzEK,~~OAAO;~~IAAAC~~,~~kBAAA,GAA6DN,KAAK,CAAhEO,~~WAAW~~;IAAXA~~,~~WAAW~~,~~GAAAD,kBAAA,cAAG,~~CAAC~~,GAAAA,kBAAA~~;~~IAAEE~~,SAAS~~,GAAiCR,KAAK,CAA/CQ,SAAS~~;IAAEC,UAAU~~,GAAqBT,KAAK,CAApCS,UAAU~~;IAAEC,QAAQ~~,GAAWV,KAAK,CAAxBU,QAAQ~~;IAAEC,~~IAAI~~,~~GAAKX,~~KAAK~~,CAAdW,IAAI~~;~~EAEhG~~,~~oBACIC~~;~~IAAGP~~,OAAO,~~EAAE~~,~~SAAAA;MAAA~~,~~OAAMA~~,~~QAAO,~~CAACF,EAAE,CAAC~~;;IAAEU~~,SAAS,EAAEC,EAAE,CAAC;MAAE,gBAAgB,EAAE,CAAC,~~CAACT~~;KAAS;~~kBACxEO~~,6BAACG,MAAe;~~IACZd~~,EAAE,EAAEA,EAAE;IACNC,EAAE,EAAEA,EAAE;IACNE,WAAW,EAAEA,WAAW;~~IACxBG~~,WAAW,EAAEA,WAAW;IACxBE,UAAU,EAAEA,UAAU;IACtBC,QAAQ,EAAEA,QAAQ;IAClBC,IAAI,EAAEA;IACR,eACFC,6BAACG,MAAe;~~IACZd~~,EAAE,EAAEA,EAAE;IACNC,EAAE,EAAEA,EAAE;~~IACNO~~,UAAU,EAAEA,UAAU;IACtBC,QAAQ,EAAEA,QAAQ;~~IAClBN~~,WAAW,~~EAAEG~~,WAAW,GAAG,CAAC;IAC5BA,WAAW,EAAEA,WAAW,GAAGS,iBAAiB;IAC5CL,IAAI,~~EAAER~~,EAAE,~~KAAKc~~,SAAS,IAAAC,cAAA,GAAGC,aAAa,CAACX,SAAS,~~CAACL~~,EAAE,CAAC,CAAC,~~cAAAe~~,cAAA,cAAAA,cAAA,GAAIC,aAAa,CAAC,UAAU,CAAC,GAAGA,aAAa,CAAC,UAAU,CAAC;IAC9GC,OAAO,EAAE;IACX,CACF;AAEZ;;;;"}
1	+ {"version":3,"file":"ActiveShape.js","sources":["../../../../../../../../src/charts/components/Donut/ActiveShape.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\nimport cn from 'clsx';\n\nimport { getThemeColor } from '../../utils/color';\nimport { PieSectorDataItem } from 'recharts/types/polar/Pie';\nimport { HOVER_DONUT_WIDTH } from './util';\n\ntype ActiveShapeProps = Omit<PieSectorDataItem, 'onClick'> & {\n onClick: (id: string \| undefined) => void;\n pieColors: Record<string, string>;\n};\n\nexport const ActiveShape = (props: ActiveShapeProps) => {\n const { cx, cy, id, innerRadius, onClick, outerRadius = 0, pieColors, startAngle, endAngle, fill } = props;\n\n return (\n <g onClick={() => onClick(id)} className={cn({ 'cursor-pointer': !!onClick })}>\n <Recharts.Sector\n cx={cx}\n cy={cy}\n innerRadius={innerRadius}\n outerRadius={outerRadius}\n startAngle={startAngle}\n endAngle={endAngle}\n fill={fill}\n />\n <Recharts.Sector\n cx={cx}\n cy={cy}\n startAngle={startAngle}\n endAngle={endAngle}\n innerRadius={outerRadius + 2}\n outerRadius={outerRadius + HOVER_DONUT_WIDTH}\n fill={id !== undefined ? getThemeColor(pieColors[id]) ?? getThemeColor('blue-500') : getThemeColor('blue-500')}\n opacity={0.3}\n />\n </g>\n );\n};\n"],"names":["ActiveShape","props","cx","cy","id","innerRadius","onClick","outerRadius","pieColors","startAngle","endAngle","fill","React","className","cn","Recharts","HOVER_DONUT_WIDTH","undefined","_getThemeColor","getThemeColor","opacity"],"mappings":";;;;;;MAaaA,WAAW,GAAIC,KAAuB;;EAC/C,MAAM;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,WAAW;IAAEC,OAAO;IAAEC,WAAW,GAAG,CAAC;IAAEC,SAAS;IAAEC,UAAU;IAAEC,QAAQ;IAAEC;GAAM,GAAGV,KAAK;EAE1G,oBACIW;IAAGN,OAAO,EAAEA,MAAMA,OAAO,CAACF,EAAE,CAAC;IAAES,SAAS,EAAEC,EAAE,CAAC;MAAE,gBAAgB,EAAE,CAAC,CAACR;KAAS;kBACxEM,6BAACG,MAAe;IACZb,EAAE,EAAEA,EAAE;IACNC,EAAE,EAAEA,EAAE;IACNE,WAAW,EAAEA,WAAW;IACxBE,WAAW,EAAEA,WAAW;IACxBE,UAAU,EAAEA,UAAU;IACtBC,QAAQ,EAAEA,QAAQ;IAClBC,IAAI,EAAEA;IACR,eACFC,6BAACG,MAAe;IACZb,EAAE,EAAEA,EAAE;IACNC,EAAE,EAAEA,EAAE;IACNM,UAAU,EAAEA,UAAU;IACtBC,QAAQ,EAAEA,QAAQ;IAClBL,WAAW,EAAEE,WAAW,GAAG,CAAC;IAC5BA,WAAW,EAAEA,WAAW,GAAGS,iBAAiB;IAC5CL,IAAI,EAAEP,EAAE,KAAKa,SAAS,IAAAC,cAAA,GAAGC,aAAa,CAACX,SAAS,CAACJ,EAAE,CAAC,CAAC,cAAAc,cAAA,cAAAA,cAAA,GAAIC,aAAa,CAAC,UAAU,CAAC,GAAGA,aAAa,CAAC,UAAU,CAAC;IAC9GC,OAAO,EAAE;IACX,CACF;AAEZ;;;;"}

package/dist/esm/packages/taco/src/charts/components/Donut/CenteredLabel.js CHANGED Viewed

@@ -1,21 +1,22 @@
 import React__default from 'react';
 import { HOVER_DONUT_WIDTH, DONUT_WIDTH } from './util.js';
-var CenteredLabel = function CenteredLabel(_ref) {
-  var radius = _ref.radius,
-    legendPosition = _ref.legendPosition,
-    label = _ref.label,
-    total = _ref.total,
-    formatter = _ref.formatter,
-    showLegend = _ref.showLegend;
-  var totalInset = HOVER_DONUT_WIDTH + DONUT_WIDTH + DONUT_WIDTH;
-  var diameter = radius * 2;
+const CenteredLabel = ({
+  radius,
+  legendPosition,
+  label,
+  total,
+  formatter,
+  showLegend
+}) => {
+  const totalInset = HOVER_DONUT_WIDTH + DONUT_WIDTH + DONUT_WIDTH;
+  const diameter = radius * 2;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "absolute mt-1 flex h-12 flex-col text-center",
     style: {
-      top: "calc(" + radius + "px - (3rem / 2))",
-      left: legendPosition === 'right' ? totalInset + "px" : "calc(50%-" + (diameter - 2 * totalInset) + ")",
-      width: showLegend ? diameter - 2 * totalInset + "px" : diameter + "px"
+      top: `calc(${radius}px - (3rem / 2))`,
+      left: legendPosition === 'right' ? `${totalInset}px` : `calc(50%-${diameter - 2 * totalInset})`,
+      width: showLegend ? `${diameter - 2 * totalInset}px` : `${diameter}px`
     }
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "w-full truncate text-lg font-bold"

package/dist/esm/packages/taco/src/charts/components/Donut/CenteredLabel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CenteredLabel.js","sources":["../../../../../../../../src/charts/components/Donut/CenteredLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { HOVER_DONUT_WIDTH, DONUT_WIDTH } from './util';\n\ntype CenteredLabelProps = {\n radius: number;\n legendPosition: string;\n label: string;\n total: number;\n formatter: ((value: number) => string) \| undefined;\n showLegend: boolean;\n};\n\nexport const CenteredLabel = ({ radius, legendPosition, label, total, formatter, showLegend }: CenteredLabelProps) => {\n const totalInset = HOVER_DONUT_WIDTH + DONUT_WIDTH + DONUT_WIDTH;\n const diameter = radius * 2;\n\n return (\n <div\n className=\"absolute mt-1 flex h-12 flex-col text-center\"\n style={{\n top: `calc(${radius}px - (3rem / 2))`, // h-12 is 3rem\n left: legendPosition === 'right' ? `${totalInset}px` : `calc(50%-${diameter - 2 * totalInset})`,\n width: showLegend ? `${diameter - 2 * totalInset}px` : `${diameter}px`,\n }}>\n <span className=\"w-full truncate text-lg font-bold\">{formatter ? formatter(total) : total}</span>\n {label}\n </div>\n );\n};\n"],"names":["CenteredLabel","~~_ref","~~radius","legendPosition","label","total","formatter","showLegend","totalInset","HOVER_DONUT_WIDTH","DONUT_WIDTH","diameter","React","className","style","top","left","width"],"mappings":";;;~~IAYaA~~,aAAa,~~GAAG~~,~~SAAhBA,aAAaA,CAAAC,IAAA~~;~~MAAMC~~,MAAM~~,GAAAD,IAAA,CAANC,MAAM~~;~~IAAEC~~,cAAc~~,GAAAF,IAAA,CAAdE,cAAc~~;~~IAAEC~~,KAAK~~,GAAAH,IAAA,CAALG,KAAK~~;~~IAAEC~~,KAAK~~,GAAAJ,IAAA,CAALI,KAAK~~;~~IAAEC~~,SAAS~~,GAAAL,IAAA,CAATK,SAAS~~;~~IAAEC,UAAU,GAAAN,IAAA,CAAVM,UAAU~~;~~EACvF~~,~~IAAMC~~,UAAU,GAAGC,iBAAiB,GAAGC,WAAW,GAAGA,WAAW;EAChE,~~IAAMC~~,QAAQ,GAAGT,MAAM,GAAG,CAAC;EAE3B,oBACIU;IACIC,SAAS,EAAC,8CAA8C;IACxDC,KAAK,EAAE;MACHC,GAAG,~~YAAUb~~,MAAM,~~qBAAkB~~;MACrCc,IAAI,EAAEb,cAAc,KAAK,OAAO,~~GAAMK~~,UAAU,~~yBAAmBG~~,QAAQ,GAAG,CAAC,GAAGH,UAAU,~~OAAG~~;MAC/FS,KAAK,EAAEV,UAAU,~~GAAMI~~,QAAQ,GAAG,CAAC,GAAGH,UAAU,~~UAAUG~~,QAAQ;;kBAEtEC;IAAMC,SAAS,EAAC;KAAqCP,SAAS,GAAGA,SAAS,CAACD,KAAK,CAAC,GAAGA,KAAK,CAAQ,EAChGD,KAAK,CACJ;AAEd;;;;"}
1	+ {"version":3,"file":"CenteredLabel.js","sources":["../../../../../../../../src/charts/components/Donut/CenteredLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { HOVER_DONUT_WIDTH, DONUT_WIDTH } from './util';\n\ntype CenteredLabelProps = {\n radius: number;\n legendPosition: string;\n label: string;\n total: number;\n formatter: ((value: number) => string) \| undefined;\n showLegend: boolean;\n};\n\nexport const CenteredLabel = ({ radius, legendPosition, label, total, formatter, showLegend }: CenteredLabelProps) => {\n const totalInset = HOVER_DONUT_WIDTH + DONUT_WIDTH + DONUT_WIDTH;\n const diameter = radius * 2;\n\n return (\n <div\n className=\"absolute mt-1 flex h-12 flex-col text-center\"\n style={{\n top: `calc(${radius}px - (3rem / 2))`, // h-12 is 3rem\n left: legendPosition === 'right' ? `${totalInset}px` : `calc(50%-${diameter - 2 * totalInset})`,\n width: showLegend ? `${diameter - 2 * totalInset}px` : `${diameter}px`,\n }}>\n <span className=\"w-full truncate text-lg font-bold\">{formatter ? formatter(total) : total}</span>\n {label}\n </div>\n );\n};\n"],"names":["CenteredLabel","radius","legendPosition","label","total","formatter","showLegend","totalInset","HOVER_DONUT_WIDTH","DONUT_WIDTH","diameter","React","className","style","top","left","width"],"mappings":";;;MAYaA,aAAa,GAAGA,CAAC;EAAEC,MAAM;EAAEC,cAAc;EAAEC,KAAK;EAAEC,KAAK;EAAEC,SAAS;EAAEC;CAAgC;EAC7G,MAAMC,UAAU,GAAGC,iBAAiB,GAAGC,WAAW,GAAGA,WAAW;EAChE,MAAMC,QAAQ,GAAGT,MAAM,GAAG,CAAC;EAE3B,oBACIU;IACIC,SAAS,EAAC,8CAA8C;IACxDC,KAAK,EAAE;MACHC,GAAG,EAAE,QAAQb,MAAM,kBAAkB;MACrCc,IAAI,EAAEb,cAAc,KAAK,OAAO,GAAG,GAAGK,UAAU,IAAI,GAAG,YAAYG,QAAQ,GAAG,CAAC,GAAGH,UAAU,GAAG;MAC/FS,KAAK,EAAEV,UAAU,GAAG,GAAGI,QAAQ,GAAG,CAAC,GAAGH,UAAU,IAAI,GAAG,GAAGG,QAAQ;;kBAEtEC;IAAMC,SAAS,EAAC;KAAqCP,SAAS,GAAGA,SAAS,CAACD,KAAK,CAAC,GAAGA,KAAK,CAAQ,EAChGD,KAAK,CACJ;AAEd;;;;"}

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

@@ -1,6 +1,5 @@
 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';
@@ -9,133 +8,99 @@ import { HOVER_DONUT_WIDTH, DONUT_WIDTH } from './util.js';
 import { CenteredLabel } from './CenteredLabel.js';
 import { ActiveShape } from './ActiveShape.js';
-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];
+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([]);
   // used for right legends
-  var _React$useState3 = React__default.useState([]),
-    selectedItem = _React$useState3[0],
-    setSelectedItem = _React$useState3[1];
+  const [selectedItem, setSelectedItem] = React__default.useState([]);
   // used for bottom legends
-  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 () {
+  const [visibleItems, setVisibleItems] = React__default.useState(() => {
+    const keys = {};
+    React__default.Children.forEach(children, child => {
+      keys[child.props.id] = true;
+    });
+    return keys;
+  });
+  React__default.useEffect(() => {
     if (ref.current) {
       var _ref$current$parentEl;
-      var rect = (_ref$current$parentEl = ref.current.parentElement) === null || _ref$current$parentEl === void 0 ? void 0 : _ref$current$parentEl.getBoundingClientRect();
+      const rect = (_ref$current$parentEl = ref.current.parentElement) === null || _ref$current$parentEl === void 0 ? void 0 : _ref$current$parentEl.getBoundingClientRect();
       if (rect) {
-        var width = showLegend ? rect.width / 2 : rect.width;
-        var max = rect.height < width ? rect.height : width;
+        const width = showLegend ? rect.width / 2 : rect.width;
+        const max = rect.height < width ? rect.height : width;
         setRadius(max / 2);
       }
     }
   }, [showLegend]);
-  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) {
+  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 => {
     if (legendPosition === 'bottom' && !Array.isArray(entry)) {
-      var _extends2;
-      setVisibleItems(_extends({}, visibleItems, (_extends2 = {}, _extends2[entry.id] = !visibleItems[entry.id], _extends2)));
+      setVisibleItems({
+        ...visibleItems,
+        [entry.id]: !visibleItems[entry.id]
+      });
     } else {
-      var nextSelectedItem = Array.isArray(entry) ? entry.map(function (entryItem) {
-        return entryItem.id;
-      }) : [entry.id];
+      const nextSelectedItem = Array.isArray(entry) ? entry.map(entryItem => entryItem.id) : [entry.id];
       // Using slice to avoid mutation of the react state 'selectedItem'
-      var isCurrentSegmentActive = selectedItem.slice().sort().join(',') === nextSelectedItem.sort().join(',');
+      const isCurrentSegmentActive = selectedItem.slice().sort().join(',') === nextSelectedItem.sort().join(',');
       if (onClick && !isCurrentSegmentActive) {
         onClick(entry);
       }
       setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);
     }
   };
-  var handlePieClick = React__default.useCallback(function (pieId) {
+  const handlePieClick = React__default.useCallback(pieId => {
     if (onClick && pieId !== undefined) {
-      var pieProps = displayedData.find(function (item) {
-        return item.id === pieId;
-      });
+      const pieProps = displayedData.find(item => item.id === pieId);
       onClick(pieProps);
     }
   }, [onClick, displayedData]);
-  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);
+  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);
     return legendPosition === 'bottom' || hoveredItem.length !== 0 ? hoveredSegmentColor : selectedSegmentColor;
   }, [hoveredItem, selectedItem, legendPosition]);
   if (ref.current && !radius) {
     return null;
   }
-  var getActiveIndex = function getActiveIndex() {
+  const getActiveIndex = () => {
     if (hoveredItem.length > 0) {
-      return hoveredItem.map(function (itemId) {
-        return displayedData.findIndex(function (element) {
-          return element.id === itemId;
-        });
-      });
+      return hoveredItem.map(itemId => displayedData.findIndex(element => element.id === itemId));
     }
-    return selectedItem.map(function (selectedItemId) {
-      return displayedData.findIndex(function (element) {
-        return element.id === selectedItemId;
-      });
-    });
+    return selectedItem.map(selectedItemId => displayedData.findIndex(element => element.id === selectedItemId));
   };
-  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) {
+  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 _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')
       });
@@ -146,7 +111,10 @@ var DonutChart = function DonutChart(_ref) {
     }));
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: cn('relative h-full w-full', (_cn = {}, _cn["flex "] = showLegend, _cn['flex-col items-center'] = legendPosition === 'bottom', _cn)),
+    className: cn('relative h-full w-full', {
+      [`flex `]: showLegend,
+      'flex-col items-center': legendPosition === 'bottom'
+    }),
     ref: ref
   }, /*#__PURE__*/React__default.createElement(CenteredLabel, {
     radius: radius,
@@ -166,7 +134,7 @@ var DonutChart = function DonutChart(_ref) {
     style: {
       transform: 'rotate(90deg) scale(-1,1)'
     },
-    singlePieDonutChart: singlePieDonutChart
+    singlePieDonutChart
   })))) : null, /*#__PURE__*/React__default.createElement(Pie, {
     isAnimationActive: false,
     activeIndex: getActiveIndex(),
@@ -177,12 +145,8 @@ var DonutChart = function DonutChart(_ref) {
     data: displayedData.length > 0 ? displayedData : [],
     dataKey: "value",
     innerRadius: radius - HOVER_DONUT_WIDTH - DONUT_WIDTH,
-    onMouseEnter: function onMouseEnter(segment) {
-      return displayedData.length > 0 && setHoveredItem([segment.id]);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setHoveredItem([]);
-    },
+    onMouseEnter: segment => displayedData.length > 0 && setHoveredItem([segment.id]),
+    onMouseLeave: () => 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 CHANGED Viewed

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

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

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