Daily watch time changes

backend/routes/stats.js

@@ -423,6 +423,7 @@ router.get("/getViewsOverTime", async (req, res) => {
     stats.forEach((item) => {
       const library = item.Library;
       const count = item.Count;
+      const watchTime = item.TotalTime;
       const date = new Date(item.Date).toLocaleDateString("en-US", {
         year: "numeric",
         month: "short",
@@ -435,7 +436,7 @@ router.get("/getViewsOverTime", async (req, res) => {
         };
       }
 
-      reorganizedData[date] = { ...reorganizedData[date], [library]: count };
+      reorganizedData[date] = { ...reorganizedData[date], [library]: { count, watchTime } };
     });
     const finalData = { libraries: libraries, stats: Object.values(reorganizedData) };
     res.send(finalData);

public/locales/en-UK/translation.json

@@ -167,7 +167,9 @@
   "STAT_PAGE": {
     "STATISTICS": "Statistics",
     "DAILY_PLAY_PER_LIBRARY": "Daily Play Count Per Library",
+    "DAILY_TIME_PER_LIBRARY": "Daily Watch Time Per Library",
     "PLAY_COUNT_BY": "Play Count By",
+    "PLAY_TIME_BY": "Play Time By",
     "COUNT_VIEW": "Total Count",
     "TIME_VIEW": "Total Time"
   },

src/pages/components/statistics/chart.jsx

@@ -1,6 +1,6 @@
 import { ResponsiveContainer, AreaChart, Area, XAxis, YAxis, Tooltip, Legend } from "recharts";
 
-function Chart({ stats, libraries }) {
+function Chart({ stats, libraries, viewName }) {
   const colors = [
     "rgb(54, 162, 235)", // blue
     "rgb(255, 99, 132)", // pink
@@ -24,13 +24,25 @@ function Chart({ stats, libraries }) {
     "rgb(147, 112, 219)", // medium purple
   ];
 
+  const flattenedStats = stats.map(item => {
+    const flatItem = { Key: item.Key };
+    for (const [libraryName, data] of Object.entries(item)) {
+      if (libraryName === "Key") continue;
+      flatItem[libraryName] = data[viewName] ?? 0;
+    }
+    return flatItem;
+  });
+
   const CustomTooltip = ({ payload, label, active }) => {
     if (active) {
       return (
         <div style={{ backgroundColor: "rgba(0,0,0,0.8)", color: "white" }} className="p-2 rounded-2 border-0">
           <p className="text-center fs-5">{label}</p>
           {libraries.map((library, index) => (
-            <p key={library.Id} style={{ color: `${colors[index]}` }}>{`${library.Name} : ${payload[index].value} Views`}</p>
+            // <p key={library.Id} style={{ color: `${colors[index]}` }}>{`${library.Name} : ${payload[index].value} Views`}</p>
+            <p key={library.Id} style={{ color: `${colors[index]}` }}>
+              {`${library.Name} : ${payload?.find(p => p.dataKey === library.Name).value} ${viewName === "count" ? "Views" : "Minutes"}`}
+            </p>
           ))}
         </div>
       );
@@ -41,16 +53,14 @@ function Chart({ stats, libraries }) {
 
   const getMaxValue = () => {
     let max = 0;
-    if (stats) {
-      stats.forEach((datum) => {
-        Object.keys(datum).forEach((key) => {
-          if (key !== "Key") {
-            max = Math.max(max, parseInt(datum[key]));
-          }
-        });
+    flattenedStats.forEach(datum => {
+      libraries.forEach(library => {
+        const value = parseFloat(datum[library.Name]);
+        if (!isNaN(value)) {
+          max = Math.max(max, value);
+        }
       });
-    }
-
+    });
     return max;
   };
 
@@ -58,7 +68,7 @@ function Chart({ stats, libraries }) {
 
   return (
     <ResponsiveContainer width="100%">
-      <AreaChart data={stats} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
+      <AreaChart data={flattenedStats} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
         <defs>
           {libraries.map((library, index) => (
             <linearGradient key={library.Id} id={library.Id} x1="0" y1="0" x2="0" y2="1">

src/pages/components/statistics/daily-play-count.jsx

@@ -10,6 +10,7 @@ function DailyPlayStats(props) {
   const [stats, setStats] = useState();
   const [libraries, setLibraries] = useState();
   const [days, setDays] = useState(20);
+  const [viewName, setViewName] = useState("viewCount");
   const token = localStorage.getItem("token");
   
 
@@ -45,6 +46,9 @@ function DailyPlayStats(props) {
       setDays(props.days);
       fetchLibraries();
     }
+    if (props.viewName !== viewName) {
+      setViewName(props.viewName);
+    }
 
     const intervalId = setInterval(fetchLibraries, 60000 * 5);
     return () => clearInterval(intervalId);
@@ -54,10 +58,12 @@ function DailyPlayStats(props) {
     return <></>;
   }
 
+  const titleKey = viewName === "count" ? "STAT_PAGE.DAILY_PLAY_PER_LIBRARY" : "STAT_PAGE.DAILY_TIME_PER_LIBRARY";
+  
   if (stats.length === 0) {
     return (
       <div className="main-widget">
-        <h1><Trans i18nKey={"STAT_PAGE.DAILY_PLAY_PER_LIBRARY"}/> - {days} <Trans i18nKey={`UNITS.DAY${days>1 ? 'S':''}`}/></h1>
+        <h1><Trans i18nKey={titleKey}/> - {days} <Trans i18nKey={`UNITS.DAY${days>1 ? 'S':''}`}/></h1>
 
         <h5><Trans i18nKey={"ERROR_MESSAGES.NO_STATS"}/></h5>
       </div>
@@ -65,10 +71,10 @@ function DailyPlayStats(props) {
   }
   return (
     <div className="main-widget">
-      <h2 className="text-start my-2"><Trans i18nKey={"STAT_PAGE.DAILY_PLAY_PER_LIBRARY"}/> - <Trans i18nKey={"LAST"}/> {days} <Trans i18nKey={`UNITS.DAY${days>1 ? 'S':''}`}/></h2>
+      <h2 className="text-start my-2"><Trans i18nKey={titleKey}/> - <Trans i18nKey={"LAST"}/> {days} <Trans i18nKey={`UNITS.DAY${days>1 ? 'S':''}`}/></h2>
 
       <div className="graph">
-         <Chart libraries={libraries} stats={stats} />
+         <Chart libraries={libraries} stats={stats} viewName={viewName}/>
       </div>
     </div>
   );

src/pages/statistics.jsx

@@ -56,7 +56,6 @@ function Statistics() {
             activeKey={activeTab}
             onSelect={setTab}
             variant="pills"
-            className="custom-tabs"
           >
             <Tab eventKey="tabCount" title={<Trans i18nKey="STAT_PAGE.COUNT_VIEW" />} />
             <Tab eventKey="tabTime" title={<Trans i18nKey="STAT_PAGE.TIME_VIEW" />} />
@@ -77,20 +76,20 @@ function Statistics() {
 
       {activeTab === "tabCount" && (
         <>
-          <DailyPlayStats days={days} />
+          <DailyPlayStats days={days} viewName="count" />
           <div className="statistics-graphs">
-            <PlayStatsByDay days={days} />
-            <PlayStatsByHour days={days} />
+            <PlayStatsByDay days={days} viewName="count" />
+            <PlayStatsByHour days={days} viewName="count" />
           </div>
         </>
       )}
 
       {activeTab === "tabTime" && (
         <>
-          <DailyPlayStats days={days} />
+          <DailyPlayStats days={days} viewName="watchTime" />
           <div className="statistics-graphs">
-            <PlayStatsByDay days={days} />
-            <PlayStatsByHour days={days} />
+            <PlayStatsByDay days={days} viewName="watchTime" />
+            <PlayStatsByHour days={days} viewName="watchTime" />
           </div>
         </>
       )}