Tile UI Vue
Source code

Components

Liveline

A real-time Vue canvas chart for line, multi-series, candlestick, and market-data displays.

Liveline keeps rendering in a framework-independent canvas engine while Vue owns reactivity, controls, accessibility, and transitions.

Live line

A continuous feed. Smooth interpolation, momentum and a live edge.

State
Volatility
Tick rate
Features
Window
Live line: live, running, $0.00
state: livepoints: 0ticks: 0window: 30stick: 300ms

Simulated data. Live restores history; Loading and Empty clear all chart inputs. Pause stops the feed and scrolling. Next tick appends through the automatic feed function and is disabled while paused or without live data.

import { defineComponent, onMounted, onUnmounted, shallowRef, watchEffect } from 'vue';
import { Liveline } from '@tile-ui/vue';
export type DemoPoint = { time: number; value: number };
export type DemoCandle = { time: number; open: number; high: number; low: number; close: number };
export type DemoFeed = { data: DemoPoint[]; seed: number; base: number; ticks: number };
export type DemoState = 'live' | 'loading' | 'empty';

Demo guide

Six separate upstream-style scenarios share the same deterministic simulation model as React and Solid. Each panel owns its state, feed, theme, cadence, and window.

  • Live line: real appended history, calm/normal/spiky/chaos volatility, 50ms/100ms/300ms/1s cadence, 10s/30s/1m/5m windows, fill, momentum, grid, pulse, and scrubbing.
  • Crypto: BTC/USD, a seeded hour of history, 5m/15m/1h windows, updating orderbook depth, opening-price reference, and opt-in degen effects.
  • Multi-line: two to four independent seeded walks, stable series identities, shared axes, and built-in visibility chips. Fill and momentum are disabled because this category does not use them.
  • Candlesticks: true OHLC aggregation into 1s/2s/5s/10s buckets. Completed bars are candles; the in-progress bar is liveCandle. Morphing always retains mode="candle", switching lineMode with tick-resolution lineData and lineValue.
  • Dashboard: four independently updated metrics in quiet compact panels.
  • Size variants: upstream 320 x 180, 240 x 120, 160 x 100, and 120 x 80 layouts. Badge, grid, and momentum are suppressed below 200px. Width shrinks only if the viewport cannot fit the original size.

Feed state contract

Live restores seeded history and starts appending. Loading clears all relevant inputs, including series histories, candles, liveCandle, morph data, and depth overlays. Empty clears the same inputs without the loading animation. Neither changes the chart category. Pause stops the producer and scrolling; Resume continues existing history. Next tick uses the automatic timer’s append function and is disabled outside Live or while paused.

The status row exposes state, point count, tick count, window, cadence, and live OHLC. Each feed retains at most 3,800 seconds and 76,000 points. The seeded values are deterministic; timestamps are anchored on mount and never rewritten. All data is simulated.

Theme controls match the canvas palette to opaque light/dark panels. The public copied example includes the pure feed helpers and scoped styles, with no private documentation dependencies.

Registry install

pnpm dlx shadcn@latest add @tile-ui/liveline

The UI item installs liveline-core, the Vue component and transition, and the Liveline SCSS module. The core source tree is copied to components/ui/lib/liveline, with @tile-ui/core/liveline mapped to its local entry.

Package usage

import { Liveline } from '@tile-ui/vue';
 
const now = Math.floor(Date.now() / 1000);
 
<Liveline aria-label="ETH/USD live price, 105.10" data={[{ time: now - 5, value: 101.2 }, { time: now, value: 105.1 }]} value={105.1} windows={[{ label: '30s', secs: 30 }, { label: '1m', secs: 60 }]} style={{ height: '320px' }} />

Highlights

  • Line and multi-series: use data/value for one line or series for independently colored, toggleable lines.
  • Candles and morphing: provide OHLC candles, candleWidth, and candle mode; use lineMode, lineData, lineValue, and onModeChange for morphing.
  • Loading, empty, and pause: loading draws a breathing placeholder, empty data uses emptyText, and paused freezes scrolling.
  • Windows and momentum: windows creates range buttons; momentum is inferred or forced to up, down, or flat.
  • Orderbook and degen: bid/ask depth, reference prices, particles, and chart shake can be layered without changing data ownership.

Accessibility

The canvas uses role="img"; provide an aria-label with instrument and current value, plus aria-describedby for a text summary or table. Range, mode, and series controls are native aria-pressed buttons. The visual showValue overlay is hidden from assistive technology, so use a separate live region if every tick must be announced.

LivelineTransition honors prefers-reduced-motion: reduce by switching immediately. To stop data-driven canvas motion too, react to that query in the application and set paused, pulse={false}, and degen={false}.

Registry dependencies

Item Purpose
liveline Vue component, transition, and module styles
liveline-core Canvas engine, drawing modules, themes, and math
styles Shared SCSS tokens and globals

API reference

Liveline

style sizes and styles the complete widget, including controls. Use surfaceStyle and surfaceClassName for chart-only styling on the engine’s measured surface. For example, surfaceStyle={{ height: '240px' }} in TSX sets the chart height; use an auto-height root when controls should add to that height. An explicit surface height is not clamped to a smaller root. The surface does not clip badges or tooltips unless you explicitly set overflow.

Prop Type Default
data, value LivelinePoint[], number required
series LivelineSeries[] –
theme, color 'light' | 'dark', string 'dark', '#3b82f6'
window, windows, onWindowChange, windowStyle number, WindowOption[], (secs) => void, WindowStyle 30, --, --, 'default'
mode, candles, candleWidth, liveCandle 'line' | 'candle', CandlePoint[], number, CandlePoint 'line', –
lineMode, lineData, lineValue, onModeChange boolean, LivelinePoint[], number, (mode) => void –
loading, paused, emptyText boolean, boolean, string false, false, default text
grid, badge, fill, scrub, pulse boolean true
momentum boolean | Momentum true
degen, orderbook, referenceLine boolean | DegenOptions, OrderbookData, ReferenceLine –
showValue, valueMomentumColor, exaggerate boolean false
badgeTail, badgeVariant boolean, 'default' | 'minimal' true, 'default'
tooltipY, tooltipOutline, cursor, lineWidth number, boolean, string, number 14, true, 'crosshair', 2
formatValue, formatTime, lerpSpeed, padding formatter functions, number, Padding built-ins, 0.08, built-in padding
onHover, onSeriesToggle, seriesToggleCompact callbacks, boolean –, --, false
aria-label, aria-describedby, class, style Vue host attributes –

Times are Unix seconds. Candles contain open, high, low, and close; series contain id, data, value, color, and optional label.

LivelineTransition

Prop Type Default
active string matching a keyed slot child required
default slot keyed VNode[] required
duration number in milliseconds 300
class, style Vue host attributes –

surfaceStyle accepts Vue CSSProperties; surfaceClassName accepts a string. Both default to unset. In templates, pass them as :surface-style="{ height: '240px' }" and surface-class-name="chart-only".

PreviousLabelNextMarker