Refactor Chart Options into Helper Functionschart-js-updates

The adjusted font size had not been ported over to `chart.js` 2.7.2
properly, but is now a part of the changes. This is also applied to the
project contribution charts to clean up the labels at small screen
sizes.

3 files changed, 120 insertions, 118 deletions

diff --git a/app/assets/javascripts/lib/utils/chart_utils.js b/app/assets/javascripts/lib/utils/chart_utils.js
index 37065905e25..0f78756aac8 100644
--- a/app/assets/javascripts/lib/utils/chart_utils.js
+++ b/app/assets/javascripts/lib/utils/chart_utils.js
@@ -1,33 +1,83 @@
-export const commonTooltips = () => ({
+const commonTooltips = () => ({
   mode: 'x',
   intersect: false,
 });
 
-export const barChartTooltips = () => ({
-  ...commonTooltips(),
-  displayColors: false,
-  callbacks: {
-    title() {
-      return '';
-    },
-    label({ xLabel, yLabel }) {
-      return `${xLabel}: ${yLabel}`;
-    },
-  },
+const adjustedFontScale = () => ({
+  fontSize: 8,
 });
 
-export const yAxesConfig = () => ({
+const yAxesConfig = (shouldAdjustFontSize = false) => ({
   yAxes: [
     {
       ticks: {
         beginAtZero: true,
+        ...(shouldAdjustFontSize ? adjustedFontScale() : {}),
       },
     },
   ],
 });
 
-export const chartOptions = () => ({
+const xAxesConfig = (shouldAdjustFontSize = false) => ({
+  xAxes: [
+    {
+      ticks: {
+        ...(shouldAdjustFontSize ? adjustedFontScale() : {}),
+      },
+    },
+  ],
+});
+
+const commonChartOptions = () => ({
   responsive: true,
   maintainAspectRatio: false,
   legend: false,
 });
+
+export const barChartOptions = shouldAdjustFontSize => ({
+  ...commonChartOptions(),
+  scales: {
+    ...yAxesConfig(shouldAdjustFontSize),
+    ...xAxesConfig(shouldAdjustFontSize),
+  },
+  tooltips: {
+    ...commonTooltips(),
+    displayColors: false,
+    callbacks: {
+      title() {
+        return '';
+      },
+      label({ xLabel, yLabel }) {
+        return `${xLabel}: ${yLabel}`;
+      },
+    },
+  },
+});
+
+export const pieChartOptions = commonChartOptions;
+
+export const lineChartOptions = ({ width, numberOfPoints, shouldAdjustFontSize }) => ({
+  ...commonChartOptions(),
+  scales: {
+    ...yAxesConfig(shouldAdjustFontSize),
+    ...xAxesConfig(shouldAdjustFontSize),
+  },
+  elements: {
+    point: {
+      hitRadius: width / (numberOfPoints * 2),
+    },
+  },
+  tooltips: {
+    ...commonTooltips(),
+    caretSize: 0,
+    multiKeyBackground: 'rgba(0,0,0,0)',
+    callbacks: {
+      labelColor({ datasetIndex }, { config }) {
+        return {
+          backgroundColor: config.data.datasets[datasetIndex].backgroundColor,
+          borderColor: 'rgba(0,0,0,0)',
+        };
+      },
+    },
+  },
+});
diff --git a/app/assets/javascripts/pages/projects/graphs/charts/index.js b/app/assets/javascripts/pages/projects/graphs/charts/index.js
index 4f65ac56aa0..314519ee442 100644
--- a/app/assets/javascripts/pages/projects/graphs/charts/index.js
+++ b/app/assets/javascripts/pages/projects/graphs/charts/index.js
@@ -2,40 +2,35 @@ import $ from 'jquery';
 import Chart from 'chart.js';
 import _ from 'underscore';
 
-import { chartOptions, barChartTooltips, yAxesConfig } from '~/lib/utils/chart_utils';
+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 = {
-      ...chartOptions(),
-      maintainAspectRatio: false,
-      legend: false,
-      scales: {
-        ...yAxesConfig(),
-      },
-      tooltips: barChartTooltips(),
-    };
+  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, {
-        type: '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 => ({
@@ -66,14 +61,14 @@ 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 = {
     datasets: [
@@ -88,12 +83,5 @@ document.addEventListener('DOMContentLoaded', () => {
   const ctx = $('#languages-chart')
     .get(0)
     .getContext('2d');
-  const options = chartOptions();
-
-  // eslint-disable-next-line no-new
-  new Chart(ctx, {
-    type: '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 29222351cea..9fa580d2ba9 100644
--- a/app/assets/javascripts/pages/projects/pipelines/charts/index.js
+++ b/app/assets/javascripts/pages/projects/pipelines/charts/index.js
@@ -1,36 +1,28 @@
 import $ from 'jquery';
 import Chart from 'chart.js';
 
-import {
-  chartOptions,
-  commonTooltips,
-  barChartTooltips,
-  yAxesConfig,
-} from '~/lib/utils/chart_utils';
+import { barChartOptions, lineChartOptions } from '~/lib/utils/chart_utils';
 
-const options = {
-  ...chartOptions(),
-  scales: {
-    ...yAxesConfig(),
-  },
-};
+const SUCCESS_LINE_COLOR = '#1aaa55';
+
+const TOTAL_LINE_COLOR = '#707070';
 
-const buildChart = chartScope => {
+const buildChart = (chartScope, shouldAdjustFontSize) => {
   const data = {
     labels: chartScope.labels,
     datasets: [
       {
-        backgroundColor: '#1aaa55',
-        borderColor: '#1aaa55',
-        pointBackgroundColor: '#1aaa55',
+        backgroundColor: SUCCESS_LINE_COLOR,
+        borderColor: SUCCESS_LINE_COLOR,
+        pointBackgroundColor: SUCCESS_LINE_COLOR,
         pointBorderColor: '#fff',
         data: chartScope.successValues,
         fill: 'origin',
       },
       {
-        backgroundColor: '#707070',
-        borderColor: '#707070',
-        pointBackgroundColor: '#707070',
+        backgroundColor: TOTAL_LINE_COLOR,
+        borderColor: TOTAL_LINE_COLOR,
+        pointBackgroundColor: TOTAL_LINE_COLOR,
         pointBorderColor: '#EEE',
         data: chartScope.totalValues,
         fill: '-1',
@@ -41,46 +33,18 @@ const buildChart = chartScope => {
     .get(0)
     .getContext('2d');
 
-  const chart = new Chart(ctx, {
+  return new Chart(ctx, {
     type: 'line',
     data,
-    options: {
-      ...options,
-      elements: {
-        point: {
-          hitRadius: ctx.canvas.width / (chartScope.totalValues.length * 2),
-        },
-      },
-      tooltips: {
-        ...commonTooltips(),
-        caretSize: 0,
-        multiKeyBackground: 'rgba(0,0,0,0)',
-        callbacks: {
-          labelColor({ datasetIndex }, { config }) {
-            return {
-              backgroundColor: config.data.datasets[datasetIndex].backgroundColor,
-              borderColor: 'rgba(0,0,0,0)',
-            };
-          },
-        },
-      },
-    },
-  });
-
-  window.addEventListener('resize', () => {
-    chart.update({
-      elements: {
-        point: {
-          hitRadius: ctx.canvas.width / (chartScope.totalValues.length * 2),
-        },
-      },
-    });
+    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: [
@@ -94,26 +58,26 @@ document.addEventListener('DOMContentLoaded', () => {
       },
     ],
   };
-
-  if (window.innerWidth < 768) {
-    // Scale fonts if window width lower than 768px (iPad portrait)
-    options.scaleFontSize = 8;
-  }
-
-  // eslint-disable-next-line no-new
-  new Chart(
+  return new Chart(
     $('#build_timesChart')
       .get(0)
       .getContext('2d'),
     {
       type: 'bar',
       data,
-      options: {
-        ...options,
-        tooltips: barChartTooltips(),
-      },
+      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));
 });