diff --git a/types/react-native-svg-charts/index.d.ts b/types/react-native-svg-charts/index.d.ts index a36d5954b5..caf7b610b8 100644 --- a/types/react-native-svg-charts/index.d.ts +++ b/types/react-native-svg-charts/index.d.ts @@ -18,10 +18,10 @@ import { } from 'react-native-svg'; export type ScaleType = - | ScaleLinear - | ScaleLogarithmic - | ScalePower - | ScaleTime; +| ScaleLinear +| ScaleLogarithmic +| ScalePower +| ScaleTime; export type ScaleFunction = () => ScaleType | ScaleBand; export type AccessorFunction = (props: { item: T, index: number }) => U; @@ -128,7 +128,8 @@ export interface StackedBarChartProps extends ChartProps { offset?: OffsetFunction; order?: OrderFunction; strokeColor?: string; - renderGradient: (props: { id: string }) => React.Component; + horizontal?: boolean; + renderGradient?: (props: { id: string }) => React.Component; spacingInner?: number; spacingOuter?: number; showGrid?: boolean; @@ -216,21 +217,15 @@ export interface HorizontalLineProps { } // Point - export interface PointProps { - x: (index: number) => number; - y: (value: number) => number; value?: number; radius?: number; index?: number; - color: string; + color?: string; } // Tooltip - export interface TooltipProps { - x: (index: number) => number; - y: (value: number) => number; value?: number; index?: number; height?: number; diff --git a/types/react-native-svg-charts/react-native-svg-charts-tests.tsx b/types/react-native-svg-charts/react-native-svg-charts-tests.tsx index 5f12c801fc..83c2639b40 100644 --- a/types/react-native-svg-charts/react-native-svg-charts-tests.tsx +++ b/types/react-native-svg-charts/react-native-svg-charts-tests.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; +import { View } from 'react-native'; import { Defs, LinearGradient, Stop } from 'react-native-svg'; -import { StackedAreaChart, XAxis, Grid } from 'react-native-svg-charts'; +import { StackedAreaChart, StackedBarChart, XAxis, Grid, Decorators } from 'react-native-svg-charts'; import { curveNatural } from 'd3-shape'; import { scaleTime } from 'd3-scale'; @@ -17,58 +18,79 @@ interface Props { } class Example extends React.Component { + renderStackedAreaChart = ({data, width}: Props) => ( + + + + + + + + + + + + new Date(value).toTimeString()} + numberOfTicks={8} + scale={scaleTime} + contentInset={{ left: 10, right: 10 }} + svg={{ + fillOpacity: .2, + fill: '#fff', + fontFamily: 'Regular', + fontSize: 10, + }} + xAccessor={({ item }) => item.time} + /> + x * width} + y={y => y * width} + svg={{ + stroke: '#fff', + strokeOpacity: .2, + }} + belowChart={true} + /> + + + + ) + + renderStackedBarChart = ({data, width}: Props) => ( + + ) + render() { const { data, width } = this.props; return ( - - - - - - - - - - - - new Date(value).toTimeString()} - numberOfTicks={8} - scale={scaleTime} - contentInset={{ left: 10, right: 10 }} - svg={{ - fillOpacity: .2, - fill: '#fff', - fontFamily: 'Regular', - fontSize: 10, - }} - xAccessor={({ item }) => item.time} - /> - x * width} - y={y => y * width} - svg={{ - stroke: '#fff', - strokeOpacity: .2, - }} - belowChart={true} - /> - + + {this.renderStackedAreaChart(this.props)} + {this.renderStackedBarChart(this.props)} + ); } } diff --git a/types/react-native-svg-charts/tslint.json b/types/react-native-svg-charts/tslint.json index 3db14f85ea..c040aa7670 100644 --- a/types/react-native-svg-charts/tslint.json +++ b/types/react-native-svg-charts/tslint.json @@ -1 +1,6 @@ -{ "extends": "dtslint/dt.json" } +{ + "extends": "dtslint/dt.json", + "rules": { + "strict-export-declare-modifiers": false + } +}