2 files changed, 88 insertions, 66 deletions

diff --git a/app/assets/javascripts/pages/projects/graphs/charts/index.js b/app/assets/javascripts/pages/projects/graphs/charts/index.js
index 26d7fa7371d..314519ee442 100644
--- a/app/assets/javascripts/pages/projects/graphs/charts/index.js
+++ b/app/assets/javascripts/pages/projects/graphs/charts/index.js
@@ -2,42 +2,44 @@ import $ from 'jquery';
 import Chart from 'chart.js';
 import _ from 'underscore';
 
+import { barChartOptions, pieChartOptions } from '~/lib/utils/chart_utils';
+
 document.addEventListener('DOMContentLoaded', () => {
   const projectChartData = JSON.parse(document.getElementById('projectChartData').innerHTML);
 
-  const responsiveChart = (selector, data) => {
-    const options = {
-      scaleOverlay: true,
-      responsive: true,
-      pointHitDetectionRadius: 2,
-      maintainAspectRatio: false,
-    };
+  const barChart = (selector, data) => {
     // get selector by context
     const ctx = selector.get(0).getContext('2d');
     // pointing parent container to make chart.js inherit its width
     const container = $(selector).parent();
-    const generateChart = () => {
-      selector.attr('width', $(container).width());
-      if (window.innerWidth < 768) {
-        // Scale fonts if window width lower than 768px (iPad portrait)
-        options.scaleFontSize = 8;
-      }
-      return new Chart(ctx).Bar(data, options);
-    };
-    // enabling auto-resizing
-    $(window).resize(generateChart);
-    return generateChart();
+    selector.attr('width', $(container).width());
+
+    // Scale fonts if window width lower than 768px (iPad portrait)
+    const shouldAdjustFontSize = window.innerWidth < 768;
+    return new Chart(ctx, {
+      type: 'bar',
+      data,
+      options: barChartOptions(shouldAdjustFontSize),
+    });
+  };
+
+  const pieChart = (context, data) => {
+    const options = pieChartOptions();
+
+    return new Chart(context, {
+      type: 'pie',
+      data,
+      options,
+    });
   };
 
   const chartData = data => ({
     labels: Object.keys(data),
     datasets: [
       {
-        fillColor: 'rgba(220,220,220,0.5)',
-        strokeColor: 'rgba(220,220,220,1)',
-        barStrokeWidth: 1,
-        barValueSpacing: 1,
-        barDatasetSpacing: 1,
+        backgroundColor: 'rgba(220,220,220,0.5)',
+        borderColor: 'rgba(220,220,220,1)',
+        borderWidth: 1,
         data: _.values(data),
       },
     ],
@@ -59,24 +61,27 @@ document.addEventListener('DOMContentLoaded', () => {
   };
 
   const hourData = chartData(projectChartData.hour);
-  responsiveChart($('#hour-chart'), hourData);
+  barChart($('#hour-chart'), hourData);
 
   const weekDays = reorderWeekDays(projectChartData.weekDays, gon.first_day_of_week);
   const dayData = chartData(weekDays);
-  responsiveChart($('#weekday-chart'), dayData);
+  barChart($('#weekday-chart'), dayData);
 
   const monthData = chartData(projectChartData.month);
-  responsiveChart($('#month-chart'), monthData);
+  barChart($('#month-chart'), monthData);
 
-  const data = projectChartData.languages;
+  const data = {
+    datasets: [
+      {
+        data: projectChartData.languages.map(x => x.value),
+        backgroundColor: projectChartData.languages.map(x => x.color),
+        hoverBackgroundColor: projectChartData.languages.map(x => x.highlight),
+      },
+    ],
+    labels: projectChartData.languages.map(x => x.label),
+  };
   const ctx = $('#languages-chart')
     .get(0)
     .getContext('2d');
-  const options = {
-    scaleOverlay: true,
-    responsive: true,
-    maintainAspectRatio: false,
-  };
-
-  new Chart(ctx).Pie(data, options);
+  pieChart(ctx, data);
 });
diff --git a/app/assets/javascripts/pages/projects/pipelines/charts/index.js b/app/assets/javascripts/pages/projects/pipelines/charts/index.js
index 48353f3b4ef..9fa580d2ba9 100644
--- a/app/assets/javascripts/pages/projects/pipelines/charts/index.js
+++ b/app/assets/javascripts/pages/projects/pipelines/charts/index.js
@@ -1,29 +1,31 @@
 import $ from 'jquery';
 import Chart from 'chart.js';
 
-const options = {
-  scaleOverlay: true,
-  responsive: true,
-  maintainAspectRatio: false,
-};
+import { barChartOptions, lineChartOptions } from '~/lib/utils/chart_utils';
+
+const SUCCESS_LINE_COLOR = '#1aaa55';
+
+const TOTAL_LINE_COLOR = '#707070';
 
-const buildChart = chartScope => {
+const buildChart = (chartScope, shouldAdjustFontSize) => {
   const data = {
     labels: chartScope.labels,
     datasets: [
       {
-        fillColor: '#707070',
-        strokeColor: '#707070',
-        pointColor: '#707070',
-        pointStrokeColor: '#EEE',
-        data: chartScope.totalValues,
+        backgroundColor: SUCCESS_LINE_COLOR,
+        borderColor: SUCCESS_LINE_COLOR,
+        pointBackgroundColor: SUCCESS_LINE_COLOR,
+        pointBorderColor: '#fff',
+        data: chartScope.successValues,
+        fill: 'origin',
       },
       {
-        fillColor: '#1aaa55',
-        strokeColor: '#1aaa55',
-        pointColor: '#1aaa55',
-        pointStrokeColor: '#fff',
-        data: chartScope.successValues,
+        backgroundColor: TOTAL_LINE_COLOR,
+        borderColor: TOTAL_LINE_COLOR,
+        pointBackgroundColor: TOTAL_LINE_COLOR,
+        pointBorderColor: '#EEE',
+        data: chartScope.totalValues,
+        fill: '-1',
       },
     ],
   };
@@ -31,36 +33,51 @@ const buildChart = chartScope => {
     .get(0)
     .getContext('2d');
 
-  new Chart(ctx).Line(data, options);
+  return new Chart(ctx, {
+    type: 'line',
+    data,
+    options: lineChartOptions({
+      width: ctx.canvas.width,
+      numberOfPoints: chartScope.totalValues.length,
+      shouldAdjustFontSize,
+    }),
+  });
 };
 
-document.addEventListener('DOMContentLoaded', () => {
-  const chartTimesData = JSON.parse(document.getElementById('pipelinesTimesChartsData').innerHTML);
-  const chartsData = JSON.parse(document.getElementById('pipelinesChartsData').innerHTML);
+const buildBarChart = (chartTimesData, shouldAdjustFontSize) => {
   const data = {
     labels: chartTimesData.labels,
     datasets: [
       {
-        fillColor: 'rgba(220,220,220,0.5)',
-        strokeColor: 'rgba(220,220,220,1)',
-        barStrokeWidth: 1,
+        backgroundColor: 'rgba(220,220,220,0.5)',
+        borderColor: 'rgba(220,220,220,1)',
+        borderWidth: 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(
+  return new Chart(
     $('#build_timesChart')
       .get(0)
       .getContext('2d'),
-  ).Bar(data, options);
+    {
+      type: 'bar',
+      data,
+      options: barChartOptions(shouldAdjustFontSize),
+    },
+  );
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  const chartTimesData = JSON.parse(document.getElementById('pipelinesTimesChartsData').innerHTML);
+  const chartsData = JSON.parse(document.getElementById('pipelinesChartsData').innerHTML);
+
+  // Scale fonts if window width lower than 768px (iPad portrait)
+  const shouldAdjustFontSize = window.innerWidth < 768;
+
+  buildBarChart(chartTimesData, shouldAdjustFontSize);
 
-  chartsData.forEach(scope => buildChart(scope));
+  chartsData.forEach(scope => buildChart(scope, shouldAdjustFontSize));
 });