import * as recharts_types_util_types from 'recharts/types/util/types'; import * as recharts_types_chart_types from 'recharts/types/chart/types'; import * as lodash from 'lodash'; import * as recharts_types_chart_AccessibilityManager from 'recharts/types/chart/AccessibilityManager'; import * as recharts_types_chart_generateCategoricalChart from 'recharts/types/chart/generateCategoricalChart'; import * as react from 'react'; import * as _yamada_ui_utils from '@yamada-ui/utils'; import { Dict } from '@yamada-ui/utils'; import * as _yamada_ui_core from '@yamada-ui/core'; import { CSSUIObject, PropGetter, RequiredPropGetter } from '@yamada-ui/core'; import * as Recharts from 'recharts'; import { LineProps, ChartCurveType, ChartLayoutType, LineChartProps, ReferenceLineProps } from './chart.types.mjs'; interface UseLineChartOptions { /** * Chart data. */ data: Dict[]; /** * An array of objects with `dataKey` and `color` keys. Determines which data should be consumed from the `data` array. */ series: LineProps[]; /** * Determines whether points with `null` values should be connected. * * @default true */ connectNulls?: boolean; /** * Type of the curve. * * @default `monotone` */ curveType?: ChartCurveType; /** * Controls fill opacity of all lines. * * @default 1 */ fillOpacity?: [number, number] | number; /** * Chart orientation. * * @default 'horizontal' */ layoutType?: ChartLayoutType; /** * Stroke width for the chart lines. * * @default 2 */ strokeWidth?: number; /** * If any two categorical charts have the same syncId, * these two charts can sync the position tooltip, and the startIndex, endIndex of Brush. */ syncId?: number | string; /** * Determines whether activeDots should be displayed. * * @default true */ withActiveDots?: boolean; /** * Determines whether dots should be displayed. * * @default true */ withDots?: boolean; /** * A label to display below the X axis. */ xAxisLabel?: string; /** * A label to display below the Y axis. */ yAxisLabel?: string; /** * Props passed down to recharts `LineChart` component. */ chartProps?: LineChartProps; /** * Props for the lines. */ lineProps?: Partial; /** * Reference lines that should be displayed on the chart. */ referenceLineProps?: ReferenceLineProps[]; } interface UseLineChartProps extends UseLineChartOptions { styles: Dict; } declare const useLineChart: ({ connectNulls, curveType, data, fillOpacity, layoutType, series, strokeWidth, styles, syncId, withActiveDots, withDots, xAxisLabel, yAxisLabel, referenceLineProps, ...rest }: UseLineChartProps) => { lineVars: { name: string; token?: _yamada_ui_core.ThemeToken; value?: _yamada_ui_core.Token; __prefix?: string; }[]; setHighlightedArea: react.Dispatch>; getLineChartProps: PropGetter any>; container?: HTMLElement; componentDidMount(): void; displayDefaultTooltip(): void; getSnapshotBeforeUpdate(prevProps: Readonly, prevState: Readonly): null; componentDidUpdate(prevProps: recharts_types_chart_generateCategoricalChart.CategoricalChartProps): void; componentWillUnmount(): void; getTooltipEventType(): recharts_types_util_types.TooltipEventType; getMouseInfo(event: recharts_types_chart_generateCategoricalChart.MousePointer): { xValue: any; yValue: any; chartX: number; chartY: number; } | { activeTooltipIndex: number; activeLabel: any; activePayload: any[]; activeCoordinate: recharts_types_util_types.ChartCoordinate; chartX: number; chartY: number; }; inRange(x: number, y: number, scale?: number): any; parseEventsOfWrapper(): any; addListener(): void; removeListener(): void; handleLegendBBoxUpdate: (box: DOMRect) => void; handleReceiveSyncEvent: (cId: string | number, data: recharts_types_chart_types.CategoricalChartState, emitter: Symbol) => void; handleBrushChange: ({ startIndex, endIndex }: { startIndex: number; endIndex: number; }) => void; handleMouseEnter: (e: react.MouseEvent) => void; triggeredAfterMouseMove: (e: recharts_types_chart_generateCategoricalChart.MousePointer) => any; handleItemMouseEnter: (el: any) => void; handleItemMouseLeave: () => void; handleMouseMove: (e: recharts_types_chart_generateCategoricalChart.MousePointer & Partial, keyof recharts_types_chart_generateCategoricalChart.MousePointer>>) => void; handleMouseLeave: (e: any) => void; handleOuterEvent: (e: react.MouseEvent | react.TouchEvent) => void; handleClick: (e: react.MouseEvent) => void; handleMouseDown: (e: react.MouseEvent | react.Touch) => void; handleMouseUp: (e: react.MouseEvent | react.Touch) => void; handleTouchMove: (e: react.TouchEvent) => void; handleTouchStart: (e: react.TouchEvent) => void; handleTouchEnd: (e: react.TouchEvent) => void; handleDoubleClick: (e: react.MouseEvent) => void; handleContextMenu: (e: react.MouseEvent) => void; triggerSyncEvent: (data: recharts_types_chart_types.CategoricalChartState) => void; applySyncEvent: (data: recharts_types_chart_types.CategoricalChartState) => void; filterFormatItem(item: any, displayName: any, childIndex: any): any; renderCursor: (element: react.ReactElement>) => react.JSX.Element; renderPolarAxis: (element: react.ReactElement>, displayName: string, index: number) => react.ReactElement>; renderPolarGrid: (element: react.ReactElement>) => react.ReactElement>; renderLegend: () => react.ReactElement>; renderTooltip: () => react.ReactElement>; renderBrush: (element: react.ReactElement>) => react.ReactElement>; renderReferenceElement: (element: react.ReactElement>, displayName: string, index: number) => react.ReactElement>; renderActivePoints: ({ item, activePoint, basePoint, childIndex, isRange }: any) => react.ReactElement>[]; renderGraphicChild: (element: react.ReactElement>, displayName: string, index: number) => any[]; renderCustomized: (element: react.ReactElement>, displayName: string, index: number) => react.ReactElement>; renderClipPath(): react.JSX.Element; getXScales(): { [x: string]: Function | recharts_types_util_types.ScaleType; }; getYScales(): { [x: string]: Function | recharts_types_util_types.ScaleType; }; getXScaleByAxisId(axisId: string): Function | recharts_types_util_types.ScaleType; getYScaleByAxisId(axisId: string): Function | recharts_types_util_types.ScaleType; getItemByXY(chartXY: { x: number; y: number; }): { graphicalItem: any; payload: any; }; renderMap: { CartesianGrid: { handler: (element: react.ReactElement>) => react.ReactElement>; once: boolean; }; ReferenceArea: { handler: (element: react.ReactElement>, displayName: string, index: number) => react.ReactElement>; }; ReferenceLine: { handler: (element: react.ReactElement>) => react.ReactElement>; }; ReferenceDot: { handler: (element: react.ReactElement>, displayName: string, index: number) => react.ReactElement>; }; XAxis: { handler: (element: react.ReactElement>) => react.ReactElement>; }; YAxis: { handler: (element: react.ReactElement>) => react.ReactElement>; }; Brush: { handler: (element: react.ReactElement>) => react.ReactElement>; once: boolean; }; Bar: { handler: (element: react.ReactElement>, displayName: string, index: number) => any[]; }; Line: { handler: (element: react.ReactElement>, displayName: string, index: number) => any[]; }; Area: { handler: (element: react.ReactElement>, displayName: string, index: number) => any[]; }; Radar: { handler: (element: react.ReactElement>, displayName: string, index: number) => any[]; }; RadialBar: { handler: (element: react.ReactElement>, displayName: string, index: number) => any[]; }; Scatter: { handler: (element: react.ReactElement>, displayName: string, index: number) => any[]; }; Pie: { handler: (element: react.ReactElement>, displayName: string, index: number) => any[]; }; Funnel: { handler: (element: react.ReactElement>, displayName: string, index: number) => any[]; }; Tooltip: { handler: (element: react.ReactElement>) => react.JSX.Element; once: boolean; }; PolarGrid: { handler: (element: react.ReactElement>) => react.ReactElement>; once: boolean; }; PolarAngleAxis: { handler: (element: react.ReactElement>, displayName: string, index: number) => react.ReactElement>; }; PolarRadiusAxis: { handler: (element: react.ReactElement>, displayName: string, index: number) => react.ReactElement>; }; Customized: { handler: (element: react.ReactElement>, displayName: string, index: number) => react.ReactElement>; }; }; render(): react.JSX.Element; context: unknown; setState(state: recharts_types_chart_types.CategoricalChartState | ((prevState: Readonly, props: Readonly) => recharts_types_chart_types.CategoricalChartState | Pick) | Pick, callback?: () => void): void; forceUpdate(callback?: () => void): void; readonly props: Readonly; state: Readonly; refs: { [key: string]: react.ReactInstance; }; shouldComponentUpdate?(nextProps: Readonly, nextState: Readonly, nextContext: any): boolean; componentDidCatch?(error: Error, errorInfo: react.ErrorInfo): void; componentWillMount?(): void; UNSAFE_componentWillMount?(): void; componentWillReceiveProps?(nextProps: Readonly, nextContext: any): void; UNSAFE_componentWillReceiveProps?(nextProps: Readonly, nextContext: any): void; componentWillUpdate?(nextProps: Readonly, nextState: Readonly, nextContext: any): void; UNSAFE_componentWillUpdate?(nextProps: Readonly, nextState: Readonly, nextContext: any): void; }>, "ref">, Omit any>; container?: HTMLElement; componentDidMount(): void; displayDefaultTooltip(): void; getSnapshotBeforeUpdate(prevProps: Readonly, prevState: Readonly): null; componentDidUpdate(prevProps: recharts_types_chart_generateCategoricalChart.CategoricalChartProps): void; componentWillUnmount(): void; getTooltipEventType(): recharts_types_util_types.TooltipEventType; getMouseInfo(event: recharts_types_chart_generateCategoricalChart.MousePointer): { xValue: any; yValue: any; chartX: number; chartY: number; } | { activeTooltipIndex: number; activeLabel: any; activePayload: any[]; activeCoordinate: recharts_types_util_types.ChartCoordinate; chartX: number; chartY: number; }; inRange(x: number, y: number, scale?: number): any; parseEventsOfWrapper(): any; addListener(): void; removeListener(): void; handleLegendBBoxUpdate: (box: DOMRect) => void; handleReceiveSyncEvent: (cId: string | number, data: recharts_types_chart_types.CategoricalChartState, emitter: Symbol) => void; handleBrushChange: ({ startIndex, endIndex }: { startIndex: number; endIndex: number; }) => void; handleMouseEnter: (e: react.MouseEvent) => void; triggeredAfterMouseMove: (e: recharts_types_chart_generateCategoricalChart.MousePointer) => any; handleItemMouseEnter: (el: any) => void; handleItemMouseLeave: () => void; handleMouseMove: (e: recharts_types_chart_generateCategoricalChart.MousePointer & Partial, keyof recharts_types_chart_generateCategoricalChart.MousePointer>>) => void; handleMouseLeave: (e: any) => void; handleOuterEvent: (e: react.MouseEvent | react.TouchEvent) => void; handleClick: (e: react.MouseEvent) => void; handleMouseDown: (e: react.MouseEvent | react.Touch) => void; handleMouseUp: (e: react.MouseEvent | react.Touch) => void; handleTouchMove: (e: react.TouchEvent) => void; handleTouchStart: (e: react.TouchEvent) => void; handleTouchEnd: (e: react.TouchEvent) => void; handleDoubleClick: (e: react.MouseEvent) => void; handleContextMenu: (e: react.MouseEvent) => void; triggerSyncEvent: (data: recharts_types_chart_types.CategoricalChartState) => void; applySyncEvent: (data: recharts_types_chart_types.CategoricalChartState) => void; filterFormatItem(item: any, displayName: any, childIndex: any): any; renderCursor: (element: react.ReactElement>) => react.JSX.Element; renderPolarAxis: (element: react.ReactElement>, displayName: string, index: number) => react.ReactElement>; renderPolarGrid: (element: react.ReactElement>) => react.ReactElement>; renderLegend: () => react.ReactElement>; renderTooltip: () => react.ReactElement>; renderBrush: (element: react.ReactElement>) => react.ReactElement>; renderReferenceElement: (element: react.ReactElement>, displayName: string, index: number) => react.ReactElement>; renderActivePoints: ({ item, activePoint, basePoint, childIndex, isRange }: any) => react.ReactElement>[]; renderGraphicChild: (element: react.ReactElement>, displayName: string, index: number) => any[]; renderCustomized: (element: react.ReactElement>, displayName: string, index: number) => react.ReactElement>; renderClipPath(): react.JSX.Element; getXScales(): { [x: string]: Function | recharts_types_util_types.ScaleType; }; getYScales(): { [x: string]: Function | recharts_types_util_types.ScaleType; }; getXScaleByAxisId(axisId: string): Function | recharts_types_util_types.ScaleType; getYScaleByAxisId(axisId: string): Function | recharts_types_util_types.ScaleType; getItemByXY(chartXY: { x: number; y: number; }): { graphicalItem: any; payload: any; }; renderMap: { CartesianGrid: { handler: (element: react.ReactElement>) => react.ReactElement>; once: boolean; }; ReferenceArea: { handler: (element: react.ReactElement>, displayName: string, index: number) => react.ReactElement>; }; ReferenceLine: { handler: (element: react.ReactElement>) => react.ReactElement>; }; ReferenceDot: { handler: (element: react.ReactElement>, displayName: string, index: number) => react.ReactElement>; }; XAxis: { handler: (element: react.ReactElement>) => react.ReactElement>; }; YAxis: { handler: (element: react.ReactElement>) => react.ReactElement>; }; Brush: { handler: (element: react.ReactElement>) => react.ReactElement>; once: boolean; }; Bar: { handler: (element: react.ReactElement>, displayName: string, index: number) => any[]; }; Line: { handler: (element: react.ReactElement>, displayName: string, index: number) => any[]; }; Area: { handler: (element: react.ReactElement>, displayName: string, index: number) => any[]; }; Radar: { handler: (element: react.ReactElement>, displayName: string, index: number) => any[]; }; RadialBar: { handler: (element: react.ReactElement>, displayName: string, index: number) => any[]; }; Scatter: { handler: (element: react.ReactElement>, displayName: string, index: number) => any[]; }; Pie: { handler: (element: react.ReactElement>, displayName: string, index: number) => any[]; }; Funnel: { handler: (element: react.ReactElement>, displayName: string, index: number) => any[]; }; Tooltip: { handler: (element: react.ReactElement>) => react.JSX.Element; once: boolean; }; PolarGrid: { handler: (element: react.ReactElement>) => react.ReactElement>; once: boolean; }; PolarAngleAxis: { handler: (element: react.ReactElement>, displayName: string, index: number) => react.ReactElement>; }; PolarRadiusAxis: { handler: (element: react.ReactElement>, displayName: string, index: number) => react.ReactElement>; }; Customized: { handler: (element: react.ReactElement>, displayName: string, index: number) => react.ReactElement>; }; }; render(): react.JSX.Element; context: unknown; setState(state: recharts_types_chart_types.CategoricalChartState | ((prevState: Readonly, props: Readonly) => recharts_types_chart_types.CategoricalChartState | Pick) | Pick, callback?: () => void): void; forceUpdate(callback?: () => void): void; readonly props: Readonly; state: Readonly; refs: { [key: string]: react.ReactInstance; }; shouldComponentUpdate?(nextProps: Readonly, nextState: Readonly, nextContext: any): boolean; componentDidCatch?(error: Error, errorInfo: react.ErrorInfo): void; componentWillMount?(): void; UNSAFE_componentWillMount?(): void; componentWillReceiveProps?(nextProps: Readonly, nextContext: any): void; UNSAFE_componentWillReceiveProps?(nextProps: Readonly, nextContext: any): void; componentWillUpdate?(nextProps: Readonly, nextState: Readonly, nextContext: any): void; UNSAFE_componentWillUpdate?(nextProps: Readonly, nextState: Readonly, nextContext: any): void; }>, "ref">>; getLineProps: RequiredPropGetter<{ index: number; } & Partial, Omit>; }; type UseLineChartReturn = ReturnType; export { type UseLineChartOptions, type UseLineChartReturn, useLineChart };