Merge pull request #2 from Abhinandan-Kushwaha/development

Development

docs/BarChart/BarChartProps.md

@@ -7,15 +7,30 @@
 | data                | Array of items | An item object represents a bar in the bar chart. It is described in the next table. | \_                  |
 | width               | number         | Width of the Bar chart                                                               | width of the parent |
 | height              | number         | Height of the Bar chart (excluding the bottom label)                                 | 200                 |
-| noOfSections        | number         | Number of sections in the Y axis                                                     | 10                  |
 | maxValue            | number         | Maximum value shown in the Y axis                                                    | 200                 |
-| stepHeight          | number         | Height of 1 step/section in the Y axis                                               | 20                  |
+| noOfSections        | number         | Number of sections in the Y axis                                                     | 10                  |
 | stepValue           | number         | Value of 1 step/section in the Y axis                                                | 20                  |
+| stepHeight          | number         | Height of 1 step/section in the Y axis                                               | 20                  |
 | spacing             | number         | Distance between 2 consecutive bars in the Bar chart                                 | 20                  |
 | backgroundColor     | ColorValue     | Background color of the Bar chart                                                    | \_                  |
 | disableScroll       | Boolean        | To disable horizontal scroll                                                         | false               |
 | showScrollIndicator | Boolean        | To show horizontal scroll indicator                                                  | false               |
 
+**Alert!**
+These props are correlated:
+
+1. maxValue
+2. noOfSections
+3. stepValue
+
+They must follow the relation:
+
+````
+maxValue = noOfSections \* stepValue
+```js
+
+So, all the three must be used together. Using any 1 or 2 of them may produce absurd results
+
 ### Item description
 
 | Key                    | Value type | Description                                                                    |
@@ -28,7 +43,7 @@
 | sideColor              | ColorValue | Color of the side view of the bar, only for 3 D                                |
 | topColor               | ColorValue | Color of the top view of the bar, only for 3 D                                 |
 | 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     |
+| gradientColor          | ColorValue | Along with frontColor, this prop constitutes the 2 colors for gradient         |
 | initialSpacing         | number     | distance of the first bar from the Y axis                                      |
 | label                  | string     | Label text appearing below the bar (under the X axis)                          |
 | labelTextStyle         | object     | Style object for the label text appearing below the bar                        |
@@ -110,3 +125,4 @@
 | horizontal     | Boolean | Render horizontal BarChart                                                                    | false         |
 | yAxisAtTop     | Boolean | In horizontal BarCharts the Y axis appears at bottom by default. Set it to true for otherwise | false         |
 | intactTopLabel | Boolean | To rotate the top label component to make it intact with the Bars                             | false         |
+````

docs/LineChart/LineChartProps.md

@@ -8,15 +8,31 @@
 | data2               | Array of items | Second set of dataPoint for the second line                                             | \_                  |
 | width               | number         | Width of the Bar chart                                                                  | width of the parent |
 | height              | number         | Height of the Bar chart (excluding the bottom label)                                    | 200                 |
-| noOfSections        | number         | Number of sections in the Y axis                                                        | 10                  |
 | maxValue            | number         | Maximum value shown in the Y axis                                                       | 200                 |
-| stepHeight          | number         | Height of 1 step/section in the Y axis                                                  | 20                  |
+| noOfSections        | number         | Number of sections in the Y axis                                                        | 10                  |
 | stepValue           | number         | Value of 1 step/section in the Y axis                                                   | 20                  |
+| stepHeight          | number         | Height of 1 step/section in the Y axis                                                  | 20                  |
 | spacing             | number         | Distance between 2 consecutive bars in the Bar chart                                    | 20                  |
 | backgroundColor     | ColorValue     | Background color of the Bar chart                                                       | \_                  |
 | disableScroll       | Boolean        | To disable horizontal scroll                                                            | false               |
 | showScrollIndicator | Boolean        | To show horizontal scroll indicator                                                     | false               |
 
+**Alert!**
+These props are correlated-
+
+1. maxValue
+2. noOfSections
+3. stepValue
+
+They must follow the relation:
+
+````
+maxValue = noOfSections \* stepValue
+```js
+
+So, all the three must be used together. Using any 1 or 2 of them may produce absurd results
+
+
 ### Item description
 
 | Key            | Value type | Description                                                |
@@ -113,3 +129,4 @@
 | startOpacity2     | number     | Start gradient color for the second dataset of the area chart  | 1             |
 | endOpacity2       | number     | End gradient opacity for the second dataset of the area chart  | 1             |
 | gradientDirection | string     | Direction of the gradient (_'horizontal'_ or _'vertical'_)     | 'vertical'    |
+````

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "The most complete library for Bar, Line, Area, Pie and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [

src/BarChart/RenderBars.tsx

@@ -327,9 +327,7 @@ const RenderBars = (props: Props) => {
           // overflow: 'visible',
           marginBottom: 60,
           width: item.barWidth || props.barWidth || 30,
-          height:
+          height: (item.value * (containerHeight || 200)) / (maxValue || 200),
-            ((item.value || maxValue / 2) * (containerHeight || 200)) /
-            (maxValue || 200),
           marginRight: spacing,
         },
         // !isThreeD && !item.showGradient && !props.showGradient &&
@@ -376,10 +374,7 @@ const RenderBars = (props: Props) => {
             topLabelComponent={item.topLabelComponent}
             opacity={opacity || 1}
             animationDuration={animationDuration || 800}
-            height={
+            height={(item.value * (containerHeight || 200)) / (maxValue || 200)}
-              ((item.value || maxValue / 2) * (containerHeight || 200)) /
-              (maxValue || 200)
-            }
             intactTopLabel={props.intactTopLabel}
             horizontal={props.horizontal}
           />
@@ -399,10 +394,7 @@ const RenderBars = (props: Props) => {
             opacity={opacity || 1}
             horizontal={props.horizontal}
             intactTopLabel={props.intactTopLabel}
-            height={
+            height={(item.value * (containerHeight || 200)) / (maxValue || 200)}
-              ((item.value || maxValue / 2) * (containerHeight || 200)) /
-              (maxValue || 200)
-            }
           />
         )
       ) : item.showGradient || props.showGradient ? (
@@ -416,10 +408,7 @@ const RenderBars = (props: Props) => {
             roundedTop={props.roundedTop || false}
             gradientColor={props.gradientColor}
             frontColor={props.frontColor || 'black'}
-            height={
+            height={(item.value * (containerHeight || 200)) / (maxValue || 200)}
-              ((item.value || maxValue / 2) * (containerHeight || 200)) /
-              (maxValue || 200)
-            }
             cappedBars={props.cappedBars}
             capThickness={props.capThickness}
             capColor={props.capColor}
@@ -441,10 +430,7 @@ const RenderBars = (props: Props) => {
           gradientColor={props.gradientColor}
           noGradient
           frontColor={props.frontColor || 'black'}
-          height={
+          height={(item.value * (containerHeight || 200)) / (maxValue || 200)}
-            ((item.value || maxValue / 2) * (containerHeight || 200)) /
-            (maxValue || 200)
-          }
           cappedBars={props.cappedBars}
           capThickness={props.capThickness}
           capColor={props.capColor}

src/BarChart/index.tsx

@@ -100,11 +100,23 @@ export const BarChart = (props: PropTypes) => {
   const containerHeight = props.height || 200;
   const noOfSections = props.noOfSections || 10;
   const horizSections = [{value: 0}];
-  const maxValue = props.maxValue || 200;
   const stepHeight = props.stepHeight || containerHeight / noOfSections;
-  const stepValue = props.stepValue || maxValue / noOfSections;
-  const spacing = props.spacing === 0 ? 0 : props.spacing ? props.spacing : 20;
   const data = props.data || [];
+  const spacing = props.spacing === 0 ? 0 : props.spacing ? props.spacing : 20;
+
+  let totalWidth = spacing;
+  let maxItem = 0;
+  data.forEach((item: itemType) => {
+    if (item.value > maxItem) {
+      maxItem = item.value;
+    }
+    totalWidth += (item.barWidth || props.barWidth || 30) + spacing;
+  });
+  maxItem = maxItem + (10 - (maxItem % 10));
+
+  const maxValue = props.maxValue || maxItem;
+
+  const stepValue = props.stepValue || maxValue / noOfSections;
   const disableScroll = props.disableScroll || false;
   const showScrollIndicator = props.showScrollIndicator || false;
   const initialSpacing =
@@ -167,11 +179,6 @@ export const BarChart = (props: PropTypes) => {
   const heightValue = new Animated.Value(0);
   const opacValue = new Animated.Value(0);
 
-  let totalWidth = spacing;
-  data.forEach((item: itemType) => {
-    totalWidth += (item.barWidth || props.barWidth || 30) + spacing;
-  });
-
   const labelsAppear = () => {
     opacValue.setValue(0);
     Animated.timing(opacValue, {

src/LineChart/index.tsx

@@ -140,14 +140,26 @@ export const LineChart = (props: propTypes) => {
   const [fillPoints2, setFillPoints2] = useState('');
   const containerHeight = props.height || 200;
   const noOfSections = props.noOfSections || 10;
+  const data = props.data || [];
+  const spacing = props.spacing === 0 ? 0 : props.spacing || 60;
+
+  let totalWidth = spacing;
+  let maxItem = 0;
+  data.forEach((item: itemType) => {
+    if (item.value > maxItem) {
+      maxItem = item.value;
+    }
+    totalWidth += spacing;
+  });
+  maxItem = maxItem + (10 - (maxItem % 10));
+
+  const maxValue = props.maxValue || maxItem;
+
   const horizSections = [{value: 0}];
-  const maxValue = props.maxValue || 200;
   const stepHeight = props.stepHeight || containerHeight / noOfSections;
   const stepValue = props.stepValue || maxValue / noOfSections;
-  const spacing = props.spacing === 0 ? 0 : props.spacing || 60;
   const initialSpacing =
     props.initialSpacing === 0 ? 0 : props.initialSpacing || 40;
-  const data = props.data || [];
   const data2 = props.data2 || [];
   const thickness = props.thickness || 2;
   const thickness1 = props.thickness1;
@@ -251,11 +263,6 @@ export const LineChart = (props: propTypes) => {
     horizSections.push({value: maxValue - stepValue * i});
   }
 
-  let totalWidth = initialSpacing;
-  data.forEach((item: itemType) => {
-    totalWidth += spacing;
-  });
-
   useEffect(() => {
     // console.log('comes here............')
     decreaseWidth();
@@ -279,7 +286,7 @@ export const LineChart = (props: propTypes) => {
           ' ' +
           (containerHeight +
             10 -
-            ((data[i].value || maxValue / 2) * containerHeight) / maxValue) +
+            (data[i].value * containerHeight) / maxValue) +
           ' ';
         if (data2.length) {
           pp2 +=
@@ -288,7 +295,7 @@ export const LineChart = (props: propTypes) => {
             ' ' +
             (containerHeight +
               10 -
-              ((data2[i].value || maxValue / 2) * containerHeight) / maxValue) +
+              (data2[i].value * containerHeight) / maxValue) +
             ' ';
         }
       }
@@ -392,7 +399,7 @@ export const LineChart = (props: propTypes) => {
           ',' +
           (containerHeight +
             10 -
-            ((data[0].value || maxValue / 2) * containerHeight) / maxValue) +
+            (data[0].value * containerHeight) / maxValue) +
           ' ' +
           xx +
           ' ' +
@@ -423,7 +430,7 @@ export const LineChart = (props: propTypes) => {
             ',' +
             (containerHeight +
               10 -
-              ((data2[0].value || maxValue / 2) * containerHeight) / maxValue) +
+              (data2[0].value * containerHeight) / maxValue) +
             ' ' +
             xx2 +
             ' ' +

src/PieChart/index.tsx

@@ -136,7 +136,9 @@ export const PieChart = (props: propTypes) => {
     i = 0;
     let semiSum, yy, xx;
     data.forEach(dataItem => {
-      // if (index !== 0) return
+      if (!dataItem.value) {
+        return;
+      }
       const shiftX = dataItem.shiftX || 0;
       const shiftY = dataItem.shiftY || 0;