From b1aedf046610d01f31af69ecde9974e25708af9f Mon Sep 17 00:00:00 2001 From: Andrew Davis <1709934+Savid@users.noreply.github.com> Date: Mon, 19 Jan 2026 11:03:44 +1000 Subject: [PATCH] feat: simplify fork markline labels with vertical text at top of line MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Position labels at top of markline with vertical rotation (-90°) - Ensure all fork names are uppercase - Remove smart alignment logic in favor of simple positioning - Disable markline animations - Add offset for label spacing from line --- src/components/Charts/MultiLine/MultiLine.tsx | 4 ++++ .../Charts/MultiLine/MultiLine.types.ts | 21 +++++++++++++++- src/components/Charts/MultiLine/utils.ts | 10 ++++---- .../ethereum/execution/overview/IndexPage.tsx | 24 ++++++++++++------- 4 files changed, 45 insertions(+), 14 deletions(-) diff --git a/src/components/Charts/MultiLine/MultiLine.tsx b/src/components/Charts/MultiLine/MultiLine.tsx index 3aa89a30d..6f663e083 100644 --- a/src/components/Charts/MultiLine/MultiLine.tsx +++ b/src/components/Charts/MultiLine/MultiLine.tsx @@ -595,12 +595,16 @@ export function MultiLineChart({ markLine: { silent: true, symbol: 'none', + animation: false, data: markLines.map(ml => ({ xAxis: ml.xValue, label: { show: !!ml.label, formatter: ml.label ?? '', position: ml.labelPosition ?? 'end', + rotate: -90, + align: 'left', + offset: [0, -2], color: ml.color ?? themeColors.muted, fontSize: 11, backgroundColor: themeColors.surface, diff --git a/src/components/Charts/MultiLine/MultiLine.types.ts b/src/components/Charts/MultiLine/MultiLine.types.ts index ed30ec969..b46ab7683 100644 --- a/src/components/Charts/MultiLine/MultiLine.types.ts +++ b/src/components/Charts/MultiLine/MultiLine.types.ts @@ -216,7 +216,16 @@ export interface MarkLineConfig { * Position of the label * @default 'end' */ - labelPosition?: 'start' | 'middle' | 'end'; + labelPosition?: + | 'start' + | 'middle' + | 'end' + | 'insideStartTop' + | 'insideStartBottom' + | 'insideMiddleTop' + | 'insideMiddleBottom' + | 'insideEndTop' + | 'insideEndBottom'; /** * Line color (hex or rgb) */ @@ -231,6 +240,16 @@ export interface MarkLineConfig { * @default 1 */ lineWidth?: number; + /** + * Horizontal text alignment for label + * @default 'center' + */ + align?: 'left' | 'center' | 'right'; + /** + * Distance offset from the line [horizontal, vertical] + * Note: For vertical markLines, only vertical (index 1) works reliably + */ + distance?: [number, number]; } /** diff --git a/src/components/Charts/MultiLine/utils.ts b/src/components/Charts/MultiLine/utils.ts index 3725c1336..33838c239 100644 --- a/src/components/Charts/MultiLine/utils.ts +++ b/src/components/Charts/MultiLine/utils.ts @@ -1,4 +1,4 @@ -import type { SeriesData, MarkLineConfig } from './MultiLine.types'; +import type { MarkLineConfig, SeriesData } from './MultiLine.types'; import type { ForkInfo } from '@/utils/forks'; import type { ExecutionForks, BlobScheduleItem } from '@/hooks/useConfig'; import { epochToTimestamp } from '@/utils/beacon'; @@ -179,9 +179,9 @@ export function createForkMarkLines(options: ForkMarkLinesOptions): MarkLineConf if (labels.includes(forkLabel)) { markLines.push({ xValue: forkLabel, - label: fork.combinedName?.toUpperCase() ?? fork.displayName, + label: (fork.combinedName ?? fork.displayName).toUpperCase(), labelPosition: 'end', - color: '#9ca3af', + color: '#8b5cf6', // Purple for consensus forks lineStyle: 'dashed', lineWidth: 1, }); @@ -236,7 +236,7 @@ export function createExecutionForkMarkLines(options: ExecutionForkMarkLinesOpti xValue: forkLabel, label: displayName, labelPosition: 'end', - color: '#9ca3af', + color: '#f59e0b', // Amber for execution forks lineStyle: 'dashed', lineWidth: 1, }); @@ -291,7 +291,7 @@ export function createBlobScheduleMarkLines(options: BlobScheduleMarkLinesOption xValue: blobLabel, label: `BPO${index + 1}`, labelPosition: 'end', - color: '#9ca3af', + color: '#10b981', // Green for blob schedule lineStyle: 'dashed', lineWidth: 1, }); diff --git a/src/pages/ethereum/execution/overview/IndexPage.tsx b/src/pages/ethereum/execution/overview/IndexPage.tsx index c55d9e602..768a3780d 100644 --- a/src/pages/ethereum/execution/overview/IndexPage.tsx +++ b/src/pages/ethereum/execution/overview/IndexPage.tsx @@ -11,6 +11,7 @@ import { } from '@/components/Charts/MultiLine'; import { useNetwork } from '@/hooks/useNetwork'; import { useForks } from '@/hooks/useForks'; +import { Toggle } from '@/components/Forms/Toggle'; import clsx from 'clsx'; import { fctExecutionTpsHourlyServiceListOptions, @@ -61,6 +62,7 @@ import { */ export function IndexPage(): JSX.Element { const [timePeriod, setTimePeriod] = useState('7d'); + const [showAnnotations, setShowAnnotations] = useState(true); const config = TIME_RANGE_CONFIG[timePeriod]; const isDaily = config.dataType === 'daily'; @@ -696,6 +698,12 @@ export function IndexPage(): JSX.Element { ))} + + {/* Annotations Toggle */} +
+ Show Forks + +
{isLoading && } @@ -729,8 +737,8 @@ export function IndexPage(): JSX.Element { legendPosition="top" enableDataZoom tooltipFormatter={tpsTooltipFormatter} - markLines={forkMarkLines} - syncGroup="execution-overview" + markLines={showAnnotations ? forkMarkLines : []} + syncGroup={inModal ? undefined : 'execution-overview'} /> )} @@ -770,8 +778,8 @@ export function IndexPage(): JSX.Element { legendPosition="top" enableDataZoom tooltipFormatter={transactionsTooltipFormatter} - markLines={forkMarkLines} - syncGroup="execution-overview" + markLines={showAnnotations ? forkMarkLines : []} + syncGroup={inModal ? undefined : 'execution-overview'} /> )} @@ -809,8 +817,8 @@ export function IndexPage(): JSX.Element { legendPosition="top" enableDataZoom tooltipFormatter={gasTooltipFormatter} - markLines={forkMarkLines} - syncGroup="execution-overview" + markLines={showAnnotations ? forkMarkLines : []} + syncGroup={inModal ? undefined : 'execution-overview'} /> )} @@ -851,8 +859,8 @@ export function IndexPage(): JSX.Element { legendPosition="top" enableDataZoom tooltipFormatter={signallingTooltipFormatter} - markLines={signallingForkMarkLines} - syncGroup="execution-overview" + markLines={showAnnotations ? signallingForkMarkLines : []} + syncGroup={inModal ? undefined : 'execution-overview'} /> )}