feat(chart-area): replace ApexCharts with Lightweight Charts for area chart rendering

ts_web/elements/00group-chart/dees-chart-area/styles.ts

@@ -6,7 +6,6 @@ export const chartAreaStyles = [
       :host {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
         color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
-        font-weight: 400;
         font-size: 14px;
       }
       .mainbox {
@@ -18,7 +17,6 @@ export const chartAreaStyles = [
         border-radius: 8px;
         overflow: hidden;
       }
-
       .chartTitle {
         position: absolute;
         top: 0;
@@ -34,27 +32,22 @@ export const chartAreaStyles = [
       }
       .chartContainer {
         position: absolute;
-        top: 0px;
-        left: 0px;
-        bottom: 0px;
-        right: 0px;
-        padding: 44px 16px 16px 0px;
-        overflow: hidden;
-        background: transparent; /* Ensure container doesn't override chart background */
+        top: 44px;
+        left: 0;
+        bottom: 0;
+        right: 0;
       }
-      
-      /* ApexCharts theme overrides */
-      .apexcharts-canvas {
-        background: transparent !important;
-      }
-      
-      .apexcharts-inner {
-        background: transparent !important;
-      }
-      
-      .apexcharts-graphical {
-        background: transparent !important;
+      .lw-tooltip {
+        position: absolute;
+        z-index: 100;
+        pointer-events: none;
+        padding: 12px;
+        border-radius: 6px;
+        border: 1px solid;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        font-size: 12px;
+        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+        min-width: 140px;
       }
     `,
   ];
-