@nivo/core
- Version 0.83.0
- Published
- 340 kB
- 12 dependencies
- MIT license
Install
npm i @nivo/core
yarn add @nivo/core
pnpm add @nivo/core
Overview
<a href="https://nivo.rocks"><img alt="nivo" src="https://raw.githubusercontent.com/plouc/nivo/master/nivo.png" width="216" height="68"/></a>
Index
Variables
Functions
- absoluteAngleDegrees()
- alignBox()
- clampArc()
- curveFromProp()
- Defs()
- degreesToRadians()
- getAngle()
- getDistance()
- getPropertyAccessor()
- getRelativeCursor()
- getValueFormatter()
- isCursorInRect()
- linearGradientDef()
- normalizeAngle()
- PatternDots()
- patternDotsDef()
- PatternLines()
- patternLinesDef()
- PatternSquares()
- patternSquaresDef()
- positionFromAngle()
- radiansToDegrees()
- useAnimatedPath()
- useCurveInterpolation()
- useDimensions()
- useMeasure()
- useMotionConfig()
- usePartialTheme()
- usePropertyAccessor()
- useTheme()
- useValueFormatter()
Interfaces
Type Aliases
- Accessor
- AreaCurve
- AreaCurveFactoryId
- Box
- BoxAlign
- CartesianMarkersType
- ClosedCurveFactoryId
- Colors
- CompleteTheme
- ContainerType
- CssMixBlendMode
- CurveFactoryId
- DatumPropertyAccessor
- DatumValue
- Def
- DefaultMargin
- DefsProps
- DotsItemSymbolComponent
- ExtractProps
- GetColor
- GradientColor
- LinearGradientDef
- LineCurveFactoryId
- Margin
- MotionDefaultProps
- MotionProps
- PatternDotsDef
- PatternLinesDef
- PatternSquaresDef
- PropertyAccessor
- ResponsiveWrapperType
- StackOffset
- StackOrder
- SvgFillMatcher
- SvgWrapperType
- Theme
- ThemeProviderType
- ValueFormat
Variables
variable boxAlignments
const boxAlignments: BoxAlign[];
variable CartesianMarkers
const CartesianMarkers: CartesianMarkersType;
variable closedCurvePropKeys
const closedCurvePropKeys: 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 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) => [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 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 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> {}
interface ColorProps
interface ColorProps<T> {}
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 {}
interface DotsItemProps
interface DotsItemProps<D = any> {}
property borderColor
borderColor: string;
property borderWidth
borderWidth: number;
property color
color: string;
property datum
datum: D;
property label
label?: string | number;
property labelTextAnchor
labelTextAnchor?: 'start' | 'middle' | 'end';
property labelYOffset
labelYOffset?: number;
property size
size: number;
property symbol
symbol?: DotsItemSymbolComponent;
property x
x: number;
property y
y: number;
interface DotsItemSymbolProps
interface DotsItemSymbolProps {}
property borderColor
borderColor: string;
property borderWidth
borderWidth: number;
property color
color: string;
property size
size: number;
interface SvgDefsAndFill
interface SvgDefsAndFill<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 = string[] | string;
type CompleteTheme
type CompleteTheme = { crosshair: { line: { stroke: string; strokeWidth: number; strokeOpacity: number; strokeDasharray: string; }; }; background: string; fontFamily: string; fontSize: number; textColor: string; axis: { domain: { line: Partial<React.CSSProperties>; }; ticks: { line: Partial<React.CSSProperties>; text: Partial<React.CSSProperties>; }; legend: { text: Partial<React.CSSProperties>; }; }; grid: { line: Partial<React.CSSProperties>; }; legends: { hidden: { symbol: Partial<{ fill: string; opacity: number; }>; text: Partial<React.CSSProperties>; }; title: { text: Partial<React.CSSProperties>; }; text: Partial<React.CSSProperties>; ticks: { line: Partial<React.CSSProperties>; text: Partial<React.CSSProperties>; }; }; labels: { text: Partial<React.CSSProperties>; }; markers: { lineColor: string; lineStrokeWidth: number; textColor: string; fontSize: string | 0; text: Partial<React.CSSProperties>; }; dots: { text: Partial<React.CSSProperties>; }; tooltip: { 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: Def[];};
type DotsItemSymbolComponent
type DotsItemSymbolComponent = React.FunctionComponent<DotsItemSymbolProps>;
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 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 Theme
type Theme = Partial< Pick<CompleteTheme, 'background' | 'fontFamily' | 'fontSize' | 'textColor'> & { crosshair: Partial<{ line: Partial<CompleteTheme['crosshair']['line']>; }>; 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']>; }>; 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 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)
Dependencies (12)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (2)
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[](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 .
Package analyzed in 5541 ms. - Missing or incorrect documentation? Open an issue for this package.