@graphique/geom-line/dist/index.d.ts

For line charts and other lines

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

declare enum Entrance {
    DATA = "data",
    MIDPOINT = "midpoint"
}
declare enum FocusType {
    X = "x",
    CLOSEST = "closest"
}
type GeomAes<Datum> = Omit<Aes<Datum>, 'x' | 'fill' | 'size'> & {
    x?: DataValue<Datum>;
    /** functional mapping to `data` used to create higher-level groups for focusing when combined with `group` Aes and `focusType=FocusType.CLOSEST`  */
    focusGroup?: 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<SVGPathElement>;
    /** 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;
    /** used for programmatic zooming, should the zoom out button be hidden */
    isZoomedOut?: boolean;
    /** [d3 curve](https://d3js.org/d3-shape/curve) factory imported from `d3-shape` (_default_: `curveLinear`) */
    curve?: CurveFactory;
    /** should this Geom have a line marker for its focused data (_default_: `true`) */
    showLineMarker?: boolean;
    /** radius in pixels of the line marker's points (_default_: `3.5`) */
    markerRadius?: number;
    /** stroke color of the line marker's points (_default_: `"#ffffff"`) */
    markerStroke?: string;
    /** where elements should start as they enter the drawing area (_default_: `Entrance.MIDPOINT`) */
    entrance?: Entrance;
    /** determines how pointer events focus data (_default_: `FocusType.X`) */
    focusType?: FocusType;
    /** 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 */
    isAnimated?: boolean;
}
declare const GeomLine: {
    <Datum>({ data: localData, aes: localAes, showTooltip, showLineMarker, brushAction, isZoomedOut, curve, entrance, onDatumSelection, onDatumFocus, onExit, focusedStyle, unfocusedStyle, attr, markerRadius, markerStroke, focusType, isAnimated, }: GeomProps<Datum>): React.JSX.Element;
    displayName: string;
};

interface LegendProps {
    /** title of legend */
    title?: React.ReactNode;
    /** additional styles passed to legend container */
    style?: CSSProperties;
    /** determines vertical/horizontal orientation of legend members (_default_: `LegendOrientation.V`) */
    orientation?: LegendOrientation;
    /** function for formatting legend member labels */
    format?: (v: string, i?: number) => string;
    /** callback called for click events on legend members */
    onSelection?: (v: string) => void;
    /** should legend member stroke symbols include stroke dasharrays (_default_: `true`) */
    ignoreDasharray?: boolean;
}
declare const Legend: <Datum>({ title, style, orientation, format, onSelection, ignoreDasharray, }: LegendProps) => React.JSX.Element | null;

export { Entrance, FocusType, type GeomAes, GeomLine, type GeomProps, Legend, type LegendProps };