From e205fe5693922759044be74a156eaa7cf264a9a1 Mon Sep 17 00:00:00 2001
From: Abhinandan Kushwaha <kushabhi5@gmail.com>
Date: Sat, 14 Aug 2021 19:07:21 +0530
Subject: [PATCH] Added examples

---
 App.js                             | 79 +++++++++++++++++++++++++-----
 examples/LineChart/AnimatedArea.js | 42 ++++++++++++++++
 examples/LineChart/AreaTwo.js      | 55 +++++++++++++++++++++
 examples/LineChart/LineChartTwo.js | 51 +++++++++++++++++++
 examples/PieChart/ProgressPie.js   | 24 +++++++++
 examples/PieChart/SplitPie.js      | 13 +++++
 examples/PieChart/ThreeDPie.js     | 33 +++++++++++++
 package.json                       |  2 +-
 8 files changed, 287 insertions(+), 12 deletions(-)
 create mode 100644 examples/LineChart/AnimatedArea.js
 create mode 100644 examples/LineChart/AreaTwo.js
 create mode 100644 examples/LineChart/LineChartTwo.js
 create mode 100644 examples/PieChart/ProgressPie.js
 create mode 100644 examples/PieChart/SplitPie.js
 create mode 100644 examples/PieChart/ThreeDPie.js

diff --git a/App.js b/App.js
index 86a9842..30cf71d 100644
--- a/App.js
+++ b/App.js
@@ -113,6 +113,26 @@ const App = () => {
     {value: 250, label: 'Apr', frontColor: '#4ADDBA'},
     {value: 320, label: 'May', frontColor: '#91E3E3'},
   ];
+  // const lineData = [
+  //   {value: 0},
+  //   {value: 10},
+  //   {value: 8},
+  //   {value: 58},
+  //   {value: 56},
+  //   {value: 78},
+  //   {value: 74},
+  //   {value: 98},
+  // ];
+  // const lineData2 = [
+  //   {value: 0},
+  //   {value: 20},
+  //   {value: 18},
+  //   {value: 40},
+  //   {value: 36},
+  //   {value: 60},
+  //   {value: 54},
+  //   {value: 85},
+  // ];
   const lineData = [
     {value: 0},
     {value: 20},
@@ -123,15 +143,27 @@ const App = () => {
     {value: 54},
     {value: 85},
   ];
+  const pieData = [
+    {value: 70, color: '#177AD5' /*text: '54%'*/},
+    {value: 30, color: 'lightgray' /*text: '30%'*/},
+    // {value: 20, color: '#ED6665' /*text: '26%'*/},
+  ];
   return (
     <View
       style={{
         marginTop: 200,
         paddingVertical: 50,
-        backgroundColor: '#1A3461',
       }}>
       {/* <LineChart data={ldata} /> */}
 
+      <PieChart
+        donut
+        innerRadius={80}
+        data={pieData}
+        centerLabelComponent={() => {
+          return <Text style={{fontSize: 30}}>70%</Text>;
+        }}
+      />
       {/* <BarChart
         data={data}
         horizontal
@@ -174,15 +206,17 @@ const App = () => {
         color="#0BA5A4"
       /> */}
 
-      <LineChart
+      {/* <LineChart
+        areaChart
+        hideDataPoints
+        isAnimated
+        animationDuration={1200}
+        startFillColor="#0BA5A4"
+        startOpacity={1}
+        endOpacity={0.3}
         initialSpacing={0}
-        data={lineData1}
-        spacing={40}
-        textShiftY={-10}
-        textShiftX={-5}
-        // hideDataPoints
-        textColor="yellow"
-        textFontSize={12}
+        data={lineData}
+        spacing={30}
         thickness={5}
         hideRules
         hideYAxisText
@@ -191,7 +225,31 @@ const App = () => {
         verticalLinesColor="rgba(14,164,164,0.5)"
         xAxisColor="#0BA5A4"
         color="#0BA5A4"
-      />
+      /> */}
+
+      {/* <LineChart
+        areaChart
+        curved
+        data={lineData}
+        data2={lineData2}
+        height={250}
+        showVerticalLines
+        spacing={44}
+        initialSpacing={0}
+        color1="skyblue"
+        color2="orange"
+        textColor1="green"
+        hideDataPoints
+        dataPointsColor1="blue"
+        dataPointsColor2="red"
+        startFillColor1="skyblue"
+        startFillColor2="orange"
+        startOpacity={0.8}
+        endOpacity={0.3}
+        textShiftY={-2}
+        textShiftX={-5}
+        textFontSize={13}
+      /> */}
       {/* <View style={{marginLeft: 20}}>
         <BarChart
           barWidth={22}
@@ -286,7 +344,6 @@ const App = () => {
         capThickness={2}
         capColor="gray"
       /> */}
-      {/* <PieChart data={data} donut isThreeD shadow /> */}
       {/* <BarChart data={data} horizontal noOfSections={5} /> */}
       {/* <LineChart
         xAxisColor="red"
diff --git a/examples/LineChart/AnimatedArea.js b/examples/LineChart/AnimatedArea.js
new file mode 100644
index 0000000..d625863
--- /dev/null
+++ b/examples/LineChart/AnimatedArea.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import {View} from 'react-native';
+import {LineChart} from '../../src/LineChart';
+
+const AnimatedArea = () => {
+  const lineData = [
+    {value: 0},
+    {value: 20},
+    {value: 18},
+    {value: 40},
+    {value: 36},
+    {value: 60},
+    {value: 54},
+    {value: 85},
+  ];
+  return (
+    <View>
+      <LineChart
+        areaChart
+        hideDataPoints
+        isAnimated
+        animationDuration={1200}
+        startFillColor="#0BA5A4"
+        startOpacity={1}
+        endOpacity={0.3}
+        initialSpacing={0}
+        data={lineData}
+        spacing={30}
+        thickness={5}
+        hideRules
+        hideYAxisText
+        yAxisColor="#0BA5A4"
+        showVerticalLines
+        verticalLinesColor="rgba(14,164,164,0.5)"
+        xAxisColor="#0BA5A4"
+        color="#0BA5A4"
+      />
+    </View>
+  );
+};
+
+export default AnimatedArea;
diff --git a/examples/LineChart/AreaTwo.js b/examples/LineChart/AreaTwo.js
new file mode 100644
index 0000000..c1dd206
--- /dev/null
+++ b/examples/LineChart/AreaTwo.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import {View} from 'react-native';
+import {LineChart} from '../../src/LineChart';
+
+const LineChartTwo = () => {
+  const lineData = [
+    {value: 0},
+    {value: 10},
+    {value: 8},
+    {value: 58},
+    {value: 56},
+    {value: 78},
+    {value: 74},
+    {value: 98},
+  ];
+  const lineData2 = [
+    {value: 0},
+    {value: 20},
+    {value: 18},
+    {value: 40},
+    {value: 36},
+    {value: 60},
+    {value: 54},
+    {value: 85},
+  ];
+  return (
+    <View>
+      <LineChart
+        areaChart
+        curved
+        data={lineData}
+        data2={lineData2}
+        height={250}
+        showVerticalLines
+        spacing={44}
+        initialSpacing={0}
+        color1="skyblue"
+        color2="orange"
+        textColor1="green"
+        hideDataPoints
+        dataPointsColor1="blue"
+        dataPointsColor2="red"
+        startFillColor1="skyblue"
+        startFillColor2="orange"
+        startOpacity={0.8}
+        endOpacity={0.3}
+        textShiftY={-2}
+        textShiftX={-5}
+        textFontSize={13}
+      />
+    </View>
+  );
+};
+
+export default LineChartTwo;
diff --git a/examples/LineChart/LineChartTwo.js b/examples/LineChart/LineChartTwo.js
new file mode 100644
index 0000000..aeff720
--- /dev/null
+++ b/examples/LineChart/LineChartTwo.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import {View} from 'react-native';
+import {LineChart} from '../../src/LineChart';
+
+const LineChartTwo = () => {
+  const lineData = [
+    {value: 0, dataPointText: '0'},
+    {value: 10, dataPointText: '10'},
+    {value: 8, dataPointText: '8'},
+    {value: 58, dataPointText: '58'},
+    {value: 56, dataPointText: '56'},
+    {value: 78, dataPointText: '78'},
+    {value: 74, dataPointText: '74'},
+    {value: 98, dataPointText: '98'},
+  ];
+
+  const lineData2 = [
+    {value: 0, dataPointText: '0'},
+    {value: 20, dataPointText: '20'},
+    {value: 18, dataPointText: '18'},
+    {value: 40, dataPointText: '40'},
+    {value: 36, dataPointText: '36'},
+    {value: 60, dataPointText: '60'},
+    {value: 54, dataPointText: '54'},
+    {value: 85, dataPointText: '85'},
+  ];
+  return (
+    <View>
+      <LineChart
+        data={lineData}
+        data2={lineData2}
+        height={250}
+        showVerticalLines
+        spacing={44}
+        initialSpacing={0}
+        color1="skyblue"
+        color2="orange"
+        textColor1="green"
+        dataPointsHeight={6}
+        dataPointsWidth={6}
+        dataPointsColor1="blue"
+        dataPointsColor2="red"
+        textShiftY={-2}
+        textShiftX={-5}
+        textFontSize={13}
+      />
+    </View>
+  );
+};
+
+export default LineChartTwo;
diff --git a/examples/PieChart/ProgressPie.js b/examples/PieChart/ProgressPie.js
new file mode 100644
index 0000000..389ac67
--- /dev/null
+++ b/examples/PieChart/ProgressPie.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import {View, Text} from 'react-native';
+import {PieChart} from '../../src/PieChart';
+
+const ProgressPie = () => {
+  const pieData = [
+    {value: 70, color: '#177AD5'},
+    {value: 30, color: 'lightgray'},
+  ];
+  return (
+    <View>
+      <PieChart
+        donut
+        innerRadius={80}
+        data={pieData}
+        centerLabelComponent={() => {
+          return <Text style={{fontSize: 30}}>70%</Text>;
+        }}
+      />
+    </View>
+  );
+};
+
+export default ProgressPie;
diff --git a/examples/PieChart/SplitPie.js b/examples/PieChart/SplitPie.js
new file mode 100644
index 0000000..15b2a15
--- /dev/null
+++ b/examples/PieChart/SplitPie.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import {PieChart} from '../../src/PieChart';
+
+const SplitPie = () => {
+  const pieData = [
+    {value: 54, color: '#177AD5'},
+    {value: 40, color: '#79D2DE'},
+    {value: 20, color: '#ED6665', shiftX: 28, shiftY: -18},
+  ];
+  return <PieChart data={pieData} />;
+};
+
+export default SplitPie;
diff --git a/examples/PieChart/ThreeDPie.js b/examples/PieChart/ThreeDPie.js
new file mode 100644
index 0000000..9e110dd
--- /dev/null
+++ b/examples/PieChart/ThreeDPie.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import {View} from 'react-native';
+import {PieChart} from '../../src/PieChart';
+
+const ThreeDPie = () => {
+  const pieData = [
+    {value: 54, color: '#177AD5', text: '54%'},
+    {value: 40, color: '#79D2DE', text: '30%'},
+    {value: 20, color: '#ED6665', text: '26%'},
+  ];
+
+  return (
+    <View>
+      <PieChart
+        donut
+        isThreeD
+        showText
+        innerCircleBorderWidth={6}
+        innerCircleBorderColor="lightgray"
+        shiftInnerCenterX={-10}
+        shiftInnerCenterY={-15}
+        textColor="black"
+        radius={170}
+        textSize={20}
+        showTextBackground
+        textBackgroundRadius={26}
+        data={pieData}
+      />
+    </View>
+  );
+};
+
+export default ThreeDPie;
diff --git a/package.json b/package.json
index d394ff6..2d6bb6e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "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": [