Converted Pipelines Charts

app/assets/javascripts/pipelines/pipelines_charts.js

+import Chart from 'vendor/Chart';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const chartData = JSON.parse(document.getElementById('pipelinesChartsData').innerHTML);
+  const buildChart = (chartScope) => {
+    const data = {
+      labels: chartScope.labels,
+      datasets: [{
+        fillColor: '#7f8fa4',
+        strokeColor: '#7f8fa4',
+        pointColor: '#7f8fa4',
+        pointStrokeColor: '#EEE',
+        data: chartScope.totalValues,
+      },
+      {
+        fillColor: '#44aa22',
+        strokeColor: '#44aa22',
+        pointColor: '#44aa22',
+        pointStrokeColor: '#fff',
+        data: chartScope.successValues,
+      },
+      ],
+    };
+    const ctx = $(`#${chartScope.scope}Chart`).get(0).getContext('2d');
+    const options = {
+      scaleOverlay: true,
+      responsive: true,
+      maintainAspectRatio: false,
+    };
+    if (window.innerWidth < 768) {
+      // Scale fonts if window width lower than 768px (iPad portrait)
+      options.scaleFontSize = 8;
+    }
+    new Chart(ctx).Line(data, options);
+  };
+
+  chartData.forEach(scope => buildChart(scope));
+});

app/views/projects/pipelines/charts/_pipeline_times.haml

@@ -8,25 +8,3 @@
   %canvas#build_timesChart{ height: 200 }
 
 %script#pipelinesTimesChartsData{ type: "application/json" }= { :labels => @charts[:pipeline_times].labels, :values => @charts[:pipeline_times].pipeline_times }.to_json.html_safe
-
-:javascript
-  var data = {
-    labels : #{@charts[:pipeline_times].labels.to_json},
-    datasets : [
-      {
-        fillColor : "rgba(220,220,220,0.5)",
-        strokeColor : "rgba(220,220,220,1)",
-        barStrokeWidth: 1,
-        barValueSpacing: 1,
-        barDatasetSpacing: 1,
-        data : #{@charts[:pipeline_times].pipeline_times.to_json}
-      }
-    ]
-  }
-  var ctx = $("#build_timesChart").get(0).getContext("2d");
-  var options = { scaleOverlay: true, responsive: true, maintainAspectRatio: false };
-  if (window.innerWidth < 768) {
-    // Scale fonts if window width lower than 768px (iPad portrait)
-    options.scaleFontSize = 8
-  }
-  new Chart(ctx).Bar(data, options);

app/views/projects/pipelines/charts/_pipelines.haml

+- content_for :page_specific_javascripts do
+  = webpack_bundle_tag('pipelines_charts')
+
 %h4= _("Pipelines charts")
 %p
    
@@ -26,31 +29,8 @@
     = _("Jobs for last year")
   %canvas#yearChart.padded{ height: 250 }
 
-- [:week, :month, :year].each do |scope|
-  :javascript
-    var data = {
-      labels : #{@charts[scope].labels.to_json},
-      datasets : [
-        {
-          fillColor : "#7f8fa4",
-          strokeColor : "#7f8fa4",
-          pointColor : "#7f8fa4",
-          pointStrokeColor : "#EEE",
-          data : #{@charts[scope].total.to_json}
-        },
-        {
-          fillColor : "#44aa22",
-          strokeColor : "#44aa22",
-          pointColor : "#44aa22",
-          pointStrokeColor : "#fff",
-          data : #{@charts[scope].success.to_json}
-        }
-      ]
-    }
-    var ctx = $("##{scope}Chart").get(0).getContext("2d");
-    var options = { scaleOverlay: true, responsive: true, maintainAspectRatio: false };
-    if (window.innerWidth < 768) {
-      // Scale fonts if window width lower than 768px (iPad portrait)
-      options.scaleFontSize = 8
-    }
-    new Chart(ctx).Line(data, options);
+%script#pipelinesChartsData{ type: "application/json" }
+  - chartData = [] 
+  - [:week, :month, :year].each do |scope|
+    - chartData.push({ 'scope' => scope, 'labels' => @charts[scope].labels, 'totalValues' => @charts[scope].total, 'successValues' => @charts[scope].success })
+  = chartData.to_json.html_safe

config/webpack.config.js

@@ -54,6 +54,7 @@ var config = {
     notebook_viewer:      './blob/notebook_viewer.js',
     pdf_viewer:           './blob/pdf_viewer.js',
     pipelines:            './pipelines/pipelines_bundle.js',
+    pipelines_charts:     './pipelines/pipelines_charts.js',
     pipelines_details:    './pipelines/pipeline_details_bundle.js',
     pipelines_times:      './pipelines/pipelines_times.js',
     profile:              './profile/profile_bundle.js',