Merge pull request #71 from growthepie/dev

chains page, blockspace charts x-axis
growthepie · May 25, 2024 · bfac556 · bfac556
2 parents 78b08c6 + 7d3593f
commit bfac556
Show file tree

Hide file tree

Showing 24 changed files with 1,119 additions and 1,018 deletions.
diff --git a/app/(embeds)/embed/EmbedContainer.tsx b/app/(embeds)/embed/EmbedContainer.tsx
@@ -40,9 +40,9 @@ const EmbedContainer = ({
     if (queryZoomed && queryStartTimestamp && queryEndTimestamp)
       tf = `${new Date(
         Math.round(parseInt(queryStartTimestamp)),
-      ).toLocaleDateString()} - ${new Date(
+      ).toLocaleDateString("en-GB")} - ${new Date(
         Math.round(parseInt(queryEndTimestamp)),
-      ).toLocaleDateString()}`;
+      ).toLocaleDateString("en-GB")}`;
     return tf;
   }, [time_frame, queryZoomed, queryStartTimestamp, queryEndTimestamp]);
 

diff --git a/app/(fees)/fees/ChartContainer.tsx b/app/(fees)/fees/ChartContainer.tsx
@@ -112,12 +112,12 @@ export default function ChartContainer({
   }
 
   const chartMinMaxXAxisLabels = useMemo(() => {
-    if(!data || !metrics.length || !timeFrames.length || !selectedChains.length) {
+    if (!data || !metrics.length || !timeFrames.length || !selectedChains.length) {
       return ["", ""];
     }
 
     const chains = Object.keys(data.chain_data).filter(chain => selectedChains.includes(chain));
-    
+
     // check the current metric and timeframe for all selected chains
     const selectedMetricData = chains.map(chain => {
       return data.chain_data[chain][metrics[metricIndex]][timeFrames[timeFrameIndex]];
@@ -131,18 +131,16 @@ export default function ChartContainer({
     // get the middle value
     // const middle = min + (max - min) / 2;
 
-    if(timeFrames[timeFrameIndex] === "24hrs") {
+    if (timeFrames[timeFrameIndex] === "24hrs") {
       return [
-        new Date(min).toLocaleTimeString(undefined, {hour: '2-digit', minute: '2-digit'}),
-        // new Date(middle).toLocaleTimeString(undefined, {hour: '2-digit'}),
-        new Date(max).toLocaleTimeString(undefined, {hour: '2-digit', minute: '2-digit'}),
+        new Date(min).toLocaleTimeString("en-GB", { hour: '2-digit', minute: '2-digit' }),
+        new Date(max).toLocaleTimeString("en-GB", { hour: '2-digit', minute: '2-digit' }),
       ];
     }
-    
+
     return [
-      new Date(min).toLocaleDateString(undefined, {month: 'short', day: 'numeric', year: 'numeric'}),
-      // new Date(middle).toLocaleDateString(undefined, {month: 'short', day: 'numeric', year: 'numeric'}),
-      new Date(max).toLocaleDateString(undefined, {month: 'short', day: 'numeric', year: 'numeric'})
+      new Date(min).toLocaleDateString("en-GB", { month: 'short', day: 'numeric', year: 'numeric' }),
+      new Date(max).toLocaleDateString("en-GB", { month: 'short', day: 'numeric', year: 'numeric' })
     ];
   }, [data, metricIndex, metrics, selectedChains, timeFrameIndex, timeFrames]);
 
@@ -255,9 +253,9 @@ export default function ChartContainer({
             {/* xMin and xMax chart labels */}
             <div className="relative w-full px-[15px] pb-[10px]">
               <div className="h-[15px] flex justify-between">
-              {chartMinMaxXAxisLabels.map((label, index) => (
-                <div key={index} className="h-[15px] w-[1px] bg-[#5A6462]"></div>
-              ))}
+                {chartMinMaxXAxisLabels.map((label, index) => (
+                  <div key={index} className="h-[15px] w-[1px] bg-[#5A6462]"></div>
+                ))}
               </div>
               <div className="absolute inset-0 top-[14px] px-[15px] flex justify-between text-[10px]">
                 {chartMinMaxXAxisLabels.map((label, index) => (

diff --git a/app/(fees)/fees/FeesChart.tsx b/app/(fees)/fees/FeesChart.tsx
@@ -115,7 +115,7 @@ export default function FeesChart({ selectedMetric, selectedTimeframe, selectedC
       let prefix = valuePrefix;
       let suffix = "";
       let multiplier = 1
-      
+
 
 
 
@@ -125,8 +125,8 @@ export default function FeesChart({ selectedMetric, selectedTimeframe, selectedC
           suffix = " gwei";
           multiplier = 1e9;
         }
-      }else{
-        if(showCents){
+      } else {
+        if (showCents) {
           prefix = "";
           suffix = " cents"
           multiplier = 100;
@@ -168,7 +168,7 @@ export default function FeesChart({ selectedMetric, selectedTimeframe, selectedC
     function (this: any) {
       const { x, points } = this;
       const date = new Date(x);
-      let dateString = date.toLocaleDateString(undefined, {
+      let dateString = date.toLocaleDateString("en-GB", {
         month: "short",
         day: "numeric",
         year: "numeric",
@@ -178,8 +178,8 @@ export default function FeesChart({ selectedMetric, selectedTimeframe, selectedC
       // if so, add the time to the tooltip
       const timeDiff = points[0].series.xData[1] - points[0].series.xData[0];
       if (timeDiff < 1000 * 60 * 60 * 24) {
-        dateString += " " + date.toLocaleTimeString(undefined, {
-          
+        dateString += " " + date.toLocaleTimeString("en-GB", {
+
           hour: "numeric",
           minute: "2-digit",
         });
@@ -254,8 +254,8 @@ export default function FeesChart({ selectedMetric, selectedTimeframe, selectedC
               suffix = " gwei";
               displayValue = y * 1e9;
             }
-          }else{
-            if(showCents){
+          } else {
+            if (showCents) {
               prefix = "";
               suffix = " cents";
               displayValue = y * 100;
@@ -273,7 +273,7 @@ export default function FeesChart({ selectedMetric, selectedTimeframe, selectedC
             }">${prefix}</div>
                 ${selectedMetric === "fdv" || selectedMetric === "market_cap"
               ? shortenNumber(displayValue).toString()
-              : parseFloat(displayValue).toLocaleString(undefined, {
+              : parseFloat(displayValue).toLocaleString("en-GB", {
                 minimumFractionDigits: valuePrefix ? 2 : 0,
                 maximumFractionDigits: valuePrefix
                   ? selectedMetric === "txcosts"
@@ -311,7 +311,7 @@ export default function FeesChart({ selectedMetric, selectedTimeframe, selectedC
           <div class="flex-1 text-right justify-end font-inter flex">
 
               <div class="opacity-70 mr-0.5 ${!prefix && "hidden"}">${prefix}</div>
-              ${parseFloat(value).toLocaleString(undefined, {
+              ${parseFloat(value).toLocaleString("en-GB", {
             minimumFractionDigits: valuePrefix ? 2 : 0,
             maximumFractionDigits: valuePrefix ? 2 : 0,
           })}
@@ -520,7 +520,7 @@ export default function FeesChart({ selectedMetric, selectedTimeframe, selectedC
             //   if (isYearStart) {
             //     return `<span style="font-size:14px;">${date.getFullYear()}</span>`;
             //   } else {
-            //     return `<span style="">${date.toLocaleDateString(undefined, {
+            //     return `<span style="">${date.toLocaleDateString("en-GB", {
             //       month: "short",
             //     })}</span>`;
             //   }

diff --git a/app/(fees)/fees/page.tsx b/app/(fees)/fees/page.tsx
@@ -1022,7 +1022,7 @@ export default function FeesPage() {
           >
             {showUsd && !showCents && <div>$</div>}
             <div className="flex items-center">
-              {Intl.NumberFormat(undefined, {
+              {Intl.NumberFormat("en-GB", {
                 notation: "compact",
                 maximumFractionDigits: fractionDigits,
                 minimumFractionDigits: fractionDigits,
@@ -1054,7 +1054,7 @@ export default function FeesPage() {
         >
           {showUsd && !showCents && <div>$</div>}
           <div>
-            {Intl.NumberFormat(undefined, {
+            {Intl.NumberFormat("en-GB", {
               notation: "compact",
               maximumFractionDigits: fractionDigits,
               minimumFractionDigits: fractionDigits,