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

js/cloud_horizon_chart.js

-(function ($) {
+(function () {
   'use strict';
 
-  Drupal.Cloud = {};
+  window.Drupal = {};
+  window.Drupal.Cloud = {};
 
   const colors = [
     ['#edf8e9', '#bae4b3', '#74c476', '#31a354', '#006d2c'],
@@ -17,18 +18,28 @@
   const BACKGROUND_DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 
   // Draw Chart Function.
-  Drupal.Cloud.drawChart = function (data, first) {
+  window.Drupal.Cloud.drawChart = function (data, first) {
     data.forEach(function (item, idx) {
       // Delete current chart.
-      d3.select(item.selector).select('svg').remove();
+      if (document.querySelector(item.selector)) {
+        document.querySelector(item.selector).innerHTML = '';
+      }
 
       // Draw charts.
       if (first && idx === 0) {
         // Delete the axis.
-        d3.select('#x-axis').remove();
+        const xAxis = document.querySelector('#x-axis');
+        if (xAxis && xAxis.parentNode) {
+          xAxis.parentNode.removeChild(xAxis);
+        }
 
         // Add <div> for the axis.
-        $(item.selector).before('<div id="x-axis"></div>');
+        const xAxisDiv = document.createElement('div');
+        xAxisDiv.id = 'x-axis';
+        const chartContainer = document.querySelector(item.selector);
+        if (chartContainer && chartContainer.parentNode) {
+          chartContainer.parentNode.insertBefore(xAxisDiv, chartContainer);
+        }
 
         // Draw charts.
         const axis = new HorizonChart();
@@ -37,25 +48,32 @@
         axis.setSelector('#x-axis');
         axis.draw();
 
-        const chartg = d3.selectAll('#x-axis g:first-child');
-        chartg.style('display', 'none');
-        const axisg = d3.selectAll('#x-axis .axis');
-        axisg.attr('font-size', AXIS_FONT_SIZE);
+        const chartg = document.querySelectorAll('#x-axis g:first-child');
+        if (chartg && chartg.style) {
+          chartg.style.display = 'none';
+        }
+        const axisg = document.querySelectorAll('#x-axis .axis');
+        if (axis && axisg.style) {
+          axisg.style.fontSize = AXIS_FONT_SIZE;
+        }
       }
 
       // Draw charts.
       const horizonChart = new HorizonChart();
-      const fontColor = $(item.selector).css('color');
+      const fontColor = window.getComputedStyle(document.querySelector(item.selector)).color;
 
       let bgColor = '';
-      $(item.selector).parents().each(function () {
-        console.log(getComputedStyle(this).backgroundColor);
-        let color = getComputedStyle(this).backgroundColor;
-        if (color && color !== BACKGROUND_DEFAULT_COLOR) {
-          bgColor = color;
-          return false;
+      let parents = document.querySelectorAll(item.selector).parents;
+      if (parents) {
+        for (let i = 0; i < parents.length; i++) {
+          console.log(window.getComputedStyle(parents[i]).backgroundColor);
+          let color = window.getComputedStyle(parents[i]).backgroundColor;
+          if (color && color !== BACKGROUND_DEFAULT_COLOR) {
+            bgColor = color;
+            break;
+          }
         }
-      });
+      }
       horizonChart.setTitle(item.id);
       horizonChart.setTitleFontSize(TITLE_FONT_SIZE);
       horizonChart.setTitlePosition(TITLE_POSITION_X, TITLE_POSITION_Y);
@@ -67,23 +85,26 @@
       horizonChart.setShowXScale(false);
       horizonChart.draw();
 
-      const g = d3.selectAll(item.selector + ' svg g');
-      const title = d3.selectAll(item.selector + ' svg text');
-      const bbox = $(item.selector + ' svg text')[0].getBBox();
+      const g = document.querySelectorAll(item.selector + ' svg g');
+      const title = document.querySelectorAll(item.selector + ' svg text');
+      const bbox = document.querySelectorAll(item.selector + ' svg text')[0].getBBox();
 
-      g.insert('rect', item.selector + ' svg text')
-      .attr('x', bbox.x - 1)
-      .attr('y', bbox.y)
-      .attr('width', bbox.width + 2)
-      .attr('height', bbox.height)
-      .attr('fill', bgColor)
-      .style('opacity', '0.8');
+      const rect = document.createElement('rect');
+      rect.setAttribute('x', bbox.x - 1);
+      rect.setAttribute('y', bbox.y);
+      rect.setAttribute('width', bbox.width + 2);
+      rect.setAttribute('height', bbox.height);
+      rect.setAttribute('fill', bgColor);
+      rect.style.opacity = '0.8';
+      if (g) {
+        g.insertBefore(rect, item.selector + ' svg text');
+      }
 
-      $(item.selector).css('margin-bottom', '0');
+      document.querySelector(item.selector).style.marginBottom = '0';
 
       if (!first || idx > 0) {
-        $(item.selector).css('border-top', '1px solid #ddd');
+        document.querySelector(item.selector).style.borderTop = '1px solid #ddd';
       }
     });
   };
-})(jQuery);
+})();