adjusted layout for timespan bar and hidden top charts on 1d

growthepie · Nov 26, 2024 · bf29d21 · bf29d21
1 parent 796bac4
commit bf29d21
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 76 deletions.
diff --git a/app/(layout)/economics/page.tsx b/app/(layout)/economics/page.tsx
@@ -57,8 +57,8 @@ export default function Economics() {
       />
       {/* <div className="mt-[15px] flex flex-col gap-y-[60px] h-full"> */}
       {/*Data Availability Fee Markets */}
-      <Container className="pb-[60px]">
-        {econData && <EconHeadCharts chart_data={econData.data.all_l2s} selectedTimespan={selectedTimespan} isMonthly={isMonthly} />}
+      <Container className={` ${selectedTimespan === "1d" ? "pb-[0px]" : "pb-[60px]"}`}>
+        {econData && <EconHeadCharts chart_data={econData.data.all_l2s} selectedTimespan={selectedTimespan} setSelectedTimespan={setSelectedTimespan} isMonthly={isMonthly} setIsMonthly={setIsMonthly} />}
       </Container>
       {econData && master && <ChainBreakdown data={econData.data.chain_breakdown} master={master} selectedTimespan={selectedTimespan} setSelectedTimespan={setSelectedTimespan} isMonthly={isMonthly} setIsMonthly={setIsMonthly} />}
       {/* </div> */}

diff --git a/components/layout/Economics/ChainBreakdown.tsx b/components/layout/Economics/ChainBreakdown.tsx
@@ -19,11 +19,7 @@ import { useTransition, animated } from "@react-spring/web";
 import { set, times } from "lodash";
 import { useUIContext } from "@/contexts/UIContext";
 import HorizontalScrollContainer from "@/components/HorizontalScrollContainer";
-import {
-  TopRowContainer,
-  TopRowChild,
-  TopRowParent,
-} from "@/components/layout/TopRow";
+
 import Container from "../Container";
 import {
   Tooltip,
@@ -537,74 +533,7 @@ export default function ChainBreakdown({
                 </Heading>
               </div>
             </div>
-            <TopRowContainer className="-py-[3px]">
-              <TopRowParent className="-py-[10px]">
-                <TopRowChild
-                  isSelected={!isMonthly}
-                  onClick={() => {
-                    const isTransferrableTimespan =
-                      selectedTimespan === "max" || selectedTimespan === "365d";
-                    if (!isTransferrableTimespan) {
-                      setSelectedTimespan("max");
-                    }
-                    setIsMonthly(false);
-                  }}
-                  style={{
-                    paddingTop: "10.5px",
-                    paddingBottom: "10.5px",
-                    paddingLeft: "16px",
-                    paddingRight: "16px",
-                  }}
-                >
-                  {"Daily"}
-                </TopRowChild>
-                <TopRowChild
-                  isSelected={isMonthly}
-                  onClick={() => {
-                    const isTransferrableTimespan =
-                      selectedTimespan === "max" || selectedTimespan === "365d";
-                    if (!isTransferrableTimespan) {
-                      setSelectedTimespan("max");
-                    }
-                    setIsMonthly(true);
-                  }}
-                  style={{
-                    paddingTop: "10.5px",
-                    paddingBottom: "10.5px",
-                    paddingLeft: "16px",
-                    paddingRight: "16px",
-                  }}
-                >
-                  {"Monthly"}
-                </TopRowChild>
-              </TopRowParent>
-              <TopRowParent className="-py-[10px]">
-                {Object.keys(timespans).map((key) => {
-                  {
-                    return (
-                      <TopRowChild
-                        className={`px-[10px]`}
-                        onClick={() => {
-                          setSelectedTimespan(key);
-                        }}
-                        key={key}
-                        style={{
-                          paddingTop: "10.5px",
-                          paddingBottom: "10.5px",
-                          paddingLeft: "16px",
-                          paddingRight: "16px",
-                        }}
-                        isSelected={selectedTimespan === key}
-                      >
-                        {selectedTimespan === key
-                          ? timespans[key].label
-                          : timespans[key].shortLabel}
-                      </TopRowChild>
-                    );
-                  }
-                })}
-              </TopRowParent>
-            </TopRowContainer>
+
           </Container>
           <HorizontalScrollContainer
             includeMargin={true}

diff --git a/components/layout/Economics/HeadCharts.tsx b/components/layout/Economics/HeadCharts.tsx
@@ -29,6 +29,12 @@ import { useMaster } from "@/contexts/MasterContext";
 import ChartWatermark from "@/components/layout/ChartWatermark";
 import { unix } from "moment";
 import "@/app/highcharts.axis.css";
+import {
+  TopRowContainer,
+  TopRowChild,
+  TopRowParent,
+} from "@/components/layout/TopRow";
+
 
 const COLORS = {
   GRID: "rgb(215, 223, 222)",
@@ -56,11 +62,15 @@ const urls = {
 export default function EconHeadCharts({
   chart_data,
   selectedTimespan,
+  setSelectedTimespan,
   isMonthly,
+  setIsMonthly,
 }: {
   chart_data: l2_data;
   selectedTimespan: string;
+  setSelectedTimespan: (selectedTimespan: string) => void;
   isMonthly: boolean;
+  setIsMonthly: (isMonthly: boolean) => void;
 }) {
   const { AllChains, AllChainsByKeys } = useMaster();
   const [showUsd, setShowUsd] = useLocalStorage("showUsd", true);
@@ -468,7 +478,78 @@ export default function EconHeadCharts({
   }, [dataTimestampExtremes.xMax, dataTimestampExtremes.xMin, isMonthly]);
 
   return (
-    <div className="wrapper h-[197px] w-full">
+    <div>
+      <TopRowContainer className="-py-[3px]">
+        <TopRowParent className="-py-[10px]">
+          <TopRowChild
+            isSelected={!isMonthly}
+            onClick={() => {
+              const isTransferrableTimespan =
+                selectedTimespan === "max" || selectedTimespan === "365d";
+              if (!isTransferrableTimespan) {
+                setSelectedTimespan("max");
+              }
+              setIsMonthly(false);
+            }}
+            style={{
+              paddingTop: "10.5px",
+              paddingBottom: "10.5px",
+              paddingLeft: "16px",
+              paddingRight: "16px",
+            }}
+          >
+            {"Daily"}
+          </TopRowChild>
+          <TopRowChild
+            isSelected={isMonthly}
+            onClick={() => {
+              const isTransferrableTimespan =
+                selectedTimespan === "max" || selectedTimespan === "365d";
+              if (!isTransferrableTimespan) {
+                setSelectedTimespan("max");
+              }
+              setIsMonthly(true);
+            }}
+            style={{
+              paddingTop: "10.5px",
+              paddingBottom: "10.5px",
+              paddingLeft: "16px",
+              paddingRight: "16px",
+            }}
+          >
+            {"Monthly"}
+          </TopRowChild>
+        </TopRowParent>
+        <TopRowParent className="-py-[10px]">
+          {Object.keys(timespans).map((key) => {
+            {
+              return (
+                <TopRowChild
+                  className={`px-[10px]`}
+                  onClick={() => {
+                    setSelectedTimespan(key);
+                  }}
+                  key={key}
+                  style={{
+                    paddingTop: "10.5px",
+                    paddingBottom: "10.5px",
+                    paddingLeft: "16px",
+                    paddingRight: "16px",
+                  }}
+                  isSelected={selectedTimespan === key}
+                >
+                  {selectedTimespan === key
+                    ? timespans[key].label
+                    : timespans[key].shortLabel}
+                </TopRowChild>
+              );
+            }
+          })}
+        </TopRowParent>
+      </TopRowContainer>
+    <div className={`wrapper  w-full mt-[15px] transition-height overflow-hidden ${
+      selectedTimespan === "1d" ? "h-[0px]" : "h-[197px]"
+    }`}>
       <Splide
         options={{
           gap: "15px",
@@ -1158,5 +1239,6 @@ export default function EconHeadCharts({
         </div>
       </Splide>
     </div>
+    </div>
   );
 }