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

Added moving average computation

Browse Source
This commit is contained in:
Michal Pemcak
2025-07-27 16:00:23 +02:00
parent 0093eda1d6
commit 60d505935b
3 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
README.md
View File

@@ -16,17 +16,18 @@ Lightweight, canvas‑based charting library written in TypeScript, designed for
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 |
| 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

2
package.json
View File

@@ -3,7 +3,7 @@
"publishConfig": {
"access": "public"
},
"version": "1.0.9",
"version": "1.0.10",
"description": "Lightweight charting library for the browser and Node.js",
"license": "MIT",
"repository": {

18
src/index.ts
View File

@@ -3,6 +3,21 @@ export type ChartSeries = {
strokeColor?: string;
};
function averageData(data: [number, number][], windowSize: number = 5): [number, number][] {
if (data.length < windowSize) return data;
const result: [number, number][] = [];
for (let i = 0; i < data.length; i++) {
let sum = 0;
let count = 0;
for (let j = Math.max(0, i - Math.floor(windowSize / 2)); j <= Math.min(data.length - 1, i + Math.floor(windowSize / 2)); j++) {
sum += data[j][1];
count++;
}
result.push([data[i][0], sum / count]);
}
return result;
}
export function drawChart(
ctx: CanvasRenderingContext2D,
seriesList: ChartSeries[],
@@ -17,6 +32,7 @@ export function drawChart(
cursorX?: number | null;
maxTimeDelta?: number | null;
dateFormat?: (ts: number) => string;
averageData?:number | null;
}
): void {
const {
@@ -62,7 +78,7 @@ export function drawChart(
}
for (const series of seriesList) {
const data = series.data;
const data = averageData(series.data, opts.averageData ?? 1);
const color = series.strokeColor || '#000';
ctx.beginPath();
ctx.strokeStyle = color;