feat: migrated from chart.js to google-charts

screens/Header/Header.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useAppStore } from '@/lib/storage';
+import { type Theme } from '@/lib/theme';
 import { tabs } from './data';
 
 export const Header = (): JSX.Element => {
@@ -17,7 +18,7 @@ export const Header = (): JSX.Element => {
             setTab(tabData);
           }}
         >
-          <h3>{tabData.title}</h3>
+          <TabText>{tabData.title}</TabText>
         </StyledTab>
       ))}
     </TabsContainer>
@@ -25,14 +26,15 @@ export const Header = (): JSX.Element => {
 };
 
 const TabsContainer = styled.div`
-  background: #635985;
+  background: ${({ theme }) => theme.colors.secondary};
   display: flex;
 `;
 
 const StyledTab = styled.div<{
   active: boolean;
 }>`
-  background: ${({ active }) => (active ? '#443C68' : '#635985')};
+  background: ${({ active, theme }: { active: boolean; theme: Theme }) =>
+    active ? theme.colors.complementary : theme.colors.secondary};
   padding: 12px 0px;
   text-align: center;
   transition: 0.2s ease-in-out all;
@@ -43,3 +45,7 @@ const StyledTab = styled.div<{
     transition: 0.2s ease-in-out all;
   }
 `;
+
+const TabText = styled.h3`
+  color: ${({ theme }: { theme: Theme }) => theme.colors.textColor.primary};
+`;

screens/SpendScreen/SpendScreen.tsx

@@ -1,10 +1,29 @@
 import React from 'react';
+import styled from 'styled-components';
 import { PieCircle } from '@/components';
+import { type Theme } from '@/lib/theme';
+import { useAppStore } from '@/lib/storage';
+import { type PieCircleData } from '@/lib/types';
 
 export const SpendScreen = (): JSX.Element => {
+  const userSpendData = useAppStore((state) => state.userSpendData);
+  const reducedUserData = userSpendData.reduce(
+    (acc, value) =>
+      acc.set(value.category.label, [...(acc.get(value.category.label) || []), value]),
+    new Map(),
+  );
+  const combinedUserData: PieCircleData = [...reducedUserData.entries()].map(([key, values]) => [
+    [key, values.reduce((acc: number, { value }: { value: number }) => acc + value, 0)],
+    { backgroundColor: values[0].category.backgroundColor, label: values[0].category.label },
+  ]);
   return (
-    <>
-      <PieCircle />
-    </>
+    <SpendScreenContainer>
+      <PieCircle pieCircleData={combinedUserData} />
+    </SpendScreenContainer>
   );
 };
+
+const SpendScreenContainer = styled.div`
+  background-color: ${({ theme }: { theme: Theme }) => theme.colors.primary};
+  height: 100%;
+`;