diff --git a/types/react-native-svg-charts/index.d.ts b/types/react-native-svg-charts/index.d.ts new file mode 100644 index 0000000000..88bde6c6d0 --- /dev/null +++ b/types/react-native-svg-charts/index.d.ts @@ -0,0 +1,275 @@ +// Type definitions for react-native-svg-charts 5.0 +// Project: https://github.com/JesperLekland/react-native-svg-charts +// Definitions by: Krzysztof Miemiec +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +import { ScaleBand, ScaleLinear, ScaleLogarithmic, ScalePower, ScaleTime } from 'd3-scale'; +import { CurveFactory, Series } from 'd3-shape'; +import * as React from 'react'; +import { StyleProp, ViewStyle } from 'react-native'; +import { + CommonPathProps, + LinearGradientProps, + LineProps, + PathProps, + RadialGradientProps, + TextProps +} from 'react-native-svg'; + +export type ScaleType = + | ScaleLinear + | ScaleLogarithmic + | ScalePower + | ScaleTime; + +export type ScaleFunction = () => ScaleType | ScaleBand; +export type AccessorFunction = (props: { item: T, index: number }) => U; +export type SortFunction = (a: T, b: T) => number; +export type OffsetFunction = (series: Series, order: number[]) => void; +export type OrderFunction = (series: Series) => number[]; + +// Chart + +export interface ChartProps { + data: T[]; + style?: StyleProp; + animate?: boolean; + animationDuration?: number; + svg?: Partial; + width?: number; + height?: number; + curve?: CurveFactory; + contentInset?: { + top?: number, + left?: number, + right?: number, + bottom?: number, + }; + gridMin?: number; + gridMax?: number; + gridProps?: GridProps; + numberOfTicks?: number; + xScale?: ScaleFunction; + yScale?: ScaleFunction; + xAccessor?: AccessorFunction; + yAccessor?: AccessorFunction; +} + +// Line Chart + +export class LineChart extends React.PureComponent> { +} + +// Pie Chart + +export interface PieChartData { + svg?: Partial; + key: string | number; + value?: number; + arc?: { + outerRadius?: number | string; + cornerRadius?: number | string; + }; +} + +export interface PieChartProps extends ChartProps { + innerRadius?: number | string; + outerRadius?: number | string; + labelRadius?: number | string; + padAngle?: number; + sort?: SortFunction; + valueAccessor?: AccessorFunction; +} + +export class PieChart extends React.PureComponent> { +} + +// Area Chart + +export interface AreaChartProps extends ChartProps { + start?: number; +} + +export class AreaChart extends React.PureComponent> { +} + +// Stacked Area Chart + +export interface StackedAreaChartProps extends ChartProps { + keys: ReadonlyArray; + colors: string[]; + offset?: OffsetFunction; + order?: OrderFunction; + renderGradient?: (props: { + id: string, + width: number, + height: number, + x: number, + y: number, + index: number, + key: keyof T, + color: string, + }) => React.Component; + showGrid?: boolean; + extras?: any[]; + renderDecorator?: () => {}; +} + +export class StackedAreaChart extends React.PureComponent> { + static extractDataPoints(data: T[], keys: ReadonlyArray, order?: OrderFunction, offset?: OffsetFunction): number[]; +} + +// Stacked Bar Chart + +export interface StackedBarChartProps extends ChartProps { + keys: ReadonlyArray; + colors: string[]; + offset?: OffsetFunction; + order?: OrderFunction; + strokeColor?: string; + renderGradient: (props: { id: string }) => React.Component; + spacingInner?: number; + spacingOuter?: number; + showGrid?: boolean; + extras?: any[]; + extra?: () => {}; +} + +export class StackedBarChart extends React.PureComponent> { + static extractDataPoints(data: T, keys: ReadonlyArray, order?: OrderFunction, offset?: OffsetFunction): number[]; +} + +// Bar Chart + +export interface BarChartProps extends ChartProps { + spacingInner?: number; + spacingOuter?: number; +} + +export class BarChart extends React.PureComponent> { +} + +// Axis + +export interface AxisProps { + style?: StyleProp; + data: T[]; + spacingInner?: number; + spacingOuter?: number; + formatLabel?: (value: any, index: number) => number | string; + scale?: ScaleFunction; + numberOfTicks?: number; + svg?: Partial; +} + +// XAxis + +export interface XAxisProps extends AxisProps { + contentInset?: { + left?: number; + right?: number + }; + xAccessor?: AccessorFunction; +} + +export class XAxis extends React.PureComponent> { +} + +// YAxis + +export interface YAxisProps extends AxisProps { + style?: StyleProp; + contentInset?: { + top?: number; + bottom?: number; + }; + min?: number; + max?: number; + yAccessor?: AccessorFunction; +} + +export class YAxis extends React.PureComponent> { +} + +// Progress Circle + +export interface ProgressCircleProps { + progress: number; + style?: StyleProp; + progressColor?: string; + backgroundColor?: string; + strokeWidth?: number; + startAngle?: number; + endAngle?: number; + animate?: boolean; + animateDuration?: number; +} + +export class ProgressCircle extends React.PureComponent { +} + +// Horizontal Line + +export interface HorizontalLineProps { + stroke: string; +} + +// Point + +export interface PointProps { + x: (index: number) => number; + y: (value: number) => number; + value?: number; + radius?: number; + index?: number; + color: string; +} + +// Tooltip + +export interface TooltipProps { + x: (index: number) => number; + y: (value: number) => number; + value?: number; + index?: number; + height?: number; + stroke?: string; + text: string; + pointStroke?: string; +} + +export namespace Decorators { + class HorizontalLine extends React.Component {} + class Point extends React.Component {} + class Tooltip extends React.Component {} +} + +export type GridDirection = 'VERTICAL' | 'HORIZONTAL' | 'BOTH'; + +export interface GridProps { + direction?: GridDirection; + belowChart?: boolean; + svg?: Partial; + ticks?: T[]; + x?: (t: T) => number; + y?: (t: T) => number; +} + +// Export as Component despite it's SFC. +export class Grid extends React.Component> { + static Direction: { + VERTICAL: 'VERTICAL', + HORIZONTAL: 'HORIZONTAL', + BOTH: 'BOTH', + }; +} + +export interface AnimatedPathProps extends CommonPathProps { + animated?: boolean; + animationDuration?: number; + renderPlaceholder?: () => any; +} + +export class Path extends React.Component { +} diff --git a/types/react-native-svg-charts/package.json b/types/react-native-svg-charts/package.json new file mode 100644 index 0000000000..2ca3d929ed --- /dev/null +++ b/types/react-native-svg-charts/package.json @@ -0,0 +1,6 @@ +{ + "private": true, + "dependencies": { + "react-native-svg": "^6.2.1" + } +} 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 new file mode 100644 index 0000000000..5f12c801fc --- /dev/null +++ b/types/react-native-svg-charts/react-native-svg-charts-tests.tsx @@ -0,0 +1,74 @@ +import * as React from 'react'; +import { Defs, LinearGradient, Stop } from 'react-native-svg'; +import { StackedAreaChart, XAxis, Grid } from 'react-native-svg-charts'; +import { curveNatural } from 'd3-shape'; +import { scaleTime } from 'd3-scale'; + +interface Data { + time: number; + cpuUsage: number; + totalMemoryConsumption: number; + privateMemoryConsumption: number; +} + +interface Props { + data: Data[]; + width: number; +} + +class Example extends React.Component { + 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} + /> + + ); + } +} diff --git a/types/react-native-svg-charts/tsconfig.json b/types/react-native-svg-charts/tsconfig.json new file mode 100644 index 0000000000..ea66ecf6b7 --- /dev/null +++ b/types/react-native-svg-charts/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "jsx": "react" + }, + "files": [ + "index.d.ts", + "react-native-svg-charts-tests.tsx" + ] +} diff --git a/types/react-native-svg-charts/tslint.json b/types/react-native-svg-charts/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-native-svg-charts/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }