zz-chart/lib/types/options.d.ts

Alauda Chart components by Alauda Frontend Team

/// <reference types="react" resolution-mode="require"/>
/// <reference types="web" />
import uPlot, { Padding as UPadding } from 'uplot';
import { AdjustOption } from '../components/shape/bar.js';
import { SizeCallback } from '../components/shape/point.js';
import { TooltipValue } from './component.js';
import { Theme } from './index.js';
export declare type Padding = UPadding;
export interface ChartOption {
    container: string | HTMLElement;
    data?: Data;
    autoFit?: boolean;
    width?: number;
    height?: number;
    padding?: Padding;
    defaultInteractions?: string[];
    options?: Options;
    /** 主题 */
    theme?: Theme;
}
export interface ViewOption {
    readonly ele: HTMLElement;
    readonly chartEle: HTMLElement;
    readonly chartOption: ChartOption;
    width?: number;
    height?: number;
    padding?: Padding;
    data?: Data;
    options?: Options;
    defaultInteractions: string[];
    /** 主题 */
    theme?: Theme;
}
export interface Options {
    readonly padding?: Padding;
    readonly data?: Data;
    title?: TitleOption;
    legend?: LegendOption;
    tooltip?: TooltipOption;
    annotation?: AnnotationOption;
    scale?: {
        x?: ScaleOption;
        y?: ScaleOption;
    };
    axis?: {
        x?: AxisOption;
        y?: AxisOption;
    };
    coordinate?: CoordinateOption;
    line?: LineShapeOption;
    area?: AreaShapeOption;
    bar?: BarShapeOption;
    point?: PointShapeOption;
    gauge?: GaugeShapeOption;
}
export declare type Data = DataItem[];
export interface DataItem {
    name: string;
    id?: string;
    color?: string;
    value?: number;
    values?: Array<{
        x: any;
        y: number;
        size?: number;
    }>;
}
export declare type TitleOption = TitleOpt | false;
export interface TitleOpt {
    custom?: boolean;
    text?: string;
    formatter?: string | ((text: string) => string);
}
export declare type LegendOption = LegendOpt | boolean;
export declare type LegendPosition = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
export interface LegendOpt {
    custom?: boolean;
    position?: LegendPosition;
}
export interface ScaleOption {
    time?: boolean;
    min?: number;
    max?: number;
}
export declare type CoordinateOption = CoordinateOpt | boolean;
export interface CoordinateOpt {
    transposed?: boolean;
}
export declare type AxisOption = AxisOpt | boolean;
export interface AxisOpt {
    show?: boolean;
    autoSize?: boolean;
    formatter?: string | ((value: string | number, uPlotParams?: unknown) => string);
}
export declare type TooltipOption = TooltipOpt | boolean;
export interface TooltipOpt {
    showTitle?: boolean;
    popupContainer?: HTMLElement;
    titleFormatter?: string | ((title: string, values: TooltipValue[]) => string);
    nameFormatter?: string | ((name: string, data?: TooltipValue) => string);
    valueFormatter?: string | ((value: number, data?: TooltipValue) => string);
    itemFormatter?: (value: TooltipValue[]) => string | TooltipValue[] | Element;
    sort?: (a: TooltipValue, b: TooltipValue) => number;
}
export interface ShapeOption extends uPlot.Series {
    name?: string;
    connectNulls?: boolean;
    width?: number;
    alpha?: number;
    map?: string;
}
export interface LineShapeOption extends ShapeOption {
    step?: 'start' | 'end';
}
export interface AreaShapeOption extends ShapeOption {
}
export interface BarShapeOption extends ShapeOption {
    adjust?: AdjustOption;
}
export interface PointShapeOption extends ShapeOption {
    pointSize?: number;
    sizeField?: string;
    sizeCallback?: SizeCallback;
}
export interface PieShapeOption {
    innerRadius?: number;
    outerRadius?: number;
    startAngle?: number;
    endAngle?: number;
    padAngle?: number;
    label?: {
        text?: string | ((value: number, total?: number) => string);
        description?: string | ((data: Data) => string);
        position?: {
            x?: number;
            y?: number;
        };
    };
    labelLine?: {
        labels?: Array<'name' | 'value' | 'percent'>;
        show?: boolean;
        formatter?: string | ((name: string, value: number, percent: number) => string);
    };
    total?: number;
    backgroundColor?: string;
    itemStyle?: {
        borderRadius?: number;
        borderWidth?: number;
    };
    innerDisc?: boolean;
}
export interface GaugeShapeOption {
    innerRadius?: number;
    outerRadius?: number;
    max?: number;
    colors?: Array<[number, string]>;
    label?: {
        text?: string | ((data: Data, total?: number) => string);
        description?: string | ((data: Data) => string);
        position?: {
            x?: number;
            y?: number;
        };
        textStyle?: {
            color?: string;
        };
        descriptionStyle?: {
            color?: string;
        };
    };
    text?: {
        show?: boolean;
        size?: number;
        color?: string | ((value: number) => string);
    };
}
export declare type ShapeOptions = LineShapeOption | AreaShapeOption | BarShapeOption | PointShapeOption;
export interface AnnotationOption {
    lineX?: AnnotationLineOption;
    areaX?: AnnotationLineOption;
    lineY?: AnnotationLineOption[];
    areaY?: AnnotationLineOption[];
}
export interface AnnotationLineOption {
    data: string | number;
    text?: {
        position?: 'left' | 'right' | string;
        content: unknown;
        style?: object;
        border?: {
            style?: string;
            padding?: [number, number];
        };
    };
    style?: {
        line?: boolean;
        stroke?: string;
        width?: number;
        lineDash?: [number, number];
    };
}