Merge branch 'Create-Dashboard' of https://github.com/nimbus-gui/nimbus-gui into Create-Dashboard

package.json

@@ -33,6 +33,7 @@
     "emoji-picker-react": "^4.4.11",
     "expo-modules-core": "^1.5.9",
     "react": "18",
+    "react-chartjs-2": "^5.2.0",
     "react-color": "^2.19.3",
     "react-confetti": "^6.1.0",
     "react-dom": "18",

src/pages/Dashboard/BalanceLineChart/BalanceChardCard.tsx

@@ -0,0 +1,32 @@
+import { Stack, XStack, YStack } from "tamagui";
+import DashboardCardWrapper from "../DashboardCardWrapper";
+import { Text } from "@status-im/components";
+import LineChart from "./LineChart";
+
+
+const BalanceChardCard = () => {
+    return (
+        <DashboardCardWrapper >
+            <Stack style={{ width: '536px' }}>
+                <YStack>
+
+                    <XStack justifyContent={'space-between'}>
+                        <YStack>
+                            <Text size={15} weight={'semibold'}> Balance</Text>
+                            <XStack style={{ alignItems: 'end' }} space={'$1'}>
+                                <Text size={27} weight={'semibold'}>24,273</Text>
+                                <Text size={11} color="#23ADA0" >1.56%</Text>
+                            </XStack>
+                        </YStack>
+                        <XStack style={{ border: '1px solid black', height: 'fit-content', padding: '3px', borderRadius: '15px' }}>
+                            <Text size={13}>01 APR 2022</Text>
+                            <Text size={13}> → 31 MAR 2023</Text>
+                        </XStack>
+                    </XStack>
+                    <LineChart />
+                </YStack>
+            </Stack>
+        </DashboardCardWrapper>
+    )
+}
+export default BalanceChardCard;

src/pages/Dashboard/BalanceLineChart/LineChart.tsx

@@ -0,0 +1,108 @@
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Filler,
+    Legend,
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+import faker from 'faker';
+
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Filler,
+    Legend
+);
+const exampleData = [
+    {
+        id: 1,
+        year: 2016,
+        userGain: 80000,
+        userLost: 823
+    },
+    {
+        id: 2,
+        year: 2017,
+        userGain: 45677,
+        userLost: 345
+    },
+    {
+        id: 3,
+        year: 2018,
+        userGain: 78888,
+        userLost: 555
+    },
+    {
+        id: 4,
+        year: 2019,
+        userGain: 90000,
+        userLost: 4555
+    },
+    {
+        id: 5,
+        year: 2020,
+        userGain: 4300,
+        userLost: 234
+    }
+];
+const labelsEx = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+const data = {
+    labels: labelsEx,
+    datasets: [
+        {
+            label: 'Dataset',
+            data: exampleData,
+            borderColor: 'light-red',
+            backgroundColor: 'light-red',
+            fill: true,
+            start: true,
+            origin: true
+        }
+    ]
+};
+const config = {
+    type: 'line',
+    data: data,
+    options: {
+        plugins: {
+            filler: {
+                propagate: false,
+            },
+            title: {
+                display: true,
+                text: (ctx: any) => 'Fill: ' + ctx.chart.data.datasets[0].fill
+            }
+        },
+        interaction: {
+            intersect: false,
+        }
+    },
+};
+const options = {
+    responsive: true,
+    plugins: {
+        legend: {
+            position: 'top' as const,
+        },
+        title: {
+            display: true,
+            text: 'Chart.js Line Chart',
+        },
+    },
+};
+const LineChart = () => {
+
+    return <Line options={options} data={data} />;
+
+}
+export default LineChart;

src/pages/Dashboard/Dashboard.tsx

@@ -3,6 +3,7 @@ import { XStack, YStack } from 'tamagui'
 import BasicInfoCards from './BasicInfoCards/BasicInfoCards'
 import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer'
 import SyncStatusCard from './SyncStatusCard'
+import BalanceChardCard from './BalanceLineChart/BalanceChardCard'
 
 const Dashboard = () => {
   return (
@@ -15,6 +16,7 @@ const Dashboard = () => {
         <XStack space={'$2'}></XStack>
       </XStack>
       <BasicInfoCards />
+      <BalanceChardCard/>
     </YStack>
   )
 }

yarn.lock

@@ -15111,6 +15111,7 @@ __metadata:
     expo-modules-core: ^1.5.9
     prettier: ^3.0.1
     react: 18
+    react-chartjs-2: ^5.2.0
     react-color: ^2.19.3
     react-confetti: ^6.1.0
     react-dom: 18
@@ -16256,6 +16257,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-chartjs-2@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "react-chartjs-2@npm:5.2.0"
+  peerDependencies:
+    chart.js: ^4.1.1
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: ace702185be1450e5888a8bcd8b5fc1995067e3b11d236764a67f5567a3d7c32ff16923b8d48d3d39bda6e45135da6c044c9b43fbe8e1978f95aca9d2c0ce348
+  languageName: node
+  linkType: hard
+
 "react-color@npm:^2.19.3":
   version: 2.19.3
   resolution: "react-color@npm:2.19.3"