somewhat fixed max on overview page and resized chart watermark

growthepie · Aug 31, 2023 · afa95a4 · afa95a4
1 parent 71a6021
commit afa95a4
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 4 deletions.
diff --git a/components/charts/chart.tsx b/components/charts/chart.tsx
@@ -34,6 +34,7 @@ export const Chart = ({
   chartHeight,
   chartWidth,
   decimals = 2,
+  maxY,
 }: {
   // data: { [chain: string]: number[][] };
   chartType: "area" | "line";
@@ -51,6 +52,7 @@ export const Chart = ({
   chartHeight: string;
   chartWidth: string;
   decimals?: number;
+  maxY?: number;
 }) => {
   const chartComponent = useRef<Highcharts.Chart | null | undefined>(null);
   const [highchartsLoaded, setHighchartsLoaded] = useState(false);
@@ -281,11 +283,11 @@ export const Chart = ({
       });
       chartComponent.current?.redraw();
     }
-  }, [chartType, series, theme, types]);
+  }, [chartType, series, theme, types, maxY]);
 
   useEffect(() => {
     drawChartSeries();
-  }, [drawChartSeries, series, types]);
+  }, [drawChartSeries, series, types, maxY]);
 
   const resetXAxisExtremes = useCallback(() => {
     if (chartComponent.current) {
@@ -420,7 +422,7 @@ export const Chart = ({
                       ...baseOptions.yAxis,
                       type: yScale,
                       min: yScale === "percentage" ? 0 : undefined,
-                      max: yScale === "percentage" ? undefined : undefined,
+                      max: yScale === "percentage" ? maxY : maxY,
                       gridLineColor:
                         theme === "dark"
                           ? "rgba(215, 223, 222, 0.11)"
@@ -469,7 +471,13 @@ export const Chart = ({
                 />
               </div>
               <div className="absolute bottom-[47.5%] left-0 right-0 flex items-center justify-center pointer-events-none z-0 opacity-50 mix-blend-lighten">
-                <ChartWatermark className="w-[128.67px] h-[30.67px] md:w-[193px] md:h-[46px]" />
+                <ChartWatermark
+                  className={`h-[30.67px]  md:h-[46px] ${
+                    parseInt(chartHeight, 10) > 200
+                      ? "w-[128px] md:w-[163px]"
+                      : "w-[128.67px] md:w-[193px] "
+                  }`}
+                />
               </div>
             </div>
             {series.length === 0 && (

diff --git a/components/layout/OverviewMetrics.tsx b/components/layout/OverviewMetrics.tsx
@@ -454,6 +454,10 @@ export default function OverviewMetrics({
   useEffect(() => {
     if (selectedMode.includes("gas_fees_share")) {
       setSelectedMode(showUsd ? "gas_fees_share_usd" : "gas_fees_share_eth");
+    } else {
+      setSelectedMode(
+        showUsd ? "gas_fees_usd_absolute" : "gas_fees_eth_absolute",
+      );
     }
   }, [selectedMode, showUsd]);
 
@@ -822,6 +826,66 @@ export default function OverviewMetrics({
     ],
   );
 
+  const chartMax = useMemo(() => {
+    let returnValue = 0;
+    let typeIndex = data["all_l2s"].daily["types"].indexOf(selectedMode);
+
+    if (selectedChain) {
+      for (
+        let i = 0;
+        i <
+        (selectedTimespan === "max"
+          ? data[selectedChain].daily[selectedCategory].data.length
+          : timespans[selectedTimespan].value);
+        i++
+      ) {
+        if (
+          data[selectedChain].daily[selectedCategory].data.length - (i + 1) >=
+          0
+        ) {
+          if (
+            data[selectedChain].daily[selectedCategory].data[
+              data[selectedChain].daily[selectedCategory].data.length - (i + 1)
+            ][typeIndex] > returnValue
+          ) {
+            returnValue =
+              data[selectedChain].daily[selectedCategory].data[
+                data[selectedChain].daily[selectedCategory].data.length -
+                  (i + 1)
+              ][typeIndex];
+          }
+        }
+      }
+    } else {
+      for (
+        let i = 0;
+        i <
+        (selectedTimespan === "max"
+          ? data["all_l2s"].daily[selectedCategory].data.length
+          : timespans[selectedTimespan].value);
+        i++
+      ) {
+        if (
+          data["all_l2s"].daily[selectedCategory].data.length - (i + 1) >=
+          0
+        ) {
+          if (
+            data["all_l2s"].daily[selectedCategory].data[
+              data["all_l2s"].daily[selectedCategory].data.length - (i + 1)
+            ][typeIndex] > returnValue
+          ) {
+            returnValue =
+              data["all_l2s"].daily[selectedCategory].data[
+                data["all_l2s"].daily[selectedCategory].data.length - (i + 1)
+              ][typeIndex];
+          }
+        }
+      }
+    }
+    return returnValue;
+  }, [selectedTimespan, selectedCategory, selectedMode, selectedChain]);
+
+  console.log(chartMax);
   function formatNumber(number: number): string {
     if (number === 0) {
       return "0";
@@ -1374,6 +1438,7 @@ export default function OverviewMetrics({
           yScale={selectedValue === "share" ? "percentage" : "linear"}
           chartHeight="196px"
           chartWidth="100%"
+          maxY={chartMax}
         />
       </Container>
       <Container className="w-[98%] ml-4">