@ceeblue/web-utils 3.2.0 → 3.2.1

package/dist/web-utils.d.ts

@@ -1144,6 +1144,14 @@ declare class UIMetrics {
      * set the metric unit-step in pixels
      */
     set stepSize(value: number);
+    /**
+     * Return the space width available to display average metric
+     */
+    get averageDisplayWidth(): number;
+    /**
+     * Return the count of displayable metrics regarding the space available on the screen
+     */
+    get displayableCount(): number;
     private _ui;
     private _html?;
     private _lineHeight;

package/dist/web-utils.js

@@ -2253,6 +2253,20 @@ class UIMetrics {
     set stepSize(value) {
         this._stepSize = value;
     }
+    /**
+     * Return the space width available to display average metric
+     */
+    get averageDisplayWidth() {
+        // 7 chars (1 char width ≈ fontSize/2)
+        return (this._legendFontSize / 2) * 7;
+    }
+    /**
+     * Return the count of displayable metrics regarding the space available on the screen
+     */
+    get displayableCount() {
+        const width = this._ui.clientWidth - this.averageDisplayWidth;
+        return Math.ceil((width - this._labelWidth) / this._stepSize);
+    }
     constructor(ui) {
         this._ui = ui;
         // default values in pixels
@@ -2281,21 +2295,20 @@ class UIMetrics {
             return;
         }
         this._html = '';
-        const averageWidth = (this._legendFontSize / 2) * 7; // 7 chars (1 char width ≈ fontSize/2)
-        const width = this._ui.clientWidth - averageWidth;
+        const averageDisplayWidth = this.averageDisplayWidth;
+        const averageCenter = averageDisplayWidth / 2;
+        const width = this._ui.clientWidth - averageDisplayWidth;
         const graphHeight = this._lineHeight - 2 * this._graphMargin;
         const graphMiddle = Math.round(this._lineHeight / 2);
         const textY = Math.round(this._lineHeight / 2 + this._textMargin);
         const titleWidth = this._labelWidth - 2 * this._textMargin;
-        const averageCenter = averageWidth / 2;
-        for (const [key, values] of stats) {
-            let x = this._labelWidth + values.length * this._stepSize;
-            if (x >= width) {
-                x -= values.splice(0, Math.ceil((x - width) / this._stepSize)).length * this._stepSize;
-            }
+        for (const [key, fullValues] of stats) {
+            const displayableCount = Math.ceil((width - this._labelWidth) / this._stepSize);
+            const values = fullValues.slice(Math.max(0, fullValues.length - displayableCount));
             if (!values.length) {
                 continue;
             }
+            let x = this._labelWidth + values.length * this._stepSize;
             /*
             <svg class="list-group-item p-0" style="height: 40px;" xmlns="http://www.w3.org/2000/svg">
                 <text x="5" y="22">M text</text>
@@ -2403,4 +2416,4 @@ class UIMetrics {
  * This file is part of https://github.com/CeeblueTV/web-utils which is released under GNU Affero General Public License.
  * See file LICENSE or go to https://spdx.org/licenses/AGPL-3.0-or-later.html for full license details.
  */
-const VERSION = '3.2.0';export{BinaryReader,BinaryWriter,BitReader,ByteRate,Connect,EpochTime,EventEmitter,FixMap,Log,LogLevel,Loggable,NetAddress,Numbers,Queue,SDP,UIMetrics,Util,VERSION,WebSocketReliable,log};//# sourceMappingURL=web-utils.js.map
+const VERSION = '3.2.1';export{BinaryReader,BinaryWriter,BitReader,ByteRate,Connect,EpochTime,EventEmitter,FixMap,Log,LogLevel,Loggable,NetAddress,Numbers,Queue,SDP,UIMetrics,Util,VERSION,WebSocketReliable,log};//# sourceMappingURL=web-utils.js.map