Add initialWidth prop to Origin charts for SSR support

## Summary

- Add opti (#512)

* Add `initialWidth` prop to Origin charts for SSR support (#25548)

## Summary

- Add optional `initialWidth` prop to all SVG-based chart components
(Line, Bar, StackedArea, Pie, Scatter, Composed, Funnel, Waterfall,
Sankey, SparklineBar) to enable server-side rendering via
`renderToStaticMarkup`
- Update the shared `useResizeWidth` hook to accept an `initialWidth`
fallback — used when no `ResizeObserver` measurement is available (e.g.
Node.js environments), with the observer taking over seamlessly on the
client
- Rename the existing partial `width` prop on LineChart and BarChart to
`initialWidth` for consistent semantics across all charts

## Motivation

Charts currently render with 0 width in Node.js because `ResizeObserver`
is unavailable. This blocks the Lighthouse team's pipeline for
generating chart PNGs for Slack: `renderToStaticMarkup` → SVG string →
`sharp`/`resvg` → PNG. The `initialWidth` prop provides a
pre-measurement fallback with zero breaking changes — existing consumers
are unaffected.

## Test plan

- [x] Unit tests added for `useResizeWidth` fallback behavior (4 new
tests)
- [x] `initialWidth` added to Line and BarGrouped Storybook args for
discoverability
- [x] `yarn build` passes
- [x] `yarn test:unit` passes (420 tests, 7 files)
- [x] `yarn lint` passes (0 errors)
- [x] `yarn format` passes

Made with [Cursor](https://cursor.com)

GitOrigin-RevId: c7671c95535be6ce26fa402e03a0db4533265822

* Create giant-tips-laugh.md

---------

Co-authored-by: Jay Mantri <amantri08@gmail.com>
Co-authored-by: Corey Martin <coreyn.martin@gmail.com>

Author: 3 people

.changeset/giant-tips-laugh.md

@@ -0,0 +1,5 @@
+---
+"@lightsparkdev/origin": patch
+---
+
+- Add initialWidth prop to Origin charts for SSR support

packages/origin/src/components/Chart/BarChart.tsx

@@ -41,6 +41,11 @@ const clickIndexMeta = (index: number) => ({ index });
 
 export interface BarChartProps extends React.ComponentPropsWithoutRef<"div"> {
   data: ChartDatum[];
+  /**
+   * Pre-measurement width in pixels. Used as a fallback before
+   * ResizeObserver fires, enabling server-side rendering.
+   */
+  initialWidth?: number;
   dataKey?: string;
   series?: Series[];
   xKey?: string;
@@ -116,12 +121,13 @@ export const Bar = React.forwardRef<HTMLDivElement, BarChartProps>(function Bar(
     animate = true,
     getBarColor,
     orientation = "vertical",
+    initialWidth,
     className,
     ...props
   },
   ref,
 ) {
-  const { width, attachRef } = useResizeWidth();
+  const { width, attachRef } = useResizeWidth(initialWidth);
   const tooltipRef = React.useRef<HTMLDivElement>(null);
   const [activeIndex, setActiveIndex] = React.useState<number | null>(null);
 

packages/origin/src/components/Chart/Chart.stories.tsx

@@ -44,6 +44,7 @@ export const Line: Story = {
     fill: false,
     fadeLeft: false,
     compareLabel: "",
+    initialWidth: undefined,
   },
   argTypes: {
     curve: { control: "radio", options: ["monotone", "linear"] },
@@ -228,6 +229,7 @@ export const BarGrouped: Story = {
     legend: false,
     loading: false,
     stacked: false,
+    initialWidth: undefined,
   },
   argTypes: {
     orientation: { control: "radio", options: ["vertical", "horizontal"] },

packages/origin/src/components/Chart/Chart.unit.test.ts

@@ -7,6 +7,8 @@
  */
 
 import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useResizeWidth } from "./hooks";
 import {
   linearScale,
   niceTicks,
@@ -871,3 +873,66 @@ describe("sankeyLinkPath", () => {
     expect(path).toContain("C");
   });
 });
+
+// ---------------------------------------------------------------------------
+// useResizeWidth
+// ---------------------------------------------------------------------------
+
+describe("useResizeWidth", () => {
+  it("returns 0 when called with no arguments", () => {
+    const { result } = renderHook(() => useResizeWidth());
+    expect(result.current.width).toBe(0);
+    expect(typeof result.current.attachRef).toBe("function");
+  });
+
+  it("returns initialWidth when no observer has fired", () => {
+    const { result } = renderHook(() => useResizeWidth(800));
+    expect(result.current.width).toBe(800);
+  });
+
+  it("returns initialWidth for various values", () => {
+    const { result: r1 } = renderHook(() => useResizeWidth(1024));
+    expect(r1.current.width).toBe(1024);
+
+    const { result: r2 } = renderHook(() => useResizeWidth(320));
+    expect(r2.current.width).toBe(320);
+  });
+
+  it("returns 0 when initialWidth is 0", () => {
+    const { result } = renderHook(() => useResizeWidth(0));
+    expect(result.current.width).toBe(0);
+  });
+
+  it("observer measurement takes over from initialWidth", () => {
+    let observerCallback: ResizeObserverCallback;
+    const mockObserver = {
+      observe: vi.fn(),
+      disconnect: vi.fn(),
+      unobserve: vi.fn(),
+    };
+    vi.stubGlobal(
+      "ResizeObserver",
+      vi.fn((cb: ResizeObserverCallback) => {
+        observerCallback = cb;
+        return mockObserver;
+      }),
+    );
+
+    const { result } = renderHook(() => useResizeWidth(800));
+    expect(result.current.width).toBe(800);
+
+    const fakeNode = { clientWidth: 0 } as HTMLDivElement;
+    act(() => result.current.attachRef(fakeNode));
+
+    act(() => {
+      observerCallback(
+        [{ contentRect: { width: 600 } }] as ResizeObserverEntry[],
+        {} as ResizeObserver,
+      );
+    });
+
+    expect(result.current.width).toBe(600);
+
+    vi.unstubAllGlobals();
+  });
+});

packages/origin/src/components/Chart/ComposedChart.tsx

@@ -59,6 +59,11 @@ type ResolvedComposedSeries = {
 export interface ComposedChartProps
   extends React.ComponentPropsWithoutRef<"div"> {
   data: ChartDatum[];
+  /**
+   * Pre-measurement width in pixels. Used as a fallback before
+   * ResizeObserver fires, enabling server-side rendering.
+   */
+  initialWidth?: number;
   series: ComposedSeries[];
   xKey?: string;
   height?: number;
@@ -130,12 +135,13 @@ export const Composed = React.forwardRef<HTMLDivElement, ComposedChartProps>(
       connectNulls = true,
       yDomain: yDomainProp,
       yDomainRight: yDomainRightProp,
+      initialWidth,
       className,
       ...props
     },
     ref,
   ) {
-    const { width, attachRef } = useResizeWidth();
+    const { width, attachRef } = useResizeWidth(initialWidth);
     const trackedClick = useTrackedCallback(
       analyticsName,
       "Chart.Composed",

packages/origin/src/components/Chart/FunnelChart.tsx

@@ -19,6 +19,11 @@ export interface FunnelStage {
 export interface FunnelChartProps
   extends React.ComponentPropsWithoutRef<"div"> {
   data: FunnelStage[];
+  /**
+   * Pre-measurement width in pixels. Used as a fallback before
+   * ResizeObserver fires, enabling server-side rendering.
+   */
+  initialWidth?: number;
   formatValue?: (value: number) => string;
   formatRate?: (rate: number) => string;
   showRates?: boolean;
@@ -61,12 +66,13 @@ export const Funnel = React.forwardRef<HTMLDivElement, FunnelChartProps>(
       onClickDatum,
       onActiveChange,
       analyticsName,
+      initialWidth,
       className,
       ...props
     },
     ref,
   ) {
-    const { width, attachRef } = useResizeWidth();
+    const { width, attachRef } = useResizeWidth(initialWidth);
     const [activeIndex, setActiveIndex] = React.useState<number | null>(null);
 
     const onActiveChangeRef = React.useRef(onActiveChange);

packages/origin/src/components/Chart/LineChart.tsx

@@ -47,6 +47,11 @@ export interface LineChartProps extends React.ComponentPropsWithoutRef<"div"> {
    * Array of data objects. Each object should contain keys matching `dataKey` or `series[].key`.
    */
   data: ChartDatum[];
+  /**
+   * Pre-measurement width in pixels. Used as a fallback before
+   * ResizeObserver fires, enabling server-side rendering.
+   */
+  initialWidth?: number;
   /** Data key for single-series charts. Pass this OR `series`, not both. */
   dataKey?: string;
   /** Series configuration for multi-series charts. */
@@ -150,12 +155,13 @@ export const Line = React.forwardRef<HTMLDivElement, LineChartProps>(
       formatXLabel,
       formatYLabel,
       connectNulls = true,
+      initialWidth,
       className,
       ...props
     },
     ref,
   ) {
-    const { width, attachRef } = useResizeWidth();
+    const { width, attachRef } = useResizeWidth(initialWidth);
     const trackedClick = useTrackedCallback(
       analyticsName,
       "Chart.Line",

packages/origin/src/components/Chart/PieChart.tsx

@@ -17,6 +17,11 @@ export interface PieSegment {
 
 export interface PieChartProps extends React.ComponentPropsWithoutRef<"div"> {
   data: PieSegment[];
+  /**
+   * Pre-measurement width in pixels. Used as a fallback before
+   * ResizeObserver fires, enabling server-side rendering.
+   */
+  initialWidth?: number;
   height?: number;
   /** Inner radius ratio (0-1). Defaults to 0.65. */
   innerRadius?: number;
@@ -107,6 +112,7 @@ export const Pie = React.forwardRef<HTMLDivElement, PieChartProps>(function Pie(
     analyticsName,
     ariaLabel,
     formatValue,
+    initialWidth,
     className,
     ...props
   },
@@ -123,7 +129,7 @@ export const Pie = React.forwardRef<HTMLDivElement, PieChartProps>(function Pie(
     onClickDatum ? clickIndexMeta : undefined,
   );
 
-  const { width, attachRef } = useResizeWidth();
+  const { width, attachRef } = useResizeWidth(initialWidth);
   const [activeIndex, setActiveIndex] = React.useState<number | null>(null);
 
   const mergedRef = useMergedRef(ref, attachRef);

packages/origin/src/components/Chart/SankeyChart.tsx

@@ -23,6 +23,11 @@ export type { SankeyNode, SankeyLink } from "./sankeyLayout";
 export interface SankeyChartProps
   extends React.ComponentPropsWithoutRef<"div"> {
   data: SankeyData;
+  /**
+   * Pre-measurement width in pixels. Used as a fallback before
+   * ResizeObserver fires, enabling server-side rendering.
+   */
+  initialWidth?: number;
   nodeWidth?: number;
   nodePadding?: number;
   height?: number;
@@ -78,6 +83,7 @@ export const Sankey = React.forwardRef<HTMLDivElement, SankeyChartProps>(
       onClickNode,
       onClickLink,
       analyticsName,
+      initialWidth,
       className,
       ...props
     },
@@ -98,7 +104,7 @@ export const Sankey = React.forwardRef<HTMLDivElement, SankeyChartProps>(
       onClickLink ? sankeyLinkClickMeta : undefined,
     );
 
-    const { width, attachRef } = useResizeWidth();
+    const { width, attachRef } = useResizeWidth(initialWidth);
     const [active, setActive] = React.useState<ActiveElement>(null);
     const tooltipRef = React.useRef<HTMLDivElement>(null);
     const rootRef = React.useRef<HTMLDivElement | null>(null);

packages/origin/src/components/Chart/ScatterChart.tsx

@@ -39,6 +39,11 @@ export interface ScatterSeries {
 export interface ScatterChartProps
   extends React.ComponentPropsWithoutRef<"div"> {
   data: ScatterSeries[];
+  /**
+   * Pre-measurement width in pixels. Used as a fallback before
+   * ResizeObserver fires, enabling server-side rendering.
+   */
+  initialWidth?: number;
   height?: number;
   grid?: boolean;
   tooltip?: TooltipProp;
@@ -113,6 +118,7 @@ export const Scatter = React.forwardRef<HTMLDivElement, ScatterChartProps>(
       onActiveChange,
       analyticsName,
       interactive = true,
+      initialWidth,
       className,
       ...props
     },
@@ -126,7 +132,7 @@ export const Scatter = React.forwardRef<HTMLDivElement, ScatterChartProps>(
       onClickDatum ? scatterClickMeta : undefined,
     );
 
-    const { width, attachRef } = useResizeWidth();
+    const { width, attachRef } = useResizeWidth(initialWidth);
     const tooltipRef = React.useRef<HTMLDivElement>(null);
     const [activeDot, setActiveDot] = React.useState<ActiveDot | null>(null);