@deltares/fews-web-oc-charts/dist/Charts/chart.d.ts

FEWS Chart Library

import * as d3 from 'd3';
import { SvgPropertiesHyphen } from 'csstype';
import { Axes, AxisIndex } from '../Axes/axes.js';
import { CartesianAxes, PolarAxes } from '../index.js';
import { TooltipAnchor, TooltipPosition } from '../Tooltip/tooltip.js';
import type { DataPoint, DataPointXY, DataValue } from '../Data/types.js';
export declare const AUTO_SCALE = 1;
export type PointAlignment = 'right' | 'middle' | 'left';
interface ChartOptionItem {
    includeInTooltip?: boolean;
    includeInAutoScale?: boolean;
    extentFilter?: (d: DataPoint) => boolean;
    format?: (value: number | Date) => string;
    paddingInner?: number;
    paddingOuter?: number;
}
interface ColorOptionItem {
    scale?: any;
    range?: any;
    map?: any;
}
export interface SymbolOptions {
    id?: number;
    size?: number;
    skip?: number;
}
export interface TextOptions {
    dx?: number;
    dy?: number;
    attributes?: SvgPropertiesHyphen;
    angle?: number;
    position?: TextPosition;
    formatter?: (d: unknown) => string;
}
export declare enum TextPosition {
    Top = "top",
    Bottom = "bottom"
}
export interface TooltipOptions {
    position?: TooltipPosition;
    anchor?: TooltipAnchor;
    alignment?: PointAlignment;
    toolTipFormatter?: (d: DataPointXY) => HTMLElement;
}
export interface MouseOverOptions {
    formatter?: (d: void | {
        point: DataPointXY;
        style: SvgPropertiesHyphen;
    }, precision: number) => HTMLSpanElement | undefined;
    textFormatter?: (d: DataValue, precision: number) => string;
}
export declare const CurveType: {
    readonly Linear: "linear";
    readonly Basis: "basis";
    readonly Step: "step";
    readonly StepAfter: "stepAfter";
    readonly StepBefore: "stepBefore";
};
export type CurveType = (typeof CurveType)[keyof typeof CurveType];
export interface ChartOptionsForKeys {
    x?: ChartOptionItem;
    x1?: ChartOptionItem;
    y?: ChartOptionItem;
    radial?: ChartOptionItem;
    angular?: ChartOptionItem;
}
export interface ChartOptions extends ChartOptionsForKeys {
    transitionTime?: number;
    color?: ColorOptionItem;
    colorScale?: any;
    symbol?: SymbolOptions;
    curve?: CurveType;
    text?: TextOptions;
    tooltip?: TooltipOptions;
    mouseover?: MouseOverOptions;
}
export interface DataKeys {
    x?: string;
    x1?: string;
    y?: string;
    radial?: string;
    angular?: string;
    color?: string;
    value?: string;
}
export declare abstract class Chart {
    protected _data: DataPoint[];
    protected datum: any;
    protected _extent: any;
    protected _isVisible: boolean;
    protected highlight: d3.Selection<SVGGElement, any, SVGGElement, any>;
    group: d3.Selection<SVGGElement, any, SVGGElement, any>;
    colorMap: any;
    id: string;
    options: ChartOptions;
    axisIndex: AxisIndex;
    style: SvgPropertiesHyphen;
    cssSelector: string;
    legend: any[];
    constructor(data: any, options: ChartOptions);
    set data(d: any);
    get data(): any;
    set extent(extent: Record<string, number[] | Date[] | null[]>);
    get extent(): Record<string, number[] | Date[] | null[]>;
    get visible(): boolean;
    set visible(value: boolean);
    addTo(axis: Axes, axisIndex: AxisIndex, id?: string, style?: SvgPropertiesHyphen | string): this;
    setOptions(options: ChartOptions): void;
    setAxisIndex(axisIndex: AxisIndex): void;
    plotter(axis: Axes, axisIndex: AxisIndex): void;
    mouseOverFormatterCartesian(key: 'x' | 'y', d: void | {
        point: DataPointXY;
        style: SvgPropertiesHyphen;
    }, precision: number): HTMLSpanElement | undefined;
    protected defaultMouseOverFormatterCartesian(key: 'x' | 'y', d: void | {
        point: DataPointXY;
        style: SvgPropertiesHyphen;
    }, precision: number): HTMLSpanElement | undefined;
    protected defaultMouseOverTextFormatter(data: DataValue, precision: number): string;
    protected mouseOverTextFormatter(d: DataValue, precision: number): string;
    protected defaultToolTipFormatterCartesian(d: any): HTMLElement;
    protected toolTipFormatterCartesian(d: any): HTMLElement;
    protected toolTipFormatterPolar(d: any): HTMLElement;
    protected defaultToolTipFormatterPolar(d: any): HTMLElement;
    protected defaultToolTipText(data: any, key: string, decimals: number): string;
    abstract plotterCartesian(axis: CartesianAxes, dataKeys: any): any;
    abstract plotterPolar(axis: PolarAxes, dataKeys: any): any;
    legendId(item: string): number;
    abstract drawLegendSymbol(legendId?: string, asSvgElement?: boolean): any;
    onPointerOver(): void;
    onPointerMove(_value: number | Date, _key: 'x' | 'y', _xScale: any, _yScale: any): void | {
        point: DataPointXY;
        style: SvgPropertiesHyphen;
    };
    onPointerOut(): void;
    protected findIndex(value: number | Date, key: 'x' | 'y', method?: PointAlignment): number | undefined;
    protected selectGroup(axis: CartesianAxes | PolarAxes, cssClass: string): d3.Selection<SVGGElement, any, SVGGElement, any>;
    protected selectHighlight(axis: CartesianAxes, SVGElementName: string): d3.Selection<SVGGElement, any, SVGGElement, any>;
    get dataKeys(): DataKeys;
    get curveGenerator(): d3.CurveFactory;
    protected mapDataCartesian(domain: any): any;
    protected applyStyle(source: Element, element: d3.Selection<SVGElement, unknown, SVGElement, unknown>, props: string[]): void;
}
export {};