update options config change

oneteme · Feb 6, 2025 · bf7aea7 · bf7aea7
1 parent 5d8cdc3
commit bf7aea7
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 39 deletions.
diff --git a/angular.json b/angular.json
@@ -173,5 +173,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }
diff --git a/projects/oneteme/jquery-apexcharts/src/lib/directive/bar-chart.directive.ts b/projects/oneteme/jquery-apexcharts/src/lib/directive/bar-chart.directive.ts
@@ -68,18 +68,23 @@ export class BarChartDirective<X extends XaxisType> implements ChartView<X, numb
     this.createElement();
   }
 
-  private async createElement() {
+  private createElement() {
     this.updateConfig();
+    this.updateType();
     this.updateLoading();
     this.updateData();
 
-    this.destroy();
-
-    const chartInstance = this.ngZone.runOutsideAngular(
-      () => new ApexCharts(this.el.nativeElement, this._options)
-    );
-    this.chartInstance.set(chartInstance);
-    this.render();
+    if(this.chartInstance() != null) {
+      this.updateOptions(this._options, true, true, false);
+    } else {
+      this.destroy();
+
+      const chartInstance = this.ngZone.runOutsideAngular(
+        () => new ApexCharts(this.el.nativeElement, this._options)
+      );
+      this.chartInstance.set(chartInstance);
+      this.render();
+    }
   }
 
   private render() {
@@ -167,6 +172,10 @@ export class BarChartDirective<X extends XaxisType> implements ChartView<X, numb
     });
   }
 
+  private updateType() {
+    mergeDeep(this._options, { chart: { type: this.type } });
+  }
+
   private updateOptions(
     options: any,
     redrawPaths?: boolean,

diff --git a/projects/oneteme/jquery-apexcharts/src/lib/directive/line-chart.directive.ts b/projects/oneteme/jquery-apexcharts/src/lib/directive/line-chart.directive.ts
@@ -45,6 +45,7 @@ export class LineChartDirective<X extends XaxisType, Y extends YaxisType> implem
   @Output() customEvent: EventEmitter<'previous' | 'next' | 'pivot'> = new EventEmitter();
 
   ngOnChanges(changes: SimpleChanges): void {
+    console.log("onChanges", changes)
     this.ngZone.runOutsideAngular(() => {
       asapScheduler.schedule(() => this.hydrate(changes));
     });
@@ -58,6 +59,7 @@ export class LineChartDirective<X extends XaxisType, Y extends YaxisType> implem
     const shouldUpdateSeries =
       Object.keys(changes).filter((c) => c !== "data" && c!== "isLoading").length === 0;
     if (shouldUpdateSeries) {
+      console.log("shouldUpdateSeries", this.type, this.config, this.data, this.isLoading)
       this.updateLoading();
       this.updateData();
       this.updateOptions(this._options, true, true, false);
@@ -67,19 +69,23 @@ export class LineChartDirective<X extends XaxisType, Y extends YaxisType> implem
     this.createElement();
   }
 
-  private async createElement() {
+  private createElement() {
     this.updateConfig();
     this.updateType();
     this.updateLoading();
     this.updateData();
 
-    this.destroy();
-
-    const chartInstance = this.ngZone.runOutsideAngular(
-      () => new ApexCharts(this.el.nativeElement, this._options)
-    );
-    this.chartInstance.set(chartInstance);
-    this.render();
+    if(this.chartInstance() != null) {
+      this.updateOptions(this._options, true, true, false);
+    } else {
+      this.destroy();
+
+      const chartInstance = this.ngZone.runOutsideAngular(
+        () => new ApexCharts(this.el.nativeElement, this._options)
+      );
+      this.chartInstance.set(chartInstance);
+      this.render();
+    }
   }
 
   private render() {

diff --git a/projects/oneteme/jquery-apexcharts/src/lib/directive/pie-chart.directive.ts b/projects/oneteme/jquery-apexcharts/src/lib/directive/pie-chart.directive.ts
@@ -74,19 +74,23 @@ export class PieChartDirective implements ChartView<string, number>, OnChanges,
     this.createElement();
   }
 
-  private async createElement() {
+  private createElement() {
     this.updateConfig();
     this.updateType();
     this.updateLoading();
     this.updateData();
 
-    this.destroy();
-
-    const chartInstance = this.ngZone.runOutsideAngular(
-      () => new ApexCharts(this.el.nativeElement, this._options)
-    );
-    this.chartInstance.set(chartInstance);
-    this.render();
+    if(this.chartInstance() != null) {
+      this.updateOptions(this._options, true, true, false);
+    } else {
+      this.destroy();
+
+      const chartInstance = this.ngZone.runOutsideAngular(
+        () => new ApexCharts(this.el.nativeElement, this._options)
+      );
+      this.chartInstance.set(chartInstance);
+      this.render();
+    }
   }
 
   private render() {

diff --git a/projects/oneteme/jquery-apexcharts/src/lib/directive/range-chart.directive.ts b/projects/oneteme/jquery-apexcharts/src/lib/directive/range-chart.directive.ts
@@ -66,19 +66,23 @@ export class RangeChartDirective<X extends XaxisType> implements ChartView<X, nu
     this.createElement();
   }
 
-  private async createElement() {
+  private createElement() {
     this.updateConfig();
     this.updateType();
     this.updateLoading();
     this.updateData();
 
-    this.destroy();
+    if(this.chartInstance() != null) {
+      this.updateOptions(this._options, true, true, false);
+    } else {
+      this.destroy();
 
-    const chartInstance = this.ngZone.runOutsideAngular(
-      () => new ApexCharts(this.el.nativeElement, this._options)
-    );
-    this.chartInstance.set(chartInstance);
-    this.render();
+      const chartInstance = this.ngZone.runOutsideAngular(
+        () => new ApexCharts(this.el.nativeElement, this._options)
+      );
+      this.chartInstance.set(chartInstance);
+      this.render();
+    }
   }
 
   private render() {

diff --git a/projects/oneteme/jquery-apexcharts/src/lib/directive/treemap-chart.directive.ts b/projects/oneteme/jquery-apexcharts/src/lib/directive/treemap-chart.directive.ts
@@ -64,19 +64,23 @@ export class TreemapChartDirective implements ChartView<string, number>, OnChang
     this.createElement();
   }
 
-  private async createElement() {
+  private createElement() {
     this.updateConfig();
     this.updateType();
     this.updateLoading();
     this.updateData();
 
-    this.destroy();
-
-    const chartInstance = this.ngZone.runOutsideAngular(
-      () => new ApexCharts(this.el.nativeElement, this._options)
-    );
-    this.chartInstance.set(chartInstance);
-    this.render();
+    if(this.chartInstance() != null) {
+      this.updateOptions(this._options, true, true, false);
+    } else {
+      this.destroy();
+
+      const chartInstance = this.ngZone.runOutsideAngular(
+        () => new ApexCharts(this.el.nativeElement, this._options)
+      );
+      this.chartInstance.set(chartInstance);
+      this.render();
+    }
   }
 
   private render() {
-Original file line number
+Diff line change
@@ Expand Up / @@ -173,5 +173,8 @@ @@
             }
           }
         }
+      },
+      "cli": {
+        "analytics": false
       }
     }