@economic/taco 2.56.0 → 2.57.0-charts.1

package/dist/taco.css

@@ -181,22 +181,28 @@ 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 {
-    stroke: #efefef !important;
+.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 {
-    fill: transparent !important;
+    @apply !fill-transparent;
 }
 
 .recharts-legend-wrapper {
-    left: 0 !important;
-    width: 100% !important;
+    @apply !left-0 !w-full;
 }
 
+.recharts-sector,
 .recharts-wrapper > svg g {
-    outline: none !important;
+    @apply !outline-none;
 }
 [data-taco='badge'] > [data-taco='spinner'] {
     @apply ml-2 h-3 w-3;

package/dist/taco.d.ts

@@ -153,23 +153,20 @@ export declare type Align = 'start' | 'center' | 'end';
 
 export declare type Appearance = 'default' | 'primary' | 'danger' | 'ghost' | 'discrete' | 'transparent';
 
-export declare const AreaChart: {
-    <TType = unknown>(externalProps: AreaChartProps<TType>): default_2.JSX.Element;
-    Area: (_: AreaChartBarProps<any>) => null;
-};
+export declare function AreaChart<TData extends object>(props: AreaChartProps<TData>): default_2.JSX.Element;
 
-declare type AreaChartBarProps<TType> = {
-    accessor: keyof TType & string;
-    color?: Color_2;
-    label?: string;
-    stackId?: string;
-};
+export declare namespace AreaChart {
+    var Area: <TData extends object>(_: AreaChartAreaProps<TData>) => JSX.Element | null;
+}
 
-declare type AreaChartProps<TType> = CommonChartProps<TType> & {
-    children: default_2.ReactElement<AreaChartBarProps<TType>> | default_2.ReactElement<AreaChartBarProps<TType>>[];
-    data: TType[];
-    formatter?: (value: any) => string;
-};
+export declare interface AreaChartAreaProps<TData extends object> extends ChartChildProps<TData> {
+}
+
+export declare interface AreaChartProps<TData extends object> extends ChartProps<TData>, default_2.ComponentProps<'div'> {
+    showDots?: boolean;
+    stacked?: boolean | 'expand';
+    type?: CurveType;
+}
 
 declare const AVAILABLE_COLORS: readonly ["green", "yellow", "red", "blue", "purple", "brown", "pink", "orange", "grey", "transparent"];
 
@@ -233,24 +230,20 @@ export declare type BannerTexts = {
     close: string;
 };
 
-export declare const BarChart: {
-    <TType = unknown>(externalProps: BarChartProps<TType>): default_2.JSX.Element;
-    Bar: (_: BarChartBarProps<any>) => null;
-};
+export declare function BarChart<TData extends object>(props: BarChartProps<TData>): default_2.JSX.Element;
 
-declare type BarChartBarProps<TType> = {
-    accessor: keyof TType & string;
-    color?: Color_2;
-    label?: string;
-    stackId?: string;
-};
+export declare namespace BarChart {
+    var Bar: <TData extends object>(_: BarChartBarProps<TData>) => JSX.Element | null;
+}
 
-declare type BarChartProps<TType> = CommonChartProps<TType> & {
-    children: default_2.ReactElement<BarChartBarProps<TType>> | default_2.ReactElement<BarChartBarProps<TType>>[];
-    data: TType[];
-    formatter?: (value: any) => string;
+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';
-};
+    showLabels?: boolean;
+    stacked?: boolean | 'expand';
+}
 
 export declare const Base: React_2.ForwardRefExoticComponent<Omit<ButtonPrimitive.ButtonProps, "children"> & {
     /** Appearance will change the style of the button */
@@ -448,6 +441,30 @@ 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;
+}
+
+declare interface ChartProps<TData extends object> {
+    data: TData[];
+    dataKey: keyof TData;
+    showLegend?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    tooltipTitle?: TooltipTitle;
+    xAxisScale?: ScaleType | Function;
+    xAxisTickFormatter?: TickFormatter;
+    yAxisScale?: ScaleType | Function;
+    yAxisTickFormatter?: TickFormatter;
+}
+
+declare type ChartValueFormatter = (value: number) => string | JSX.Element;
+
 export declare const Checkbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 declare type CheckboxBaseProps = Omit<React_2.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {
@@ -544,14 +561,6 @@ export declare type ComboboxTexts = {
 
 export declare type ComboboxValue = ScrollableListItemValue;
 
-declare type CommonChartProps<TType> = {
-    accessor: keyof TType & string;
-    xAxisScale?: ScaleType | Function;
-    xAxisTickFormat: (value: any) => string;
-    yAxisScale?: ScaleType | Function;
-    yAxisTickFormat: (value: any) => string;
-};
-
 declare interface CommonSearchInput2Props extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'> {
     loading?: boolean;
     onChange: (value: string) => void;
@@ -618,6 +627,8 @@ 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 const Datepicker: React_2.ForwardRefExoticComponent<Omit<InputProps, "value"> & {
     /** [Calendar](component:calendar) component associated with the DatePicker */
     calendar?: CalendarProps;
@@ -1078,26 +1089,18 @@ export declare type DialogTitleProps = React_2.HTMLAttributes<HTMLHeadingElement
 
 declare type DialogTriggerProps = React_2.HTMLAttributes<HTMLButtonElement>;
 
-export declare const DonutChart: {
-    ({ children, formatter, onClick, showLegend, legendPosition, label, }: DonutChartProps): default_2.JSX.Element | null;
-    Segment: (_: DonutChartSegmentProps) => null;
-};
+export declare function DonutChart<TData extends object>(props: DonutChartProps<TData>): default_2.JSX.Element;
 
-export declare type DonutChartProps = {
-    children: default_2.ReactElement<DonutChartSegmentProps> | default_2.ReactElement<DonutChartSegmentProps>[];
-    formatter?: (value: number) => string;
-    onClick?: (segment: DonutChartSegmentProps | DonutChartSegmentProps[]) => void;
-    showLegend?: boolean;
-    legendPosition?: string;
-    label: string;
-};
+export declare namespace DonutChart {
+    var Segment: <TData extends object>(_: DonutChartSegmentProps<TData>) => JSX.Element | null;
+}
 
-export declare type DonutChartSegmentProps = {
-    color: Color_2;
-    id: string;
-    label: string;
-    value: number;
-};
+export declare interface DonutChartProps<TData extends object> extends Omit<PieChartProps<TData>, 'showLabels'> {
+    showTotal?: boolean;
+}
+
+export declare interface DonutChartSegmentProps<TData extends object> extends PieChartSegmentProps<TData> {
+}
 
 export declare const Drawer: ForwardedDrawerWithStatics;
 
@@ -1632,6 +1635,27 @@ export declare type LayoutTopProps = {
     }) => default_2.ReactNode);
 };
 
+export declare const LegacyDonutChart: {
+    ({ children, formatter, onClick, label }: LegacyDonutChartProps): default_2.JSX.Element | null;
+    Segment: (_: LegacyDonutChartSegmentProps) => null;
+};
+
+export declare type LegacyDonutChartProps = {
+    children: default_2.ReactElement<LegacyDonutChartSegmentProps> | default_2.ReactElement<LegacyDonutChartSegmentProps>[];
+    formatter?: (value: number) => string;
+    onClick?: (segment: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]) => void;
+    label: string;
+};
+
+export declare type LegacyDonutChartSegmentProps = {
+    color: Color_2;
+    id: string;
+    label: string;
+    value: number;
+};
+
+export declare type LegacyDonutSegmentIds = string[];
+
 export declare type LegacyTableCell<TRow extends {}> = {
     accessor: string;
     /** Represents the row which renders the specific cell, exposing its properties */
@@ -1849,22 +1873,19 @@ export declare type LegacyTableTexts = {
     loading: string;
 };
 
-export declare const LineChart: {
-    <TType = unknown>(externalProps: LineChartProps<TType>): default_2.JSX.Element;
-    Line: (_: LineChartBarProps<any>) => null;
-};
+export declare function LineChart<TData extends object>(props: LineChartProps<TData>): default_2.JSX.Element;
 
-declare type LineChartBarProps<TType> = {
-    accessor: keyof TType & string;
-    color?: Color_2;
-    label?: string;
-};
+export declare namespace LineChart {
+    var Line: <TData extends object>(_: LineChartAreaProps<TData>) => JSX.Element | null;
+}
 
-declare type LineChartProps<TType> = CommonChartProps<TType> & {
-    children: default_2.ReactElement<LineChartBarProps<TType>> | default_2.ReactElement<LineChartBarProps<TType>>[];
-    data: TType[];
-    formatter?: (value: any) => string;
-};
+export declare interface LineChartAreaProps<TData extends object> extends ChartChildProps<TData> {
+}
+
+export declare interface LineChartProps<TData extends object> extends ChartProps<TData>, default_2.ComponentProps<'div'> {
+    showDots?: boolean;
+    type?: CurveType;
+}
 
 declare const Link: default_2.ForwardRefExoticComponent<LinkProps & default_2.RefAttributes<HTMLAnchorElement>>;
 
@@ -2449,6 +2470,22 @@ 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 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;
+    showLabels?: boolean;
+    unit?: string;
+}
+
+export declare interface PieChartSegmentProps<TData extends object> extends Omit<ChartChildProps<TData>, 'dataKey' | 'formatter' | 'unit'> {
+    value: number;
+}
+
 export declare type Placement = 'right' | 'left' | 'top' | 'bottom';
 
 export declare const Popover: ForwardedPopoverWithStatics;
@@ -2650,8 +2687,6 @@ declare const Section: default_2.ForwardRefExoticComponent<default_2.LiHTMLAttri
     heading?: string;
 } & default_2.RefAttributes<HTMLLIElement>>;
 
-export declare type SegmentIds = string[];
-
 export declare const Select: React_2.ForwardRefExoticComponent<Omit<ListboxProps, "dialog"> & Omit<ComboboxProps, "inline"> & {
     /**
      * Allows to select multiple values.
@@ -3535,6 +3570,8 @@ export declare type TextareaProps = React_2.TextareaHTMLAttributes<HTMLTextAreaE
     value?: string;
 };
 
+declare type TickFormatter = (value: any) => string;
+
 export declare const Title: React_2.ForwardRefExoticComponent<HangerTitleProps & React_2.RefAttributes<HTMLHeadingElement>>;
 
 declare const Title_2: default_2.ForwardRefExoticComponent<Listbox2TitleProps & default_2.RefAttributes<HTMLDivElement>>;
@@ -3622,6 +3659,8 @@ 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: {