liveline 0.0.6 → 0.0.7

package/README.md

@@ -1,6 +1,6 @@
 # Liveline
 
-Real-time animated charts for React. Line and candlestick modes, canvas-rendered, 60fps, zero CSS imports.
+Real-time animated charts for React. Line, multi-series, and candlestick modes, canvas-rendered, 60fps, zero CSS imports.
 
 ## Install
 
@@ -54,6 +54,7 @@ The component fills its parent container. Set a height on the parent. Pass `data
 | `badgeTail` | `boolean` | `true` | Pointed tail on badge pill |
 | `fill` | `boolean` | `true` | Gradient under the curve |
 | `pulse` | `boolean` | `true` | Pulsing ring on live dot |
+| `lineWidth` | `number` | `2` | Stroke width of the main line in pixels |
 
 **Features**
 
@@ -83,6 +84,16 @@ When `mode="candle"`, pass `candles` (committed OHLC bars) and `liveCandle` (the
 
 The `onModeChange` prop renders a built-in line/candle toggle next to the time window buttons.
 
+**Multi-series**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `series` | `LivelineSeries[]` | — | Multiple overlapping lines `{ id, data, value, color, label? }` |
+| `onSeriesToggle` | `(id, visible) => void` | — | Callback when a series is toggled via built-in chips |
+| `seriesToggleCompact` | `boolean` | `false` | Show only colored dots in toggle (no text labels) |
+
+Pass `series` instead of `data`/`value` to draw multiple lines sharing the same axes. Each series gets its own color, label, and endpoint dot. Toggle chips appear automatically when there are 2+ series — clicking one hides/shows that line with a smooth fade. The Y-axis range adjusts when series are hidden. Badge, momentum arrows, and fill are disabled in multi-series mode.
+
 **State**
 
 | Prop | Type | Default | Description |
@@ -123,7 +134,7 @@ When `loading` flips to `false` with data present, the loading line morphs into
 | `formatValue` | `(v: number) => string` | `v.toFixed(2)` | Value label formatter |
 | `formatTime` | `(t: number) => string` | `HH:MM:SS` | Time axis formatter |
 | `lerpSpeed` | `number` | `0.08` | Interpolation speed (0–1) |
-| `padding` | `Padding` | `{ top: 12, right: 80, bottom: 28, left: 12 }` | Chart padding override |
+| `padding` | `Padding` | `{ top: 12, right: auto, bottom: 28, left: 12 }` | Chart padding override (`right` is 80/54/12 based on badge/grid) |
 | `onHover` | `(point \| null) => void` | — | Hover callback with `{ time, value, x, y }` |
 | `cursor` | `string` | `'crosshair'` | CSS cursor on canvas hover |
 | `className` | `string` | — | Container class |
@@ -209,6 +220,30 @@ When `loading` flips to `false` with data present, the loading line morphs into
 />
 ```
 
+### Multi-series (prediction market)
+
+```tsx
+<Liveline
+  data={[]}
+  value={0}
+  series={[
+    { id: 'yes', data: yesData, value: yesValue, color: '#3b82f6', label: 'Yes' },
+    { id: 'no', data: noData, value: noValue, color: '#ef4444', label: 'No' },
+  ]}
+  grid
+  scrub
+  pulse
+  windowStyle="rounded"
+  formatValue={(v) => v.toFixed(1) + '%'}
+  onSeriesToggle={(id, visible) => console.log(id, visible)}
+  windows={[
+    { label: '10s', secs: 10 },
+    { label: '30s', secs: 30 },
+    { label: '1m', secs: 60 },
+  ]}
+/>
+```
+
 ### Loading + pause
 
 ```tsx
@@ -241,6 +276,7 @@ When `loading` flips to `false` with data present, the loading line morphs into
 - **Frame-rate-independent lerp** on value, Y-axis range, badge color, and scrub opacity
 - **Candlestick rendering** — OHLC bodies + wicks with bull/bear coloring, smooth live candle updates
 - **Line/candle morph** — candle bodies collapse to close price, morph line extends center-out, coordinated alpha crossfade
+- **Multi-series** — overlapping lines with per-series toggle, smooth alpha fade, and dynamic Y-axis range
 - **ResizeObserver** tracks container size — no per-frame layout reads
 - **Theme derivation** — full palette from one accent color + light/dark mode
 - **Binary search interpolation** for hover value lookup

package/dist/index.cjs

@@ -1985,6 +1985,7 @@ var BADGE_Y_LERP_TRANSITIONING = 0.5;
 var MOMENTUM_COLOR_LERP = 0.12;
 var WINDOW_TRANSITION_MS = 750;
 var WINDOW_BUFFER = 0.05;
+var WINDOW_BUFFER_NO_BADGE = 0.015;
 var VALUE_SNAP_THRESHOLD = 1e-3;
 var ADAPTIVE_SPEED_BOOST = 0.2;
 var MOMENTUM_GREEN = [34, 197, 94];
@@ -2006,7 +2007,7 @@ var LINE_ADAPTIVE_BOOST = 0.2;
 var LINE_SNAP_THRESHOLD = 1e-3;
 var RANGE_LERP_SPEED = 0.15;
 var RANGE_ADAPTIVE_BOOST = 0.2;
-var CANDLE_BUFFER = 0.05;
+var CANDLE_BUFFER_NO_BADGE = 0.015;
 function computeAdaptiveSpeed(value, displayValue, displayMin, displayMax, lerpSpeed, noMotion) {
   const valGap = Math.abs(value - displayValue);
   const prevRange = displayMax - displayMin || 1;
@@ -2658,6 +2659,7 @@ function useLivelineEngine(canvasRef, containerRef, config) {
       return;
     }
     if (isCandle) {
+      const candleBuffer = CANDLE_BUFFER_NO_BADGE;
       if (hasData) frozenNowRef.current = Date.now() / 1e3 - timeDebtRef.current;
       const now = hasData || chartReveal < 5e-3 ? Date.now() / 1e3 - timeDebtRef.current : frozenNowRef.current;
       const rawLive = pausedCandlesRef.current ? pausedLiveRef.current ?? void 0 : cfg.liveCandle;
@@ -2700,7 +2702,7 @@ function useLivelineEngine(canvasRef, containerRef, config) {
         cwt.rangeFromMin = displayMinRef.current;
         cwt.rangeFromMax = displayMaxRef.current;
         const curWindow = displayWindowRef.current;
-        const re = now + curWindow * CANDLE_BUFFER;
+        const re = now + curWindow * candleBuffer;
         const le = re - curWindow;
         const targetVis = [];
         for (const c of effectiveCandles) {
@@ -2751,13 +2753,13 @@ function useLivelineEngine(canvasRef, containerRef, config) {
         effectiveCandles,
         rawLive,
         candleWidthSecs,
-        CANDLE_BUFFER
+        candleBuffer
       );
       displayWindowRef.current = windowResult.windowSecs;
       const windowSecs = windowResult.windowSecs;
       const windowTransProgress = windowResult.windowTransProgress;
       const isWindowTransitioning = transition.startMs > 0;
-      const rightEdge = now + windowSecs * CANDLE_BUFFER;
+      const rightEdge = now + windowSecs * candleBuffer;
       const leftEdge = rightEdge - windowSecs;
       let smoothLive;
       if (rawLive) {
@@ -3076,7 +3078,7 @@ function useLivelineEngine(canvasRef, containerRef, config) {
         labelReserve = Math.max(0, maxLabelW - 2) * chartReveal;
       }
       const chartW = w - pad.left - pad.right - labelReserve;
-      const buffer = WINDOW_BUFFER;
+      const buffer = cfg.showBadge ? WINDOW_BUFFER : WINDOW_BUFFER_NO_BADGE;
       if (!useMultiStash) {
         const currentIds = new Set(effectiveMultiSeries.map((s) => s.id));
         for (const key of displayValuesRef.current.keys()) {
@@ -3326,8 +3328,9 @@ function useLivelineEngine(canvasRef, containerRef, config) {
       }
       const smoothValue = displayValueRef.current;
       const chartW = w - pad.left - pad.right;
-      const needsArrowRoom = cfg.showMomentum;
-      const buffer = needsArrowRoom ? Math.max(WINDOW_BUFFER, 37 / Math.max(chartW, 1)) : WINDOW_BUFFER;
+      const baseBuffer = cfg.showBadge ? WINDOW_BUFFER : WINDOW_BUFFER_NO_BADGE;
+      const needsArrowRoom = cfg.showMomentum && cfg.showBadge;
+      const buffer = needsArrowRoom ? Math.max(baseBuffer, 37 / Math.max(chartW, 1)) : baseBuffer;
       const transition = windowTransitionRef.current;
       if (hasData) frozenNowRef.current = Date.now() / 1e3 - timeDebtRef.current;
       const now = useStash ? frozenNowRef.current : Date.now() / 1e3 - timeDebtRef.current;
@@ -3556,6 +3559,7 @@ function Liveline({
   onModeChange,
   onSeriesToggle,
   seriesToggleCompact = false,
+  lineWidth,
   className,
   style
 }) {
@@ -3571,7 +3575,11 @@ function Liveline({
   const [hiddenSeries, setHiddenSeries] = (0, import_react2.useState)(/* @__PURE__ */ new Set());
   const lastSeriesPropRef = (0, import_react2.useRef)(seriesProp);
   if (seriesProp && seriesProp.length > 0) lastSeriesPropRef.current = seriesProp;
-  const palette = (0, import_react2.useMemo)(() => resolveTheme(color, theme), [color, theme]);
+  const palette = (0, import_react2.useMemo)(() => {
+    const p = resolveTheme(color, theme);
+    if (lineWidth != null) p.lineWidth = lineWidth;
+    return p;
+  }, [color, theme, lineWidth]);
   const isDark = theme === "dark";
   const isMultiSeries = seriesProp != null && seriesProp.length > 0;
   const showSeriesToggle = (lastSeriesPropRef.current?.length ?? 0) > 1;
@@ -3591,9 +3599,10 @@ function Liveline({
   }, [seriesProp, seriesPalettes, theme]);
   const showMomentum = momentum !== false;
   const momentumOverride = typeof momentum === "string" ? momentum : void 0;
+  const defaultRight = badge ? 80 : grid ? 54 : 12;
   const pad = {
     top: paddingOverride?.top ?? 12,
-    right: paddingOverride?.right ?? 80,
+    right: paddingOverride?.right ?? defaultRight,
     bottom: paddingOverride?.bottom ?? 28,
     left: paddingOverride?.left ?? 12
   };

package/dist/index.d.cts

@@ -81,6 +81,7 @@ interface LivelineProps {
     onHover?: (point: HoverPoint | null) => void;
     cursor?: string;
     pulse?: boolean;
+    lineWidth?: number;
     mode?: 'line' | 'candle';
     candles?: CandlePoint[];
     candleWidth?: number;
@@ -102,7 +103,7 @@ interface CandlePoint {
     close: number;
 }
 
-declare function Liveline({ data, value, series: seriesProp, theme, color, window: windowSecs, grid, badge, momentum, fill, scrub, loading, paused, emptyText, exaggerate, degen: degenProp, badgeTail, badgeVariant, showValue, valueMomentumColor, windows, onWindowChange, windowStyle, tooltipY, tooltipOutline, orderbook, referenceLine, formatValue, formatTime, lerpSpeed, padding: paddingOverride, onHover, cursor, pulse, mode, candles, candleWidth, liveCandle, lineMode, lineData, lineValue, onModeChange, onSeriesToggle, seriesToggleCompact, className, style, }: LivelineProps): react_jsx_runtime.JSX.Element;
+declare function Liveline({ data, value, series: seriesProp, theme, color, window: windowSecs, grid, badge, momentum, fill, scrub, loading, paused, emptyText, exaggerate, degen: degenProp, badgeTail, badgeVariant, showValue, valueMomentumColor, windows, onWindowChange, windowStyle, tooltipY, tooltipOutline, orderbook, referenceLine, formatValue, formatTime, lerpSpeed, padding: paddingOverride, onHover, cursor, pulse, mode, candles, candleWidth, liveCandle, lineMode, lineData, lineValue, onModeChange, onSeriesToggle, seriesToggleCompact, lineWidth, className, style, }: LivelineProps): react_jsx_runtime.JSX.Element;
 
 interface LivelineTransitionProps {
     /** Key of the active child to display. Must match a child's `key` prop. */

package/dist/index.d.ts

@@ -81,6 +81,7 @@ interface LivelineProps {
     onHover?: (point: HoverPoint | null) => void;
     cursor?: string;
     pulse?: boolean;
+    lineWidth?: number;
     mode?: 'line' | 'candle';
     candles?: CandlePoint[];
     candleWidth?: number;
@@ -102,7 +103,7 @@ interface CandlePoint {
     close: number;
 }
 
-declare function Liveline({ data, value, series: seriesProp, theme, color, window: windowSecs, grid, badge, momentum, fill, scrub, loading, paused, emptyText, exaggerate, degen: degenProp, badgeTail, badgeVariant, showValue, valueMomentumColor, windows, onWindowChange, windowStyle, tooltipY, tooltipOutline, orderbook, referenceLine, formatValue, formatTime, lerpSpeed, padding: paddingOverride, onHover, cursor, pulse, mode, candles, candleWidth, liveCandle, lineMode, lineData, lineValue, onModeChange, onSeriesToggle, seriesToggleCompact, className, style, }: LivelineProps): react_jsx_runtime.JSX.Element;
+declare function Liveline({ data, value, series: seriesProp, theme, color, window: windowSecs, grid, badge, momentum, fill, scrub, loading, paused, emptyText, exaggerate, degen: degenProp, badgeTail, badgeVariant, showValue, valueMomentumColor, windows, onWindowChange, windowStyle, tooltipY, tooltipOutline, orderbook, referenceLine, formatValue, formatTime, lerpSpeed, padding: paddingOverride, onHover, cursor, pulse, mode, candles, candleWidth, liveCandle, lineMode, lineData, lineValue, onModeChange, onSeriesToggle, seriesToggleCompact, lineWidth, className, style, }: LivelineProps): react_jsx_runtime.JSX.Element;
 
 interface LivelineTransitionProps {
     /** Key of the active child to display. Must match a child's `key` prop. */

package/dist/index.js

@@ -1958,6 +1958,7 @@ var BADGE_Y_LERP_TRANSITIONING = 0.5;
 var MOMENTUM_COLOR_LERP = 0.12;
 var WINDOW_TRANSITION_MS = 750;
 var WINDOW_BUFFER = 0.05;
+var WINDOW_BUFFER_NO_BADGE = 0.015;
 var VALUE_SNAP_THRESHOLD = 1e-3;
 var ADAPTIVE_SPEED_BOOST = 0.2;
 var MOMENTUM_GREEN = [34, 197, 94];
@@ -1979,7 +1980,7 @@ var LINE_ADAPTIVE_BOOST = 0.2;
 var LINE_SNAP_THRESHOLD = 1e-3;
 var RANGE_LERP_SPEED = 0.15;
 var RANGE_ADAPTIVE_BOOST = 0.2;
-var CANDLE_BUFFER = 0.05;
+var CANDLE_BUFFER_NO_BADGE = 0.015;
 function computeAdaptiveSpeed(value, displayValue, displayMin, displayMax, lerpSpeed, noMotion) {
   const valGap = Math.abs(value - displayValue);
   const prevRange = displayMax - displayMin || 1;
@@ -2631,6 +2632,7 @@ function useLivelineEngine(canvasRef, containerRef, config) {
       return;
     }
     if (isCandle) {
+      const candleBuffer = CANDLE_BUFFER_NO_BADGE;
       if (hasData) frozenNowRef.current = Date.now() / 1e3 - timeDebtRef.current;
       const now = hasData || chartReveal < 5e-3 ? Date.now() / 1e3 - timeDebtRef.current : frozenNowRef.current;
       const rawLive = pausedCandlesRef.current ? pausedLiveRef.current ?? void 0 : cfg.liveCandle;
@@ -2673,7 +2675,7 @@ function useLivelineEngine(canvasRef, containerRef, config) {
         cwt.rangeFromMin = displayMinRef.current;
         cwt.rangeFromMax = displayMaxRef.current;
         const curWindow = displayWindowRef.current;
-        const re = now + curWindow * CANDLE_BUFFER;
+        const re = now + curWindow * candleBuffer;
         const le = re - curWindow;
         const targetVis = [];
         for (const c of effectiveCandles) {
@@ -2724,13 +2726,13 @@ function useLivelineEngine(canvasRef, containerRef, config) {
         effectiveCandles,
         rawLive,
         candleWidthSecs,
-        CANDLE_BUFFER
+        candleBuffer
       );
       displayWindowRef.current = windowResult.windowSecs;
       const windowSecs = windowResult.windowSecs;
       const windowTransProgress = windowResult.windowTransProgress;
       const isWindowTransitioning = transition.startMs > 0;
-      const rightEdge = now + windowSecs * CANDLE_BUFFER;
+      const rightEdge = now + windowSecs * candleBuffer;
       const leftEdge = rightEdge - windowSecs;
       let smoothLive;
       if (rawLive) {
@@ -3049,7 +3051,7 @@ function useLivelineEngine(canvasRef, containerRef, config) {
         labelReserve = Math.max(0, maxLabelW - 2) * chartReveal;
       }
       const chartW = w - pad.left - pad.right - labelReserve;
-      const buffer = WINDOW_BUFFER;
+      const buffer = cfg.showBadge ? WINDOW_BUFFER : WINDOW_BUFFER_NO_BADGE;
       if (!useMultiStash) {
         const currentIds = new Set(effectiveMultiSeries.map((s) => s.id));
         for (const key of displayValuesRef.current.keys()) {
@@ -3299,8 +3301,9 @@ function useLivelineEngine(canvasRef, containerRef, config) {
       }
       const smoothValue = displayValueRef.current;
       const chartW = w - pad.left - pad.right;
-      const needsArrowRoom = cfg.showMomentum;
-      const buffer = needsArrowRoom ? Math.max(WINDOW_BUFFER, 37 / Math.max(chartW, 1)) : WINDOW_BUFFER;
+      const baseBuffer = cfg.showBadge ? WINDOW_BUFFER : WINDOW_BUFFER_NO_BADGE;
+      const needsArrowRoom = cfg.showMomentum && cfg.showBadge;
+      const buffer = needsArrowRoom ? Math.max(baseBuffer, 37 / Math.max(chartW, 1)) : baseBuffer;
       const transition = windowTransitionRef.current;
       if (hasData) frozenNowRef.current = Date.now() / 1e3 - timeDebtRef.current;
       const now = useStash ? frozenNowRef.current : Date.now() / 1e3 - timeDebtRef.current;
@@ -3529,6 +3532,7 @@ function Liveline({
   onModeChange,
   onSeriesToggle,
   seriesToggleCompact = false,
+  lineWidth,
   className,
   style
 }) {
@@ -3544,7 +3548,11 @@ function Liveline({
   const [hiddenSeries, setHiddenSeries] = useState(/* @__PURE__ */ new Set());
   const lastSeriesPropRef = useRef2(seriesProp);
   if (seriesProp && seriesProp.length > 0) lastSeriesPropRef.current = seriesProp;
-  const palette = useMemo(() => resolveTheme(color, theme), [color, theme]);
+  const palette = useMemo(() => {
+    const p = resolveTheme(color, theme);
+    if (lineWidth != null) p.lineWidth = lineWidth;
+    return p;
+  }, [color, theme, lineWidth]);
   const isDark = theme === "dark";
   const isMultiSeries = seriesProp != null && seriesProp.length > 0;
   const showSeriesToggle = (lastSeriesPropRef.current?.length ?? 0) > 1;
@@ -3564,9 +3572,10 @@ function Liveline({
   }, [seriesProp, seriesPalettes, theme]);
   const showMomentum = momentum !== false;
   const momentumOverride = typeof momentum === "string" ? momentum : void 0;
+  const defaultRight = badge ? 80 : grid ? 54 : 12;
   const pad = {
     top: paddingOverride?.top ?? 12,
-    right: paddingOverride?.right ?? 80,
+    right: paddingOverride?.right ?? defaultRight,
     bottom: paddingOverride?.bottom ?? 28,
     left: paddingOverride?.left ?? 12
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "liveline",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "description": "Real-time animated charts for React — line, candlestick, and multi-series modes",
   "keywords": [