@qn-pandora/pandora-visualization/lib/constants/theme-interface.d.ts

Pandora 通用可视化库

import { MapboxThemeTypes } from '../components/Base/Mapbox/mapThemeStyle/constant';
declare type EFontWeigth = number | 'normal' | 'bold' | '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset' | 'bolder' | 'lighter' | undefined;
export declare enum EThemeTypes {
    Light = "light",
    Dark = "dark",
    EleganceGreen = "eleganceGreen"
}
export declare enum EShape {
    line = "line",
    circle = "circle",
    square = "square"
}
export interface IThemeForJS {
    dashboardColor: string;
    dashboardBGColor: string;
    dashboardBlockBgColor: string;
    layoutBorderColor: string;
    titlebarColor: string;
}
export declare type TThemeForJSMap = {
    [key in EThemeTypes]: IThemeForJS;
};
export declare const themeOptions: EThemeTypes[];
export declare enum EPandoraThemeTypes {
    Light = "pandora-light",
    Dark = "pandora-dark",
    EleganceGreen = "pandora-eleganceGreen"
}
export declare const initialTheme = EThemeTypes.Light;
export interface ILegendTheme {
    textStyle: {
        color: string;
    };
    inactiveColor?: string;
}
export interface ITableTheme {
    tableTitle: {
        fontFamily: string;
        fontWeight: EFontWeigth;
        fontSize: number;
        color: string;
        backgroundColor: string;
    };
    backgroundColor: string;
    color: string;
    rowBackgroundColor: string;
    border: {
        color: string;
        width: number;
        type: string;
        show: false;
        fontSize?: number;
    };
}
export interface IEchartsTheme {
    color: any;
    twodColor: string[];
    backgroundColor?: string;
    textStyle?: {
        fontFamily?: string;
        fontSize?: number;
    };
    title?: {
        textStyle?: {
            color?: string;
        };
        subtextStyle?: {
            color?: string;
        };
    };
    line: {
        itemStyle?: {
            borderColor?: string;
            borderWidth?: number;
        };
        lineStyle?: {
            width?: number;
        };
        markLine?: {
            lineStyle?: {
                type?: string;
            };
        };
        showAllSymbol?: boolean;
        symbolSize?: number;
        symbol: EShape;
        smooth?: boolean;
        showSymbol?: boolean;
    };
    bar?: {
        color?: string[];
        symbol?: EShape;
    };
    pie?: {
        itemStyle?: {
            borderColor: string;
        };
        label?: {
            color: string;
        };
    };
    radar?: {
        color?: string[];
        splitNumber?: number;
        splitArea?: {
            show?: boolean;
        };
        axisLine?: {
            lineStyle?: {
                width?: number;
                color?: string[];
            };
        };
        splitLine?: {
            show?: boolean;
            lineStyle?: {
                width?: number;
                type?: string;
                color?: string[];
            };
        };
        shape?: string;
        lineStyle?: {
            width?: number;
        };
        areaStyle?: {
            opacity?: number;
        };
        name?: {
            textStyle?: {
                color?: string;
                fontSize?: number;
            };
        };
        symbolSize?: number;
        symbol?: string;
        smooth?: boolean;
    };
    sankey?: {
        color?: string[];
        grid?: {
            width?: string | number;
            left?: string | number;
        };
        label?: {
            color?: string;
            fontSize?: number;
        };
        itemStyle?: {
            borderWidth?: number;
            width?: number;
        };
        lineStyle?: {
            opacity?: number;
        };
        emphasis?: {
            itemStyle?: {
                borderWidth?: number;
            };
        };
    };
    gauge: {
        title: {
            color: string;
            fontSize: number;
            fontWeight: EFontWeigth;
            fontFamily?: string;
            offsetCenter?: number[];
        };
        detail: {
            color: string;
            fontSize: number;
            fontWeight: EFontWeigth;
            fontFamily: string;
            offsetCenter: number[];
        };
        axisTick?: {
            lineStyle?: {
                color?: string;
                width?: number;
            };
            length?: number;
        };
        axisLabel?: {
            color?: string;
            fontSize?: number;
        };
        splitLine?: {
            length?: number;
            lineStyle?: {
                color?: string;
                width?: number;
            };
        };
        splitNumber?: number;
        axisLine: {
            lineStyle: {
                width: number;
            };
        };
    };
    graph?: {
        itemStyle?: {
            borderWidth?: number;
            color?: string;
        };
        lineStyle?: {
            width?: number;
            curveness?: number;
        };
        symbolSize?: number;
        symbol?: string;
        smooth?: false;
        label?: {
            show?: true;
            color?: string;
            fontSize?: number;
            position?: string;
        };
        emphasis?: {
            label?: {
                color?: string;
                fontSize?: number;
            };
        };
    };
    sunburst?: {
        itemStyle?: {
            borderWidth?: number;
            borderColor?: string;
        };
        radius?: string[];
        label?: {
            rotate?: string;
            align?: string;
            padding?: number;
            silent?: false;
            color?: string;
            show?: true;
            fontSize?: number;
        };
    };
    map?: {
        label?: {
            color: string;
        };
        itemStyle?: {
            areaColor?: string;
            borderColor?: string;
            borderWidth?: number;
        };
        emphasis?: {
            itemStyle?: {
                areaColor?: string;
                borderColor?: string;
                borderWidth?: number;
            };
            label?: {
                color?: string;
            };
        };
    };
    geo?: {
        itemStyle?: {
            areaColor?: string;
            borderColor?: string;
            borderWidth?: number;
        };
        label?: {
            color?: string;
        };
        emphasis?: {
            itemStyle?: {
                color?: string;
            };
            label?: {
                color?: string;
            };
        };
    };
    scatter?: {
        itemStyle?: {
            borderWidth?: number;
            borderColor?: string;
            color?: string;
            shadowBlur?: number;
            shadowColor?: string;
        };
        label?: {
            color?: string;
            position?: string;
        };
        emphasis?: {
            itemStyle?: {
                borderWidth?: number;
                borderColor?: string;
                color?: string;
                shadowColor?: string;
            };
            label?: {
                color?: string;
                position?: string;
            };
        };
        thresholdColor: string[];
    };
    effectScatter?: {
        itemStyle?: {
            borderWidth?: number;
            borderColor?: string;
            color?: string;
            shadowBlur?: number;
            shadowColor?: string;
        };
        label?: {
            color?: string;
            position?: string;
        };
        emphasis?: {
            itemStyle?: {
                borderWidth?: number;
                borderColor?: string;
                color?: string;
                shadowColor?: string;
            };
            label?: {
                color?: string;
                position?: string;
            };
        };
    };
    categoryAxis?: {
        triggerEvent?: boolean;
        nameLocation?: string;
        nameTextStyle?: {
            color?: string;
            fontSize?: number;
        };
        axisLine?: {
            show?: boolean;
            lineStyle?: {
                color?: string;
                type?: string;
            };
        };
        axisTick?: {
            show?: boolean;
            lineStyle?: {
                color?: string;
            };
        };
        axisLabel?: {
            show?: boolean;
            textStyle?: {
                color?: string;
                fontFamily?: string;
                fontSize?: number;
                fontWeight?: EFontWeigth;
            };
        };
        splitLine?: {
            show?: boolean;
        };
        splitArea?: {
            show?: boolean;
            areaStyle?: {
                color?: string[];
            };
        };
    };
    valueAxis?: {
        triggerEvent?: boolean;
        nameLocation?: string;
        scale?: boolean;
        nameTextStyle?: {
            color?: string;
            fontSize?: number;
        };
        axisLine?: {
            show?: boolean;
        };
        axisTick?: {
            show?: boolean;
            lineStyle?: {
                color?: string;
            };
        };
        axisLabel?: {
            show?: boolean;
            textStyle?: {
                color?: string;
                fontFamily?: string;
                fontSize?: number;
                fontWeight?: EFontWeigth;
            };
        };
        splitLine?: {
            show?: boolean;
            lineStyle?: {
                color?: string;
                type?: string;
            };
        };
        splitArea?: {
            show?: boolean;
            areaStyle?: {
                color?: string[];
            };
        };
    };
    logAxis?: {
        triggerEvent?: boolean;
        nameLocation?: string;
        nameTextStyle?: {
            color?: string;
            fontSize?: number;
        };
        axisLine?: {
            show?: boolean;
            lineStyle?: {
                color?: string;
                type?: string;
            };
        };
        axisTick?: {
            show?: boolean;
            lineStyle?: {
                color?: string;
            };
        };
        axisLabel?: {
            show?: boolean;
            textStyle?: {
                color?: string;
                fontFamily?: string;
                fontSize?: number;
                fontWeight?: EFontWeigth;
            };
        };
        splitLine?: {
            show?: boolean;
        };
        splitArea?: {
            show?: boolean;
            areaStyle?: {
                color?: string[];
            };
        };
    };
    timeAxis?: {
        triggerEvent?: boolean;
        nameLocation?: string;
        nameTextStyle?: {
            color?: string;
            fontSize?: number;
        };
        axisLine?: {
            show?: boolean;
            lineStyle?: {
                color?: string;
                type?: string;
            };
        };
        axisTick?: {
            show?: boolean;
            lineStyle?: {
                color?: string;
            };
        };
        axisLabel?: {
            show?: boolean;
            textStyle?: {
                color?: string;
                fontFamily?: string;
                fontSize?: number;
                fontWeight?: EFontWeigth;
            };
        };
        splitLine?: {
            show?: boolean;
        };
        splitArea?: {
            show?: boolean;
            areaStyle?: {
                color?: string[];
            };
        };
    };
    tooltip?: {
        trigger?: string;
        enterable?: boolean;
        confine?: boolean;
        extraCssText?: string;
        backgroundColor?: string;
        borderColor?: string;
        opacity?: number;
        textStyle?: {
            color?: string;
        };
        axisPointer?: {
            lineStyle?: {
                color?: string;
                width?: number;
            };
            shadowStyle?: {
                color?: string;
            };
            label?: {
                color?: string;
                fontSize?: number;
                fontFamily?: string;
                backgroundColor?: string;
                shadowColor?: string;
                shadowOffsetY?: number;
                shadowBlur?: number;
            };
            crossStyle?: {
                color?: string;
                type?: string;
            };
        };
    };
    visualMap?: {
        color?: string[];
        textStyle?: {
            color?: string;
            fontSize?: number;
        };
        itemWidth?: number;
        itemHeight?: number;
    };
    toolbox?: {
        emphasis?: {
            iconStyle?: {
                borderColor?: string;
            };
        };
    };
}
export interface ICustomerTheme {
    line: {
        thresholdColor: string[];
        outlier?: {
            errorColor?: string;
        };
    };
    bar: {
        color?: string[];
        thresholdColor: string[];
        capsuleBar?: {
            backgroundBarColor?: string;
        };
    };
    pie?: {
        basic?: {
            borderWidth?: number;
        };
        ring?: {
            borderWidth?: number;
        };
        rose?: {
            borderWidth?: number;
        };
        color?: string[];
    };
    gauge: {
        axisLineBackgroundColor: string;
        singleValue: {
            backgroundColors: string;
            color?: string[];
            titleStyle: {
                fontSize: number;
                fontFamily?: string;
                fontWeight: EFontWeigth;
                inverseColor: string;
            };
            trendNumberStyle?: {
                fontSize?: number;
                fontFamily?: string;
                fontWeight?: EFontWeigth;
                color?: string;
            };
            prefixStyle: {
                fontSize: number;
                fontFamily?: string;
                fontWeight?: EFontWeigth;
                color: string;
            };
            suffixStyle: {
                fontSize: number;
                fontFamily?: string;
                fontWeight?: EFontWeigth;
                color: string;
            };
            upIconStyle: {
                color?: string;
                type: string;
            };
            downIconStyle: {
                color?: string;
                type: string;
            };
            equalIconStyle: {
                color?: string;
                type: string;
            };
        };
        singleGauge?: {
            color?: string[];
            radiusRatio?: number;
        };
        singlePercent?: {
            color?: string[];
        };
    };
    sunburst?: {
        color?: string[][];
    };
    effectScatter: {
        color?: string[];
        selectColors: string[];
    };
    timeline?: {
        chartBackGround?: string;
        eventBackGround?: string;
        fontColor?: string;
    };
    themeColor?: string;
    cssColor?: {
        backgroundColor?: string;
    };
    legend: ILegendTheme;
    statusPanel: {
        color?: string[];
        inverseBgColor: string;
        inverseColor: string;
        title?: {
            fontSize?: number;
            lineHeight?: number;
        };
        itemStyle?: {
            width?: number;
            height?: number;
            fontSize?: number;
            fontColor?: string;
            lineHeight?: number;
            color?: string;
        };
        borderStyle: {
            color: string;
            width: number;
            radius: number;
        };
    };
    mapbox: {
        bubbleStyle?: {
            color?: string;
            minSize: number;
            maxSize: number;
        };
        lineStyle?: {
            color?: string;
            width: number;
            bubbleSize: number;
        };
        theme: MapboxThemeTypes;
    };
    table: ITableTheme;
    thresholdColors: string[];
    cssVariable: {
        '--themeColor'?: string;
        '--selectPopoverHoverColor'?: string;
        '--scrollBarColor'?: string;
        '--dashbordDashColor'?: string;
        '--dashboardBg'?: string;
        '--dashboardBlockBg'?: string;
        '--operationBarTitleColor'?: string;
        '--dashboardBorderCorder'?: string;
        '--dashboardColor'?: string;
        '--layoutDeleteBarBg'?: string;
        '--variableIconColor'?: string;
        '--dashboardDisableColor': string;
        '--dashboardDisableBack': string;
        '--selectionChoiceBg'?: string;
        '--titlebarColor'?: string;
        '--timeRangeColor'?: string;
        '--tooltipBgColor'?: string;
        '--nodataIconShadow'?: string;
        '--nodataIconPath'?: string;
        '--nodataIconBoxFill'?: string;
        '--nodataDescColor': string;
        '--legendTitleheader'?: string;
        '--legendItemvalue'?: string;
        '--legendSorter'?: string;
        '--paginationBorderColor'?: string;
        '--paginationColor'?: string;
        '--evenRowBg'?: string;
        '--subTableTitleBg'?: string;
        '--tableBorder'?: string;
        '--timelineBorderColor'?: string;
        '--timelineHeadBackgroundColor'?: string;
        '--timelineBackgroundColor'?: string;
        '--timelineColor'?: string;
        '--timelineItemColor'?: string;
        '--timelineItemBackgroundColor'?: string;
        '--carouselBtnBgActive'?: string;
        '--carouselBtnBg'?: string;
        '--splEditorKeyword'?: string;
        '--splEditorSplKeyword'?: string;
        '--splEditorStr'?: string;
        '--splEditorVar'?: string;
        '--splEditorFunc'?: string;
        '--splEditorNormal'?: string;
        '--splEditorCursor'?: string;
    };
}
export declare type TThemeOption = IEchartsTheme & ICustomerTheme;
export {};