import React from "react"; import { Animated, TextInput, ViewStyle } from "react-native"; import AbstractChart, { AbstractChartConfig, AbstractChartProps } from "../AbstractChart"; import { ChartData, Dataset } from "../HelperTypes"; export interface LineChartData extends ChartData { legend?: string[]; } export interface LineChartProps extends AbstractChartProps { /** * Data for the chart. * * Example from [docs](https://github.com/indiespirit/react-native-chart-kit#line-chart): * * ```javascript * const data = { * labels: ['January', 'February', 'March', 'April', 'May', 'June'], * datasets: [{ * data: [ 20, 45, 28, 80, 99, 43 ], * color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`, // optional * strokeWidth: 2 // optional * }], * legend: ["Rainy Days", "Sunny Days", "Snowy Days"] // optional * } * ``` */ data: LineChartData; /** * Width of the chart, use 'Dimensions' library to get the width of your screen for responsive. */ width: number; /** * Height of the chart. */ height: number; /** * Show dots on the line - default: True. */ withDots?: boolean; /** * Show shadow for line - default: True. */ withShadow?: boolean; /** * Show inner dashed lines - default: True. */ withScrollableDot?: boolean; withInnerLines?: boolean; /** * Show outer dashed lines - default: True. */ withOuterLines?: boolean; /** * Show vertical lines - default: True. */ withVerticalLines?: boolean; /** * Show horizontal lines - default: True. */ withHorizontalLines?: boolean; /** * Show vertical labels - default: True. */ withVerticalLabels?: boolean; /** * Show horizontal labels - default: True. */ withHorizontalLabels?: boolean; /** * Render charts from 0 not from the minimum value. - default: False. */ fromZero?: boolean; /** * Prepend text to horizontal labels -- default: ''. */ yAxisLabel?: string; /** * Append text to horizontal labels -- default: ''. */ yAxisSuffix?: string; /** * Prepend text to vertical labels -- default: ''. */ xAxisLabel?: string; /** * Configuration object for the chart, see example: * * ```javascript * const chartConfig = { * backgroundGradientFrom: "#1E2923", * backgroundGradientFromOpacity: 0, * backgroundGradientTo: "#08130D", * backgroundGradientToOpacity: 0.5, * color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`, * labelColor: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`, * strokeWidth: 2, // optional, default 3 * barPercentage: 0.5 * }; * ``` */ chartConfig?: AbstractChartConfig; /** * Divide axis quantity by the input number -- default: 1. */ yAxisInterval?: number; /** * Defines if chart is transparent */ transparent?: boolean; /** * This function takes a [whole bunch](https://github.com/indiespirit/react-native-chart-kit/blob/master/src/line-chart.js#L266) * of stuff and can render extra elements, * such as data point info or additional markup. */ decorator?: Function; /** * Callback that is called when a data point is clicked. */ onDataPointClick?: (data: { index: number; value: number; dataset: Dataset; x: number; y: number; getColor: (opacity: number) => string; }) => void; /** * Style of the container view of the chart. */ style?: Partial; /** * Add this prop to make the line chart smooth and curvy. * * [Example](https://github.com/indiespirit/react-native-chart-kit#bezier-line-chart) */ bezier?: boolean; /** * Defines the dot color function that is used to calculate colors of dots in a line chart. * Takes `(dataPoint, dataPointIndex)` as arguments. */ getDotColor?: (dataPoint: any, index: number) => string; /** * Renders additional content for dots in a line chart. * Takes `({x, y, index})` as arguments. */ renderDotContent?: (params: { x: number; y: number; index: number; }) => React.ReactNode; /** * Rotation angle of the horizontal labels - default 0 (degrees). */ horizontalLabelRotation?: number; /** * Rotation angle of the vertical labels - default 0 (degrees). */ verticalLabelRotation?: number; /** * Offset for Y axis labels. */ yLabelsOffset?: number; /** * Offset for X axis labels. */ xLabelsOffset?: number; /** * Array of indices of the data points you don't want to display. */ hidePointsAtIndex?: number[]; /** * This function change the format of the display value of the Y label. * Takes the y value as argument and should return the desirable string. */ formatYLabel?: (yValue: string) => string; /** * This function change the format of the display value of the X label. * Takes the X value as argument and should return the desirable string. */ formatXLabel?: (xValue: string) => string; /** * Provide props for a data point dot. */ getDotProps?: (dataPoint: any, index: number) => object; /** * The number of horizontal lines */ segments?: number; } declare type LineChartState = { scrollableDotHorizontalOffset: Animated.Value; }; declare class LineChart extends AbstractChart { label: React.RefObject; state: { scrollableDotHorizontalOffset: Animated.Value; }; getColor: (dataset: Dataset, opacity: number) => string; getStrokeWidth: (dataset: Dataset) => number; getDatas: (data: Dataset[]) => number[]; getPropsForDots: (x: any, i: number) => object; renderDots: ({ data, width, height, paddingTop, paddingRight, onDataPointClick }: Pick & { onDataPointClick: LineChartProps["onDataPointClick"]; }) => React.ReactNode[]; renderScrollableDot: ({ data, width, height, paddingTop, paddingRight, scrollableDotHorizontalOffset, scrollableDotFill, scrollableDotStrokeColor, scrollableDotStrokeWidth, scrollableDotRadius, scrollableInfoViewStyle, scrollableInfoTextStyle, scrollableInfoTextDecorator, scrollableInfoSize, scrollableInfoOffset }: AbstractChartConfig & { onDataPointClick: LineChartProps["onDataPointClick"]; scrollableDotHorizontalOffset: Animated.Value; }) => any[]; renderShadow: ({ width, height, paddingRight, paddingTop, data, useColorFromDataset }: Pick & { useColorFromDataset: AbstractChartConfig["useShadowColorFromDataset"]; }) => JSX.Element[]; renderLine: ({ width, height, paddingRight, paddingTop, data, linejoinType }: Pick) => any[]; getBezierLinePoints: (dataset: Dataset, { width, height, paddingRight, paddingTop, data }: Pick) => string; renderBezierLine: ({ data, width, height, paddingRight, paddingTop }: Pick) => JSX.Element[]; renderBezierShadow: ({ width, height, paddingRight, paddingTop, data, useColorFromDataset }: Pick & { useColorFromDataset: AbstractChartConfig["useShadowColorFromDataset"]; }) => JSX.Element[]; renderLegend: (width: any, legendOffset: any) => JSX.Element[]; render(): JSX.Element; } export default LineChart; //# sourceMappingURL=LineChart.d.ts.map