Issue #3267238 by nikathone: Replace JQuery with vanilla Javascript in charts

modules/charts_billboard/charts_billboard.libraries.yml

@@ -5,7 +5,6 @@ charts_billboard:
   dependencies:
     - charts/global
     - core/drupal
-    - core/jquery
     - core/once
 d3:
   remote: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.js'

modules/charts_billboard/js/charts_billboard.js

@@ -2,15 +2,16 @@
  * @file
  * JavaScript integration between Billboard and Drupal.
  */
-(function ($, Drupal, once) {
+(function (Drupal, once) {
+
   'use strict';
+
   Drupal.behaviors.chartsBillboard = {
     attach: function (context, settings) {
-      var contents = new Drupal.Charts.Contents();
+      const contents = new Drupal.Charts.Contents();
       once('charts-billboard', '.charts-billboard', context).forEach(function (element) {
-        var id = element['attributes']['id']['value'];
-        bb.generate(contents.getData(id));
+        bb.generate(contents.getData(element.id));
       });
     }
   };
-}(jQuery, Drupal, once));
+}(Drupal, once));

modules/charts_c3/charts_c3.libraries.yml

@@ -5,7 +5,6 @@ charts_c3:
   dependencies:
     - charts/global
     - core/drupal
-    - core/jquery
     - core/once
 d3:
   remote: 'https://d3js.org/d3.v3.min.js'

modules/charts_c3/js/charts_c3.js

 /**
  * @file
- * JavaScript integration between C3 and Drupal.
+ * JavaScript's integration between C3 and Drupal.
  */
-(function ($, Drupal, once) {
+(function (Drupal, once) {
+
   'use strict';
+
   Drupal.behaviors.chartsC3 = {
     attach: function (context, settings) {
-      var contents = new Drupal.Charts.Contents();
+      const contents = new Drupal.Charts.Contents();
       once('charts-c3', '.charts-c3', context).forEach(function (element) {
-        var id = element['attributes']['id']['value'];
-        c3.generate(contents.getData(id));
+        c3.generate(contents.getData(element.id));
       });
     }
   };
-}(jQuery, Drupal, once));
+}(Drupal, once));

modules/charts_chartjs/charts_chartjs.libraries.yml

@@ -10,7 +10,6 @@ charts_chartjs:
     /libraries/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.js: { }
   dependencies:
     - core/drupal
-    - core/jquery
     - core/once
 chartjs:
   version: 1.x

modules/charts_chartjs/js/charts_chartjs.js

@@ -2,30 +2,42 @@
  * @file
  * JavaScript integration between Chart.js and Drupal.
  */
-(function ($, Drupal, once) {
+(function (Drupal, once) {
+
   'use strict';
+
+  function copyAttributes(source, target) {
+    return Array.from(source.attributes).forEach(attribute => {
+      target.setAttribute(
+        attribute.nodeName === 'id' ? 'data-id' : attribute.nodeName,
+        attribute.nodeValue,
+      );
+    });
+  }
+
   Drupal.behaviors.chartsChartjs = {
-    attach: function (context, settings) {
-      var contents = new Drupal.Charts.Contents();
-      $('.charts-chartjs').each(function () {
-        // Store attributes before switching div for canvas element.
-        var chartId = $(this).attr('id');
-        var dataChart = "data-chart='" + document.getElementById(chartId).getAttribute("data-chart") + "'";
-        var style = 'style="' + document.getElementById(chartId).getAttribute('style') + '"';
-        $(this).replaceWith(function (n) {
-          return '<canvas ' + dataChart + style + 'id="' + chartId + '"' + '>' + n + '</canvas>'
-        });
-        once('load-charts-chartjs', '#' + chartId, context).forEach(function () {
-         var chartjsChart = $(this).attr('data-chart');
-          var chart = contents.getData(chartId);
-          var options = chart['options'];
-          var myChart = new Chart(chartId, {
-            type: chart['type'],
-            data: chart['data'],
-            options: options
-          });
+    attach: function (context) {
+      const contents = new Drupal.Charts.Contents();
+
+      once('load-charts-chartjs', '.charts-chartjs', context).forEach(function (element) {
+        const chartId = element.id;
+        // Switching div for canvas element.
+        const parent = element.parentNode;
+        const canvas = document.createElement('canvas');
+        // Transferring the attributes of our source element to the canvas.
+        copyAttributes(element, canvas);
+        canvas.id = chartId;
+        parent.replaceChild(canvas, element);
+
+        // Initializing the chart item.
+        const chart = contents.getData(chartId);
+        const options = chart['options'];
+        new Chart(chartId, {
+          type: chart['type'],
+          data: chart['data'],
+          options: options,
         });
       });
     }
   };
-}(jQuery, Drupal, once));
+}(Drupal, once));

modules/charts_google/charts_google.libraries.yml

@@ -4,8 +4,6 @@ charts_google:
     js/charts_google.js: { weight: -1 }
   dependencies:
     - charts/global
-    - core/drupal
-    - core/jquery
     - core/once
 google:
   remote: 'https://www.gstatic.com/charts/loader.js'

modules/charts_google/js/charts_google.js

@@ -2,50 +2,49 @@
  * @file
  * JavaScript integration between Google and Drupal.
  */
-(function ($, Drupal, once) {
+(function (Drupal, once) {
+
   'use strict';
+
   Drupal.googleCharts = Drupal.googleCharts || {charts: []};
+
   /**
    * Behavior to initialize Google Charts.
    *
    * @type {{attach: Drupal.behaviors.chartsGooglecharts.attach}}
    */
   Drupal.behaviors.chartsGooglecharts = {
-    attach: function (context, settings) {
+    attach: function (context) {
       // Load Google Charts API.
       google.charts.load('current', {packages: ['corechart', 'gauge']});
-      once('load-google-charts', 'body', context).forEach(function () {
-        // Re-draw charts if viewport size has been changed.
-        $(window).on('resize', function () {
-          Drupal.googleCharts.waitForFinalEvent(function () {
-            // Re-draw Google Charts.
-            Drupal.googleCharts.drawCharts(true);
-          }, 200, 'reload-google-charts');
-        });
+
+      // Re-draw charts if viewport size has been changed.
+      window.addEventListener('resize', function () {
+        Drupal.googleCharts.waitForFinalEvent(function () {
+          // Re-draw Google Charts.
+          Drupal.googleCharts.drawCharts();
+        }, 200, 'reload-google-charts');
       });
+
       // Draw Google Charts.
       Drupal.googleCharts.drawCharts();
     }
   };
+
   /**
    * Helper function to draw Google Charts.
-   *
-   * @param {boolean} reload - Reload.
    */
-  Drupal.googleCharts.drawCharts = function (reload) {
-    var contents = new Drupal.Charts.Contents();
-    once('load-google-charts-item', '.charts-google').forEach(function (elt) {
-      var $chart = $(elt);
-      var chartId = $chart.attr('id');
-      if ($chart.attr('data-chart')) {
-        var dataAttributes = contents.getData(chartId);
-        var data = dataAttributes['data'];
-        var options = dataAttributes['options'];
-        var type = dataAttributes['visualization'];
-        google.charts.setOnLoadCallback(Drupal.googleCharts.drawChart(chartId, type, data, options));
+  Drupal.googleCharts.drawCharts = function () {
+    const contents = new Drupal.Charts.Contents();
+    once('load-google-charts-item', '.charts-google').forEach(function (element) {
+      if (element.dataset.hasOwnProperty('chart')) {
+        const chartId = element.id;
+        const dataAttributes = contents.getData(chartId);
+        google.charts.setOnLoadCallback(Drupal.googleCharts.drawChart(chartId, dataAttributes['visualization'], dataAttributes['data'], dataAttributes['options']));
       }
     });
   };
+
   /**
    * Helper function to draw a Google Chart.
    *
@@ -58,11 +57,11 @@
    */
   Drupal.googleCharts.drawChart = function (chartId, chartType, dataTable, googleChartOptions) {
     return function () {
-      var data = google.visualization.arrayToDataTable(dataTable);
-      var options = googleChartOptions;
-      var googleChartTypeFormatted = chartType;
-      console.log(googleChartTypeFormatted);
-      var chart;
+      const data = google.visualization.arrayToDataTable(dataTable);
+      const options = googleChartOptions;
+      const googleChartTypeFormatted = chartType;
+
+      let chart;
       switch (googleChartTypeFormatted) {
         case 'BarChart':
           chart = new google.visualization.BarChart(document.getElementById(chartId));
@@ -96,34 +95,37 @@
         case 'GeoChart':
           chart = new google.visualization.GeoChart(document.getElementById(chartId));
       }
+
       // Fix for https://www.drupal.org/project/charts/issues/2950654.
       // Would be interested in a different approach that allowed the default
       // colors to be applied first, rather than unsetting.
       if (options['colors'].length > 10) {
-        for (var i in options) {
+        for (const i in options) {
           if (i === 'colors') {
             delete options[i];
             break;
           }
         }
       }
+
       // Rewrite the colorAxis item to include the colors: key
       if (typeof options['colorAxis'] != 'undefined') {
-        var num_colors = options['colorAxis'].length;
-        var colors = options['colorAxis'];
-        options['colorAxis'] = options['colorAxis'].splice(num_colors);
+        const colors = options['colorAxis'];
+        const num_colors = colors.length;
+        options['colorAxis'] = colors.splice(num_colors);
         options['colorAxis'] = {colors: colors};
       }
       chart.draw(data, options);
     };
   };
+
   /**
    * Helper function to run a callback function once when triggering an event
    * multiple times.
    *
    * Example usage:
    * @code
-   *  $(window).resize(function () {
+   *  window.addEventListener('resize', function () {
    *    Drupal.googleCharts.waitForFinalEvent(function(){
    *      alert('Resize...');
    *    }, 500, "some unique string");
@@ -131,7 +133,7 @@
    * @endcode
    */
   Drupal.googleCharts.waitForFinalEvent = (function () {
-    var timers = {};
+    let timers = {};
     return function (callback, ms, uniqueId) {
       if (!uniqueId) {
         uniqueId = "Don't call this twice without a uniqueId";
@@ -142,4 +144,4 @@
       timers[uniqueId] = setTimeout(callback, ms);
     };
   })();
-}(jQuery, Drupal, once));
+}(Drupal, once));

modules/charts_highcharts/charts_highcharts.libraries.yml

@@ -4,8 +4,6 @@ charts_highcharts:
     js/charts_highcharts.js: { weight: -1 }
   dependencies:
       - charts/global
-      - core/drupal
-      - core/jquery
       - core/once
 highcharts:
   remote: https://code.highcharts.com/highcharts.js

modules/charts_highcharts/js/charts_highcharts.js

 /**
  * @file
- * JavaScript integration between Highcharts and Drupal.
+ * JavaScript's integration between Highcharts and Drupal.
  */
-(function ($, Drupal, once) {
+(function (Drupal, once) {
+
   'use strict';
+
   Drupal.behaviors.chartsHighcharts = {
-    attach: function (context, settings) {
-      var contents = new Drupal.Charts.Contents();
+    attach: function (context) {
+      const contents = new Drupal.Charts.Contents();
       once('charts-highchart', '.charts-highchart', context).forEach(function (element) {
-        var id = element['attributes']['id']['value'];
-        $('#' + id).highcharts(contents.getData(id));
+        const id = element.id;
+        let config = contents.getData(id);
+        config.chart.renderTo = id;
+        new Highcharts.Chart(config);
       });
     },
     detach: function (context, settings, trigger) {
       if (trigger === 'unload') {
-        var highcharts_in_context = $('.charts-highchart', context).highcharts();
-        if (highcharts_in_context) {
-          highcharts_in_context.destroy();
-        }
+        once('charts-highchart-detach', '.charts-highchart', context).forEach(function (element) {
+          if (!element.dataset.hasOwnProperty('highchartsChart')) {
+            return;
+          }
+
+          Highcharts.charts[element.dataset.highchartsChart].destroy();
+        });
       }
     }
-
   };
-}(jQuery, Drupal, once));
+}(Drupal, once));

tests/src/FunctionalJavascript/DataCollectorTableTest.php

@@ -220,12 +220,9 @@ class DataCollectorTableTest extends WebDriverTestBase {
    *   The selector.
    */
   protected function pressAjaxButton($selector) {
-    $button = $this->getSession()
-      ->getPage()
-      ->find('css', $selector);
-    $this->getSession()->executeScript("jQuery('" . $selector . "').trigger('mouseleave')");
-    $button->mouseOver();
-    $button->press();
+    $button = $this->assertSession()->waitForElementVisible('css', $selector);
+    $this->assertNotEmpty($button);
+    $button->click();
   }
 
   /**
@@ -253,9 +250,8 @@ class DataCollectorTableTest extends WebDriverTestBase {
    *   The url.
    */
   protected function getResourcesUrl() {
-    $resources_path = drupal_get_path('module', 'charts') . '/tests/resources';
+    $resources_path = \Drupal::service('extension.list.module')->getPath('charts') . '/tests/resources';
     return Url::fromUri('internal:/' . $resources_path)->toString();
-    // ->setAbsolute()
   }
 
 }