From 60d505935b2b3aa6ef3a1818d9758f56a42b266b Mon Sep 17 00:00:00 2001
From: Michal Pemcak <m.pemcak@gmail.com>
Date: Sun, 27 Jul 2025 16:00:23 +0200
Subject: [PATCH] Added moving average computation

---
 README.md    | 23 ++++++++++++-----------
 package.json |  2 +-
 src/index.ts | 18 +++++++++++++++++-
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index b3a9642..646748f 100644
--- a/README.md
+++ b/README.md
@@ -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
diff --git a/package.json b/package.json
index cad9844..5694632 100644
--- a/package.json
+++ b/package.json
@@ -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": {
diff --git a/src/index.ts b/src/index.ts
index e68895e..bcc3ceb 100755
--- a/src/index.ts
+++ b/src/index.ts
@@ -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;