BarTrackView

Generic signed-bar readout for any N-channel continuous time-series. Use when your data doesn't match one of the dedicated robot views and you just want a quick numeric+bar display.

Compatible dtypes: scalar · vector · imu_6dof · joint_angles · pose_6dof — any continuous-category dtype.

Purpose

The escape-hatch view: same infra as ImuView / JointAngleView / PoseView (via useMergedTrack + useTrackSample), but a purely generic display. Drop it in for anything continuous — joint torques, gripper force, loss curves, sensor channels you haven't built a dedicated view for yet.

Props

Data Schema

import type { BarTrackSample } from '@vuer-ai/vuer-m3u';
 
type BarTrackSample = {
  ts: number;
  data: number[] | number;   // scalar becomes stride=1; array becomes stride=N
};

Stride is inferred from the first sample — keep data.length constant across every chunk.

Example

Three-channel trajectory, first few rows:

{"ts": 0.0, "data": [0.00, 0.00, 0.00]}
{"ts": 0.1, "data": [28.11, 27.61, 4.71]}
{"ts": 0.2, "data": [55.22, 51.34, 9.37]}
{"ts": 0.3, "data": [80.14, 69.87, 14.01]}

Usage

import {
  useTimeline,
  ClockProvider,
  TimelineController,
  BarTrackView,
} from '@vuer-ai/vuer-m3u'

const TRAJECTORY_URL = '/vuer-m3u-demo/trajectory/playlist.m3u8'

export function BarTrackViewDemo() {
  const { clock, state, play, pause, seek, setPlaybackRate, setLoop } = useTimeline()

  return (
    <ClockProvider clock={clock}>
      <BarTrackView
        src={TRAJECTORY_URL}
        title="Trajectory"
        channelNames={['X', 'Y', 'Z']}
        range={100}
      />
      <TimelineController
        state={state}
        onPlay={play}
        onPause={pause}
        onSeek={seek}
        onSpeedChange={setPlaybackRate}
        onLoopChange={setLoop}
      />
    </ClockProvider>
  )
}

Under the Hood

const { tracks } = useMergedTrack(engine);
const sample = useTrackSample(tracks.get(trackName), time);

When your data deserves a bespoke visualization — forward kinematics, 3D gizmos, rolling plots — copy this view as a starting point and replace the bar rows with your own rendering. See Custom Views.