120 lines
4.2 KiB
Markdown
120 lines
4.2 KiB
Markdown
# µChart
|
||
|
||
Lightweight, canvas‑based charting library written in TypeScript, designed for real‑time data streams and small bundle size.
|
||
|
||
|
||
|
||
## Features
|
||
|
||
- 💡 **Zero external deps** – plain `<canvas>`
|
||
- ⚡ **Real‑time friendly** – redraws only what’s needed
|
||
- 📦 **ESM ready** – authored as native ES modules
|
||
- 📝 **TypeScript types** included (`*.d.ts`)
|
||
- 🎛️ Configurable axes, ticks, colors, date formatting & cursor read‑outs
|
||
|
||
## Options
|
||
|
||
The `createChartElement(seriesList, options)` function supports the following options:
|
||
|
||
| Option | Type | Description |
|
||
|-------------------|--------------------------|----------------------------------------------------------------------------|
|
||
| `width` | `number` | Fixed chart width in pixels (optional, defaults to container width) |
|
||
| `height` | `number` | Fixed chart height in pixels (optional, defaults to container height) |
|
||
| `min` | `number` | Minimum Y-axis value (optional, auto-computed if not set) |
|
||
| `max` | `number` | Maximum Y-axis value (optional, auto-computed if not set) |
|
||
| `showYAxis` | `boolean` | Whether to render Y-axis ticks and labels |
|
||
| `yTicks` | `number` | Number of Y-axis ticks (default: `5`) |
|
||
| `backgroundColor` | `string` | Optional background fill color |
|
||
| `maxTimeDelta` | `number \| null` | Gap in ms that breaks line continuity (default: `600`) |
|
||
| `dateFormat` | `(ts: number) => string` | Custom formatter for the cursor timestamp label |
|
||
| `averageData` | `number` | Compute simple moving average of lasy n data to smooth out line (optional) |
|
||
|
||
```ts
|
||
// Example: format timestamp to full Czech date+time
|
||
dateFormat: (ts) => new Date(ts).toLocaleString('cs-CZ', {
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
second: '2-digit',
|
||
day: '2-digit',
|
||
month: '2-digit',
|
||
year: 'numeric'
|
||
})
|
||
```
|
||
|
||
## Installation
|
||
|
||
```bash
|
||
npm install @meteolab/uchart
|
||
```
|
||
|
||
|
||
## Quick strart
|
||
```html
|
||
<!-- test.html (included in the repo) -->
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>uChart Interactive Test</title>
|
||
<style>
|
||
#chartContainer { width: 1000px; height: 400px; margin: 20px auto; background:#111; }
|
||
body { background:#222; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="chartContainer"></div>
|
||
|
||
<script type="module">
|
||
import { createChartElement } from './dist/uchart.js';
|
||
|
||
const container = document.getElementById('chartContainer');
|
||
const chart = createChartElement([], {
|
||
showYAxis: true,
|
||
yTicks: 5,
|
||
dateFormat: (ts) => new Date(ts).toLocaleString('cs-CZ', {
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
second: '2-digit',
|
||
day: '2-digit',
|
||
month: '2-digit',
|
||
year: 'numeric'
|
||
})
|
||
}); container.appendChild(chart.element);
|
||
|
||
let phase = 0;
|
||
|
||
function generateSineSeries(len, shift, amp, off, freq = 1){
|
||
const now = Date.now();
|
||
const data=[];
|
||
for(let i=0;i<len;i++){
|
||
const t = now + i*10;
|
||
const x = i/len*2*Math.PI*freq;
|
||
const y = Math.sin(x+shift)*amp + off;
|
||
data.push([t,y]);
|
||
}
|
||
return data;
|
||
}
|
||
|
||
function update(){
|
||
chart.setSeries([
|
||
{ data: generateSineSeries(1500, phase, 20, 10, 1), strokeColor:'#0f0' },
|
||
{ data: generateSineSeries(1500, phase, 20, 10, 2), strokeColor:'#f00' },
|
||
{ data: generateSineSeries(1500, phase, 20, 10, 0.5), strokeColor:'#00f' }
|
||
]);
|
||
phase += 0.01;
|
||
}
|
||
update()
|
||
setInterval(update, 50);
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|
||
```
|
||
|
||
## Test
|
||
During development you can run a live dev server:
|
||
|
||
```bash
|
||
npm run serve
|
||
```
|