index.js 1.58 KB
Newer Older
1
import $ from 'jquery';
Jacob Schatz's avatar
Jacob Schatz committed
2
import Chart from 'chart.js';
3

4 5 6
import { lineChartOptions } from '~/lib/utils/chart_utils';

import initProjectPipelinesChartsApp from '~/projects/pipelines/charts/index';
7 8 9 10

const SUCCESS_LINE_COLOR = '#1aaa55';

const TOTAL_LINE_COLOR = '#707070';
11

12
const buildChart = (chartScope, shouldAdjustFontSize) => {
13 14
  const data = {
    labels: chartScope.labels,
15 16
    datasets: [
      {
17 18 19 20 21 22
        backgroundColor: SUCCESS_LINE_COLOR,
        borderColor: SUCCESS_LINE_COLOR,
        pointBackgroundColor: SUCCESS_LINE_COLOR,
        pointBorderColor: '#fff',
        data: chartScope.successValues,
        fill: 'origin',
23 24
      },
      {
25 26 27 28 29 30
        backgroundColor: TOTAL_LINE_COLOR,
        borderColor: TOTAL_LINE_COLOR,
        pointBackgroundColor: TOTAL_LINE_COLOR,
        pointBorderColor: '#EEE',
        data: chartScope.totalValues,
        fill: '-1',
31
      },
32 33
    ],
  };
34 35 36
  const ctx = $(`#${chartScope.scope}Chart`)
    .get(0)
    .getContext('2d');
37

38 39 40 41 42 43 44 45 46
  return new Chart(ctx, {
    type: 'line',
    data,
    options: lineChartOptions({
      width: ctx.canvas.width,
      numberOfPoints: chartScope.totalValues.length,
      shouldAdjustFontSize,
    }),
  });
47 48
};

49 50 51 52 53 54 55
document.addEventListener('DOMContentLoaded', () => {
  const chartsData = JSON.parse(document.getElementById('pipelinesChartsData').innerHTML);

  // Scale fonts if window width lower than 768px (iPad portrait)
  const shouldAdjustFontSize = window.innerWidth < 768;

  chartsData.forEach(scope => buildChart(scope, shouldAdjustFontSize));
56
});
57 58

document.addEventListener('DOMContentLoaded', initProjectPipelinesChartsApp);