@nivo/core

@nivo/core

Version 0.91.0
Published 8 hours ago
301 kB
11 dependencies
MIT license

Install

npm i @nivo/core

yarn add @nivo/core

pnpm add @nivo/core

Overview

Index

Variables

boxAlignments
CartesianMarkers
closedCurvePropKeys
Container
defaultAnimate
defaultMargin
DotsItem
motionDefaultProps
ResponsiveWrapper
SvgWrapper
ThemeProvider

Variables

variable boxAlignments

const boxAlignments: readonly BoxAlign[];

variable CartesianMarkers

const CartesianMarkers: CartesianMarkersType;

variable closedCurvePropKeys

const closedCurvePropKeys: readonly ClosedCurveFactoryId[];

variable Container

const Container: ContainerType;

variable defaultAnimate

const defaultAnimate: boolean;

variable defaultMargin

const defaultMargin: DefaultMargin;

variable DotsItem

const DotsItem: React.FunctionComponent<DotsItemProps<any>>;

variable motionDefaultProps

const motionDefaultProps: MotionDefaultProps;

variable ResponsiveWrapper

const ResponsiveWrapper: ResponsiveWrapperType;

variable SvgWrapper

const SvgWrapper: SvgWrapperType;

variable ThemeProvider

const ThemeProvider: ThemeProviderType;

Functions

function absoluteAngleDegrees

absoluteAngleDegrees: (degrees: number) => number;

function alignBox

alignBox: (
    box: AlignBox,
    container: AlignBox,
    alignment: BoxAlign
) => [number, number];

function clampArc

clampArc: (
    startAngle: number,
    endAngle: number,
    length?: number
) => [number, number];

function curveFromProp

curveFromProp: (interpolation: CurveFactoryId) => CurveFactory;

function Defs

Defs: (props: DefsProps) => JSX.Element;

function degreesToRadians

degreesToRadians: (degrees: number) => number;

function extendDefaultTheme

extendDefaultTheme: (
    defaultTheme: ThemeWithoutInheritance,
    customTheme: Theme
) => CompleteTheme;

function getAngle

getAngle: (x1: number, y1: number, x2: number, y2: number) => number;

function getDistance

getDistance: (x1: number, y1: number, x2: number, y2: number) => number;

function getPropertyAccessor

getPropertyAccessor: <Datum, Value>(
    accessor: PropertyAccessor<Datum, Value>
) => (datum: Datum) => Value;

function getRelativeCursor

getRelativeCursor: (
    element: Element,
    event: React.MouseEvent | React.TouchEvent
) => [number, number];

function getValueFormatter

getValueFormatter: <Value, Context = void>(
    format?: ValueFormat<Value, Context>
) => Context extends void
    ? (value: Value) => string
    : (value: Value, context: Context) => string;

function isCursorInRect

isCursorInRect: (
    x: number,
    y: number,
    width: number,
    height: number,
    cursorX: number,
    cursorY: number
) => boolean;

function linearGradientDef

linearGradientDef: (
    id: string,
    colors: GradientColor[],
    options?: React.SVGProps<SVGLinearGradientElement>
) => {
    id: string;
    type: 'linearGradient';
    colors: GradientColor[];
} & React.SVGProps<SVGLinearGradientElement>;

function mergeRefs

mergeRefs: <T>(...refs: any[]) => (value: T) => void;

function normalizeAngle

normalizeAngle: (degrees: number) => number;

function PatternDots

PatternDots: (props: Omit<PatternDotsDef, 'type'>) => JSX.Element;

function patternDotsDef

patternDotsDef: (
    id: string,
    options?: Omit<PatternDotsDef, 'id' | 'type'>
) => PatternDotsDef;

function PatternLines

PatternLines: (props: Omit<PatternLinesDef, 'type'>) => JSX.Element;

function patternLinesDef

patternLinesDef: (
    id: string,
    options?: Omit<PatternLinesDef, 'id' | 'type'>
) => PatternLinesDef;

function PatternSquares

PatternSquares: (props: Omit<PatternSquaresDef, 'type'>) => JSX.Element;

function patternSquaresDef

patternSquaresDef: (
    id: string,
    options?: Omit<PatternSquaresDef, 'id' | 'type'>
) => PatternSquaresDef;

function positionFromAngle

positionFromAngle: (angle: number, distance: number) => { x: number; y: number };

function radiansToDegrees

radiansToDegrees: (radians: number) => number;

function sanitizeSvgTextStyle

sanitizeSvgTextStyle: (style: TextStyle) => any;

function useAnimatedPath

useAnimatedPath: (path: string) => Interpolation<string>;

function useCurveInterpolation

useCurveInterpolation: (interpolation: CurveFactoryId) => CurveFactory;

function useDimensions

useDimensions: (
    width: number,
    height: number,
    margin?: Box
) => {
    margin: Margin;
    innerWidth: number;
    innerHeight: number;
    outerWidth: number;
    outerHeight: number;
};

function useMeasure

useMeasure: () => [
    React.RefObject<HTMLDivElement>,
    { left: number; top: number; width: number; height: number }
];

function useMotionConfig

useMotionConfig: () => { animate: boolean; config: SpringConfig };

function usePartialTheme

usePartialTheme: (theme?: Theme) => CompleteTheme;

function usePropertyAccessor

usePropertyAccessor: <Datum, Value>(
    accessor: PropertyAccessor<Datum, Value>
) => (datum: Datum) => Value;

function useTheme

useTheme: () => CompleteTheme;

function useValueFormatter

useValueFormatter: <Value, Context = void>(
    format?: ValueFormat<Value, Context>
) => Context extends void
    ? (value: Value) => string
    : (value: Value, context: Context) => string;

Interfaces

interface AlignBox

interface AlignBox extends Dimensions, Point {}

interface CartesianMarkerProps

interface CartesianMarkerProps<V extends DatumValue = DatumValue> {}

property axis

axis: 'x' | 'y';

property legend

legend?: string;

property legendOrientation

legendOrientation?: 'horizontal' | 'vertical';

property legendPosition

legendPosition?: BoxAlign;

property lineStyle

lineStyle?: Partial<React.CSSProperties>;

property textStyle

textStyle?: Partial<React.CSSProperties>;

property value

value: V;

interface CartesianMarkersProps

interface CartesianMarkersProps<
    X extends DatumValue = DatumValue,
    Y extends DatumValue = DatumValue
> {}

property height

height: number;

property markers

markers: readonly CartesianMarkerProps<X | Y>[];

property width

width: number;

property xScale

xScale: (value: X) => number;

property yScale

yScale: (value: Y) => number;

interface ColorProps

interface ColorProps<T> {}

property colorBy

colorBy?: string | GetColor<T>;

property colors

colors?: Colors;

interface ContainerProps

interface ContainerProps {}

property animate

animate?: boolean;

property isInteractive

isInteractive?: boolean;

property motionConfig

motionConfig?: string | SpringConfig;

property renderWrapper

renderWrapper?: boolean;

property theme

theme?: Theme;

interface Dimensions

interface Dimensions {}

property height

height: number;

property width

width: number;

interface DotsItemProps

interface DotsItemProps<D = any> {}

property ariaDescribedBy

ariaDescribedBy?: React.AriaAttributes['aria-describedby'];

property ariaDisabled

ariaDisabled?: React.AriaAttributes['aria-disabled'];

property ariaHidden

ariaHidden?: React.AriaAttributes['aria-hidden'];

property ariaLabel

ariaLabel?: React.AriaAttributes['aria-label'];

property ariaLabelledBy

ariaLabelledBy?: React.AriaAttributes['aria-labelledby'];

property borderColor

borderColor: string;

property borderWidth

borderWidth: number;

property color

color: string;

property datum

datum: D;

property isFocusable

isFocusable?: boolean;

property label

label?: string | number;

property labelTextAnchor

labelTextAnchor?: 'start' | 'middle' | 'end';

property labelYOffset

labelYOffset?: number;

property onBlur

onBlur?: (datum: D, event: React.FocusEvent<SVGGElement>) => void;

property onFocus

onFocus?: (datum: D, event: React.FocusEvent<SVGGElement>) => void;

property size

size: number;

property symbol

symbol?: DotsItemSymbolComponent<D>;

property tabIndex

tabIndex?: number;

property testId

testId?: string;

property x

x: number;

property y

y: number;

interface DotsItemSymbolProps

interface DotsItemSymbolProps<D = any> {}

property borderColor

borderColor: string;

property borderWidth

borderWidth: number;

property color

color: string;

property datum

datum: D;

property size

size: number;

interface Point

interface Point {}

property x

x: number;

property y

y: number;

interface SvgDefsAndFill

interface SvgDefsAndFill<T> {}

property defs

defs?: readonly {
    id: string;
    [key: string]: any;
}[];

property fill

fill?: readonly {
    id: string;
    match: Record<string, unknown> | SvgFillMatcher<T> | '*';
}[];

interface ThemeProviderProps

interface ThemeProviderProps {}

property theme

theme?: Theme;

Type Aliases

type Accessor

type Accessor<T extends keyof U, U> = T extends string ? U[T] : never;

type AreaCurve

type AreaCurve =
    | 'basis'
    | 'cardinal'
    | 'catmullRom'
    | 'linear'
    | 'monotoneX'
    | 'monotoneY'
    | 'natural'
    | 'step'
    | 'stepAfter'
    | 'stepBefore';

type AreaCurveFactoryId

type AreaCurveFactoryId =
    | 'basis'
    | 'cardinal'
    | 'catmullRom'
    | 'linear'
    | 'monotoneX'
    | 'monotoneY'
    | 'natural'
    | 'step'
    | 'stepAfter'
    | 'stepBefore';

type Box

type Box = Partial<Margin>;

type BoxAlign

type BoxAlign =
    | 'center'
    | 'top-left'
    | 'top'
    | 'top-right'
    | 'right'
    | 'bottom-right'
    | 'bottom'
    | 'bottom-left'
    | 'left';

type CartesianMarkersType

type CartesianMarkersType = <
    X extends DatumValue = DatumValue,
    Y extends DatumValue = DatumValue
>(
    props: CartesianMarkersProps<X, Y>
) => JSX.Element;

type ClosedCurveFactoryId

type ClosedCurveFactoryId =
    | 'basisClosed'
    | 'cardinalClosed'
    | 'catmullRomClosed'
    | 'linearClosed';

type Colors

type Colors = readonly string[] | string;

type CompleteTheme

type CompleteTheme = {
    background: string;
    text: TextStyle;
    axis: {
        domain: {
            line: Partial<React.CSSProperties>;
        };
        ticks: {
            line: Partial<React.CSSProperties>;
            text: TextStyle;
        };
        legend: {
            text: TextStyle;
        };
    };
    grid: {
        line: Partial<React.CSSProperties>;
    };
    crosshair: {
        line: {
            stroke: string;
            strokeWidth: number;
            strokeOpacity: number;
            strokeDasharray: string;
        };
    };
    legends: {
        hidden: {
            symbol: Partial<{
                fill: string;
                opacity: number;
            }>;
            text: TextStyle;
        };
        title: {
            text: TextStyle;
        };
        text: TextStyle;
        ticks: {
            line: Partial<React.CSSProperties>;
            text: TextStyle;
        };
    };
    labels: {
        text: TextStyle;
    };
    markers: {
        lineColor: string;
        lineStrokeWidth: number;
        textColor: string;
        fontSize: string | 0;
        text: TextStyle;
    };
    dots: {
        text: TextStyle;
    };
    tooltip: {
        wrapper: Partial<React.CSSProperties>;
        container: Partial<React.CSSProperties>;
        basic: Partial<React.CSSProperties>;
        chip: Partial<React.CSSProperties>;
        table: Partial<React.CSSProperties>;
        tableCell: Partial<React.CSSProperties>;
        tableCellValue: Partial<React.CSSProperties>;
    };
    annotations: {
        text: {
            fill: string;
            outlineWidth: number;
            outlineColor: string;
            outlineOpacity: number;
        } & Partial<Omit<React.CSSProperties, 'fill'>>;
        link: {
            stroke: string;
            strokeWidth: number;
            outlineWidth: number;
            outlineColor: string;
            outlineOpacity: number;
        } & Partial<Omit<React.CSSProperties, 'stroke' | 'strokeWidth'>>;
        outline: {
            stroke: string;
            strokeWidth: number;
            outlineWidth: number;
            outlineColor: string;
            outlineOpacity: number;
        } & Partial<Omit<React.CSSProperties, 'stroke' | 'strokeWidth'>>;
        symbol: {
            fill: string;
            outlineWidth: number;
            outlineColor: string;
            outlineOpacity: number;
        } & Partial<Omit<React.CSSProperties, 'fill'>>;
    };
};

type ContainerType

type ContainerType = (props: React.PropsWithChildren<ContainerProps>) => JSX.Element;

type CssMixBlendMode

type CssMixBlendMode =
    | 'normal'
    | 'multiply'
    | 'screen'
    | 'overlay'
    | 'darken'
    | 'lighten'
    | 'color-dodge'
    | 'color-burn'
    | 'hard-light'
    | 'soft-light'
    | 'difference'
    | 'exclusion'
    | 'hue'
    | 'saturation'
    | 'color'
    | 'luminosity';

type CurveFactoryId

type CurveFactoryId =
    | 'basis'
    | 'basisClosed'
    | 'basisOpen'
    | 'bundle'
    | 'cardinal'
    | 'cardinalClosed'
    | 'cardinalOpen'
    | 'catmullRom'
    | 'catmullRomClosed'
    | 'catmullRomOpen'
    | 'linear'
    | 'linearClosed'
    | 'monotoneX'
    | 'monotoneY'
    | 'natural'
    | 'step'
    | 'stepAfter'
    | 'stepBefore';

type DatumPropertyAccessor

type DatumPropertyAccessor<RawDatum, T> = (datum: RawDatum) => T;

type DatumValue

type DatumValue = string | number | Date;

type Def

type Def = LinearGradientDef | PatternDotsDef | PatternSquaresDef | PatternLinesDef;

type DefaultMargin

type DefaultMargin = {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
};

type DefsProps

type DefsProps = {
    defs: readonly Def[];
};

type DotsItemSymbolComponent

type DotsItemSymbolComponent<D = any> = React.FunctionComponent<
    DotsItemSymbolProps<D>
>;

type ExtractProps

type ExtractProps<TComponent> = TComponent extends ComponentType<infer TProps>
    ? TProps
    : never;

type GetColor

type GetColor<T> = (datum: T) => string;

type GradientColor

type GradientColor = {
    offset: number;
    color: string;
    opacity?: number;
};

type LinearGradientDef

type LinearGradientDef = {
    id: string;
    type: 'linearGradient';
    colors: {
        offset: number;
        color: string;
        opacity?: number;
    }[];
    gradientTransform?: string;
};

type LineCurveFactoryId

type LineCurveFactoryId =
    | 'basis'
    | 'cardinal'
    | 'catmullRom'
    | 'linear'
    | 'monotoneX'
    | 'monotoneY'
    | 'natural'
    | 'step'
    | 'stepAfter'
    | 'stepBefore';

type Margin

type Margin = {
    bottom: number;
    left: number;
    right: number;
    top: number;
};

type MotionDefaultProps

type MotionDefaultProps = {
    animate: true;
    config: 'default';
};

type MotionProps

type MotionProps = Partial<{
    animate: boolean;
    motionConfig: string | SpringConfig;
}>;

type Padding

type Padding = Margin;

type PatternDotsDef

type PatternDotsDef = {
    id: string;
    type: 'patternDots';
    color?: string;
    background?: string;
    size?: number;
    padding?: number;
    stagger?: boolean;
};

type PatternLinesDef

type PatternLinesDef = {
    id: string;
    type: 'patternLines';
    spacing?: number;
    rotation?: number;
    background?: string;
    color?: string;
    lineWidth?: number;
};

type PatternSquaresDef

type PatternSquaresDef = Omit<PatternDotsDef, 'type'> & {
    type: 'patternSquares';
};

type PropertyAccessor

type PropertyAccessor<Datum, Value> =
    // path to use with `lodash.get()`
    | string
    // explicit accessor function
    | ((datum: Datum) => Value);

type ResponsiveWrapperType

type ResponsiveWrapperType = (props: {
    children: (dimensions: { width: number; height: number }) => JSX.Element;
}) => JSX.Element;

type StackOffset

type StackOffset = 'expand' | 'diverging' | 'none' | 'silhouette' | 'wiggle';

type StackOrder

type StackOrder = 'ascending' | 'descending' | 'insideOut' | 'none' | 'reverse';

type SvgFillMatcher

type SvgFillMatcher<T> = (datum: T) => boolean;

type SvgWrapperType

type SvgWrapperType = (
    props: React.PropsWithChildren<{
        width: number;
        height: number;
        margin: Margin;
        defs?: any;
        role?: string;
        ariaLabel?: React.AriaAttributes['aria-label'];
        ariaLabelledBy?: React.AriaAttributes['aria-labelledby'];
        ariaDescribedBy?: React.AriaAttributes['aria-describedby'];
        isFocusable?: boolean;
    }>
) => JSX.Element;

type TextStyle

type TextStyle = {
    fontFamily: Exclude<React.CSSProperties['fontFamily'], undefined>;
    fontSize: Exclude<React.CSSProperties['fontSize'], undefined>;
    fill: string;
    outlineWidth: number;
    outlineColor: string;
    outlineOpacity: number;
} & Partial<React.CSSProperties>;

Required text properties + optional ones.

type Theme

type Theme = Partial<{
    background: CompleteTheme['background'];
    text: Partial<CompleteTheme['text']>;
    axis: Partial<{
        domain: Partial<{
            line: Partial<CompleteTheme['axis']['domain']['line']>;
        }>;
        ticks: Partial<{
            line: Partial<CompleteTheme['axis']['ticks']['line']>;
            text: Partial<CompleteTheme['axis']['ticks']['text']>;
        }>;
        legend: Partial<{
            text: Partial<CompleteTheme['axis']['legend']['text']>;
        }>;
    }>;
    grid: Partial<{
        line: Partial<CompleteTheme['grid']['line']>;
    }>;
    crosshair: Partial<{
        line: Partial<CompleteTheme['crosshair']['line']>;
    }>;
    legends: Partial<{
        hidden: Partial<{
            symbol: CompleteTheme['legends']['hidden']['symbol'];
            text: CompleteTheme['legends']['hidden']['text'];
        }>;
        title: Partial<{
            text: Partial<CompleteTheme['legends']['title']['text']>;
        }>;
        text: Partial<CompleteTheme['legends']['text']>;
        ticks: Partial<{
            line: Partial<CompleteTheme['legends']['ticks']['line']>;
            text: Partial<CompleteTheme['legends']['ticks']['text']>;
        }>;
    }>;
    labels: Partial<{
        text: Partial<CompleteTheme['labels']['text']>;
    }>;
    markers: Partial<CompleteTheme['markers']>;
    dots: Partial<{
        text: Partial<CompleteTheme['dots']['text']>;
    }>;
    tooltip: Partial<CompleteTheme['tooltip']>;
    annotations: Partial<{
        text: Partial<CompleteTheme['annotations']['text']>;
        link: Partial<CompleteTheme['annotations']['link']>;
        outline: Partial<CompleteTheme['annotations']['outline']>;
        symbol: Partial<CompleteTheme['annotations']['symbol']>;
    }>;
}>;

type ThemeProviderType

type ThemeProviderType = (
    props: React.PropsWithChildren<ThemeProviderProps>
) => JSX.Element;

type ThemeWithoutInheritance

type ThemeWithoutInheritance = {
    background: CompleteTheme['background'];
    text: CompleteTheme['text'];
    axis: {
        domain: {
            line: CompleteTheme['axis']['domain']['line'];
        };
        ticks: {
            line: CompleteTheme['axis']['ticks']['line'];
            text: Partial<CompleteTheme['axis']['ticks']['text']>;
        };
        legend: Partial<{
            text: Partial<CompleteTheme['axis']['legend']['text']>;
        }>;
    };
    grid: {
        line: CompleteTheme['grid']['line'];
    };
    crosshair: {
        line: CompleteTheme['crosshair']['line'];
    };
    legends: {
        hidden: {
            symbol: CompleteTheme['legends']['hidden']['symbol'];
            text: Partial<CompleteTheme['legends']['hidden']['text']>;
        };
        title: {
            text: Partial<CompleteTheme['legends']['title']['text']>;
        };
        text: Partial<CompleteTheme['legends']['text']>;
        ticks: {
            line: CompleteTheme['legends']['ticks']['line'];
            text: Partial<CompleteTheme['legends']['ticks']['text']>;
        };
    };
    labels: {
        text: Partial<CompleteTheme['labels']['text']>;
    };
    markers: Partial<CompleteTheme['markers']>;
    dots: {
        text: Partial<CompleteTheme['dots']['text']>;
    };
    tooltip: CompleteTheme['tooltip'];
    annotations: {
        text: Partial<CompleteTheme['annotations']['text']>;
        link: CompleteTheme['annotations']['link'];
        outline: CompleteTheme['annotations']['outline'];
        symbol: CompleteTheme['annotations']['symbol'];
    };
};

Required properties without inheritance.
The theme supports defining styles at the top level (for text for example), which are then used to populate similar nested properties.
For example text will be merged with axis.ticks.text, we use this approach so that it's simpler to define global styles.

type ValueFormat

type ValueFormat<Value, Context = void> =
    | string // d3 formatter
    // explicit formatting function
    | (Context extends void
          ? (value: Value) => string
          : (value: Value, context: Context) => string);

Package Files (1)

index.d.ts

Dependencies (11)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (1)

react

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@nivo/core.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@nivo/core)

HTML

<a href="https://www.jsdocs.io/package/@nivo/core"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated just now.
Package analyzed in 5275 ms.
Missing or incorrect documentation? Open an issue for this package.