@economic/taco 2.57.0-charts.8 → 2.57.0

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 < 100px) {
+@container wrapper (width > 130px) {
     [data-taco='chart-donut-total'] span:first-child {
-        @apply text-red 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.d.ts

@@ -13,6 +13,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { IdType } from 'react-table';
 import { Matcher } from 'react-day-picker';
+import { Payload } from 'recharts/types/component/DefaultLegendContent';
 import { Placement as Placement_2 } from 'react-joyride';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as React_2 from 'react';
@@ -69,6 +70,8 @@ export declare interface AccordionUncontrolledProps extends AccordionBaseProps {
     onChange?: never;
 }
 
+export declare type ActiveChartItems<TType> = Record<keyof TType & string, boolean>;
+
 export declare type Agreement = {
     adminAgreementNumber?: number;
     number: number;
@@ -162,9 +165,18 @@ export declare namespace AreaChart {
 export declare interface AreaChartAreaProps<TData extends object> extends ChartChildProps<TData> {
 }
 
-export declare interface AreaChartProps<TData extends object> extends ChartProps<TData>, default_2.ComponentProps<'div'> {
+export declare interface AreaChartProps<TData extends object> extends CartesianChartProps<TData> {
+    /** 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;
 }
 
@@ -239,9 +251,18 @@ export declare namespace BarChart {
 export declare interface BarChartBarProps<TData extends object> extends ChartChildProps<TData> {
 }
 
-export declare interface BarChartProps<TData extends object> extends ChartProps<TData>, default_2.ComponentProps<'div'> {
-    layout?: 'horizontal' | 'vertical';
+export declare interface BarChartProps<TData extends object> extends CartesianChartProps<TData> {
+    /** 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';
 }
 
@@ -441,30 +462,61 @@ export declare type CardProps = Omit<React_2.HTMLAttributes<HTMLDivElement>, 'ti
     menu?: (props: Partial<MenuProps>) => JSX.Element;
 };
 
-declare interface ChartChildProps<TData extends object> {
-    dataKey: keyof TData;
-    label: string;
-    unit?: string;
-    color?: Color_2;
-    formatter?: ChartValueFormatter;
-    isHidden?: boolean;
-}
+export declare type CardTexts = {
+    /** Text and aria-label for menu button in Card */
+    menu: string;
+};
 
-declare interface ChartProps<TData extends object> {
+export declare interface CartesianChartProps<TData extends object> extends ChartProps {
+    /** Data to show in chart, should be an array of objects */
     data: TData[];
+    /** Key in data to use for X Axis  */
     dataKey: keyof TData;
-    showLegend?: boolean;
+    /** Show the X Axis, shown by default
+     * @default true
+     */
     showXAxis?: boolean;
+    /** Show the Y Axis, shown by default
+     * @default false
+     */
     showYAxis?: boolean;
-    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;
 }
 
-declare type ChartValueFormatter = (value: number) => string | JSX.Element;
+export declare interface ChartChildProps<TData extends object> {
+    dataKey: keyof TData;
+    label: string;
+    unit?: string;
+    color?: Color_2;
+    formatter?: ChartValueFormatter;
+    isHidden?: boolean;
+}
+
+export declare interface ChartProps extends React.ComponentProps<'div'> {
+    /** Show a legend below the chart, hidden by default
+     * @default false
+     */
+    showLegend?: boolean;
+    /** Add a title to the Tooltip show when hovering data */
+    tooltipTitle?: JSX.Element | string | null | false;
+}
+
+export declare type ChartValueFormatter = (value: number) => string | JSX.Element;
 
 export declare const Checkbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<HTMLButtonElement>>;
 
@@ -628,7 +680,7 @@ declare const createListboxValueSetter: (multiple: boolean, setValue: default_2.
 
 export declare function createShortcutKeyDownHandler<T = Element>(key: string | KeyDownHandlerOptions, handler: (event: KeyboardEvent | default_2.KeyboardEvent<T>) => void, stopPropagation?: boolean): (event: KeyboardEvent | default_2.KeyboardEvent<T>) => void;
 
-declare type CurveType = 'natural' | 'linear' | 'step';
+export declare type CurveType = 'natural' | 'linear' | 'step';
 
 export declare const Datepicker: React_2.ForwardRefExoticComponent<Omit<InputProps, "value"> & {
     /** [Calendar](component:calendar) component associated with the DatePicker */
@@ -699,6 +751,9 @@ export declare const defaultLocalisationTexts: {
             today: string;
         };
     };
+    card: {
+        menu: string;
+    };
     combobox: {
         tooltip: string;
     };
@@ -1090,13 +1145,16 @@ export declare type DialogTitleProps = React_2.HTMLAttributes<HTMLHeadingElement
 
 declare type DialogTriggerProps = React_2.HTMLAttributes<HTMLButtonElement>;
 
-export declare function DonutChart<TData extends object>(props: DonutChartProps<TData>): default_2.JSX.Element;
+export declare function DonutChart<TData extends object>(props: DonutChartProps): default_2.JSX.Element;
 
 export declare namespace DonutChart {
     var Segment: <TData extends object>(_: DonutChartSegmentProps<TData>) => JSX.Element | null;
 }
 
-export declare interface DonutChartProps<TData extends object> extends Omit<PieChartProps<TData>, 'showLabels'> {
+export declare interface DonutChartProps extends PolarChartProps {
+    /** Show total value in center of Donut
+     * @default false
+     */
     showTotal?: boolean;
 }
 
@@ -1636,6 +1694,12 @@ export declare type LayoutTopProps = {
     }) => default_2.ReactNode);
 };
 
+export declare interface LegacyChartChildProps {
+    accessor: number;
+    color: Color_2;
+    label: string;
+}
+
 export declare const LegacyDonutChart: {
     ({ children, formatter, onClick, label }: LegacyDonutChartProps): default_2.JSX.Element | null;
     Segment: (_: LegacyDonutChartSegmentProps) => null;
@@ -1883,8 +1947,14 @@ export declare namespace LineChart {
 export declare interface LineChartAreaProps<TData extends object> extends ChartChildProps<TData> {
 }
 
-export declare interface LineChartProps<TData extends object> extends ChartProps<TData>, default_2.ComponentProps<'div'> {
+export declare interface LineChartProps<TData extends object> extends CartesianChartProps<TData> {
+    /** Show dots for each data point
+     * @default false
+     */
     showDots?: boolean;
+    /** Interpolation type of the line
+     * @default natural
+     */
     type?: CurveType;
 }
 
@@ -2124,6 +2194,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 */
@@ -2471,16 +2543,21 @@ export declare const parseFromCustomString: (date?: string, mask?: string, defau
 
 export declare const parseFromISOString: (date: string) => Date | undefined;
 
-export declare function PieChart<TData extends object>(props: PieChartProps<TData>): default_2.JSX.Element;
+export declare type PayloadType<TType> = Payload & {
+    dataKey: keyof TType & string;
+};
+
+export declare function PieChart<TData extends object>(props: PieChartProps): default_2.JSX.Element;
 
 export declare namespace PieChart {
     var Segment: <TData extends object>(_: PieChartSegmentProps<TData>) => JSX.Element | null;
 }
 
-export declare interface PieChartProps<TData extends object> extends Pick<ChartProps<TData>, 'showLegend' | 'tooltipTitle'>, default_2.ComponentProps<'div'> {
-    formatter?: ChartValueFormatter;
+export declare interface PieChartProps extends PolarChartProps {
+    /** Show labels inside each segment
+     * @default false
+     */
     showLabels?: boolean;
-    unit?: string;
 }
 
 export declare interface PieChartSegmentProps<TData extends object> extends Omit<ChartChildProps<TData>, 'dataKey' | 'formatter' | 'unit'> {
@@ -2489,6 +2566,15 @@ export declare interface PieChartSegmentProps<TData extends object> extends Omit
 
 export declare type Placement = 'right' | 'left' | 'top' | 'bottom';
 
+export declare interface PolarChartProps extends ChartProps {
+    /** Format the displayed value
+     * @default Intl.NumberFormat
+     */
+    formatter?: ChartValueFormatter;
+    /** Text representation of data, used in tooltips and totals */
+    unit?: string;
+}
+
 export declare const Popover: ForwardedPopoverWithStatics;
 
 export declare type PopoverAnchorProps = React_2.HTMLAttributes<HTMLElement>;
@@ -3571,7 +3657,7 @@ export declare type TextareaProps = React_2.TextareaHTMLAttributes<HTMLTextAreaE
     value?: string;
 };
 
-declare type TickFormatter = (value: any) => string;
+export declare type TickFormatter = (value: any) => string;
 
 export declare const Title: React_2.ForwardRefExoticComponent<HangerTitleProps & React_2.RefAttributes<HTMLHeadingElement>>;
 
@@ -3660,8 +3746,6 @@ export declare type TooltipProps = Omit<React_2.HTMLAttributes<HTMLDivElement>,
     placement?: 'top' | 'right' | 'bottom' | 'left';
 };
 
-declare type TooltipTitle = JSX.Element | string | null | false;
-
 declare const Top: (props: LayoutTopProps) => default_2.JSX.Element;
 
 export declare const Tour: {