fix(dees-catalog): update @design.estate/dees-wcctools dependency to version 1.0.95 for compatibility

feat(dees-chart-area): refactor demo function for improved dataset handling and real-time updates
feat(dees-chart-log): enhance demo function with simulation controls for server log generation

package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@design.estate/dees-domtools": "^2.1.1",
     "@design.estate/dees-element": "^2.0.42",
-    "@design.estate/dees-wcctools": "^1.0.92",
+    "@design.estate/dees-wcctools": "^1.0.95",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",

pnpm-lock.yaml

@@ -15,8 +15,8 @@ importers:
         specifier: ^2.0.42
         version: 2.0.42
       '@design.estate/dees-wcctools':
-        specifier: ^1.0.92
+        specifier: ^1.0.95
-        version: 1.0.92
+        version: 1.0.95
       '@fortawesome/fontawesome-svg-core':
         specifier: ^6.7.2
         version: 6.7.2
@@ -305,8 +305,8 @@ packages:
   '@design.estate/dees-element@2.0.42':
     resolution: {integrity: sha512-1PzHP6q/PtSiu4P0nCxjSeHtRHn62zoSouMy8JFW2h29FT/CSDVaTUAUqYqnvwE/U98aLNivWTmerZitDF7kBQ==}
 
-  '@design.estate/dees-wcctools@1.0.92':
+  '@design.estate/dees-wcctools@1.0.95':
-    resolution: {integrity: sha512-E4Hnxvvzy2ivJzPHzWL2dmJtBtAD+stnEG7uQ0usQM6NVnarIGPI9PflGSspM75nnA/HKi+lpsqRgp1DtbPqTQ==}
+    resolution: {integrity: sha512-mXClal8YdvA74ILdAWe64ocydvwhVfQAOGaykrKGkR1qb8TA1Qn4H7QG9HUsg3jEVZApY0wYbhILuTvpvbkgGA==}
 
   '@esbuild/aix-ppc64@0.24.2':
     resolution: {integrity: sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==}
@@ -5176,7 +5176,7 @@ snapshots:
       - supports-color
       - vue
 
-  '@design.estate/dees-wcctools@1.0.92':
+  '@design.estate/dees-wcctools@1.0.95':
     dependencies:
       '@design.estate/dees-domtools': 2.3.2
       '@design.estate/dees-element': 2.0.42

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

@@ -1,9 +1,46 @@
 import { html, css } from '@design.estate/dees-element';
 import type { DeesChartArea } from './dees-chart-area.js';
-import '@design.estate/dees-wcctools';
 
 export const demoFunc = () => {
-  let chartElement: DeesChartArea;
+  // Initial dataset values
+  const initialDatasets = {
+    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 },
+          ],
+        },
+      ],
+    },
+  };
+  
+  const initialFormatters = {
+    system: (val: number) => `${val}%`,
+  };
+  
+  return html`
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Get the chart element
+      const chartElement = elementArg.querySelector('dees-chart-area') as DeesChartArea;
       let intervalId: number;
       let currentDataset = 'system';
 
@@ -104,15 +141,10 @@ export const demoFunc = () => {
         return Math.floor(Math.random() * (max - min + 1)) + min;
       };
 
-  // Get chart element
-  const getChartElement = () => {
-    return chartElement;
-  };
-
       // Add real-time data
       const addRealtimeData = () => {
-    const chart = getChartElement();
+        if (!chartElement) return;
-    if (!chart) return;
+        
         const newTimestamp = new Date().toISOString();
         
         // Generate new data points based on dataset type
@@ -131,46 +163,35 @@ export const demoFunc = () => {
         }
         
         // Keep only last 20 data points and update without animation
-    const currentSeries = chart.series.map((series, index) => ({
+        const currentSeries = chartElement.series.map((series, index) => ({
           ...series,
           data: [...series.data.slice(-19), ...(newData[index] || [])],
         }));
         
         // Update without animation for smoother real-time updates
-    chart.updateSeries(currentSeries, false);
+        chartElement.updateSeries(currentSeries, false);
       };
 
       // Switch dataset
       const switchDataset = (name: string) => {
         currentDataset = name;
-    
-    const updateChart = () => {
-      const chart = getChartElement();
-      if (chart) {
         const dataset = datasets[name];
-        chart.label = dataset.label;
+        chartElement.label = dataset.label;
-        chart.series = dataset.series;
+        chartElement.series = dataset.series;
-        chart.yAxisFormatter = formatters[name];
+        chartElement.yAxisFormatter = formatters[name];
-      }
-    };
-    
-    updateChart();
       };
 
       // Start/stop real-time updates
       const startRealtime = () => {
         if (!intervalId && (currentDataset === 'system' || currentDataset === 'network')) {
-      const chart = getChartElement();
-      if (chart) {
           // Disable animations for real-time mode
-        chart.updateOptions({
+          chartElement.updateOptions({
             chart: {
               animations: {
                 enabled: false
               }
             }
           }, false, false);
-      }
           
           intervalId = window.setInterval(() => addRealtimeData(), 2000);
         }
@@ -181,10 +202,8 @@ export const demoFunc = () => {
           window.clearInterval(intervalId);
           intervalId = null;
           
-      const chart = getChartElement();
-      if (chart) {
           // Re-enable animations when stopping real-time
-        chart.updateOptions({
+          chartElement.updateOptions({
             chart: {
               animations: {
                 enabled: true,
@@ -197,15 +216,11 @@ export const demoFunc = () => {
             }
           }, false, true);
         }
-    }
       };
 
       // Randomize current data
       const randomizeData = () => {
-    const chart = getChartElement();
+        const currentSeries = chartElement.series.map(series => ({
-    if (!chart) return;
-    
-    const currentSeries = chart.series.map(series => ({
           ...series,
           data: series.data.map((point: any) => ({
             ...point,
@@ -216,13 +231,66 @@ export const demoFunc = () => {
         }));
         
         // Update with animation for single updates
-    chart.updateSeries(currentSeries, true);
+        chartElement.updateSeries(currentSeries, true);
       };
 
-  return html`
+      // Wire up button click handlers
-    <dees-demowrapper .runAfterRender=${async (element: HTMLElement) => {
+      const buttons = elementArg.querySelectorAll('dees-button');
-      // Store the chart element reference
+      buttons.forEach(button => {
-      chartElement = element.querySelector('dees-chart-area') as DeesChartArea;
+        const text = button.textContent?.trim();
+        if (text === 'System Usage') {
+          button.addEventListener('click', () => switchDataset('system'));
+        } else if (text === 'Network Traffic') {
+          button.addEventListener('click', () => switchDataset('network'));
+        } else if (text === 'Sales Data') {
+          button.addEventListener('click', () => switchDataset('sales'));
+        } else if (text === 'Start Live') {
+          button.addEventListener('click', () => startRealtime());
+        } else if (text === 'Stop Live') {
+          button.addEventListener('click', () => stopRealtime());
+        } else if (text === 'Randomize Values') {
+          button.addEventListener('click', () => randomizeData());
+        } else if (text === 'Add Point') {
+          button.addEventListener('click', () => addRealtimeData());
+        }
+      });
+      
+      // Update button states based on current dataset
+      const updateButtonStates = () => {
+        const buttons = elementArg.querySelectorAll('dees-button');
+        buttons.forEach(button => {
+          const text = button.textContent?.trim();
+          if (text === 'System Usage') {
+            button.type = currentDataset === 'system' ? 'highlighted' : 'normal';
+          } else if (text === 'Network Traffic') {
+            button.type = currentDataset === 'network' ? 'highlighted' : 'normal';
+          } else if (text === 'Sales Data') {
+            button.type = currentDataset === 'sales' ? 'highlighted' : 'normal';
+          }
+        });
+      };
+      
+      // Update button states when dataset changes
+      const originalSwitchDataset = switchDataset;
+      const switchDatasetWithButtonUpdate = (name: string) => {
+        originalSwitchDataset(name);
+        updateButtonStates();
+      };
+      
+      // Replace switchDataset with the one that updates buttons
+      buttons.forEach(button => {
+        const text = button.textContent?.trim();
+        if (text === 'System Usage') {
+          button.removeEventListener('click', () => switchDataset('system'));
+          button.addEventListener('click', () => switchDatasetWithButtonUpdate('system'));
+        } else if (text === 'Network Traffic') {
+          button.removeEventListener('click', () => switchDataset('network'));
+          button.addEventListener('click', () => switchDatasetWithButtonUpdate('network'));
+        } else if (text === 'Sales Data') {
+          button.removeEventListener('click', () => switchDataset('sales'));
+          button.addEventListener('click', () => switchDatasetWithButtonUpdate('sales'));
+        }
+      });
     }}>
       <style>
         ${css`
@@ -262,36 +330,27 @@ export const demoFunc = () => {
     <div class="demoBox">
       <div class="controls">
         <dees-button-group label="Dataset:">
-          <dees-button 
+          <dees-button type="highlighted">System Usage</dees-button>
-            @clicked=${() => switchDataset('system')}
+          <dees-button>Network Traffic</dees-button>
-            type=${currentDataset === 'system' ? 'highlighted' : 'normal'}
+          <dees-button>Sales Data</dees-button>
-          >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>
         </dees-button-group>
         
         <dees-button-group label="Real-time:">
-          <dees-button @clicked=${() => startRealtime()}>Start Live</dees-button>
+          <dees-button>Start Live</dees-button>
-          <dees-button @clicked=${() => stopRealtime()}>Stop Live</dees-button>
+          <dees-button>Stop Live</dees-button>
         </dees-button-group>
         
         <dees-button-group label="Actions:">
-          <dees-button @clicked=${() => randomizeData()}>Randomize Values</dees-button>
+          <dees-button>Randomize Values</dees-button>
-          <dees-button @clicked=${() => addRealtimeData()}>Add Point</dees-button>
+          <dees-button>Add Point</dees-button>
         </dees-button-group>
       </div>
       
       <div class="chart-container">
         <dees-chart-area
-          .label=${datasets[currentDataset].label}
+          .label=${initialDatasets.system.label}
-          .series=${datasets[currentDataset].series}
+          .series=${initialDatasets.system.series}
-          .yAxisFormatter=${formatters[currentDataset]}
+          .yAxisFormatter=${initialFormatters.system}
         ></dees-chart-area>
       </div>
       

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

@@ -1,10 +1,12 @@
 import { html } from '@design.estate/dees-element';
 import type { DeesChartLog } from './dees-chart-log.js';
-import '@design.estate/dees-wcctools';
 
 export const demoFunc = () => {
+  return html`
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Get the log element
+      const logElement = elementArg.querySelector('dees-chart-log') as DeesChartLog;
       let intervalId: number;
-  let logElement: DeesChartLog;
 
       const serverSources = ['Server', 'Database', 'API', 'Auth', 'Cache', 'Queue', 'WebSocket', 'Scheduler'];
       
@@ -47,10 +49,6 @@ export const demoFunc = () => {
       };
 
       const generateRandomLog = () => {
-    if (!logElement) {
-      console.warn('Log element not ready yet');
-      return;
-    }
         const levels: Array<'debug' | 'info' | 'warn' | 'error' | 'success'> = ['debug', 'info', 'warn', 'error', 'success'];
         const weights = [0.2, 0.5, 0.15, 0.1, 0.05]; // Weighted probability
         
@@ -119,11 +117,18 @@ export const demoFunc = () => {
         }
       };
 
-
+      // Wire up button click handlers
-  return html`
+      const buttons = elementArg.querySelectorAll('dees-button');
-    <dees-demowrapper .runAfterRender=${async (element: HTMLElement) => {
+      buttons.forEach(button => {
-      // Store the log element reference
+        const text = button.textContent?.trim();
-      logElement = element.querySelector('dees-chart-log') as DeesChartLog;
+        if (text === 'Add Single Log') {
+          button.addEventListener('click', () => generateRandomLog());
+        } else if (text === 'Start Simulation') {
+          button.addEventListener('click', () => startSimulation());
+        } else if (text === 'Stop Simulation') {
+          button.addEventListener('click', () => stopSimulation());
+        }
+      });
     }}>
       <style>
       .demoBox {
@@ -150,9 +155,9 @@ export const demoFunc = () => {
     </style>
     <div class="demoBox">
       <div class="controls">
-        <dees-button @clicked=${() => generateRandomLog()}>Add Single Log</dees-button>
+        <dees-button>Add Single Log</dees-button>
-        <dees-button @clicked=${() => startSimulation()}>Start Simulation</dees-button>
+        <dees-button>Start Simulation</dees-button>
-        <dees-button @clicked=${() => stopSimulation()}>Stop Simulation</dees-button>
+        <dees-button>Stop Simulation</dees-button>
       </div>
       <div class="info">Simulating realistic server logs with various levels and sources</div>
       <dees-chart-log