Merge pull request #270 from abeyuya/feat/add-typescript-definition

add StackBars type definition

docs/BarChart/BarChartProps.md

@@ -387,6 +387,8 @@ The value corresponding to the stacks key is an array of objects, each object re
 | stacks array   | Array of stack items                                      | A stack is made of 1 or more objects of the type described in the next table |
 | label          | string                                                    | Label text appearing below the stack (under the X axis)                      |
 | labelTextStyle | Style object for the label text appearing below the stack |
+| barWidth       | number                                                    |
+| spacing        | number                                                    |
 
 A single stack item can be depicted as-
 
@@ -407,6 +409,7 @@ A single stack item can be depicted as-
 | borderBottomRightRadius | number     | borderBottomRightRadius for a stack section             |
 | showGradient            | Boolean    | Prop to enable linear gradient for the bar color, defaults to false |
 | gradientColor           | ColorValue | Along with frontColor, this prop constitutes the 2 colors for gradient         |
+| barWidth                | number     | Width of the bar                                        |
 
 ```
 

src/BarChart/RenderStackBars.tsx

@@ -1,5 +1,11 @@
 import React, {Component} from 'react';
-import {View, TouchableOpacity, Text, ColorValue} from 'react-native';
+import {
+  View,
+  TouchableOpacity,
+  Text,
+  ColorValue,
+  GestureResponderEvent,
+} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
 import {Style} from 'util';
@@ -49,7 +55,7 @@ type Props = {
   gradientColor?: any;
   stackData: Array<itemType>;
 };
-type itemType = {
+export type itemType = {
   value?: number;
   onPress?: any;
   label?: String;
@@ -67,7 +73,20 @@ type itemType = {
   capRadius?: number;
   labelComponent?: Function;
   borderRadius?: number;
-  stacks?: Array<any>;
+  stacks?: Array<{
+    value: number;
+    color?: ColorValue;
+    onPress?: (event: GestureResponderEvent) => void;
+    marginBottom?: number;
+    barBorderRadius?: number;
+    borderTopLeftRadius?: number;
+    borderTopRightRadius?: number;
+    borderBottomLeftRadius?: number;
+    borderBottomRightRadius?: number;
+    showGradient?: boolean;
+    gradientColor?: ColorValue;
+    barWidth?: number;
+  }>;
   barBackgroundPattern?: Function;
   barBorderRadius?: Number;
   patternId?: String;

src/BarChart/index.tsx

@@ -13,10 +13,12 @@ import {
   Text,
   ColorValue,
   ScrollView,
+  StyleProp,
+  TextStyle,
 } from 'react-native';
 import {styles} from './styles';
 import RenderBars from './RenderBars';
-import RenderStackBars from './RenderStackBars';
+import RenderStackBars, {itemType as StackItemType} from './RenderStackBars';
 import Rule from '../Components/lineSvg';
 import {bezierCommand, svgPath} from '../utils';
 import Svg, {Circle, Path, Rect, Text as CanvasText} from 'react-native-svg';
@@ -33,7 +35,13 @@ type PropTypes = {
   stepValue?: number;
   spacing?: number;
   data?: any;
-  stackData?: any;
+  stackData?: Array<{
+    stacks: Array<StackItemType>;
+    label?: string;
+    labelTextStyle?: StyleProp<TextStyle>;
+    barWidth?: number;
+    spacing?: number;
+  }>;
   side?: String;
   rotateLabel?: Boolean;
   isAnimated?: Boolean;