diff --git a/app/(embeds)/embed/EmbedContainer.tsx b/app/(embeds)/embed/EmbedContainer.tsx index 1045ab18..caf05441 100644 --- a/app/(embeds)/embed/EmbedContainer.tsx +++ b/app/(embeds)/embed/EmbedContainer.tsx @@ -40,9 +40,9 @@ const EmbedContainer = ({ if (queryZoomed && queryStartTimestamp && queryEndTimestamp) tf = `${new Date( Math.round(parseInt(queryStartTimestamp)), - ).toLocaleDateString()} - ${new Date( + ).toLocaleDateString("en-GB")} - ${new Date( Math.round(parseInt(queryEndTimestamp)), - ).toLocaleDateString()}`; + ).toLocaleDateString("en-GB")}`; return tf; }, [time_frame, queryZoomed, queryStartTimestamp, queryEndTimestamp]); diff --git a/app/(fees)/fees/ChartContainer.tsx b/app/(fees)/fees/ChartContainer.tsx index 9e80f938..47238b87 100644 --- a/app/(fees)/fees/ChartContainer.tsx +++ b/app/(fees)/fees/ChartContainer.tsx @@ -112,12 +112,12 @@ export default function ChartContainer({ } const chartMinMaxXAxisLabels = useMemo(() => { - if(!data || !metrics.length || !timeFrames.length || !selectedChains.length) { + if (!data || !metrics.length || !timeFrames.length || !selectedChains.length) { return ["", ""]; } const chains = Object.keys(data.chain_data).filter(chain => selectedChains.includes(chain)); - + // check the current metric and timeframe for all selected chains const selectedMetricData = chains.map(chain => { return data.chain_data[chain][metrics[metricIndex]][timeFrames[timeFrameIndex]]; @@ -131,18 +131,16 @@ export default function ChartContainer({ // get the middle value // const middle = min + (max - min) / 2; - if(timeFrames[timeFrameIndex] === "24hrs") { + if (timeFrames[timeFrameIndex] === "24hrs") { return [ - new Date(min).toLocaleTimeString(undefined, {hour: '2-digit', minute: '2-digit'}), - // new Date(middle).toLocaleTimeString(undefined, {hour: '2-digit'}), - new Date(max).toLocaleTimeString(undefined, {hour: '2-digit', minute: '2-digit'}), + new Date(min).toLocaleTimeString("en-GB", { hour: '2-digit', minute: '2-digit' }), + new Date(max).toLocaleTimeString("en-GB", { hour: '2-digit', minute: '2-digit' }), ]; } - + return [ - new Date(min).toLocaleDateString(undefined, {month: 'short', day: 'numeric', year: 'numeric'}), - // new Date(middle).toLocaleDateString(undefined, {month: 'short', day: 'numeric', year: 'numeric'}), - new Date(max).toLocaleDateString(undefined, {month: 'short', day: 'numeric', year: 'numeric'}) + new Date(min).toLocaleDateString("en-GB", { month: 'short', day: 'numeric', year: 'numeric' }), + new Date(max).toLocaleDateString("en-GB", { month: 'short', day: 'numeric', year: 'numeric' }) ]; }, [data, metricIndex, metrics, selectedChains, timeFrameIndex, timeFrames]); @@ -255,9 +253,9 @@ export default function ChartContainer({ {/* xMin and xMax chart labels */}
- {chartMinMaxXAxisLabels.map((label, index) => ( -
- ))} + {chartMinMaxXAxisLabels.map((label, index) => ( +
+ ))}
{chartMinMaxXAxisLabels.map((label, index) => ( diff --git a/app/(fees)/fees/FeesChart.tsx b/app/(fees)/fees/FeesChart.tsx index 4f7bd714..5cc7bb2b 100644 --- a/app/(fees)/fees/FeesChart.tsx +++ b/app/(fees)/fees/FeesChart.tsx @@ -115,7 +115,7 @@ export default function FeesChart({ selectedMetric, selectedTimeframe, selectedC let prefix = valuePrefix; let suffix = ""; let multiplier = 1 - + @@ -125,8 +125,8 @@ export default function FeesChart({ selectedMetric, selectedTimeframe, selectedC suffix = " gwei"; multiplier = 1e9; } - }else{ - if(showCents){ + } else { + if (showCents) { prefix = ""; suffix = " cents" multiplier = 100; @@ -168,7 +168,7 @@ export default function FeesChart({ selectedMetric, selectedTimeframe, selectedC function (this: any) { const { x, points } = this; const date = new Date(x); - let dateString = date.toLocaleDateString(undefined, { + let dateString = date.toLocaleDateString("en-GB", { month: "short", day: "numeric", year: "numeric", @@ -178,8 +178,8 @@ export default function FeesChart({ selectedMetric, selectedTimeframe, selectedC // 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(undefined, { - + dateString += " " + date.toLocaleTimeString("en-GB", { + hour: "numeric", minute: "2-digit", }); @@ -254,8 +254,8 @@ export default function FeesChart({ selectedMetric, selectedTimeframe, selectedC suffix = " gwei"; displayValue = y * 1e9; } - }else{ - if(showCents){ + } else { + if (showCents) { prefix = ""; suffix = " cents"; displayValue = y * 100; @@ -273,7 +273,7 @@ export default function FeesChart({ selectedMetric, selectedTimeframe, selectedC }">${prefix}
${selectedMetric === "fdv" || selectedMetric === "market_cap" ? shortenNumber(displayValue).toString() - : parseFloat(displayValue).toLocaleString(undefined, { + : parseFloat(displayValue).toLocaleString("en-GB", { minimumFractionDigits: valuePrefix ? 2 : 0, maximumFractionDigits: valuePrefix ? selectedMetric === "txcosts" @@ -311,7 +311,7 @@ export default function FeesChart({ selectedMetric, selectedTimeframe, selectedC
${prefix}
- ${parseFloat(value).toLocaleString(undefined, { + ${parseFloat(value).toLocaleString("en-GB", { minimumFractionDigits: valuePrefix ? 2 : 0, maximumFractionDigits: valuePrefix ? 2 : 0, })} @@ -520,7 +520,7 @@ export default function FeesChart({ selectedMetric, selectedTimeframe, selectedC // if (isYearStart) { // return `${date.getFullYear()}`; // } else { - // return `${date.toLocaleDateString(undefined, { + // return `${date.toLocaleDateString("en-GB", { // month: "short", // })}`; // } diff --git a/app/(fees)/fees/page.tsx b/app/(fees)/fees/page.tsx index 04805ed0..4e62cc39 100644 --- a/app/(fees)/fees/page.tsx +++ b/app/(fees)/fees/page.tsx @@ -1022,7 +1022,7 @@ export default function FeesPage() { > {showUsd && !showCents &&
$
}
- {Intl.NumberFormat(undefined, { + {Intl.NumberFormat("en-GB", { notation: "compact", maximumFractionDigits: fractionDigits, minimumFractionDigits: fractionDigits, @@ -1054,7 +1054,7 @@ export default function FeesPage() { > {showUsd && !showCents &&
$
}
- {Intl.NumberFormat(undefined, { + {Intl.NumberFormat("en-GB", { notation: "compact", maximumFractionDigits: fractionDigits, minimumFractionDigits: fractionDigits, diff --git a/app/(layout)/chains/[chain]/page.tsx b/app/(layout)/chains/[chain]/page.tsx index 8f82a4eb..30f86783 100644 --- a/app/(layout)/chains/[chain]/page.tsx +++ b/app/(layout)/chains/[chain]/page.tsx @@ -178,20 +178,20 @@ const Chain = ({ params }: { params: any }) => { const getGradientColor = useCallback((percentage, weighted = false) => { const colors = !weighted ? [ - { percent: 0, color: "#1DF7EF" }, - { percent: 20, color: "#76EDA0" }, - { percent: 50, color: "#FFDF27" }, - { percent: 70, color: "#FF9B47" }, - { percent: 100, color: "#FE5468" }, - ] + { percent: 0, color: "#1DF7EF" }, + { percent: 20, color: "#76EDA0" }, + { percent: 50, color: "#FFDF27" }, + { percent: 70, color: "#FF9B47" }, + { percent: 100, color: "#FE5468" }, + ] : [ - { percent: 0, color: "#1DF7EF" }, - { percent: 2, color: "#76EDA0" }, - { percent: 10, color: "#FFDF27" }, - { percent: 40, color: "#FF9B47" }, - { percent: 80, color: "#FE5468" }, - { percent: 100, color: "#FE5468" }, // Repeat the final color to ensure upper bound - ]; + { percent: 0, color: "#1DF7EF" }, + { percent: 2, color: "#76EDA0" }, + { percent: 10, color: "#FFDF27" }, + { percent: 40, color: "#FF9B47" }, + { percent: 80, color: "#FE5468" }, + { percent: 100, color: "#FE5468" }, // Repeat the final color to ensure upper bound + ]; let lowerBound = colors[0]; let upperBound = colors[colors.length - 1]; @@ -219,23 +219,23 @@ const Chain = ({ params }: { params: any }) => { const r = Math.floor( parseInt(lowerBound.color.substring(1, 3), 16) + - percentDiff * - (parseInt(upperBound.color.substring(1, 3), 16) - - parseInt(lowerBound.color.substring(1, 3), 16)), + percentDiff * + (parseInt(upperBound.color.substring(1, 3), 16) - + parseInt(lowerBound.color.substring(1, 3), 16)), ); const g = Math.floor( parseInt(lowerBound.color.substring(3, 5), 16) + - percentDiff * - (parseInt(upperBound.color.substring(3, 5), 16) - - parseInt(lowerBound.color.substring(3, 5), 16)), + percentDiff * + (parseInt(upperBound.color.substring(3, 5), 16) - + parseInt(lowerBound.color.substring(3, 5), 16)), ); const b = Math.floor( parseInt(lowerBound.color.substring(5, 7), 16) + - percentDiff * - (parseInt(upperBound.color.substring(5, 7), 16) - - parseInt(lowerBound.color.substring(5, 7), 16)), + percentDiff * + (parseInt(upperBound.color.substring(5, 7), 16) - + parseInt(lowerBound.color.substring(5, 7), 16)), ); return `#${r.toString(16).padStart(2, "0")}${g @@ -295,23 +295,20 @@ const Chain = ({ params }: { params: any }) => { }} >
{
{ Object.keys(master.chains[chainKey].block_explorers) .length > 0 && ( { ? `https://app.rhino.fi/bridge?refId=PG_GrowThePie&token=ETH&chainOut=${master.chains[chainKey].rhino_naming}&chain=ETHEREUM` : "https://app.rhino.fi/bridge/?refId=PG_GrowThePie" } - className={`absolute right-[5px] top-[10px] lg:top-[10px] left-[calc((100%/2)+5px)] ${ - isSidebarOpen + className={`absolute right-[5px] top-[10px] lg:top-[10px] left-[calc((100%/2)+5px)] ${isSidebarOpen ? "lg:left-[140px]" : "2xl:left-[150px] lg:left-[140px]" - }`} + }`} >
@@ -504,11 +498,10 @@ const Chain = ({ params }: { params: any }) => {
)} { className={`min-h-[111px] lg:max-h-[111px] relative flex flex-col justify-between transition-opacity duration-300 px-[10px] py-[10px] rounded-[15px] bg-forest-50 dark:bg-[#1F2726] overflow-hidden`} >
{
{new Date( master.chains[chainKey].launch_date, - ).toLocaleDateString(undefined, { + ).toLocaleDateString("en-GB", { year: "numeric", month: "long", })} @@ -601,9 +593,9 @@ const Chain = ({ params }: { params: any }) => { backgroundColor: chainData ? chainData.ranking[key] ? getGradientColor( - chainData.ranking[key] - .color_scale * 100, - ) + chainData.ranking[key] + .color_scale * 100, + ) : "#5A6462" : "#5A6462", }} @@ -644,9 +636,9 @@ const Chain = ({ params }: { params: any }) => { backgroundColor: chainData ? chainData.ranking[key] ? getGradientColor( - chainData.ranking[key] - .color_scale * 100, - ) + chainData.ranking[key] + .color_scale * 100, + ) : "#5A6462" : "#5A6462", }} @@ -704,13 +696,12 @@ const Chain = ({ params }: { params: any }) => {
{
{chainData - ? `${ - chainData.hottest_contract - ? `${ - chainData.hottest_contract.data[0] - ? chainData.hottest_contract.data[0][1] + - " - " + - chainData.hottest_contract.data[0][2] - : "N/A" - }` - : "N/A" + ? `${chainData.hottest_contract + ? `${chainData.hottest_contract.data[0] + ? chainData.hottest_contract.data[0][1] + + " - " + + chainData.hottest_contract.data[0][2] + : "N/A" }` + : "N/A" + }` : "N/A"}
@@ -749,13 +738,12 @@ const Chain = ({ params }: { params: any }) => { >
{ title={"Technology"} enableDropdown={isMobile} childrenHeight={isMobile ? 116 : 111} - className={`transition-all duration-300 ${ - isMobile ? "flex-1" : " hover:min-w-[190px] min-w-[35px] " - }`} + className={`transition-all duration-300 ${isMobile ? "flex-1" : " hover:min-w-[190px] min-w-[35px] " + }`} >
{ title={"Risk"} enableDropdown={isMobile} childrenHeight={isMobile ? 116 : 111} - className={`transition-all duration-300 ${ - isMobile + className={`transition-all duration-300 ${isMobile ? "w-[126px]" : "hover:min-w-[126px] max-w-[126px] min-w-[35px]" - }`} + }`} >
diff --git a/app/(layout)/contracts/page.tsx b/app/(layout)/contracts/page.tsx index 657abe58..39a5989a 100644 --- a/app/(layout)/contracts/page.tsx +++ b/app/(layout)/contracts/page.tsx @@ -492,17 +492,17 @@ export default function ContractsPage({ params }: { params: any }) { contractsUniqueValues[header.id] ? ( contractsUniqueValues[ header.id - ].toLocaleString() + ].toLocaleString("en-GB") ) : ( <> {dataUniqueValues[ header.id - ].toLocaleString()} + ].toLocaleString("en-GB")} {"/"} {contractsUniqueValues[ header.id - ].toLocaleString()} + ].toLocaleString("en-GB")} )} diff --git a/app/(layout)/trackers/eip4844/page.tsx b/app/(layout)/trackers/eip4844/page.tsx index a52e4533..963cd605 100644 --- a/app/(layout)/trackers/eip4844/page.tsx +++ b/app/(layout)/trackers/eip4844/page.tsx @@ -182,7 +182,7 @@ export default function Eiptracker() { function getDateString(unixPoint) { const date = new Date(unixPoint); - return date.toLocaleDateString(undefined, { + return date.toLocaleDateString("en-GB", { timeZone: "UTC", month: "short", day: "numeric", @@ -449,7 +449,7 @@ export default function Eiptracker() { {AllChainsByKeys[item.chain.key].label}
- {Intl.NumberFormat(undefined, { + {Intl.NumberFormat("en-GB", { notation: "compact", maximumFractionDigits: showUsd ? feeData.chain_data[item.chain.key][ @@ -467,7 +467,7 @@ export default function Eiptracker() { {`${showUsd ? "$" : "Ξ"}`}
- {Intl.NumberFormat(undefined, { + {Intl.NumberFormat("en-GB", { notation: "compact", maximumFractionDigits: showUsd ? feeData.chain_data[item.chain.key][ @@ -488,7 +488,7 @@ export default function Eiptracker() { {feeData.chain_data[item.chain.key][ selectedTimescale ]["txcosts_native_median"].data[0] - ? Intl.NumberFormat(undefined, { + ? Intl.NumberFormat("en-GB", { notation: "compact", maximumFractionDigits: showUsd ? feeData.chain_data[item.chain.key][ diff --git a/app/(layout)/trackers/optimism-retropgf-3/page.tsx b/app/(layout)/trackers/optimism-retropgf-3/page.tsx index 53cb4e94..9dc47e27 100644 --- a/app/(layout)/trackers/optimism-retropgf-3/page.tsx +++ b/app/(layout)/trackers/optimism-retropgf-3/page.tsx @@ -528,7 +528,7 @@ export default function Page() { {`${formatNumber( parseInt(value as string), false, - ).toLocaleString()}`} + ).toLocaleString("en-GB")}`}
)) .reduce((prev, curr) => { @@ -795,7 +795,7 @@ export default function Page() {
{RPGF3ResultsById[ info.row.original.id - ].awarded.toLocaleString()} + ].awarded.toLocaleString("en-GB")}
OP @@ -812,7 +812,7 @@ export default function Page() { projectsResponse.prices.optimism.usd * RPGF3ResultsById[info.row.original.id] .awarded, - ).toLocaleString()} + ).toLocaleString("en-GB")}
USD @@ -825,7 +825,7 @@ export default function Page() { Median Amount:{" "} {RPGF3ResultsById[ info.row.original.id - ].result_median_amount.toLocaleString()}{" "} + ].result_median_amount.toLocaleString("en-GB")}{" "} OP
@@ -1126,7 +1126,7 @@ export default function Page() { $ )} - {parseInt(value as string).toLocaleString()} + {parseInt(value as string).toLocaleString("en-GB")} {currency === "OP" && ( <> {" "} @@ -1907,17 +1907,17 @@ export default function Page() { projectsUniqueValues[header.id] ? ( projectsUniqueValues[ header.id - ].toLocaleString() + ].toLocaleString("en-GB") ) : ( <> {dataUniqueValues[ header.id - ].toLocaleString()} + ].toLocaleString("en-GB")} {"/"} {projectsUniqueValues[ header.id - ].toLocaleString()} + ].toLocaleString("en-GB")} )} diff --git a/components/charts/ChainComponent.tsx b/components/charts/ChainComponent.tsx index b429962c..c4bc265f 100644 --- a/components/charts/ChainComponent.tsx +++ b/components/charts/ChainComponent.tsx @@ -228,7 +228,7 @@ export default function ChainComponent({ Object.keys(data.metrics).forEach((key) => { maxUnixtimes.push( data.metrics[key].daily.data[ - data.metrics[key].daily.data.length - 1 + data.metrics[key].daily.data.length - 1 ][0], ); }); @@ -388,7 +388,7 @@ export default function ChainComponent({ let valueIndex = 1; let valueMultiplier = 1; - let valueFormat = Intl.NumberFormat(undefined, { + let valueFormat = Intl.NumberFormat("en-GB", { notation: "compact", maximumFractionDigits: 2, minimumFractionDigits: 2, @@ -445,12 +445,12 @@ export default function ChainComponent({ const date = new Date(x); const dateString = `
- ${date.toLocaleDateString(undefined, { - timeZone: "UTC", - month: "short", - day: "numeric", - year: "numeric", - })} + ${date.toLocaleDateString("en-GB", { + timeZone: "UTC", + month: "short", + day: "numeric", + year: "numeric", + })}
`; @@ -472,28 +472,25 @@ export default function ChainComponent({ if (selectedScale === "percentage") return `
-
+
${Highcharts.numberFormat( - percentage, - 2, - )}%
+ percentage, + 2, + )}%
`; let prefix = displayValues[series.name].prefix; @@ -512,25 +509,21 @@ export default function ChainComponent({ return `
-
-
${prefix}
- ${parseFloat(value).toLocaleString(undefined, { - minimumFractionDigits: prefix ? 2 : 0, - maximumFractionDigits: prefix ? 2 : 0, - })} -
${suffix}
+
${prefix}
+ ${parseFloat(value).toLocaleString("en-GB", { + minimumFractionDigits: prefix ? 2 : 0, + maximumFractionDigits: prefix ? 2 : 0, + })} +
${suffix}
`; }) .join(""); @@ -924,7 +916,7 @@ export default function ChainComponent({ if (isYearStart) { return `${date.getFullYear()}`; } else { - return `${date.toLocaleDateString(undefined, { + return `${date.toLocaleDateString("en-GB", { month: "short", })}`; } @@ -987,12 +979,12 @@ export default function ChainComponent({ [ 0, AllChainsByKeys[data.chain_id].colors[theme ?? "dark"][0] + - "33", + "33", ], [ 1, AllChainsByKeys[data.chain_id].colors[theme ?? "dark"][1] + - "33", + "33", ], ], }, @@ -1299,27 +1291,27 @@ export default function ChainComponent({ data: data.metrics[category].daily.types.includes("eth") ? showUsd ? data.metrics[category].daily.data.map((d) => [ - d[0], - d[data.metrics[category].daily.types.indexOf("usd")], - ]) + d[0], + d[data.metrics[category].daily.types.indexOf("usd")], + ]) : data.metrics[category].daily.data.map((d) => [ - d[0], - showGwei(category) - ? d[ - data.metrics[category].daily.types.indexOf( - "eth", - ) - ] * 1000000000 - : d[ - data.metrics[category].daily.types.indexOf( - "eth", - ) - ], - ]) - : data.metrics[category].daily.data.map((d) => [ d[0], - d[1], - ]), + showGwei(category) + ? d[ + data.metrics[category].daily.types.indexOf( + "eth", + ) + ] * 1000000000 + : d[ + data.metrics[category].daily.types.indexOf( + "eth", + ) + ], + ]) + : data.metrics[category].daily.data.map((d) => [ + d[0], + d[1], + ]), showInLegend: false, marker: { enabled: false, @@ -1357,11 +1349,11 @@ export default function ChainComponent({ attributes: { fill: AllChainsByKeys[data.chain_id]?.colors[ - theme ?? "dark" + theme ?? "dark" ][0] + "99", stroke: AllChainsByKeys[data.chain_id]?.colors[ - theme ?? "dark" + theme ?? "dark" ][0] + "66", }, }, @@ -1443,62 +1435,6 @@ export default function ChainComponent({
- {/* {!zoomed - ? (category === "stables_mcap" || category === "txcosts") && ( -
-
- {new Date(timespans[selectedTimespan].xMin).toLocaleDateString( - undefined, - { - timeZone: "UTC", - month: "short", - day: "numeric", - year: "numeric", - }, - )} -
-
- {new Date(timespans[selectedTimespan].xMax).toLocaleDateString( - undefined, - { - timeZone: "UTC", - month: "short", - day: "numeric", - year: "numeric", - }, - )} -
-
- ) - : (category === "stables_mcap" || category === "txcosts") && - intervalShown && ( -
-
- {new Date(intervalShown.min).toLocaleDateString(undefined, { - timeZone: "UTC", - month: "short", - day: "numeric", - year: "numeric", - })} -
-
- {new Date(intervalShown.max).toLocaleDateString(undefined, { - timeZone: "UTC", - month: "short", - day: "numeric", - year: "numeric", - })} -
-
- )} */}
); } diff --git a/components/charts/Treemap.tsx b/components/charts/Treemap.tsx index 1765e208..6dccb3df 100644 --- a/components/charts/Treemap.tsx +++ b/components/charts/Treemap.tsx @@ -112,14 +112,12 @@ export default function Treemap({ d }: { d?: any }) { const valueKey = useMemo(() => { //"gas_fees_eth_absolute", "gas_fees_usd_absolute", "txcount_absolute", "gas_fees_share_eth", "gas_fees_share_usd", "txcount_share" if (selectedValueType === "gas_fees" && selectedValueScale === "absolute") - return `${selectedValueType}_${ - showUsd ? "usd" : "eth" - }_${selectedValueScale}`; + return `${selectedValueType}_${showUsd ? "usd" : "eth" + }_${selectedValueScale}`; if (selectedValueType === "gas_fees" && selectedValueScale === "share") - return `${selectedValueType}_${selectedValueScale}_${ - showUsd ? "usd" : "eth" - }`; + return `${selectedValueType}_${selectedValueScale}_${showUsd ? "usd" : "eth" + }`; return `${selectedValueType}_${selectedValueScale}`; }, [selectedValueScale, selectedValueType, showUsd]); @@ -183,17 +181,17 @@ export default function Treemap({ d }: { d?: any }) { categoryKey !== "unlabeled" ? undefined : { - pattern: { - color: AllChainsByKeys[chain].colors["dark"][0] + "55", - path: { - d: "M 10 0 L 0 10 M 9 11 L 11 9 M -1 1 L 1 -1", - strokeWidth: 3, - }, - width: 10, - height: 10, - opacity: 0.99, + pattern: { + color: AllChainsByKeys[chain].colors["dark"][0] + "55", + path: { + d: "M 10 0 L 0 10 M 9 11 L 11 9 M -1 1 L 1 -1", + strokeWidth: 3, }, + width: 10, + height: 10, + opacity: 0.99, }, + }, // opacity: 0.11, borderColor: AllChainsByKeys[chain].colors["dark"][0], @@ -445,7 +443,7 @@ export default function Treemap({ d }: { d?: any }) { const dateString = ""; // ` //
- // ${date.toLocaleDateString(undefined, { + // ${date.toLocaleDateString("en-GB", { // timeZone: "UTC", // month: "short", // day: "numeric", @@ -478,24 +476,22 @@ export default function Treemap({ d }: { d?: any }) {
${key}
-->
-
${prefix}
- ${y.toLocaleString(undefined, { - minimumFractionDigits: prefix ? 2 : 0, - maximumFractionDigits: prefix ? 2 : 0, - })} -
${suffix}
+
${prefix}
+ ${y.toLocaleString("en-GB", { + minimumFractionDigits: prefix ? 2 : 0, + maximumFractionDigits: prefix ? 2 : 0, + })} +
${suffix}
`; return tooltip + tooltipPoints + tooltipEnd; @@ -549,11 +545,10 @@ export default function Treemap({ d }: { d?: any }) {
7-day rolling average diff --git a/components/charts/chart.tsx b/components/charts/chart.tsx index 15b8d22e..8565018d 100644 --- a/components/charts/chart.tsx +++ b/components/charts/chart.tsx @@ -129,6 +129,38 @@ export const Chart = ({ highchartsRoundedCorners(Highcharts); highchartsAnnotations(Highcharts); highchartsPatternFill(Highcharts); + + // update x-axis label sizes if it is a 4 digit number + Highcharts.wrap( + Highcharts.Axis.prototype, + "renderTick", + function (proceed) { + proceed.apply(this, Array.prototype.slice.call(arguments, 1)); + + const axis: Highcharts.Axis = this; + const ticks: Highcharts.Dictionary = axis.ticks; + if ( + axis.isXAxis && + axis.options.labels && + axis.options.labels.enabled + ) { + Object.keys(ticks).forEach((tick) => { + const tickLabel = ticks[tick].label; + if (!tickLabel) return; + const tickValue = tickLabel.element.textContent; + if (tickValue) { + if (tickValue.length === 4) { + tickLabel.css({ + transform: "scale(1.4)", + fontWeight: "600", + }); + } + } + }); + } + }, + ); + setHighchartsLoaded(true); }, []); @@ -570,20 +602,73 @@ export const Chart = ({ ...baseOptions.xAxis, min: timespans[timespan].xMin, max: timespans[timespan].xMax, - minorTicks: true, - minorTickLength: 2, + // minorTicks: true, + // minorTickLength: 2, + // minorTickWidth: 2, + // minorGridLineWidth: 0, + // minorTickInterval: ["7d", "30d"].includes(timespan) + // ? 1000 * 60 * 60 * 24 * 1 + // : 1000 * 60 * 60 * 24 * 7, + // tickPositions: displayMinorTicksOnly + // ? undefined + // : tickPositions, + // labels: getXAxisLabels(), minorTickWidth: 2, minorGridLineWidth: 0, - minorTickInterval: ["7d", "30d"].includes(timespan) - ? 1000 * 60 * 60 * 24 * 1 - : 1000 * 60 * 60 * 24 * 7, - tickPositions: displayMinorTicksOnly - ? undefined - : tickPositions, - labels: getXAxisLabels(), + tickColor: "#CDD8D34C", + tickLength: 25, + tickWidth: 1, + offset: 0, + minTickInterval: timespans[timespan].xMax - timespans[timespan].xMin <= 40 * 24 * 3600 * 1000 ? 24 * 3600 * 1000 : 30 * 24 * 3600 * 1000, + minPadding: 0, + maxPadding: 0, + labels: { + align: undefined, + rotation: 0, + allowOverlap: false, + // staggerLines: 1, + reserveSpace: true, + overflow: "justify", + useHTML: true, + formatter: function (this: AxisLabelsFormatterContextObject) { + + if (timespans[timespan].xMax - timespans[timespan].xMin <= 40 * 24 * 3600 * 1000) { + let isBeginningOfWeek = new Date(this.value).getUTCDay() === 1; + let showMonth = this.isFirst || new Date(this.value).getUTCDate() === 1; + + return new Date(this.value).toLocaleDateString("en-GB", { + timeZone: "UTC", + month: "short", + day: "numeric", + year: this.isFirst ? "numeric" : undefined, + }); + } + else { + // if Jan 1st, show year + if (new Date(this.value).getUTCMonth() === 0) { + return new Date(this.value).toLocaleDateString("en-GB", { + timeZone: "UTC", + year: "numeric", + }); + } + return new Date(this.value).toLocaleDateString("en-GB", { + timeZone: "UTC", + month: "short", + year: "numeric", + }); + } + }, + y: 40, + style: { + fontSize: "10px", + color: "#CDD8D3", + }, + }, }, yAxis: { ...baseOptions.yAxis, + showFirstLabel: true, + showLastLabel: true, type: yScale, min: yScale === "percentage" ? 0 : undefined, max: maxY ? maxY : undefined, @@ -664,8 +749,8 @@ export const Chart = ({ > 200 - ? "w-[128px] md:w-[163px]" - : "w-[128.67px] md:w-[193px] " + ? "w-[128px] md:w-[163px]" + : "w-[128.67px] md:w-[193px] " } text-forest-300 dark:text-[#EAECEB] mix-blend-darken dark:mix-blend-lighten`} />
diff --git a/components/home/LandingUserBaseChart.tsx b/components/home/LandingUserBaseChart.tsx index d9c6e3d3..b4db88b2 100644 --- a/components/home/LandingUserBaseChart.tsx +++ b/components/home/LandingUserBaseChart.tsx @@ -6,7 +6,11 @@ import Heading from "@/components/layout/Heading"; import Subheading from "@/components/layout/Subheading"; import useSWR from "swr"; import { MasterResponse } from "@/types/api/MasterResponse"; -import { AllChains, AllChainsByKeys, Get_SupportedChainKeys } from "@/lib/chains"; +import { + AllChains, + AllChainsByKeys, + Get_SupportedChainKeys, +} from "@/lib/chains"; import { LandingPageMetricsResponse } from "@/types/api/LandingPageMetricsResponse"; import LandingChart from "@/components/layout/LandingChart"; import LandingMetricsTable from "@/components/layout/LandingMetricsTable"; @@ -20,6 +24,7 @@ import QuestionAnswer from "@/components/layout/QuestionAnswer"; import Container from "@/components/layout/Container"; import ShowLoading from "@/components/layout/ShowLoading"; import HorizontalScrollContainer from "../HorizontalScrollContainer"; +import { isMobile } from "react-device-detect"; export default function LandingUserBaseChart() { // const isLargeScreen = useMediaQuery("(min-width: 1280px)"); @@ -57,7 +62,6 @@ export default function LandingUserBaseChart() { } }, [landing, selectedTimeInterval]); - useEffect(() => { if (!data) return; @@ -73,7 +77,9 @@ export default function LandingUserBaseChart() { return AllChains.filter( (chain) => - Object.keys(data.chains).includes(chain.key) && Get_SupportedChainKeys(master) && chain.key != "ethereum", + Object.keys(data.chains).includes(chain.key) && + Get_SupportedChainKeys(master) && + chain.key != "ethereum", ); }, [data, master]); @@ -91,7 +97,11 @@ export default function LandingUserBaseChart() { {data && landing && master ? ( <>
diff --git a/components/layout/CategoryMetrics.tsx b/components/layout/CategoryMetrics.tsx index 74475c0d..9e1e682c 100644 --- a/components/layout/CategoryMetrics.tsx +++ b/components/layout/CategoryMetrics.tsx @@ -33,6 +33,7 @@ import { TopRowChild, TopRowParent, } from "@/components/layout/TopRow"; +import { IS_DEVELOPMENT, IS_PREVIEW, IS_PRODUCTION } from "@/lib/helpers"; export default function CategoryMetrics({ data, @@ -274,12 +275,14 @@ export default function CategoryMetrics({ return { "7d": { label: "7 days", + shortLabel: "7d", value: 7, xMin: Date.now() - 7 * 24 * 60 * 60 * 1000, xMax: Date.now(), }, "30d": { label: "30 days", + shortLabel: "30d", value: 30, xMin: Date.now() - 30 * 24 * 60 * 60 * 1000, xMax: Date.now(), @@ -290,6 +293,7 @@ export default function CategoryMetrics({ // }, "180d": { label: "180 days", + shortLabel: "180d", value: 180, }, // "365d": { @@ -1008,7 +1012,12 @@ export default function CategoryMetrics({ // }); }} > - {timespans[timespan].label} + + {timespans[timespan].label} + + + {timespans[timespan].shortLabel} + ))}
*/}
- -
- +
+ {Object.keys(categories).map((category, i) => + categories[category] !== "Categories" ? ( +
+
{categories[category]}
+
{ + handleOpen(category); + }} + > + +
+
+ ) : ( +
+
+ {categories[category]} +
+
Subcategories
+
+ ), + )} +
+ + ) : ( + +
- {!openSub ? ( -
- {Object.keys(categories).map((category, i) => - categories[category] !== "Categories" ? ( -
{ - setIsCategoryHovered((prev) => ({ - ...prev, - [category]: true, - })); - }} - onMouseLeave={() => { - setIsCategoryHovered((prev) => ({ - ...prev, - [category]: false, - })); - }} - style={{ - borderLeft: - "0.5px dotted var(--dark-active-text, #CDD8D3)", - background: + + {!openSub ? ( +
+ {Object.keys(categories).map((category, i) => + categories[category] !== "Categories" ? ( +
{ + setIsCategoryHovered((prev) => ({ + ...prev, + [category]: true, + })); + }} + onMouseLeave={() => { + setIsCategoryHovered((prev) => ({ + ...prev, + [category]: false, + })); + }} + style={{ + borderLeft: + "0.5px dotted var(--dark-active-text, #CDD8D3)", + background: + selectedCategory === category + ? "#5A6462" + : theme === "light" + ? "#FFFFFF" + : `linear-gradient( 90deg, rgba(16, 20, 19, ${ 0.3 - @@ -1191,112 +1242,112 @@ export default function CategoryMetrics({ 0.2 }) 100% )`, - }} - > -
{ - if (selectedCategory === category) { - handleOpen(category); - } - - setSelectedCategory(category); }} >
-

{categories[category]}

-
- -
{ - handleOpen(category); + if (selectedCategory === category) { + handleOpen(category); + } + + setSelectedCategory(category); }} > - +
+

{categories[category]}

+
+ +
{ + handleOpen(category); + }} + > + +
-
- ) : ( - // Different response for "Chains" category -
-
- {categories[category]} -
-
- Subcategories + ) : ( + // Different response for "Chains" category +
+
+ {categories[category]} +
+
+ Subcategories +
-
- ), - )} -
- ) : ( -
- {categoryTransitions((style, item) => - categories[item.category] !== "Categories" ? ( - 8 - ? "w-[650px]" - : Object.keys( - data[item.category].subcategories, - ).length > 5 - ? "w-[500px]" - : "w-[400px]" - }` - : "h-full w-full min-w-[40px] hover:max-w-[180px]" - } + ), + )} +
+ ) : ( +
+ {categoryTransitions((style, item) => + categories[item.category] !== "Categories" ? ( + 8 + ? "w-[650px]" + : Object.keys( + data[item.category].subcategories, + ).length > 5 + ? "w-[500px]" + : "w-[400px]" + }` + : "h-full w-full min-w-[40px] hover:max-w-[180px]" + } ${isCategoryHovered[item.category] ? "bg-white/5" : ""} `} - onMouseEnter={() => { - setIsCategoryHovered((prev) => ({ - ...prev, - [item.category]: true, - })); - }} - onMouseLeave={() => { - setIsCategoryHovered((prev) => ({ - ...prev, - [item.category]: false, - })); - }} - style={{ - borderLeft: - "0.5px dotted var(--dark-active-text, #CDD8D3)", - background: - selectedCategory === item.category - ? "#5A6462" - : theme === "light" - ? "#FFFFFF" - : `linear-gradient( + onMouseEnter={() => { + setIsCategoryHovered((prev) => ({ + ...prev, + [item.category]: true, + })); + }} + onMouseLeave={() => { + setIsCategoryHovered((prev) => ({ + ...prev, + [item.category]: false, + })); + }} + style={{ + borderLeft: + "0.5px dotted var(--dark-active-text, #CDD8D3)", + background: + selectedCategory === item.category + ? "#5A6462" + : theme === "light" + ? "#FFFFFF" + : `linear-gradient( 90deg, rgba(16, 20, 19, ${ 0.3 - @@ -1318,249 +1369,255 @@ export default function CategoryMetrics({ 0.2 }) 100% )`, - ...style, - }} - > -
8 - ? "w-[650px]" - : Object.keys( - data[item.category].subcategories, - ).length > 4 - ? "w-[500px]" - : "w-[400px]" - }` - : "hover:bg-white/5 w-full min-w-[40px] hover:max-w-[180px] " - }`} - onClick={() => { - if (selectedCategory === item.category) { - handleOpen(item.category); - return; - } - - setSelectedCategory(item.category); + ...style, }} >
8 + ? "w-[650px]" + : Object.keys( + data[item.category].subcategories, + ).length > 4 + ? "w-[500px]" + : "w-[400px]" }` + : "hover:bg-white/5 w-full min-w-[40px] hover:max-w-[180px] " }`} - style={{ - background: - selectedCategory === item.category - ? "#5A6462" - : "none", - backgroundClip: - selectedCategory === item.category - ? "initial" - : "text", - WebkitBackgroundClip: - selectedCategory === item.category - ? "initial" - : "text", - WebkitTextFillColor: - selectedCategory === item.category - ? "inherit" - : theme === "light" - ? "initial" - : "transparent", - backgroundImage: - selectedCategory === item.category - ? "none" - : theme === "light" - ? "none" - : `radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%), linear-gradient(90deg, rgba(16, 20, 19, ${ - 0.4 + - (item.i / - (Object.keys(categories).length - - 1)) * - 0.4 - }) 0%, #101413 15.10%, rgba(16, 20, 19, 0.00) 48.96%, #101413 86.98%, rgba(16, 20, 19, ${ - 0.4 + - (item.i / - (Object.keys(categories).length - - 1)) * - 0.4 - }) 100%)`, + onClick={() => { + if (selectedCategory === item.category) { + handleOpen(item.category); + return; + } + + setSelectedCategory(item.category); }} > - {categories[item.category]} -
+
+ {categories[item.category]} +
-
- {selectedCategory === item.category ? ( -
8 - ? "w-[600px]" - : Object.keys( - data[item.category].subcategories, - ).length > 4 - ? "w-[450px]" - : "w-[350px]" - }`} - > + > + {selectedCategory === item.category ? (
8 + ? "w-[600px]" + : Object.keys( + data[item.category].subcategories, + ).length > 4 + ? "w-[450px]" + : "w-[350px]" + }`} > - {item.category !== "unlabeled" && - item.category !== "native_transfers" ? ( -
{ - handleSelectAllSubcategories( - item.category, - ); - e.stopPropagation(); - }} - > -
- Select All Subcategories +
+ {item.category !== "unlabeled" && + item.category !== "native_transfers" ? ( +
{ + handleSelectAllSubcategories( + item.category, + ); + e.stopPropagation(); + }} + > +
+ Select All Subcategories +
+
+ +
-
+ ) : null} + {item.category !== "unlabeled" && + item.category !== "native_transfers" ? ( + data[ + item.category + ].subcategories.list.map( + (subcategory) => ( + + ), + ) + ) : ( +
+

+ {" "} + There are currently no + subcategories for the given + category.{" "} +

-
- ) : null} - {item.category !== "unlabeled" && - item.category !== "native_transfers" ? ( - data[ - item.category - ].subcategories.list.map( - (subcategory) => ( - - ), - ) - ) : ( -
- -

- {" "} - There are currently no subcategories - for the given category.{" "} -

-
- )} + )} +
-
- ) : null} -
+ ) : null} +
- -
- - ) : ( - // Different response for "Chains" category -
-
- {categories[item.category]} -
-
- Subcategories + +
+ + ) : ( + // Different response for "Chains" category +
+
+ {categories[item.category]} +
+
+ Subcategories +
-
- ), - )} -
- )} - -
- + ), + )} +
+ )} + +
+ + )}
@@ -2304,17 +2361,17 @@ export default function CategoryMetrics({ sortedContracts[ key ].gas_fees_absolute_usd.toFixed(0), - ).toLocaleString("en-US") + ).toLocaleString("en-GB") : Number( sortedContracts[ key ].gas_fees_absolute_eth.toFixed(2), - ).toLocaleString("en-US") + ).toLocaleString("en-GB") : Number( sortedContracts[ key ].txcount_absolute.toFixed(0), - ).toLocaleString("en-US")} + ).toLocaleString("en-GB")}
{/*
diff --git a/components/layout/ChainAnimations.tsx b/components/layout/ChainAnimations.tsx index 2c2d7d36..6262c10e 100644 --- a/components/layout/ChainAnimations.tsx +++ b/components/layout/ChainAnimations.tsx @@ -221,14 +221,14 @@ export default function ChainAnimations({
{showUsd ? (Math.round(value * 100) / 100).toLocaleString( - undefined, + "en-GB", { minimumFractionDigits: 0, maximumFractionDigits: 0, }, ) : (Math.round(value * 100) / 100).toLocaleString( - undefined, + "en-GB", { minimumFractionDigits: 0, maximumFractionDigits: 2, diff --git a/components/layout/ChainChart.tsx b/components/layout/ChainChart.tsx index 6a1a6372..615ddb25 100644 --- a/components/layout/ChainChart.tsx +++ b/components/layout/ChainChart.tsx @@ -289,7 +289,7 @@ export default function ChainChart({ Object.keys(item.metrics).forEach((key) => { maxUnixtimes.push( item.metrics[key].daily.data[ - item.metrics[key].daily.data.length - 1 + item.metrics[key].daily.data.length - 1 ][0], ); }); @@ -308,7 +308,7 @@ export default function ChainChart({ function getDate(unix) { const date = new Date(unix); - const formattedDate = date.toLocaleString("en-us", { + const formattedDate = date.toLocaleString("en-GB", { month: "short", day: "numeric", year: "numeric", @@ -541,7 +541,7 @@ export default function ChainChart({ let valueIndex = 1; let valueMultiplier = 1; - let valueFormat = Intl.NumberFormat(undefined, { + let valueFormat = Intl.NumberFormat("en-GB", { notation: "compact", maximumFractionDigits: 2, minimumFractionDigits: 2, @@ -609,7 +609,7 @@ export default function ChainChart({ // const prefix = prefixes[series.name] ?? ""; - const dateString = date.toLocaleDateString(undefined, { + const dateString = date.toLocaleDateString("en-GB", { timeZone: "UTC", month: "short", day: "numeric", @@ -667,20 +667,17 @@ export default function ChainChart({ // if (series.name === item.chain_name) { return `
-
+
-
${prefix}
- ${parseFloat(value).toLocaleString(undefined, { - minimumFractionDigits: decimals, - maximumFractionDigits: decimals, - })} -
${suffix}
+
${prefix}
+ ${parseFloat(value).toLocaleString("en-GB", { + minimumFractionDigits: decimals, + maximumFractionDigits: decimals, + })} +
${suffix}
`; // } else { @@ -990,7 +987,7 @@ export default function ChainChart({ if (isYearStart) { return `${date.getFullYear()}`; } else { - return `${date.toLocaleDateString(undefined, { + return `${date.toLocaleDateString("en-GB", { month: "short", })}`; } @@ -1053,12 +1050,12 @@ export default function ChainChart({ [ 0, AllChainsByKeys[data[0].chain_id].colors[theme ?? "dark"][0] + - "33", + "33", ], [ 1, AllChainsByKeys[data[0].chain_id].colors[theme ?? "dark"][1] + - "33", + "33", ], ], }, @@ -1258,16 +1255,16 @@ export default function ChainChart({ const seriesData = item.metrics[key]?.daily.types.includes("eth") ? showUsd ? item.metrics[key].daily.data.map((d) => [ - d[0], - d[item.metrics[key].daily.types.indexOf("usd")], - ]) + d[0], + d[item.metrics[key].daily.types.indexOf("usd")], + ]) : item.metrics[key].daily.data.map((d) => [ - d[0], - showGwei(key) - ? d[item.metrics[key].daily.types.indexOf("eth")] * - 1000000000 - : d[item.metrics[key].daily.types.indexOf("eth")], - ]) + d[0], + showGwei(key) + ? d[item.metrics[key].daily.types.indexOf("eth")] * + 1000000000 + : d[item.metrics[key].daily.types.indexOf("eth")], + ]) : item.metrics[key]?.daily.data.map((d) => [d[0], d[1]]); const seriesTypes = item.metrics[key]?.daily.types; @@ -1290,16 +1287,16 @@ export default function ChainChart({ data: item.metrics[key]?.daily.types.includes("eth") ? showUsd ? item.metrics[key].daily.data.map((d) => [ - d[0], - d[item.metrics[key].daily.types.indexOf("usd")], - ]) + d[0], + d[item.metrics[key].daily.types.indexOf("usd")], + ]) : item.metrics[key].daily.data.map((d) => [ - d[0], - showGwei(key) - ? d[item.metrics[key].daily.types.indexOf("eth")] * - 1000000000 - : d[item.metrics[key].daily.types.indexOf("eth")], - ]) + d[0], + showGwei(key) + ? d[item.metrics[key].daily.types.indexOf("eth")] * + 1000000000 + : d[item.metrics[key].daily.types.indexOf("eth")], + ]) : item.metrics[key]?.daily.data.map((d) => [d[0], d[1]]), showInLegend: false, marker: { @@ -1325,13 +1322,13 @@ export default function ChainChart({ [ 0, AllChainsByKeys[item.chain_id].colors[ - theme ?? "dark" + theme ?? "dark" ][0] + "33", ], [ 1, AllChainsByKeys[item.chain_id].colors[ - theme ?? "dark" + theme ?? "dark" ][1] + "33", ], ], @@ -1480,18 +1477,16 @@ export default function ChainChart({ `}
Compare to
{compChain && (
@@ -1577,11 +1569,10 @@ export default function ChainChart({
@@ -1762,8 +1752,8 @@ export default function ChainChart({ .map((key, i) => { const isAllZeroValues = data[0].metrics[key] ? data[0].metrics[key].daily.data.every( - (d) => d[1] === 0, - ) + (d) => d[1] === 0, + ) : false; if (!Object.keys(data[0].metrics).includes(key)) @@ -1802,56 +1792,54 @@ export default function ChainChart({ {Object.keys(data[0].metrics).includes( key, ) && ( - - )} + + )}
{!zoomed ? (key === "market_cap" || - key === "txcosts") && ( -
- ) + >
+ ) : (key === "profit" || key === "txcosts") && - intervalShown && ( -
-
- {new Date( - intervalShown.min, - ).toLocaleDateString(undefined, { - timeZone: "UTC", - month: "short", - day: "numeric", - year: "numeric", - })} -
-
- {new Date( - intervalShown.max, - ).toLocaleDateString(undefined, { - timeZone: "UTC", - month: "short", - day: "numeric", - year: "numeric", - })} -
+ > +
+ {new Date( + intervalShown.min, + ).toLocaleDateString("en-GB", { + timeZone: "UTC", + month: "short", + day: "numeric", + year: "numeric", + })}
- )} +
+ {new Date( + intervalShown.max, + ).toLocaleDateString("en-GB", { + timeZone: "UTC", + month: "short", + day: "numeric", + year: "numeric", + })} +
+
+ )}
) : (
@@ -1904,10 +1892,10 @@ export default function ChainChart({ ...options.chart, animation: isAnimate ? { - duration: 500, - delay: 0, - easing: "easeOutQuint", - } + duration: 500, + delay: 0, + easing: "easeOutQuint", + } : false, index: enabledFundamentalsKeys.indexOf(key), margin: zoomed ? zoomedMargin : defaultMargin, @@ -1965,7 +1953,7 @@ export default function ChainChart({ if (chart.series.length > 0) { const lastPoint = chart.series[0].points[ - chart.series[0].points.length - 1 + chart.series[0].points.length - 1 ]; if (lastPoint && lastPoint.plotY) { primaryLineEndPos = @@ -1975,7 +1963,7 @@ export default function ChainChart({ if (chart.series.length > 1) { const lastPoint = chart.series[1].points[ - chart.series[1].points.length - 1 + chart.series[1].points.length - 1 ]; if ( lastPoint && @@ -1997,7 +1985,7 @@ export default function ChainChart({ (series, seriesIndex) => { const lastPoint = series.points[ - series.points.length - 1 + series.points.length - 1 ]; if (!lastPoint || !lastPoint.plotY) @@ -2132,7 +2120,7 @@ export default function ChainChart({ stroke: AllChainsByKeys[series.name] .colors[ - theme ?? "dark" + theme ?? "dark" ][0], "stroke-width": 1, "stroke-dasharray": 2, @@ -2200,7 +2188,7 @@ export default function ChainChart({ .circle( linesXPos, chart.plotTop - - (seriesIndex === 0 ? 24 : 0), + (seriesIndex === 0 ? 24 : 0), 3, ) .attr({ @@ -2269,7 +2257,7 @@ export default function ChainChart({ {zoomed && zoomMin !== null && (
{new Date(zoomMin).toLocaleDateString( - undefined, + "en-GB", { timeZone: "UTC", month: "short", @@ -2284,7 +2272,7 @@ export default function ChainChart({ {selectedTimespan && new Date( timespans[selectedTimespan].xMin, - ).toLocaleDateString(undefined, { + ).toLocaleDateString("en-GB", { timeZone: "UTC", month: "short", // day: "numeric", @@ -2297,7 +2285,7 @@ export default function ChainChart({ {zoomed && zoomMax !== null && (
{new Date(zoomMax).toLocaleDateString( - undefined, + "en-GB", { timeZone: "UTC", month: "short", @@ -2311,7 +2299,7 @@ export default function ChainChart({
{new Date( timespans[selectedTimespan].xMax, - ).toLocaleDateString(undefined, { + ).toLocaleDateString("en-GB", { timeZone: "UTC", month: "short", // day: "numeric", diff --git a/components/layout/ComparisonChart.tsx b/components/layout/ComparisonChart.tsx index 6ec199c4..fe247e6f 100644 --- a/components/layout/ComparisonChart.tsx +++ b/components/layout/ComparisonChart.tsx @@ -100,7 +100,7 @@ const baseOptions: Highcharts.Options = { // if (isYearStart) { // return `${date.getFullYear()}`; // } else { - // return `${date.toLocaleDateString(undefined, { + // return `${date.toLocaleDateString("en-GB", { // timeZone: "UTC", // month: "short", // })}`; @@ -307,10 +307,10 @@ export default function ComparisonChart({ const getSeriesType = useCallback( (name: string) => { - if (name === "ethereum") { // show column chart for ethereum if monthly and stacked - if (selectedTimeInterval === "monthly" && selectedScale === "stacked") return "column"; + if (selectedTimeInterval === "monthly" && selectedScale === "stacked") + return "column"; // else show area return "area"; } @@ -436,7 +436,7 @@ export default function ComparisonChart({ function (this: any) { const { x, points } = this; const date = new Date(x); - const dateString = date.toLocaleDateString(undefined, { + const dateString = date.toLocaleDateString("en-GB", { timeZone: "UTC", month: "short", day: selectedTimeInterval === "daily" ? "numeric" : undefined, @@ -481,14 +481,16 @@ export default function ComparisonChart({ if (selectedScale === "percentage") return `
-
-
${AllChainsByKeys[name].label - }
+
+
${ + AllChainsByKeys[name].label + }
${Highcharts.numberFormat( - percentage, - 2, - )}%
+ percentage, + 2, + )}%
@@ -497,8 +499,9 @@ export default function ComparisonChart({
`; @@ -519,28 +522,33 @@ export default function ComparisonChart({ return `
-
-
${AllChainsByKeys[name].label +
${ + AllChainsByKeys[name].label }
-
${prefix}
- ${metric_id === "fdv" || metric_id === "market_cap" - ? shortenNumber(value).toString() - : parseFloat(value).toLocaleString(undefined, { - minimumFractionDigits: valuePrefix ? 2 : 0, - maximumFractionDigits: valuePrefix - ? metric_id === "txcosts" - ? 3 - : 2 - : metric_id === "throughput" - ? 2 - : 0, - }) - } -
${suffix}
+
${prefix}
+ ${ + metric_id === "fdv" || metric_id === "market_cap" + ? shortenNumber(value).toString() + : parseFloat(value).toLocaleString("en-GB", { + minimumFractionDigits: valuePrefix ? 2 : 0, + maximumFractionDigits: valuePrefix + ? metric_id === "txcosts" + ? 3 + : 2 + : metric_id === "throughput" + ? 2 + : 0, + }) + } +
${suffix}
@@ -549,8 +557,9 @@ export default function ComparisonChart({
`; }) @@ -571,18 +580,20 @@ export default function ComparisonChart({
Total
-
${prefix}
- ${parseFloat(value).toLocaleString(undefined, { - minimumFractionDigits: valuePrefix ? 2 : 0, - maximumFractionDigits: valuePrefix - ? 2 - : metric_id === "throughput" - ? 2 - : 0, - })} -
${suffix}
+
${prefix}
+ ${parseFloat(value).toLocaleString("en-GB", { + minimumFractionDigits: valuePrefix ? 2 : 0, + maximumFractionDigits: valuePrefix + ? 2 + : metric_id === "throughput" + ? 2 + : 0, + })} +
${suffix}
@@ -729,9 +740,9 @@ export default function ComparisonChart({ filteredData[0].name === "" ? Date.now() - (365 + 1) * 24 * 60 * 60 * 1000 : filteredData.reduce( - (min, d) => Math.min(min, d.data[0][0]), - Infinity, - ) - buffer, + (min, d) => Math.min(min, d.data[0][0]), + Infinity, + ) - buffer, xMax: maxPlusBuffer, }, @@ -743,9 +754,9 @@ export default function ComparisonChart({ filteredData[0].name === "" ? Date.now() - (365 + 1) * 24 * 60 * 60 * 1000 : filteredData.reduce( - (min, d) => Math.min(min, d.data[0][0]), - Infinity, - ) - buffer, + (min, d) => Math.min(min, d.data[0][0]), + Infinity, + ) - buffer, xMax: maxPlusBuffer, }, @@ -1292,12 +1303,12 @@ export default function ComparisonChart({ formatter: function (this: AxisLabelsFormatterContextObject) { // if Jan 1st, show year if (new Date(this.value).getUTCMonth() === 0) { - return new Date(this.value).toLocaleDateString(undefined, { + return new Date(this.value).toLocaleDateString("en-GB", { timeZone: "UTC", year: "numeric", }); } - return new Date(this.value).toLocaleDateString(undefined, { + return new Date(this.value).toLocaleDateString("en-GB", { timeZone: "UTC", month: isMobile ? "short" : "short", year: "numeric", @@ -1394,38 +1405,38 @@ export default function ComparisonChart({ ...// @ts-ignore (["area", "line"].includes(getSeriesType(series.name)) ? { - shadow: { - color: - AllChainsByKeys[series.name]?.colors[theme ?? "dark"][1] + - "FF", - width: 10, - }, - // color: { - // linearGradient: { - // x1: 0, - // y1: 0, - // x2: 1, - // y2: 0, - // }, - // stops: [ - // [ - // 0, - // AllChainsByKeys[series.name]?.colors[ - // theme ?? "dark" - // ][0], - // ], - // // [0.33, AllChainsByKeys[series.name].colors[1]], - // [ - // 1, - // AllChainsByKeys[series.name]?.colors[ - // theme ?? "dark" - // ][1], - // ], - // ], - // }, - } + shadow: { + color: + AllChainsByKeys[series.name]?.colors[theme ?? "dark"][1] + + "FF", + width: 10, + }, + // color: { + // linearGradient: { + // x1: 0, + // y1: 0, + // x2: 1, + // y2: 0, + // }, + // stops: [ + // [ + // 0, + // AllChainsByKeys[series.name]?.colors[ + // theme ?? "dark" + // ][0], + // ], + // // [0.33, AllChainsByKeys[series.name].colors[1]], + // [ + // 1, + // AllChainsByKeys[series.name]?.colors[ + // theme ?? "dark" + // ][1], + // ], + // ], + // }, + } : series.name === "all_l2s" - ? { + ? { borderColor: "transparent", shadow: "none", // shadow: { @@ -1478,7 +1489,7 @@ export default function ComparisonChart({ // ], // }, } - : { + : { borderColor: "transparent", shadow: "none", // shadow: { @@ -1651,8 +1662,8 @@ export default function ComparisonChart({ monthly_agg && selectedTimeInterval === "monthly" ? monthly_agg : rolling_avg - ? "average" - : "sum"; + ? "average" + : "sum"; if (selectedTimeInterval === "monthly") { return `Monthly ${monthly_agg_labels[aggregation]}`; @@ -1742,10 +1753,11 @@ export default function ComparisonChart({ Selected Chains */}