bump dependency and minor style changes

3 files changed, 58 insertions, 27 deletions

diff --git a/src/components/DataChart/DataChart.tsx b/src/components/DataChart/DataChart.tsx
index 9fbc5fe..4f8eecd 100644
--- a/src/components/DataChart/DataChart.tsx
+++ b/src/components/DataChart/DataChart.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -8,9 +8,8 @@ import {
   Title,
   Tooltip,
   Legend,
-} from 'chart.js';
-import { Line } from 'react-chartjs-2';
-
+} from "chart.js";
+import { Line } from "react-chartjs-2";
 
 ChartJS.register(
   CategoryScale,
@@ -22,52 +21,62 @@ ChartJS.register(
   Legend
 );
 
-
 interface DataChartProps {
-  channel_name?: string;
   chartData?: any;
   graphTitle?: string;
+  fullData?: boolean;
+  overrideBorderColor?: string
+  overrideBGColor?: string
 }
 
-const DataChart: React.FC<DataChartProps> = ({ channel_name, chartData, graphTitle }) => {
+const DataChart: React.FC<DataChartProps> = ({
+  chartData,
+  graphTitle,
+  fullData,
+  overrideBGColor,
+  overrideBorderColor
+}) => {
   const options = {
     responsive: true,
     plugins: {
       legend: {
-        position: 'top' as const,
+        position: "top" as const,
       },
       title: {
         display: true,
-        text: graphTitle || 'Historical Subscriber Data',
+        text: graphTitle || "Historical Subscriber Data",
         font: {
-          size: 18
-        }
+          size: 18,
+        },
       },
     },
     scales: {
       x: {
         ticks: {
           autoSkip: true,
-          maxTicksLimit: 10
-        }
-      }
-    }
+          maxTicksLimit: 10,
+        },
+      },
+    },
   };
 
   const data = {
     labels: chartData.labels,
     datasets: [
       {
-        label: 'Subscriber Count',
+        label: "Subscriber Count",
         data: chartData.datasets,
-        borderColor: 'rgb(255, 99, 132)',
-        backgroundColor: 'rgba(255, 99, 132, 0.5)',
+        borderColor: overrideBorderColor||"rgb(255, 99, 132)",
+        backgroundColor: overrideBGColor||"rgba(255, 99, 132, 0.5)",
       },
     ],
-  }
-
+  };
 
-  return <Line options={options} data={data} />;
+  if (!fullData) {
+    return <Line options={options} data={data} />;
+  } else {
+    return <Line options={options} data={chartData} />;
+  }
 };
 
-export default DataChart;
\ No newline at end of file
+export default DataChart;
diff --git a/src/components/channel-card.tsx b/src/components/channel-card.tsx
index 58b2b5c..599c48a 100644
--- a/src/components/channel-card.tsx
+++ b/src/components/channel-card.tsx
@@ -40,7 +40,7 @@ export function ChannelCard(props: ChannelCardProps) {
         </div>
         <div className="flex flex-col items-center">
           <span className="text-l text-gray-600">Next Milestone</span>
-          <span className="font-semibold">{nextMilestone.toLocaleString()}</span>
+          <span className="font-semibold">{Number(nextMilestone).toLocaleString()}</span>
           <div className="flex justify-center items-center">
             <span className="text-sm text-gray-600 px-2">{nextMilestoneDays} days</span>
             <span className="text-sm text-gray-600 px-2">{nextMilestoneDate}</span>
diff --git a/src/pages/stats/[slug].tsx b/src/pages/stats/[slug].tsx
index 1e76d65..1b253ee 100644
--- a/src/pages/stats/[slug].tsx
+++ b/src/pages/stats/[slug].tsx
@@ -1,9 +1,9 @@
-import { useRouter } from "next/router";
 import { GetServerSideProps } from "next";
 import "../../app/globals.css";
 import TitleBar from "../../components/TitleBar/TitleBar";
 import { ChannelCard } from "@/components/channel-card";
 import DataChart from "@/components/DataChart/DataChart";
+import Footer from "@/components/Footer/Footer";
 
 interface ChannelDataProp {
   channel_name: string;
@@ -26,17 +26,19 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 
   const chartData = await getGraphData(slug as string);
   const channelData = await getChannelData(slug as string);
+  const sevenDayGraphData = await get7DGraphData(slug as string);
 
   return {
     props: {
       chartData,
       channelData,
-      slug
+      slug,
+      sevenDayGraphData
     },
   };
 };
 
-function Page({ chartData, channelData, slug }: { chartData: GraphDataProp, channelData: ChannelDataProp, slug: string }) {
+function Page({ chartData, channelData, sevenDayGraphData, slug }: { chartData: GraphDataProp, channelData: ChannelDataProp, sevenDayGraphData: GraphDataProp, slug: string }) {
   return (
     <>
       <TitleBar title={slug as string} redirectUrl="/" showHomeButton backgroundColor="black" />
@@ -56,9 +58,13 @@ function Page({ chartData, channelData, slug }: { chartData: GraphDataProp, chan
       </div>
       <div className="px-48 mb-10 mt-10">
         <div className="mb-12">
-          <DataChart channel_name={slug as string} chartData={chartData}/>
+          <DataChart overrideBGColor="black" overrideBorderColor="black" chartData={chartData}/>
+        </div>
+        <div className="mb-12">
+          <DataChart chartData={sevenDayGraphData} overrideBGColor="black" overrideBorderColor="black" graphTitle="7 Day Historical"/>
         </div>
       </div>
+      <Footer />
     </>
   );
 }
@@ -93,4 +99,20 @@ async function getChannelData(slug: string){
   return response.json();
 }
 
+async function get7DGraphData(slug: string){
+  const encodedSlug = encodeURIComponent(slug as string);
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL
+  const response = await fetch(apiUrl+`/api/subscribers/${encodedSlug}/7d`, {
+      headers: {
+          'Cache-Control': 'no-cache'
+      },
+      cache: 'no-cache'
+  });
+  if(!response.ok){
+      console.log(response.statusText);
+  }
+  return response.json();
+}
+
+
 export default Page;