@deltares/fews-web-oc-charts/dist/Axes/colourBar.d.ts

FEWS Chart Library

import { Property } from 'csstype';
import * as d3 from 'd3';
import { AxisPosition } from '../Axis/axisPosition.js';
/**
 * A single value in a colour map
 */
export interface ColourMapValue {
    /** The lower value of this segment */
    lowerValue: number;
    /** Colour associated with this segment */
    color: Property.Color;
}
export type ColourMap = ColourMapValue[];
/**
 * A single value in a colour map
 */
export interface ColourBarOptions {
    /** The lower value of this segment */
    useGradients: boolean;
    /** Colour associated with this segment */
    position: AxisPosition;
    title?: string;
    type: string;
    ticks?: number;
    tickValues?: [number] | [Date];
}
type GroupSelection = d3.Selection<SVGElement, any, SVGElement, any>;
/**
 * A colour bar, e.g. as a legend for a heat map.
 */
export declare class ColourBar {
    group: GroupSelection;
    colourMap: ColourMap;
    width: number;
    height: number;
    options: ColourBarOptions;
    scale: any;
    /**
     * Creates a colour bar
     * @param group d3 selection of the SVG group to add the colour bar to
     * @param colourMap colour map to display
     * @param width width of the colour bar
     * @param height height of the colour bar
     * @param options colour bar options
     */
    constructor(group: GroupSelection | SVGGElement, colourMap: ColourMap, width: number, height: number, options: ColourBarOptions);
    get numColours(): number;
    get minimum(): number;
    get maximum(): number;
    get range(): number;
    get sizeAlongAxis(): number;
    get sizeAcrossAxis(): number;
    get isHorizontal(): boolean;
    /**
     * Generate fill colours for the colour bar elements.
     *
     * These can be either gradients or solid colours.
     */
    private createFills;
    /**
     * Defines gradients in the SVG for the specified colour map
     *
     * Ids are generated with a random prefix to prevent clashes when multiple colour bars are present.
     *
     * @returns Ids of the generated gradients.
     */
    private addColourMapGradients;
    private createScale;
    /**
     * Creates rectangles for each segment of the colour bar.
     * @param fills colour values (or e.g. gradient references) for each segment
     */
    private createBarSegments;
    /**
     * Creates the axis along the colour bar.
     */
    private createAxis;
    private initAxis;
    /**
     * Adds a gradient definition to the SVG.
     *
     * Depending on the isHorizontal property, the gradient is created either
     * horizontally (isHorizontal = true) or vertically (isHorizontal = false).
     *
     * @param defs d3 selection of the <defs> tag in the SVG
     * @param id unique ID of the gradient
     * @param colorStart start colour of the gradient
     * @param colorEnd end colour of the gradient
     */
    private addGradient;
}
export {};