feat(dees-button-group): add new button group component with demo and styling

fix(dees-chart-area): improve real-time updates and chart element handling
fix(dees-chart-log): refactor demo to store log element reference
chore: update dependencies in package.json and pnpm-lock.yaml

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

@@ -1,18 +1,11 @@
 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;
   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 = {
@@ -111,11 +104,15 @@ 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 = () => {
-    if (!chartElement) return;
-    
-    const dataset = datasets[currentDataset];
+    const chart = getChartElement();
+    if (!chart) return;
     const newTimestamp = new Date().toISOString();
     
     // Generate new data points based on dataset type
@@ -133,29 +130,48 @@ export const demoFunc = () => {
       ];
     }
     
-    // Keep only last 10 data points
-    const currentSeries = chartElement.series.map((series, index) => ({
+    // Keep only last 20 data points and update without animation
+    const currentSeries = chart.series.map((series, index) => ({
       ...series,
-      data: [...series.data.slice(-9), ...(newData[index] || [])],
+      data: [...series.data.slice(-19), ...(newData[index] || [])],
     }));
     
-    chartElement.series = currentSeries;
+    // Update without animation for smoother real-time updates
+    chart.updateSeries(currentSeries, false);
   };
 
   // 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];
-    }
+    
+    const updateChart = () => {
+      const chart = getChartElement();
+      if (chart) {
+        const dataset = datasets[name];
+        chart.label = dataset.label;
+        chart.series = dataset.series;
+        chart.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({
+          chart: {
+            animations: {
+              enabled: false
+            }
+          }
+        }, false, false);
+      }
+      
       intervalId = window.setInterval(() => addRealtimeData(), 2000);
     }
   };
@@ -164,29 +180,52 @@ export const demoFunc = () => {
     if (intervalId) {
       window.clearInterval(intervalId);
       intervalId = null;
+      
+      const chart = getChartElement();
+      if (chart) {
+        // Re-enable animations when stopping real-time
+        chart.updateOptions({
+          chart: {
+            animations: {
+              enabled: true,
+              speed: 400,
+              animateGradually: {
+                enabled: true,
+                delay: 150
+              }
+            }
+          }
+        }, false, true);
+      }
     }
   };
 
   // Randomize current data
   const randomizeData = () => {
-    if (!chartElement) return;
+    const chart = getChartElement();
+    if (!chart) return;
     
-    const currentSeries = chartElement.series.map(series => ({
+    const currentSeries = chart.series.map(series => ({
       ...series,
-      data: series.data.map(point => ({
+      data: series.data.map((point: any) => ({
         ...point,
         y: typeof point.y === 'number' 
-          ? point.y * (0.8 + Math.random() * 0.4) // +/- 20% variation
+          ? Math.round(point.y * (0.8 + Math.random() * 0.4)) // +/- 20% variation
           : point.y,
       })),
     }));
     
-    chartElement.series = currentSeries;
+    // Update with animation for single updates
+    chart.updateSeries(currentSeries, true);
   };
 
   return html`
-    <style>
-      ${css`
+    <dees-demowrapper .runAfterRender=${async (element: HTMLElement) => {
+      // Store the chart element reference
+      chartElement = element.querySelector('dees-chart-area') as DeesChartArea;
+    }}>
+      <style>
+        ${css`
         .demoBox {
           position: relative;
           background: #000000;
@@ -206,22 +245,6 @@ export const demoFunc = () => {
           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;
@@ -238,8 +261,7 @@ export const demoFunc = () => {
     </style>
     <div class="demoBox">
       <div class="controls">
-        <div class="control-section">
-          <span class="section-label">Dataset:</span>
+        <dees-button-group label="Dataset:">
           <dees-button 
             @clicked=${() => switchDataset('system')}
             type=${currentDataset === 'system' ? 'highlighted' : 'normal'}
@@ -252,19 +274,17 @@ export const demoFunc = () => {
             @clicked=${() => switchDataset('sales')}
             type=${currentDataset === 'sales' ? 'highlighted' : 'normal'}
           >Sales Data</dees-button>
-        </div>
+        </dees-button-group>
         
-        <div class="control-section">
-          <span class="section-label">Real-time:</span>
+        <dees-button-group label="Real-time:">
           <dees-button @clicked=${() => startRealtime()}>Start Live</dees-button>
           <dees-button @clicked=${() => stopRealtime()}>Stop Live</dees-button>
-        </div>
+        </dees-button-group>
         
-        <div class="control-section">
-          <span class="section-label">Actions:</span>
+        <dees-button-group label="Actions:">
           <dees-button @clicked=${() => randomizeData()}>Randomize Values</dees-button>
           <dees-button @clicked=${() => addRealtimeData()}>Add Point</dees-button>
-        </div>
+        </dees-button-group>
       </div>
       
       <div class="chart-container">
@@ -280,6 +300,7 @@ export const demoFunc = () => {
         Chart updates every 2 seconds when live mode is active • 
         Try switching datasets and randomizing values
       </div>
-    </div>
+      </div>
+    </dees-demowrapper>
   `;
 };