From 419a1bed574c36000672abf8258165f6328ba8c0 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 13 Sep 2023 11:55:16 +0300
Subject: [PATCH 1/3] add react-chart-js-2

---
 package.json |  1 +
 yarn.lock    | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/package.json b/package.json
index cf9506a2..53fbe8a0 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 68b3bd8b..f29723b9 100644
--- a/yarn.lock
+++ b/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"

From 431b370707e5e12a30490b16efd892c5b7c00c03 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 13 Sep 2023 12:05:43 +0300
Subject: [PATCH 2/3] Create line chart using chart.js

---
 .../Dashboard/BalanceLineChart/LineChart.tsx  | 108 ++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 src/pages/Dashboard/BalanceLineChart/LineChart.tsx

diff --git a/src/pages/Dashboard/BalanceLineChart/LineChart.tsx b/src/pages/Dashboard/BalanceLineChart/LineChart.tsx
new file mode 100644
index 00000000..1390ebc4
--- /dev/null
+++ b/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;
\ No newline at end of file

From f1d0dfd991a518b8a299a8ab30986a039ed416b7 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 13 Sep 2023 12:06:01 +0300
Subject: [PATCH 3/3] Create dashboard balance card design

---
 .../BalanceLineChart/BalanceChardCard.tsx     | 32 +++++++++++++++++++
 src/pages/Dashboard/Dashboard.tsx             |  2 ++
 2 files changed, 34 insertions(+)
 create mode 100644 src/pages/Dashboard/BalanceLineChart/BalanceChardCard.tsx

diff --git a/src/pages/Dashboard/BalanceLineChart/BalanceChardCard.tsx b/src/pages/Dashboard/BalanceLineChart/BalanceChardCard.tsx
new file mode 100644
index 00000000..83a2201c
--- /dev/null
+++ b/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;
diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index fc2837ef..5bb5ea60 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -2,12 +2,14 @@ import { YStack } from 'tamagui'
 
 import BasicInfoCards from './BasicInfoCards/BasicInfoCards'
 import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer'
+import BalanceChardCard from './BalanceLineChart/BalanceChardCard'
 
 const Dashboard = () => {
   return (
     <YStack space={'$2'} alignItems="start">
       <AddCardsContainer />
       <BasicInfoCards />
+      <BalanceChardCard/>
     </YStack>
   )
 }