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

package/dist/taco.d.ts

@@ -163,8 +163,17 @@ export declare interface AreaChartAreaProps<TData extends object> extends ChartC
 }
 
 export declare interface AreaChartProps<TData extends object> extends ChartProps<TData>, default_2.ComponentProps<'div'> {
+    /** Show dots for each data point
+     * @default false
+     */
     showDots?: boolean;
+    /** Stack areas on top of one another, instead of other each other. 'expand' fills the available space
+     * @default false
+     */
     stacked?: boolean | 'expand';
+    /** Interpolation type of the line
+     * @default natural
+     */
     type?: CurveType;
 }
 
@@ -240,8 +249,17 @@ export declare interface BarChartBarProps<TData extends object> extends ChartChi
 }
 
 export declare interface BarChartProps<TData extends object> extends ChartProps<TData>, default_2.ComponentProps<'div'> {
-    layout?: 'horizontal' | 'vertical';
+    /** Orientation of the bars
+     * @default false
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /** Show bar values as labels next to/inside the bar
+     * @default vertical
+     */
     showLabels?: boolean;
+    /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space
+     * @default false
+     */
     stacked?: boolean | 'expand';
 }
 
@@ -451,16 +469,39 @@ declare interface ChartChildProps<TData extends object> {
 }
 
 declare interface ChartProps<TData extends object> {
+    /** Data to show in chart, should be an array of objects */
     data: TData[];
+    /** Key in data to use for X Axis  */
     dataKey: keyof TData;
+    /** Show a legend below the chart, hidden by default
+     * @default false
+     */
     showLegend?: boolean;
+    /** Show the X Axis, shown by default
+     * @default true
+     */
     showXAxis?: boolean;
+    /** Show the Y Axis, shown by default
+     * @default false
+     */
     showYAxis?: boolean;
+    /** Add a title to the Tooltip show when hovering data */
     tooltipTitle?: TooltipTitle;
+    /**
+     * @default auto
+     */
     xAxisScale?: ScaleType | Function;
+    /** Format the value shown for each tick on the X Axis */
     xAxisTickFormatter?: TickFormatter;
+    /**
+     * @default auto
+     */
     yAxisScale?: ScaleType | Function;
+    /** Format the value shown for each tick on the Y Axis */
     yAxisTickFormatter?: TickFormatter;
+    /** Adjust the width of the Y Axis to reduce whitespace
+     * @default 55
+     */
     yAxisWidth?: number;
 }
 
@@ -1097,6 +1138,9 @@ export declare namespace DonutChart {
 }
 
 export declare interface DonutChartProps<TData extends object> extends Omit<PieChartProps<TData>, 'showLabels'> {
+    /** Show total value in center of Donut
+     * @default false
+     */
     showTotal?: boolean;
 }
 
@@ -1884,7 +1928,13 @@ export declare interface LineChartAreaProps<TData extends object> extends ChartC
 }
 
 export declare interface LineChartProps<TData extends object> extends ChartProps<TData>, default_2.ComponentProps<'div'> {
+    /** Show dots for each data point
+     * @default false
+     */
     showDots?: boolean;
+    /** Interpolation type of the line
+     * @default natural
+     */
     type?: CurveType;
 }
 
@@ -2478,8 +2528,15 @@ export declare namespace PieChart {
 }
 
 export declare interface PieChartProps<TData extends object> extends Pick<ChartProps<TData>, 'showLegend' | 'tooltipTitle'>, default_2.ComponentProps<'div'> {
+    /** Format the displayed value
+     * @default Intl.NumberFormat
+     */
     formatter?: ChartValueFormatter;
+    /** Show labels inside each segment
+     * @default false
+     */
     showLabels?: boolean;
+    /** Text representation of data, used in tooltips and totals */
     unit?: string;
 }
 

package/dist/taco.js

@@ -8017,7 +8017,7 @@ const defaultLocalisationTexts = {
   }
 };
 const defaultLocalizationContext = {
-  locale: "en-GB",
+  locale: "da-DK",
   texts: defaultLocalisationTexts,
   formatting: {
     date: "dd.mm.yy"
@@ -82978,7 +82978,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 +82989,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 +83016,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({});
@@ -83100,7 +83103,7 @@ function Area(_) {
 AreaChart.Area = Area;
 const BAR_WIDTH = 18;
 function BarChart(props) {
-  const isHorizontal = props.layout === "horizontal";
+  const isHorizontal = props.orientation === "horizontal";
   const {
     children,
     className: customClassName,
@@ -83204,7 +83207,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 +83228,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 +83247,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 +83271,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",