@economic/taco 2.57.0-charts.9 → 2.57.1

package/README.md

@@ -36,10 +36,7 @@ Your `tailwind.config.js` should look something like this:
 module.exports = {
     presets: [require('@economic/taco/tailwind.config.js')],
     content: {
-        files: [
-            './src/**/*.{ts,tsx}',
-            './node_modules/@economic/taco/dist/taco.js',
-        ],
+        files: ['./src/**/*.{ts,tsx}', './node_modules/@economic/taco/dist/taco.js'],
     },
 };
 ```
@@ -49,7 +46,7 @@ You should then import the tailwind and taco stylesheet in your application:
 ```css
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
-@import '@economic/taco/dist/taco.css';
+@import '@economic/taco/taco.css';
 @import 'tailwindcss/utilities';
 ```
 

package/dist/taco.cjs

@@ -7737,6 +7737,9 @@ const defaultLocalisationTexts = {
       today: "Today"
     }
   },
+  card: {
+    menu: "Open menu"
+  },
   combobox: {
     tooltip: "Search in list"
   },
@@ -8035,7 +8038,7 @@ const defaultLocalisationTexts = {
   }
 };
 const defaultLocalizationContext = {
-  locale: "en-GB",
+  locale: "da-DK",
   texts: defaultLocalisationTexts,
   formatting: {
     date: "dd.mm.yy"
@@ -11648,11 +11651,21 @@ const Content$8 = React__namespace.forwardRef(function CardContent(externalProps
 });
 const Card = React__namespace.forwardRef(function Card2(props, ref) {
   const { title, menu, children, className, ...otherProps } = props;
+  const localization = useLocalization();
   const cardClassName = clsx(
     "bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500",
     className
   );
-  return /* @__PURE__ */ React__namespace.createElement("div", { ...otherProps, className: cardClassName, "data-taco": "card", ref }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex justify-between px-4 pb-2 pt-4" }, title && /* @__PURE__ */ React__namespace.createElement(Truncate, { tooltip: title }, /* @__PURE__ */ React__namespace.createElement("h4", { className: "mb-0 flex-grow truncate text-left" }, title)), menu ? /* @__PURE__ */ React__namespace.createElement(IconButton, { icon: "ellipsis-horizontal", appearance: "discrete", menu, className: "-mt-[4px]" }) : null), children);
+  return /* @__PURE__ */ React__namespace.createElement("div", { ...otherProps, className: cardClassName, "data-taco": "card", ref }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex justify-between px-4 pb-2 pt-4" }, title && /* @__PURE__ */ React__namespace.createElement(Truncate, { tooltip: title }, /* @__PURE__ */ React__namespace.createElement("h4", { className: "mb-0 flex-grow truncate text-left" }, title)), menu ? /* @__PURE__ */ React__namespace.createElement(
+    IconButton,
+    {
+      "aria-label": localization.texts.card.menu,
+      icon: "ellipsis-horizontal",
+      appearance: "discrete",
+      menu,
+      className: "-mt-[4px]"
+    }
+  ) : null), children);
 });
 Card.Content = Content$8;
 function $010c2913dbd2fe3d$export$5cae361ad82dce8b(value) {
@@ -82761,20 +82774,48 @@ var AreaChart$1 = generateCategoricalChart({
   }],
   formatAxisMap: formatAxisMap2
 });
-function getAxisProps(scale2, tickFormatter, dataKey, width) {
-  const isYAxis = dataKey === void 0;
+function getAxisProps(axis, props, inverted = false) {
+  const { showXAxis = true, showYAxis = false } = props;
+  const isYAxis = axis === "y";
+  let hide2 = isYAxis ? !showYAxis : !showXAxis;
+  let dataKey = isYAxis ? void 0 : props.dataKey;
+  let minTickGap = 5;
+  let type;
+  if (inverted) {
+    dataKey = isYAxis ? props.dataKey : void 0;
+    hide2 = isYAxis ? !showXAxis : !showYAxis;
+    minTickGap = isYAxis ? 1 : minTickGap;
+    type = isYAxis ? "category" : "number";
+  }
   return {
     axisLine: false,
     dataKey,
     fontSize: 11,
+    hide: hide2,
     interval: "preserveStartEnd",
-    scale: scale2,
+    minTickGap,
+    scale: isYAxis ? props.yAxisScale : props.xAxisScale,
     tickLine: false,
-    tickMargin: isYAxis ? 2 : 6,
-    tickFormatter,
-    width: width ?? 55
+    tickMargin: axis === "y" ? 2 : 6,
+    tickFormatter: isYAxis ? props.yAxisTickFormatter : props.xAxisTickFormatter,
+    type,
+    width: (isYAxis ? props.yAxisWidth : void 0) ?? 55
   };
 }
+function stripCartesianProps(props) {
+  const {
+    dataKey,
+    showXAxis,
+    showYAxis,
+    xAxisScale,
+    xAxisTickFormatter,
+    yAxisScale,
+    yAxisTickFormatter,
+    yAxisWidth,
+    ...otherProps
+  } = props;
+  return otherProps;
+}
 function ChartWrapper(props) {
   const { onSetWidth: handleSetWidth, ...attributes } = props;
   const ref = React.useRef(null);
@@ -82790,11 +82831,11 @@ function ChartWrapper(props) {
 function Tooltip(props) {
   const { active, payload = [], style, title } = props;
   if (active && payload.length) {
-    return /* @__PURE__ */ React.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.createElement("span", { className: "font-bold" }, title) : null, /* @__PURE__ */ React.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.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.createElement("span", { className: "font-bold" }, title) : null, /* @__PURE__ */ React.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.createElement(React.Fragment, { key: `${entry.name}-${index2}` }, /* @__PURE__ */ React.createElement("dt", { className: "text-grey-700 mb-0 flex items-center gap-1 font-normal" }, /* @__PURE__ */ React.createElement("span", { className: "-mt-px h-2.5 w-2.5 rounded-sm", style: { background: color2 } }), entry.name), /* @__PURE__ */ React.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.createElement("span", { className: "text-grey-700" }, unit2) : null));
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: `${entry.name}-${index2}` }, /* @__PURE__ */ React.createElement("dt", { className: "text-grey-700 mb-0 flex items-center gap-1 font-normal", "data-taco": "chart-tooltip" }, /* @__PURE__ */ React.createElement("span", { className: "-mt-px h-2.5 w-2.5 rounded-sm", style: { background: color2 } }), entry.name), /* @__PURE__ */ React.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.createElement("span", { className: "text-grey-700 pl-0.5" }, unit2) : null));
     })));
   }
   return null;
@@ -82826,7 +82867,7 @@ function Legend$1(props) {
     return /* @__PURE__ */ React.createElement(
       "button",
       {
-        key: item.label,
+        key: `${item.label}_${index2}`,
         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();
@@ -82996,7 +83037,8 @@ function useChart(children, options) {
   const [activeIndex, setActiveIndex] = React.useState();
   const [hiddenItems, toggleItem] = useChartDataHiddenState();
   const localization = useLocalization();
-  const defaultFormatter2 = (value) => new Intl.NumberFormat(localization.locale).format(value);
+  const defaultFormatter2 = (value) => new Intl.NumberFormat(localization.locale, { minimumFractionDigits: 2 }).format(value);
+  const globalFormatter = (options == null ? void 0 : options.formatter) ?? defaultFormatter2;
   const { items, shapes } = React.useMemo(() => {
     const items2 = React.Children.toArray(children).filter((child) => React.isValidElement(child)).map((child) => {
       const dataKey = child.props.dataKey ?? child.props.label;
@@ -83004,7 +83046,7 @@ function useChart(children, options) {
         ...child.props,
         dataKey,
         color: getThemeColor(child.props.color, "blue-300"),
-        formatter: child.props.formatter ?? (options == null ? void 0 : options.formatter) ?? defaultFormatter2,
+        formatter: child.props.formatter ?? globalFormatter,
         isHidden: !!hiddenItems[dataKey],
         unit: child.props.unit ?? (options == null ? void 0 : options.unit)
       };
@@ -83031,7 +83073,7 @@ function useChart(children, options) {
     });
     return { items: items2, shapes: shapes2 };
   }, [children, hiddenItems]);
-  return { items, shapes, activeIndex, setActiveIndex, toggleItem };
+  return { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem };
 }
 function useChartDataHiddenState() {
   const [state, setState] = React.useState({});
@@ -83053,21 +83095,13 @@ function AreaChart(props) {
     children,
     className: customClassName,
     data,
-    dataKey,
-    showDots = false,
     showLegend = false,
-    showXAxis = true,
-    showYAxis = false,
+    showDots = false,
     stacked = false,
     tooltipTitle,
     type = "natural",
-    xAxisScale,
-    xAxisTickFormatter,
-    yAxisScale,
-    yAxisTickFormatter,
-    yAxisWidth,
     ...attributes
-  } = props;
+  } = stripCartesianProps(props);
   const className = clsx("relative aspect-video", { "pb-8": showLegend }, customClassName);
   const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart(children);
   return /* @__PURE__ */ React.createElement("div", { className, "data-taco": "chart-wrapper" }, /* @__PURE__ */ React.createElement(ChartWrapper, { ...attributes, className: "h-full w-full", "data-taco": "chart-area" }, /* @__PURE__ */ React.createElement(
@@ -83085,20 +83119,8 @@ function AreaChart(props) {
     },
     /* @__PURE__ */ React.createElement(CartesianGrid, { vertical: false }),
     /* @__PURE__ */ React.createElement(Tooltip$1, { content: /* @__PURE__ */ React.createElement(Tooltip, { title: tooltipTitle }) }),
-    /* @__PURE__ */ React.createElement(
-      XAxis,
-      {
-        ...getAxisProps(xAxisScale, xAxisTickFormatter, dataKey),
-        hide: !showXAxis
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      YAxis,
-      {
-        ...getAxisProps(yAxisScale, yAxisTickFormatter, void 0, yAxisWidth),
-        hide: !showYAxis
-      }
-    ),
+    /* @__PURE__ */ React.createElement(XAxis, { ...getAxisProps("x", props) }),
+    /* @__PURE__ */ React.createElement(YAxis, { ...getAxisProps("y", props) }),
     shapes.map((shape) => /* @__PURE__ */ React.createElement(
       Area$1,
       {
@@ -83118,24 +83140,18 @@ function Area(_) {
 AreaChart.Area = Area;
 const BAR_WIDTH = 18;
 function BarChart(props) {
-  const isHorizontal = props.layout === "horizontal";
   const {
     children,
     className: customClassName,
     data,
-    dataKey,
+    orientation,
     showLabels = false,
     showLegend = false,
-    showXAxis = !isHorizontal,
-    showYAxis = isHorizontal,
     stacked = false,
-    xAxisScale,
-    xAxisTickFormatter,
-    yAxisScale,
-    yAxisTickFormatter,
-    yAxisWidth,
+    tooltipTitle,
     ...attributes
-  } = props;
+  } = stripCartesianProps(props);
+  const isHorizontal = props.orientation === "horizontal";
   const className = clsx("relative aspect-video", { "pb-8": showLegend }, customClassName);
   const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart(children);
   return /* @__PURE__ */ React.createElement("div", { className, "data-taco": "chart-wrapper" }, /* @__PURE__ */ React.createElement(ChartWrapper, { ...attributes, className: "h-full w-full", "data-taco": "chart-bar" }, /* @__PURE__ */ React.createElement(
@@ -83155,29 +83171,9 @@ function BarChart(props) {
       stackOffset: stacked === "expand" ? "expand" : void 0
     },
     /* @__PURE__ */ React.createElement(CartesianGrid, { horizontal: !isHorizontal, vertical: false }),
-    /* @__PURE__ */ React.createElement(Tooltip$1, { content: /* @__PURE__ */ React.createElement(Tooltip, null) }),
-    /* @__PURE__ */ React.createElement(
-      XAxis,
-      {
-        ...getAxisProps(xAxisScale, xAxisTickFormatter, isHorizontal ? void 0 : dataKey),
-        hide: !showXAxis,
-        type: isHorizontal ? "number" : void 0
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      YAxis,
-      {
-        ...getAxisProps(
-          yAxisScale,
-          yAxisTickFormatter,
-          isHorizontal ? dataKey : void 0,
-          yAxisWidth
-        ),
-        hide: !showYAxis,
-        minTickGap: isHorizontal ? 1 : 5,
-        type: isHorizontal ? "category" : void 0
-      }
-    ),
+    /* @__PURE__ */ React.createElement(Tooltip$1, { content: /* @__PURE__ */ React.createElement(Tooltip, { title: tooltipTitle }) }),
+    /* @__PURE__ */ React.createElement(XAxis, { ...getAxisProps("x", props, isHorizontal) }),
+    /* @__PURE__ */ React.createElement(YAxis, { ...getAxisProps("y", props, isHorizontal) }),
     shapes.map((shape, index2) => /* @__PURE__ */ React.createElement(
       Bar$1,
       {
@@ -83221,7 +83217,7 @@ BarChart.Bar = Bar;
 const PIE_ACTIVE_WIDTH = 10;
 const PIE_ACTIVE_WIDTH_OFFSET = 2;
 function usePieChart(children, options) {
-  const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart(children, options);
+  const { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem } = useChart(children, options);
   const [radius, _setRadius] = React.useState(0);
   function setRadius(width) {
     _setRadius((width - 2 * (PIE_ACTIVE_WIDTH + PIE_ACTIVE_WIDTH_OFFSET)) / 2);
@@ -83242,7 +83238,7 @@ function usePieChart(children, options) {
     labelLine: false,
     outerRadius: radius
   };
-  return { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, toggleItem, shapes };
+  return { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, globalFormatter, toggleItem, shapes };
 }
 const PIE_CHART_HOVER = 10;
 const PIE_CHART_HOVER_OFFSET = 2;
@@ -83261,18 +83257,21 @@ function ActiveShape$1(props) {
 const DONUT_WIDTH$1 = 20;
 function DonutChart(props) {
   const { children, formatter, showLegend = false, showTotal = false, tooltipTitle, unit: unit2, ...attributes } = props;
-  const { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, toggleItem } = usePieChart(children, {
-    formatter,
-    unit: unit2
-  });
+  const { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, globalFormatter, toggleItem } = usePieChart(
+    children,
+    {
+      formatter,
+      unit: unit2
+    }
+  );
   const className = clsx("aspect-square", attributes.className);
-  return /* @__PURE__ */ React.createElement("div", { className: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React.createElement(ChartWrapper, { ...attributes, className, "data-taco": "chart-donut", onSetWidth: setRadius }, /* @__PURE__ */ React.createElement(PieChart$1, null, /* @__PURE__ */ React.createElement(Tooltip$1, { content: /* @__PURE__ */ React.createElement(Tooltip$3, { title: tooltipTitle }) }), /* @__PURE__ */ React.createElement(Pie, { ...pieProps, innerRadius: radius - DONUT_WIDTH$1 }))), showTotal ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React.createElement(ChartWrapper, { ...attributes, className, "data-taco": "chart-donut", onSetWidth: setRadius }, /* @__PURE__ */ React.createElement(PieChart$1, null, /* @__PURE__ */ React.createElement(Tooltip$1, { content: /* @__PURE__ */ React.createElement(Tooltip, { title: tooltipTitle }) }), /* @__PURE__ */ React.createElement(Pie, { ...pieProps, innerRadius: radius - DONUT_WIDTH$1 }))), showTotal ? /* @__PURE__ */ React.createElement(
     Total,
     {
-      formatter,
+      formatter: globalFormatter,
       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, showLegend ? /* @__PURE__ */ React.createElement(Legend$1, { items, hoverIndex: activeIndex, onHover: setActiveIndex, onToggle: toggleItem }) : null);
 }
@@ -83282,19 +83281,18 @@ function Segment$2(_) {
 DonutChart.Segment = Segment$2;
 function Total(props) {
   const { formatter, items, unit: unit2, ...attributes } = props;
-  const localization = useLocalization();
   const total = React.useMemo(() => {
     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);
+    return formatter(total2);
   }, [items]);
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...attributes,
-      className: "absolute-center-x flex aspect-square flex-col items-center justify-center overflow-hidden rounded-full pt-[2px]",
+      className: "absolute-center flex aspect-video flex-col items-center justify-center overflow-hidden rounded-full",
       "data-taco": "chart-donut-total"
     },
-    /* @__PURE__ */ React.createElement(Tooltip$3, { title: total }, /* @__PURE__ */ React.createElement("span", { className: "w-full truncate text-center font-bold tabular-nums" }, total)),
+    /* @__PURE__ */ React.createElement(Tooltip$3, { title: total }, /* @__PURE__ */ React.createElement("span", { className: "w-full truncate text-center text-lg font-bold tabular-nums" }, total)),
     unit2 ? /* @__PURE__ */ React.createElement("span", { className: "text-grey-700 -mb-1 -mt-0.5 truncate text-xs" }, unit2) : null
   );
 }
@@ -83487,20 +83485,12 @@ function LineChart(props) {
     children,
     className: customClassName,
     data,
-    dataKey,
-    showDots = false,
     showLegend = false,
-    showXAxis = true,
-    showYAxis = false,
+    showDots = false,
     tooltipTitle,
     type = "natural",
-    xAxisScale,
-    xAxisTickFormatter,
-    yAxisScale,
-    yAxisTickFormatter,
-    yAxisWidth,
     ...attributes
-  } = props;
+  } = stripCartesianProps(props);
   const className = clsx("relative aspect-video", { "pb-8": showLegend }, customClassName);
   const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart(children);
   return /* @__PURE__ */ React.createElement("div", { className, "data-taco": "chart-wrapper" }, /* @__PURE__ */ React.createElement(ChartWrapper, { ...attributes, className: "h-full w-full", "data-taco": "chart-line" }, /* @__PURE__ */ React.createElement(
@@ -83517,20 +83507,8 @@ function LineChart(props) {
     },
     /* @__PURE__ */ React.createElement(CartesianGrid, { vertical: false }),
     /* @__PURE__ */ React.createElement(Tooltip$1, { content: /* @__PURE__ */ React.createElement(Tooltip, { title: tooltipTitle }) }),
-    /* @__PURE__ */ React.createElement(
-      XAxis,
-      {
-        ...getAxisProps(xAxisScale, xAxisTickFormatter, dataKey),
-        hide: !showXAxis
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      YAxis,
-      {
-        ...getAxisProps(yAxisScale, yAxisTickFormatter, void 0, yAxisWidth),
-        hide: !showYAxis
-      }
-    ),
+    /* @__PURE__ */ React.createElement(XAxis, { ...getAxisProps("x", props) }),
+    /* @__PURE__ */ React.createElement(YAxis, { ...getAxisProps("y", props) }),
     shapes.map((shape) => /* @__PURE__ */ React.createElement(Line$1, { key: shape.dataKey, ...shape, dot: showDots ? shape.dot : false, type }))
   )), showLegend ? /* @__PURE__ */ React.createElement(Legend$1, { items, hoverIndex: activeIndex, onHover: setActiveIndex, onToggle: toggleItem }) : null);
 }