diff --git a/src/app/stats/components/Governance/DelegationHistoryGraph.tsx b/src/app/stats/components/Governance/DelegationHistoryGraph.tsx index 4441f84..dc872f1 100644 --- a/src/app/stats/components/Governance/DelegationHistoryGraph.tsx +++ b/src/app/stats/components/Governance/DelegationHistoryGraph.tsx @@ -22,6 +22,7 @@ import { } from "recharts/types/component/DefaultTooltipContent" const DATE_FORMAT = "M/dd" +const PERCENT_IOT_COLOR = "#AAA" const CustomTooltip = ({ active, @@ -39,21 +40,30 @@ const CustomTooltip = ({ >

Date: {format(label, DATE_FORMAT)}

{payload.map(({ dataKey, name, value }) => { + let dotColor = "" let valueFormatted = "" let labelFormatted = "" if (String(name).includes("Delegated")) { valueFormatted = numberWithCommas(value as number, 0) - labelFormatted = (name as string).includes("iot") - ? "veHNT to IOT" - : "veHNT to MOBILE" + const isIot = (name as string).includes("iot") + labelFormatted = isIot ? "veHNT to IOT" : "veHNT to MOBILE" + dotColor = isIot ? HELIUM_IOT_COLOR : HELIUM_MOBILE_COLOR } else { - valueFormatted = (value as number).toFixed(2) + valueFormatted = (value as number).toFixed(2) + "%" labelFormatted = "veHNT % to IOT" + dotColor = PERCENT_IOT_COLOR } return ( -
-

{labelFormatted}:

+
+

+ {" "} +

{" "} + {labelFormatted} +

{valueFormatted}

) @@ -96,6 +106,7 @@ export const DelegationHistoryGraph = ({ yAxisId="percentIot" unit="%" domain={[0, 100]} + range={[0, 1]} />