From 0771fa28fa3733bfe2f7d2e21bb73a264d67db74 Mon Sep 17 00:00:00 2001
From: mokelgit <maym2018@gmail.com>
Date: Thu, 16 Jan 2025 12:04:03 -0500
Subject: [PATCH] added monthly timespan selection

---
 app/(layout)/da-overview/page.tsx             |  8 ++--
 .../layout/DA-Overview/DAHeadCharts.tsx       | 22 ++++-----
 components/layout/DA-Overview/DATable.tsx     |  8 ++--
 .../layout/DA-Overview/DATableCharts.tsx      | 48 +++++++++++--------
 4 files changed, 46 insertions(+), 40 deletions(-)

diff --git a/app/(layout)/da-overview/page.tsx b/app/(layout)/da-overview/page.tsx
index 234430e9..fdf822e4 100644
--- a/app/(layout)/da-overview/page.tsx
+++ b/app/(layout)/da-overview/page.tsx
@@ -63,11 +63,11 @@ export default function DAOverviewPage() {
           };
         } else {
           return {
-            "180d": {
-              shortLabel: "6m",
-              label: "6 months",
+            "90d": {
+              shortLabel: "3m",
+              label: "3 months",
               value: 90,
-              xMin: xMax - 180 * 24 * 60 * 60 * 1000,
+              xMin: xMax - 90 * 24 * 60 * 60 * 1000,
               xMax: xMax,
             },
             "365d": {
diff --git a/components/layout/DA-Overview/DAHeadCharts.tsx b/components/layout/DA-Overview/DAHeadCharts.tsx
index d04cffed..082bcd67 100644
--- a/components/layout/DA-Overview/DAHeadCharts.tsx
+++ b/components/layout/DA-Overview/DAHeadCharts.tsx
@@ -68,8 +68,8 @@ export default function DAHeadCharts({selectedTimespan, isMonthly, data}: {selec
 
       let xMax = 0;
       Object.keys(data.metrics["fees_paid"]).forEach((key) => { 
-        if(data.metrics["fees_paid"][key].daily.data[data.metrics["fees_paid"][key].daily.data.length - 1][0] > xMax){
-          xMax = data.metrics["fees_paid"][key].daily.data[data.metrics["fees_paid"][key].daily.data.length - 1][0];
+        if(data.metrics["fees_paid"][key].daily.data[data.metrics["fees_paid"][key][isMonthly ? "monthly" : "daily"].data.length - 1][0] > xMax){
+          xMax = data.metrics["fees_paid"][key].daily.data[data.metrics["fees_paid"][key][isMonthly ? "monthly" : "daily"].data.length - 1][0];
         }
       })
   
@@ -119,11 +119,11 @@ export default function DAHeadCharts({selectedTimespan, isMonthly, data}: {selec
         };
       } else {
         return {
-          "180d": {
-            shortLabel: "6m",
-            label: "6 months",
+          "90d": {
+            shortLabel: "3m",
+            label: "3 months",
             value: 90,
-            xMin: xMax - 180 * 24 * 60 * 60 * 1000,
+            xMin: xMax - 90 * 24 * 60 * 60 * 1000,
             xMax: xMax,
           },
           "365d": {
@@ -256,12 +256,12 @@ export default function DAHeadCharts({selectedTimespan, isMonthly, data}: {selec
         let sum = 0;
         Object.keys(isolated_data).map((key) => {
             let typeIndex = 1;
-            if(isolated_data[key].daily.types.includes("usd")){
-                typeIndex = isolated_data[key].daily.types.indexOf(showUsd ? "usd" : "eth")
+            if(isolated_data[key][isMonthly ? "monthly" : "daily"].types.includes("usd")){
+                typeIndex = isolated_data[key][isMonthly ? "monthly" : "daily"].types.indexOf(showUsd ? "usd" : "eth")
             }
      
           sum +=
-            isolated_data[key].daily.data[isolated_data[key].daily.data.length - 1][
+            isolated_data[key][isMonthly ? "monthly" : "daily"].data[isolated_data[key][isMonthly ? "monthly" : "daily"].data.length - 1][
                 typeIndex
             ];
         });
@@ -644,7 +644,7 @@ export default function DAHeadCharts({selectedTimespan, isMonthly, data}: {selec
                             >
                                 {Object.keys(data.metrics[metricKey])
                                 .map((key, i) => {
-                                    let types = data.metrics[metricKey][key].daily.types;
+                                    let types = data.metrics[metricKey][key][isMonthly ? "monthly" : "daily"].types;
                                     let typeIndex = 1;
 
                                     
@@ -659,7 +659,7 @@ export default function DAHeadCharts({selectedTimespan, isMonthly, data}: {selec
                                     return(
                                         <AreaSeries 
                                             key={key}
-                                            data={data.metrics[metricKey][key].daily.data.map((d) => [d[0], d[typeIndex]])}
+                                            data={data.metrics[metricKey][key][isMonthly ? "monthly" : "daily"].data.map((d) => [d[0], d[typeIndex]])}
                                             color={area_colors[key]}
                                             name={data.metrics[metricKey][key].metric_name}
                                         />
diff --git a/components/layout/DA-Overview/DATable.tsx b/components/layout/DA-Overview/DATable.tsx
index ec5d099e..6211f916 100644
--- a/components/layout/DA-Overview/DATable.tsx
+++ b/components/layout/DA-Overview/DATable.tsx
@@ -152,11 +152,11 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
         };
       } else {
         return {
-          "180d": {
-            shortLabel: "6m",
-            label: "6 months",
+          "90d": {
+            shortLabel: "3m",
+            label: "3 months",
             value: 90,
-            xMin: xMax - 180 * 24 * 60 * 60 * 1000,
+            xMin: xMax - 90 * 24 * 60 * 60 * 1000,
             xMax: xMax,
           },
           "365d": {
diff --git a/components/layout/DA-Overview/DATableCharts.tsx b/components/layout/DA-Overview/DATableCharts.tsx
index 36de3195..27ff65bd 100644
--- a/components/layout/DA-Overview/DATableCharts.tsx
+++ b/components/layout/DA-Overview/DATableCharts.tsx
@@ -58,13 +58,15 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
         let xMax = 0;
         Object.keys(data.da_consumers).forEach((key) => { 
           
-          const values = data.da_consumers[key].daily.values;
+          const values = data.da_consumers[key][isMonthly ? "monthly" : "daily"].values;
           const length = values.length;
-          const types = data.da_consumers[key].daily.types;
+          const types = data.da_consumers[key][isMonthly ? "monthly" : "daily"].types;
       
-          if(values[values.length - 1][types.indexOf("unix")] > xMax){
-            xMax = values[values.length - 1][types.indexOf("unix")];
-          }
+            if(values.length > 0){
+                if(values[values.length - 1][types.indexOf("unix")] > xMax){
+                    xMax = values[values.length - 1][types.indexOf("unix")];
+                }
+            }
         })
 
     
@@ -114,12 +116,12 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
           };
         } else {
           return {
-            "180d": {
-              shortLabel: "6m",
-              label: "6 months",
-              value: 90,
-              xMin: xMax - 180 * 24 * 60 * 60 * 1000,
-              xMax: xMax,
+            "90d": {
+                shortLabel: "3m",
+                label: "3 months",
+                value: 90,
+                xMin: xMax - 90 * 24 * 60 * 60 * 1000,
+                xMax: xMax,
             },
             "365d": {
               shortLabel: "1y",
@@ -146,8 +148,8 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
         let totalArray = [[Number, Number]]
         Object.keys(data.da_consumers).forEach((key) => { 
           
-          const values = data.da_consumers[key].daily.values;
-          const types = data.da_consumers[key].daily.types;
+          const values = data.da_consumers[key][isMonthly ? "monthly" : "daily"].values;
+          const types = data.da_consumers[key][isMonthly ? "monthly" : "daily"].types;
           const total = values.map((d) => [
             d[types.indexOf("unix")], 
             d[types.indexOf("data_posted")]
@@ -606,17 +608,17 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
                     min={0}
                     
                     >
-                        {Object.keys(filteredChains).map((key, index) => {
-                            const types = data.da_consumers[key].daily.types;
-                            const name = data.da_consumers[key].daily.values[0][1];
+                        {Object.keys(filteredChains).filter((key) => {return data.da_consumers[key][isMonthly ? "monthly" : "daily"].values[0]}).map((key, index) => {
+                            const types = data.da_consumers[key][isMonthly ? "monthly" : "daily"].types;
+                            const name = data.da_consumers[key][isMonthly ? "monthly" : "daily"].values[0][1];
                             
                             return(
                                 <AreaSeries
                                     key={key + "-DATableCharts" + da_name} 
                                     name={name} 
-                                    visible={data.da_consumers[key].daily.values.length > 0}
+                                    visible={data.da_consumers[key][isMonthly ? "monthly" : "daily"].values.length > 0}
                                     
-                                    data={data.da_consumers[key].daily.values.map((d) => [
+                                    data={data.da_consumers[key][isMonthly ? "monthly" : "daily"].values.map((d) => [
                                         d[types.indexOf("unix")], 
                                         d[types.indexOf("data_posted")]
                                     ])}
@@ -643,6 +645,10 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
                     return 0;
                 }).map((key, index) => {
                         const custom_logo_keys = Object.keys(master.custom_logos);
+
+                        if(!data.da_consumers[key][isMonthly ? "monthly" : "daily"].values[0]){
+                            return <div></div>
+                        }
                         
                         return(
                             <div key={key + "da_consumers_info"} className={`flex relative gap-x-[5px] px-[5px] text-xxs rounded-full py-[0.5px] items-center transition-all cursor-pointer bg-[#344240] ${
@@ -662,8 +668,8 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
                                
                             >
                                 
-                                <div>{AllChainsByKeys[data.da_consumers[key].daily.values[0][2]] ? 
-                                    (<Icon icon={`gtp:${AllChainsByKeys[data.da_consumers[key].daily.values[0][2]].urlKey}-logo-monochrome`} className="w-[12px] h-[12px]" style={{ color: AllChainsByKeys[key].colors["dark"][0] }} />) 
+                                <div>{AllChainsByKeys[data.da_consumers[key][isMonthly ? "monthly" : "daily"].values[0][2]] ? 
+                                    (<Icon icon={`gtp:${AllChainsByKeys[data.da_consumers[key][isMonthly ? "monthly" : "daily"].values[0][2]].urlKey}-logo-monochrome`} className="w-[12px] h-[12px]" style={{ color: AllChainsByKeys[key].colors["dark"][0] }} />) 
                                     : custom_logo_keys.includes(key) 
                                         ? (    
                                          <DynamicIcon 
@@ -675,7 +681,7 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
                                         />
                                           ) 
                                         : (<div></div>)}</div>
-                                <div className="text-xxs">{data.da_consumers[key].daily.values[0][1]}</div>
+                                <div className="text-xxs">{data.da_consumers[key][isMonthly ? "monthly" : "daily"].values[0][1]}</div>
                                 <div className={`absolute right-[2px] top-[2.5px] w-[12px] h-[12px] text-[#FE5468] ${selectedChain === "all" ? "invisible" : "visible"}`}><Icon icon={selectedChain === key ? "gtp:x-circle" : "gtp:plus-circle"} className="w-[12px] h-[12px] "></Icon></div>
                             </div>
                         )