feat: start line for CU chart on revenue mode

Author: asuzuki-jumptrading

src/colors.ts

@@ -86,6 +86,7 @@ export const computeUnitsColor = "#D19DFF";
 export const feesColor = "#4CCCE6";
 export const tipsColor = "#1FD8A4";
 export const elapsedTimeColor = "#6A6A6E";
+export const revenueStartLineColor = "#FFFFFF";
 
 // transaction bars
 export const successToggleColor = "#30A46C";

src/features/Overview/SlotPerformance/ComputeUnitsCard/CuChart.tsx

@@ -5,9 +5,10 @@ import UplotReact from "../../../../uplotReact/UplotReact";
 import uPlot from "uplot";
 import { lamportsPerSol } from "../../../../consts";
 import styles from "./../TransactionBarsCard/barsChart.module.css";
-import { useSetAtom } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 import { timeScaleDragPlugin } from "../TransactionBarsCard/scaleDragPlugin";
 import { cuRefAreaPlugin } from "./cuRefAreaPlugin";
+import { revenueStartLinePlugin } from "./revenueStartLinePlugin";
 import {
   bankScaleKey,
   computeUnitsScaleKey,
@@ -35,6 +36,8 @@ import {
   feesColor,
   tipsColor,
 } from "../../../../colors";
+import { scheduleStrategyAtom } from "../../../../api/atoms";
+import { ScheduleStrategyEnum } from "../../../../api/entities";
 
 function getChartData(transactions: SlotTransactions) {
   const events = [
@@ -146,6 +149,8 @@ export default function CuChart({
   bankTileCount,
   onCreate,
 }: CuChartProps) {
+  const scheduleStrategy = useAtomValue(scheduleStrategyAtom);
+
   const setTooltipData = useSetAtom(cuChartTooltipDataAtom);
   const setLeftAxisSize = useSetAtom(leftAxisSizeAtom);
   const setRightAxisSize = useSetAtom(rightAxisSizeAtom);
@@ -368,6 +373,9 @@ export default function CuChart({
           maxComputeUnitsRef,
           bankTileCountRef,
         }),
+        ...(scheduleStrategy === ScheduleStrategyEnum.revenue
+          ? [revenueStartLinePlugin()]
+          : []),
         timeScaleDragPlugin(),
         wheelZoomPlugin({ factor: 0.75 }),
         cuTooltipPlugin(setTooltipData),
@@ -377,13 +385,14 @@ export default function CuChart({
       ],
     };
   }, [
-    isFullCuRange,
     maxBankCount,
-    maxComputeUnits,
     maxLamports,
+    scheduleStrategy,
+    setTooltipData,
+    isFullCuRange,
+    maxComputeUnits,
     setLeftAxisSize,
     setRightAxisSize,
-    setTooltipData,
   ]);
 
   return (

src/features/Overview/SlotPerformance/ComputeUnitsCard/revenueStartLinePlugin.ts

@@ -0,0 +1,69 @@
+import uPlot from "uplot";
+
+import { xScaleKey } from "./consts";
+import { revenueStartLineColor } from "../../../../colors";
+import { round } from "lodash";
+
+const revenueLineNs = 350_000_000;
+const textPadding = 2;
+
+let font = "bold 12px Inter Tight";
+
+function recalcDppxVars() {
+  font = `bold ${round(12 * uPlot.pxRatio)}px Inter Tight`;
+}
+
+export function revenueStartLinePlugin(): uPlot.Plugin {
+  return {
+    hooks: {
+      init: () => {
+        window.addEventListener("dppxchange", recalcDppxVars);
+      },
+      destroy: () => {
+        window.removeEventListener("dppxchange", recalcDppxVars);
+      },
+      drawSeries: [
+        (u, sid) => {
+          // to draw the ref area above bank lines, but below other series
+          if (u.series[sid].label !== "Active Bank") return;
+
+          const ctx = u.ctx;
+
+          ctx.save();
+
+          const xScale = u.scales[xScaleKey];
+          const x = Math.round(u.valToPos(revenueLineNs, xScaleKey, true));
+
+          // ignore if outside bounds
+          if (
+            (xScale.min !== undefined && revenueLineNs < xScale.min) ||
+            (xScale.max !== undefined && revenueLineNs > xScale.max)
+          ) {
+            return;
+          }
+
+          recalcDppxVars();
+          ctx.font = font;
+
+          ctx.beginPath();
+
+          ctx.fillStyle = revenueStartLineColor;
+          ctx.textAlign = "center";
+          ctx.textBaseline = "bottom";
+
+          ctx.fillText("Start", x, u.bbox.top - textPadding * uPlot.pxRatio);
+
+          ctx.strokeStyle = revenueStartLineColor;
+          ctx.lineWidth = 5 / uPlot.pxRatio;
+          ctx.setLineDash([5, 5]);
+
+          ctx.moveTo(x, u.bbox.top);
+          ctx.lineTo(x, u.bbox.top + u.bbox.height);
+          ctx.stroke();
+
+          ctx.restore();
+        },
+      ],
+    },
+  };
+}