💄 Add chart by forking lib that was not TS compliant

ZeroGachis · Sep 7, 2023 · 48bc7a3 · 48bc7a3
1 parent d1462f3
commit 48bc7a3
Show file tree

Hide file tree

Showing 35 changed files with 10,901 additions and 3 deletions.
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -19,6 +19,7 @@
     "react-native-drop-shadow": "^0.0.6",
     "react-native-gesture-handler": "^2.9.0",
     "react-native-icomoon": "^0.1.1",
+    "react-native-linear-gradient": "^2.8.3",
     "react-native-paper": "^5.1.4",
     "react-native-reanimated": "^3.0.2",
     "react-native-safe-area-context": "^4.5.0",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -26,6 +26,7 @@ import { LabelPage } from './Label/LabelPage';
 import { ProductPage } from './Product/ProductPage';
 import { DividerPage } from './DividerPage/DividerPage';
 import { BodyPage } from './Body/BodyPage';
+import { ChartPage } from './Chart/ChartPage';
 
 export type RootStackParamList = {
     Home: undefined;
@@ -52,6 +53,7 @@ export type RootStackParamList = {
     Label: undefined;
     ProductPage: undefined;
     DividerPage: undefined;
+    ChartPage: undefined;
 };
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
@@ -102,6 +104,7 @@ const App = () => {
                     <Stack.Screen name="Label" component={LabelPage} />
                     <Stack.Screen name="ProductPage" component={ProductPage} />
                     <Stack.Screen name="DividerPage" component={DividerPage} />
+                    <Stack.Screen name="ChartPage" component={ChartPage} />
                 </Stack.Navigator>
             </NavigationContainer>
         </ThemeProvider>

diff --git a/example/src/Chart/ChartPage.tsx b/example/src/Chart/ChartPage.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { LineChart, Body, Card, useTheme, Screen } from 'smartway-react-native-ui';
+
+export const ChartPage = () => {
+    const theme = useTheme();
+
+    const styles = StyleSheet.create({
+        wrapper: {
+            display: 'flex',
+            alignItems: 'center',
+            flexDirection: 'column',
+            alignSelf: 'stretch',
+            gap: theme.sw.spacing.l,
+            padding: theme.sw.spacing.l,
+        },
+        header: {
+            color: theme.sw.colors.neutral[900],
+            textAlign: 'left',
+            display: 'flex',
+            alignItems: 'center',
+            alignSelf: 'stretch',
+        },
+        chartLabels: {
+            color: theme.sw.colors.neutral['500'],
+            fontFamily: theme.fonts.default.fontFamily,
+            fontSize: 14,
+        },
+    });
+
+    const data = [0, 10, 8, 58, 56, 78, 58, 56, 78, 74, 98, 74];
+
+    const labels = [
+        'Aout',
+        'Sep.',
+        'Oct.',
+        'Nov.',
+        'Déc.',
+        'Jan.',
+        'Fév.',
+        'Mars',
+        'Avr.',
+        'Mai.',
+        'Juin',
+        'Juill.',
+    ];
+    return (
+        <Screen
+            style={{
+                paddingTop: theme.sw.spacing.m,
+                marginTop: 0,
+                backgroundColor: theme.sw.colors.neutral[300],
+            }}
+        >
+            <Card style={styles.wrapper}>
+                <Body style={styles.header} size="B1" weight="semi-bold">
+                    Vente annuelle
+                </Body>
+                <LineChart
+                    data={data.map((_) => {
+                        return { value: _ };
+                    })}
+                    height={160}
+                    width={650}
+                    initialSpacing={20}
+                    spacing={55}
+                    endSpacing={15}
+                    color1={theme.sw.colors.primary.main}
+                    curved={true}
+                    noOfSections={4}
+                    xAxisLabelTextStyle={styles.chartLabels}
+                    yAxisTextStyle={styles.chartLabels}
+                    hideDataPoints={true}
+                    xAxisThickness={0}
+                    yAxisThickness={0}
+                    xAxisLabelTexts={labels}
+                />
+            </Card>
+        </Screen>
+    );
+};
diff --git a/example/src/HomeScreen.tsx b/example/src/HomeScreen.tsx
@@ -216,6 +216,14 @@ export const HomeScreen = ({ navigation }: Props) => {
                     >
                         Divider
                     </Button>
+                    <Button
+                        style={styles.button}
+                        onPress={() => {
+                            navigation.navigate('ChartPage');
+                        }}
+                    >
+                        Chart
+                    </Button>
                 </Pressable>
             </ScrollView>
         </View>

diff --git a/package.json b/package.json
@@ -82,7 +82,8 @@
     "react-native-safe-area-context": "*",
     "react-native-svg": "*",
     "react-native-vector-icons": "*",
-    "react-native-drop-shadow": "*"
+    "react-native-drop-shadow": "*",
+    "react-native-linear-gradient": "*"
   },
   "dependencies": {}
 }