Issue #3399270 by Masami, yas: Refactor to native JavaScript from jQuery...

Issue #3399270 by Masami, yas: Refactor to native JavaScript from jQuery (aws_cloud_instance_monitor_horizon_chart.js)

modules/cloud_service_providers/aws_cloud/js/aws_cloud_instance_monitor_horizon_chart.js

-(function ($) {
+(function () {
   'use strict';
 
   // Metrics Url.
@@ -6,28 +6,32 @@
     return;
   }
 
+  let chart_count = 0;
   // Init Chart.
   const initCharts = function () {
-    d3.json(drupalSettings.aws_cloud_monitor_metrics_url).then(function (json) {
-      let chart_data = [];
-      $.each(json, function (name) {
-        let selector = 'edit-' + name.replaceAll('_' , '-') + '-horizon-chart';
-        let title = $('#' + selector).attr('chart-name');
-        let data = [];
-        this.timestamps.forEach((element, index) => {
-          data.push([
-            d3.timeParse('%Y-%m-%dT%H:%M:%S+00:00')(element),
-            this.values[index],
-          ]);
-        });
-        chart_data.push({
-          id: title,
-          values: data,
-          selector: '#' + selector,
+    fetch(drupalSettings.aws_cloud_monitor_metrics_url)
+      .then(response => response.json())
+      .then(json => {
+        let chart_data = [];
+        Object.entries(json).forEach(([name, obj]) => {
+          const selector = 'edit-' + name.replaceAll('_' , '-') + '-horizon-chart';
+          const title = document.getElementById(selector).getAttribute('chart-name');
+          let data = [];
+          obj.timestamps.forEach((element, index) => {
+            data.push([
+              d3.timeParse('%Y-%m-%dT%H:%M:%S+00:00')(element),
+              obj.values[index],
+            ]);
+          });
+          chart_data.push({
+            id: title,
+            values: data,
+            selector: '#' + selector,
+          });
+          chart_count++;
         });
+        Drupal.Cloud.drawChart(chart_data, true);
       });
-      Drupal.Cloud.drawChart(chart_data, true);
-    });
   };
 
   // Init Charts.
@@ -39,19 +43,25 @@
     initCharts();
   }, interval * 1000);
 
-  $(document).ajaxSuccess(function (event, xhr, settings) {
-    if (!settings.extraData
-      || settings.extraData._triggering_element_name !== 'chart_type') {
-      return;
-    }
-
-    if (!$('input:radio[name="chart_type"]') || $('input:radio[name="chart_type"]:checked').val() !== '1') {
-      return;
-    }
+  const radio_btn = document.querySelectorAll(`input[id='edit-chart-type-1']`);
+  if (!radio_btn || !radio_btn[0]) {
+    return;
+  }
 
-    setTimeout(function () {
+  radio_btn[0].addEventListener('change', function (event) {
+    let count = 0;
+    const interval = setInterval(function () {
+      count++;
+      const chart_parent = document.querySelectorAll('#aws-cloud-instance-monitor-charts .card-body');
+      if (!chart_parent || !chart_parent[0] || chart_parent[0].childNodes.length < chart_count) {
+        // count 20 is almost 2 sec.
+        if (count < 20) {
+          return;
+        }
+        clearInterval(interval);
+      }
       initCharts();
-    }, 1);
+      clearInterval(interval);
+    }, 100);
   });
-
-})(jQuery);
+})();