Skip to content

Commit

Permalink
Progress on updating styling for for dropdown chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@mokelgit
mokelgit committed Jan 17, 2025
1 parent f930e97 commit 46a89c1
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 20 deletions.
13 changes: 7 additions & 6 deletions components/layout/DA-Overview/DATable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,8 +316,8 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
});
}
return {
y: index * 39 + prevOpenCharts * 248,
height: 39 + (openDA[key] ? 248 : 0),
y: index * 39 + prevOpenCharts * 295,
height: 39 + (openDA[key] ? 295 : 0),
key: key, // Assuming `chain` is used as a key
i: index,
};
Expand All @@ -337,7 +337,7 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
let retHeight: number = 39;
Object.keys(breakdown_data).map((key) => {
retHeight += 39;
retHeight += openDA[key] && selectedTimespan !== "1d" ? 248 : 0;
retHeight += openDA[key] && selectedTimespan !== "1d" ? 295 : 0;
});

return retHeight;
Expand Down Expand Up @@ -371,8 +371,9 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
return(
<div className="flex items-center gap-x-[2px]">
<div className="numbers-xs mr-[3px]">{da_row.count}</div>
<div className="w-[6px] h-[6px] bg-[#344240] rounded-full mr-[5px]"></div>
{retHTML}
<div className="ml-[3px] w-[60px] px-[5px] py-[3px] rounded-full bg-[#344240] text-xxs">
<div className="ml-[3px] w-auto pl-[5px] pr-[6px] py-[1.5px] rounded-full bg-[#344240] text-xxs">
{`+ ${more} more`}
</div>
</div>
Expand Down Expand Up @@ -566,7 +567,7 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
}
}}
>
<div>DA Consumers(Total | Chains)</div>
<div className="flex gap-x-[3px] items-center">{`DA Consumers(Total`}<div className="w-[6px] h-[6px] bg-[#344240] rounded-full"></div>{`Chains)`}</div>
<Icon
icon={
selectedCategory !== "da_consumers"
Expand Down Expand Up @@ -801,7 +802,7 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
</div>
<div
className={`flex bottom-2 z-0 relative top-[0px] justify-center w-full transition-height duration-300 overflow-hidden ${openDA[item.key] && selectedTimespan !== "1d"
? "h-[248px]"
? "h-[295px]"
: "h-[0px]"
}`}
>
Expand Down
47 changes: 34 additions & 13 deletions components/layout/DA-Overview/DATableCharts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import { MasterResponse } from "@/types/api/MasterResponse";
import DynamicIcon from "../DynamicIcon";
import { match } from "assert";
import useChartSync from "./components/ChartHandler";
import { get } from "lodash";

const COLORS = {
GRID: "rgb(215, 223, 222)",
Expand Down Expand Up @@ -425,16 +426,22 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam

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">
<div className="min-w-[730px] w-full mt-[39px] flex flex-1 h-[217px] relative mr-[20px] px-[5px]">
<div className="absolute left-[calc(50%-113px)] top-[calc(39%-29.5px)] z-50">
<Image src="/da_table_watermark.svg" alt="chart_watermark" width={226} height={59} className="mix-blend-darken"/>
</div>
<div className="heading-large-xs w-[250px] absolute left-[15px] h-[39px] flex items-center -top-[40px]">
Data Posted {selectedChain !== "all" ? `(${getNameFromKey[selectedChain]})` : ""}
</div>
<hr className="absolute w-[91%] border-t-[2px] left-[55px] top-[5px] border-[#5A64624F] border-dotted " />
<hr className="absolute w-[91%] border-t-[2px] left-[55px] top-[97px] border-[#5A64624F] border-dotted " />


<HighchartsProvider Highcharts={Highcharts}>
<HighchartsChart
containerProps={{
style: {
height: "234px",
height: "222px",
width: "100%",


Expand Down Expand Up @@ -474,12 +481,12 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
animation={{ duration: 50 }}
// margin={[0, 15, 0, 0]} // Use the array form for margin
//margin={[15, 21, 15, 0]}
marginLeft={40}
marginLeft={50}


marginBottom={30}

marginTop={2}
marginTop={5}
onRender={function (event) {
const chart = this; // Assign `this` to a variable for clarity
chartComponent.current = chart;
Expand Down Expand Up @@ -581,9 +588,17 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
zoomEnabled={false}

lineWidth={1}


startOnTick={true}
plotLines={
[{
value: timespans[selectedTimespan].xMin,
color: "#5A64624F",
width: 1,
zIndex: 1000,
dashStyle: "Dash",
}]
}
gridLineWidth={0}
startOnTick={false}
endOnTick={false}
tickAmount={0}

Expand Down Expand Up @@ -615,25 +630,29 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
type="linear"
gridLineWidth={0}
gridLineColor={"#5A64624F"}
showFirstLabel={false}
showLastLabel={false}
tickAmount={5}
showFirstLabel={true}
showLastLabel={true}
tickAmount={3}
offset={0}

labels={{
align: "right",
y: -2,
y: 2,
x: -2,

style: {
backgroundColor: "#1F2726",
whiteSpace: "nowrap",
color: "rgb(215, 223, 222)",
fontSize: "9px",
fontWeight: "600",
fontFamily: "var(--font-raleway), sans-serif",

},
formatter: function (
t: Highcharts.AxisLabelsFormatterContextObject,
) {
return formatBytes(t.value as number);
return formatBytes(t.value as number, 1);
},
}}
min={0}
Expand Down Expand Up @@ -918,6 +937,8 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
align: "right",
y: -2,
x: -2,


style: {
backgroundColor: "#1F2726",
whiteSpace: "nowrap",
Expand Down
1 change: 0 additions & 1 deletion components/layout/DA-Overview/components/ChartHandler.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ const updateAreaChart = (chart, matchedName) => {
if (!series?.length) return;

series.forEach(s => {
console.log(s.name, matchedName);
const opacity = !matchedName || s.name === matchedName ? 1.0 : 0.5;
s.update({ type: s.type, opacity }, false); // Batch updates

Expand Down

0 comments on commit 46a89c1

Please sign in to comment.