@economic/taco 2.57.0-charts.12 → 2.57.0-charts.14

package/dist/taco.d.ts

@@ -459,6 +459,11 @@ export declare type CardProps = Omit<React_2.HTMLAttributes<HTMLDivElement>, 'ti
     menu?: (props: Partial<MenuProps>) => JSX.Element;
 };
 
+export declare type CardTexts = {
+    /** Text and aria-label for menu button in Card */
+    menu: string;
+};
+
 declare interface ChartChildProps<TData extends object> {
     dataKey: keyof TData;
     label: string;
@@ -740,6 +745,9 @@ export declare const defaultLocalisationTexts: {
             today: string;
         };
     };
+    card: {
+        menu: string;
+    };
     combobox: {
         tooltip: string;
     };
@@ -2174,6 +2182,8 @@ export declare type LocalizationTexts = {
     banner: BannerTexts;
     /** Localized texts and aria-labels for [Calendar](component:calendar) component */
     calendar: CalendarTexts;
+    /** Localized texts and aria-labels for [Card](component:card) component */
+    card: CardTexts;
     /** Localized texts and aria-labels for [Combobox](component:combobox) component */
     combobox: ComboboxTexts;
     /** Localized texts and aria-labels for [DatePicker](component:datepicker) component */

package/dist/taco.js

@@ -7719,6 +7719,9 @@ const defaultLocalisationTexts = {
       today: "Today"
     }
   },
+  card: {
+    menu: "Open menu"
+  },
   combobox: {
     tooltip: "Search in list"
   },
@@ -8017,7 +8020,7 @@ const defaultLocalisationTexts = {
   }
 };
 const defaultLocalizationContext = {
-  locale: "en-GB",
+  locale: "da-DK",
   texts: defaultLocalisationTexts,
   formatting: {
     date: "dd.mm.yy"
@@ -11630,11 +11633,21 @@ const Content$8 = React.forwardRef(function CardContent(externalProps, ref) {
 });
 const Card = React.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.createElement("div", { ...otherProps, className: cardClassName, "data-taco": "card", ref }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between px-4 pb-2 pt-4" }, title && /* @__PURE__ */ React.createElement(Truncate, { tooltip: title }, /* @__PURE__ */ React.createElement("h4", { className: "mb-0 flex-grow truncate text-left" }, title)), menu ? /* @__PURE__ */ React.createElement(IconButton, { icon: "ellipsis-horizontal", appearance: "discrete", menu, className: "-mt-[4px]" }) : null), children);
+  return /* @__PURE__ */ React.createElement("div", { ...otherProps, className: cardClassName, "data-taco": "card", ref }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between px-4 pb-2 pt-4" }, title && /* @__PURE__ */ React.createElement(Truncate, { tooltip: title }, /* @__PURE__ */ React.createElement("h4", { className: "mb-0 flex-grow truncate text-left" }, title)), menu ? /* @__PURE__ */ React.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) {
@@ -82978,7 +82991,10 @@ function useChart(children, options) {
   const [activeIndex, setActiveIndex] = React__default.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, trailingZeroDisplay: "stripIfInteger" }).format(
+    value
+  );
+  const globalFormatter = (options == null ? void 0 : options.formatter) ?? defaultFormatter2;
   const { items, shapes } = React__default.useMemo(() => {
     const items2 = React__default.Children.toArray(children).filter((child) => React__default.isValidElement(child)).map((child) => {
       const dataKey = child.props.dataKey ?? child.props.label;
@@ -82986,7 +83002,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)
       };
@@ -83013,7 +83029,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__default.useState({});
@@ -83204,7 +83220,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__default.useState(0);
   function setRadius(width) {
     _setRadius((width - 2 * (PIE_ACTIVE_WIDTH + PIE_ACTIVE_WIDTH_OFFSET)) / 2);
@@ -83225,7 +83241,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;
@@ -83244,15 +83260,18 @@ 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__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,
+      formatter: globalFormatter,
       items,
       unit: unit2,
       style: { top: radius + DONUT_WIDTH$1 / 2, width: radius + DONUT_WIDTH$1 * 2 }
@@ -83265,10 +83284,9 @@ function Segment$2(_) {
 DonutChart.Segment = Segment$2;
 function Total(props) {
   const { formatter, items, unit: unit2, ...attributes } = props;
-  const localization = useLocalization();
   const total = React__default.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__default.createElement(
     "div",