Deleting a Map Series Programmatically For Testing ❌

Eddy08 · Feb 12, 2023 · 1ab18f0 · 1ab18f0 · vercel · Feb 12, 2023
1 parent 4ca495f
commit 1ab18f0
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 54 deletions.
diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html
@@ -1,8 +1,8 @@
 <div style="height: 100%;display:block;border: solid blue 2px;">
 <highcharts-chart [Highcharts]="Highcharts"
-[options]="map" [callbackFunction]="chartCallback" [constructorType]="chartConstructor" style="width: 100%; height: 400px; display: block;"></highcharts-chart>
+[options]="map" [(update)]="updateFlag" [callbackFunction]="chartCallback" [constructorType]="chartConstructor" style="width: 100%; height: 400px; display: block;"></highcharts-chart>
 </div>
-<button onclick="explore($event)">Explore</button>
+<button (click)="explore()">Explore</button>
 <!-- <div style="height: 100vh; border:solid green 2px;">
 <highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions"  style="width: 100%; height: 400px; display: block;">
 <

diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts
@@ -312,6 +312,7 @@ export class MapComponent {
 
   Globe: any;
 
+  updateFlag:boolean=false;
   chartCallback: Highcharts.ChartCallbackFunction | any;
 
   // Add HCView to ngAfteViewInit
@@ -667,66 +668,84 @@ export class MapComponent {
       */
     ],
   };
-  explore(event: any){
 
-    const chart = event.target.chart;
-
-    if (!chart.get('flight-route')) {
-      chart.addSeries(
-        {
-          type: 'mapline',
-          name: 'Flight route, Amsterdam - Los Angeles',
-          animation: false,
-          id: 'flight-route',
-          data: [
-            {
-              geometry: {
-                type: 'LineString',
-                coordinates: [
-                  [4.9, 53.38], // Amsterdam
-                  [-118.24, 34.05], // Los Angeles
-                ],
+  explore() {
+    console.log('inside explore method');
+    console.log(this.chartCallback);
+    // const chart = this.chartCallback.chart;
+    console.log('chart', this.map.series);
+    let index = this.map.series?.findIndex(
+      (x: any) => x.events!== undefined
+    );
+    console.log(index)
+    if(index && this.map.series){
+      console.log(this.map?.series[index])
+        if(this.map.series[index].events ){
+          if(this.map.series[index].events?.afterAnimate)
+          delete this.map.series[index]?.events?.afterAnimate
+          this.updateFlag=true;
+        }
+    }
+
+    // this.map.series?[index].events.afterAnimate=this.stopAnimate();
+    /*
+        this.map.chart.(
+          {
+            type: 'mapline',
+            name: 'Flight route, Amsterdam - Los Angeles',
+            animation: false,
+            id: 'flight-route',
+            data: [
+              {
+                geometry: {
+                  type: 'LineString',
+                  coordinates: [
+                    [4.9, 53.38], // Amsterdam
+                    [-118.24, 34.05], // Los Angeles
+                  ],
+                },
+                color: '#313f77',
               },
-              color: '#313f77',
+            ],
+            lineWidth: 2,
+            accessibility: {
+              exposeAsGroupOnly: true,
             },
-          ],
-          lineWidth: 2,
-          accessibility: {
-            exposeAsGroupOnly: true,
           },
-        },
-        false
-      );
-      chart.addSeries(
-        {
-          type: 'mappoint',
-          animation: false,
-          data: [
-            {
-              name: 'Amsterdam',
-              geometry: {
-                type: 'Point',
-                coordinates: [4.9, 53.38],
+          false
+        );
+        chart.addSeries(
+          {
+            type: 'mappoint',
+            animation: false,
+            data: [
+              {
+                name: 'Amsterdam',
+                geometry: {
+                  type: 'Point',
+                  coordinates: [4.9, 53.38],
+                },
               },
-            },
-            {
-              name: 'LA',
-              geometry: {
-                type: 'Point',
-                coordinates: [-118.24, 34.05],
+              {
+                name: 'LA',
+                geometry: {
+                  type: 'Point',
+                  coordinates: [-118.24, 34.05],
+                },
               },
+            ],
+            color: '#313f77',
+            accessibility: {
+              enabled: false,
             },
-          ],
-          color: '#313f77',
-          accessibility: {
-            enabled: false,
           },
-        },
-        false
-      );
-      chart.redraw(true);
-    }
- }
+          false
+        );
+        chart.redraw(true);
+      
+   */
+  }
+
   /*
   reflow() {
     // Add a series of lines for London