import type { VNode } from 'vue'; import type { AppConfig } from '@nuxt/schema'; import type { ChartDefinition, ChartPoint } from '@tanstack/charts/vue'; import theme from '#build/ui/chart'; import type { TooltipProps } from './Tooltip.vue'; import type { ComponentConfig } from '../types/tv'; type Chart = ComponentConfig; export type ChartData = Record; export interface ChartTooltipRow { label: string; value: string; color?: string; /** Whether this row is the point under the pointer. */ active?: boolean; } export interface ChartCategory { /** The key of each row holding the values of this series. */ key: keyof T & string; /** The name of the series in the legend and the tooltip. Defaults to the `key`. */ label?: string; /** The color of the series, a theme color or any CSS color. Takes precedence over `colors`. */ color?: string; } export interface ChartProps { /** * The type of chart to render. * @defaultValue 'line' */ type?: Chart['variants']['type']; /** The rows to plot, one object per x value, or per slice with `donut`. */ data?: T[]; /** The key of each row used for the x axis, or for the slice labels with `donut`. */ index?: keyof T & string; /** * The keys of each row plotted as series on the y axis, or objects to set their `label` and `color`. * With `donut`, the first one sets the slice values. */ categories?: ((keyof T & string) | ChartCategory)[]; /** * The series colors, in `categories` order, or in `data` order with `donut`. Accepts theme colors or any CSS color. * When there are more series than colors, the colors repeat as lighter tints. * Defaults to the `--ui-chart-1` to `--ui-chart-6` CSS variables. */ colors?: string[]; /** Stack the series on top of each other. Only applies to `area` and `bar`. */ stacked?: boolean; /** * The shape of the line between values. Only applies to `line` and `area`. * @defaultValue 'linear' */ curve?: 'linear' | 'monotone' | 'step'; /** * Draw a dot at each value. Only applies to `line`. * @defaultValue false */ points?: boolean; /** * Display horizontal grid lines. * @defaultValue true */ grid?: boolean; /** * Display the x axis. * @defaultValue true */ xAxis?: boolean; /** * Display the y axis. * @defaultValue true */ yAxis?: boolean; /** A title displayed along the x axis. */ xLabel?: string; /** A title displayed along the y axis. */ yLabel?: string; /** Display a legend. Defaults to `true` when there is more than one category, or more than one slice with `donut`. */ legend?: boolean; /** Format the values on the y axis and in the tooltip. */ format?: (value: number) => string; /** * Display a tooltip on the focused values. * `{ content: { side: 'top', sideOffset: 12 } }`{lang="ts-type"} * @defaultValue true */ tooltip?: boolean | TooltipProps; /** * The width of the ring in pixels. Only applies to `donut`. * @defaultValue 24 */ thickness?: number; /** * The height of the chart in pixels. Defaults to `300` unless `aspectRatio` is set. */ height?: number; /** The width over height ratio of the chart, used when `height` is not set. */ aspectRatio?: number; /** A fixed width in pixels. The chart follows its container by default. */ width?: number; /** * The width used on the server and before the container is measured. * @defaultValue 640 */ initialWidth?: number; /** The accessible name of the chart. Defaults to the categories, set it when using `definition`. */ ariaLabel?: string; /** A longer description of the chart for assistive technologies. */ ariaDescription?: string; /** * A complete TanStack Charts definition. Takes precedence over `data`, `index` and `categories`. * When it has its own `tooltip`, that one is used in place of the `tooltip` prop. * @see https://tanstack.com/charts/latest/docs/concepts/chart-definitions */ definition?: ChartDefinition; class?: any; ui?: Chart['slots']; } export interface ChartEmits { /** A point is selected with a click, Enter or Space. */ select: [point: ChartPoint | null]; /** The focused point changes, with the pointer or the keyboard. */ focusChange: [point: ChartPoint | null]; /** The points sharing the focused position change. */ focusGroupChange: [points: readonly ChartPoint[]]; } export interface ChartSlots { tooltip?(props: { title?: string; rows: ChartTooltipRow[]; points: ChartPoint[]; primaryPoint: ChartPoint; }): VNode[]; center?(props?: {}): VNode[]; } declare const _default: typeof __VLS_export; export default _default; declare const __VLS_export: (__VLS_props: NonNullable>["props"], __VLS_ctx?: __VLS_PrettifyLocal>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable>["expose"], __VLS_setup?: Promise<{ props: import("vue").PublicProps & __VLS_PrettifyLocal & { onSelect?: ((point: ChartPoint | null) => any) | undefined; onFocusChange?: ((point: ChartPoint | null) => any) | undefined; onFocusGroupChange?: ((points: readonly ChartPoint[]) => any) | undefined; }> & (typeof globalThis extends { __VLS_PROPS_FALLBACK: infer P; } ? P : {}); expose: (exposed: {}) => void; attrs: any; slots: ChartSlots; emit: ((evt: "select", point: ChartPoint | null) => void) & ((evt: "focusChange", point: ChartPoint | null) => void) & ((evt: "focusGroupChange", points: readonly ChartPoint[]) => void); }>) => import("vue").VNode & { __ctx?: NonNullable>; }; type __VLS_PrettifyLocal = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};