rumble-charts/types/Dots.d.ts

Truly declarative React charts components

import type { ReactElement, ReactNode } from 'react';
import type { SymbolType } from 'd3-shape';
import type { ColorScale, GraphicProps, Point, Series, Style } from './types';
declare const symbolsMap: {
    circle: SymbolType;
    cross: SymbolType;
    diamond: SymbolType;
    square: SymbolType;
    'triangle-down': SymbolType;
    'triangle-up': SymbolType;
    star: SymbolType;
};
declare const methods: {
    dots: typeof renderCircle;
    dot: typeof renderCircle;
    circles: typeof renderCircle;
    circle: typeof renderCircle;
    ellipses: typeof renderEllipse;
    ellipse: typeof renderEllipse;
    symbols: typeof renderSymbol;
    symbol: typeof renderSymbol;
    labels: typeof renderLabel;
    label: typeof renderLabel;
    path: typeof renderPath;
};
declare type DotType = keyof typeof methods;
declare type DotSymbolType = keyof typeof symbolsMap | SymbolType;
export declare type DotParams = {
    seriesIndex: number;
    pointIndex: number;
    point: Point;
    series: Series;
    props: DotsProps;
};
export declare type DotSeriesParams = {
    seriesIndex: number;
    series: Series;
    props: DotsProps;
};
export declare type DotTypeParams = DotParams & {
    dotType: DotType | DotType[];
};
export declare type DotRenderProps = {
    key?: string | number;
    seriesIndex: number;
    pointIndex: number;
    point: Point;
    dotStyle: Style;
    dotAttributes: Record<string, any>;
    props: DotsProps;
    color: ColorScale;
};
export declare type DotsProps = {
    /**
     * Possible values: `"dot"`, `"circle"`, `"ellipse"`, `"symbol"`, `"label"`, `"path"`.
     */
    dotType?: DotType | DotType[] | ((params: DotParams) => DotType | DotType[]);
    dotRender?: (props: DotRenderProps) => ReactNode;
    circleRadius?: number | string | ((params: DotParams) => number | string);
    circleAttributes?: Record<string, any> | ((params: DotParams) => Record<string, any>);
    ellipseRadiusX?: number | string | ((params: DotParams) => number | string);
    ellipseRadiusY?: number | string | ((params: DotParams) => number | string);
    ellipseAttributes?: Record<string, any> | ((params: DotParams) => Record<string, any>);
    /**
     * Possible values: `"circle"`, `"cross"`, `"diamond"`, `"square"`,
     * `"triangle-down"`, `"triangle-up"`
     */
    symbolType?: DotSymbolType | ((params: DotParams) => DotSymbolType);
    symbolAttributes?: Record<string, any> | ((params: DotParams) => Record<string, any>);
    label?: ReactNode | ((params: DotParams) => ReactNode);
    labelAttributes?: Record<string, any> | ((params: DotParams) => Record<string, any>);
    path?: string | ((params: DotParams) => string);
    pathAttributes?: Record<string, any> | ((params: DotParams) => Record<string, any>);
    seriesVisible?: boolean | ((params: DotSeriesParams) => boolean);
    seriesAttributes?: Record<string, any> | ((params: DotSeriesParams) => Record<string, any>);
    seriesStyle?: Style | ((params: DotSeriesParams) => Style);
    groupStyle?: Style | ((params: DotParams) => Style);
    dotVisible?: boolean | ((params: DotParams) => boolean);
    dotAttributes?: Record<string, any> | ((params: DotTypeParams) => Record<string, any>);
    dotStyle?: Style | ((params: DotTypeParams) => Style);
} & GraphicProps;
/**
 * Renders dots for your scatter plot.
 */
export declare function Dots(props: DotsProps): ReactElement;
declare function renderCircle({ key, seriesIndex, pointIndex, point, dotStyle, dotAttributes, props, color }: DotRenderProps): JSX.Element;
declare function renderEllipse({ key, seriesIndex, pointIndex, point, dotStyle, dotAttributes, props, color }: DotRenderProps): JSX.Element;
declare function renderPath({ key, seriesIndex, pointIndex, point, dotStyle, dotAttributes, props, color }: DotRenderProps): JSX.Element;
declare function renderSymbol({ key, seriesIndex, pointIndex, point, dotStyle, dotAttributes, props, color }: DotRenderProps): JSX.Element;
declare function renderLabel({ key, seriesIndex, pointIndex, point, dotStyle, dotAttributes, props, color }: DotRenderProps): JSX.Element;
export {};