useStreamingData

The useStreamingData hook creates smooth, animated data streams for real-time visualizations. It interpolates between data points and maintains a sliding window of values, perfect for live charts and dashboards. Used in components: Not used internally by Once UI components

This is a utility hook for building custom real-time data visualizations. Use it when you need to create live charts, dashboards, or streaming data displays with smooth animations.

Features

Smooth interpolation between data points
Configurable sliding window size
Customizable update intervals
Pause/resume streaming
Reset to initial state
RequestAnimationFrame-based updates

Basic usage

Create a streaming line chart:

StreamingChart.tsx

import { useStreamingData } from '@once-ui-system/core';
import { LineChart, Line } from 'recharts';

function StreamingChart() {
const { data, running, setRunning } = useStreamingData({
  initialData: generateInitialData(),
  windowSize: 20,
  intervalMs: 1000,
  xKey: 'time',
  numericKeys: ['value'],
  getNextTarget: ({ lastPoint, nextX }) => ({
    value: Math.random() * 100
  })
});

return (
  <div>
    <button onClick={() => setRunning(!running)}>
      {running ? 'Pause' : 'Resume'}
    </button>
    <LineChart width={600} height={300} data={data}>
      <Line
        type="monotone"
        dataKey="value"
        stroke="#8884d8"
        isAnimationActive={false}
      />
    </LineChart>
  </div>
);
}

Multi-series data

Stream multiple data series:

MultiSeriesChart.tsx

function MultiSeriesChart() {
const { data, running, setRunning, reset } = useStreamingData({
  initialData: [
    { time: 0, cpu: 20, memory: 30, disk: 15 },
    { time: 1, cpu: 25, memory: 32, disk: 16 }
  ],
  windowSize: 30,
  intervalMs: 2000,
  stepMs: 16,
  xKey: 'time',
  numericKeys: ['cpu', 'memory', 'disk'],
  getNextTarget: ({ lastPoint }) => ({
    cpu: Math.min(100, Math.max(0, lastPoint.cpu + (Math.random() - 0.5) * 20)),
    memory: Math.min(100, Math.max(0, lastPoint.memory + (Math.random() - 0.5) * 15)),
    disk: Math.min(100, Math.max(0, lastPoint.disk + (Math.random() - 0.5) * 10))
  })
});

return (
  <div>
    <button onClick={() => setRunning(!running)}>
      {running ? 'Pause' : 'Resume'}
    </button>
    <button onClick={reset}>Reset</button>
    <LineChart width={800} height={400} data={data}>
      <Line dataKey="cpu" stroke="#ff0000" />
      <Line dataKey="memory" stroke="#00ff00" />
      <Line dataKey="disk" stroke="#0000ff" />
    </LineChart>
  </div>
);
}

API Reference

Prop	Type	Default
initialData	T[]	—
windowSize	number	—
intervalMs	number	—
stepMs	number	16
xKey	keyof T	—
numericKeys	Array<keyof T>	—
getNextTarget	({ lastPoint, nextX }) => Partial<T>	—

Return value

Return type

{
data: T[];                                    // Current data window
running: boolean;                             // Whether streaming is active
setRunning: (running: boolean) => void;       // Control streaming state
reset: () => void;                            // Reset to initial data
}

How it works

Initialization: Starts with initialData trimmed to windowSize
New point creation: Every intervalMs, creates a new data point
Interpolation: Smoothly animates from current to target values
Sliding window: Maintains only the last windowSize points
Animation: Updates every stepMs using requestAnimationFrame

Performance tips

Use stepMs: 16 for 60fps (smooth)
Use stepMs: 33 for 30fps (more efficient)
Keep windowSize reasonable (20-50 points)
Avoid expensive calculations in getNextTarget

Real-world example

System monitoring dashboard:

SystemMonitor.tsx

function SystemMonitor() {
const { data, running, setRunning } = useStreamingData({
  initialData: Array.from({ length: 20 }, (_, i) => ({
    time: i,
    cpu: 20 + Math.random() * 10,
    memory: 40 + Math.random() * 10,
    network: 10 + Math.random() * 5
  })),
  windowSize: 30,
  intervalMs: 1000,
  xKey: 'time',
  numericKeys: ['cpu', 'memory', 'network'],
  getNextTarget: ({ lastPoint }) => {
    // Simulate realistic system metrics
    const cpuChange = (Math.random() - 0.5) * 15;
    const memoryChange = (Math.random() - 0.5) * 5;
    const networkChange = (Math.random() - 0.5) * 10;
    
    return {
      cpu: Math.min(100, Math.max(0, lastPoint.cpu + cpuChange)),
      memory: Math.min(100, Math.max(0, lastPoint.memory + memoryChange)),
      network: Math.min(100, Math.max(0, lastPoint.network + networkChange))
    };
  }
});

return (
  <Flex direction="column" gap="16">
    <Flex gap="8">
      <Button onClick={() => setRunning(!running)}>
        {running ? 'Pause' : 'Resume'}
      </Button>
      <Text>CPU: {data[data.length - 1]?.cpu.toFixed(1)}%</Text>
      <Text>Memory: {data[data.length - 1]?.memory.toFixed(1)}%</Text>
    </Flex>
    <LineChart width={800} height={300} data={data}>
      <Line dataKey="cpu" stroke="#ff4444" isAnimationActive={false} />
      <Line dataKey="memory" stroke="#44ff44" isAnimationActive={false} />
      <Line dataKey="network" stroke="#4444ff" isAnimationActive={false} />
    </LineChart>
  </Flex>
);
}

useStreamingViewport - Similar but with dynamic viewport adjustment