add basic victory charts

nishkohli96 · Sep 27, 2021 · 2f6bd8f · 2f6bd8f
1 parent d34668d
commit 2f6bd8f
Show file tree

Hide file tree

Showing 8 changed files with 612 additions and 4 deletions.
diff --git a/app/navigation/DrawerLayout.android.js b/app/navigation/DrawerLayout.android.js
@@ -77,7 +77,7 @@ const DrawerLayout = () => {
                         navigation.navigate('Razorpay');
                     }}
                 />
-                 <DrawerItem
+                <DrawerItem
                     icon={() => (
                         <IoniconsI
                             name="bar-chart"
@@ -103,6 +103,19 @@ const DrawerLayout = () => {
                         navigation.navigate('RadarChartScreen');
                     }}
                 />
+                 <DrawerItem
+                    icon={() => (
+                        <IoniconsI
+                            name="bar-chart"
+                            color={themeObj.colors.heading}
+                            size={CommonStyles.icons.drawerIcon}
+                        />
+                    )}
+                    label={() => <ThemedHeading>Victory Bar Chart</ThemedHeading>}
+                    onPress={() => {
+                        navigation.navigate('VictoryBarChart');
+                    }}
+                />
             </DrawerContentScrollView>
             <DrawerItem
                 label={() => (

diff --git a/app/navigation/DrawerLayout.ios.js b/app/navigation/DrawerLayout.ios.js
@@ -77,6 +77,19 @@ const DrawerLayout = () => {
                         navigation.navigate('Razorpay');
                     }}
                 />
+                 <DrawerItem
+                    icon={() => (
+                        <IoniconsI
+                            name="bar-chart"
+                            color={themeObj.colors.heading}
+                            size={CommonStyles.icons.drawerIcon}
+                        />
+                    )}
+                    label={() => <ThemedHeading>Victory Bar Chart</ThemedHeading>}
+                    onPress={() => {
+                        navigation.navigate('VictoryBarChart');
+                    }}
+                />
             </DrawerContentScrollView>
             <DrawerItem
                 label={() => (

diff --git a/app/navigation/DrawerNav.android.js b/app/navigation/DrawerNav.android.js
@@ -10,6 +10,7 @@ import ContactsList from '_Screens/permissions/contacts/ContactsList';
 import Location from '_Screens/permissions/location/Location';
 import LineChartScreen from '_Screens/charts/LineChartScreen';
 import RadarChartScreen from '_Screens/charts/RadarChartScreen';
+import VictoryBarChart from '_Screens/charts/VictoryBarChart';
 
 const Drawer = createDrawerNavigator();
 
@@ -25,6 +26,7 @@ const NavDrawer = () => {
             <Drawer.Screen name="Razorpay" component={Razorpay} />
             <Drawer.Screen name="LineChartScreen" component={LineChartScreen} />
             <Drawer.Screen name="RadarChartScreen" component={RadarChartScreen} />
+            <Drawer.Screen name="VictoryBarChart" component={VictoryBarChart} />
 
             {/* Permission Related Screens */}
             <Drawer.Screen name="Permissions" component={Permissions} />

diff --git a/app/navigation/DrawerNav.ios.js b/app/navigation/DrawerNav.ios.js
@@ -8,6 +8,7 @@ import Razorpay from '_Screens/razorpay/Razorpay';
 import Permissions from '_Screens/permissions';
 import ContactsList from '_Screens/permissions/contacts/ContactsList';
 import Location from '_Screens/permissions/location/Location';
+import VictoryBarChart from '_Screens/charts/VictoryBarChart';
 
 const Drawer = createDrawerNavigator();
 
@@ -21,6 +22,7 @@ const NavDrawer = () => {
             <Drawer.Screen name="Home" component={Home} />
             <Drawer.Screen name="Settings" component={Settings} />
             <Drawer.Screen name="Razorpay" component={Razorpay} />
+            <Drawer.Screen name="VictoryBarChart" component={VictoryBarChart} />
 
             {/* Permission Related Screens */}
             <Drawer.Screen name="Permissions" component={Permissions} />

diff --git a/app/screens/charts/VictoryBarChart.js b/app/screens/charts/VictoryBarChart.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+    VictoryBar,
+    VictoryChart,
+    VictoryTheme,
+    VictoryLabel,
+} from 'victory-native';
+import { ThemedContainer, ThemedBody, ThemedCard } from '_Shared/Comps.themed';
+import Header from '_Shared/Header';
+
+const data = [
+    /* Label is optional */
+    { quarter: 1, earnings: 13000, label: 'Q1' },
+    { quarter: 2, earnings: 16500, label: 'Q2' },
+    { quarter: 3, earnings: 14250, label: 'Q3' },
+    { quarter: 4, earnings: 19000, label: 'Q4' },
+];
+
+const VictoryBarChart = () => {
+    return (
+        <ThemedContainer>
+            <Header title="Bar Chart" openDrawer />
+            <ThemedBody>
+                <ThemedCard>
+                    <VictoryChart width={350} theme={VictoryTheme.material}>
+                        <VictoryBar
+                            style={{ data: { fill: '#c43a31' } }}
+                            data={data}
+                            x="quarter"
+                            y="earnings"
+                            labelComponent={
+                                <VictoryLabel
+                                    dy={-20}
+                                    backgroundStyle={{
+                                        fill: 'gold',
+                                        opacity: 0.6,
+                                    }}
+                                    backgroundPadding={{ bottom: 5, top: 5 }}
+                                />
+                            }
+                        />
+                    </VictoryChart>
+                </ThemedCard>
+            </ThemedBody>
+        </ThemedContainer>
+    );
+};
+
+export default VictoryBarChart;
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -378,6 +378,8 @@ PODS:
   - RNScreens (3.6.0):
     - React-Core
     - React-RCTImage
+  - RNSVG (12.1.1):
+    - React
   - RNVectorIcons (8.1.0):
     - React-Core
   - Yoga (1.14.0)
@@ -449,6 +451,7 @@ DEPENDENCIES:
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
+  - RNSVG (from `../node_modules/react-native-svg`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -551,6 +554,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
+  RNSVG:
+    :path: "../node_modules/react-native-svg"
   RNVectorIcons:
     :path: "../node_modules/react-native-vector-icons"
   Yoga:
@@ -612,6 +617,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNReanimated: 514a11da3a2bcc6c3dfd9de32b38e2b9bf101926
   RNScreens: eb0dfb2d6b21d2d7f980ad46b14eb306d2f1062e
+  RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   Yoga: aa0cb45287ebe1004c02a13f279c55a95f1572f4
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

diff --git a/package.json b/package.json
@@ -44,9 +44,11 @@
         "react-native-reanimated": "1.13.3",
         "react-native-safe-area-context": "^3.3.1",
         "react-native-screens": "^3.6.0",
+        "react-native-svg": "^12.1.1",
         "react-native-vector-icons": "^8.1.0",
         "react-native-web": "^0.17.1",
-        "styled-components": "^5.3.1"
+        "styled-components": "^5.3.1",
+        "victory-native": "^35.5.5"
     },
     "devDependencies": {
         "@babel/core": "^7.12.9",