diff options
author | Tim Zallmann <tzallmann@gitlab.com> | 2017-07-25 14:19:27 +0300 |
---|---|---|
committer | Tim Zallmann <tzallmann@gitlab.com> | 2017-07-27 16:03:04 +0300 |
commit | f149a76b2d9ab8f5249a8d613c4c3f9153201d3e (patch) | |
tree | b5fa0fa22d7832c124f4952e080130c4f224cd7b /app/assets/javascripts/pipelines | |
parent | 57d2db4c0730a75c4ac932adc3613949550a0279 (diff) |
Converted Pipelines Charts
Diffstat (limited to 'app/assets/javascripts/pipelines')
-rw-r--r-- | app/assets/javascripts/pipelines/pipelines_charts.js | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/pipelines_charts.js b/app/assets/javascripts/pipelines/pipelines_charts.js new file mode 100644 index 00000000000..001faf4be33 --- /dev/null +++ b/app/assets/javascripts/pipelines/pipelines_charts.js @@ -0,0 +1,38 @@ +import Chart from 'vendor/Chart'; + +document.addEventListener('DOMContentLoaded', () => { + const chartData = JSON.parse(document.getElementById('pipelinesChartsData').innerHTML); + const buildChart = (chartScope) => { + const data = { + labels: chartScope.labels, + datasets: [{ + fillColor: '#7f8fa4', + strokeColor: '#7f8fa4', + pointColor: '#7f8fa4', + pointStrokeColor: '#EEE', + data: chartScope.totalValues, + }, + { + fillColor: '#44aa22', + strokeColor: '#44aa22', + pointColor: '#44aa22', + pointStrokeColor: '#fff', + data: chartScope.successValues, + }, + ], + }; + const ctx = $(`#${chartScope.scope}Chart`).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).Line(data, options); + }; + + chartData.forEach(scope => buildChart(scope)); +}); |