Skip to content

Commit

Permalink
more progress on da-overview page
Browse files Browse the repository at this point in the history
  • Loading branch information
@mokelgit
mokelgit committed Jan 16, 2025
1 parent c118ee1 commit 92e96f8
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 26 deletions.
14 changes: 3 additions & 11 deletions components/layout/DA-Overview/DAHeadCharts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,7 +317,8 @@ export default function DAHeadCharts({selectedTimespan, isMonthly, data}: {selec

let url = metricKey.includes("fees_paid") ? "/data-availability/fees-paid" : "/data-availability/data-posted";
return (
<div className="relative flex flex-col w-full overflow-hidden h-[232px] bg-[#1F2726] rounded-2xl group " key={metricKey}>
<div className={`relative flex flex-col w-full overflow-hidden h-[232px] bg-[#1F2726] rounded-2xl group
${selectedTimespan === "1d" ? "hidden" : "flex flex-col"}`} key={metricKey}>
<Link
className={`absolute hover:underline items-center text-[16px] font-bold top-[15px] left-[15px] flex gap-x-[10px] z-10 ${/*link ? "cursor-pointer" : ""*/ ""}`}
href={url}
Expand Down Expand Up @@ -671,18 +672,9 @@ export default function DAHeadCharts({selectedTimespan, isMonthly, data}: {selec
</div>
</div>
)})}
<div className="flex flex-col gap-y-[5px] w-full h-full py-[15px]">
<div className="flex flex-col gap-y-[5px] w-full py-[15px] relative overflow-hidden h-[232px]">
<div className="flex items-center heading-large-sm gap-x-[10px] ">
<div>Top 5 DA Consumers (by Data Posted)</div>
<div
className={`rounded-full w-[15px] h-[15px] bg-[#344240] flex items-center justify-center text-[10px] z-10 `}
>
<Icon
icon="feather:arrow-right"
className="w-[11px] h-[11px]"
/>
</div>

</div>
<TopDAConsumers consumer_data={data.top_da_consumers} selectedTimespan={selectedTimespan} />
</div>
Expand Down
36 changes: 29 additions & 7 deletions components/layout/DA-Overview/DATable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,15 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {



const totalDAConsumers = useMemo(() => {
let total = 0;
Object.keys(breakdown_data).forEach((key) => {
if (key === "totals") return;
total += breakdown_data[key][selectedTimespan].da_consumers.count;
});

return total;
}, [])

const maxFeesPaid = useMemo(() => {
let maxFees = 0;
Expand Down Expand Up @@ -659,13 +667,25 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
item.key,
)} `}
>
<div className="w-[26px] h-[26px] rounded-full bg-[#151A19] flex items-center justify-center">
<div className="w-[26px] h-[26px] relative rounded-full bg-[#151A19] flex items-center justify-center">
<Icon icon={`gtp:${item.key.replaceAll("_", "-")}-logo-monochrome`} className="w-[15px] h-[15px]"
style={{
color:
AllDALayersByKeys[item.key].colors["dark"][0],
}}
/>
<Icon
icon={"gtp:circle-arrow"}
className={`w-[4px] h-[9px] absolute top-[9px] right-0 ${selectedTimespan !== "1d" ? "visible" : "hidden"}`}
style={{
transform: `rotate(${openDA[item.key] && selectedTimespan !== "1d"
? "90deg"
: "0deg"
})`,
transformOrigin: "-8px 4px",
transition: "transform 0.5s",
}}
/>
</div>
<div className="text-xs">{AllDALayersByKeys[item.key].name}</div>
</div>
Expand Down Expand Up @@ -752,12 +772,15 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
}).format(breakdown_data[item.key][selectedTimespan].fees_per_mb.total[typeIndex])}
</div>
<div
className={`flex items-center gap-x-[10px] justify-end w-full px-[5px] h-full bg-[#34424090] ${columnBorder(
className={`flex items-center gap-x-[10px] justify-end relative overflow-visible w-full px-[5px] group h-full bg-[#34424090] ${columnBorder(
"da_consumers",
item.key,
)} `}
>
{createDAConsumers(breakdown_data[item.key][selectedTimespan].da_consumers)}
<div className="absolute z-20 w-[245px] p-[15px] h-[140px] top-[30px] group hidden group-hover:block bg-[#1F2726] rounded-[10px]">
<div className="heading-small-xs z-40 ">DA Consumers (Chains) </div>
</div>
</div>

<div
Expand All @@ -769,10 +792,9 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
<Icon icon="gtp:gtp-more" className="w-[24px] h-[24px]" />
<div className="absolute right-[20px] -top-[25px] w-[238px] h-[133px] bg-[#1F2726] rounded-2xl hidden group-hover/more:flex-col group-hover/more:flex z-20 px-[15px] py-[15px] gap-y-[2.5px]">
<div className=" heading-small-xs">Parameters</div>
<div className="flex items-center gap-x-[1px]"><div className="text-xs">Blob Size:</div><div className="number-xs font-bold"> {"some value"}</div></div>
<div className="flex items-center gap-x-[1px]"><div className="text-xs">Bandwidth:</div><div className="number-xs"> {"some value"}</div></div>
<div className="flex items-center gap-x-[1px]"><div className="text-xs">Blocktime:</div><div className="number-xs"> {"some value"}</div></div>
<div className="flex items-center gap-x-[1px]"><div className="text-xs">Risk Analysis:</div><div className="number-xs"> {"some value"}</div></div>
<div className="flex items-center gap-x-[2px]"><div className="text-xs">Blob Size:</div><div className="number-xs font-bold"> {breakdown_data[item.key][selectedTimespan].fixed_params.blob_size}</div></div>
<div className="flex items-center gap-x-[2px]"><div className="text-xs">Blocktime:</div><div className="number-xs font-bold"> {breakdown_data[item.key][selectedTimespan].fixed_params.block_time}</div></div>
<div className="flex items-center gap-x-[2px]"><div className="text-xs">Risk Analysis:</div><a href={breakdown_data[item.key][selectedTimespan].fixed_params.l2beat_risk} target="_blank" className="numbers-xs underline">L2BEAT DA Risk</a></div>
</div>
</div>

Expand Down Expand Up @@ -831,7 +853,7 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
</div>
<div className="w-full h-[34px] px-[2px]">
<div className="flex rounded-full w-full h-[34px] border-[#5A6462] border-[1px] items-center justify-center numbers-xs bg-[#34424044]">
{35}
{totalDAConsumers}
</div>
</div>

Expand Down
7 changes: 6 additions & 1 deletion components/layout/DA-Overview/DATableCharts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -649,7 +649,12 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
{/* Chains */}


{Object.keys(data.da_consumers).map((key, index) => {
{Object.keys(data.da_consumers) .sort((a, b) => {

if (a === "others") return 1;
if (b === "others") return -1;
return 0;
}).map((key, index) => {
const custom_logo_keys = Object.keys(master.custom_logos);

return(
Expand Down
44 changes: 37 additions & 7 deletions components/layout/DA-Overview/TopDAConsumers.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
"use client"
import { useEffect, useState, useMemo } from "react";
import { useEffect, useState, useMemo, useRef } from "react";
import { animated, useSpring, useTransition } from "@react-spring/web";
import { TopConsumerColumns } from "@/types/api/DAOverviewResponse";
import { useMaster } from "@/contexts/MasterContext";
import Icon from "@/components/layout/Icon";
import DynamicIcon from "../DynamicIcon";

import Link from "next/link";
type DARowData = {
item: string;
value: any;
Expand All @@ -19,6 +19,9 @@ const unlabelledDAHex = ["#7D8887", "#697474", "#556060", "#404C4B", "#2C3938"]

export default function TopDAConsumers({consumer_data, selectedTimespan}: {consumer_data: TopConsumerColumns, selectedTimespan: string}) {
const { AllChainsByKeys, da_metrics, data: master } = useMaster();
const parentRef = useRef(null);
const [parentWidth, setParentWidth] = useState(0);


const sortedDAConsumers = useMemo(() => {
let types = consumer_data[selectedTimespan].types;
Expand Down Expand Up @@ -73,14 +76,34 @@ export default function TopDAConsumers({consumer_data, selectedTimespan}: {consu
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))}${sizes[i]}`;
}

useEffect(() => {
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
setParentWidth(entry.contentRect.width);
}
});

if (parentRef.current) {
observer.observe(parentRef.current);
}

return () => observer.disconnect();
}, []);





return (

<div className="w-full h-full relative">
<div className="w-full h-full relative" ref={parentRef}>
{master && (
<>
{transitions((style, item) => {
const custom_logo_keys = Object.keys(master.custom_logos);

const croppedWidth = parentWidth - 122;
const relativeWidth = (croppedWidth * (sortedDAConsumers[item.index][4] / sortedDAConsumers[0][4])); // Avoid division by zero

return(
<animated.div
className="absolute w-full "
Expand All @@ -90,8 +113,9 @@ export default function TopDAConsumers({consumer_data, selectedTimespan}: {consu
<div className={`h-full rounded-full flex items-center px-[2px]`}
style={{
backgroundColor: AllChainsByKeys[sortedDAConsumers[item.index][3]] ? AllChainsByKeys[sortedDAConsumers[item.index][3]].colors["dark"][0] : unlabelledDAHex[item.index],
width: `${(sortedDAConsumers[item.index][4] / sortedDAConsumers[0][4]) * 100}%`,
minWidth: "122px"
width: `${relativeWidth + 122}px`,
minWidth: "122px",
maxWidth: "100%",
}}
>
<div className="bg-[#1F2726] w-[122px] h-[30px] rounded-full flex items-center px-[5px] gap-x-[10px]">
Expand Down Expand Up @@ -126,7 +150,13 @@ export default function TopDAConsumers({consumer_data, selectedTimespan}: {consu
}
<div className="flex flex-col ">
<div className="numbers-sm -mb-[1px]">{formatBytes(sortedDAConsumers[item.index][4])}</div>
<div className="text-xxs -mt-[1px]">{sortedDAConsumers[item.index][1] ? sortedDAConsumers[item.index][1] : "Not listed chains"}</div>
{AllChainsByKeys[sortedDAConsumers[item.index][3]] ?
(
<Link className="text-xxs -mt-[1px] hover:underline" href={`chains/${AllChainsByKeys[sortedDAConsumers[item.index][3]].urlKey}`}>{sortedDAConsumers[item.index][1] ? sortedDAConsumers[item.index][1] : "Not listed chains"}</Link>
) : (
<div className="text-xxs -mt-[1px]">{sortedDAConsumers[item.index][1] ? sortedDAConsumers[item.index][1] : "Not listed chains"}</div>
)
}
</div>
</div>
<div></div>
Expand Down

0 comments on commit 92e96f8

Please sign in to comment.