Skip to content

Commit

Permalink
fixed various re-render issues, added new gradients to charts
Browse files Browse the repository at this point in the history
  • Loading branch information
@mokelgit
mokelgit committed Sep 13, 2024
1 parent 0c6ebe1 commit fef4906
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 55 deletions.
84 changes: 63 additions & 21 deletions components/layout/Economics/BreakdownCharts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,14 @@ function BreakdownCharts({
chartContainer.removeEventListener("mouseleave", handleMouseLeave);
}
};
}, [mainChart, profitChart, profitChartRef, chartRef]);
}, [
mainChart,
profitChart,
profitChartRef,
chartRef,
timespans,
selectedTimespan,
]);

const newestUnixTimestamp = useMemo(() => {
return dailyData.revenue.data[dailyData.revenue.data.length - 1][0];
Expand Down Expand Up @@ -430,7 +437,14 @@ function BreakdownCharts({

return tooltip + tooltipPoints + sumRow + tooltipEnd;
},
[valuePrefix, reversePerformer, dailyData, isMonthly],
[
valuePrefix,
reversePerformer,
dailyData,
isMonthly,
selectedTimespan,
timespans,
],
);

const tooltipManager = useMemo(() => {
Expand Down Expand Up @@ -507,7 +521,10 @@ function BreakdownCharts({
const profitMinMaxValues = useMemo(() => {
// Get the minimum timestamp for the selected timespan
const minTimestamp =
selectedTimespan !== "max" ? timespans[selectedTimespan].xMin : 0;
selectedTimespan !== "max"
? newestUnixTimestamp -
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
const values = dailyData.profit.data
Expand All @@ -516,9 +533,8 @@ function BreakdownCharts({
(d: any) => d[dailyData.profit.types.indexOf(showUsd ? "usd" : "eth")],
);

// Calculate the max and min values
const max = Math.max(...values);
const min = Math.min(...values);
// Calculate the absolute max value
const maxAbsValue = Math.max(...values.map(Math.abs));

// Define a function to round values up to a "clean" number for chart presentation
const roundToNiceNumber = (value: number) => {
Expand All @@ -527,18 +543,18 @@ function BreakdownCharts({
return Math.ceil(Math.abs(value) / factor) * factor * Math.sign(value);
};

// Round the max and min values
const roundedMax = roundToNiceNumber(max);
const roundedMin = roundToNiceNumber(min);
// Round the absolute max value
const roundedMaxAbsValue = roundToNiceNumber(maxAbsValue);

// Ensure the rounded values are not less extreme than the actual values
const finalMax = Math.max(roundedMax, max);
// Set the final max as the positive rounded value and the final min as the negative rounded value
const finalMax = roundedMaxAbsValue;
const finalMin = -roundedMaxAbsValue;

return {
min: -finalMax,
min: finalMin,
max: finalMax,
};
}, [dailyData, showUsd, selectedTimespan, timespans]);
}, [data, showUsd, selectedTimespan, timespans]);

return (
<div
Expand Down Expand Up @@ -778,8 +794,9 @@ function BreakdownCharts({
y2: 1,
},
stops: [
[0, "#1DF7EF99"],
[1, "#1DF7EF99"],
[0, "#10808CDD"],
[0.5, "#10808CDD"],
[1, "#1DF7EFDD"],
],
}}
/>
Expand All @@ -805,8 +822,9 @@ function BreakdownCharts({
y2: 1,
},
stops: [
[0, "#FE546899"],
[1, "#FE546899"],
[0, "#98323EDD"],
[0.5, "#98323EDD"],
[1, "#FE5468DD"],
],
}}
/>
Expand Down Expand Up @@ -1049,14 +1067,37 @@ function BreakdownCharts({
{" "}
<ColumnSeries
name="Profit"
color={"#FFDF27"}
zones={[
{
value: 0, // Values up to 0 (exclusive)
color: "#FFDF27", // Color for negative values
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
stops: [
[0, "#FFE761DD"],

[1, "#C7AE24DD"],
],
},
},
{
color: "#EEFF97", // Color for positive values
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
stops: [
[0, "#EEFF97DD"],
[0.5, "#EEFF97DD"],
[1, "#A1B926DD"],
],
},
},
]}
data={dailyData.profit.data.map((d: any) => [
Expand All @@ -1080,6 +1121,7 @@ export default React.memo(BreakdownCharts, (prevProps, nextProps) => {
prevProps.chain === nextProps.chain &&
prevProps.timespans === nextProps.timespans &&
prevProps.selectedTimespan === nextProps.selectedTimespan &&
prevProps.isOpen === nextProps.isOpen
prevProps.isOpen === nextProps.isOpen &&
prevProps.isMonthly === nextProps.isMonthly
);
});
76 changes: 42 additions & 34 deletions components/layout/Economics/HeadCharts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,11 @@ const COLORS = {
};

const METRIC_COLORS = {
profit: "#E3FA6C",
fees: "#1DF7EF",
rent_paid: "#178577",
profit: ["#EEFF97", "#A1B926"],
fees: ["#1DF7EF", "#10808C"],
costs: {
costs_l1: "#98323E",
costs_blobs: "#FE5468",
costs_l1: ["#FE5468", "#98323E"],
costs_blobs: ["#D41027", "#FE5468"],
},
};

Expand Down Expand Up @@ -538,9 +537,9 @@ export default function EconHeadCharts({
y2: 0,
},
stops: [
[0, METRIC_COLORS[key]],
[0, METRIC_COLORS[key][1]],
// [0.33, AllChainsByKeys[series.name].colors[1]],
[1, METRIC_COLORS[key]],
[1, METRIC_COLORS[key][0]],
],
},
},
Expand All @@ -551,7 +550,7 @@ export default function EconHeadCharts({
// radius: 12,
// lineWidth: 4,
// },
fillOpacity: 1,

fillColor: {
linearGradient: {
x1: 0,
Expand All @@ -560,8 +559,9 @@ export default function EconHeadCharts({
y2: 1,
},
stops: [
[0, METRIC_COLORS[key] + "99"],
[1, METRIC_COLORS[key] + "99"],
[0, METRIC_COLORS[key][1] + "DD"],
[0.5, METRIC_COLORS[key][1] + "DD"],
[1, METRIC_COLORS[key][0] + "DD"],
],
},
// shadow: {
Expand All @@ -577,9 +577,9 @@ export default function EconHeadCharts({
y2: 0,
},
stops: [
[0, METRIC_COLORS[key]],
[0, METRIC_COLORS[key][0]],
// [0.33, AllChainsByKeys[series.name].colors[1]],
[1, METRIC_COLORS[key]],
[1, METRIC_COLORS[key][0]],
],
},
// borderColor: AllChainsByKeys[data.chain_id].colors[theme ?? "dark"][0],
Expand Down Expand Up @@ -887,10 +887,10 @@ export default function EconHeadCharts({
enabled: true,
halo: {
size: 5,
opacity: 1,
opacity: 0.5,
attributes: {
fill: METRIC_COLORS[key] + "99",
stroke: METRIC_COLORS[key] + "66",
fill: METRIC_COLORS[key][0],
stroke: undefined,
},
},
brightness: 0.3,
Expand All @@ -903,9 +903,8 @@ export default function EconHeadCharts({
></AreaSeries>
) : (
<>
{Object.keys(chart_data.metrics[key])
.reverse()
.map((costKey, j) => {
{Object.keys(chart_data.metrics[key]).map(
(costKey, j) => {
console.log(costKey);
return (
<AreaSeries
Expand Down Expand Up @@ -937,8 +936,8 @@ export default function EconHeadCharts({
y2: 0,
},
stops: [
[0, METRIC_COLORS[key][costKey]], // Use the unique color for each series
[1, METRIC_COLORS[key][costKey]],
[0, METRIC_COLORS[key][costKey][0]], // Use the unique color for each series
[1, METRIC_COLORS[key][costKey][0]],
],
}}
fillColor={{
Expand All @@ -951,13 +950,18 @@ export default function EconHeadCharts({
stops: [
[
0,
METRIC_COLORS[key][costKey] +
"66",
METRIC_COLORS[key][costKey][1] +
"DD",
],
[
0.6,
METRIC_COLORS[key][costKey][1] +
"DD",
],
[
1,
METRIC_COLORS[key][costKey] +
"99",
METRIC_COLORS[key][costKey][0] +
"DD",
],
],
}}
Expand All @@ -969,23 +973,26 @@ export default function EconHeadCharts({
y2: 0,
},
stops: [
[0, METRIC_COLORS[key][costKey]], // Use the unique color for each series
[1, METRIC_COLORS[key][costKey]],
[
0,
METRIC_COLORS[key][costKey][
costKey === "costs_l1" ? 0 : 1
],
], // Use the unique color for each series
[1, METRIC_COLORS[key][costKey][1]],
],
}}
states={{
hover: {
enabled: true,
halo: {
size: 5,
opacity: 1,
opacity: 0.5,
attributes: {
fill:
METRIC_COLORS[key][costKey] +
"99",
stroke:
METRIC_COLORS[key][costKey] +
"66",
fill: METRIC_COLORS[key][
costKey
][0],
stroke: undefined,
},
},
brightness: 0.3,
Expand All @@ -997,7 +1004,8 @@ export default function EconHeadCharts({
}}
></AreaSeries>
);
})}
},
)}
</>
)}
</YAxis>
Expand Down

0 comments on commit fef4906

Please sign in to comment.