@graphique/geom-point/dist/index.d.cts

For points, scatterplots, and bubbles

import React, { SVGAttributes, CSSProperties } from 'react';
import { Aes, DataValue, BrushAction, LegendOrientation } from '@graphique/graphique';

declare enum Entrance {
    DATA = "data",
    BOTTOM = "bottom"
}
declare enum SizeLabelDirection {
    L = "left",
    R = "right"
}
type GeomAes<Datum> = Omit<Aes<Datum>, 'x'> & {
    x?: DataValue<Datum>;
};

interface GeomProps<Datum> {
    /**
     * **data used by this Geom**
     *
     * This will overwrite top-level `data` passed to `GG` as it relates to mappings defined in `aes`.
     */
    data?: Datum[];
    /**
     * **functional mapping applied to `data` for this Geom**
     *
     * This extends the top-level `aes` passed to `GG`. Any repeated mappings defined here will take precedence within the Geom.
     */
    aes?: GeomAes<Datum>;
    /** attributes passed to the underlying SVG elements */
    attr?: SVGAttributes<SVGCircleElement>;
    /** should this Geom have a tooltip associated with it (_default_: `true`) */
    showTooltip?: boolean;
    /** determines what happens when brushing (clicking and dragging) over the drawing area  */
    brushAction?: BrushAction;
    /** where elements should start as they enter the drawing area (_default_: `Entrance.BOTTOM`) */
    entrance?: Entrance;
    /** should elements be strictly clipped at the bounds of the drawing area (_default_: `false`) */
    isClipped?: boolean;
    /** array of keys (of the kind that are generated by `aes.key`) used to programmatically focus associated points */
    focusedKeys?: string[];
    /** styles applied to focused elements */
    focusedStyle?: CSSProperties;
    /** styles applied to unfocused elements */
    unfocusedStyle?: CSSProperties;
    /** callback called for mousemove events on the drawing area when focusing data */
    onDatumFocus?: (data: Datum[], index: number[]) => void;
    /** callback called for click events on the drawing area when selecting focused data */
    onDatumSelection?: (data: Datum[], index: number[]) => void;
    /** callback called for mouseleave events on the drawing area */
    onExit?: () => void;
    /** should elements enter/update/exit with animated transitions (_default_: `true`) */
    isAnimated?: boolean;
}
declare const GeomPoint: {
    <Datum>({ data: localData, aes: localAes, focusedStyle, unfocusedStyle, attr, focusedKeys, onDatumFocus, onDatumSelection, entrance, onExit, showTooltip, brushAction, isClipped, isAnimated, }: GeomProps<Datum>): React.JSX.Element;
    displayName: string;
};

interface LegendProps {
    /** title of legend */
    title?: React.ReactNode;
    /** determines vertical/horizontal orientation of categorical legend members (_default_: `LegendOrientation.V`) */
    orientation?: LegendOrientation;
    /** function for formatting legend member labels (categorical) or tick labels (continuous) */
    format?: (v: string, i?: number) => string;
    /** width of continuous legend in pixels (_default_: `320`) */
    width?: number;
    /** approximate number of ticks for continuous legend (_default_: `width / 64`) */
    numTicks?: number;
    /** callback called for click events on legend members */
    onSelection?: (v: string) => void;
    /** additional styles passed to legend container */
    style?: CSSProperties;
}
declare const Legend: <Datum>({ title, style, orientation, format, width, numTicks, onSelection, }: LegendProps) => React.JSX.Element | null;

interface SizeLegendProps {
    /** title of legend */
    title?: React.ReactNode;
    /** which side of legend to draw labels (_default_: `SizeLabelDirection.R`) */
    labelDirection?: SizeLabelDirection;
    /** number of circles to use as references in legend (_default_: `3`) */
    numCircles?: 2 | 3;
    /** fixed breakpoints within size range for circle references (takes precedence over `numCircles`) */
    radiiVals?: [number, number] | [number, number, number];
    /** function for formatting labels */
    format?: (v: number, i?: number) => string;
    /** width of legend in pixels (_default_: `120`) */
    width?: number;
    /** additional styles passed to legend container */
    style?: CSSProperties;
}
declare const SizeLegend: ({ labelDirection, radiiVals, width, numCircles, format, style, title, }: SizeLegendProps) => React.JSX.Element | null;

export { Entrance, type GeomAes, GeomPoint, type GeomProps, Legend, type LegendProps, SizeLabelDirection, SizeLegend, type SizeLegendProps };