From 68cba8a186ef8f641562066d73f85bd53c240dd0 Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Sun, 26 Nov 2023 12:48:42 -0800
Subject: bump dependency and minor style changes

---
 src/components/DataChart/DataChart.tsx | 53 ++++++++++++++++++++--------------
 src/components/channel-card.tsx        |  2 +-
 2 files changed, 32 insertions(+), 23 deletions(-)

(limited to 'src/components')

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>
-- 
cgit v1.2.3