Updated pipelines charts to use dynamic webpack bundle

#41341

app/assets/javascripts/pages/projects/pipelines/charts/index.js

+import Chart from 'vendor/Chart';
+
+const options = {
+  scaleOverlay: true,
+  responsive: true,
+  maintainAspectRatio: false,
+};
+
+const buildChart = (chartScope) => {
+  const data = {
+    labels: chartScope.labels,
+    datasets: [{
+      fillColor: '#707070',
+      strokeColor: '#707070',
+      pointColor: '#707070',
+      pointStrokeColor: '#EEE',
+      data: chartScope.totalValues,
+    },
+    {
+      fillColor: '#1aaa55',
+      strokeColor: '#1aaa55',
+      pointColor: '#1aaa55',
+      pointStrokeColor: '#fff',
+      data: chartScope.successValues,
+    },
+    ],
+  };
+  const ctx = $(`#${chartScope.scope}Chart`).get(0).getContext('2d');
+
+  new Chart(ctx).Line(data, options);
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  const chartTimesData = JSON.parse(document.getElementById('pipelinesTimesChartsData').innerHTML);
+  const chartsData = JSON.parse(document.getElementById('pipelinesChartsData').innerHTML);
+  const data = {
+    labels: chartTimesData.labels,
+    datasets: [{
+      fillColor: 'rgba(220,220,220,0.5)',
+      strokeColor: 'rgba(220,220,220,1)',
+      barStrokeWidth: 1,
+      barValueSpacing: 1,
+      barDatasetSpacing: 1,
+      data: chartTimesData.values,
+    }],
+  };
+
+  if (window.innerWidth < 768) {
+    // Scale fonts if window width lower than 768px (iPad portrait)
+    options.scaleFontSize = 8;
+  }
+
+  new Chart($('#build_timesChart').get(0).getContext('2d')).Bar(data, options);
+
+  chartsData.forEach(scope => buildChart(scope));
+});

app/assets/javascripts/pipelines/pipelines_times.js

-import Chart from 'vendor/Chart';
-
-document.addEventListener('DOMContentLoaded', () => {
-  const chartData = JSON.parse(document.getElementById('pipelinesTimesChartsData').innerHTML);
-  const data = {
-    labels: chartData.labels,
-    datasets: [{
-      fillColor: 'rgba(220,220,220,0.5)',
-      strokeColor: 'rgba(220,220,220,1)',
-      barStrokeWidth: 1,
-      barValueSpacing: 1,
-      barDatasetSpacing: 1,
-      data: chartData.values,
-    }],
-  };
-  const ctx = $('#build_timesChart').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).Bar(data, options);
-});

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

 - @no_container = true
 - breadcrumb_title "CI / CD Charts"
 - page_title _("Charts"), _("Pipelines")
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_d3')
-  = page_specific_javascript_bundle_tag('graphs')
 
 %div{ class: container_class }
   .sub-header-block

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

-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag('pipelines_times')
-
 %div
   %p.light
     = _("Commit duration in minutes for last 30 commits")

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

-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag('pipelines_charts')
-
 %h4= _("Pipelines charts")
 %p
    

config/webpack.config.js

@@ -79,9 +79,7 @@ var config = {
     notes:                './notes/index.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',
     project_import_gl:    './projects/project_import_gitlab_project.js',
     prometheus_metrics:   './prometheus_metrics',