1 | // Type definitions for ReactNativeChartKit 2.6
|
2 | // Project: https://github.com/indiespirit/react-native-chart-kit
|
3 | // TypeScript Version: 3.0
|
4 |
|
5 | import * as React from "react";
|
6 | import { ViewStyle } from "react-native";
|
7 | import { TextProps } from "react-native-svg";
|
8 |
|
9 | export interface Dataset {
|
10 | /** The data corresponding to the x-axis label. */
|
11 | data: number[];
|
12 | /** A function returning the color of the stroke given an input opacity value. */
|
13 | color: (opacity: number) => string;
|
14 | /** The width of the stroke. Defaults to 2. */
|
15 | strokeWidth: number;
|
16 | }
|
17 |
|
18 | export interface ChartData {
|
19 | /** The x-axis labels */
|
20 | labels: string[];
|
21 | datasets: Dataset[];
|
22 | }
|
23 |
|
24 | // LineChart
|
25 | export interface LineChartProps {
|
26 | /**
|
27 | * Data for the chart.
|
28 | *
|
29 | * Example from [docs](https://github.com/indiespirit/react-native-chart-kit#line-chart):
|
30 | *
|
31 | * ```javascript
|
32 | * const data = {
|
33 | * labels: ['January', 'February', 'March', 'April', 'May', 'June'],
|
34 | * datasets: [{
|
35 | * data: [ 20, 45, 28, 80, 99, 43 ],
|
36 | * color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`, // optional
|
37 | * strokeWidth: 2 // optional
|
38 | * }]
|
39 | * }
|
40 | * ```
|
41 | */
|
42 | data: ChartData;
|
43 | /**
|
44 | * Width of the chart, use 'Dimensions' library to get the width of your screen for responsive.
|
45 | */
|
46 | width: number;
|
47 | /**
|
48 | * Height of the chart.
|
49 | */
|
50 | height: number;
|
51 | /**
|
52 | * Show dots on the line - default: True.
|
53 | */
|
54 | withDots?: boolean;
|
55 | /**
|
56 | * Show shadow for line - default: True.
|
57 | */
|
58 | withShadow?: boolean;
|
59 | /**
|
60 | * Show inner dashed lines - default: True.
|
61 | */
|
62 | withInnerLines?: boolean;
|
63 | /**
|
64 | * Show outer dashed lines - default: True.
|
65 | */
|
66 | withOuterLines?: boolean;
|
67 | /**
|
68 | * Show vertical labels - default: True.
|
69 | */
|
70 | withVerticalLabels?: boolean;
|
71 | /**
|
72 | * Show horizontal labels - default: True.
|
73 | */
|
74 | withHorizontalLabels?: boolean;
|
75 | /**
|
76 | * Render charts from 0 not from the minimum value. - default: False.
|
77 | */
|
78 | fromZero?: boolean;
|
79 | /**
|
80 | * Prepend text to horizontal labels -- default: ''.
|
81 | */
|
82 | yAxisLabel?: string;
|
83 | /**
|
84 | * Append text to horizontal labels -- default: ''.
|
85 | */
|
86 | yAxisSuffix?: string;
|
87 | /**
|
88 | * Prepend text to vertical labels -- default: ''.
|
89 | */
|
90 | xAxisLabel?: string;
|
91 | /**
|
92 | * Configuration object for the chart, see example:
|
93 | *
|
94 | * ```javascript
|
95 | * const chartConfig = {
|
96 | * backgroundGradientFrom: "#1E2923",
|
97 | * backgroundGradientFromOpacity: 0,
|
98 | * backgroundGradientTo: "#08130D",
|
99 | * backgroundGradientToOpacity: 0.5,
|
100 | * color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
|
101 | * labelColor: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
|
102 | * strokeWidth: 2, // optional, default 3
|
103 | * barPercentage: 0.5
|
104 | * };
|
105 | * ```
|
106 | */
|
107 | chartConfig: ChartConfig;
|
108 | /**
|
109 | * This function takes a [whole bunch](https://github.com/indiespirit/react-native-chart-kit/blob/master/src/line-chart.js#L266)
|
110 | * of stuff and can render extra elements,
|
111 | * such as data point info or additional markup.
|
112 | */
|
113 | decorator?: Function;
|
114 | /**
|
115 | * Callback that is called when a data point is clicked.
|
116 | */
|
117 | onDataPointClick?: (data: {
|
118 | index: number;
|
119 | value: number;
|
120 | dataset: Dataset;
|
121 | x: number;
|
122 | y: number;
|
123 | getColor: (opacity: number) => string;
|
124 | }) => void;
|
125 | /**
|
126 | * Style of the container view of the chart.
|
127 | */
|
128 | style?: ViewStyle;
|
129 | /**
|
130 | * Add this prop to make the line chart smooth and curvy.
|
131 | *
|
132 | * [Example](https://github.com/indiespirit/react-native-chart-kit#bezier-line-chart)
|
133 | */
|
134 | bezier?: boolean;
|
135 | /**
|
136 | * Defines the dot color function that is used to calculate colors of dots in a line chart.
|
137 | * Takes `(dataPoint, dataPointIndex)` as arguments.
|
138 | */
|
139 | getDotColor?: (dataPoint: any, index: number) => string;
|
140 | /**
|
141 | * Rotation angle of the horizontal labels - default 0 (degrees).
|
142 | */
|
143 | horizontalLabelRotation?: number;
|
144 | /**
|
145 | * Rotation angle of the vertical labels - default 0 (degrees).
|
146 | */
|
147 | verticalLabelRotation?: number;
|
148 | /**
|
149 | * Offset for Y axis labels.
|
150 | */
|
151 | yLabelsOffset?: number;
|
152 | /**
|
153 | * Offset for X axis labels.
|
154 | */
|
155 | xLabelsOffset?: number;
|
156 | /**
|
157 | * Array of indices of the data points you don't want to display.
|
158 | */
|
159 | hidePointsAtIndex?: number[];
|
160 | /**
|
161 | * This function change the format of the display value of the Y label.
|
162 | * Takes the y value as argument and should return the desirable string.
|
163 | */
|
164 | formatYLabel?: (yValue: string) => string;
|
165 | /**
|
166 | * This function change the format of the display value of the X label.
|
167 | * Takes the X value as argument and should return the desirable string.
|
168 | */
|
169 | formatXLabel?: (xValue: string) => string;
|
170 | /**
|
171 | * Provide props for a data point dot.
|
172 | */
|
173 | getDotProps?: (dataPoint: any, index: number) => object;
|
174 | }
|
175 |
|
176 | export class LineChart extends React.Component<LineChartProps> {}
|
177 |
|
178 | // ProgressChart
|
179 |
|
180 | export type ProgressChartData =
|
181 | | Array<number>
|
182 | | { labels: Array<string>; data: Array<number> };
|
183 | export interface ProgressChartProps {
|
184 | data: ProgressChartData;
|
185 | width: number;
|
186 | height: number;
|
187 | chartConfig: ChartConfig;
|
188 | hideLegend: boolean;
|
189 | }
|
190 |
|
191 | export class ProgressChart extends React.Component<ProgressChartProps> {}
|
192 |
|
193 | // BarChart
|
194 | export interface BarChartProps {
|
195 | data: ChartData;
|
196 | width: number;
|
197 | height: number;
|
198 | fromZero?: boolean;
|
199 | withInnerLines?: boolean;
|
200 | yAxisLabel: string;
|
201 | yAxisSuffix: string;
|
202 | chartConfig: ChartConfig;
|
203 | style?: ViewStyle;
|
204 | horizontalLabelRotation?: number;
|
205 | verticalLabelRotation?: number;
|
206 | }
|
207 |
|
208 | export class BarChart extends React.Component<BarChartProps> {}
|
209 |
|
210 | // StackedBarChart
|
211 | export interface StackedBarChartData {
|
212 | labels: string[];
|
213 | legend: string[];
|
214 | data: number[][];
|
215 | barColors: string[];
|
216 | }
|
217 |
|
218 | export interface StackedBarChartProps {
|
219 | /**
|
220 | * E.g.
|
221 | * ```javascript
|
222 | * const data = {
|
223 | * labels: ["Test1", "Test2"],
|
224 | * legend: ["L1", "L2", "L3"],
|
225 | * data: [[60, 60, 60], [30, 30, 60]],
|
226 | * barColors: ["#dfe4ea", "#ced6e0", "#a4b0be"]
|
227 | * };
|
228 | * ```
|
229 | */
|
230 | data: StackedBarChartData;
|
231 | width: number;
|
232 | height: number;
|
233 | chartConfig: ChartConfig;
|
234 | style?: ViewStyle;
|
235 | }
|
236 |
|
237 | export class StackedBarChart extends React.Component<StackedBarChartProps> {}
|
238 |
|
239 | // PieChart
|
240 | export interface PieChartProps {
|
241 | data: Array<any>;
|
242 | width: number;
|
243 | height: number;
|
244 | chartConfig: ChartConfig;
|
245 | accessor: string;
|
246 | backgroundColor: string;
|
247 | paddingLeft: string;
|
248 | center?: Array<number>;
|
249 | absolute?: boolean;
|
250 | hasLegend?: boolean;
|
251 | }
|
252 |
|
253 | export class PieChart extends React.Component<PieChartProps> {}
|
254 |
|
255 | // ContributionGraph
|
256 | export interface ContributionGraphProps {
|
257 | values: Array<any>;
|
258 | endDate: Date;
|
259 | numDays: number;
|
260 | width: number;
|
261 | height: number;
|
262 | chartConfig: ChartConfig;
|
263 | accessor?: string;
|
264 | }
|
265 |
|
266 | export class ContributionGraph extends React.Component<
|
267 | ContributionGraphProps
|
268 | > {}
|
269 |
|
270 | // AbstractChart
|
271 | export class AbstractChart extends React.Component {}
|
272 |
|
273 | // ChartConfig
|
274 | export interface ChartConfig {
|
275 | backgroundColor?: string;
|
276 | /**
|
277 | * Defines the first color in the linear gradient of a chart's background
|
278 | */
|
279 | backgroundGradientFrom?: string;
|
280 | /**
|
281 | * Defines the first color opacity in the linear gradient of a chart's background
|
282 | */
|
283 | backgroundGradientFromOpacity?: number;
|
284 | /**
|
285 | * Defines the second color in the linear gradient of a chart's background
|
286 | */
|
287 | backgroundGradientTo?: string;
|
288 | /**
|
289 | * Defines the second color opacity in the linear gradient of a chart's background
|
290 | */
|
291 | backgroundGradientToOpacity?: number;
|
292 | fillShadowGradient?: string;
|
293 | fillShadowGradientOpacity?: number;
|
294 | /**
|
295 | * Defines the base color function that is used to calculate colors of labels and sectors used in a chart
|
296 | */
|
297 | color: (opacity: number, index?: number) => string;
|
298 | /**
|
299 | * Defines the function that is used to calculate the color of the labels used in a chart.
|
300 | */
|
301 | labelColor: (opacity: number) => string;
|
302 | /**
|
303 | * Defines the base stroke width in a chart
|
304 | */
|
305 | strokeWidth?: number;
|
306 | /**
|
307 | * Defines the percent (0-1) of the available width each bar width in a chart
|
308 | */
|
309 | barPercentage?: number;
|
310 | /**
|
311 | * Override styles of the background lines, refer to react-native-svg's Line documentation
|
312 | */
|
313 | propsForBackgroundLines?: object;
|
314 | /**
|
315 | * Override styles of the labels, refer to react-native-svg's Text documentation
|
316 | */
|
317 | propsForLabels?: TextProps;
|
318 | decimalPlaces?: number;
|
319 | style?: ViewStyle;
|
320 | }
|