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

package/dist/taco.css

@@ -181,29 +181,6 @@ table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
         @apply opacity-100;
     }
 }
-
-.recharts-cartesian-axis line,
-.recharts-cartesian-grid-horizontal line,
-.recharts-cartesian-grid-vertical line {
-    @apply !stroke-grey-100;
-}
-
-.recharts-cartesian-axis-tick-value {
-    @apply !fill-grey-700;
-}
-
-.recharts-tooltip-cursor {
-    @apply !fill-transparent;
-}
-
-.recharts-legend-wrapper {
-    @apply !left-0 !w-full;
-}
-
-.recharts-sector,
-.recharts-wrapper > svg g {
-    @apply !outline-none;
-}
 [data-taco='badge'] > [data-taco='spinner'] {
     @apply ml-2 h-3 w-3;
 }
@@ -1581,3 +1558,58 @@ table[data-taco^='table'][data-table-row-height='extra-tall'] tr[data-row-create
 table[data-taco^='table'] tr[data-row-create] {
     @apply print:hidden;
 }
+[data-taco='card-content'] > [data-taco='chart-wrapper']:not(:has([data-taco='chart-donut'], [data-taco='chart-pie'])) {
+    @apply w-full;
+}
+
+[data-taco='card-content']
+    > [data-taco='chart-wrapper']:not([class*='h-']):not(:has([data-taco='chart-donut'], [data-taco='chart-pie'])) {
+    @apply h-full;
+}
+
+[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;
+}
+
+.recharts-cartesian-axis line,
+.recharts-cartesian-grid-horizontal line,
+.recharts-cartesian-grid-vertical line {
+    @apply !stroke-grey-100;
+}
+
+.recharts-cartesian-axis-tick-value {
+    @apply !fill-grey-700;
+}
+
+.recharts-tooltip-cursor {
+    @apply !fill-transparent;
+}
+
+.recharts-legend-wrapper {
+    @apply !left-0 !w-full;
+}
+
+.recharts-sector,
+.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 < 130px) {
+    [data-taco='chart-donut-total'] span:first-child {
+        @apply text-lg;
+    }
+}
+
+@container wrapper (width < 80px) {
+    [data-taco='chart-donut-total'] span:first-child {
+        @apply text-base;
+    }
+}

package/dist/taco.d.ts

@@ -445,7 +445,7 @@ declare interface ChartChildProps<TData extends object> {
     dataKey: keyof TData;
     label: string;
     unit?: string;
-    color: Color_2;
+    color?: Color_2;
     formatter?: ChartValueFormatter;
     isHidden?: boolean;
 }
@@ -461,6 +461,7 @@ declare interface ChartProps<TData extends object> {
     xAxisTickFormatter?: TickFormatter;
     yAxisScale?: ScaleType | Function;
     yAxisTickFormatter?: TickFormatter;
+    yAxisWidth?: number;
 }
 
 declare type ChartValueFormatter = (value: number) => string | JSX.Element;

package/dist/taco.js

@@ -82743,18 +82743,21 @@ var AreaChart$1 = generateCategoricalChart({
   }],
   formatAxisMap: formatAxisMap2
 });
-function getAxisProps(scale2, tickFormatter, dataKey) {
+function getAxisProps(scale2, tickFormatter, dataKey, width) {
+  const isYAxis = dataKey === void 0;
   return {
     axisLine: false,
     dataKey,
     fontSize: 11,
+    interval: "preserveStartEnd",
     scale: scale2,
     tickLine: false,
-    tickMargin: 8,
-    tickFormatter
+    tickMargin: isYAxis ? 2 : 6,
+    tickFormatter,
+    width: width ?? 55
   };
 }
-function ChartContainer(props) {
+function ChartWrapper(props) {
   const { onSetWidth: handleSetWidth, ...attributes } = props;
   const ref = React__default.useRef(null);
   React__default.useLayoutEffect(() => {
@@ -82763,7 +82766,7 @@ function ChartContainer(props) {
       handleSetWidth(rect.width);
     }
   }, [ref]);
-  const className = clsx("flex justify-center mx-auto", attributes.className);
+  const className = clsx("flex justify-center m-auto", attributes.className);
   return /* @__PURE__ */ React__default.createElement("div", { ...attributes, className, ref }, /* @__PURE__ */ React__default.createElement(ResponsiveContainer, null, props.children));
 }
 function Tooltip(props) {
@@ -82794,11 +82797,14 @@ function Legend$1(props) {
     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: "w-full gap-x-1", moreButton }, items.map((item, index2) => {
+  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", {
-      [`bg-${item.color}`]: !item.isHidden,
       border: item.isHidden
     });
+    let style;
+    if (!item.isHidden) {
+      style = { backgroundColor: item.color };
+    }
     return /* @__PURE__ */ React__default.createElement(
       "button",
       {
@@ -82811,7 +82817,7 @@ function Legend$1(props) {
         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),
+      /* @__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
     );
   }));
@@ -82952,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) {
@@ -82978,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-500");
       return {
         activeDot: {
           strokeWidth: 1
         },
-        color: color2,
+        color: item.color,
         dataKey: item.dataKey,
         dot: {
-          fillOpacity: 0.6
+          fillOpacity: 0.8
         },
         isAnimationActive: false,
-        fill: color2,
-        fillOpacity: 0.65,
+        fill: item.color,
+        fillOpacity: 0.8,
         formatter: item.formatter,
         name: item.label,
-        stroke: color2,
+        stroke: item.color,
         strokeWidth: 1.5,
         unit: item.unit
       };
@@ -83026,6 +83033,7 @@ function useChartDataHiddenState() {
 function AreaChart(props) {
   const {
     children,
+    className: customClassName,
     data,
     dataKey,
     showDots = false,
@@ -83039,15 +83047,22 @@ function AreaChart(props) {
     xAxisTickFormatter,
     yAxisScale,
     yAxisTickFormatter,
+    yAxisWidth,
     ...attributes
   } = props;
-  const className = clsx("aspect-video", attributes.className);
+  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: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartContainer, { ...attributes, className, "data-taco": "chart-area" }, /* @__PURE__ */ React__default.createElement(
+  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,
     {
       data,
-      margin: { bottom: 10, left: 10, right: 10, top: 10 },
+      margin: {
+        bottom: 0,
+        // ensures dots on the edges of the chart don't get cropped
+        left: 4,
+        right: 4,
+        top: 4
+      },
       stackOffset: stacked === "expand" ? "expand" : void 0
     },
     /* @__PURE__ */ React__default.createElement(CartesianGrid, { vertical: false }),
@@ -83059,13 +83074,20 @@ 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,
       {
         key: shape.dataKey,
         ...shape,
         dot: showDots ? shape.dot : false,
+        fillOpacity: 0.4,
         stackId: stacked ? "stack" : void 0,
         type
       }
@@ -83076,11 +83098,12 @@ function Area(_) {
   return null;
 }
 AreaChart.Area = Area;
-const BAR_WIDTH = 20;
+const BAR_WIDTH = 18;
 function BarChart(props) {
   const isHorizontal = props.layout === "horizontal";
   const {
     children,
+    className: customClassName,
     data,
     dataKey,
     showLabels = false,
@@ -83092,17 +83115,24 @@ function BarChart(props) {
     xAxisTickFormatter,
     yAxisScale,
     yAxisTickFormatter,
+    yAxisWidth,
     ...attributes
   } = props;
-  const className = clsx("aspect-video", attributes.className);
+  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: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartContainer, { ...attributes, className, "data-taco": "chart-bar" }, /* @__PURE__ */ React__default.createElement(
+  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,
     {
       data,
       barCategoryGap: "15%",
       barGap: "7.5%",
-      margin: { bottom: 10, left: isHorizontal ? -15 : 10, right: 10, top: 10 },
+      margin: {
+        bottom: 0,
+        left: 0,
+        right: 0,
+        // ensures labels on top of bars don't get cropped
+        top: isHorizontal ? 0 : 10
+      },
       layout: isHorizontal ? "vertical" : void 0,
       stackOffset: stacked === "expand" ? "expand" : void 0
     },
@@ -83119,8 +83149,14 @@ function BarChart(props) {
     /* @__PURE__ */ React__default.createElement(
       YAxis,
       {
-        ...getAxisProps(yAxisScale, yAxisTickFormatter, isHorizontal ? dataKey : void 0),
+        ...getAxisProps(
+          yAxisScale,
+          yAxisTickFormatter,
+          isHorizontal ? dataKey : void 0,
+          yAxisWidth
+        ),
         hide: !showYAxis,
+        minTickGap: isHorizontal ? 1 : 5,
         type: isHorizontal ? "category" : void 0
       }
     ),
@@ -83130,17 +83166,17 @@ function BarChart(props) {
         key: shape.dataKey,
         ...shape,
         activeBar: { fillOpacity: 1, strokeWidth: 0 },
-        strokeWidth: 0,
         maxBarSize: BAR_WIDTH,
         radius: getRadius(index2, shapes.length, !!stacked, isHorizontal),
-        stackId: stacked ? "stack" : void 0
+        stackId: stacked ? "stack" : void 0,
+        strokeWidth: 0
       },
       showLabels ? /* @__PURE__ */ React__default.createElement(
         LabelList,
         {
           position: isHorizontal ? "insideRight" : "top",
           formatter: shape.formatter,
-          offset: isHorizontal ? 6 : 8,
+          offset: 6,
           fill: isHorizontal ? getInverseThemeColor(shape.color ?? "") : "black",
           fontSize: 11
         }
@@ -83212,15 +83248,16 @@ 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(
+  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(
     Total,
     {
       formatter,
       items,
       unit: unit2,
-      style: { top: radius / 2 - 2, width: radius + DONUT_WIDTH$1 }
+      style: { top: radius + DONUT_WIDTH$1 / 2, width: radius + DONUT_WIDTH$1 * 2 }
     }
-  ) : null, /* @__PURE__ */ React__default.createElement(ChartContainer, { ...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;
@@ -83233,7 +83270,16 @@ function Total(props) {
     const total2 = items.filter((item) => !item.isHidden).reduce((acc, curr) => acc + curr.value, 0);
     return (formatter == null ? void 0 : formatter(total2)) ?? new Intl.NumberFormat(localization.locale).format(total2);
   }, [items]);
-  return /* @__PURE__ */ React__default.createElement("div", { ...attributes, className: "absolute-center-x flex aspect-square flex-col items-center justify-center rounded-full" }, /* @__PURE__ */ React__default.createElement("span", { className: "truncate text-2xl 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);
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      ...attributes,
+      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)),
+    unit2 ? /* @__PURE__ */ React__default.createElement("span", { className: "text-grey-700 -mb-1 -mt-0.5 truncate text-xs" }, unit2) : null
+  );
 }
 const Legend = ({ hoveredItem, selectedItem, data, onClick, setHoveredItem, formatter, total, label }) => {
   const isTotalLegendSelected = selectedItem.length === data.length;
@@ -83262,7 +83308,7 @@ const Legend = ({ hoveredItem, selectedItem, data, onClick, setHoveredItem, form
   };
   return /* @__PURE__ */ React__default.createElement("div", { className: "flex-grow pl-4" }, /* @__PURE__ */ React__default.createElement("ul", { className: "mb-0 ml-0 mt-4 flex flex-col justify-center gap-1 space-y-1" }, renderLegendItem(null), data.map(renderLegendItem)));
 };
-const DONUT_WIDTH = 24;
+const DONUT_WIDTH = 16;
 const HOVER_DONUT_WIDTH = 10;
 const CenteredLabel = ({ radius, label, total, formatter }) => {
   const totalInset = HOVER_DONUT_WIDTH + DONUT_WIDTH + DONUT_WIDTH;
@@ -83399,6 +83445,7 @@ const LegacyDonutChart = function LegacyDonutChart2({ children, formatter, onCli
       onMouseEnter: (segment) => data.length > 0 && setHoveredItem([segment.id]),
       onMouseLeave: () => setHoveredItem([]),
       outerRadius: radius - HOVER_DONUT_WIDTH,
+      paddingAngle: 2.5,
       stroke: "0",
       rootTabIndex: -1
     },
@@ -83421,6 +83468,7 @@ LegacyDonutChart.Segment = Segment$1;
 function LineChart(props) {
   const {
     children,
+    className: customClassName,
     data,
     dataKey,
     showDots = false,
@@ -83433,15 +83481,22 @@ function LineChart(props) {
     xAxisTickFormatter,
     yAxisScale,
     yAxisTickFormatter,
+    yAxisWidth,
     ...attributes
   } = props;
-  const className = clsx("aspect-video", attributes.className);
+  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: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartContainer, { ...attributes, className, "data-taco": "chart-area" }, /* @__PURE__ */ React__default.createElement(
+  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,
     {
       data,
-      margin: { bottom: 10, left: 10, right: 10, top: 10 }
+      margin: {
+        bottom: 0,
+        // ensures dots on the edges of the chart don't get cropped
+        left: 4,
+        right: 4,
+        top: 4
+      }
     },
     /* @__PURE__ */ React__default.createElement(CartesianGrid, { vertical: false }),
     /* @__PURE__ */ React__default.createElement(Tooltip$1, { content: /* @__PURE__ */ React__default.createElement(Tooltip, { title: tooltipTitle }) }),
@@ -83452,7 +83507,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);
 }
@@ -83467,7 +83528,7 @@ function PieChart(props) {
     unit: unit2
   });
   const className = clsx("aspect-square", attributes.className);
-  return /* @__PURE__ */ React__default.createElement("div", { className: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartContainer, { ...attributes, className, "data-taco": "chart-pie", 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, label: showLabels ? /* @__PURE__ */ React__default.createElement(Label, null) : void 0 }))), showLegend ? /* @__PURE__ */ React__default.createElement(Legend$1, { items, hoverIndex: activeIndex, onHover: setActiveIndex, onToggle: toggleItem }) : null);
+  return /* @__PURE__ */ React__default.createElement("div", { className: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartWrapper, { ...attributes, className, "data-taco": "chart-pie", 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, label: showLabels ? /* @__PURE__ */ React__default.createElement(Label, null) : void 0 }))), showLegend ? /* @__PURE__ */ React__default.createElement(Legend$1, { items, hoverIndex: activeIndex, onHover: setActiveIndex, onToggle: toggleItem }) : null);
 }
 function Segment(_) {
   return null;