pagamio-frontend-commons-lib/lib/dashboard-visuals/utils/chartOptions.d.ts

Pagamio library for Frontend reusable components like the form engine and table container

import type { MetricData } from '../types';
interface ChartBarOptions {
    title?: string;
    colorScheme?: string[];
    yAxisDataNameKey: string;
    xAxisNameKey: string;
    xAxisLabel?: string;
    yAxisLabel?: string;
    chartToolTip?: any;
}
interface GroupedChartOptions {
    xAxisLabel: string;
    xAxisValueKey: string;
    rightYAxisValueKey: string;
    leftYAxisValueKey: string;
    chartToolTip?: any;
    data: MetricData[];
    yAxisLabelFormatter?: (value: number) => string;
}
interface GetLineGraphOptionsProp {
    title: string;
    yAxisLabel: string;
    chartToolTip?: any;
    data: MetricData[];
    yAxisLabelFormatter?: (value: number) => string;
}
interface GetDonutChartOptionsProps {
    data: {
        legendData: any[];
        seriesData: Record<string, any>[];
    };
}
interface LargeDatasetChartOptions extends GetDonutChartOptionsProps {
    labelFormatter?: (params: any) => string;
    tooltipFormatter?: any;
}
export interface CreateDistributionMetricOptionsProps {
    distributionChartTooltip: {
        tooltipValueFormat: string;
        tooltipTitle: string;
        tooltipUnit: string;
        treeMapSegmentLabel: string;
    };
    distributionData: any[];
    processedTooltipFields: any[];
    xAxisDataValueKey: string;
    seriesDataValueKey: string;
    displaySymbol?: string;
}
export declare const createDistributionMetricOptions: ({ distributionChartTooltip, distributionData, processedTooltipFields, xAxisDataValueKey, seriesDataValueKey, displaySymbol, }: CreateDistributionMetricOptionsProps) => {
    tooltip: {
        trigger: string;
        formatter: any;
    };
    toolbox: {
        show: boolean;
        feature: {
            dataView: {
                show: boolean;
                title: string;
                readOnly: boolean;
                lang: string[];
            };
            saveAsImage: {
                show: boolean;
                title: string;
            };
        };
        right: string;
        top: number;
    };
    grid: {
        left: string;
        right: string;
        bottom: string;
        containLabel: boolean;
    };
    series: {
        type: string;
        data: Record<string, any>[];
        label: {
            show: boolean;
            formatter: ((params: any) => string) | undefined;
            position: string;
        };
        breadcrumb: {
            show: boolean;
        };
        roam: string;
        nodeClick: boolean;
        animation: boolean;
        height: string;
        itemStyle: {
            borderColor: string;
            borderWidth: number;
            gapWidth: number;
        };
        emphasis: {
            itemStyle: {
                shadowBlur: number;
                shadowOffsetX: number;
                shadowColor: string;
            };
        };
        levels: {
            itemStyle: {
                borderColor: string;
                borderWidth: number;
                gapWidth: number;
            };
            upperLabel: {
                show: boolean;
            };
        }[];
    }[];
    dataZoom: {
        type: string;
        show: boolean;
        start: number;
        end: number;
        height: number;
        bottom: number;
        left: string;
        right: string;
        zoomLock: boolean;
        showDetail: boolean;
        borderColor: string;
        borderRadius: number;
        backgroundColor: string;
        fillerColor: string;
        handleIcon: string;
        handleSize: string;
        handleStyle: {
            color: string;
            shadowBlur: number;
            shadowColor: string;
            shadowOffsetX: number;
            shadowOffsetY: number;
        };
    }[];
};
export declare const getGroupedChartOptions: ({ xAxisLabel, xAxisValueKey, rightYAxisValueKey, leftYAxisValueKey, chartToolTip, data, yAxisLabelFormatter, }: GroupedChartOptions) => {
    tooltip: any;
    legend: {
        data: string[];
        top: number;
        textStyle: {
            fontSize: number;
        };
    };
    grid: {
        left: string;
        right: string;
        bottom: string;
        containLabel: boolean;
    };
    xAxis: {
        type: string;
        name: string;
        data: any[];
        axisLabel: {
            interval: number;
            rotate: number;
        };
    };
    yAxis: ({
        type: string;
        name: string;
        position: string;
        axisLine: {
            show: boolean;
            lineStyle: {
                color: string;
            };
        };
        axisLabel: {
            formatter: (value: number) => string;
        };
    } | {
        type: string;
        name: string;
        position: string;
        axisLine: {
            show: boolean;
            lineStyle: {
                color: string;
            };
        };
        axisLabel?: undefined;
    })[];
    series: ({
        name: string;
        type: string;
        data: any[];
        itemStyle: {
            color: string;
        };
        yAxisIndex?: undefined;
    } | {
        name: string;
        type: string;
        yAxisIndex: number;
        data: any[];
        itemStyle: {
            color: string;
        };
    })[];
    dataZoom: {
        type: string;
        start: number;
        end: number;
    }[];
    responsive: boolean;
    maintainAspectRatio: boolean;
};
export declare const getLineGraphOptions: ({ title, yAxisLabel, chartToolTip, data, yAxisLabelFormatter, }: GetLineGraphOptionsProp) => {
    tooltip?: undefined;
    legend?: undefined;
    grid?: undefined;
    xAxis?: undefined;
    yAxis?: undefined;
    series?: undefined;
} | {
    tooltip: any;
    legend: {
        data: any[];
        bottom: number;
    };
    grid: {
        left: string;
        right: string;
        bottom: string;
        top: string;
        containLabel: boolean;
    };
    xAxis: {
        type: string;
        axisLabel: {
            formatter: (value: number) => string;
            name: string;
            hideOverlap: boolean;
        };
        splitLine: {
            show: boolean;
        };
    };
    yAxis: {
        type: string;
        name: string;
        axisLabel: {
            formatter: (value: number) => string;
        };
    };
    series: {
        type: string;
        name: any;
        data: any;
        showSymbol: boolean;
    }[];
};
export declare const getChartBarOptions: ({ title, colorScheme, yAxisDataNameKey, xAxisNameKey, xAxisLabel, yAxisLabel, chartToolTip, data, }: ChartBarOptions & {
    data: MetricData[];
}) => {
    tooltip: any;
    grid: {
        left: string;
        right: string;
        bottom: string;
        top: string;
        containLabel: boolean;
    };
    xAxis: {
        type: string;
        name: string;
        axisLine: {
            show: boolean;
        };
        axisTick: {
            show: boolean;
        };
        splitLine: {
            show: boolean;
            lineStyle: {
                color: string;
            };
        };
    };
    yAxis: {
        type: string;
        name: string;
        data: any[];
        axisLabel: {
            formatter: (value: string) => string;
        };
    };
    series: {
        name: string;
        type: string;
        data: any[];
        itemStyle: {
            color: {
                type: string;
                x: number;
                y: number;
                x2: number;
                y2: number;
                colorStops: {
                    offset: number;
                    color: string;
                }[];
            };
        };
        barWidth: string;
        emphasis: {
            itemStyle: {
                opacity: number;
            };
        };
    }[];
    aria: {
        enabled: boolean;
    };
    animation: boolean;
    animationDuration: number;
    animationEasing: string;
};
export declare const getDonutChartOptions: ({ data }: GetDonutChartOptionsProps) => {
    tooltip: {
        trigger: string;
        formatter: string;
    };
    legend: {
        orient: string;
        bottom: number;
        left: string;
    };
    series: {
        name: string;
        type: string;
        radius: string[];
        avoidLabelOverlap: boolean;
        itemStyle: {
            borderRadius: number;
            borderColor: string;
            borderWidth: number;
        };
        label: {
            show: boolean;
            position: string;
            formatter: string;
            fontSize: number;
            lineHeight: number;
            rich: {
                b: {
                    fontSize: number;
                    lineHeight: number;
                };
            };
        };
        labelLine: {
            show: boolean;
            length: number;
            length2: number;
        };
        emphasis: {
            label: {
                show: boolean;
                fontSize: number;
                fontWeight: string;
            };
            itemStyle: {
                shadowBlur: number;
                shadowOffsetX: number;
                shadowColor: string;
            };
        };
        data: {
            legendData: any[];
            seriesData: Record<string, any>[];
        };
    }[];
};
export declare const formatChartLabel: (params: {
    name: string;
    value: number;
    valueLabel: string;
    treeMapPercent?: number;
}) => string;
export declare const getLargeDatasetChartOptions: ({ data, labelFormatter, tooltipFormatter }: LargeDatasetChartOptions) => {
    tooltip: {
        trigger: string;
        formatter: any;
    };
    toolbox: {
        show: boolean;
        feature: {
            dataView: {
                show: boolean;
                title: string;
                readOnly: boolean;
                lang: string[];
            };
            saveAsImage: {
                show: boolean;
                title: string;
            };
        };
        right: string;
        top: number;
    };
    grid: {
        left: string;
        right: string;
        bottom: string;
        containLabel: boolean;
    };
    series: {
        type: string;
        data: Record<string, any>[];
        label: {
            show: boolean;
            formatter: ((params: any) => string) | undefined;
            position: string;
        };
        breadcrumb: {
            show: boolean;
        };
        roam: string;
        nodeClick: boolean;
        animation: boolean;
        height: string;
        itemStyle: {
            borderColor: string;
            borderWidth: number;
            gapWidth: number;
        };
        emphasis: {
            itemStyle: {
                shadowBlur: number;
                shadowOffsetX: number;
                shadowColor: string;
            };
        };
        levels: {
            itemStyle: {
                borderColor: string;
                borderWidth: number;
                gapWidth: number;
            };
            upperLabel: {
                show: boolean;
            };
        }[];
    }[];
    dataZoom: {
        type: string;
        show: boolean;
        start: number;
        end: number;
        height: number;
        bottom: number;
        left: string;
        right: string;
        zoomLock: boolean;
        showDetail: boolean;
        borderColor: string;
        borderRadius: number;
        backgroundColor: string;
        fillerColor: string;
        handleIcon: string;
        handleSize: string;
        handleStyle: {
            color: string;
            shadowBlur: number;
            shadowColor: string;
            shadowOffsetX: number;
            shadowOffsetY: number;
        };
    }[];
};
export {};