@nivo/core

const boxAlignments: BoxAlign[];

const CartesianMarkers: CartesianMarkersType;

const closedCurvePropKeys: ClosedCurveFactoryId[];

const Container: ContainerType;

const defaultAnimate: boolean;

const defaultMargin: DefaultMargin;

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

const motionDefaultProps: MotionDefaultProps;

const ResponsiveWrapper: ResponsiveWrapperType;

const SvgWrapper: SvgWrapperType;

const ThemeProvider: ThemeProviderType;

absoluteAngleDegrees: (degrees: number) => number;

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

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

curveFromProp: (interpolation: CurveFactoryId) => CurveFactory;

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

degreesToRadians: (degrees: number) => number;

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

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

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

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

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

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

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

normalizeAngle: (degrees: number) => number;

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

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

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

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

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

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

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

radiansToDegrees: (radians: number) => number;

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

useCurveInterpolation: (interpolation: CurveFactoryId) => CurveFactory;

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

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

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

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

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

useTheme: () => CompleteTheme;

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

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

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

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

type Box = Partial<Margin>;

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

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

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

type Colors = string[] | string;

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: Partial<React.CSSProperties>;
    };
    markers: {
        lineColor: string;
        lineStrokeWidth: number;
        textColor: string;
        fontSize: string | 0;
        text: TextStyle;
    };
    dots: {
        text: TextStyle;
    };
    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 = (props: React.PropsWithChildren<ContainerProps>) => JSX.Element;

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

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

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

type DatumValue = string | number | Date;

type Def = LinearGradientDef | PatternDotsDef | PatternSquaresDef | PatternLinesDef;

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

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

type DotsItemSymbolComponent = React.FunctionComponent<DotsItemSymbolProps>;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 = {
    fontFamily: Exclude<React.CSSProperties['fontFamily'], undefined>;
    fontSize: Exclude<React.CSSProperties['fontSize'], undefined>;
    fill: string;
    outlineWidth: number;
    outlineColor: string;
} & Partial<React.CSSProperties>;

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 = (
    props: React.PropsWithChildren<ThemeProviderProps>
) => JSX.Element;

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'];
    };
};

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