@economic/taco 2.57.0-charts.10 → 2.57.0-charts.11

package/dist/taco.css

@@ -1567,9 +1567,20 @@ table[data-taco^='table'] tr[data-row-create] {
     @apply h-full;
 }
 
+[data-taco='card-content'] > [data-taco='chart-wrapper'] {
+    container: wrapper / inline-size;
+}
+
 [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-2/3;
+    @apply aspect-square w-3/5;
+}
+
+@container wrapper (width > 400px) {
+    [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 w-2/3;
+    }
 }
 
 .recharts-cartesian-axis line,
@@ -1598,13 +1609,9 @@ table[data-taco^='table'] tr[data-row-create] {
     container: wrapper / inline-size;
 }
 
-[data-taco='chart-donut-total'] span:first-child {
-    @apply text-xl;
-}
-
-@container wrapper (width < 130px) {
+@container wrapper (width > 130px) {
     [data-taco='chart-donut-total'] span:first-child {
-        @apply text-lg;
+        @apply text-xl;
     }
 }
 
@@ -1613,3 +1620,7 @@ table[data-taco^='table'] tr[data-row-create] {
         @apply text-base;
     }
 }
+
+[data-taco='chart-donut']:has([data-taco='chart-tooltip']) {
+    @apply relative z-10;
+}

package/dist/taco.js

@@ -82772,11 +82772,11 @@ function ChartWrapper(props) {
 function Tooltip(props) {
   const { active, payload = [], style, title } = props;
   if (active && payload.length) {
-    return /* @__PURE__ */ React__default.createElement("div", { className: "border-grey-300 z-20 flex flex-col gap-y-1 rounded-md border bg-white px-2 py-1.5 text-xs shadow-sm" }, title ? /* @__PURE__ */ React__default.createElement("span", { className: "font-bold" }, title) : null, /* @__PURE__ */ React__default.createElement("dl", { className: "m-0 grid grid-cols-[max-content_max-content] gap-x-4 gap-y-0.5", style }, payload.map((entry, index2) => {
+    return /* @__PURE__ */ React__default.createElement("div", { className: "border-grey-300 z-20 z-[999] flex flex-col gap-y-1 rounded-md border bg-white px-2 py-1.5 text-xs shadow-sm" }, title ? /* @__PURE__ */ React__default.createElement("span", { className: "font-bold" }, title) : null, /* @__PURE__ */ React__default.createElement("dl", { className: "m-0 grid grid-cols-[max-content_max-content] gap-x-4 gap-y-0.5", style }, payload.map((entry, index2) => {
       const color2 = entry.color ?? entry.payload.color;
       const formatter = entry.formatter ?? entry.payload.formatter;
       const unit2 = entry.unit ?? entry.payload.unit;
-      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: `${entry.name}-${index2}` }, /* @__PURE__ */ React__default.createElement("dt", { className: "text-grey-700 mb-0 flex items-center gap-1 font-normal" }, /* @__PURE__ */ React__default.createElement("span", { className: "-mt-px h-2.5 w-2.5 rounded-sm", style: { background: color2 } }), entry.name), /* @__PURE__ */ React__default.createElement("dd", { className: "mb-0 text-right font-bold tabular-nums text-black" }, (formatter == null ? void 0 : formatter(entry.value ?? "", entry.name ?? "", entry, index2, entry.payload)) ?? entry.value, " ", unit2 ? /* @__PURE__ */ React__default.createElement("span", { className: "text-grey-700" }, unit2) : null));
+      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: `${entry.name}-${index2}` }, /* @__PURE__ */ React__default.createElement("dt", { className: "text-grey-700 mb-0 flex items-center gap-1 font-normal", "data-taco": "chart-tooltip" }, /* @__PURE__ */ React__default.createElement("span", { className: "-mt-px h-2.5 w-2.5 rounded-sm", style: { background: color2 } }), entry.name), /* @__PURE__ */ React__default.createElement("dd", { className: "mb-0 text-right font-bold tabular-nums text-black" }, (formatter == null ? void 0 : formatter(entry.value ?? "", entry.name ?? "", entry, index2, entry.payload)) ?? entry.value, " ", unit2 ? /* @__PURE__ */ React__default.createElement("span", { className: "text-grey-700" }, unit2) : null));
     })));
   }
   return null;
@@ -83111,6 +83111,7 @@ function BarChart(props) {
     showXAxis = !isHorizontal,
     showYAxis = isHorizontal,
     stacked = false,
+    tooltipTitle,
     xAxisScale,
     xAxisTickFormatter,
     yAxisScale,
@@ -83137,7 +83138,7 @@ function BarChart(props) {
       stackOffset: stacked === "expand" ? "expand" : void 0
     },
     /* @__PURE__ */ React__default.createElement(CartesianGrid, { horizontal: !isHorizontal, vertical: false }),
-    /* @__PURE__ */ React__default.createElement(Tooltip$1, { content: /* @__PURE__ */ React__default.createElement(Tooltip, null) }),
+    /* @__PURE__ */ React__default.createElement(Tooltip$1, { content: /* @__PURE__ */ React__default.createElement(Tooltip, { title: tooltipTitle }) }),
     /* @__PURE__ */ React__default.createElement(
       XAxis,
       {
@@ -83248,8 +83249,7 @@ function DonutChart(props) {
     unit: unit2
   });
   const className = clsx("aspect-square", attributes.className);
-  console.log("radius", radius);
-  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(
+  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, { title: tooltipTitle }) }), /* @__PURE__ */ React__default.createElement(Pie, { ...pieProps, innerRadius: radius - DONUT_WIDTH$1 }))), showTotal ? /* @__PURE__ */ React__default.createElement(
     Total,
     {
       formatter,
@@ -83277,7 +83277,7 @@ function Total(props) {
       className: "absolute-center flex aspect-video flex-col items-center justify-center overflow-hidden rounded-full",
       "data-taco": "chart-donut-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)),
+    /* @__PURE__ */ React__default.createElement(Tooltip$3, { title: total }, /* @__PURE__ */ React__default.createElement("span", { className: "w-full truncate text-center text-lg 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
   );
 }