From cabfcfd4220eb4967670aa147f9a22b24c78c3ea Mon Sep 17 00:00:00 2001 From: Manish Gupta Date: Sun, 15 Sep 2024 12:26:47 +0200 Subject: [PATCH 1/3] economics - chart styling updates - moved revenue in front of costs, added percentage border radius to columns --- .../layout/Economics/BreakdownCharts.tsx | 67 ++++++++++--------- 1 file changed, 35 insertions(+), 32 deletions(-) diff --git a/components/layout/Economics/BreakdownCharts.tsx b/components/layout/Economics/BreakdownCharts.tsx index 6d6ed62c..be057159 100644 --- a/components/layout/Economics/BreakdownCharts.tsx +++ b/components/layout/Economics/BreakdownCharts.tsx @@ -614,14 +614,6 @@ function BreakdownCharts({ type: "x", }} panKey="shift" - - // zooming={{ - // type: "x", - // mouseWheel: { - // enabled: false, - // type: "xy", - // }, - // }} zooming={{ mouseWheel: { enabled: false, @@ -767,12 +759,15 @@ function BreakdownCharts({ }, }} > + + + {/* Second line */} [ + name="Costs" + color={"#FE5468"} + data={dailyData.costs.data.map((d: any) => [ d[0], - d[dailyData.revenue.types.indexOf(showUsd ? "usd" : "eth")], + d[dailyData.costs.types.indexOf(showUsd ? "usd" : "eth")], ])} dataGrouping={{ enabled: true, @@ -787,20 +782,33 @@ function BreakdownCharts({ y2: 1, }, stops: [ - [0, "#10808CDD"], - [0.5, "#10808CDD"], - [1, "#1DF7EFDD"], + [0.33, "#98323E"], + [1, "#FE5468"], + // [0, "#98323EDD"], + // [0.5, "#98323EDD"], + // [1, "#FE5468DD"], ], }} /> + {/* - {/* Second line */} + position: absolute; + width: 1182px; + height: 207px; + left: 0px; + top: 42px; + + background: linear-gradient(180deg, #10808C 0%, #1DF7EF 100%); + opacity: 0.5; + border-radius: 3px; + + */} [ + name="Revenue" + color={"#1DF7EF"} + data={dailyData.revenue.data.map((d: any) => [ d[0], - d[dailyData.costs.types.indexOf(showUsd ? "usd" : "eth")], + d[dailyData.revenue.types.indexOf(showUsd ? "usd" : "eth")], ])} dataGrouping={{ enabled: true, @@ -814,14 +822,16 @@ function BreakdownCharts({ x2: 0, y2: 1, }, + /* 50% in hex: 80 */ stops: [ - [0, "#98323EDD"], - [0.5, "#98323EDD"], - [1, "#FE5468DD"], + [0.33, "#10808C80"], + [1, "#1DF7EF80"], + // [0, "#10808CDD"], + // [0.5, "#10808CDD"], + // [1, "#1DF7EFDD"], ], }} /> - {/* Area between the lines */} @@ -884,13 +894,6 @@ function BreakdownCharts({ type: "x", }} panKey="shift" - // zooming={{ - // type: "x", - // mouseWheel: { - // enabled: false, - // type: "xy", - // }, - // }} zooming={{ mouseWheel: { enabled: false, @@ -1065,6 +1068,7 @@ function BreakdownCharts({ {" "} Date: Sun, 15 Sep 2024 18:20:04 +0200 Subject: [PATCH 2/3] economics - xaxis styling, reverted area chart ordering, landing - zoom ui --- .../layout/Economics/BreakdownCharts.tsx | 240 ++++-- .../layout/Economics/ChainBreakdown.tsx | 692 +++++++++--------- components/layout/LandingChart.tsx | 23 +- 3 files changed, 524 insertions(+), 431 deletions(-) diff --git a/components/layout/Economics/BreakdownCharts.tsx b/components/layout/Economics/BreakdownCharts.tsx index be057159..824df00d 100644 --- a/components/layout/Economics/BreakdownCharts.tsx +++ b/components/layout/Economics/BreakdownCharts.tsx @@ -610,7 +610,7 @@ function BreakdownCharts({ backgroundColor={"transparent"} type="line" panning={{ - enabled: true, + enabled: false, type: "x", }} panKey="shift" @@ -685,21 +685,19 @@ function BreakdownCharts({ }} tickmarkPlacement="on" zoomEnabled={false} + // startOnTick={true} + // endOnTick={true} tickWidth={0} tickLength={20} - ordinal={true} + // ordinal={true} minorTicks={false} minorTickLength={2} minorTickWidth={2} minorGridLineWidth={0} minorTickInterval={1000 * 60 * 60 * 24 * 1} - min={ - timespans[selectedTimespan].xMin - ? newestUnixTimestamp - - 1000 * 60 * 60 * 24 * timespans[selectedTimespan].value - : undefined - } - panningEnabled={true} + min={timespans[selectedTimespan].xMin} + max={timespans[selectedTimespan].xMax} + // panningEnabled={true} > X Axis @@ -760,14 +758,12 @@ function BreakdownCharts({ }} > - - {/* Second line */} [ + name="Revenue" + color={"#1DF7EF"} + data={dailyData.revenue.data.map((d: any) => [ d[0], - d[dailyData.costs.types.indexOf(showUsd ? "usd" : "eth")], + d[dailyData.revenue.types.indexOf(showUsd ? "usd" : "eth")], ])} dataGrouping={{ enabled: true, @@ -781,34 +777,24 @@ function BreakdownCharts({ x2: 0, y2: 1, }, + stops: [ - [0.33, "#98323E"], - [1, "#FE5468"], - // [0, "#98323EDD"], - // [0.5, "#98323EDD"], - // [1, "#FE5468DD"], + /* 50% in hex: 80 */ + // [0.33, "#10808C80"], + // [1, "#1DF7EF80"], + [0, "#10808CDD"], + [0.5, "#10808CDD"], + [1, "#1DF7EFDD"], ], }} /> - {/* - - position: absolute; - width: 1182px; - height: 207px; - left: 0px; - top: 42px; - - background: linear-gradient(180deg, #10808C 0%, #1DF7EF 100%); - opacity: 0.5; - border-radius: 3px; - - */} + {/* Second line */} [ + name="Costs" + color={"#FE5468"} + data={dailyData.costs.data.map((d: any) => [ d[0], - d[dailyData.revenue.types.indexOf(showUsd ? "usd" : "eth")], + d[dailyData.costs.types.indexOf(showUsd ? "usd" : "eth")], ])} dataGrouping={{ enabled: true, @@ -822,16 +808,30 @@ function BreakdownCharts({ x2: 0, y2: 1, }, - /* 50% in hex: 80 */ stops: [ - [0.33, "#10808C80"], - [1, "#1DF7EF80"], - // [0, "#10808CDD"], - // [0.5, "#10808CDD"], - // [1, "#1DF7EFDD"], + /* 50% in hex: 80 */ + // [0.33, "#98323E80"], + // [1, "#FE546880"], + [0, "#98323EDD"], + [0.5, "#98323EDD"], + [1, "#FE5468DD"], ], }} /> + {/* + + position: absolute; + width: 1182px; + height: 207px; + left: 0px; + top: 42px; + + background: linear-gradient(180deg, #10808C 0%, #1DF7EF 100%); + opacity: 0.5; + border-radius: 3px; + + */} + {/* Area between the lines */} @@ -890,7 +890,7 @@ function BreakdownCharts({ backgroundColor={"transparent"} type="column" panning={{ - enabled: true, + enabled: false, type: "x", }} panKey="shift" @@ -955,38 +955,123 @@ function BreakdownCharts({ title={undefined} type="datetime" labels={{ + align: undefined, + rotation: 0, + // allowOverlap: false, + // staggerLines: 1, + // reserveSpace: true, + overflow: "justify", useHTML: true, + distance: -14, style: { color: COLORS.LABEL, fontSize: "10px", + fontWeight: "550", + fontVariant: "small-caps", + textTransform: "lowercase", fontFamily: "var(--font-raleway), sans-serif", + // fontVariant: "all-small-caps", zIndex: 1000, }, enabled: true, - formatter: function () { - // Convert Unix timestamp to milliseconds - const date = new Date(this.value); - // Format the date as needed (e.g., "dd MMM yyyy") - const dateString = date - .toLocaleDateString("en-GB", { - day: !( - timespans[selectedTimespan].value >= 90 || - selectedTimespan === "max" - ) - ? "2-digit" - : undefined, - month: "short", - year: - timespans[selectedTimespan].value >= 90 || - selectedTimespan === "max" - ? "numeric" - : undefined, - }) - .toUpperCase(); - - return `${dateString}`; - }, + // formatter: function () { + // // Convert Unix timestamp to milliseconds + // const date = new Date(this.value); + // // Format the date as needed (e.g., "dd MMM yyyy") + // const dateString = date + // .toLocaleDateString("en-GB", { + // day: !( + // timespans[selectedTimespan].value >= 90 || + // selectedTimespan === "max" + // ) + // ? "2-digit" + // : undefined, + // month: "short", + // year: + // timespans[selectedTimespan].value >= 90 || + // selectedTimespan === "max" + // ? "numeric" + // : undefined, + // }); + + // const monthString = date.toLocaleDateString("en-GB", { + // month: "long", + // }); + + // const dateNumString = date.toLocaleDateString("en-GB", { + // day: !( + // timespans[selectedTimespan].value >= 90 || + // selectedTimespan === "max" + // ) + // ? "2-digit" + // : undefined, + // year: + // timespans[selectedTimespan].value >= 90 || + // selectedTimespan === "max" + // ? "numeric" + // : undefined, + // }); + + + // return `${monthString} ${dateNumString}`; + // }, + // }} + formatter: (function () { + return function () { + let str = ""; + if ( + timespans[selectedTimespan].xMax - + timespans[selectedTimespan].xMin <= + 90 * 24 * 3600 * 1000 + ) { + let isBeginningOfWeek = + new Date(this.value).getUTCDay() === 1; + let showMonth = + this.isFirst || + new Date(this.value).getUTCDate() === 1; + str = 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) { + // str = ` + // ${new Date(this.value).toLocaleDateString("en-GB", { + // timeZone: "UTC", + // year: "numeric", + // })} + // `; + str = ` + ${new Date(this.value).toLocaleDateString("en-GB", { + timeZone: "UTC", + year: "numeric", + })} + `; + } + str = new Date(this.value).toLocaleDateString( + "en-GB", + { + timeZone: "UTC", + month: "short", + year: "numeric", + }, + ); + } + return str; + // let align = "center"; + // if (this.isFirst) align = "left"; + // if (this.isLast) align = "right"; + + // return `${str}`; + }; + })(), }} crosshair={{ width: 0.5, @@ -994,22 +1079,22 @@ function BreakdownCharts({ snap: false, }} zoomEnabled={false} + lineWidth={0} + offset={24} + // startOnTick={true} + // endOnTick={true} tickAmount={0} - tickLength={20} - tickWidth={0} - ordinal={true} + tickLength={5} + tickWidth={1} + // ordinal={true} minorTicks={false} minorTickLength={2} minorTickWidth={2} minorGridLineWidth={0} minorTickInterval={1000 * 60 * 60 * 24 * 1} - min={ - timespans[selectedTimespan].xMin - ? newestUnixTimestamp - - 1000 * 60 * 60 * 24 * timespans[selectedTimespan].value - : undefined - } - panningEnabled={true} + min={timespans[selectedTimespan].xMin} + max={timespans[selectedTimespan].xMax} + // panningEnabled={true} > @@ -1028,6 +1113,7 @@ function BreakdownCharts({ tickAmount={3} min={profitMinMaxValues.min} max={profitMinMaxValues.max} + labels={{ align: "right", y: 2, diff --git a/components/layout/Economics/ChainBreakdown.tsx b/components/layout/Economics/ChainBreakdown.tsx index ad57c4df..3c8c8361 100644 --- a/components/layout/Economics/ChainBreakdown.tsx +++ b/components/layout/Economics/ChainBreakdown.tsx @@ -32,6 +32,14 @@ import { TooltipTrigger, } from "@/components/layout/Tooltip"; import { useMaster } from "@/contexts/MasterContext"; + +const regularMetrics = [ + "profit", + "revenue", + "costs", + "size", + "profit_margin", +]; interface DAvailability { icon: string; label: string; @@ -146,8 +154,33 @@ export default function ChainBreakdown({ } }; + const dataTimestampExtremes = useMemo(() => { + let xMin = Infinity; + let xMax = -Infinity; + + Object.keys(data).forEach((chain) => { + regularMetrics.forEach((metric) => { + if (!data[chain].daily[metric]) return; + const min = data[chain].daily[metric].data[0][0]; + const max = + data[chain].daily[metric].data[ + data[chain].daily[metric].data.length - 1 + ][0]; + + xMin = Math.min(min, xMin); + xMax = Math.max(max, xMax); + + }); + }); + + return { xMin, xMax }; + }, [data]); + //Handles opening of each chain section const timespans = useMemo(() => { + let xMin = dataTimestampExtremes.xMin; + let xMax = dataTimestampExtremes.xMax; + if (!isMonthly) { return { "1d": { @@ -159,36 +192,37 @@ export default function ChainBreakdown({ shortLabel: "7d", label: "7 days", value: 7, - xMin: Date.now() - 7 * 24 * 60 * 60 * 1000, - xMax: Date.now(), + xMin: xMax - 7 * 24 * 60 * 60 * 1000, + xMax: xMax, }, "30d": { shortLabel: "30d", label: "30 days", value: 30, - xMin: Date.now() - 30 * 24 * 60 * 60 * 1000, - xMax: Date.now(), + xMin: xMax - 30 * 24 * 60 * 60 * 1000, + xMax: xMax, }, "90d": { shortLabel: "90d", label: "90 days", value: 90, - xMin: Date.now() - 90 * 24 * 60 * 60 * 1000, - xMax: Date.now(), + xMin: xMax - 90 * 24 * 60 * 60 * 1000, + xMax: xMax, }, "365d": { shortLabel: "1y", label: "1 year", value: 365, - xMin: Date.now() - 365 * 24 * 60 * 60 * 1000, - xMax: Date.now(), + xMin: xMax - 365 * 24 * 60 * 60 * 1000, + xMax: xMax, }, max: { shortLabel: "Max", label: "Max", value: 0, - xMax: Date.now(), + xMin: xMin, + xMax: xMax, }, }; } else { @@ -197,26 +231,27 @@ export default function ChainBreakdown({ shortLabel: "6m", label: "6 months", value: 90, - xMin: Date.now() - 180 * 24 * 60 * 60 * 1000, - xMax: Date.now(), + xMin: xMax - 180 * 24 * 60 * 60 * 1000, + xMax: xMax, }, "365d": { shortLabel: "1y", label: "1 year", value: 365, - xMin: Date.now() - 365 * 24 * 60 * 60 * 1000, - xMax: Date.now(), + xMin: xMax - 365 * 24 * 60 * 60 * 1000, + xMax: xMax, }, max: { shortLabel: "Max", label: "Max", value: 0, - xMax: Date.now(), + xMin: xMin, + xMax: xMax, }, }; } - }, [isMonthly]); + }, [dataTimestampExtremes.xMax, dataTimestampExtremes.xMin, isMonthly]); const totalRevenue = useMemo(() => { let retValue = 0; @@ -304,21 +339,15 @@ export default function ChainBreakdown({ const sortedChainData = useMemo(() => { let retData: string[]; if (metricSort !== "chain") { - const regularMetrics = [ - "profit", - "revenue", - "costs", - "size", - "profit_margin", - ]; + if (regularMetrics.includes(metricSort)) { retData = Object.keys(data).sort((a, b) => { const dataIndex = metricSort === "profit_margin" || metricSort === "size" ? 0 : data[a][selectedTimespan].revenue.types.indexOf( - showUsd ? "usd" : "eth", - ); + showUsd ? "usd" : "eth", + ); const aComp = data[a][selectedTimespan][metricSort].total[dataIndex]; const bComp = data[b][selectedTimespan][metricSort].total[dataIndex]; @@ -438,8 +467,8 @@ export default function ChainBreakdown({ (metric === "chain" ? " border-l-[1px] rounded-l-full" : metric === "size" - ? " border-r-[1px] rounded-r-full" - : "") + ? " border-r-[1px] rounded-r-full" + : "") ); } //"border-[#CDD8D3] bg-forest-950 border-r-[#5A6462]" @@ -460,6 +489,8 @@ export default function ChainBreakdown({ return (
+
xMax {new Date(timespans[selectedTimespan].xMax).toDateString()}
+
xMin {new Date(timespans[selectedTimespan].xMin).toDateString()}
{sortedChainData && (
@@ -551,11 +582,10 @@ export default function ChainBreakdown({ className="w-full flex flex-col " >
@@ -606,9 +635,8 @@ export default function ChainBreakdown({ { setDAIndex(0); setEnableDASort(false); @@ -640,14 +668,13 @@ export default function ChainBreakdown({ metricSort !== "revenue" ? "formkit:arrowdown" : sortOrder - ? "formkit:arrowdown" - : "formkit:arrowup" + ? "formkit:arrowdown" + : "formkit:arrowup" } - className={` w-[10px] h-[10px] ${ - metricSort === "revenue" - ? "text-forest-50 opacity-100" - : " opacity-50 group-hover:opacity-100 group-hover:text-forest-50" - } `} + className={` w-[10px] h-[10px] ${metricSort === "revenue" + ? "text-forest-50 opacity-100" + : " opacity-50 group-hover:opacity-100 group-hover:text-forest-50" + } `} />
@@ -691,14 +718,13 @@ export default function ChainBreakdown({ metricSort !== "costs" ? "formkit:arrowdown" : sortOrder - ? "formkit:arrowdown" - : "formkit:arrowup" + ? "formkit:arrowdown" + : "formkit:arrowup" } - className={` w-[10px] h-[10px] ${ - metricSort === "costs" - ? "text-forest-50 opacity-100" - : " opacity-50 group-hover:opacity-100 group-hover:text-forest-50" - } `} + className={` w-[10px] h-[10px] ${metricSort === "costs" + ? "text-forest-50 opacity-100" + : " opacity-50 group-hover:opacity-100 group-hover:text-forest-50" + } `} />
@@ -743,14 +769,13 @@ export default function ChainBreakdown({ metricSort !== "costs_l1" ? "formkit:arrowdown" : sortOrder - ? "formkit:arrowdown" - : "formkit:arrowup" + ? "formkit:arrowdown" + : "formkit:arrowup" } - className={` w-[10px] h-[10px] ${ - metricSort === "costs_l1" - ? "text-forest-50 opacity-100" - : " opacity-50 group-hover:opacity-100 group-hover:text-forest-50" - } `} + className={` w-[10px] h-[10px] ${metricSort === "costs_l1" + ? "text-forest-50 opacity-100" + : " opacity-50 group-hover:opacity-100 group-hover:text-forest-50" + } `} />
@@ -772,14 +797,13 @@ export default function ChainBreakdown({ metricSort !== "costs_blobs" ? "formkit:arrowdown" : sortOrder - ? "formkit:arrowdown" - : "formkit:arrowup" + ? "formkit:arrowdown" + : "formkit:arrowup" } - className={` w-[10px] h-[10px] ${ - metricSort === "costs_blobs" - ? "text-forest-50 opacity-100" - : " opacity-50 group-hover:opacity-100 group-hover:text-forest-50" - } `} + className={` w-[10px] h-[10px] ${metricSort === "costs_blobs" + ? "text-forest-50 opacity-100" + : " opacity-50 group-hover:opacity-100 group-hover:text-forest-50" + } `} /> @@ -807,14 +831,13 @@ export default function ChainBreakdown({ metricSort !== "profit" ? "formkit:arrowdown" : sortOrder - ? "formkit:arrowdown" - : "formkit:arrowup" + ? "formkit:arrowdown" + : "formkit:arrowup" } - className={` w-[10px] h-[10px] ${ - metricSort === "profit" - ? "text-forest-50 opacity-100" - : " opacity-50 group-hover:opacity-100 group-hover:text-forest-50" - } `} + className={` w-[10px] h-[10px] ${metricSort === "profit" + ? "text-forest-50 opacity-100" + : " opacity-50 group-hover:opacity-100 group-hover:text-forest-50" + } `} /> @@ -857,14 +880,13 @@ export default function ChainBreakdown({ metricSort !== "profit_margin" ? "formkit:arrowdown" : sortOrder - ? "formkit:arrowdown" - : "formkit:arrowup" + ? "formkit:arrowdown" + : "formkit:arrowup" } - className={` w-[10px] h-[10px] ${ - metricSort === "profit_margin" - ? "text-forest-50 opacity-100" - : " opacity-50 group-hover:opacity-100 group-hover:text-forest-50" - } `} + className={` w-[10px] h-[10px] ${metricSort === "profit_margin" + ? "text-forest-50 opacity-100" + : " opacity-50 group-hover:opacity-100 group-hover:text-forest-50" + } `} /> @@ -906,14 +928,13 @@ export default function ChainBreakdown({ metricSort !== "size" ? "formkit:arrowdown" : sortOrder - ? "formkit:arrowdown" - : "formkit:arrowup" + ? "formkit:arrowdown" + : "formkit:arrowup" } - className={` w-[10px] h-[10px] ${ - metricSort === "size" - ? "text-forest-50 opacity-100" - : " opacity-50 group-hover:opacity-100 group-hover:text-forest-50" - } `} + className={` w-[10px] h-[10px] ${metricSort === "size" + ? "text-forest-50 opacity-100" + : " opacity-50 group-hover:opacity-100 group-hover:text-forest-50" + } `} /> @@ -951,27 +972,24 @@ export default function ChainBreakdown({ return (
{ handleClick(e, item.key); e.stopPropagation(); @@ -991,9 +1009,8 @@ export default function ChainBreakdown({ }} > {formatNumber( data[item.key][selectedTimespan].revenue.total[ - dataIndex + dataIndex ], )}
- 0.01 + 0.01 ? (312 * - data[item.key][selectedTimespan].revenue - .total[dataIndex]) / - totalRevenue - : `${ - (2200 * - data[item.key][selectedTimespan].revenue - .total[dataIndex]) / - totalRevenue - }%`, + data[item.key][selectedTimespan].revenue + .total[dataIndex]) / + totalRevenue + : `${(2200 * + data[item.key][selectedTimespan].revenue + .total[dataIndex]) / + totalRevenue + }%`, minWidth: data[item.key][selectedTimespan].revenue.total[ dataIndex ] / totalRevenue > - 0.01 + 0.01 ? "22px" : `6px`, }} @@ -1104,7 +1118,7 @@ export default function ChainBreakdown({ > {formatNumber( data[item.key][selectedTimespan].costs.total[ - dataIndex + dataIndex ], )}
@@ -1125,7 +1139,7 @@ export default function ChainBreakdown({ .costs_l1[dataIndex] / data[item.key][selectedTimespan].costs .total[dataIndex]) * - 100, + 100, )} {"%"} @@ -1144,9 +1158,9 @@ export default function ChainBreakdown({ (data[item.key][selectedTimespan].costs .costs_blobs[dataIndex] / data[item.key][selectedTimespan].costs.total[ - dataIndex + dataIndex ]) * - 100, + 100, )} {"%"}
@@ -1155,47 +1169,43 @@ export default function ChainBreakdown({
0 - ? "flex-row" - : "flex-row-reverse pl-[15px]" - } ${columnBorder("profit", item.key)}`} + className={`flex items-center py-[6px] justify-center gap-x-[5px] px-[5px] bg-[#34424044] h-full relative ${data[item.key][selectedTimespan].profit.total[ + dataIndex + ] > 0 + ? "flex-row" + : "flex-row-reverse pl-[15px]" + } ${columnBorder("profit", item.key)}`} >
0 - ? "justify-end" - : "flex-start" - }`} + className={`min-w-[70px] max-w-[70px] flex ${data[item.key][selectedTimespan].profit.total[ + dataIndex + ] > 0 + ? "justify-end" + : "flex-start" + }`} >
{formatNumber( data[item.key][selectedTimespan].profit.total[ - dataIndex + dataIndex ], )}
0 - ? "border-l-[1px] justify-start " - : "border-r-[1px] justify-end" - }`} + className={`relative flex items-center px-[3px] h-full w-[70px] border-dashed border-forest-50 ${data[item.key][selectedTimespan].profit.total[ + dataIndex + ] > 0 + ? "border-l-[1px] justify-start " + : "border-r-[1px] justify-end" + }`} >
0 - ? "bg-[#EEFF97] rounded-r-2xl " - : "bg-[#FFDF27] rounded-l-2xl" - }`} + className={`h-[4px] ${data[item.key][selectedTimespan].profit.total[ + dataIndex + ] > 0 + ? "bg-[#EEFF97] rounded-r-2xl " + : "bg-[#FFDF27] rounded-l-2xl" + }`} style={{ width: `${( 65 * @@ -1246,29 +1254,27 @@ export default function ChainBreakdown({
+ className={`flex items-center py-[6px] justify-center gap-x-[5px] px-[5px] h-full relative ${(data[item.key][selectedTimespan].revenue.total[ + dataIndex + ] - + data[item.key][selectedTimespan].costs.total[ + dataIndex + ]) / + data[item.key][selectedTimespan].revenue.total[ + dataIndex + ] > 0 - ? "flex-row" - : "flex-row-reverse pl-[10px]" - } ${columnBorder("margin", item.key)}`} + ? "flex-row" + : "flex-row-reverse pl-[10px]" + } ${columnBorder("margin", item.key)}`} >
0 - ? "justify-end" - : "flex-start" - }`} + className={`min-w-[62px] max-w-[62px] text-[12px] font-semibold gap-x-[1px] flex items-center ${data[item.key][selectedTimespan].profit.total[ + dataIndex + ] > 0 + ? "justify-end" + : "flex-start" + }`} >
{"%"}
0 - ? "border-l-[1px] justify-start flex-row" - : "border-r-[1px] justify-start flex-row-reverse" - }`} + className={`relative flex items-center px-[3px] h-full w-[65px] border-dashed border-forest-50 ${data[item.key][selectedTimespan].profit.total[ + dataIndex + ] > 0 + ? "border-l-[1px] justify-start flex-row" + : "border-r-[1px] justify-start flex-row-reverse" + }`} >
+ className={`absolute h-[4px] bg-[#5A6462] w-[50px] z-0 ${(data[item.key][selectedTimespan].revenue.total[ + dataIndex + ] - + data[item.key][selectedTimespan].costs.total[ + dataIndex + ]) / + data[item.key][selectedTimespan].revenue.total[ + dataIndex + ] > 0 - ? "rounded-r-full" - : "rounded-l-full" - }`} + ? "rounded-r-full" + : "rounded-l-full" + }`} />
+ className={`h-[4px] z-10 ${(data[item.key][selectedTimespan].revenue.total[ + dataIndex + ] - + data[item.key][selectedTimespan].costs.total[ + dataIndex + ]) / + data[item.key][selectedTimespan].revenue.total[ + dataIndex + ] > 0 - ? "bg-[#45AA6F] rounded-r-2xl " - : "bg-[#FF8F27] rounded-l-2xl" - }`} + ? "bg-[#45AA6F] rounded-r-2xl " + : "bg-[#FF8F27] rounded-l-2xl" + }`} style={{ width: `${( (50 * @@ -1344,7 +1347,7 @@ export default function ChainBreakdown({ .total[dataIndex]) / data[item.key][selectedTimespan].revenue .total[dataIndex] > - 0 + 0 ? 1 : -1) * (data[item.key][selectedTimespan].revenue @@ -1352,7 +1355,7 @@ export default function ChainBreakdown({ data[item.key][selectedTimespan].costs .total[dataIndex])) / data[item.key][selectedTimespan].revenue.total[ - dataIndex + dataIndex ] ).toFixed(2)}px`, minWidth: "1px", @@ -1360,151 +1363,142 @@ export default function ChainBreakdown({ }} >
+ 0 + ? 1 + : -1) * + ((data[item.key][selectedTimespan].revenue + .total[dataIndex] - data[item.key][selectedTimespan].costs.total[ - dataIndex + dataIndex ]) / - data[item.key][selectedTimespan].revenue.total[ - dataIndex - ] > - 0 - ? 1 - : -1) * - ((data[item.key][selectedTimespan].revenue - .total[dataIndex] - - data[item.key][selectedTimespan].costs.total[ - dataIndex - ]) / - data[item.key][selectedTimespan].revenue - .total[dataIndex]) * - 100 > + data[item.key][selectedTimespan].revenue + .total[dataIndex]) * + 100 > 100 - ? "flex" - : "hidden" - }`} + ? "flex" + : "hidden" + }`} >
+ className={`h-[4px] w-[4px] z-10 absolute right-[-18px] ${(data[item.key][selectedTimespan].revenue.total[ + dataIndex + ] - + data[item.key][selectedTimespan].costs.total[ + dataIndex + ]) / + data[item.key][selectedTimespan].revenue + .total[dataIndex] > 0 - ? "hidden" - : "bg-[#5A6462] block" - }`} + ? "hidden" + : "bg-[#5A6462] block" + }`} >
+ className={`h-[4px] w-[4px] z-10 absolute right-[-14px] ${(data[item.key][selectedTimespan].revenue.total[ + dataIndex + ] - + data[item.key][selectedTimespan].costs.total[ + dataIndex + ]) / + data[item.key][selectedTimespan].revenue + .total[dataIndex] > 0 - ? "hidden" - : "bg-[#FF8F27] block" - }`} + ? "hidden" + : "bg-[#FF8F27] block" + }`} >
+ className={`h-[4px] w-[3px] z-10 absolute right-[-11px] ${(data[item.key][selectedTimespan].revenue.total[ + dataIndex + ] - + data[item.key][selectedTimespan].costs.total[ + dataIndex + ]) / + data[item.key][selectedTimespan].revenue + .total[dataIndex] > 0 - ? "hidden" - : "bg-[#5A6462] block" - }`} + ? "hidden" + : "bg-[#5A6462] block" + }`} >
+ className={`h-[4px] w-[3px] z-10 absolute right-[-8px] ${(data[item.key][selectedTimespan].revenue.total[ + dataIndex + ] - + data[item.key][selectedTimespan].costs.total[ + dataIndex + ]) / + data[item.key][selectedTimespan].revenue + .total[dataIndex] > 0 - ? "hidden" - : "bg-[#FF8F27] block" - }`} + ? "hidden" + : "bg-[#FF8F27] block" + }`} >
+ className={`h-[4px] w-[2px] z-10 absolute right-[-5px] ${(data[item.key][selectedTimespan].revenue.total[ + dataIndex + ] - + data[item.key][selectedTimespan].costs.total[ + dataIndex + ]) / + data[item.key][selectedTimespan].revenue + .total[dataIndex] > 0 - ? "hidden" - : "bg-[#5A6462] block" - }`} + ? "hidden" + : "bg-[#5A6462] block" + }`} >
+ className={`h-[4px] w-[2px] z-10 absolute right-[-3px] ${(data[item.key][selectedTimespan].revenue.total[ + dataIndex + ] - + data[item.key][selectedTimespan].costs.total[ + dataIndex + ]) / + data[item.key][selectedTimespan].revenue + .total[dataIndex] > 0 - ? "hidden" - : "bg-[#FF8F27] block" - }`} + ? "hidden" + : "bg-[#FF8F27] block" + }`} >
+ className={`h-[4px] w-[1px] z-10 absolute right-[-2px] ${(data[item.key][selectedTimespan].revenue.total[ + dataIndex + ] - + data[item.key][selectedTimespan].costs.total[ + dataIndex + ]) / + data[item.key][selectedTimespan].revenue + .total[dataIndex] > 0 - ? "hidden" - : "bg-[#5A6462] block" - }`} + ? "hidden" + : "bg-[#5A6462] block" + }`} >
+ className={`h-[4px] w-[1px] z-10 absolute right-[-1px] ${(data[item.key][selectedTimespan].revenue.total[ + dataIndex + ] - + data[item.key][selectedTimespan].costs.total[ + dataIndex + ]) / + data[item.key][selectedTimespan].revenue + .total[dataIndex] > 0 - ? "hidden" - : "bg-[#FF8F27] block" - }`} + ? "hidden" + : "bg-[#FF8F27] block" + }`} >
@@ -1518,11 +1512,10 @@ export default function ChainBreakdown({ > {/*border-[#5A6462] */}
{ + // on hover, show the /cursors/zoom.svg cursor + Highcharts.wrap(Highcharts.Pointer.prototype, "reset", function (p) { + this.chart.container.style.cursor = "url(/cursors/zoom.svg) 14.5 14.5, auto"; + p.call(this); + }); + + // on drag start Highcharts.wrap(Highcharts.Pointer.prototype, "dragStart", function (p, e) { + // invisible cursor + this.chart.container.style.cursor = "none"; + // place vertical dotted line on click if (this.chart.series.length > 0) { const x = e.chartX; @@ -379,6 +389,8 @@ export default function LandingChart({ }); Highcharts.wrap(Highcharts.Pointer.prototype, "drag", function (p, e) { + // invisible cursor + this.chart.container.style.cursor = "none"; setIsDragging(true); // update vertical dotted line on drag @@ -516,6 +528,8 @@ export default function LandingChart({ }); Highcharts.wrap(Highcharts.Pointer.prototype, "drop", function (p, e) { + // set cursor back to default + this.chart.container.style.cursor = "url(/cursors/zoom.svg) 14.5 14.5, auto"; setIsDragging(false); const elements = [ @@ -560,7 +574,7 @@ export default function LandingChart({ highchartsRoundedCorners(Highcharts); highchartsAnnotations(Highcharts); - // loadHighchartsWrappers(); + loadHighchartsWrappers(); // update x-axis label sizes if it is a 4 digit number Highcharts.wrap( @@ -1889,7 +1903,7 @@ export default function LandingChart({ ) : ( <> @@ -1921,6 +1935,7 @@ export default function LandingChart({ > {highchartsLoaded ? ( Date: Mon, 16 Sep 2024 10:25:26 +0200 Subject: [PATCH 3/3] remove debugs --- components/layout/Economics/ChainBreakdown.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/layout/Economics/ChainBreakdown.tsx b/components/layout/Economics/ChainBreakdown.tsx index 3c8c8361..dc0eef05 100644 --- a/components/layout/Economics/ChainBreakdown.tsx +++ b/components/layout/Economics/ChainBreakdown.tsx @@ -334,7 +334,7 @@ export default function ChainBreakdown({
); } - console.log(data ? data : ""); + // console.log(data ? data : ""); const sortedChainData = useMemo(() => { let retData: string[]; @@ -489,8 +489,8 @@ export default function ChainBreakdown({ return (
-
xMax {new Date(timespans[selectedTimespan].xMax).toDateString()}
-
xMin {new Date(timespans[selectedTimespan].xMin).toDateString()}
+ {/*
xMax {new Date(timespans[selectedTimespan].xMax).toDateString()}
+
xMin {new Date(timespans[selectedTimespan].xMin).toDateString()}
*/} {sortedChainData && (