@economic/taco 2.57.0-charts.6 → 2.57.0-charts.8

package/dist/taco.css

@@ -1594,3 +1594,22 @@ table[data-taco^='table'] tr[data-row-create] {
 .recharts-wrapper > svg g {
     @apply !outline-none;
 }
+[data-taco='chart-donut-total'] {
+    container: wrapper / inline-size;
+}
+
+[data-taco='chart-donut-total'] span:first-child {
+    @apply text-xl;
+}
+
+@container wrapper (width < 100px) {
+    [data-taco='chart-donut-total'] span:first-child {
+        @apply text-red text-lg;
+    }
+}
+
+@container wrapper (width < 80px) {
+    [data-taco='chart-donut-total'] span:first-child {
+        @apply text-base;
+    }
+}

package/dist/taco.js

@@ -82781,6 +82781,47 @@ function Tooltip(props) {
   }
   return null;
 }
+function Legend$1(props) {
+  const { hoverIndex, items, onHover: handleHover, onToggle: handleToggle } = props;
+  const handleMouseEnter = (item, index2) => {
+    if (item.isHidden) {
+      return;
+    }
+    handleHover(index2);
+  };
+  const handleMouseLeave = () => handleHover(void 0);
+  const handleClick = (item) => {
+    if (!item.isHidden) {
+      handleHover(void 0);
+    }
+    handleToggle(item.dataKey);
+  };
+  const moreButton = (moreButtonText) => /* @__PURE__ */ React__default.createElement(Button$4, { appearance: "transparent", className: "text-grey-700 !h-5 !min-h-[1.25rem] !px-1.5 text-xs" }, moreButtonText);
+  return /* @__PURE__ */ React__default.createElement(OverflowGroup, { className: "mt-3 w-full gap-x-1", moreButton }, items.map((item, index2) => {
+    const className = clsx("mr-1 flex h-3 w-3 rounded-sm", {
+      border: item.isHidden
+    });
+    let style;
+    if (!item.isHidden) {
+      style = { backgroundColor: item.color };
+    }
+    return /* @__PURE__ */ React__default.createElement(
+      "button",
+      {
+        key: item.label,
+        className: "hover:bg-grey-200 focus-visible:yt-focus flex items-center rounded px-1 !text-xs",
+        onClick: (event) => {
+          event == null ? void 0 : event.preventDefault();
+          handleClick(item);
+        },
+        onMouseEnter: () => handleMouseEnter(item, index2),
+        onMouseLeave: () => handleMouseLeave()
+      },
+      /* @__PURE__ */ React__default.createElement("span", { className, style }, hoverIndex === index2 ? /* @__PURE__ */ React__default.createElement(Icon$1, { name: "tick-bold", className: clsx("!h-full !w-full", { "text-white": !item.isHidden }) }) : null),
+      item.label
+    );
+  }));
+}
 const THEME_COLORS = {
   transparent: "transparent",
   current: "currentColor",
@@ -82917,7 +82958,8 @@ const mapColor = (palette, prefix2 = "") => {
 };
 const colors = mapColor(THEME_COLORS);
 const getThemeColor = (color2, def = "") => colors[color2 ?? def];
-const getInverseThemeColor = (themeColor) => {
+const getInverseThemeColor = (hexCode) => {
+  const themeColor = Object.keys(colors)[Object.values(colors).indexOf(hexCode)];
   const [color2, number2] = String(themeColor).split("-");
   const shade = Number(number2);
   if (shade) {
@@ -82932,47 +82974,6 @@ const getInverseThemeColor = (themeColor) => {
   }
   return color2 === "black" ? "white" : "black";
 };
-function Legend$1(props) {
-  const { hoverIndex, items, onHover: handleHover, onToggle: handleToggle } = props;
-  const handleMouseEnter = (item, index2) => {
-    if (item.isHidden) {
-      return;
-    }
-    handleHover(index2);
-  };
-  const handleMouseLeave = () => handleHover(void 0);
-  const handleClick = (item) => {
-    if (!item.isHidden) {
-      handleHover(void 0);
-    }
-    handleToggle(item.dataKey);
-  };
-  const moreButton = (moreButtonText) => /* @__PURE__ */ React__default.createElement(Button$4, { appearance: "transparent", className: "text-grey-700 !h-5 !min-h-[1.25rem] !px-1.5 text-xs" }, moreButtonText);
-  return /* @__PURE__ */ React__default.createElement(OverflowGroup, { className: "mt-2.5 w-full gap-x-1", moreButton }, items.map((item, index2) => {
-    const className = clsx("mr-1 flex h-3 w-3 rounded-sm", {
-      border: item.isHidden
-    });
-    let style;
-    if (!item.isHidden) {
-      style = { backgroundColor: getThemeColor(item.color) };
-    }
-    return /* @__PURE__ */ React__default.createElement(
-      "button",
-      {
-        key: item.label,
-        className: "hover:bg-grey-200 focus-visible:yt-focus flex items-center rounded px-1 !text-xs",
-        onClick: (event) => {
-          event == null ? void 0 : event.preventDefault();
-          handleClick(item);
-        },
-        onMouseEnter: () => handleMouseEnter(item, index2),
-        onMouseLeave: () => handleMouseLeave()
-      },
-      /* @__PURE__ */ React__default.createElement("span", { className, style }, hoverIndex === index2 ? /* @__PURE__ */ React__default.createElement(Icon$1, { name: "tick-bold", className: clsx("!h-full !w-full", { "text-white": !item.isHidden }) }) : null),
-      item.label
-    );
-  }));
-}
 function useChart(children, options) {
   const [activeIndex, setActiveIndex] = React__default.useState();
   const [hiddenItems, toggleItem] = useChartDataHiddenState();
@@ -82984,28 +82985,28 @@ function useChart(children, options) {
       return {
         ...child.props,
         dataKey,
+        color: getThemeColor(child.props.color, "blue-300"),
         formatter: child.props.formatter ?? (options == null ? void 0 : options.formatter) ?? defaultFormatter2,
         isHidden: !!hiddenItems[dataKey],
         unit: child.props.unit ?? (options == null ? void 0 : options.unit)
       };
     });
     const shapes2 = items2.filter((item) => !hiddenItems[item.dataKey]).map((item) => {
-      const color2 = getThemeColor(item.color, "blue-300");
       return {
         activeDot: {
           strokeWidth: 1
         },
-        color: color2,
+        color: item.color,
         dataKey: item.dataKey,
         dot: {
           fillOpacity: 0.8
         },
         isAnimationActive: false,
-        fill: color2,
-        fillOpacity: 0.75,
+        fill: item.color,
+        fillOpacity: 0.8,
         formatter: item.formatter,
         name: item.label,
-        stroke: color2,
+        stroke: item.color,
         strokeWidth: 1.5,
         unit: item.unit
       };
@@ -83049,7 +83050,7 @@ function AreaChart(props) {
     yAxisWidth,
     ...attributes
   } = props;
-  const className = clsx("relative aspect-video", { "pb-6": showLegend }, customClassName);
+  const className = clsx("relative aspect-video", { "pb-8": showLegend }, customClassName);
   const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart(children);
   return /* @__PURE__ */ React__default.createElement("div", { className, "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartWrapper, { ...attributes, className: "h-full w-full", "data-taco": "chart-area" }, /* @__PURE__ */ React__default.createElement(
     AreaChart$1,
@@ -83117,7 +83118,7 @@ function BarChart(props) {
     yAxisWidth,
     ...attributes
   } = props;
-  const className = clsx("relative aspect-video", { "pb-6": showLegend }, customClassName);
+  const className = clsx("relative aspect-video", { "pb-8": showLegend }, customClassName);
   const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart(children);
   return /* @__PURE__ */ React__default.createElement("div", { className, "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartWrapper, { ...attributes, className: "h-full w-full", "data-taco": "chart-bar" }, /* @__PURE__ */ React__default.createElement(
     BarChart$1,
@@ -83247,7 +83248,7 @@ function DonutChart(props) {
     unit: unit2
   });
   const className = clsx("aspect-square", attributes.className);
-  return /* @__PURE__ */ React__default.createElement("div", { className: "relative", "data-taco": "chart-wrapper" }, showTotal ? /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartWrapper, { ...attributes, className, "data-taco": "chart-donut", onSetWidth: setRadius }, /* @__PURE__ */ React__default.createElement(PieChart$1, null, /* @__PURE__ */ React__default.createElement(Tooltip$1, { content: /* @__PURE__ */ React__default.createElement(Tooltip$3, { title: tooltipTitle }) }), /* @__PURE__ */ React__default.createElement(Pie, { ...pieProps, innerRadius: radius - DONUT_WIDTH$1 }))), showTotal ? /* @__PURE__ */ React__default.createElement(
     Total,
     {
       formatter,
@@ -83255,7 +83256,7 @@ function DonutChart(props) {
       unit: unit2,
       style: { top: radius / 2 - 2, width: radius + DONUT_WIDTH$1 }
     }
-  ) : null, /* @__PURE__ */ React__default.createElement(ChartWrapper, { ...attributes, className, "data-taco": "chart-donut", onSetWidth: setRadius }, /* @__PURE__ */ React__default.createElement(PieChart$1, null, /* @__PURE__ */ React__default.createElement(Tooltip$1, { content: /* @__PURE__ */ React__default.createElement(Tooltip, { title: tooltipTitle }) }), /* @__PURE__ */ React__default.createElement(Pie, { ...pieProps, innerRadius: radius - DONUT_WIDTH$1 }))), showLegend ? /* @__PURE__ */ React__default.createElement(Legend$1, { items, hoverIndex: activeIndex, onHover: setActiveIndex, onToggle: toggleItem }) : null);
+  ) : null, showLegend ? /* @__PURE__ */ React__default.createElement(Legend$1, { items, hoverIndex: activeIndex, onHover: setActiveIndex, onToggle: toggleItem }) : null);
 }
 function Segment$2(_) {
   return null;
@@ -83272,9 +83273,10 @@ function Total(props) {
     "div",
     {
       ...attributes,
-      className: "absolute-center-x flex aspect-square flex-col items-center justify-center rounded-full pt-[2px]"
+      className: "absolute-center-x flex aspect-square flex-col items-center justify-center overflow-hidden rounded-full pt-[2px]",
+      "data-taco": "chart-donut-total"
     },
-    /* @__PURE__ */ React__default.createElement("span", { className: "truncate text-2xl font-bold tabular-nums" }, total),
+    /* @__PURE__ */ React__default.createElement(Tooltip$3, { title: total }, /* @__PURE__ */ React__default.createElement("span", { className: "w-full truncate text-center font-bold tabular-nums" }, total)),
     unit2 ? /* @__PURE__ */ React__default.createElement("span", { className: "text-grey-700 -mb-1 -mt-0.5 truncate text-xs" }, unit2) : null
   );
 }
@@ -83481,7 +83483,7 @@ function LineChart(props) {
     yAxisWidth,
     ...attributes
   } = props;
-  const className = clsx("relative aspect-video", { "pb-6": showLegend }, customClassName);
+  const className = clsx("relative aspect-video", { "pb-8": showLegend }, customClassName);
   const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart(children);
   return /* @__PURE__ */ React__default.createElement("div", { className, "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartWrapper, { ...attributes, className: "h-full w-full", "data-taco": "chart-line" }, /* @__PURE__ */ React__default.createElement(
     LineChart$1,