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

package/dist/taco.css

@@ -1569,7 +1569,7 @@ table[data-taco^='table'] tr[data-row-create] {
 
 [data-taco='card-content'] > [data-taco='chart-wrapper'] [data-taco='chart-donut']:not([class*='w-']),
 [data-taco='card-content'] > [data-taco='chart-wrapper'] [data-taco='chart-pie']:not([class*='w-']) {
-    @apply aspect-square w-[70%];
+    @apply aspect-square w-2/3;
 }
 
 .recharts-cartesian-axis line,

package/dist/taco.js

@@ -82781,44 +82781,6 @@ 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-2.5 w-full gap-x-1", moreButton }, items.map((item, index2) => {
-    const className = clsx("mr-1 flex h-3 w-3 rounded-sm", {
-      [`bg-${item.color}`]: !item.isHidden,
-      border: item.isHidden
-    });
-    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 }, 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",
@@ -82970,6 +82932,47 @@ 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();
@@ -82999,7 +83002,7 @@ function useChart(children, options) {
         },
         isAnimationActive: false,
         fill: color2,
-        fillOpacity: 0.65,
+        fillOpacity: 0.75,
         formatter: item.formatter,
         name: item.label,
         stroke: color2,
@@ -83043,6 +83046,7 @@ function AreaChart(props) {
     xAxisTickFormatter,
     yAxisScale,
     yAxisTickFormatter,
+    yAxisWidth,
     ...attributes
   } = props;
   const className = clsx("relative aspect-video", { "pb-6": showLegend }, customClassName);
@@ -83069,7 +83073,13 @@ function AreaChart(props) {
         hide: !showXAxis
       }
     ),
-    /* @__PURE__ */ React__default.createElement(YAxis, { ...getAxisProps(yAxisScale, yAxisTickFormatter), hide: !showYAxis }),
+    /* @__PURE__ */ React__default.createElement(
+      YAxis,
+      {
+        ...getAxisProps(yAxisScale, yAxisTickFormatter, void 0, yAxisWidth),
+        hide: !showYAxis
+      }
+    ),
     shapes.map((shape) => /* @__PURE__ */ React__default.createElement(
       Area$1,
       {
@@ -83468,6 +83478,7 @@ function LineChart(props) {
     xAxisTickFormatter,
     yAxisScale,
     yAxisTickFormatter,
+    yAxisWidth,
     ...attributes
   } = props;
   const className = clsx("relative aspect-video", { "pb-6": showLegend }, customClassName);
@@ -83493,7 +83504,13 @@ function LineChart(props) {
         hide: !showXAxis
       }
     ),
-    /* @__PURE__ */ React__default.createElement(YAxis, { ...getAxisProps(yAxisScale, yAxisTickFormatter), hide: !showYAxis }),
+    /* @__PURE__ */ React__default.createElement(
+      YAxis,
+      {
+        ...getAxisProps(yAxisScale, yAxisTickFormatter, void 0, yAxisWidth),
+        hide: !showYAxis
+      }
+    ),
     shapes.map((shape) => /* @__PURE__ */ React__default.createElement(Line$1, { key: shape.dataKey, ...shape, dot: showDots ? shape.dot : false, type }))
   )), showLegend ? /* @__PURE__ */ React__default.createElement(Legend$1, { items, hoverIndex: activeIndex, onHover: setActiveIndex, onToggle: toggleItem }) : null);
 }