SignalTrace

Tiny canvas charts for live signals, with legacy Knockout/AMD support kept intact.

The project started as a tiny graph renderer for memory-constrained interfaces such as network traffic pages on embedded devices. It is now shaped as a small framework-agnostic package for router dashboards, IoT panels, compact admin tools and live operational metrics.

Features

• Multiple line series on one canvas.
• Live updates through append(label, values).
• Bounded history through maxPoints.
• DOM-free core model in chart-core.js.
• Canvas renderer with HiDPI/Retina scaling.
• resize(width, height) for responsive layouts.
• Fixed or autoscaled Y axis through yMin, yMax, yPadding.
• Axis formatters, units, gaps and threshold lines.
• Grid lines, smarter rounded ticks, cursor tooltip and legend toggle.
• Batched appends through appendMany(), pause/resume and queued flush.
• JSON/CSV/image export helpers.
• Theme tokens and accessibility summaries.
• ESM/CJS package output with TypeScript declarations.
• Web Component plus thin React, Vue and Svelte adapters.
• Legacy AMD/Knockout files still available.

Install

SignalTrace is published to npmjs as the primary public registry and mirrored to GitHub Packages.

From npm:

npm install @llevella/signal-trace

From GitHub Packages:

npm config set @llevella:registry https://npm.pkg.github.com
npm install @llevella/signal-trace

Modern Usage

import {create} from '@llevella/signal-trace';

const chart = create('traffic-canvas', 500, 300);

chart.init([], [
	{legend: {id: 'rx', text: 'rx', color: 'green'}},
	{legend: {id: 'tx', text: 'tx', color: 'blue'}}
], {text: 'Traffic'}, {
	maxPoints: 300,
	yMin: 0,
	yUnit: ' Mbps',
	thresholds: [{value: 900, label: 'limit', color: 'orange'}]
});

chart.append('00:01', {rx: 120, tx: 84});
chart.render();

chart.cursorAt(240, 120, {render: true});
chart.toggleSeries('tx', false).render();
console.log(chart.toCSV());

Web Component

<time-series-chart id="traffic" max-points="300" height="280"></time-series-chart>

<script type="module">
	import '@llevella/signal-trace/web-component';

	const chart = document.getElementById('traffic');
	chart.setData([], [
		{legend: {id: 'rx', text: 'rx', color: 'green'}},
		{legend: {id: 'tx', text: 'tx', color: 'blue'}}
	], {text: 'Traffic'}, {yMin: 0, yUnit: ' Mbps'});

	chart.append('00:01', {rx: 120, tx: 84});
</script>

Framework adapters:

• @llevella/signal-trace/adapters/react
• @llevella/signal-trace/adapters/vue
• @llevella/signal-trace/adapters/svelte

Legacy AMD modules:

• @llevella/signal-trace/legacy/amd/core
• @llevella/signal-trace/legacy/amd/draw
• @llevella/signal-trace/legacy/amd/knockout

Project Layout

• chart-core.js - DOM-free data normalization and plot model.
• draw.js - Canvas 2D renderer.
• web-component.mjs - time-series-chart custom element.
• adapters/ - React, Vue and Svelte integration helpers.
• dist/ - generated ESM/CJS package output and TypeScript declarations.
• examples/ - live examples and benchmark page.
• docs/ - development plan, getting started guide and comparison notes.

Checks

npm run check
npm run test:unit
npm run test:e2e
npm run typecheck
npm run audit:prod
npm pack --dry-run

Documentation

• Getting Started
• Development Plan
• Comparison
• Contributing

npm run test:e2e includes a browser visual smoke test that checks real canvas pixels in the benchmark example.

Positioning

Use this project when you need a tiny live time-series chart with predictable memory usage and a very small API surface. Use Chart.js, Apache ECharts or uPlot when you need broader chart types, richer interaction systems or a larger ecosystem.