@chakra-ui/charts/dist/types/use-chart.d.ts

Data visualization components for Chakra UI

import type { Tokens } from "@chakra-ui/react";
import * as React from "react";
export type ChartColor = Tokens["colors"] | React.CSSProperties["color"];
export type ChartSize = Tokens["sizes"] | (string & {});
export type ChartSpacing = Tokens["spacing"] | (string & {});
type ItemDataKey<T> = keyof T;
interface SeriesItem<T> {
    name?: ItemDataKey<T>;
    color?: ChartColor;
    icon?: React.ReactNode;
    label?: React.ReactNode;
    stackId?: string;
    yAxisId?: string;
    strokeDasharray?: string;
    id?: string;
}
export interface UseChartProps<T> {
    data: T[];
    series?: SeriesItem<T>[];
    sort?: {
        by: ItemDataKey<T>;
        direction: "asc" | "desc";
    };
}
type ValueDomain = [number, number] | ((props: {
    min: number;
    max: number;
}) => [number, number]);
export declare function useChart<T = any>(props: UseChartProps<T>): {
    id: string;
    key: <K extends ItemDataKey<T>>(prop: K | undefined) => K;
    data: T[];
    groupBy: (key: ItemDataKey<T>) => T[][];
    series: SeriesItem<T>[];
    getSeries: (item: unknown) => SeriesItem<T> | undefined;
    color: (key: ChartColor | undefined) => any;
    size: (key: ChartSize | undefined) => any;
    spacing: (key: ChartSpacing | undefined) => any;
    formatNumber: (options?: Intl.NumberFormatOptions) => (value: number) => string;
    formatDate: (options?: Intl.DateTimeFormatOptions) => (value: string) => string;
    highlightedSeries: string | null;
    setHighlightedSeries: React.Dispatch<React.SetStateAction<string | null>>;
    isHighlightedSeries: (name: string | undefined) => boolean;
    getSeriesOpacity: (name: string | undefined, fallback?: number) => number | undefined;
    getTotal: (key: keyof T) => number;
    getMin: (key: keyof T) => number;
    getMax: (key: keyof T) => number;
    getPayloadTotal: <T_1 extends {
        value?: string;
    }>(payload: Array<T_1> | undefined) => number | undefined;
    getValuePercent: (key: keyof T, value: number, domain?: ValueDomain) => number;
};
export type UseChartReturn<T> = ReturnType<typeof useChart<T>>;
export declare function getProp<T = unknown>(item: unknown, key: string | undefined): T | undefined;
export {};