add chart data

DenysShchypt · Jun 5, 2024 · f2381de · f2381de
1 parent 854dcad
commit f2381de
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 7 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,6 +18,7 @@
     "@types/node": "^16.18.97",
     "axios": "^1.7.2",
     "chart.js": "^4.4.3",
+    "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",

diff --git a/frontend/src/components/TopBar/index.tsx b/frontend/src/components/TopBar/index.tsx
@@ -37,7 +37,9 @@ const TopBarComponent: FC<ITopBarProps> = (
             className="menuIcon"
             onClick={() => setIsOpen(!isOpen)}
           />
-          <Typography variant="h3">Welcome {user.firstName}</Typography>
+          <Typography variant="h3">
+            Welcome {sessionStorage.getItem('name')}
+          </Typography>
         </FlexBetween>
         <Box display="flex">
           <Grid onClick={colorMode.toggleColorMode} className="iconBlock">

diff --git a/frontend/src/components/charts/areaChart/index.tsx b/frontend/src/components/charts/areaChart/index.tsx
@@ -27,10 +27,12 @@ ChartJS.register(
 interface IAreaChartProps {
   data: IAssetPriceData[];
 }
+
 const options: ChartOptions<'line'> = {
   responsive: true,
   scales: {
     x: {
+      display: false,
       grid: {
         display: false,
       },
@@ -46,29 +48,44 @@ const options: ChartOptions<'line'> = {
     legend: {
       display: false,
     },
+    title: {
+      display: true,
+      text: new Date().toLocaleDateString('en-us', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      }),
+    },
   },
 };
 
 const AreaChart: FC<IAreaChartProps> = ({ data }) => {
-  console.log(data);
   const values: ChartData<'line'> = {
-    labels: data.map(el => new Date(el.time).getUTCDate()),
+    labels: data.map(el => {
+      const timeDay = Number(`${el.time}000`);
+      return new Date(timeDay).toLocaleDateString('en-us', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      });
+    }),
     datasets: [
       {
         label: 'Price',
         data: data.map(el => el.close),
         fill: 'start',
         backgroundColor: (context: ScriptableContext<'line'>) => {
           const ctx = context.chart.ctx;
-          const gradient = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
+          const gradient = ctx.createLinearGradient(0, 50, 0, 180);
           gradient.addColorStop(0, '#C1EF00');
           gradient.addColorStop(1, '#232323');
           return gradient;
         },
       },
     ],
   };
-  return <Line options={options} data={values} width={300} height={100} />;
+  return <Line options={options} data={values} width={300} height={125} />;
 };
 
 export default AreaChart;
diff --git a/frontend/src/pages/Home/index.tsx b/frontend/src/pages/Home/index.tsx
@@ -4,7 +4,6 @@ import { useAppDispatch, useAppSelector } from '../../utils/hook';
 import { getFavoriteAssets, getPricePeriod } from '../../store/thunks/assets';
 import {
   IAssetFavoriteResponses,
-  IAssetPriceData,
   IAssetPriceResponses,
 } from '../../common/types/assets';
 import { BoxStyled } from './styles';
@@ -38,7 +37,7 @@ const Home: FC = (): JSX.Element => {
     fetchDataAsset(favoriteAssetsName);
   }, [dispatch, favoriteAssetsName]);
 
-  const filterFavoriteArray = favoriteAssets.filter(
+  const filterFavoriteArray: IAssetFavoriteResponses[] = favoriteAssets.filter(
     (value, index, self) =>
       index === self.findIndex(t => t.name === value.name),
   );

diff --git a/frontend/src/store/thunks/auth/index.ts b/frontend/src/store/thunks/auth/index.ts
@@ -11,6 +11,8 @@ export const loginUsers = createAsyncThunk<
   try {
     const user = await instance.post('auth/login', data);
     sessionStorage.setItem('token', user.data.token);
+    sessionStorage.setItem('name', user.data.user.firstName);
+    console.log(user.data);
     return user.data;
   } catch (error) {
     const typedError = error as IError;
@@ -29,6 +31,7 @@ export const registerUsers = createAsyncThunk<
   try {
     const newUser = await instance.post('auth/register', data);
     sessionStorage.setItem('token', newUser.data.token);
+    sessionStorage.setItem('name', newUser.data.user.firstName);
     return newUser.data;
   } catch (error) {
     const typedError = error as IError;