import * as react from 'react';
import { ReactNode, ComponentProps, SVGTextElementAttributes, RefObject } from 'react';
import * as recharts from 'recharts';
import { LegendPayload, XAxisProps, YAxisProps, CartesianGridProps, LegendProps as LegendProps$1, ReferenceLine, AreaProps, AreaChart as AreaChart$1, BarProps, BarChart as BarChart$1, LineProps, LineChart as LineChart$1, ComposedChart, PieProps, Cell, PieChart as PieChart$1, RadarChart as RadarChart$1, Radar, PolarAngleAxis, PolarGrid, PolarRadiusAxis } from 'recharts';
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
import * as _stitches_react_types_config from '@stitches/react/types/config';
import { Payload, ValueType, NameType } from 'recharts/types/component/DefaultTooltipContent';
import { BoxProps } from '@sparrowengg/twigs-react';

type LegendIcons = "square" | "line";

type BaseChartLegendProps = {
    payload?: ReadonlyArray<LegendPayload>;
    setHighlightedItem?: (item: string | null) => void;
};
type ChartLegendProps<T extends ChartSeries | CompositeChartSeries> = BaseChartLegendProps & {
    series?: T[];
    icon?: LegendIcons;
    renderIcon?: (series?: T | LegendPayload) => ReactNode;
};

declare const StyledResponsiveContainer: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<recharts.ResponsiveContainerProps & react.RefAttributes<HTMLDivElement>>, {}, {
    'screen-xxs': "(min-width: 320px)";
    'screen-xs': "(min-width: 480px)";
    'screen-sm': "(min-width: 640px)";
    'screen-md': "(min-width: 768px)";
    'screen-lg': "(min-width: 1024px)";
    'screen-xl': "(min-width: 1280px)";
    'screen-2xl': "(min-width: 1536px)";
}, _stitches_react_types_css_util.CSS<{
    'screen-xxs': "(min-width: 320px)";
    'screen-xs': "(min-width: 480px)";
    'screen-sm': "(min-width: 640px)";
    'screen-md': "(min-width: 768px)";
    'screen-lg': "(min-width: 1024px)";
    'screen-xl': "(min-width: 1280px)";
    'screen-2xl': "(min-width: 1536px)";
}, {
    colors: {
        primary: string;
        secondary: string;
        accent50: string;
        accent100: string;
        accent200: string;
        accent300: string;
        accent400: string;
        accent500: string;
        accent600: string;
        accent700: string;
        accent800: string;
        accent900: string;
        primary50: string;
        primary100: string;
        primary200: string;
        primary300: string;
        primary400: string;
        primary500: string;
        primary600: string;
        primary700: string;
        primary800: string;
        primary900: string;
        warning50: string;
        warning100: string;
        warning200: string;
        warning300: string;
        warning400: string;
        warning500: string;
        warning600: string;
        warning700: string;
        warning800: string;
        warning900: string;
        highlight50: string;
        highlight100: string;
        highlight200: string;
        highlight300: string;
        highlight400: string;
        highlight500: string;
        highlight600: string;
        highlight700: string;
        highlight800: string;
        highlight900: string;
        positive50: string;
        positive100: string;
        positive200: string;
        positive300: string;
        positive400: string;
        positive500: string;
        positive600: string;
        positive700: string;
        positive800: string;
        positive900: string;
        secondary50: string;
        secondary100: string;
        secondary200: string;
        secondary300: string;
        secondary400: string;
        secondary500: string;
        secondary600: string;
        secondary700: string;
        secondary800: string;
        secondary900: string;
        negative50: string;
        negative100: string;
        negative200: string;
        negative300: string;
        negative400: string;
        negative500: string;
        negative600: string;
        negative700: string;
        negative800: string;
        negative900: string;
        neutral50: string;
        neutral100: string;
        neutral200: string;
        neutral300: string;
        neutral400: string;
        neutral500: string;
        neutral600: string;
        neutral700: string;
        neutral800: string;
        neutral900: string;
        black50: string;
        black100: string;
        black200: string;
        black300: string;
        black400: string;
        black500: string;
        black600: string;
        black700: string;
        black800: string;
        black900: string;
        white50: string;
        white100: string;
        white200: string;
        white300: string;
        white400: string;
        white500: string;
        white600: string;
        white700: string;
        white800: string;
        white900: string;
    };
    space: {
        1: string;
        2: string;
        3: string;
        4: string;
        5: string;
        6: string;
        7: string;
        8: string;
        9: string;
        10: string;
        11: string;
        12: string;
        13: string;
        14: string;
        15: string;
        16: string;
        17: string;
        18: string;
        19: string;
        20: string;
        21: string;
        22: string;
        23: string;
        24: string;
        25: string;
        26: string;
        27: string;
        28: string;
        29: string;
        30: string;
        31: string;
        32: string;
        33: string;
        34: string;
        35: string;
        36: string;
        37: string;
        38: string;
        39: string;
        40: string;
        41: string;
        42: string;
        43: string;
        44: string;
        45: string;
        46: string;
        47: string;
        48: string;
        49: string;
        50: string;
    };
    fontSizes: {
        xxs: string;
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        "2xl": string;
        "3xl": string;
        "4xl": string;
        "5xl": string;
    };
    fonts: {
        body: string;
        heading: string;
    };
    fontWeights: {
        1: string;
        2: string;
        3: string;
        4: string;
        5: string;
        6: string;
        7: string;
        8: string;
        9: string;
    };
    lineHeights: {
        xxs: string;
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        "2xl": string;
        "3xl": string;
        "4xl": string;
    };
    letterSpacings: unknown;
    sizes: {
        1: string;
        2: string;
        3: string;
        4: string;
        5: string;
        6: string;
        7: string;
        8: string;
        9: string;
        10: string;
        11: string;
        12: string;
        13: string;
        14: string;
        15: string;
        16: string;
        17: string;
        18: string;
        19: string;
        20: string;
        21: string;
        22: string;
        23: string;
        24: string;
        25: string;
        26: string;
        27: string;
        28: string;
        29: string;
        30: string;
        31: string;
        32: string;
        33: string;
        34: string;
    };
    borderWidths: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
    borderStyles: unknown;
    radii: {
        none: string;
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        "2xl": string;
        "3xl": string;
        "4xl": string;
        round: string;
        pill: string;
    };
    shadows: {
        sm: string;
    };
    zIndices: unknown;
    transitions: {
        1: string;
        2: string;
        3: string;
    };
}, _stitches_react_types_config.DefaultThemeMap, {
    backgroundColorOpacity: ([value, opacity]: ["$primary" | "$secondary" | "$accent50" | "$accent100" | "$accent200" | "$accent300" | "$accent400" | "$accent500" | "$accent600" | "$accent700" | "$accent800" | "$accent900" | "$primary50" | "$primary100" | "$primary200" | "$primary300" | "$primary400" | "$primary500" | "$primary600" | "$primary700" | "$primary800" | "$primary900" | "$warning50" | "$warning100" | "$warning200" | "$warning300" | "$warning400" | "$warning500" | "$warning600" | "$warning700" | "$warning800" | "$warning900" | "$highlight50" | "$highlight100" | "$highlight200" | "$highlight300" | "$highlight400" | "$highlight500" | "$highlight600" | "$highlight700" | "$highlight800" | "$highlight900" | "$positive50" | "$positive100" | "$positive200" | "$positive300" | "$positive400" | "$positive500" | "$positive600" | "$positive700" | "$positive800" | "$positive900" | "$secondary50" | "$secondary100" | "$secondary200" | "$secondary300" | "$secondary400" | "$secondary500" | "$secondary600" | "$secondary700" | "$secondary800" | "$secondary900" | "$negative50" | "$negative100" | "$negative200" | "$negative300" | "$negative400" | "$negative500" | "$negative600" | "$negative700" | "$negative800" | "$negative900" | "$neutral50" | "$neutral100" | "$neutral200" | "$neutral300" | "$neutral400" | "$neutral500" | "$neutral600" | "$neutral700" | "$neutral800" | "$neutral900" | "$black50" | "$black100" | "$black200" | "$black300" | "$black400" | "$black500" | "$black600" | "$black700" | "$black800" | "$black900" | "$white50" | "$white100" | "$white200" | "$white300" | "$white400" | "$white500" | "$white600" | "$white700" | "$white800" | "$white900" | (string & {}), number]) => {
        backgroundColor: string;
    };
    colorOpacity: ([value, opacity]: ["$primary" | "$secondary" | "$accent50" | "$accent100" | "$accent200" | "$accent300" | "$accent400" | "$accent500" | "$accent600" | "$accent700" | "$accent800" | "$accent900" | "$primary50" | "$primary100" | "$primary200" | "$primary300" | "$primary400" | "$primary500" | "$primary600" | "$primary700" | "$primary800" | "$primary900" | "$warning50" | "$warning100" | "$warning200" | "$warning300" | "$warning400" | "$warning500" | "$warning600" | "$warning700" | "$warning800" | "$warning900" | "$highlight50" | "$highlight100" | "$highlight200" | "$highlight300" | "$highlight400" | "$highlight500" | "$highlight600" | "$highlight700" | "$highlight800" | "$highlight900" | "$positive50" | "$positive100" | "$positive200" | "$positive300" | "$positive400" | "$positive500" | "$positive600" | "$positive700" | "$positive800" | "$positive900" | "$secondary50" | "$secondary100" | "$secondary200" | "$secondary300" | "$secondary400" | "$secondary500" | "$secondary600" | "$secondary700" | "$secondary800" | "$secondary900" | "$negative50" | "$negative100" | "$negative200" | "$negative300" | "$negative400" | "$negative500" | "$negative600" | "$negative700" | "$negative800" | "$negative900" | "$neutral50" | "$neutral100" | "$neutral200" | "$neutral300" | "$neutral400" | "$neutral500" | "$neutral600" | "$neutral700" | "$neutral800" | "$neutral900" | "$black50" | "$black100" | "$black200" | "$black300" | "$black400" | "$black500" | "$black600" | "$black700" | "$black800" | "$black900" | "$white50" | "$white100" | "$white200" | "$white300" | "$white400" | "$white500" | "$white600" | "$white700" | "$white800" | "$white900" | (string & {}), number]) => {
        color: string;
    };
    borderColorOpacity: ([value, opacity]: ["$primary" | "$secondary" | "$accent50" | "$accent100" | "$accent200" | "$accent300" | "$accent400" | "$accent500" | "$accent600" | "$accent700" | "$accent800" | "$accent900" | "$primary50" | "$primary100" | "$primary200" | "$primary300" | "$primary400" | "$primary500" | "$primary600" | "$primary700" | "$primary800" | "$primary900" | "$warning50" | "$warning100" | "$warning200" | "$warning300" | "$warning400" | "$warning500" | "$warning600" | "$warning700" | "$warning800" | "$warning900" | "$highlight50" | "$highlight100" | "$highlight200" | "$highlight300" | "$highlight400" | "$highlight500" | "$highlight600" | "$highlight700" | "$highlight800" | "$highlight900" | "$positive50" | "$positive100" | "$positive200" | "$positive300" | "$positive400" | "$positive500" | "$positive600" | "$positive700" | "$positive800" | "$positive900" | "$secondary50" | "$secondary100" | "$secondary200" | "$secondary300" | "$secondary400" | "$secondary500" | "$secondary600" | "$secondary700" | "$secondary800" | "$secondary900" | "$negative50" | "$negative100" | "$negative200" | "$negative300" | "$negative400" | "$negative500" | "$negative600" | "$negative700" | "$negative800" | "$negative900" | "$neutral50" | "$neutral100" | "$neutral200" | "$neutral300" | "$neutral400" | "$neutral500" | "$neutral600" | "$neutral700" | "$neutral800" | "$neutral900" | "$black50" | "$black100" | "$black200" | "$black300" | "$black400" | "$black500" | "$black600" | "$black700" | "$black800" | "$black900" | "$white50" | "$white100" | "$white200" | "$white300" | "$white400" | "$white500" | "$white600" | "$white700" | "$white800" | "$white900" | (string & {}), number]) => {
        borderColor: string;
    };
}>>;
type StyledResponsiveContainerProps = Partial<Omit<ComponentProps<typeof StyledResponsiveContainer>, "ref" | "children">>;

interface TooltipBaseData {
    label: ReactNode;
    value: ReactNode;
    color: string;
    key: string | number;
    legendIcon?: LegendIcons;
}
interface TooltipBaseProps {
    title?: string;
    data: TooltipBaseData[];
    legendIcon?: LegendIcons;
    renderFooter?: (() => ReactNode) | null;
}

type OverrideTooltipProps = TooltipBaseProps | ((props: TooltipBaseProps) => Partial<TooltipBaseProps>);

type ChartDataType = Record<string, string | number>;
interface ChartSeries {
    name: string;
    color?: string;
    label?: string;
    yAxisId?: string;
    fill?: string;
    stroke?: string;
    strokeDasharray?: string | number;
    unit?: string;
    stackId?: string;
    valueFormatter?: ChartsTheme["config"]["valueFormatter"];
}
type CompositeChartSeries = ChartSeries & {
    type: "line" | "area" | "bar";
};
type GridAxis = "none" | "x" | "y" | "xy";
type ChartReferenceLineProps = Partial<Omit<ComponentProps<typeof ReferenceLine>, "ref">>;
type BaseCartesianChartProps = {
    data: ChartDataType[];
    width?: string | number;
    height?: string | number;
    series: ChartSeries[];
    dataKey: string;
    xAxisProps?: Partial<Omit<XAxisProps, "ref">>;
    yAxisProps?: Partial<Omit<YAxisProps, "ref">>;
    cartesianGridProps?: CartesianGridProps;
    showRightYAxis?: boolean;
    showTooltip?: boolean;
    xAxisLabel?: ReactNode;
    yAxisLabel?: ReactNode;
    highlightOnLegendHover?: boolean;
    showLegend?: boolean;
    unit?: string;
    containerProps?: StyledResponsiveContainerProps;
    rightYAxisProps?: Partial<Omit<YAxisProps, "ref">>;
    showAxisLine?: boolean;
    children?: ReactNode;
    valueFormatter?: ChartsTheme["config"]["valueFormatter"];
    renderLegendIcon?: ChartLegendProps<ChartSeries>["renderIcon"];
    overrideTooltipProps?: OverrideTooltipProps;
    renderTooltipFooter?: () => ReactNode | null;
    showTooltipFooter?: boolean;
    legendProps?: LegendProps;
    gridAxis?: GridAxis;
    referenceLines?: ChartReferenceLineProps[];
};
type LegendProps = Omit<LegendProps$1, "ref">;

type ChartsTheme = {
    /**
     * Theme colors. You can override these colors to customize the chart,
     * additionally custom colors can be added here in any format (ie, objects, arrays, string).
     *
     * To consume these colors in the chart, add a dollar sign ($) before the key.
     *
     * @example
     * ```tsx
     * areaProps: {
     *  fill: '$areaChartColors[0]'
     * }
     * ```
     */
    colors: {
        text?: string;
        textAlternate?: string;
        background?: string;
        /**
         * Cartesian grid line color, use config.cartesianGridProps for more customization
         */
        gridLine?: string;
        /**
         * Text color for Y-axis tick
         */
        yAxisTick?: string;
        /**
         * Text color for X-axis tick
         */
        xAxisTick?: string;
        /**
         * Color for X-axis line. If this is not provided, the line will not be shown
         */
        xAxisLine?: string;
        /**
         * Color for Y-axis line. If this is not provided, the line will not be shown
         */
        yAxisLine?: string;
        tooltipHeaderBackground?: string;
        tooltipBodyBackground?: string;
        default?: string;
        legendText?: string;
        /**
         * Color for KPI trend positive indicator (arrow + percentage text).
         * Defaults to "#1B9850"
         */
        kpiPositive?: string;
        /**
         * Color for KPI trend negative indicator (arrow + percentage text).
         * Defaults to "#E3502F"
         */
        kpiNegative?: string;
        /**
         * Color for KPI trend neutral indicator (dash + percentage text).
         * Defaults to "#9E9E9E"
         */
        kpiNeutral?: string;
    } & Record<string & {}, unknown>;
    fontFamily?: string;
    fontFamilyAlternate?: string;
    config: {
        cartesianGridProps?: CartesianGridProps;
        yAxisProps?: Omit<YAxisProps, "ref">;
        xAxisProps?: Omit<XAxisProps, "ref">;
        valueFormatter?: (value?: string | number, info?: {
            axis?: {
                id: string;
            };
            tooltip?: Payload<ValueType, NameType>;
            label?: ChartSeries;
        }) => string | null;
    };
};
declare const ThemeContext: react.Context<ChartsTheme>;
declare const ThemeProvider: ({ children, theme, }: {
    children: ReactNode;
    theme: ChartsTheme;
}) => react.JSX.Element;

interface CartesianLabelProps {
    x?: number;
    y?: number;
    unit?: string;
    width?: number;
    height?: number;
    value?: string;
    index?: number;
    dataLength: number;
    textProps?: SVGTextElementAttributes<SVGTextElement>;
    seriesItem?: ChartSeries;
    valueFormatter?: ChartsTheme["config"]["valueFormatter"];
    chartType?: "bar" | "area" | "line";
    isStacked?: boolean;
    orientation?: "horizontal" | "vertical";
}

type AreaDot = AreaProps["dot"];
type CurveType$2 = NonNullable<AreaProps["type"]>;
type AreaChartOptions = {
    areaProps?: Partial<Omit<AreaProps, "ref">> | ((series: ChartSeries) => Partial<Omit<AreaProps, "ref">>);
    areaDotProps?: AreaDot | null;
    areaActiveDotProps?: AreaDot | null;
    curveType?: CurveType$2;
    chartProps?: ComponentProps<typeof AreaChart$1>;
    connectNulls?: boolean;
    gradient?: boolean;
    type?: "default" | "stacked";
    orientation?: "horizontal" | "vertical";
    showAreaLabel?: boolean;
    areaLabelProps?: CartesianLabelProps["textProps"];
};
type AreaChartProps = BaseCartesianChartProps & AreaChartOptions;
declare const AreaChart: ({ data, type, unit, width, height, series, dataKey, gradient, children, areaProps, curveType, chartProps, xAxisProps, yAxisProps, xAxisLabel, yAxisLabel, showLegend, showTooltip, orientation, legendProps, areaDotProps, showAxisLine, connectNulls, showAreaLabel, valueFormatter: valueFormatterProp, containerProps, areaLabelProps, showRightYAxis, rightYAxisProps, renderLegendIcon, showTooltipFooter, areaActiveDotProps, cartesianGridProps, renderTooltipFooter, overrideTooltipProps, highlightOnLegendHover, gridAxis, referenceLines, }: AreaChartProps) => react.JSX.Element;

type BarChartOptions = {
    barProps?: Partial<Omit<BarProps, "ref">> | ((series: ChartSeries) => Partial<Omit<BarProps, "ref">>);
    chartProps?: ComponentProps<typeof BarChart$1>;
    showBarLabel?: boolean;
    type?: "default" | "stacked";
    orientation?: "horizontal" | "vertical";
    children?: ReactNode;
    maxBarWidth?: number;
    barLabelProps?: CartesianLabelProps["textProps"];
};
type BarChartProps = BaseCartesianChartProps & BarChartOptions;
declare const BarChart: ({ data, unit, type, width, height, series, dataKey, children, barProps, chartProps, xAxisProps, yAxisProps, xAxisLabel, yAxisLabel, showLegend, showTooltip, orientation, legendProps, maxBarWidth, showBarLabel, showAxisLine, barLabelProps, valueFormatter: valueFormatterProp, containerProps, showRightYAxis, rightYAxisProps, renderLegendIcon, showTooltipFooter, cartesianGridProps, renderTooltipFooter, overrideTooltipProps, highlightOnLegendHover, gridAxis, referenceLines, }: BarChartProps) => react.JSX.Element;

type LineDot = LineProps["dot"];
type CurveType$1 = NonNullable<LineProps["type"]>;
type LineChartOptions = {
    lineProps?: Partial<Omit<LineProps, "ref">> | ((series: ChartSeries) => Partial<Omit<LineProps, "ref">>);
    strokeWidth?: number;
    lineDotProps?: LineDot | null;
    lineActiveDotProps?: LineDot | null;
    curveType?: CurveType$1;
    chartProps?: ComponentProps<typeof LineChart$1>;
    connectNulls?: boolean;
    orientation?: "horizontal" | "vertical";
    showLineLabel?: boolean;
    lineLabelProps?: CartesianLabelProps["textProps"];
};
type LineChartProps = BaseCartesianChartProps & LineChartOptions;
declare const LineChart: ({ data, unit, width, height, series, dataKey, children, lineProps, curveType, chartProps, xAxisProps, yAxisProps, xAxisLabel, yAxisLabel, showLegend, showTooltip, orientation, legendProps, connectNulls, strokeWidth, lineDotProps, showAxisLine, showLineLabel, valueFormatter: valueFormatterProp, containerProps, showRightYAxis, lineLabelProps, rightYAxisProps, renderLegendIcon, showTooltipFooter, lineActiveDotProps, cartesianGridProps, renderTooltipFooter, overrideTooltipProps, highlightOnLegendHover, gridAxis, referenceLines, }: LineChartProps) => react.JSX.Element;

type CompositeChartProps = Omit<BaseCartesianChartProps, "series" | "renderLegendIcon"> & {
    orientation?: "horizontal" | "vertical";
    chartProps?: ComponentProps<typeof ComposedChart>;
    series: CompositeChartSeries[];
    areaChartOptions?: AreaChartOptions;
    lineChartOptions?: LineChartOptions;
    barChartOptions?: BarChartOptions;
    renderLegendIcon?: ChartLegendProps<CompositeChartSeries>["renderIcon"];
};
declare const CompositeChart: ({ data, unit, width, height, series, dataKey, children, xAxisProps, yAxisProps, xAxisLabel, yAxisLabel, showLegend, chartProps, showTooltip, orientation, legendProps, showAxisLine, valueFormatter: valueFormatterProp, containerProps, showRightYAxis, barChartOptions, rightYAxisProps, areaChartOptions, lineChartOptions, renderLegendIcon, showTooltipFooter, cartesianGridProps, renderTooltipFooter, overrideTooltipProps, highlightOnLegendHover, gridAxis, referenceLines, }: CompositeChartProps) => react.JSX.Element;

interface DonutChartData {
    name: string;
    value: number;
    color?: string;
    strokeWidth?: number;
    stroke?: string;
}
interface DonutChartProps {
    data: DonutChartData[];
    width?: number | string;
    height?: number | string;
    size?: number;
    unit?: string;
    pieProps?: Omit<PieProps, "ref" | "dataKey">;
    cellProps?: ComponentProps<typeof Cell> | ((cellData: DonutChartData) => ComponentProps<typeof Cell>);
    showLabel?: boolean;
    showTooltip?: boolean;
    thickness?: number;
    paddingAngle?: number;
    showLabelLine?: boolean;
    legendProps?: LegendProps;
    showLegend?: boolean;
    chartProps?: ComponentProps<typeof PieChart$1>;
    middleLabel?: ReactNode;
    containerProps?: StyledResponsiveContainerProps;
    valueFormatter?: ChartsTheme["config"]["valueFormatter"];
    renderLegendIcon?: (data?: LegendPayload) => ReactNode;
    animationDuration?: number;
    showTooltipFooter?: boolean;
    defaultActiveIndex?: number;
    highlightOnLegendHover?: boolean;
    showActiveValueInCenter?: boolean;
    overrideTooltipProps?: OverrideTooltipProps;
    renderTooltipFooter?: () => ReactNode | null;
    children?: ReactNode;
}
declare const DonutChart: ({ data, size, unit, width, height, children, pieProps, cellProps, showLabel, chartProps, showLegend, legendProps, showTooltip, thickness, middleLabel, paddingAngle, showLabelLine, containerProps, valueFormatter: valueFormatterProp, renderLegendIcon, showTooltipFooter, animationDuration, defaultActiveIndex, renderTooltipFooter, overrideTooltipProps, highlightOnLegendHover, showActiveValueInCenter, }: DonutChartProps) => react.JSX.Element;

interface PieChartData {
    name: string;
    value: number;
    color?: string;
    strokeWidth?: number;
    stroke?: string;
}
interface PieChartProps {
    data: PieChartData[];
    size?: number;
    unit?: string;
    width?: string | number;
    height?: string | number;
    pieProps?: Omit<PieProps, "ref">;
    cellProps?: ComponentProps<typeof Cell> | ((cellData: PieChartData) => ComponentProps<typeof Cell>);
    showLabel?: boolean;
    showTooltip?: boolean;
    showActiveShape?: boolean;
    showLabelLine?: boolean;
    showLegend?: boolean;
    chartProps?: ComponentProps<typeof PieChart$1>;
    startAngle?: number;
    endAngle?: number;
    innerRadius?: number;
    outerRadius?: number;
    paddingAngle?: number;
    cornerRadius?: number;
    containerProps?: StyledResponsiveContainerProps;
    valueFormatter?: ChartsTheme["config"]["valueFormatter"];
    renderLegendIcon?: (data?: LegendPayload) => ReactNode;
    animationDuration?: number;
    highlightOnLegendHover?: boolean;
    children?: ReactNode;
    overrideTooltipProps?: OverrideTooltipProps;
    renderTooltipFooter?: () => ReactNode | null;
    showTooltipFooter?: boolean;
    legendProps?: Omit<LegendProps, "ref">;
    defaultActiveIndex?: number;
}
declare const PieChart: ({ data, size, unit, width, height, children, pieProps, cellProps, showLabel, chartProps, startAngle, endAngle, innerRadius, outerRadius, paddingAngle, cornerRadius, showLegend, showTooltip, showLabelLine, containerProps, valueFormatter: valueFormatterProp, showActiveShape, renderLegendIcon, showTooltipFooter, animationDuration, renderTooltipFooter, overrideTooltipProps, highlightOnLegendHover, legendProps, defaultActiveIndex, }: PieChartProps) => react.JSX.Element;

interface RadarChartSeries {
    name: string;
    dataKey?: string;
    color?: string;
    strokeWidth?: number;
    stroke?: string;
}
interface RadarChartProps {
    data: Record<string, unknown>[];
    series: RadarChartSeries[];
    size?: number;
    unit?: string;
    width?: string | number;
    height?: string | number;
    dataKey?: string;
    chartProps?: ComponentProps<typeof RadarChart$1>;
    radarProps?: Partial<Omit<ComponentProps<typeof Radar>, "ref">> | ((cellData: RadarChartSeries) => Partial<ComponentProps<typeof Radar>>);
    showTooltip?: boolean;
    showPolarRadiusAxis?: boolean;
    showPolarAngleAxis?: boolean;
    showPolarGrid?: boolean;
    polarAngleAxisProps?: Omit<ComponentProps<typeof PolarAngleAxis>, "ref">;
    polarGridProps?: Omit<ComponentProps<typeof PolarGrid>, "ref">;
    polarRadiusAxisProps?: Omit<ComponentProps<typeof PolarRadiusAxis>, "ref">;
    showLegend?: boolean;
    legendProps?: LegendProps;
    containerProps?: StyledResponsiveContainerProps;
    renderTooltipFooter?: () => ReactNode | null;
    showTooltipFooter?: boolean;
    valueFormatter?: ChartsTheme["config"]["valueFormatter"];
    renderLegendIcon?: (data?: LegendPayload) => ReactNode;
    highlightOnLegendHover?: boolean;
    overrideTooltipProps?: OverrideTooltipProps;
    children?: ReactNode;
}
declare const RadarChart: ({ data, size, unit, width, height, series, dataKey, children, radarProps, chartProps, showLegend, showTooltip, legendProps, containerProps, polarRadiusAxisProps, showPolarRadiusAxis, polarAngleAxisProps, polarGridProps, showPolarAngleAxis, showPolarGrid, valueFormatter: valueFormatterProp, renderLegendIcon, showTooltipFooter, renderTooltipFooter, overrideTooltipProps, highlightOnLegendHover, }: RadarChartProps) => react.JSX.Element;

type CurveType = NonNullable<AreaProps["type"]>;
type SparklineProps = {
    width?: number | string;
    height?: number | string;
    children?: ReactNode;
    data: (number | null)[];
    areaProps?: Partial<Omit<AreaProps, "ref">> | ((series: ChartSeries) => Partial<Omit<AreaProps, "ref">>);
    color: string;
    curveType?: CurveType;
    chartProps?: ComponentProps<typeof AreaChart$1>;
    connectNulls?: boolean;
    gradient?: boolean;
    orientation?: "horizontal" | "vertical";
    containerProps?: StyledResponsiveContainerProps;
};
declare const Sparkline: ({ data, width, height, color: colorProp, gradient, children, areaProps, curveType, chartProps, orientation, connectNulls, containerProps, }: SparklineProps) => react.JSX.Element;

interface CellRenderData {
    x: number;
    y: number;
    item: HeatmapDataItem;
    cellWidth: number;
    cellHeight: number;
    fill: string;
    textColor: string;
    value: number;
    id: string;
}
interface LegendRenderData {
    x: number;
    y: number;
    barWidth: number;
    barHeight: number;
    color: string;
    minColor: string;
    maxColor: string;
    minValue: number;
    maxValue: number;
    labels: {
        x: number;
        y: number;
        text: string;
    }[];
    deriveFillColor: (props: DeriveFillColorProps) => string;
}

interface HeatmapLegendProps extends LegendRenderData {
}

interface HeatmapTooltipProps {
    title: string;
    x: number;
    y: number;
    cellSize?: number;
    item: {
        label: string;
        value: string;
        color: string;
        payload?: HeatmapDataItem;
    };
    containerRef?: RefObject<HTMLDivElement | null>;
    renderFooter?: () => ReactNode | null;
    showFooter?: boolean;
}

type HeatmapDataItem = {
    x: string;
    y: string;
    value: number;
} & Record<string, unknown>;
interface HeatmapXAxisItem {
    dataKey: string;
    group?: string;
    label?: string;
}
interface HeatmapYAxisItem {
    dataKey: string;
    label?: string;
}
type HeatmapXAxisGroup = {
    name: string;
    items: string[];
} & Record<string, unknown>;
interface HeatmapSeries {
    xAxis: string[] | HeatmapXAxisItem[];
    yAxis: string[] | HeatmapYAxisItem[];
    xAxisGroup?: HeatmapXAxisGroup[];
}
type HeatmapProps = {
    width?: number | string;
    height?: number | string;
    containerProps?: BoxProps;
    series: HeatmapSeries;
    data: HeatmapDataItem[];
    cellSize?: number;
    cellSpacing?: number;
    groupSpacing?: number;
    color?: string;
    cellProps?: Omit<React.SVGAttributes<SVGGElement>, "onClick"> & {
        onClick?: (e: React.MouseEvent<SVGGElement, MouseEvent>, cellGroup: CellRenderData) => void;
    };
    cellWidth?: number;
    cellHeight?: number;
    marginX?: number;
    marginY?: number;
    yAxisWidth?: number;
    xAxisHeight?: number;
    groupLabelHeight?: number;
    legendWidth?: number;
    legendHeight?: number;
    legendBarHeight?: number;
    legendMarginTop?: number;
    showTooltipFooter?: boolean;
    textColor?: string;
    textColorAlternate?: string;
    deriveFillColor?: (props: DeriveFillColorProps) => string;
    renderGroupLabel?: (props: {
        x: number;
        y: number;
        group: HeatmapXAxisGroup;
    }) => ReactNode;
    renderCell?: (props: CellRenderData & {
        isHovered: boolean;
        hoveredCellId: string | null;
        elementProps: Record<string, string>;
    }) => ReactNode;
    renderLegend?: (props: HeatmapLegendProps) => ReactNode;
    renderXAxisLabel?: (props: {
        x: number;
        y: number;
        text: string;
        groupName: string;
    }) => ReactNode;
    renderYAxisLabel?: (props: {
        x: number;
        y: number;
        text: string;
    }) => ReactNode;
    renderTooltipFooter?: () => ReactNode | null;
    tooltipProps?: Partial<HeatmapTooltipProps> | ((props: HeatmapTooltipProps) => Partial<HeatmapTooltipProps>);
};
interface DeriveFillColorProps {
    color?: string;
    maxValue: number;
    minValue: number;
    value: number;
    data?: HeatmapDataItem;
}
declare const Heatmap: ({ data, width, height, series, containerProps, cellSize, cellSpacing, groupSpacing, yAxisWidth, xAxisHeight, groupLabelHeight, marginX, marginY, color: colorProp, cellProps, cellHeight, cellWidth, legendBarHeight, legendHeight, legendMarginTop, legendWidth, showTooltipFooter, tooltipProps, textColor, textColorAlternate, deriveFillColor, renderCell, renderGroupLabel, renderLegend, renderXAxisLabel, renderYAxisLabel, renderTooltipFooter, }: HeatmapProps) => react.JSX.Element;

type KPITrendDirection = "up" | "down" | "neutral";
type KPITrendStatus = "positive" | "negative" | "neutral";
type KPITrend = {
    percentage: number;
    direction: KPITrendDirection;
    status?: KPITrendStatus;
    label?: ReactNode;
    showTooltip?: boolean;
    tooltipContent?: ReactNode;
};
type KPIChartProps = {
    value: number | string;
    title: string;
    icon?: ReactNode;
    prefix?: string;
    suffix?: string;
    valueFormatter?: (v: number | string) => string;
    trend?: KPITrend;
    width?: string | number;
    onClick?: () => void;
};
declare const KPIChart: ({ value, title, icon, prefix, suffix, valueFormatter, trend, width, onClick, }: KPIChartProps) => react.JSX.Element;

declare const useTheme: () => ChartsTheme;

declare const getColor: (obj: Record<string, unknown>, color: string) => string;

export { AreaChart, BarChart, CompositeChart, DonutChart, Heatmap, KPIChart, LineChart, PieChart, RadarChart, Sparkline, ThemeContext, ThemeProvider, getColor, useTheme };
export type { AreaChartOptions, AreaChartProps, BarChartOptions, BarChartProps, ChartsTheme, CompositeChartProps, DeriveFillColorProps, DonutChartData, DonutChartProps, HeatmapDataItem, HeatmapProps, HeatmapSeries, HeatmapXAxisGroup, HeatmapXAxisItem, HeatmapYAxisItem, KPIChartProps, KPITrend, KPITrendDirection, KPITrendStatus, LineChartOptions, LineChartProps, PieChartData, PieChartProps, RadarChartProps, RadarChartSeries, SparklineProps };