@apptane/react-ui-charts/dist/types/hexbin/HexBin.types.d.ts

Chart components in Apptane React UI framework

/// <reference types="react" />
import { Color, ColorMode, PaletteHue } from "@apptane/react-ui-core";
import PropTypes from "prop-types";
import { ChromaticScheme, Datum } from "../common/Types.js";
export interface HexBinDatum<Data = void> extends Datum<Data> {
    /**
     * Value associated with the datum.
     * This value is used to establish color based on the specified colormap.
     * If `value` is omitted the `color` property must be specified.
     */
    value?: number;
}
export interface HexBinProps<Data = void> {
    /**
     * Data representing individual cells.
     */
    data?: ArrayLike<HexBinDatum<Data>>;
    /**
     * Overrides the lower bound of the range of data values.
     * If not specified the minimum of `value` in `data` is taken.
     */
    rangeMin?: number;
    /**
     * Overrides the upper bound of the range of data values.
     * If not specified the minimum of `value` in `data` is taken.
     */
    rangeMax?: number;
    /**
     * Specifies the color scheme used to compute cell color
     * from the datum `value`. If palette hue is specified colors
     * are interpolated between 100 and 800 by varying lightness.
     * If not specified defaults to `gray` hue.
     */
    colorScheme?: ChromaticScheme | PaletteHue;
    /**
     * Callback to determine color for the cell.
     * When this callback returns a valid color, it overrides
     * all other color specifications.
     */
    color?: (datum: HexBinDatum<Data>) => Color | PaletteHue | undefined;
    /**
     * Height of a cell in pixels.
     */
    size?: number;
    /**
     * Gap between cells in pixels.
     */
    gap?: number;
    /**
     * Indicates whether cells should be displayed without the border.
     */
    borderless?: boolean;
    /**
     * Maximum width in pixels.
     */
    maxWidth?: number;
    /**
     * Maximum number of cells per row.
     */
    maxPerRow?: number;
    /**
     * Callback to format the display value for the tooltip.
     */
    formatTooltip?: (datum: HexBinDatum<Data>) => React.ReactNode;
    /**
     * Callback invoked when a cell is clicked.
     */
    onClick?: (datum: HexBinDatum<Data>) => void;
    /**
     * Overrides the color mode.
     * Default is to use globally set theme color mode or fallback to `light`.
     */
    colorMode?: ColorMode;
}
export declare const HexBinPropTypes: {
    data: PropTypes.Requireable<(PropTypes.InferProps<{
        value: PropTypes.Requireable<number>;
        id: PropTypes.Requireable<string>;
        label: PropTypes.Requireable<string>;
        color: PropTypes.Requireable<string>;
        data: PropTypes.Requireable<any>;
    }> | null | undefined)[]>;
    rangeMin: PropTypes.Requireable<number>;
    rangeMax: PropTypes.Requireable<number>;
    colorScheme: PropTypes.Requireable<ChromaticScheme | PaletteHue>;
    color: PropTypes.Requireable<(...args: any[]) => any>;
    size: PropTypes.Requireable<number>;
    gap: PropTypes.Requireable<number>;
    borderless: PropTypes.Requireable<boolean>;
    maxWidth: PropTypes.Requireable<number>;
    maxPerRow: PropTypes.Requireable<number>;
    formatTooltip: PropTypes.Requireable<(...args: any[]) => any>;
    onClick: PropTypes.Requireable<(...args: any[]) => any>;
    colorMode: PropTypes.Requireable<ColorMode>;
};