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({ {" "}