mi/uChart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added support for maxTimeDelta and dateFormat

Browse Source
This commit is contained in:
Michal Pemcak
2025-07-19 10:37:12 +02:00
parent ac387674a4
commit 474865ddb4
6 changed files with 107 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
README.md
View File

@@ -6,11 +6,39 @@ Lightweight, canvas‑based charting library written in TypeScript, designed for
## Features
- 💡 **Zero external rendering 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 & cursor read‑outs
- 💡 **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 |
```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
@@ -25,47 +53,61 @@ npm install @meteolab/uchart
<!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>
<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';
import { createChartElement } from './dist/uchart.js';
const container = document.getElementById('chartContainer');
const chart = createChartElement([], { showYAxis:true, yTicks:5 });
container.appendChild(chart.element);
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;
let phase = 0;
function sine(len, shift, amp, off, f=1){
const now=Date.now(), d=[];
for(let i=0;i<len;i++){
const t=now+i*10, x=i/len*2*Math.PI*f, y=Math.sin(x+shift)*amp+off;
d.push([t,y]);
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;
}
return d;
}
function update(){
chart.setSeries([
{ data: sine(1500, phase, 20, 10, 1), strokeColor:'#0f0' },
{ data: sine(1500, phase, 20, 10, 2), strokeColor:'#f00' },
{ data: sine(1500, phase, 20, 10, 0.5), strokeColor:'#00f' }
]);
phase += 0.01;
}
update();
setInterval(update, 50);
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