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.ts

@@ -6,7 +6,6 @@ import {
   html,
   property,
   state,
-  type CSSResult,
   type TemplateResult,
 } from '@design.estate/dees-element';
 
@@ -35,7 +34,7 @@ export class DeesChartArea extends DeesElement {
   @property({ type: Array })
   public series: ApexAxisChartSeries = [];
 
-  @property({ type: Function })
+  @property({ attribute: false })
   public yAxisFormatter: (value: number) => string = (val) => `${val} Mbps`;
 
   private resizeObserver: ResizeObserver;
@@ -187,9 +186,13 @@ export class DeesChartArea extends DeesElement {
           enabled: true,
           speed: 400,
           animateGradually: {
-            enabled: true,
-            delay: 150
+            enabled: false, // Disable gradual animation for cleaner updates
+            delay: 0
           },
+          dynamicAnimation: {
+            enabled: true,
+            speed: 350
+          }
         },
       },
       dataLabels: {
@@ -312,24 +315,29 @@ export class DeesChartArea extends DeesElement {
     }
   }
 
-  public async updateSeries(newSeries: ApexAxisChartSeries) {
+  public async updateSeries(newSeries: ApexAxisChartSeries, animate: boolean = true) {
     if (!this.chart) {
       return;
     }
     
-    await this.chart.updateSeries(newSeries, true);
+    this.chart.updateSeries(newSeries, animate);
   }
 
-  public async appendData(seriesIndex: number, newData: any[]) {
+  public async appendData(newData: { data: any[] }[]) {
     if (!this.chart) {
       return;
     }
     
-    const currentSeries = [...this.series];
-    if (currentSeries[seriesIndex]) {
-      currentSeries[seriesIndex].data = [...currentSeries[seriesIndex].data, ...newData];
-      await this.updateSeries(currentSeries);
+    // Use ApexCharts' appendData method for smoother real-time updates
+    await this.chart.appendData(newData);
+  }
+  
+  public async updateOptions(options: ApexCharts.ApexOptions, redrawPaths?: boolean, animate?: boolean) {
+    if (!this.chart) {
+      return;
     }
+    
+    return this.chart.updateOptions(options, redrawPaths, animate);
   }
 
   public async resizeChart() {