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

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.50.2',
+  version: '3.51.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

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;
       }
     `,
   ];
-

ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -710,6 +710,7 @@ export class DeesSimpleAppDash extends DeesElement {
     terminal.style.top = 'var(--banner-area-height, 0px)';
     terminal.style.left = '240px';
     terminal.style.right = '0px';
+    terminal.style.height = 'auto';
     terminal.style.bottom = '24px';
     terminal.style.opacity = '0';
     terminal.style.transform = 'translateY(8px) scale(0.99)';

ts_web/services/DeesServiceLibLoader.ts

@@ -4,7 +4,15 @@ import { CDN_BASE, CDN_VERSIONS } from './versions.js';
 import type { Terminal, ITerminalOptions } from 'xterm';
 import type { FitAddon } from 'xterm-addon-fit';
 import type { HLJSApi } from 'highlight.js';
-import type ApexChartsType from 'apexcharts';
+import type {
+  createChart as createChartType,
+  IChartApi,
+  ISeriesApi,
+  UTCTimestamp,
+  MouseEventParams,
+  DeepPartial,
+  TimeChartOptions,
+} from 'lightweight-charts';
 import type { Editor, EditorOptions } from '@tiptap/core';
 import type { StarterKitOptions } from '@tiptap/starter-kit';
 import type { UnderlineOptions } from '@tiptap/extension-underline';
@@ -43,6 +51,29 @@ export interface IXtermSearchAddon {
   findPrevious(term: string, searchOptions?: { regex?: boolean; wholeWord?: boolean; caseSensitive?: boolean; incremental?: boolean }): boolean;
 }
 
+/**
+ * Bundle type for TradingView Lightweight Charts
+ */
+export interface ILightweightChartsBundle {
+  createChart: typeof createChartType;
+  AreaSeries: any;
+  LineSeries: any;
+  ColorType: {
+    Solid: string;
+    VerticalGradient: string;
+  };
+  LineType: {
+    Simple: number;
+    WithSteps: number;
+    Curved: number;
+  };
+  CrosshairMode: {
+    Normal: number;
+    Magnet: number;
+    Hidden: number;
+  };
+}
+
 /**
  * Bundle type for Tiptap editor and extensions
  */
@@ -76,7 +107,7 @@ export class DeesServiceLibLoader {
   private xtermFitAddonLib: IXtermFitAddonBundle | null = null;
   private xtermSearchAddonLib: IXtermSearchAddonBundle | null = null;
   private highlightJsLib: HLJSApi | null = null;
-  private apexChartsLib: typeof ApexChartsType | null = null;
+  private lightweightChartsLib: ILightweightChartsBundle | null = null;
   private tiptapLib: ITiptapBundle | null = null;
 
   // Loading promises to prevent duplicate concurrent loads
@@ -84,7 +115,7 @@ export class DeesServiceLibLoader {
   private xtermFitAddonLoadingPromise: Promise<IXtermFitAddonBundle> | null = null;
   private xtermSearchAddonLoadingPromise: Promise<IXtermSearchAddonBundle> | null = null;
   private highlightJsLoadingPromise: Promise<HLJSApi> | null = null;
-  private apexChartsLoadingPromise: Promise<typeof ApexChartsType> | null = null;
+  private lightweightChartsLoadingPromise: Promise<ILightweightChartsBundle> | null = null;
   private tiptapLoadingPromise: Promise<ITiptapBundle> | null = null;
 
   private constructor() {}
@@ -235,27 +266,34 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
   }
 
   /**
-   * Load ApexCharts charting library from CDN
-   * @returns Promise resolving to ApexCharts constructor
+   * Load TradingView Lightweight Charts from CDN
+   * @returns Promise resolving to Lightweight Charts bundle
    */
-  public async loadApexCharts(): Promise<typeof ApexChartsType> {
-    if (this.apexChartsLib) {
-      return this.apexChartsLib;
+  public async loadLightweightCharts(): Promise<ILightweightChartsBundle> {
+    if (this.lightweightChartsLib) {
+      return this.lightweightChartsLib;
     }
 
-    if (this.apexChartsLoadingPromise) {
-      return this.apexChartsLoadingPromise;
+    if (this.lightweightChartsLoadingPromise) {
+      return this.lightweightChartsLoadingPromise;
     }
 
-    this.apexChartsLoadingPromise = (async () => {
-      const url = `${CDN_BASE}/apexcharts@${CDN_VERSIONS.apexcharts}/+esm`;
+    this.lightweightChartsLoadingPromise = (async () => {
+      const url = `${CDN_BASE}/lightweight-charts@${CDN_VERSIONS.lightweightCharts}/+esm`;
       const module = await import(/* @vite-ignore */ url);
 
-      this.apexChartsLib = module.default;
-      return this.apexChartsLib!;
+      this.lightweightChartsLib = {
+        createChart: module.createChart,
+        AreaSeries: module.AreaSeries,
+        LineSeries: module.LineSeries,
+        ColorType: module.ColorType,
+        LineType: module.LineType,
+        CrosshairMode: module.CrosshairMode,
+      };
+      return this.lightweightChartsLib;
     })();
 
-    return this.apexChartsLoadingPromise;
+    return this.lightweightChartsLoadingPromise;
   }
 
   /**
@@ -316,7 +354,7 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
       this.loadXtermFitAddon(),
       this.loadXtermSearchAddon(),
       this.loadHighlightJs(),
-      this.loadApexCharts(),
+      this.loadLightweightCharts(),
       this.loadTiptap(),
     ]);
   }
@@ -324,7 +362,7 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
   /**
    * Check if a specific library is already loaded
    */
-  public isLoaded(library: 'xterm' | 'xtermFitAddon' | 'xtermSearchAddon' | 'highlightJs' | 'apexCharts' | 'tiptap'): boolean {
+  public isLoaded(library: 'xterm' | 'xtermFitAddon' | 'xtermSearchAddon' | 'highlightJs' | 'lightweightCharts' | 'tiptap'): boolean {
     switch (library) {
       case 'xterm':
         return this.xtermLib !== null;
@@ -334,8 +372,8 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
         return this.xtermSearchAddonLib !== null;
       case 'highlightJs':
         return this.highlightJsLib !== null;
-      case 'apexCharts':
-        return this.apexChartsLib !== null;
+      case 'lightweightCharts':
+        return this.lightweightChartsLib !== null;
       case 'tiptap':
         return this.tiptapLib !== null;
       default:

ts_web/services/index.ts

@@ -1,3 +1,3 @@
 export { DeesServiceLibLoader } from './DeesServiceLibLoader.js';
-export type { IXtermBundle, IXtermFitAddonBundle, IXtermSearchAddonBundle, IXtermSearchAddon, ITiptapBundle } from './DeesServiceLibLoader.js';
+export type { IXtermBundle, IXtermFitAddonBundle, IXtermSearchAddonBundle, IXtermSearchAddon, ITiptapBundle, ILightweightChartsBundle } from './DeesServiceLibLoader.js';
 export { CDN_BASE, CDN_VERSIONS } from './versions.js';

ts_web/services/versions.ts

@@ -7,7 +7,7 @@ export const CDN_VERSIONS = {
   xtermAddonFit: '0.8.0',
   xtermAddonSearch: '0.13.0',
   highlightJs: '11.11.1',
-  apexcharts: '5.10.4',
+  lightweightCharts: '5.1.0',
   tiptap: '2.27.2',
   fontawesome: '7.2.0',
 } as const;