Merge pull request #333 from Abhinandan-Kushwaha/development

Development

__tests__/BarChart.test.js

@@ -8,7 +8,6 @@ import BarThreeD from '../examples/BarChart/BarThreeD';
 import BarWithGradient from '../examples/BarChart/BarWithGradient';
 import CappedBars from '../examples/BarChart/CappedBars';
 import RoundStackBar from '../examples/BarChart/RoundStackBar';
-import SimpleBarAnimated from '../examples/BarChart/SimpleBarAnimated';
 import SimpleBlueBars from '../examples/BarChart/SimpleBlueBars';
 import SimpleBlueBarsVerticalLines from '../examples/BarChart/SimpleBlueBarsVerticalLines';
 import BarChartWithGivenNumberOfVerticalLines from '../examples/BarChart/BarChartWithGivenNumberOfVerticalLines';
@@ -16,45 +15,41 @@ import BarChartWithGivenNumberOfVerticalLines from '../examples/BarChart/BarChar
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
 
-it('renders 3D bar chart correctly', () => {
+describe('Bar and Stacked Bar chart tests', () => {
-  const tree = renderer.create(<BarThreeD />).toJSON();
+  it('renders 3D bar chart correctly', () => {
-  expect(tree).toMatchSnapshot();
+    const tree = renderer.create(<BarThreeD />).toJSON();
-});
+    expect(tree).toMatchSnapshot();
+  });
 
-it('renders gradient bar chart correctly', () => {
+  it('renders gradient bar chart correctly', () => {
-  const tree = renderer.create(<BarWithGradient />).toJSON();
+    const tree = renderer.create(<BarWithGradient />).toJSON();
-  expect(tree).toMatchSnapshot();
+    expect(tree).toMatchSnapshot();
-});
+  });
 
-it('renders capped bar chart correctly', () => {
+  it('renders capped bar chart correctly', () => {
-  const tree = renderer.create(<CappedBars />).toJSON();
+    const tree = renderer.create(<CappedBars />).toJSON();
-  expect(tree).toMatchSnapshot();
+    expect(tree).toMatchSnapshot();
-});
+  });
 
-it('renders rounded stack bar chart correctly', () => {
+  it('renders rounded stack bar chart correctly', () => {
-  const tree = renderer.create(<RoundStackBar />).toJSON();
+    const tree = renderer.create(<RoundStackBar />).toJSON();
-  expect(tree).toMatchSnapshot();
+    expect(tree).toMatchSnapshot();
-});
+  });
 
-it('renders simple animated bar chart correctly', async () => {
+  it('renders alternate blue and gray bar chart correctly', () => {
-  const tree = renderer.create(<SimpleBarAnimated />).toJSON();
+    const tree = renderer.create(<SimpleBlueBars />).toJSON();
-  await new Promise(r => setTimeout(r, 1000));
+    expect(tree).toMatchSnapshot();
-  expect(tree).toMatchSnapshot();
+  });
-});
 
-it('renders alternate blue and gray bar chart correctly', () => {
+  it('renders a simple bar chart with vertical lines correctly', () => {
-  const tree = renderer.create(<SimpleBlueBars />).toJSON();
+    const tree = renderer.create(<SimpleBlueBarsVerticalLines />).toJSON();
-  expect(tree).toMatchSnapshot();
+    expect(tree).toMatchSnapshot();
-});
+  });
 
-it('renders a simple bar chart with vertical lines correctly', () => {
+  it('renders a simple bar chart with given number of vertical lines correctly', () => {
-  const tree = renderer.create(<SimpleBlueBarsVerticalLines />).toJSON();
+    const tree = renderer
-  expect(tree).toMatchSnapshot();
+      .create(<BarChartWithGivenNumberOfVerticalLines />)
-});
+      .toJSON();
-
+    expect(tree).toMatchSnapshot();
-it('renders a simple bar chart with given number of vertical lines correctly', () => {
+  });
-  const tree = renderer
-    .create(<BarChartWithGivenNumberOfVerticalLines />)
-    .toJSON();
-  expect(tree).toMatchSnapshot();
 });

__tests__/LineChart.test.js

@@ -4,7 +4,6 @@
 
 import 'react-native';
 import React from 'react';
-import AnimatedArea from '../examples/LineChart/AnimatedArea';
 import AreaTwo from '../examples/LineChart/AreaTwo';
 import LineChartTwo from '../examples/LineChart/LineChartTwo';
 import SimpleBlueLine from '../examples/LineChart/SimpleBlueLine';
@@ -17,49 +16,46 @@ import SimpleBlueLineWithGivenNumberOfVerticalLines from '../examples/LineChart/
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
 
-it('renders animated area chart correctly', () => {
+describe('Line and Area chart tests', () => {
-  const tree = renderer.create(<AnimatedArea />).toJSON();
+  it('renders 2 area chart correctly', () => {
-  expect(tree).toMatchSnapshot();
+    const tree = renderer.create(<AreaTwo />).toJSON();
-});
+    expect(tree).toMatchSnapshot();
+  });
 
-it('renders 2 area chart correctly', () => {
+  it('renders 2 line chart correctly', () => {
-  const tree = renderer.create(<AreaTwo />).toJSON();
+    const tree = renderer.create(<LineChartTwo />).toJSON();
-  expect(tree).toMatchSnapshot();
+    expect(tree).toMatchSnapshot();
-});
+  });
 
-it('renders 2 line chart correctly', () => {
+  it('renders blue line chart correctly', () => {
-  const tree = renderer.create(<LineChartTwo />).toJSON();
+    const tree = renderer.create(<SimpleBlueLine />).toJSON();
-  expect(tree).toMatchSnapshot();
+    expect(tree).toMatchSnapshot();
-});
+  });
 
-it('renders blue line chart correctly', () => {
+  it('renders ChartWithPointer correctly', () => {
-  const tree = renderer.create(<SimpleBlueLine />).toJSON();
+    const tree = renderer.create(<ChartWithPointer />).toJSON();
-  expect(tree).toMatchSnapshot();
+    expect(tree).toMatchSnapshot();
-});
+  });
 
-it('renders ChartWithPointer correctly', () => {
+  it('renders ChartWithAdjustingPointer correctly', () => {
-  const tree = renderer.create(<ChartWithPointer />).toJSON();
+    const tree = renderer.create(<ChartWithAdjustingPointer />).toJSON();
-  expect(tree).toMatchSnapshot();
+    expect(tree).toMatchSnapshot();
-});
+  });
 
-it('renders ChartWithAdjustingPointer correctly', () => {
+  it('renders ScrollingChartWithPointer correctly', () => {
-  const tree = renderer.create(<ChartWithAdjustingPointer />).toJSON();
+    const tree = renderer.create(<ScrollingChartWithPointer />).toJSON();
-  expect(tree).toMatchSnapshot();
+    expect(tree).toMatchSnapshot();
-});
+  });
 
-it('renders ScrollingChartWithPointer correctly', () => {
+  it('renders CaloriesBurnt Area chart correctly', () => {
-  const tree = renderer.create(<ScrollingChartWithPointer />).toJSON();
+    const tree = renderer.create(<CaloriesBurnt />).toJSON();
-  expect(tree).toMatchSnapshot();
+    expect(tree).toMatchSnapshot();
-});
+  });
 
-it('renders CaloriesBurnt Area chart correctly', () => {
+  it('renders blue line chart with given number of vertical lines correctly', () => {
-  const tree = renderer.create(<CaloriesBurnt />).toJSON();
+    const tree = renderer
-  expect(tree).toMatchSnapshot();
+      .create(<SimpleBlueLineWithGivenNumberOfVerticalLines />)
-});
+      .toJSON();
-
+    expect(tree).toMatchSnapshot();
-it('renders blue line chart with given number of vertical lines correctly', () => {
+  });
-  const tree = renderer
-    .create(<SimpleBlueLineWithGivenNumberOfVerticalLines />)
-    .toJSON();
-  expect(tree).toMatchSnapshot();
 });

__tests__/PieChart.test.js

@@ -10,31 +10,35 @@ import SplitPie from '../examples/PieChart/SplitPie';
 import ThreeDPie from '../examples/PieChart/ThreeDPie';
 import PieSingleData from '../examples/PieChart/PieSingleData';
 
-
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
 
-it('renders progress pie chart correctly', () => {
+describe('Pie and Donut chart tests', () => {
-  const tree = renderer.create(<ProgressPie />).toJSON();
+  beforeEach(() => {
-  expect(tree).toMatchSnapshot();
+    jest.useFakeTimers();
-});
+  });
+  it('renders progress pie chart correctly', () => {
+    const tree = renderer.create(<ProgressPie />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 
-it('renders simple pie chart correctly', () => {
+  it('renders simple pie chart correctly', () => {
-  const tree = renderer.create(<SimplePie />).toJSON();
+    const tree = renderer.create(<SimplePie />).toJSON();
-  expect(tree).toMatchSnapshot();
+    expect(tree).toMatchSnapshot();
-});
+  });
 
-it('renders split pie chart correctly', () => {
+  it('renders split pie chart correctly', () => {
-  const tree = renderer.create(<SplitPie />).toJSON();
+    const tree = renderer.create(<SplitPie />).toJSON();
-  expect(tree).toMatchSnapshot();
+    expect(tree).toMatchSnapshot();
-});
+  });
 
-it('renders #D pie chart correctly', () => {
+  it('renders 3D pie chart correctly', () => {
-  const tree = renderer.create(<ThreeDPie />).toJSON();
+    const tree = renderer.create(<ThreeDPie />).toJSON();
-  expect(tree).toMatchSnapshot();
+    expect(tree).toMatchSnapshot();
-});
+  });
 
-it('renders pie chart correctly for Single data', () => {
+  it('renders pie chart correctly for Single data', () => {
-  const tree = renderer.create(<PieSingleData />).toJSON();
+    const tree = renderer.create(<PieSingleData />).toJSON();
-  expect(tree).toMatchSnapshot();
+    expect(tree).toMatchSnapshot();
+  });
 });

examples/BarChart/SimpleBarAnimated.js

@@ -6,7 +6,7 @@ const SimpleBarAnimated = () => {
   const barData = [
     {value: 230, label: 'Jan', frontColor: '#4ABFF4'},
     {value: 180, label: 'Feb', frontColor: '#79C3DB'},
-    {value: 195, label: 'Mar', frontColor: '#28B2B3'},
+    {value: 200, label: 'Mar', frontColor: '#28B2B3'},
     {value: 250, label: 'Apr', frontColor: '#4ADDBA'},
     {value: 320, label: 'May', frontColor: '#91E3E3'},
   ];

package.json

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

src/BarChart/RenderBars.tsx

@@ -470,7 +470,7 @@ const RenderBars = (props: Props) => {
               topColor={item.topColor || props.topColor || ''}
               showGradient={item.showGradient || props.showGradient || false}
               gradientColor={item.gradientColor || props.gradientColor}
-              topLabelComponent={item.topLabelComponent || Function}
+              topLabelComponent={item.topLabelComponent || null}
               opacity={opacity || 1}
               horizontal={props.horizontal}
               intactTopLabel={props.intactTopLabel}

src/BarChart/index.tsx

@@ -1617,7 +1617,6 @@ export const BarChart = (props: PropTypes) => {
                       }
                     }
                   }
-                  console.log('i = ' + i + ' actualSpacing ' + actualSpacing);
                   totalSpacing += actualSpacing;
                 }
               }

src/Components/ThreeDBar/index.tsx

@@ -15,7 +15,7 @@ type PropTypes = {
   frontColor: ColorValue;
   sideColor: ColorValue;
   topColor: ColorValue;
-  topLabelComponent: Function;
+  topLabelComponent: any;
   topLabelContainerStyle: any;
   opacity: number;
   side: String;

src/PieChart/main.tsx

@@ -373,11 +373,10 @@ export const PieChartMain = (props: propTypes) => {
             // console.log('ax', ax);
             // console.log('ay', ay);
             return (
-              <>
+              <React.Fragment key={index}>
                 {/* <Line x1={mx} x2={cx} y1={my} y2={cy} stroke="black" /> */}
                 {showTextBackground && (
                   <Circle
-                    key={index + 'b'}
                     cx={x}
                     cy={y - (item.textSize || textSize) / 4}
                     r={
@@ -410,7 +409,6 @@ export const PieChartMain = (props: propTypes) => {
                   />
                 )}
                 <SvgText
-                  key={index + 'c'}
                   fill={item.textColor || textColor || colors[(index + 2) % 9]}
                   fontSize={item.textSize || textSize}
                   fontFamily={item.font || props.font}
@@ -444,7 +442,7 @@ export const PieChartMain = (props: propTypes) => {
                   }}>
                   {item.text || (showValuesAsLabels ? item.value + '' : '')}
                 </SvgText>
-              </>
+              </React.Fragment>
             );
           })}
       </Svg>