Merge branch 'chart-js-updates' into 'master'

Update `chart.js` to 2.7.2

See merge request gitlab-org/gitlab-ce!24771

app/assets/javascripts/lib/utils/chart_utils.js

+const commonTooltips = () => ({
+  mode: 'x',
+  intersect: false,
+});
+
+const adjustedFontScale = () => ({
+  fontSize: 8,
+});
+
+const yAxesConfig = (shouldAdjustFontSize = false) => ({
+  yAxes: [
+    {
+      ticks: {
+        beginAtZero: true,
+        ...(shouldAdjustFontSize ? adjustedFontScale() : {}),
+      },
+    },
+  ],
+});
+
+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)',
+        };
+      },
+    },
+  },
+});

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);
 });

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

 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));
 });

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

@@ -55,23 +55,23 @@
             #{@commits_graph.authors}
           = (_("Authors: %{authors}") % { authors: "<strong>#{authors}</strong>" }).html_safe
     .col-md-6
+      %p.slead
+        = _("Commits per day of month")
       %div
-        %p.slead
-          = _("Commits per day of month")
         %canvas#month-chart
   .row
     .col-md-6
     .col-md-6
+      %p.slead
+        = _("Commits per weekday")
       %div
-        %p.slead
-          = _("Commits per weekday")
         %canvas#weekday-chart
   .row
     .col-md-6
     .col-md-6
+      %p.slead
+        = _("Commits per day hour (UTC)")
       %div
-        %p.slead
-          = _("Commits per day hour (UTC)")
         %canvas#hour-chart
 
 -# haml-lint:disable InlineJavaScript

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

-%div
-  %p.light
-    = _("Commit duration in minutes for last 30 commits")
+%p.light
+  = _("Commit duration in minutes for last 30 commits")
 
+%div
   %canvas#build_timesChart{ height: 200 }
 
 -# haml-lint:disable InlineJavaScript

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

@@ -13,18 +13,21 @@
   %p.light
     = _("Pipelines for last week")
     (#{date_from_to(Date.today - 7.days, Date.today)})
-  %canvas#weekChart{ height: 200 }
+  %div
+    %canvas#weekChart{ height: 200 }
 
 .prepend-top-default
   %p.light
     = _("Pipelines for last month")
     (#{date_from_to(Date.today - 30.days, Date.today)})
-  %canvas#monthChart{ height: 200 }
+  %div
+    %canvas#monthChart{ height: 200 }
 
 .prepend-top-default
   %p.light
     = _("Pipelines for last year")
-  %canvas#yearChart.padded{ height: 250 }
+  %div
+    %canvas#yearChart.padded{ height: 250 }
 
 -# haml-lint:disable InlineJavaScript
 %script#pipelinesChartsData{ type: "application/json" }

package.json

@@ -38,7 +38,7 @@
     "bootstrap": "4.1.3",
     "brace-expansion": "^1.1.8",
     "cache-loader": "^2.0.1",
-    "chart.js": "1.0.2",
+    "chart.js": "2.7.2",
     "classlist-polyfill": "^1.2.0",
     "clipboard": "^1.7.1",
     "codesandbox-api": "^0.0.20",

yarn.lock

@@ -2122,10 +2122,28 @@ chardet@^0.5.0:
   resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
   integrity sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=
 
-chart.js@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-1.0.2.tgz#ad57d2229cfd8ccf5955147e8121b4911e69dfe7"
-  integrity sha1-rVfSIpz9jM9ZVRR+gSG0kR5p3+c=
+chart.js@2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.7.2.tgz#3c9fde4dc5b95608211bdefeda7e5d33dffa5714"
+  integrity sha512-90wl3V9xRZ8tnMvMlpcW+0Yg13BelsGS9P9t0ClaDxv/hdypHDr/YAGf+728m11P5ljwyB0ZHfPKCapZFqSqYA==
+  dependencies:
+    chartjs-color "^2.1.0"
+    moment "^2.10.2"
+
+chartjs-color-string@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz#8d3752d8581d86687c35bfe2cb80ac5213ceb8c1"
+  integrity sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==
+  dependencies:
+    color-name "^1.0.0"
+
+chartjs-color@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.2.0.tgz#84a2fb755787ed85c39dd6dd8c7b1d88429baeae"
+  integrity sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=
+  dependencies:
+    chartjs-color-string "^0.5.0"
+    color-convert "^0.5.3"
 
 check-types@^7.3.0:
   version "7.3.0"
@@ -2296,6 +2314,11 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
+color-convert@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
+  integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -2303,7 +2326,7 @@ color-convert@^1.9.0:
   dependencies:
     color-name "1.1.3"
 
-color-name@1.1.3:
+color-name@1.1.3, color-name@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
@@ -6985,10 +7008,10 @@ mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
-moment@2.x, moment@^2.21.0:
-  version "2.22.2"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
-  integrity sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y=
+moment@2.x, moment@^2.10.2, moment@^2.21.0:
+  version "2.23.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.23.0.tgz#759ea491ac97d54bac5ad776996e2a58cc1bc225"
+  integrity sha512-3IE39bHVqFbWWaPOMHZF98Q9c3LDKGTmypMiTM2QygGXXElkFWIH7GxfmlwmY2vwa+wmNsoYZmG2iusf1ZjJoA==
 
 monaco-editor-webpack-plugin@^1.7.0:
   version "1.7.0"