stats-gl 2.4.2 → 3.0.1

package/dist/panel.cjs

@@ -60,6 +60,7 @@ class Panel {
   initializeCanvas() {
     if (!this.context)
       return;
+    this.context.imageSmoothingEnabled = false;
     this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif";
     this.context.textBaseline = "top";
     this.gradient = this.createGradient();
@@ -67,51 +68,73 @@ class Panel {
     this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
     this.context.fillStyle = this.fg;
     this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
-    this.context.fillStyle = this.fg;
-    this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
     this.context.fillStyle = this.bg;
     this.context.globalAlpha = 0.9;
     this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
   }
+  // Update only text portion
   update(value, valueGraph, maxValue, maxGraph, decimals = 0) {
     if (!this.context || !this.gradient)
       return;
     const min = Math.min(Infinity, value);
     const max = Math.max(maxValue, value);
-    maxGraph = Math.max(maxGraph, valueGraph);
     this.context.globalAlpha = 1;
     this.context.fillStyle = this.bg;
     this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
     this.context.fillStyle = this.fg;
     this.context.fillText(
-      `${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(
-        max.toFixed(decimals)
-      )})`,
+      `${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(max.toFixed(decimals))})`,
       this.TEXT_X,
       this.TEXT_Y
     );
+  }
+  // Update only graph portion
+  updateGraph(valueGraph, maxGraph) {
+    if (!this.context || !this.gradient)
+      return;
+    if (valueGraph === 0 && maxGraph === 0) {
+      maxGraph = 1;
+    }
+    maxGraph = Math.max(maxGraph, valueGraph, 0.1);
+    valueGraph = Math.max(valueGraph, 0);
+    const graphX = Math.round(this.GRAPH_X);
+    const graphY = Math.round(this.GRAPH_Y);
+    const graphWidth = Math.round(this.GRAPH_WIDTH);
+    const graphHeight = Math.round(this.GRAPH_HEIGHT);
+    const pr = Math.round(this.PR);
     this.context.drawImage(
       this.canvas,
-      this.GRAPH_X + this.PR,
-      this.GRAPH_Y,
-      this.GRAPH_WIDTH - this.PR,
-      this.GRAPH_HEIGHT,
-      this.GRAPH_X,
-      this.GRAPH_Y,
-      this.GRAPH_WIDTH - this.PR,
-      this.GRAPH_HEIGHT
+      graphX + pr,
+      graphY,
+      graphWidth - pr,
+      graphHeight,
+      graphX,
+      graphY,
+      graphWidth - pr,
+      graphHeight
+    );
+    this.context.fillStyle = this.bg;
+    this.context.fillRect(
+      graphX + graphWidth - pr,
+      graphY,
+      pr,
+      graphHeight
+    );
+    const columnHeight = Math.min(
+      graphHeight,
+      Math.round(valueGraph / maxGraph * graphHeight)
     );
-    const columnHeight = this.GRAPH_HEIGHT - (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT;
     if (columnHeight > 0) {
-      this.context.globalAlpha = 1;
+      this.context.globalAlpha = 0.9;
       this.context.fillStyle = this.gradient;
       this.context.fillRect(
-        this.GRAPH_X + this.GRAPH_WIDTH - this.PR,
-        this.GRAPH_Y + this.GRAPH_HEIGHT - columnHeight,
-        this.PR,
+        graphX + graphWidth - pr,
+        graphY + (graphHeight - columnHeight),
+        pr,
         columnHeight
       );
     }
+    this.context.globalAlpha = 1;
   }
 }
 exports.Panel = Panel;

package/dist/panel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"panel.cjs","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"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"}
+{"version":3,"file":"panel.cjs","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"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"}

package/dist/panel.js

@@ -58,6 +58,7 @@ class Panel {
   initializeCanvas() {
     if (!this.context)
       return;
+    this.context.imageSmoothingEnabled = false;
     this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif";
     this.context.textBaseline = "top";
     this.gradient = this.createGradient();
@@ -65,51 +66,73 @@ class Panel {
     this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
     this.context.fillStyle = this.fg;
     this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
-    this.context.fillStyle = this.fg;
-    this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
     this.context.fillStyle = this.bg;
     this.context.globalAlpha = 0.9;
     this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
   }
+  // Update only text portion
   update(value, valueGraph, maxValue, maxGraph, decimals = 0) {
     if (!this.context || !this.gradient)
       return;
     const min = Math.min(Infinity, value);
     const max = Math.max(maxValue, value);
-    maxGraph = Math.max(maxGraph, valueGraph);
     this.context.globalAlpha = 1;
     this.context.fillStyle = this.bg;
     this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
     this.context.fillStyle = this.fg;
     this.context.fillText(
-      `${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(
-        max.toFixed(decimals)
-      )})`,
+      `${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(max.toFixed(decimals))})`,
       this.TEXT_X,
       this.TEXT_Y
     );
+  }
+  // Update only graph portion
+  updateGraph(valueGraph, maxGraph) {
+    if (!this.context || !this.gradient)
+      return;
+    if (valueGraph === 0 && maxGraph === 0) {
+      maxGraph = 1;
+    }
+    maxGraph = Math.max(maxGraph, valueGraph, 0.1);
+    valueGraph = Math.max(valueGraph, 0);
+    const graphX = Math.round(this.GRAPH_X);
+    const graphY = Math.round(this.GRAPH_Y);
+    const graphWidth = Math.round(this.GRAPH_WIDTH);
+    const graphHeight = Math.round(this.GRAPH_HEIGHT);
+    const pr = Math.round(this.PR);
     this.context.drawImage(
       this.canvas,
-      this.GRAPH_X + this.PR,
-      this.GRAPH_Y,
-      this.GRAPH_WIDTH - this.PR,
-      this.GRAPH_HEIGHT,
-      this.GRAPH_X,
-      this.GRAPH_Y,
-      this.GRAPH_WIDTH - this.PR,
-      this.GRAPH_HEIGHT
+      graphX + pr,
+      graphY,
+      graphWidth - pr,
+      graphHeight,
+      graphX,
+      graphY,
+      graphWidth - pr,
+      graphHeight
+    );
+    this.context.fillStyle = this.bg;
+    this.context.fillRect(
+      graphX + graphWidth - pr,
+      graphY,
+      pr,
+      graphHeight
+    );
+    const columnHeight = Math.min(
+      graphHeight,
+      Math.round(valueGraph / maxGraph * graphHeight)
     );
-    const columnHeight = this.GRAPH_HEIGHT - (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT;
     if (columnHeight > 0) {
-      this.context.globalAlpha = 1;
+      this.context.globalAlpha = 0.9;
       this.context.fillStyle = this.gradient;
       this.context.fillRect(
-        this.GRAPH_X + this.GRAPH_WIDTH - this.PR,
-        this.GRAPH_Y + this.GRAPH_HEIGHT - columnHeight,
-        this.PR,
+        graphX + graphWidth - pr,
+        graphY + (graphHeight - columnHeight),
+        pr,
         columnHeight
       );
     }
+    this.context.globalAlpha = 1;
   }
 }
 export {

package/dist/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"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"}
+{"version":3,"file":"panel.js","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"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"}

package/dist/stats-gl.d.ts

@@ -18,11 +18,13 @@ declare class Panel {
     private createGradient;
     private initializeCanvas;
     update(value: number, valueGraph: number, maxValue: number, maxGraph: number, decimals?: number): void;
+    updateGraph(valueGraph: number, maxGraph: number): void;
 }
 
 interface StatsOptions {
     trackGPU?: boolean;
     logsPerSecond?: number;
+    graphsPerSecond?: number;
     samplesLog?: number;
     samplesGraph?: number;
     precision?: number;
@@ -40,6 +42,7 @@ declare class Stats {
     private samplesGraph;
     private precision;
     private logsPerSecond;
+    private graphsPerSecond;
     private gl;
     private ext;
     private info?;
@@ -49,13 +52,12 @@ declare class Stats {
     private beginTime;
     private prevTime;
     private prevCpuTime;
-    private frames;
+    private frameTimes;
     private renderCount;
     private isRunningCPUProfiling;
     private totalCpuDuration;
     private totalGpuDuration;
     private totalGpuDurationCompute;
-    private totalFps;
     private fpsPanel;
     private msPanel;
     private gpuPanel;
@@ -64,8 +66,14 @@ declare class Stats {
     private averageCpu;
     private averageGpu;
     private averageGpuCompute;
+    private updateCounter;
+    private prevGraphTime;
+    private lastMin;
+    private lastMax;
+    private lastValue;
+    private prevTextTime;
     static Panel: typeof Panel;
-    constructor({ trackGPU, logsPerSecond, samplesLog, samplesGraph, precision, minimal, horizontal, mode }?: StatsOptions);
+    constructor({ trackGPU, logsPerSecond, graphsPerSecond, samplesLog, samplesGraph, precision, minimal, horizontal, mode }?: StatsOptions);
     private initializeDOM;
     private setupEventListeners;
     private handleClick;
@@ -80,25 +88,28 @@ declare class Stats {
     end(): void;
     update(): void;
     private processWebGPUTimestamps;
-    private updateAverages;
     private resetCounters;
     resizePanel(panel: Panel, offset: number): void;
     addPanel(panel: Panel, offset: number): Panel;
     showPanel(id: number): void;
     processGpuQueries(): void;
     endInternal(): number;
-    addToAverage(value: number, averageArray: {
-        logs: any;
-        graph: any;
-    }): void;
+    private updatePanelComponents;
     beginProfiling(marker: string): void;
     endProfiling(startMarker: string | PerformanceMeasureOptions | undefined, endMarker: string | undefined, measureName: string): void;
     updatePanel(panel: {
         update: any;
+        updateGraph: any;
+        name: string;
     } | null, averageArray: {
         logs: number[];
         graph: number[];
     }, precision?: number): void;
+    private updateAverages;
+    addToAverage(value: number, averageArray: {
+        logs: any;
+        graph: any;
+    }): void;
     get domElement(): HTMLDivElement;
     patchThreeRenderer(renderer: any): void;
 }

package/lib/main.ts

@@ -4,6 +4,7 @@ import { Panel } from './panel';
 interface StatsOptions {
   trackGPU?: boolean;
   logsPerSecond?: number;
+  graphsPerSecond?: number;
   samplesLog?: number;
   samplesGraph?: number;
   precision?: number;
@@ -40,6 +41,7 @@ class Stats {
   private samplesGraph: number;
   private precision: number;
   private logsPerSecond: number;
+  private graphsPerSecond: number;
 
   private gl: WebGL2RenderingContext | null = null;
   private ext: any | null = null;
@@ -51,14 +53,14 @@ class Stats {
   private beginTime: number;
   private prevTime: number;
   private prevCpuTime: number;
-  private frames = 0;
+  private frameTimes: number[] = [];  // Store frame timestamps
+
   private renderCount = 0;
   private isRunningCPUProfiling = false;
 
   private totalCpuDuration = 0;
   private totalGpuDuration = 0;
   private totalGpuDurationCompute = 0;
-  private totalFps = 0;
 
   private fpsPanel: Panel;
   private msPanel: Panel;
@@ -70,12 +72,21 @@ class Stats {
   private averageGpu: AverageData = { logs: [], graph: [] };
   private averageGpuCompute: AverageData = { logs: [], graph: [] };
 
+  private updateCounter = 0;
+  private prevGraphTime: number;
+  private lastMin: { [key: string]: number } = {};
+  private lastMax: { [key: string]: number } = {};
+  private lastValue: { [key: string]: number } = {};
+  private prevTextTime: number;
+
+
   static Panel = Panel;
 
   constructor({
     trackGPU = false,
-    logsPerSecond = 30,
-    samplesLog = 60,
+    logsPerSecond = 4,
+    graphsPerSecond = 30,
+    samplesLog = 40,
     samplesGraph = 10,
     precision = 2,
     minimal = false,
@@ -90,6 +101,9 @@ class Stats {
     this.samplesGraph = samplesGraph;
     this.precision = precision;
     this.logsPerSecond = logsPerSecond;
+    this.graphsPerSecond = graphsPerSecond;
+    const prevGraphTime = performance.now();
+    this.prevGraphTime = prevGraphTime
 
     // Initialize DOM
     this.dom = document.createElement('div');
@@ -98,6 +112,8 @@ class Stats {
     // Initialize timing
     this.beginTime = performance.now();
     this.prevTime = this.beginTime;
+    this.prevTextTime = this.beginTime;
+
     this.prevCpuTime = this.beginTime;
 
     // Create panels
@@ -248,39 +264,35 @@ class Stats {
   }
 
   public update(): void {
+    // Always end the current CPU profiling if it's running
+    if (this.isRunningCPUProfiling) {
+      this.endProfiling('cpu-started', 'cpu-finished', 'cpu-duration');
+      // Add to averages immediately after getting the duration
+      // this.addToAverage(this.totalCpuDuration, this.averageCpu);
+    }
+
     if (!this.info) {
       this.processGpuQueries();
     } else {
       this.processWebGPUTimestamps();
     }
 
-    this.endProfiling('cpu-started', 'cpu-finished', 'cpu-duration');
-    this.updateAverages();
+    this.updateAverages()
     this.resetCounters();
   }
 
   private processWebGPUTimestamps(): void {
     this.totalGpuDuration = this.info!.render.timestamp;
     this.totalGpuDurationCompute = this.info!.compute.timestamp;
-    this.addToAverage(this.totalGpuDurationCompute, this.averageGpuCompute);
-  }
-
-  private updateAverages(): void {
-    this.addToAverage(this.totalCpuDuration, this.averageCpu);
-    this.addToAverage(this.totalGpuDuration, this.averageGpu);
   }
 
   private resetCounters(): void {
     this.renderCount = 0;
-    if (this.totalCpuDuration === 0) {
-      this.beginProfiling('cpu-started');
-    }
     this.totalCpuDuration = 0;
-    this.totalFps = 0;
+    this.beginProfiling('cpu-started');
     this.beginTime = this.endInternal();
   }
 
-
   resizePanel(panel: Panel, offset: number) {
 
     panel.canvas.style.position = 'absolute';
@@ -355,54 +367,95 @@ class Stats {
   }
 
   endInternal() {
+    const currentTime = performance.now();
 
-    this.frames++;
-    const time = (performance || Date).now();
-    const elapsed = time - this.prevTime;
+    this.frameTimes.push(currentTime);
 
-    // Calculate FPS more frequently based on logsPerSecond
-    if (time >= this.prevCpuTime + 1000 / this.logsPerSecond) {
-      // Calculate FPS and round to nearest integer
-      const fps = Math.round((this.frames * 1000) / elapsed);
+    // Remove frames older than 1 second
+    while (this.frameTimes.length > 0 && this.frameTimes[0] <= currentTime - 1000) {
+      this.frameTimes.shift();
+    }
 
-      // Add to FPS averages
-      this.addToAverage(fps, this.averageFps);
+    // Calculate FPS based on frames in the last second
+    const fps = Math.round(this.frameTimes.length);
 
-      // Update all panels
-      this.updatePanel(this.fpsPanel, this.averageFps, 0);
-      this.updatePanel(this.msPanel, this.averageCpu, this.precision);
-      this.updatePanel(this.gpuPanel, this.averageGpu, this.precision);
+    this.addToAverage(fps, this.averageFps);
 
-      if (this.gpuPanelCompute) {
-        this.updatePanel(this.gpuPanelCompute, this.averageGpuCompute);
-      }
+    const shouldUpdateText = currentTime >= this.prevTextTime + 1000 / this.logsPerSecond;
+    const shouldUpdateGraph = currentTime >= this.prevGraphTime + 1000 / this.graphsPerSecond;
 
-      // Reset frame counter for next interval
-      this.frames = 0;
-      this.prevCpuTime = time;
-      this.prevTime = time;
+    this.updatePanelComponents(this.fpsPanel, this.averageFps, 0, shouldUpdateText, shouldUpdateGraph);
+    this.updatePanelComponents(this.msPanel, this.averageCpu, this.precision, shouldUpdateText, shouldUpdateGraph);
+    if (this.gpuPanel) {
+      this.updatePanelComponents(this.gpuPanel, this.averageGpu, this.precision, shouldUpdateText, shouldUpdateGraph);
+    }
+    if (this.gpuPanelCompute) {
+      this.updatePanelComponents(this.gpuPanelCompute, this.averageGpuCompute, this.precision, shouldUpdateText, shouldUpdateGraph);
     }
 
-    return time;
+    if (shouldUpdateText) {
+      this.prevTextTime = currentTime;
+    }
+    if (shouldUpdateGraph) {
+      this.prevGraphTime = currentTime;
+    }
 
+    return currentTime;
   }
 
-  addToAverage(value: number, averageArray: { logs: any; graph: any; }) {
+  private updatePanelComponents(
+    panel: Panel | null,
+    averageArray: { logs: number[], graph: number[] },
+    precision: number,
+    shouldUpdateText: boolean,
+    shouldUpdateGraph: boolean
+  ) {
+    if (!panel || averageArray.logs.length === 0) return;
+
+    // Initialize tracking for this panel if not exists
+    if (!(panel.name in this.lastMin)) {
+      this.lastMin[panel.name] = Infinity;
+      this.lastMax[panel.name] = 0;
+      this.lastValue[panel.name] = 0;
+    }
 
-    averageArray.logs.push(value);
-    if (averageArray.logs.length > this.samplesLog) {
+    const currentValue = averageArray.logs[averageArray.logs.length - 1];
+    const recentMax = Math.max(...averageArray.logs.slice(-30));
 
-      averageArray.logs.shift();
+    this.lastMin[panel.name] = Math.min(this.lastMin[panel.name], currentValue);
+    this.lastMax[panel.name] = Math.max(this.lastMax[panel.name], currentValue);
 
-    }
+    // Smooth the display value
+    this.lastValue[panel.name] = this.lastValue[panel.name] * 0.7 + currentValue * 0.3;
 
-    averageArray.graph.push(value);
-    if (averageArray.graph.length > this.samplesGraph) {
+    const graphMax = Math.max(recentMax, ...averageArray.graph.slice(-this.samplesGraph));
 
-      averageArray.graph.shift();
+    this.updateCounter++;
 
+    // Reset min/max periodically
+    if (this.updateCounter % (this.logsPerSecond * 2) === 0) {
+      this.lastMax[panel.name] = recentMax;
+      this.lastMin[panel.name] = currentValue;
     }
 
+    // Update text if it's time
+    if (shouldUpdateText) {
+      panel.update(
+        this.lastValue[panel.name],
+        currentValue,
+        this.lastMax[panel.name],
+        graphMax,
+        precision
+      );
+    }
+
+    // Update graph if it's time
+    if (shouldUpdateGraph) {
+      panel.updateGraph(
+        currentValue,
+        graphMax
+      );
+    }
   }
 
   beginProfiling(marker: string) {
@@ -429,39 +482,88 @@ class Stats {
 
   }
 
-  updatePanel(panel: { update: any; } | null, averageArray: { logs: number[], graph: number[] }, precision = 2) {
+  updatePanel(panel: { update: any; updateGraph: any; name: string; } | null, averageArray: { logs: number[], graph: number[] }, precision = 2) {
+    if (!panel || averageArray.logs.length === 0) return;
 
-    if (averageArray.logs.length > 0) {
+    const currentTime = performance.now();
 
-      let sumLog = 0;
-      let max = 0.01;
+    // Initialize tracking for this panel if not exists
+    if (!(panel.name in this.lastMin)) {
+      this.lastMin[panel.name] = Infinity;
+      this.lastMax[panel.name] = 0;
+      this.lastValue[panel.name] = 0;
+    }
 
-      for (let i = 0; i < averageArray.logs.length; i++) {
+    // Get the current value and recent max
+    const currentValue = averageArray.logs[averageArray.logs.length - 1];
+    const recentMax = Math.max(...averageArray.logs.slice(-30));
 
-        sumLog += averageArray.logs[i];
+    // Update running statistics
+    this.lastMin[panel.name] = Math.min(this.lastMin[panel.name], currentValue);
+    this.lastMax[panel.name] = Math.max(this.lastMax[panel.name], currentValue);
 
-        if (averageArray.logs[i] > max) {
-          max = averageArray.logs[i];
-        }
+    // Smooth the display value
+    this.lastValue[panel.name] = this.lastValue[panel.name] * 0.7 + currentValue * 0.3;
 
-      }
+    // Calculate graph scaling value
+    const graphMax = Math.max(recentMax, ...averageArray.graph.slice(-this.samplesGraph));
 
-      let sumGraph = 0;
-      let maxGraph = 0.01;
-      for (let i = 0; i < averageArray.graph.length; i++) {
+    this.updateCounter++;
 
-        sumGraph += averageArray.graph[i];
-
-        if (averageArray.graph[i] > maxGraph) {
-          maxGraph = averageArray.graph[i];
-        }
+    // Reset min/max periodically
+    if (this.updateCounter % (this.logsPerSecond * 2) === 0) {
+      this.lastMax[panel.name] = recentMax;
+      this.lastMin[panel.name] = currentValue;
+    }
 
+    if (panel.update) {
+      // Check if it's time to update the text (based on logsPerSecond)
+      if (currentTime >= this.prevCpuTime + 1000 / this.logsPerSecond) {
+        panel.update(
+          this.lastValue[panel.name],
+          currentValue,
+          this.lastMax[panel.name],
+          graphMax,
+          precision
+        );
       }
 
-      if (panel) {
-        panel.update(sumLog / Math.min(averageArray.logs.length, this.samplesLog), sumGraph / Math.min(averageArray.graph.length, this.samplesGraph), max, maxGraph, precision);
+      // Check if it's time to update the graph (based on graphsPerSecond)
+      if (currentTime >= this.prevGraphTime + 1000 / this.graphsPerSecond) {
+        panel.updateGraph(
+          currentValue,
+          graphMax
+        );
+        this.prevGraphTime = currentTime;
       }
+    }
+  }
+
+  private updateAverages(): void {
+    this.addToAverage(this.totalCpuDuration, this.averageCpu);
+    this.addToAverage(this.totalGpuDuration, this.averageGpu);
+    // Add GPU Compute to the main update flow
+    if (this.info && this.totalGpuDurationCompute !== undefined) {
+      this.addToAverage(this.totalGpuDurationCompute, this.averageGpuCompute);
+    }
+  }
+
+  addToAverage(value: number, averageArray: { logs: any; graph: any; }) {
+    // Validate value
+    // if (value === undefined || value === null || isNaN(value)) {
+    //   return;
+    // }
 
+    // Store raw values for logs
+    averageArray.logs.push(value);
+    if (averageArray.logs.length > this.samplesLog) {
+      averageArray.logs = averageArray.logs.slice(-this.samplesLog);
+    }
+
+    // For graph, store raw values
+    averageArray.graph.push(value);
+    if (averageArray.graph.length > this.samplesGraph) {
+      averageArray.graph = averageArray.graph.slice(-this.samplesGraph);
     }
   }