bump dependency and minor style changes

5 files changed, 90 insertions, 48 deletions

diff --git a/backend/graph.py b/backend/graph.py
index 815c1ea..38cc8bb 100644
--- a/backend/graph.py
+++ b/backend/graph.py
@@ -1,9 +1,6 @@
 import plotly.graph_objs as go
 import pandas as pd
 import warnings
-import math
-from datetime import datetime, timedelta
-import numpy as np
 
 def plot_subscriber_count_over_time(server, table_name, gtitle = "Subscriber Count Over Time for Phase Connect Members",
                                     overrideQuery = None, markers = "lines", exclude_channels = []):
@@ -21,8 +18,8 @@ def plot_subscriber_count_over_time(server, table_name, gtitle = "Subscriber Cou
             showlegend = True))
     fig.update_layout(
         title = {'text': gtitle, 'x': 0.5, 'xanchor': 'center',
-                 'yanchor': 'top', 'font': {'family': 'Arial', 'size': 30}},
-        xaxis_title = "Timestamp",
+                 'yanchor': 'top', 'font': {'family': 'Droid Sans', 'size': 30}},
+        xaxis_title = "Date",
         yaxis_title = "Subscribers",
         legend = dict(font = dict(size = 16), title = dict(text = "Channels")),
         height = 950,
diff --git a/backend/requirements.txt b/backend/requirements.txt
index 2f05f53..2099279 100644
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@@ -1,21 +1,35 @@
-certifi==2023.7.22
-charset-normalizer==3.1.0
+blinker==1.7.0
+certifi==2023.11.17
+charset-normalizer==3.3.2
+click==8.1.7
 docopt==0.6.2
-greenlet==2.0.2
-idna==3.4
-mysql-connector-python==8.0.32
-numpy==1.24.2
-packaging==23.0
-pandas==1.5.3
-pipreqs==0.4.12
-plotly==5.13.1
-protobuf==3.20.3
+Flask==3.0.0
+Flask-Cors==4.0.0
+greenlet==3.0.1
+idna==3.6
+itsdangerous==2.1.2
+Jinja2==3.1.2
+joblib==1.3.2
+MarkupSafe==2.1.3
+mysql-connector-python==8.2.0
+numpy==1.26.2
+packaging==23.2
+pandas==2.1.3
+patsy==0.5.3
+pip-review==1.3.0
+pipreqs==0.4.13
+plotly==5.18.0
+protobuf==4.21.12
 python-dateutil==2.8.2
-pytz==2022.7.1
+pytz==2023.3.post1
 requests==2.31.0
+scikit-learn==1.3.2
+scipy==1.11.4
 six==1.16.0
-tenacity==8.2.2
-typing_extensions==4.5.0
-urllib3==1.26.15
+tenacity==8.2.3
+threadpoolctl==3.2.0
+typing_extensions==4.8.0
+tzdata==2023.3
+urllib3==2.1.0
+Werkzeug==3.0.1
 yarg==0.1.9
-Flask~=2.2.3
\ No newline at end of file
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;