Skip to content

Commit

Permalink
updated master, fixed errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@mokelgit
mokelgit committed Jan 13, 2025
1 parent 247532d commit acc5c05
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 9 deletions.
16 changes: 11 additions & 5 deletions components/layout/DA-Overview/DATable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
const {data: chart_data, error: chart_error, isLoading: chart_loading, isValidating: chart_validating} = useSWR<DATimeseriesResponse>(DATimeseriesURL);

const { isSidebarOpen } = useUIContext();
const { AllDALayersByKeys, AllChainsByKeys } = useMaster();
const { AllDALayersByKeys, AllChainsByKeys, data: master } = useMaster();

const [selectedCategory, setSelectedCategory] = useState("size");
const [isBouncing, setIsBouncing] = useState(false);
Expand Down Expand Up @@ -247,7 +247,7 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
let typeIndex = breakdown_data[Object.keys(breakdown_data)[0]][selectedTimespan]["fees"].types.indexOf(showUsd ? "usd" : "eth");

Object.keys(breakdown_data).filter((key) => key !== "totals").map((key) => {
console.log(breakdown_data[key][selectedTimespan]["fees"].total[typeIndex])

if(breakdown_data[key][selectedTimespan]["fees"].total[typeIndex] > maxFees){


Expand Down Expand Up @@ -337,15 +337,21 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {


const createDAConsumers = useCallback((da_row) => {
if (!master) return;

const tempBrokeChains = ["orderly", "manta", "derive", "ancient8"]
let more = 0;


const retHTML = da_row.chains.values.map((chain, index) => {
if (chain[1] && chain[1] !== "gitcoin_pgn") {


if (chain[1] && chain[1] !== "gitcoin_pgn" && !tempBrokeChains.includes(chain[1])) {


return (
<Icon
key={index}
icon={`gtp:${AllChainsByKeys[chain[1]].urlKey}-logo-monochrome`}
icon={AllChainsByKeys[chain[1]] ? `gtp:${AllChainsByKeys[chain[1]].urlKey}-logo-monochrome` : master.custom_logos[chain[1]].body }
className="w-[15px] h-[15px]"
/>
);
Expand Down
148 changes: 144 additions & 4 deletions components/layout/DA-Overview/DATableCharts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,15 @@ import {
import Highcharts, { chart } from "highcharts/highstock";
import { useLocalStorage } from "usehooks-ts";
import Image from "next/image";
import { useMemo } from "react";
import { useMemo, useState, useCallback } from "react";
import { useMaster } from "@/contexts/MasterContext";
import "@/app/highcharts.axis.css";
import Icon from "@/components/layout/Icon";
import { DAConsumerChart } from "@/types/api/DAOverviewResponse";
import { stringToDOM } from "million";
import { Any } from "react-spring";
import { format } from "path";
import VerticalScrollContainer from "@/components/VerticalScrollContainer";

const COLORS = {
GRID: "rgb(215, 223, 222)",
Expand All @@ -42,6 +43,7 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam

const [showUsd, setShowUsd] = useLocalStorage("showUsd", true);
const { AllDALayersByKeys, AllChainsByKeys } = useMaster();
const [selectedChain, setSelectedChain] = useState<string>("all");



Expand All @@ -59,8 +61,6 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
}
})

console.log(new Date(xMax))


if (!isMonthly) {
return {
Expand Down Expand Up @@ -176,13 +176,149 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam



const tooltipFormatter = useCallback(
function (this: any) {
const { x, points } = this;
const date = new Date(x);
let dateString = date.toLocaleDateString("en-GB", {
month: "short",
day: "numeric",
year: "numeric",
});
const chartTitle = this.series.chart.title.textStr;

// check if data steps are less than 1 day
// 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("en-GB", {
hour: "numeric",
minute: "2-digit",
});
}

// Create a scrollable container using CSS
const tooltip = `<div class="mt-3 mr-3 mb-3 w-52 md:w-52 text-xs font-raleway">
<div class="w-full font-bold text-[13px] md:text-[1rem] ml-6 mb-2">${dateString}</div>
<div class="max-height: 50px; overflow-y: auto; -webkit-overflow-scrolling: touch; hover:!pointer-events: auto; tooltip-scrollbar"
onwheel="(function(e) {
const scroller = e.currentTarget;
const isAtTop = scroller.scrollTop === 0;
const isAtBottom = scroller.scrollHeight - scroller.clientHeight === scroller.scrollTop;
if (e.deltaY < 0 && isAtTop) {
// Scrolling up at the top
return;
}
if (e.deltaY > 0 && isAtBottom) {
// Scrolling down at the bottom
return;
}
e.stopPropagation();
e.preventDefault();
scroller.scrollTop += e.deltaY;
})(event)"
>`;
const tooltipEnd = `</div></div>`;

// Updated scrollbar styles with thicker width and new color
const scrollbarStyles = `
<style>
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(31, 39, 38, 0.1);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #1F2726;
border-radius: 4px;
}
/* Firefox */
.custom-scrollbar {
scrollbar-width: thin;
scrollbar-color: #1F2726 rgba(31, 39, 38, 0.1);
}
/* Prevent text selection during scrolling */
#tooltipScroller {
user-select: none;
}
</style>
`;

let pointsSum = points.reduce((acc: number, point: any) => {
acc += point.y;
return acc;
}, 0);

let pointSumNonNegative = points.reduce((acc: number, point: any) => {
if (point.y > 0) acc += point.y;
return acc;
}, 0);

const maxPoint = points.reduce((max: number, point: any) => {
if (point.y > max) max = point.y;
return max;
}, 0);

const maxPercentage = points.reduce((max: number, point: any) => {
if (point.percentage > max) max = point.percentage;
return max;
}, 0);

const tooltipPoints = points
.sort((a: any, b: any) => b.y - a.y)
.map((point: any, index: number) => {
const { series, y, percentage } = point;
const { name } = series;
const nameString = name;

let prefix = showUsd ? "$" : "Ξ";
let suffix = "";
let value = y;
let displayValue = y;

return `
<div class="flex w-[190px] space-x-2 items-center font-medium mb-0.5 pr-[5px]">
<div class="w-4 h-1.5 rounded-r-full" style="background-color: ${series.color}"></div>
<div class="tooltip-point-name text-xs">${nameString}</div>
<div class="flex-1 text-right justify-end flex numbers-xs">
<div class="flex justify-end text-right w-full">
<div class="${!prefix && "hidden"}">${prefix}</div>
${Intl.NumberFormat("en-GB", {
notation: "standard",
maximumFractionDigits: 2,
minimumFractionDigits: 2,
}).format(displayValue)}
</div>
<div class="ml-0.5 ${!suffix && "hidden"}">${suffix}</div>
</div>
</div>
`;
})
.join("");

return scrollbarStyles + tooltip + tooltipPoints + tooltipEnd;
},
[showUsd],
);


const filteredList = useMemo(() => {

}, [data, selectedTimespan]);


return(
<div className="flex h-full w-full gap-x-[10px]">
<div className="min-w-[730px] w-full flex flex-1 h-[217px] relative mr-[20px]">
<div className="absolute left-[calc(50%-113px)] top-[calc(50%-29.5px)] z-50">
<Image src="/da_table_watermark.png" alt="chart_watermark" width={226} height={59} className="mix-blend-darken"/>
</div>

<HighchartsProvider Highcharts={Highcharts}>
<HighchartsChart
containerProps={{
Expand Down Expand Up @@ -257,7 +393,7 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
split={false}
followPointer={true}
followTouchMove={true}
backgroundColor={"#2A3433EE"}
backgroundColor={"#1F2726"}
padding={0}
hideDelay={300}
stickOnContact={true}
Expand All @@ -279,6 +415,7 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
//positioner={tooltipPositioner}
valuePrefix={showUsd ? "$" : ""}
valueSuffix={showUsd ? "" : " Gwei"}
formatter={tooltipFormatter}
/>
<XAxis
title={undefined}
Expand Down Expand Up @@ -510,8 +647,11 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam

// ensure tooltip is always above the chart
//positioner={tooltipPositioner}

valuePrefix={showUsd ? "$" : ""}
valueSuffix={showUsd ? "" : " Gwei"}


/>
<XAxis
title={undefined}
Expand Down
7 changes: 7 additions & 0 deletions types/api/MasterResponse.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
export interface MasterResponse {
current_version: string;
chains: Chains;
custom_logos: { [key: string]: CustomLogo };
metrics: Metrics;
da_metrics: Metrics;
fee_metrics: FeeMetrics;
Expand All @@ -13,6 +14,12 @@ export interface Chains {
[key: string]: ChainInfo;
}

export interface CustomLogo {
body: string;
width?: number;
height?: number;
}

export interface ChainInfo {
name: string;
url_key: string;
Expand Down

0 comments on commit acc5c05

Please sign in to comment.