franpcode/spend-ia
1
0
Fork 0
mirror of https://github.com/FranP-code/spend-ia.git synced 2025-10-13 00:14:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: migrated from chart.js to google-charts

Browse Source
This commit is contained in:
Francisco Pessano
2023-06-10 21:17:16 -03:00
parent e7149f53ff
commit db0d493944
13 changed files with 265 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pages/index.css
View File

@@ -26,3 +26,7 @@ a:hover {
margin: 0;
padding: 0;
}
#__next, body, html {
height: 100%;
}

71
pages/index.tsx
View File

@@ -1,20 +1,20 @@
import React from 'react';
import Head from 'next/head';
import styled, { ThemeProvider } from 'styled-components';
import { Header, SpendScreen } from '@/screens';
import { type Tab } from '@/lib/types';
import { APP_NAME, SPEND_SCREEN_ID } from '@/lib/constants';
import Head from 'next/head';
import { useAppStore } from '@/lib/storage';
import theme from '@/lib/theme';
const HeadIndex = (): JSX.Element => {
return (
<>
<Head>
<title>{APP_NAME}</title>
<meta property="og:title" content={APP_NAME} key="title" />
</Head>
</>
);
};
const HeadIndex = (): JSX.Element => (
<>
<Head>
<title>{APP_NAME}</title>
<meta property="og:title" content={APP_NAME} key="title" />
</Head>
</>
);
const appRender = ({ tab }: { tab: Tab }): JSX.Element => {
switch (tab.id) {
@@ -27,13 +27,56 @@ const appRender = ({ tab }: { tab: Tab }): JSX.Element => {
function App(): JSX.Element {
const tab = useAppStore((state) => state.tab);
const setUserSpendData = useAppStore((state) => state.setUserSpendData);
setUserSpendData([
{
category: { backgroundColor: 'rgb(99, 128, 255)', label: 'invest' },
currency: {
id: 'usd',
label: 'usd',
},
date: new Date(),
value: 124,
},
{
category: { backgroundColor: 'rgb(99, 128, 255)', label: 'invest' },
currency: {
id: 'usd',
label: 'usd',
},
date: new Date(),
value: 124.1,
},
{
category: { backgroundColor: 'rgb(54, 162, 235)', label: 'school' },
currency: {
id: 'usd',
label: 'usd',
},
date: new Date(),
value: 124.43335,
},
{
category: { backgroundColor: 'rgb(145, 86, 255)', label: 'party' },
currency: {
id: 'usd',
label: 'usd',
},
date: new Date(),
value: 1242,
},
]);
return (
<>
<ThemeProvider theme={theme}>
<HeadIndex />
<Header />
{appRender({ tab })}
</>
<Body>{appRender({ tab })}</Body>
</ThemeProvider>
);
}
const Body = styled.div`
height: 100%;
`;
export default App;