import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
import { Margin } from '../../common/types/margin';
import * as d3 from "d3";
export type BarChartData = {
    groupName: string | number;
    [key: string]: any;
} | Record<string, {
    [key: string]: number;
}>;
export type LegendItemsGroupedStackedBarChart = {
    [key: string]: string;
};
export type BarChartColors = {
    [key: string]: string;
};
export type BarChartLabelPosition = "top" | "center" | "bottom";
export type BarChartLabelSetTooltipPosition = (position: {
    tooltip: d3.Selection<HTMLDivElement, unknown, null, undefined>;
    left: number;
    top: number;
    svgWidth: number;
}) => void;
export interface BarChartMarker {
    label: string;
    value: number;
    color?: string;
    lineColor?: string;
    className?: string;
    horizontal?: boolean;
    line?: boolean;
    align?: "center" | "left" | "right";
}
export interface BarChartProps extends PropsWithChildren {
    className?: string;
    style?: CSSProperties;
    data: BarChartData[];
    markers?: BarChartMarker[];
    lineData?: BarChartLineData[];
    colors: BarChartColors;
    margin?: Margin;
    barWidth?: number;
    barPadding?: number;
    setTooltipPosition?: BarChartLabelSetTooltipPosition | boolean;
    sectionPadding?: number | undefined;
    width?: number;
    height?: number;
    yAxisPadding?: number;
    xAxisPadding?: number;
    drawGridY?: boolean;
    drawGridX?: boolean;
    customYScale?: (yScale: (value: number) => number) => void;
    customXScale?: (xScale: d3.ScaleBand<string>) => void;
    customYAxisLeft?: (yAxisLeft: d3.Axis<d3.NumberValue>) => void;
    customXAxisBottom?: (xAxisBottom: d3.Axis<string>, props: {
        node: HTMLElement;
        labels: string[];
    }) => void;
    customYAxis?: (yAxis: d3.Selection<SVGGElement, unknown, null, undefined>) => void;
    customXAxis?: (xAxis: d3.Selection<SVGGElement, unknown, null, undefined>) => void;
    customBars?: (args: {
        bars: d3.Selection<Element | d3.EnterElement | Document | Window | SVGRectElement | null, BarChartMarshalledGroup, SVGGElement, BarChartMarshalledGroup[]> | d3.Transition<Element | d3.EnterElement | Document | Window | SVGPathElement | null, BarChartMarshalledGroup, SVGGElement, BarChartMarshalledGroup[]>;
        yScale: (value: number) => number;
        lines: null | {
            linesSelection: d3.Selection<Element | d3.EnterElement | Document | Window | SVGPathElement | null, BarChartLineData, SVGGElement, unknown> | null;
            areasSelection: d3.Selection<Element | d3.EnterElement | Document | Window | SVGPathElement | null, BarChartLineData, SVGGElement, unknown> | null;
            area: d3.Area<[number, number]> | null;
        };
        lineData?: BarChartLineData[];
        marshalledData: BarChartMarshalledGroup[][];
    }) => void;
    minValue?: number;
    maxValue?: number;
    minDomainValue?: number | undefined;
    maxDomainValue?: number | undefined;
    minValuesLine?: number;
    dynamicTooltipEnable?: boolean;
    hideTooltipGroupName?: boolean;
    renderTooltip?: (group: BarChartMergedData, position?: {
        tooltip: d3.Selection<HTMLDivElement, unknown, null, undefined>;
        left: number;
        top: number;
        svgWidth: number;
    }, barWidth?: number) => ReactNode;
    labelPosition?: BarChartLabelPosition;
    renderLabel?: (item: BarChartMarshalledGroup & {
        barWidth: number;
    }) => ReactNode;
    tooltipY?: number | undefined;
    tooltipBind?: boolean;
    stackedLine?: boolean;
    curve?: d3.CurveFactory;
    formatTooltipName?: (name: number | string) => number | string | ReactNode;
    formatTooltipValue?: (value: number, name?: string) => number | string | ReactNode;
    tooltipYDomain?: ((data: {
        data: BarChartMarshalledGroup[][];
        lineData?: BarChartLineData[];
        yScale: (value: number) => number;
    }) => number[]) | null;
    marshalledMap?: (data: BarChartMarshalledGroup[][]) => BarChartMarshalledGroup[][];
    drawBars?: (prop: {
        groups: d3.Selection<SVGGElement, BarChartMarshalledGroup[], SVGGElement, unknown>;
        yScale: (value: number) => number;
        marshalledData: BarChartMarshalledGroup[][];
        barWidth: number;
    }) => d3.Selection<Element | d3.EnterElement | Document | Window | SVGRectElement | null, BarChartMarshalledGroup, SVGGElement, BarChartMarshalledGroup[]> | d3.Transition<Element | d3.EnterElement | Document | Window | SVGPathElement | null, BarChartMarshalledGroup, SVGGElement, BarChartMarshalledGroup[]>;
    customize?: (args: {
        svg: d3.Selection<SVGSVGElement, unknown, null, undefined>;
        marshalledData: BarChartMarshalledGroup[][];
        yScale: (value: number) => number;
        xScale: d3.ScaleBand<string>;
        lineData?: BarChartLineData[];
    }) => void;
    onLabelItem?: (data: BarChartMarshalledGroup[]) => BarChartMarshalledGroup[];
    isBarTooltip?: boolean;
    xScaleItemWidth?: number;
    tooltipRoot?: Element;
    tooltipClassName?: string;
    selectable?: boolean;
    onSelect?: (value: [number, number]) => void;
    onBarClick?: (group: BarChartMarshalledGroup) => void;
    onBarHover?: (group?: BarChartMarshalledGroup) => void;
    transitionDuration?: number;
}
export type BarChartMergedData = (BarChartMarshalledGroup & BarChartLineData & {
    groupName: string;
})[];
export type BarChartMarshaling = {
    yScale: (value: number) => number;
    xScale: d3.ScaleBand<string>;
    marginTop?: number;
} & Pick<BarChartProps, "barPadding" | "barWidth" | "data" | "colors">;
export type BarChartMarshalledGroup = {
    x: number;
    y: number;
    height: number;
    color: string;
    value: number;
    groupName?: string;
    name: string;
    stackIndex: number;
    groupIndex: number;
};
export type BarChartLineData = {
    lineType: "line" | "area";
    name: string;
    values: (number | null)[];
    stroke?: string;
    fill?: string;
};