making historical page as server side

mnsrulz · Oct 8, 2024 · 6421105 · 6421105
1 parent a9346d0
commit 6421105
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
diff --git a/src/app/seasonal/[symbol]/page.tsx b/src/app/seasonal/[symbol]/page.tsx
@@ -6,10 +6,7 @@ export default async function Page({ params }: { params: { symbol: string } }) {
     const { symbol } = params;
     const dt = await getSeasonalView(symbol, '5y', 'monthly');
     return <>
-    {/* not working due to clientside and serverside battle.. let's look at it later */}
-        {/* <TickerSearchNavigation basePath='/seasonal' /> */}
-        <HistoricalSeason data={dt} />
+        <TickerSearchNavigation basePath='/seasonal' />
+        <HistoricalSeason data={dt} symbol={symbol} />
     </>
-}
-
-
+}
diff --git a/src/components/HistoricalSeason.tsx b/src/components/HistoricalSeason.tsx
@@ -4,8 +4,8 @@ import { HistoricalDataResponse } from "@/lib/types"
 import { GridColDef, DataGrid, gridClasses } from "@mui/x-data-grid";
 import dayjs from "dayjs";
 import { ConditionalFormattingBox } from "./ConditionalFormattingBox";
-import { numberFormatter, percentageFormatter } from "@/lib/formatters";
-
+import { percentageFormatter } from "@/lib/formatters";
+import { Box, Typography } from "@mui/material";
 
 const months = [
     'January',
@@ -22,8 +22,8 @@ const months = [
     'December',
 ];
 
-export const HistoricalSeason = (props: { data: HistoricalDataResponse }) => {
-    const currentYear = dayjs().year();
+export const HistoricalSeason = (props: { data: HistoricalDataResponse, symbol: string }) => {
+    // const currentYear = dayjs().year();
     // use to render the graph/chart
     // const dkk = dt.history.day.reduce((acc: Record<string, number[]>, current) => {
     //     const year = dayjs(current.date).format('YYYY');
@@ -51,30 +51,30 @@ const seriesData = Object.keys(dkk).map(year => ({
     */
     const dt = props.data;
     const years: string[] = []
-    const dkk = dt.history.day.reduce((acc: { id: string }[], current) => {
+    const rowsData = dt.history.day.reduce((acc: { id: string }[], current) => {
         const year = dayjs(current.date).format('YYYY');
         const pm = ((current.close - current.open) / current.open);
         const month = dayjs(current.date).month();
         (acc.find(j => j.id === months[month]) as any)[`d${year}`] = pm.toFixed(2);
         if (!years.includes(year)) years.push(year);
         return acc
     }, months.map(j => ({ id: j })));
-    debugger;
 
     const columns: GridColDef[] = [
-        { field: 'id', width: 120, headerName: 'month' },
+        { field: 'id', width: 120, headerName: 'Month' },
         ...years.map(j => {
             return {
-                field: `d${j}`, width: 120, headerName: j,
-                valueFormatter: percentageFormatter, 
+                field: `d${j}`, width: 10, headerName: j, align: 'right',
+                valueFormatter: percentageFormatter,
                 type: 'number',
-                renderCell: (p) => <ConditionalFormattingBox value={p.value} formattedValue={p.formattedValue} />
+                renderCell: (p) => <ConditionalFormattingBox value={p.value * 1000} formattedValue={p.formattedValue} />
             } as GridColDef
         })
     ]
 
-    return <div>
-        <DataGrid rows={dkk}
+    return <Box sx={{ mt: 1 }}>
+        <Typography variant="h6">Ticker: {props.symbol}</Typography>
+        <DataGrid rows={rowsData}
             disableColumnMenu={true}
             disableColumnFilter={true}
             disableColumnSorting={true}
@@ -106,5 +106,5 @@ const seriesData = Object.keys(dkk).map(year => ({
                 },
             }}
         />
-    </div>
+    </Box>
 }
diff --git a/src/components/TickerSearchNavigation.tsx b/src/components/TickerSearchNavigation.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { TickerSearch } from '@/components/TickerSearch';
 import { useRouter } from 'next/navigation';