@qn-pandora/pandora-visualization/lib/components/Charts/Honeycomb/core/index.d.ts

Pandora 通用可视化库

import * as d3 from 'd3';
import { ILine } from './LineChartCore';
/**
 * 图表布局设置，支持数字或百分数 (50 | '2%')
 */
export interface IChartMargin {
    top: string | number;
    left: string | number;
    right: string | number;
    bottom: string | number;
}
export interface IItem {
    /**
     * 内部元素描述信息
     */
    name: string;
    /**
     * 对应节点值
     */
    value: number;
    /**
     * 对应节点颜色
     */
    color: string;
    /**
     * 对应节点随时间变化数据
     */
    line: ILine[];
}
export interface IPosition {
    x: number;
    y: number;
}
export interface IData {
    name: string;
    data: IItem[];
}
export interface IHoneycombChartOption {
    /**
     * 图表四周空白区域大小
     */
    margin: IChartMargin;
    /**
     * 蜂窝配置
     */
    honeycomb: {
        /**
         * 最大半径
         */
        maxRadius: number;
        /**
         * 最小半径
         */
        minRadius: number;
        /**
         * 蜂窝间距占半径比例，小数表示
         * 0.06
         */
        distance: number;
    };
    groups: {
        /**
         * 每个组每一行蜂窝数目
         */
        honeycombNum: number;
        /**
         * 图表每一行图表组数
         */
        lineGroupNum: number;
        /**
         * 标题高度
         */
        titleHeight: number;
        /**
         * 是否显示title
         */
        showTitle: boolean;
    };
    series: IData[];
}
export declare class HoneycombChart {
    _dom: HTMLElement;
    _width: number;
    _height: number;
    _svg: d3.Selection<SVGSVGElement, unknown, null, undefined> | null;
    _bodyG: d3.Selection<SVGGElement, unknown, null, undefined> | null;
    addTooltip?: (position: IPosition, data: IItem) => void;
    removeTooltip?: () => void;
    onMouseDown?: (item: IItem) => void;
    _margin: IChartMargin;
    honeycomb: {
        maxRadius: number;
        minRadius: number;
        distance: number;
    };
    group: {
        honeycombNum: number;
        lineGroupNum: number;
        titleHeight: number;
        showTitle: boolean;
    };
    series: IData[];
    constructor(dom: HTMLElement, addTooltip?: (position: IPosition, data: IItem) => void, removeTooltip?: () => void, onMouseDown?: (item: IItem) => void);
    formatPrecent: (value: number | string, base: number) => number;
    margin: () => {
        top: number;
        left: number;
        right: number;
        bottom: number;
    };
    quadrantHeight(): number;
    quadrantWidth(): number;
    realTitleHeight(): number;
    renderSvg: () => void;
    partX: () => number;
    getBodyXY: () => {
        x: number;
        y: number;
    };
    getRealSvgHeight: () => number;
    renderBody: () => void;
    groups: () => {
        lineHeight: number;
        columnWidth: number;
        lines: number;
        columns: number;
    };
    pointLayout: () => {
        cols: number;
        rows: number;
    };
    radius: () => number;
    lineHeight: () => number[];
    renderGroup: () => void;
    renderHoneycomb: (groupG: d3.Selection<SVGGElement, IData, SVGGElement, unknown>) => void;
    mousedown: (el: SVGPathElement, data: IItem) => void;
    mouseup: (el: SVGPathElement) => void;
    mousemove: (el: SVGPathElement, data: IItem) => void;
    mouseout: (el: SVGPathElement) => void;
    render(option: IHoneycombChartOption): void;
    dispose(): void;
}