1.8.4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.8.2",
+  "version": "1.8.4",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -26,7 +26,7 @@
     "@push.rocks/smartpromise": "^4.2.0",
     "@push.rocks/smartstring": "^4.0.15",
     "@tsclass/tsclass": "^9.2.0",
-    "@webcontainer/api": "1.6.1",
+    "@webcontainer/api": "1.2.0",
     "apexcharts": "^4.7.0",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
@@ -43,7 +43,7 @@
     "@git.zone/tswatch": "^2.0.37",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^6.0.3",
-    "@types/node": "^24.0.0"
+    "@types/node": "^22.0.0"
   },
   "files": [
     "ts/**/*",

pnpm-lock.yaml

@@ -42,8 +42,8 @@ importers:
         specifier: ^9.2.0
         version: 9.2.0
       '@webcontainer/api':
-        specifier: 1.6.1
-        version: 1.6.1
+        specifier: 1.2.0
+        version: 1.2.0
       apexcharts:
         specifier: ^4.7.0
         version: 4.7.0
@@ -88,8 +88,8 @@ importers:
         specifier: ^6.0.3
         version: 6.0.3(@aws-sdk/credential-providers@3.826.0)(socks@2.8.5)
       '@types/node':
-        specifier: ^24.0.0
-        version: 24.0.0
+        specifier: ^22.0.0
+        version: 22.15.31
 
 packages:
 
@@ -1609,8 +1609,8 @@ packages:
   '@types/node-forge@1.3.11':
     resolution: {integrity: sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==}
 
-  '@types/node@24.0.0':
-    resolution: {integrity: sha512-yZQa2zm87aRVcqDyH5+4Hv9KYgSdgwX1rFnGvpbzMaC7YAljmhBET93TPiTd3ObwTL+gSpIzPKg5BqVxdCvxKg==}
+  '@types/node@22.15.31':
+    resolution: {integrity: sha512-jnVe5ULKl6tijxUhvQeNbQG/84fHfg+yMak02cT8QVhBx/F05rAVxCGBYYTh2EKz22D6JF5ktXuNwdx7b9iEGw==}
 
   '@types/parse5@6.0.3':
     resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
@@ -1740,8 +1740,8 @@ packages:
     resolution: {integrity: sha512-84E1025aUSjvZU1j17eCTwV7m5Zg3cZHErV3+CaJM9JPCesZwLraIa0ONIQ9w4KLgcDgJFw9UnJ0LbFf42h6tg==}
     engines: {node: '>=18.0.0'}
 
-  '@webcontainer/api@1.6.1':
-    resolution: {integrity: sha512-2RS2KiIw32BY1Icf6M1DvqSmcon9XICZCDgS29QJb2NmF12ZY2V5Ia+949hMKB3Wno+P/Y8W+sPP59PZeXSELg==}
+  '@webcontainer/api@1.2.0':
+    resolution: {integrity: sha512-tzoKBd4lLdhHy5GHFpUkl+ndoSba8JqmB7x0ZQFnWfjbcbQOvKQfxA8MEMUYhgqjWHnbrWdAfnBEHz5f5lYG5A==}
 
   '@yr/monotone-cubic-spline@1.0.3':
     resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==}
@@ -4265,8 +4265,8 @@ packages:
     resolution: {integrity: sha512-ZPtzy0hu4cZjv3z5NW9gfKnNLjoz4y6uv4HlelAjDK7sY/xOkKZv9xK/WQpcsBB3jEybChz9DPC2U/+cusjJVQ==}
     engines: {node: '>=18'}
 
-  undici-types@7.8.0:
-    resolution: {integrity: sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==}
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
@@ -5504,7 +5504,7 @@ snapshots:
       '@jest/schemas': 29.6.3
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
       '@types/yargs': 17.0.33
       chalk: 4.1.2
 
@@ -6932,19 +6932,19 @@ snapshots:
 
   '@types/accepts@1.3.7':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/babel__code-frame@7.0.6': {}
 
   '@types/body-parser@1.19.5':
     dependencies:
       '@types/connect': 3.4.38
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/body-parser@1.19.6':
     dependencies:
       '@types/connect': 3.4.38
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/buffer-json@2.0.3': {}
 
@@ -6960,17 +6960,17 @@ snapshots:
 
   '@types/clean-css@4.2.11':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
       source-map: 0.6.1
 
   '@types/co-body@6.1.3':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
       '@types/qs': 6.14.0
 
   '@types/connect@3.4.38':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/content-disposition@0.5.9': {}
 
@@ -6981,11 +6981,11 @@ snapshots:
       '@types/connect': 3.4.38
       '@types/express': 5.0.3
       '@types/keygrip': 1.0.6
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/cors@2.8.17':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/debounce@1.2.4': {}
 
@@ -6999,7 +6999,7 @@ snapshots:
 
   '@types/express-serve-static-core@5.0.6':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
       '@types/qs': 6.9.18
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.4
@@ -7022,30 +7022,30 @@ snapshots:
 
   '@types/from2@2.3.5':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/fs-extra@11.0.4':
     dependencies:
       '@types/jsonfile': 6.1.4
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/fs-extra@9.0.13':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/glob@7.2.0':
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/glob@8.1.0':
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/gunzip-maybe@1.4.2':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/hast@3.0.4':
     dependencies:
@@ -7081,7 +7081,7 @@ snapshots:
 
   '@types/jsonfile@6.1.4':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/keygrip@1.0.6': {}
 
@@ -7098,7 +7098,7 @@ snapshots:
       '@types/http-errors': 2.0.5
       '@types/keygrip': 1.0.6
       '@types/koa-compose': 3.2.8
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/mdast@4.0.4':
     dependencies:
@@ -7116,11 +7116,11 @@ snapshots:
 
   '@types/node-forge@1.3.11':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
-  '@types/node@24.0.0':
+  '@types/node@22.15.31':
     dependencies:
-      undici-types: 7.8.0
+      undici-types: 6.21.0
 
   '@types/parse5@6.0.3': {}
 
@@ -7138,30 +7138,30 @@ snapshots:
 
   '@types/s3rver@3.7.4':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/semver@7.7.0': {}
 
   '@types/send@0.17.4':
     dependencies:
       '@types/mime': 1.3.5
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/send@0.17.5':
     dependencies:
       '@types/mime': 1.3.5
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/serve-static@1.15.7':
     dependencies:
       '@types/http-errors': 2.0.4
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
       '@types/send': 0.17.4
 
   '@types/serve-static@1.15.8':
     dependencies:
       '@types/http-errors': 2.0.5
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
       '@types/send': 0.17.5
 
   '@types/sinon-chai@3.2.12':
@@ -7181,11 +7181,11 @@ snapshots:
 
   '@types/tar-stream@2.2.3':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/through2@2.0.41':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/triple-beam@1.3.5': {}
 
@@ -7209,18 +7209,18 @@ snapshots:
 
   '@types/whatwg-url@8.2.2':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
       '@types/webidl-conversions': 7.0.3
 
   '@types/which@3.0.4': {}
 
   '@types/ws@7.4.7':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/ws@8.18.1':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
 
   '@types/yargs-parser@21.0.3': {}
 
@@ -7230,7 +7230,7 @@ snapshots:
 
   '@types/yauzl@2.10.3':
     dependencies:
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
     optional: true
 
   '@ungap/structured-clone@1.3.0': {}
@@ -7311,7 +7311,7 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@webcontainer/api@1.6.1': {}
+  '@webcontainer/api@1.2.0': {}
 
   '@yr/monotone-cubic-spline@1.0.3': {}
 
@@ -7857,7 +7857,7 @@ snapshots:
   engine.io@6.6.4:
     dependencies:
       '@types/cors': 2.8.17
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
       accepts: 1.3.8
       base64id: 2.0.0
       cookie: 0.7.2
@@ -8643,7 +8643,7 @@ snapshots:
   jest-util@29.7.0:
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 24.0.0
+      '@types/node': 22.15.31
       chalk: 4.1.2
       ci-info: 3.9.0
       graceful-fs: 4.2.11
@@ -10217,7 +10217,7 @@ snapshots:
 
   uint8array-extras@1.4.0: {}
 
-  undici-types@7.8.0: {}
+  undici-types@6.21.0: {}
 
   unified@11.0.5:
     dependencies:

readme.hints.md

@@ -9,9 +9,22 @@
 - Fully functional area chart component using ApexCharts
 - Displays time-series data with gradient fills
 - Responsive with ResizeObserver (debounced to prevent flicker)
-- Demo shows CPU and memory usage metrics
 - Fixed: Chart now properly respects container boundaries on initial render
 - Overflow prevention with proper CSS containment
+- Enhanced demo features:
+  - Multiple dataset examples (System Usage, Network Traffic, Sales Analytics)
+  - Real-time data simulation with automatic updates
+  - Dynamic dataset switching
+  - Customizable Y-axis formatters (percentages, currency, units)
+  - Data randomization for testing
+  - Manual data point addition
+- Properties:
+  - `label`: Chart title
+  - `series`: ApexAxisChartSeries data
+  - `yAxisFormatter`: Custom Y-axis label formatter function
+- Methods:
+  - `updateSeries()`: Update chart data
+  - `appendData()`: Add new data points to existing series
 
 ### dees-chart-log  
 - Server log viewer component (not a chart despite the name)

ts_web/elements/dees-chart-area.demo.ts

@@ -1,8 +1,192 @@
-import { html } from '@design.estate/dees-element';
+import { html, css } from '@design.estate/dees-element';
+import type { DeesChartArea } from './dees-chart-area.js';
 
 export const demoFunc = () => {
+  let chartElement: DeesChartArea;
+  let intervalId: number;
+  let currentDataset = 'system';
+  
+  // Get element reference after render
+  setTimeout(() => {
+    const charts = document.querySelectorAll('dees-chart-area');
+    if (charts.length > 0) {
+      chartElement = charts[charts.length - 1] as DeesChartArea;
+    }
+  }, 100);
+
+  // Y-axis formatters for different datasets
+  const formatters = {
+    system: (val: number) => `${val}%`,
+    network: (val: number) => `${val} Mbps`,
+    sales: (val: number) => `$${val.toLocaleString()}`,
+  };
+
+  // Different datasets to showcase
+  const datasets = {
+    system: {
+      label: 'System Usage (%)',
+      series: [
+        {
+          name: 'CPU',
+          data: [
+            { x: new Date(Date.now() - 300000).toISOString(), y: 25 },
+            { x: new Date(Date.now() - 240000).toISOString(), y: 30 },
+            { x: new Date(Date.now() - 180000).toISOString(), y: 28 },
+            { x: new Date(Date.now() - 120000).toISOString(), y: 35 },
+            { x: new Date(Date.now() - 60000).toISOString(), y: 32 },
+            { x: new Date().toISOString(), y: 38 },
+          ],
+        },
+        {
+          name: 'Memory',
+          data: [
+            { x: new Date(Date.now() - 300000).toISOString(), y: 45 },
+            { x: new Date(Date.now() - 240000).toISOString(), y: 48 },
+            { x: new Date(Date.now() - 180000).toISOString(), y: 46 },
+            { x: new Date(Date.now() - 120000).toISOString(), y: 52 },
+            { x: new Date(Date.now() - 60000).toISOString(), y: 50 },
+            { x: new Date().toISOString(), y: 55 },
+          ],
+        },
+      ],
+    },
+    network: {
+      label: 'Network Traffic (Mbps)',
+      series: [
+        {
+          name: 'Download',
+          data: [
+            { x: new Date(Date.now() - 300000).toISOString(), y: 120 },
+            { x: new Date(Date.now() - 240000).toISOString(), y: 150 },
+            { x: new Date(Date.now() - 180000).toISOString(), y: 180 },
+            { x: new Date(Date.now() - 120000).toISOString(), y: 165 },
+            { x: new Date(Date.now() - 60000).toISOString(), y: 190 },
+            { x: new Date().toISOString(), y: 175 },
+          ],
+        },
+        {
+          name: 'Upload',
+          data: [
+            { x: new Date(Date.now() - 300000).toISOString(), y: 25 },
+            { x: new Date(Date.now() - 240000).toISOString(), y: 30 },
+            { x: new Date(Date.now() - 180000).toISOString(), y: 35 },
+            { x: new Date(Date.now() - 120000).toISOString(), y: 28 },
+            { x: new Date(Date.now() - 60000).toISOString(), y: 32 },
+            { x: new Date().toISOString(), y: 40 },
+          ],
+        },
+      ],
+    },
+    sales: {
+      label: 'Sales Analytics',
+      series: [
+        {
+          name: 'Revenue',
+          data: [
+            { x: '2025-01-01', y: 45000 },
+            { x: '2025-01-02', y: 52000 },
+            { x: '2025-01-03', y: 48000 },
+            { x: '2025-01-04', y: 61000 },
+            { x: '2025-01-05', y: 58000 },
+            { x: '2025-01-06', y: 65000 },
+          ],
+        },
+        {
+          name: 'Profit',
+          data: [
+            { x: '2025-01-01', y: 12000 },
+            { x: '2025-01-02', y: 14000 },
+            { x: '2025-01-03', y: 11000 },
+            { x: '2025-01-04', y: 18000 },
+            { x: '2025-01-05', y: 16000 },
+            { x: '2025-01-06', y: 20000 },
+          ],
+        },
+      ],
+    },
+  };
+
+  // Generate random value within range
+  const getRandomValue = (min: number, max: number) => {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  };
+
+  // Add real-time data
+  const addRealtimeData = () => {
+    if (!chartElement) return;
+    
+    const dataset = datasets[currentDataset];
+    const newTimestamp = new Date().toISOString();
+    
+    // Generate new data points based on dataset type
+    let newData: any[][] = [];
+    
+    if (currentDataset === 'system') {
+      newData = [
+        [{ x: newTimestamp, y: getRandomValue(25, 45) }], // CPU
+        [{ x: newTimestamp, y: getRandomValue(45, 65) }], // Memory
+      ];
+    } else if (currentDataset === 'network') {
+      newData = [
+        [{ x: newTimestamp, y: getRandomValue(100, 250) }], // Download
+        [{ x: newTimestamp, y: getRandomValue(20, 50) }], // Upload
+      ];
+    }
+    
+    // Keep only last 10 data points
+    const currentSeries = chartElement.series.map((series, index) => ({
+      ...series,
+      data: [...series.data.slice(-9), ...(newData[index] || [])],
+    }));
+    
+    chartElement.series = currentSeries;
+  };
+
+  // Switch dataset
+  const switchDataset = (name: string) => {
+    currentDataset = name;
+    if (chartElement) {
+      const dataset = datasets[name];
+      chartElement.label = dataset.label;
+      chartElement.series = dataset.series;
+      chartElement.yAxisFormatter = formatters[name];
+    }
+  };
+
+  // Start/stop real-time updates
+  const startRealtime = () => {
+    if (!intervalId && (currentDataset === 'system' || currentDataset === 'network')) {
+      intervalId = window.setInterval(() => addRealtimeData(), 2000);
+    }
+  };
+
+  const stopRealtime = () => {
+    if (intervalId) {
+      window.clearInterval(intervalId);
+      intervalId = null;
+    }
+  };
+
+  // Randomize current data
+  const randomizeData = () => {
+    if (!chartElement) return;
+    
+    const currentSeries = chartElement.series.map(series => ({
+      ...series,
+      data: series.data.map(point => ({
+        ...point,
+        y: typeof point.y === 'number' 
+          ? point.y * (0.8 + Math.random() * 0.4) // +/- 20% variation
+          : point.y,
+      })),
+    }));
+    
+    chartElement.series = currentSeries;
+  };
+
   return html`
     <style>
+      ${css`
         .demoBox {
           position: relative;
           background: #000000;
@@ -10,12 +194,92 @@ export const demoFunc = () => {
           width: 100%;
           padding: 40px;
           box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
         }
+        
+        .controls {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 12px;
+          margin-bottom: 8px;
+        }
+        
+        .control-section {
+          display: flex;
+          gap: 8px;
+          align-items: center;
+          padding: 8px;
+          background: rgba(255, 255, 255, 0.05);
+          border-radius: 6px;
+        }
+        
+        .section-label {
+          color: #999;
+          font-size: 12px;
+          font-family: 'Geist Sans', sans-serif;
+          margin-right: 8px;
+        }
+        
+        .chart-container {
+          flex: 1;
+          min-height: 400px;
+        }
+        
+        .info {
+          color: #666;
+          font-size: 11px;
+          font-family: 'Geist Sans', sans-serif;
+          text-align: center;
+          margin-top: 8px;
+        }
+      `}
     </style>
     <div class="demoBox">
+      <div class="controls">
+        <div class="control-section">
+          <span class="section-label">Dataset:</span>
+          <dees-button 
+            @clicked=${() => switchDataset('system')}
+            type=${currentDataset === 'system' ? 'highlighted' : 'normal'}
+          >System Usage</dees-button>
+          <dees-button 
+            @clicked=${() => switchDataset('network')}
+            type=${currentDataset === 'network' ? 'highlighted' : 'normal'}
+          >Network Traffic</dees-button>
+          <dees-button 
+            @clicked=${() => switchDataset('sales')}
+            type=${currentDataset === 'sales' ? 'highlighted' : 'normal'}
+          >Sales Data</dees-button>
+        </div>
+        
+        <div class="control-section">
+          <span class="section-label">Real-time:</span>
+          <dees-button @clicked=${() => startRealtime()}>Start Live</dees-button>
+          <dees-button @clicked=${() => stopRealtime()}>Stop Live</dees-button>
+        </div>
+        
+        <div class="control-section">
+          <span class="section-label">Actions:</span>
+          <dees-button @clicked=${() => randomizeData()}>Randomize Values</dees-button>
+          <dees-button @clicked=${() => addRealtimeData()}>Add Point</dees-button>
+        </div>
+      </div>
+      
+      <div class="chart-container">
         <dees-chart-area
-        .label=${'System Usage'}
+          .label=${datasets[currentDataset].label}
+          .series=${datasets[currentDataset].series}
+          .yAxisFormatter=${formatters[currentDataset]}
         ></dees-chart-area>
       </div>
+      
+      <div class="info">
+        Real-time updates work with System Usage and Network Traffic datasets • 
+        Chart updates every 2 seconds when live mode is active • 
+        Try switching datasets and randomizing values
+      </div>
+    </div>
   `;
 };

ts_web/elements/dees-chart-area.ts

@@ -32,6 +32,12 @@ export class DeesChartArea extends DeesElement {
   @property()
   public label: string = 'Untitled Chart';
 
+  @property({ type: Array })
+  public series: ApexAxisChartSeries = [];
+
+  @property({ type: Function })
+  public yAxisFormatter: (value: number) => string = (val) => `${val} Mbps`;
+
   private resizeObserver: ResizeObserver;
   private resizeTimeout: number;
 
@@ -144,8 +150,8 @@ export class DeesChartArea extends DeesElement {
     const initialWidth = mainbox.clientWidth - paddingLeft - paddingRight;
     const initialHeight = mainbox.offsetHeight - paddingTop - paddingBottom;
     
-    var options: ApexCharts.ApexOptions = {
-      series: [
+    // Use provided series data or default demo data
+    const chartSeries = this.series.length > 0 ? this.series : [
       {
         name: 'cpu',
         data: [
@@ -166,7 +172,10 @@ export class DeesChartArea extends DeesElement {
           { x: '2025-01-15T19:00:00', y: 40 },
         ],
       },
-      ],
+    ];
+    
+    var options: ApexCharts.ApexOptions = {
+      series: chartSeries,
       chart: {
         width: initialWidth || 100, // Use actual width or fallback
         height: initialHeight || 100, // Use actual height or fallback
@@ -209,9 +218,7 @@ export class DeesChartArea extends DeesElement {
       yaxis: {
         min: 0,
         labels: {
-          formatter: function (val: number) {
-            return `${val} Mbps`; // Format Y-axis labels
-          },
+          formatter: this.yAxisFormatter,
           style: {
             colors: '#9e9e9e', // Label color
             fontSize: '12px',
@@ -285,6 +292,46 @@ export class DeesChartArea extends DeesElement {
     await this.resizeChart();
   }
 
+  public async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    
+    // Update chart if series data changes
+    if (changedProperties.has('series') && this.chart && this.series.length > 0) {
+      await this.updateSeries(this.series);
+    }
+    
+    // Update y-axis formatter if it changes
+    if (changedProperties.has('yAxisFormatter') && this.chart) {
+      await this.chart.updateOptions({
+        yaxis: {
+          labels: {
+            formatter: this.yAxisFormatter,
+          },
+        },
+      });
+    }
+  }
+
+  public async updateSeries(newSeries: ApexAxisChartSeries) {
+    if (!this.chart) {
+      return;
+    }
+    
+    await this.chart.updateSeries(newSeries, true);
+  }
+
+  public async appendData(seriesIndex: number, newData: any[]) {
+    if (!this.chart) {
+      return;
+    }
+    
+    const currentSeries = [...this.series];
+    if (currentSeries[seriesIndex]) {
+      currentSeries[seriesIndex].data = [...currentSeries[seriesIndex].data, ...newData];
+      await this.updateSeries(currentSeries);
+    }
+  }
+
   public async resizeChart() {
     if (!this.chart) {
       return;