import { CSSProperties } from 'react';
import * as d3_2 from 'd3';
import { default as default_2 } from 'react';
import { FC } from 'react';
import { RefObject } from 'react';

/**
 * Adds grid lines to a chart
 * @param g - D3 selection of the group element
 * @param x - X scale
 * @param y - Y scale
 * @param width - Width of the chart
 * @param height - Height of the chart
 * @param showXGrid - Whether to show X grid lines
 * @param showYGrid - Whether to show Y grid lines
 * @param ticks - Number of ticks
 * @param color - Color of the grid lines
 */
export declare const addGridLines: (g: d3_2.Selection<SVGGElement, unknown, null, undefined>, x: d3_2.ScaleBand<string> | d3_2.ScalePoint<string>, // More specific type for x scale
y: d3_2.ScaleLinear<number, number>, width: number, height: number, showXGrid: boolean, showYGrid: boolean, ticks: number, color: string) => void;

/**
 * Adds a legend to a chart
 * @param g - D3 selection of the group element
 * @param labels - Array of labels for the legend
 * @param colors - Array of colors or a single color for the legend
 * @param position - Position of the legend
 * @param innerWidth - Inner width of the chart
 * @param innerHeight - Inner height of the chart
 * @param margin - Margins of the chart
 * @param fontSize - Font size for the legend
 * @param fontColor - Font color for the legend
 * @param gradientIds - Optional array of gradient IDs
 */
export declare const addLegend: (g: d3_2.Selection<SVGGElement, unknown, null, undefined>, labels: string[], colors: string | string[], position: "top" | "right" | "bottom" | "left", innerWidth: number, innerHeight: number, margin: Margin, fontSize: string, fontColor: string, gradientIds?: string[]) => void;

declare interface AxisProps {
    show?: boolean;
    label?: string;
    tickFormat?: (d: any) => string;
    stroke?: string;
    tickColor?: string;
    labelColor?: string;
    fontSize?: number;
    labelFontSize?: number;
    tickCount?: number;
}

/**
 * BarChart component for rendering bar charts
 */
export declare const BarChart: default_2.FC<BarChartProps>;

/**
 * @file types.ts
 * @description Type definitions for the BarChart component
 */
export declare type BarChartData = {
    label: string;
    value: number;
};

export declare type BarChartProps = {
    ariaLabel?: string;
    data: BarChartData[];
    width?: number;
    height?: number;
    color?: string | string[];
    gradientColors?: string[];
    margin?: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
    responsive?: boolean;
    showXAxis?: boolean;
    showYAxis?: boolean;
    showGridLines?: boolean;
    xAxisTextColor?: string;
    yAxisTextColor?: string;
    axisLineColor?: string;
    yAxisTicks?: number;
    tooltipBackgroundColor?: string;
    tooltipTextColor?: string;
    tooltipPadding?: string;
    tooltipBorderRadius?: string;
    tooltipFontSize?: string;
    showLegend?: boolean;
    legendPosition?: 'top' | 'right' | 'bottom' | 'left';
    legendFontSize?: string;
    legendFontColor?: string;
    legendLabels?: string[];
};

declare interface BubbleChartConfig {
    enabled?: boolean;
    minSize?: number;
    maxSize?: number;
    sizeScale?: 'linear' | 'sqrt' | 'log';
    valueField?: 'size' | string;
}

/**
 * Creates a gradient definition for a chart
 * @param svg - D3 selection of the SVG element
 * @param id - ID for the gradient
 * @param colors - Array of colors for the gradient
 * @param vertical - Whether the gradient should be vertical (true) or horizontal (false)
 */
export declare const createGradient: (svg: d3_2.Selection<SVGSVGElement, unknown, null, undefined>, id: string, colors: string[], vertical?: boolean) => void;

declare type Dimensions = {
    width: number;
    height: number;
};

/**
 * DonutChart component for rendering donut/pie charts
 */
export declare const DonutChart: default_2.FC<DonutChartProps>;

/**
 * @file types.ts
 * @description Type definitions for the DonutChart component
 */
export declare type DonutChartData = {
    label: string;
    value: number;
    color?: string;
    extraInfo?: React.ReactNode | string;
};

export declare type DonutChartProps = {
    data: DonutChartData[];
    width?: number;
    height?: number;
    innerRadius?: number;
    outerRadius?: number;
    innerRadiusRatio?: number;
    colors?: string[];
    margin?: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
    responsive?: boolean;
    showTooltip?: boolean;
    tooltipBackgroundColor?: string;
    tooltipTextColor?: string;
    tooltipPadding?: string;
    tooltipBorderRadius?: string;
    tooltipFontSize?: string;
    showLegend?: boolean;
    legendPosition?: 'top' | 'right' | 'bottom' | 'left';
    legendFontSize?: string;
    legendFontColor?: string;
    legendLabels?: string[];
    centerLabel?: string;
    centerValue?: string | number;
    centerIcon?: React.ReactNode;
    extraCenterInfo?: React.ReactNode;
    ariaLabel?: string;
    showHoverEffect?: boolean;
    onSliceClick?: (data: DonutChartData) => void;
    cornerRadius?: number;
    padAngle?: number;
    theme?: 'light' | 'dark';
    className?: string;
    style?: React.CSSProperties;
    enableGlow?: boolean;
    glowColor?: string;
    glowBlur?: number;
};

declare interface ErrorBarConfig {
    enabled?: boolean;
    color?: string;
    strokeWidth?: number;
    capWidth?: number;
    opacity?: number;
    xAxis?: boolean;
    yAxis?: boolean;
    showCaps?: boolean;
}

export declare const FunnelChart: default_2.FC<FunnelChartProps>;

export declare interface FunnelChartProps {
    data: FunnelData[];
    width?: number;
    height?: number;
    margin?: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
    showValues?: boolean;
    valueFormat?: (value: number) => string;
    onSliceClick?: (data: FunnelData) => void;
    className?: string;
    style?: React.CSSProperties;
    isDarkMode?: boolean;
    tooltipBackgroundColor?: string;
    tooltipTextColor?: string;
    tooltipPadding?: string;
    tooltipBorderRadius?: string;
    tooltipFontSize?: string;
    tooltipOffsetX?: number;
    tooltipOffsetY?: number;
    tooltipFormat?: (data: FunnelData) => string;
    showLegend?: boolean;
    legendPosition?: 'top' | 'bottom' | 'left' | 'right';
    legendTitle?: string;
    legendItemColor?: string;
    legendSwatchSize?: number;
    legendGap?: number;
    clickableLegend?: boolean;
    onLegendItemClick?: (data: FunnelData | null) => void;
    legendTitleColor?: string;
    legendTitleFontSize?: string;
    legendTitleFontFamily?: string;
    legendSwatchBorderWidth?: number;
    legendSwatchBorderColor?: string;
    enableGradients?: boolean;
    gradientDirection?: 'vertical' | 'horizontal';
    segmentShadowColor?: string;
    segmentShadowBlur?: number;
    segmentShadowOffsetX?: number;
    segmentShadowOffsetY?: number;
}

export declare interface FunnelData {
    label: string;
    value: number;
    color?: string;
}

export declare const GaugeDonutChart: default_2.FC<GaugeDonutChartProps>;

export declare type GaugeDonutChartProps = {
    data: GaugeDonutData[];
    width?: number;
    height?: number;
    variant?: 'full' | 'half-bottom' | 'half-top' | 'half-left' | 'half-right' | 'quarter-bottom-right' | 'quarter-top-right' | 'quarter-bottom-left' | 'quarter-top-left';
    centerLabel?: string;
    centerValue?: string | number;
    onSliceClick?: (data: GaugeDonutData) => void;
    colors?: string[];
    innerRadius?: number;
    outerRadius?: number;
    cornerRadius?: number;
    padAngle?: number;
    showLegend?: boolean;
    legendPosition?: 'top' | 'right' | 'bottom' | 'left';
    legendFontSize?: string;
    legendFontColor?: string;
    showTooltip?: boolean;
    tooltipBackgroundColor?: string;
    tooltipTextColor?: string;
    tooltipPadding?: string;
    tooltipBorderRadius?: string;
    tooltipFontSize?: string;
    theme?: 'light' | 'dark';
    className?: string;
    style?: React.CSSProperties;
    tooltipFormat?: (data: GaugeDonutData, total: number, percent: string) => string;
    enableGlow?: boolean;
    glowColor?: string;
    glowBlur?: number;
};

export declare type GaugeDonutData = {
    label: string;
    value: number;
    color?: string;
    gradient?: GradientStop[];
};

declare type GradientStop = {
    offset: string;
    color: string;
    opacity?: number;
};

declare interface GridProps {
    horizontal?: boolean;
    vertical?: boolean;
    stroke?: string;
    strokeWidth?: number;
    strokeDasharray?: string;
}

declare interface HistoricalData {
    timestamp: number;
    value: number;
}

export declare interface HoveredDataInfo {
    seriesName: string;
    axisLabel: string;
    value: number;
    x: number;
    y: number;
    tooltipX: number;
    tooltipY: number;
    color?: string;
}

declare type LegendPosition = 'top' | 'right' | 'bottom' | 'left';

/**
 * LineChart component for rendering line charts
 */
export declare const LineChart: default_2.FC<LineChartProps>;

/**
 * @file types.ts
 * @description Type definitions for the LineChart component
 */
export declare type LineChartDataPoint = {
    label: string | number;
    value: number;
};

export declare type LineChartProps = {
    ariaLabel?: string;
    data: LineChartSeries[];
    width?: number;
    height?: number;
    lineColors?: string | string[];
    areaColor?: string;
    pointColor?: string;
    margin?: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
    yAxisTicks?: number;
    showXAxis?: boolean;
    showYAxis?: boolean;
    showGridLines?: boolean;
    tooltipBackgroundColor?: string;
    tooltipTextColor?: string;
    tooltipPadding?: string;
    tooltipBorderRadius?: string;
    tooltipFontSize?: string;
    areaGradientColors?: string[];
    lineGradientColors?: string[];
    showArea?: boolean;
    responsive?: boolean;
    showLegend?: boolean;
    legendPosition?: 'top' | 'right' | 'bottom' | 'left';
    legendFontSize?: string;
    legendFontColor?: string;
    xAxisTextColor?: string;
    yAxisTextColor?: string;
    axisLineColor?: string;
};

export declare type LineChartSeries = {
    name: string;
    values: LineChartDataPoint[];
};

export declare type Margin = {
    top: number;
    right: number;
    bottom: number;
    left: number;
};

export declare const NestedDonutChart: default_2.FC<NestedDonutChartProps>;

export declare type NestedDonutChartProps = {
    levels: NestedDonutLevelData[];
    width?: number;
    height?: number;
    colors?: string[][];
    centerLabel?: string;
    centerValue?: string | number;
    onSliceClick?: (levelIndex: number, data: NestedDonutDataPoint) => void;
    showLegend?: boolean;
    legendPosition?: 'top' | 'right' | 'bottom' | 'left';
    theme?: 'light' | 'dark';
    className?: string;
    style?: React.CSSProperties;
    enableGlow?: boolean;
    glowColor?: string;
    glowBlur?: number;
    innerRadius?: number;
    outerRadius?: number;
    cornerRadius?: number;
    padAngle?: number;
    tooltipBackgroundColor?: string;
    tooltipTextColor?: string;
    tooltipPadding?: string;
    tooltipBorderRadius?: string;
    tooltipFontSize?: string;
};

export declare const NestedDonutChartRenderer: default_2.FC<NestedDonutChartRendererProps_2>;

export declare type NestedDonutChartRendererProps = NestedDonutChartProps;

declare interface NestedDonutChartRendererProps_2 extends NestedDonutChartProps {
    legendPosition?: 'top' | 'right' | 'bottom' | 'left';
    theme?: 'light' | 'dark';
    className?: string;
    style?: default_2.CSSProperties;
    enableGlow?: boolean;
    glowColor?: string;
    glowBlur?: number;
}

declare type NestedDonutDataPoint = {
    label: string;
    value: number;
    color?: string;
};

export declare type NestedDonutLevelData = NestedDonutDataPoint[];

export declare const RadarChart: default_2.FC<RadarChartProps>;

/**
 * @file types.ts
 * @description Type definitions for RadarChart component
 */
export declare interface RadarChartDataPoint {
    axis: string;
    value: number;
}

export declare interface RadarChartProps {
    data: RadarChartSeries[];
    size?: number;
    axesLabels: string[];
    maxValue?: number;
    levels?: number;
    className?: string;
    showGrid?: boolean;
    showAxesLabels?: boolean;
    showTooltips?: boolean;
    enableSeriesShadow?: boolean;
    seriesShadowColor?: string;
    seriesShadowBlur?: number;
    seriesShadowOffsetX?: number;
    seriesShadowOffsetY?: number;
    enableSeriesGlow?: boolean;
    seriesGlowColor?: string;
    seriesGlowBlur?: number;
    seriesGlowOffsetX?: number;
    seriesGlowOffsetY?: number;
    seriesGlowOpacity?: number;
    tooltipBackgroundColor?: string;
    tooltipTextColor?: string;
    tooltipPadding?: string;
    tooltipBorderRadius?: string;
    tooltipFontSize?: string;
    tooltipOffsetX?: number;
    tooltipOffsetY?: number;
    tooltipFormat?: (data: HoveredDataInfo) => string;
    showHoverPoints?: boolean;
    hoverPointRadius?: number;
    hoverPointFill?: string;
    hoverPointStroke?: string;
    hoverPointStrokeWidth?: number;
    gridStrokeColor?: string;
    gridStrokeWidth?: number;
    gridLevels?: number;
    gridLineStyle?: 'solid' | 'dashed' | 'dotted';
    axisLineColor?: string;
    axisLineWidth?: number;
    axisStrokeColor?: string;
    axisStrokeWidth?: number;
    showAxisLines?: boolean;
    axisLabelFontFamily?: string;
    axisLabelFontSize?: string;
    axisLabelColor?: string;
    axisLabelOffset?: number;
    seriesFillOpacity?: number;
    seriesStrokeWidth?: number;
    seriesHoverStrokeWidth?: number;
    seriesPointRadius?: number;
    seriesPointColor?: string;
    seriesPointStrokeColor?: string;
    seriesPointStrokeWidth?: number;
    hoverTargetRadius?: number;
    responsive?: boolean;
    showLegend?: boolean;
    legendPosition?: 'top' | 'bottom' | 'right' | 'left';
    legendTitle?: string;
    legendTitleColor?: string;
    legendTitleFontSize?: string;
    legendTitleFontFamily?: string;
    legendItemColor?: string;
    legendItemFontSize?: string;
    legendItemFontFamily?: string;
    legendSwatchSize?: number;
    legendSwatchBorderColor?: string;
    legendSwatchBorderWidth?: number;
    legendGap?: number;
    legendPadding?: string | number;
    clickableLegend?: boolean;
    selectedSeriesFillOpacity?: number;
    selectedSeriesStrokeWidth?: number;
    deselectedSeriesFillOpacity?: number;
    deselectedSeriesStrokeWidth?: number;
    onLegendItemClick?: (seriesName: string | null) => void;
}

export declare interface RadarChartSeries {
    name: string;
    dataPoints: RadarChartDataPoint[];
    color?: string;
}

export declare const RangeChart: default_2.FC<RangeChartProps>;

export declare interface RangeChartDataItem {
    day: string;
    range1: {
        min: number;
        max: number;
    };
    range2: {
        min: number;
        max: number;
    };
}

export declare interface RangeChartProps {
    data: RangeChartDataItem[];
    width?: number;
    height?: number;
    responsive?: boolean;
    color1?: string;
    color2?: string;
    margin?: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
    showXAxis?: boolean;
    showYAxis?: boolean;
    showGridLines?: boolean;
    xAxisTextColor?: string;
    yAxisTextColor?: string;
    axisLineColor?: string;
    yAxisTicks?: number;
}

/**
 * ScatterChart component for visualizing data points in a two-dimensional space.
 *
 * @component
 * @example
 * ```jsx
 * import { BasicScatterChart } from './ScatterChart.examples';
 *
 * <BasicScatterChart />
 * ```
 *
 * @example
 * ```jsx
 * import { ScatterChartWithFeatures } from './ScatterChart.examples';
 *
 * <ScatterChartWithFeatures />
 * ```
 *
 * @example
 * ```jsx
 * import { ScatterChartWithTrendLine } from './ScatterChart.examples';
 *
 * <ScatterChartWithTrendLine />
 * ```
 */
export declare const ScatterChart: FC<ScatterChartProps>;

export declare interface ScatterChartProps {
    data?: ScatterDataPoint[];
    series?: SeriesConfig[];
    width: number;
    height: number;
    colors?: string[] | Record<string, string>;
    style?: CSSProperties;
    className?: string;
    xAxis?: Partial<AxisProps>;
    yAxis?: Partial<AxisProps>;
    grid?: Partial<GridProps>;
    showLegend?: boolean;
    legendPosition?: LegendPosition;
    clickableLegend?: boolean;
    onLegendItemClick?: (category: string | null, seriesId?: string) => void;
    showTooltip?: boolean;
    tooltipFormat?: (data: ScatterHoveredData) => string;
    tooltipBackgroundColor?: string;
    tooltipTextColor?: string;
    tooltipPadding?: string;
    tooltipBorderRadius?: string;
    tooltipOffsetX?: number;
    tooltipOffsetY?: number;
    trendLine?: Partial<TrendLineProps>;
    pointSize?: number;
    bubbleChart?: Partial<BubbleChartConfig>;
    errorBars?: Partial<ErrorBarConfig>;
    visibleSeries?: Record<string, boolean>;
    onSeriesToggle?: (seriesId: string, visible: boolean) => void;
}

export declare interface ScatterDataPoint {
    x: number | Date;
    y: number;
    category: string;
    label?: string;
    size?: number;
    xError?: number | [number, number] | number[];
    yError?: number | [number, number] | number[];
}

export declare interface ScatterHoveredData extends ScatterDataPoint {
    eventX: number;
    eventY: number;
    seriesId?: string;
    seriesName?: string;
}

declare interface SegmentAnalytics {
    performance: {
        conversionRate: number;
        averageValue: number;
        peakValue: number;
        trend: TrendData;
    };
    contribution: {
        percentageOfTotal: number;
        relativeToPrevious: number;
    };
    correlation: {
        correlationScore: number;
        relatedSegments: Array<{
            segmentId: string;
            correlationValue: number;
        }>;
    };
}

export declare const SegmentedFunnelChart: default_2.FC<SegmentedFunnelChartProps>;

export declare interface SegmentedFunnelChartProps extends Omit<FunnelChartProps, 'data' | 'onSliceClick' | 'tooltipFormat'> {
    data: SegmentedFunnelStage[];
    onSliceClick?: (data: {
        stageLabel: string;
        segment: SegmentedFunnelSegment;
        totalStageValue: number;
    }) => void;
    tooltipSegmentFormat?: (data: {
        stageLabel: string;
        segment: SegmentedFunnelSegment;
        totalStageValue: number;
    }) => string;
    showTrendIndicators?: boolean;
    showMiniCharts?: boolean;
    showAnalytics?: boolean;
    miniChartHeight?: number;
    trendIndicatorSize?: number;
    analyticsDisplayMode?: 'tooltip' | 'inline' | 'both';
}

export declare interface SegmentedFunnelSegment {
    channel: string;
    value: number;
    color?: string;
    trend?: TrendData;
    historicalData?: HistoricalData[];
    analytics?: SegmentAnalytics;
}

export declare interface SegmentedFunnelStage {
    label: string;
    segments: SegmentedFunnelSegment[];
}

export declare interface SeriesConfig {
    id: string;
    data: ScatterDataPoint[];
    name?: string;
    colors?: string[] | Record<string, string>;
    pointSize?: number;
    bubbleChart?: Partial<BubbleChartConfig>;
    errorBars?: Partial<ErrorBarConfig>;
    trendLine?: Partial<TrendLineProps>;
    visible?: boolean;
}

/**
 * StackedBarChart component for rendering stacked bar charts
 */
export declare const StackedBarChart: default_2.FC<StackedBarChartProps>;

/**
 * @file types.ts
 * @description Type definitions for StackedBarChart component
 */
declare type StackedBarChartData = {
    [key: string]: number | string;
};

export declare type StackedBarChartProps = {
    data: StackedBarChartData[];
    keys: string[];
    indexBy: string;
    width?: number;
    height?: number;
    layout?: 'vertical' | 'horizontal';
    margin?: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
    colors?: string[];
    showGridLines?: boolean;
    ariaLabel?: string;
    responsive?: boolean;
    showLegend?: boolean;
    legendPosition?: 'top' | 'right' | 'bottom' | 'left';
    legendFontSize?: string;
    legendFontColor?: string;
    showXAxis?: boolean;
    showYAxis?: boolean;
    xAxisTextColor?: string;
    yAxisTextColor?: string;
    axisLineColor?: string;
    yAxisTicks?: number;
    tooltipBackgroundColor?: string;
    tooltipTextColor?: string;
    tooltipPadding?: string;
    tooltipBorderRadius?: string;
    tooltipFontSize?: string;
    barCornerRadius?: number;
    showValues?: boolean;
    valuesFontSize?: string;
    valuesFontColor?: string;
    barOpacity?: number;
    animationDuration?: number;
    visibleKeys?: string[];
    setVisibleKeys?: React.Dispatch<React.SetStateAction<string[]>>;
    tooltipComponent?: React.ComponentType<{
        data: {
            id: string;
            value: number;
            indexValue: string;
        };
        color: string;
    }>;
};

export declare const TimeSeriesFunnelChart: default_2.FC<TimeSeriesFunnelChartProps>;

export declare interface TimeSeriesFunnelChartProps extends Omit<FunnelChartProps, 'data'> {
    seriesData: TimeSeriesFunnelData[];
    chartWidth?: number;
    chartHeight?: number;
    spacing?: number;
    chartTitleColor?: string;
    chartTitleFontSize?: string;
    chartTitleFontFamily?: string;
}

export declare interface TimeSeriesFunnelData {
    periodLabel: string;
    data: FunnelData[];
}

declare interface TooltipStyles {
    backgroundColor: string;
    textColor: string;
    padding: string;
    borderRadius: string;
    fontSize: string;
    boxShadow?: string;
    zIndex?: number;
}

declare interface TrendData {
    value: number;
    previousValue: number;
    change: number;
    changePercentage: number;
}

declare interface TrendLineProps {
    show?: boolean;
    color?: string;
    strokeWidth?: number;
    strokeDasharray?: string;
}

/**
 * Custom hook to handle responsive chart dimensions
 * @param containerRef - Reference to the container element
 * @param initialWidth - Initial width of the chart
 * @param initialHeight - Initial height of the chart
 * @param responsive - Whether the chart should be responsive
 * @returns Current dimensions of the chart
 */
export declare const useChartDimensions: (containerRef: RefObject<HTMLDivElement>, initialWidth: number, initialHeight: number, responsive: boolean) => Dimensions;

/**
 * Custom hook to handle chart tooltips
 * @param tooltipRef - Reference to the tooltip element
 * @param styles - Tooltip styles
 * @returns Functions to show and hide the tooltip
 */
export declare const useTooltip: (tooltipRef: RefObject<HTMLDivElement>, styles: TooltipStyles) => {
    showTooltip: (content: string, x: number, y: number, offsetX?: number, offsetY?: number) => void;
    hideTooltip: () => void;
    applyTooltipStyles: () => void;
};

export { }