diff --git a/src/components/chart-watermark.tsx b/src/components/chart-watermark.tsx index 11a404a0..3dc6282a 100644 --- a/src/components/chart-watermark.tsx +++ b/src/components/chart-watermark.tsx @@ -1,67 +1,139 @@ /** - * DefiLlama-style diagonal attribution that lives BEHIND the chart data. - * Large, rotated, very low opacity — reads as "openchainbench.com" - * without competing with the lines/bars, and can't be crop-shaved because - * it sits at the middle of the frame. Captured in every PNG export - * (see `chart-export-button.tsx`). + * Centered branded watermark: two horizontal rules flanking the OCB "C" + * mark, with the openchainbench.com wordmark below. Discreet enough to + * disappear during normal chart reading, visible enough to attribute + * the graphic when it gets screenshot-shared. Baked inside the chart + * frame so it survives any crop. * * Two variants: - * - `` → inlined at plot center (rotated - * -22°) for SVG charts (time-series). Must be rendered BEFORE the - * data paths so it sits behind the lines. - * - `` → absolutely-positioned centered span for - * HTML-composed charts (ranked bar). Parent must be `relative` and - * the watermark must be rendered first (z-index 0) so bars stack on top. + * - `` → self-contained SVG group (time-series). + * Rendered inside the plot area BEFORE the data paths so the lines + * stack on top and the watermark reads as a background stamp. + * - `` → absolutely-positioned centered block for + * HTML-composed charts (ranked bar). Parent must be `relative`. * - * Opacity is intentionally lower than the bottom-right badge it replaced - * (0.10 vs 0.28) because the diagonal glyph is much larger and would - * otherwise dominate visually. Trade-off: still perfectly readable in a - * screenshot recompressed by Twitter/Slack; disappears entirely under - * fine-grained chart lines during normal reading. + * The C-mark geometry mirrors the masthead (site-logo.tsx) + * so the brand reads identically across screen, favicon and screenshot. */ export function ChartWatermarkSvg({ cx, cy, - fontSize = 34, + scale = 1, }: { /** Center X of the plot area (padL + innerW/2). */ cx: number; /** Center Y of the plot area (padT + innerH/2). */ cy: number; - /** Font size in SVG user units — scale up to fill larger charts. */ - fontSize?: number; + /** Overall scale multiplier. Default 1 = ~140px wide composition. */ + scale?: number; }) { + const opacity = 0.18; + const barW = 40 * scale; + const gap = 32 * scale; + const stroke = 0.9 * scale; + const logoR = 8 * scale; + const textY = 20 * scale; + const fontSize = 8 * scale; return ( - - openchainbench.com - + {/* Left + right hairlines — the "two bars" flanking the mark. */} + + + {/* Center C-mark — inline copy of geometry so the SVG + stays self-contained and can serialise cleanly in html-to-image. */} + + + + + + + + + + + {/* Wordmark. Kept short + wide-tracked for a "stamped" look. */} + + openchainbench.com + + ); } export function ChartWatermarkHtml() { return ( - - openchainbench.com - +
+ + + + + + + + + + + + +
+ + openchainbench.com + + ); } diff --git a/src/components/time-series-chart/chart.tsx b/src/components/time-series-chart/chart.tsx index db73da20..480613a2 100644 --- a/src/components/time-series-chart/chart.tsx +++ b/src/components/time-series-chart/chart.tsx @@ -371,15 +371,16 @@ export function Chart({ - {/* Diagonal attribution watermark. Rendered BEFORE the series - paths so the data lines stack on top of it — reads as a - background stamp, not overlay. Kept intentionally small + - near-transparent so it's discernible in screenshots but - never competes with the data during normal reading. */} + {/* Branded attribution stamp — C-mark between two hairlines + with the openchainbench.com wordmark below. Rendered BEFORE + the series paths so the lines pass over the top and the + composition sits in the background of the plot. Scale + follows the plot's shorter axis so the mark stays visually + consistent across the range of chart heights we render. */} {/* Y gridlines + tick labels */}