Skip to content

Commit

Permalink
added headhchart links, fixed font sizes in rows, changed blob sizes …
Browse files Browse the repository at this point in the history 
…to blob data, removed gap from $, fixed arrow on 1d selection
  • Loading branch information
@mokelgit
mokelgit committed Sep 16, 2024
1 parent 418edf8 commit eb801c8
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 62 deletions.
123 changes: 72 additions & 51 deletions components/layout/Economics/BreakdownCharts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,7 @@ function BreakdownCharts({
if (profitObj) {
profitY =
profitObj[
dailyData.profit.types.indexOf(showUsd ? "usd" : "eth")
dailyData.profit.types.indexOf(showUsd ? "usd" : "eth")
];
}
}
Expand All @@ -309,9 +309,9 @@ function BreakdownCharts({
<div class="w-4 h-1.5 rounded-r-full" style="background-color: ${"#24E5DF"}"></div>
<div class="tooltip-point-name">${name}</div>
<div class="flex-1 text-right font-inter">${Highcharts.numberFormat(
percentage,
2,
)}%</div>
percentage,
2,
)}%</div>
</div>
<div class="flex ml-6 w-[calc(100% - 1rem)] relative mb-0.5">
Expand All @@ -320,8 +320,9 @@ function BreakdownCharts({
<div class="h-[2px] rounded-none absolute right-0 -top-[2px] bg-forest-900 dark:bg-forest-50"
style="
width: ${(percentage / maxPercentage) * 100}%;
background-color: ${AllChainsByKeys["all_l2s"].colors["dark"][0]
};
background-color: ${
AllChainsByKeys["all_l2s"].colors["dark"][0]
};
"></div>
</div>`;

Expand All @@ -334,59 +335,69 @@ function BreakdownCharts({
return `
<div class="flex w-full justify-between space-x-2 items-center font-medium mb-0.5">
<div class="flex gap-x-1 items-center">
<div class="w-4 h-1.5 rounded-r-full" style="background-color: ${series.color
}"></div>
<div class="w-4 h-1.5 rounded-r-full" style="background-color: ${
series.color
}"></div>
<div class="tooltip-point-name text-md">${name}</div>
</div>
<div class="flex-1 justify-end text-right font-inter flex">
<div class="opacity-70 mr-0.5 ${!prefix && "hidden"
}">${prefix}</div>
<div class="opacity-70 mr-0.5 ${
!prefix && "hidden"
}">${prefix}</div>
${parseFloat(displayValue).toLocaleString("en-GB", {
minimumFractionDigits: valuePrefix ? 2 : 0,
maximumFractionDigits: valuePrefix ? 2 : 0,
})}
<div class="opacity-70 ml-0.5 ${!suffix && "hidden"
}">${suffix}</div>
minimumFractionDigits: valuePrefix ? 2 : 0,
maximumFractionDigits: valuePrefix ? 2 : 0,
})}
<div class="opacity-70 ml-0.5 ${
!suffix && "hidden"
}">${suffix}</div>
</div>
</div>
${lastIndex
? `<div class="flex w-full justify-between space-x-2 items-center font-medium mb-0.5">
${
lastIndex
? `<div class="flex w-full justify-between space-x-2 items-center font-medium mb-0.5">
<div class="flex gap-x-1 items-center">
<div class="w-4 h-1.5 rounded-r-full" style="background-color: ${profitY >= 0 ? "#EEFF97" : "#FFDF27"
}"></div>
<div class="w-4 h-1.5 rounded-r-full" style="background-color: ${
profitY >= 0 ? "#EEFF97" : "#FFDF27"
}"></div>
<div class="tooltip-point-name text-md">${"Profit"}</div>
</div>
<div class="flex-1 justify-end text-right font-inter flex">
<div class="opacity-70 mr-0.5 ${!prefix && "hidden"
}">${prefix}</div>
<div class="opacity-70 mr-0.5 ${
!prefix && "hidden"
}">${prefix}</div>
${parseFloat(String(profitY)).toLocaleString("en-GB", {
minimumFractionDigits: valuePrefix ? 2 : 0,
maximumFractionDigits: valuePrefix ? 2 : 0,
})}
<div class="opacity-70 ml-0.5 ${!suffix && "hidden"
}">${suffix}</div>
minimumFractionDigits: valuePrefix ? 2 : 0,
maximumFractionDigits: valuePrefix ? 2 : 0,
})}
<div class="opacity-70 ml-0.5 ${
!suffix && "hidden"
}">${suffix}</div>
</div>
</div>`
: ""
: ""
}
`;
} else {
return `
<div class="flex w-full justify-between space-x-2 items-center font-medium mb-0.5">
<div class="flex gap-x-1 items-center">
<div class="w-4 h-1.5 rounded-r-full" style="background-color: ${series.color
}"></div>
<div class="w-4 h-1.5 rounded-r-full" style="background-color: ${
series.color
}"></div>
<div class="tooltip-point-name text-md">${name}</div>
</div>
<div class="flex-1 justify-end text-right font-inter flex">
<div class="opacity-70 mr-0.5 ${!prefix && "hidden"
}">${prefix}</div>
<div class="opacity-70 mr-0.5 ${
!prefix && "hidden"
}">${prefix}</div>
${parseFloat(displayValue).toLocaleString("en-GB", {
minimumFractionDigits: valuePrefix ? 2 : 0,
maximumFractionDigits: valuePrefix ? 2 : 0,
})}
<div class="opacity-70 ml-0.5 ${!suffix && "hidden"
}">${suffix}</div>
minimumFractionDigits: valuePrefix ? 2 : 0,
maximumFractionDigits: valuePrefix ? 2 : 0,
})}
<div class="opacity-70 ml-0.5 ${
!suffix && "hidden"
}">${suffix}</div>
</div>
</div>
Expand All @@ -407,14 +418,16 @@ function BreakdownCharts({
<div class="tooltip-point-name text-md">Total</div>
<div class="flex-1 text-right justify-end font-inter flex">
<div class="opacity-70 mr-0.5 ${!prefix && "hidden"
}">${prefix}</div>
<div class="opacity-70 mr-0.5 ${
!prefix && "hidden"
}">${prefix}</div>
${parseFloat(value).toLocaleString("en-GB", {
minimumFractionDigits: valuePrefix ? 2 : 0,
maximumFractionDigits: valuePrefix ? 2 : 0,
})}
<div class="opacity-70 ml-0.5 ${!suffix && "hidden"
}">${suffix}</div>
minimumFractionDigits: valuePrefix ? 2 : 0,
maximumFractionDigits: valuePrefix ? 2 : 0,
})}
<div class="opacity-70 ml-0.5 ${
!suffix && "hidden"
}">${suffix}</div>
</div>
</div>
<div class="flex ml-6 w-[calc(100% - 1rem)] relative mb-0.5">
Expand Down Expand Up @@ -510,7 +523,7 @@ function BreakdownCharts({
const minTimestamp =
selectedTimespan !== "max"
? newestUnixTimestamp -
1000 * 60 * 60 * 24 * timespans[selectedTimespan].value
1000 * 60 * 60 * 24 * timespans[selectedTimespan].value
: 0;

// Filter and extract the data points for either "usd" or "eth" based on dailyData.profit and selected timespan
Expand Down Expand Up @@ -614,7 +627,6 @@ function BreakdownCharts({
type: "x",
}}
panKey="shift"

// zooming={{
// type: "x",
// mouseWheel: {
Expand Down Expand Up @@ -642,6 +654,8 @@ function BreakdownCharts({
return;

setMainChart(chart);

console.log(chart);
}}
/>
<Tooltip
Expand Down Expand Up @@ -704,13 +718,15 @@ function BreakdownCharts({
min={
timespans[selectedTimespan].xMin
? newestUnixTimestamp -
1000 * 60 * 60 * 24 * timespans[selectedTimespan].value
1000 *
60 *
60 *
24 *
(timespans[selectedTimespan].value - 1)
: undefined
}
panningEnabled={true}
>
<XAxis.Title>X Axis</XAxis.Title>
</XAxis>
></XAxis>
<YAxis
opposite={false}
// showFirstLabel={true}
Expand Down Expand Up @@ -916,6 +932,7 @@ function BreakdownCharts({
return;

setProfitChart(chart);
console.log(chart);
}}
/>
<Tooltip
Expand Down Expand Up @@ -976,7 +993,7 @@ function BreakdownCharts({
month: "short",
year:
timespans[selectedTimespan].value >= 90 ||
selectedTimespan === "max"
selectedTimespan === "max"
? "numeric"
: undefined,
})
Expand All @@ -1003,7 +1020,11 @@ function BreakdownCharts({
min={
timespans[selectedTimespan].xMin
? newestUnixTimestamp -
1000 * 60 * 60 * 24 * timespans[selectedTimespan].value
1000 *
60 *
60 *
24 *
(timespans[selectedTimespan].value - 1)
: undefined
}
panningEnabled={true}
Expand Down
15 changes: 8 additions & 7 deletions components/layout/Economics/ChainBreakdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,7 @@ export default function ChainBreakdown({

function formatNumber(x: number) {
return (
<div className="flex gap-x-0.5 ">
<div className="flex ">
<span>{showUsd ? "$" : "Ξ"}</span>
<span>
{Intl.NumberFormat("en-GB", {
Expand All @@ -299,7 +299,6 @@ export default function ChainBreakdown({
</div>
);
}
console.log(data ? data : "");

const sortedChainData = useMemo(() => {
let retData: string[];
Expand Down Expand Up @@ -898,7 +897,7 @@ export default function ChainBreakdown({
}}
>
<div className="text-[12px] group-hover:text-forest-50/80 font-bold">
{"Blob Sizes"}
{"Blob Data"}
</div>
<div>
<Icon
Expand Down Expand Up @@ -1005,7 +1004,9 @@ export default function ChainBreakdown({
className={`w-[4px] h-[9px] absolute top-[9px] right-0 `}
style={{
transform: `rotate(${
openChain[item.key] ? "90deg" : "0deg"
openChain[item.key] && selectedTimespan !== "1d"
? "90deg"
: "0deg"
})`,
transformOrigin: "-9px 4px",
transition: "transform 0.5s",
Expand Down Expand Up @@ -1040,7 +1041,7 @@ export default function ChainBreakdown({
>
<div className="w-[65px] flex justify-end">
<div
className="text-[14px] font-semibold "
className="text-[12px] font-semibold "
style={{
fontFeatureSettings: "'pnum' on, 'lnum' on",
}}
Expand Down Expand Up @@ -1097,7 +1098,7 @@ export default function ChainBreakdown({
)}`}
>
<div
className="w-[65px] flex justify-end items-end h-full font-semibold text-[14px]"
className="w-[65px] flex justify-end items-end h-full font-semibold text-[12px]"
style={{
fontFeatureSettings: "'pnum' on, 'lnum' on",
}}
Expand Down Expand Up @@ -1525,7 +1526,7 @@ export default function ChainBreakdown({
}`}
/>
<div
className="text-[14px] font-semibold"
className="text-[12px] font-semibold"
style={{
fontFeatureSettings: "'pnum' on, 'lnum' on",
}}
Expand Down
35 changes: 31 additions & 4 deletions components/layout/Economics/HeadCharts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,11 @@ const METRIC_COLORS = {
},
};

const urls = {
profit: "/fundamentals/profit",
fees: "/fundamentals/fees-paid-by-users",
};

export default function EconHeadCharts({
chart_data,
}: {
Expand Down Expand Up @@ -399,6 +404,8 @@ export default function EconHeadCharts({
})
.map((key, i) => {
const isMultipleSeries = key === "costs";
const link = key !== "costs" ? urls[key] : undefined;

const lastIndex = !isMultipleSeries
? chart_data.metrics[key].daily.data.length - 1
: 0;
Expand Down Expand Up @@ -426,10 +433,30 @@ export default function EconHeadCharts({
return (
<SplideSlide key={"Splide" + key}>
<div className="relative flex flex-col w-full overflow-hidden h-[197px] bg-[#1F2726] rounded-2xl ">
<div className="absolute text-[16px] font-bold top-[15px] left-[15px]">
{isMultipleSeries
? "Costs"
: chart_data.metrics[key].metric_name}
<div
className={`absolute items-center text-[16px] font-bold top-[15px] left-[15px] flex gap-x-[10px] z-10 ${
link ? "cursor-pointer" : ""
}`}
onClick={() => {
if (link) window.location.href = link;
}}
>
<div className="z-10">
{isMultipleSeries
? "Costs"
: chart_data.metrics[key].metric_name}
</div>

<div
className={`rounded-full w-[15px] h-[15px] bg-[#344240] flex items-center justify-center text-[10px] z-10 ${
!link ? "hidden" : "block"
}`}
>
<Icon
icon="feather:arrow-right"
className="w-[11px] h-[11px]"
/>
</div>
</div>
<div className="absolute text-[18px] top-[14px] right-[30px]">
{!isMultipleSeries
Expand Down

0 comments on commit eb801c8

Please sign in to comment.