diff options
| -rw-r--r-- | app/assets/javascripts/pipelines/pipelines_charts.js | 38 | ||||
| -rw-r--r-- | app/views/projects/pipelines/charts/_pipeline_times.haml | 22 | ||||
| -rw-r--r-- | app/views/projects/pipelines/charts/_pipelines.haml | 36 | ||||
| -rw-r--r-- | config/webpack.config.js | 1 |
4 files changed, 47 insertions, 50 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)); +}); diff --git a/app/views/projects/pipelines/charts/_pipeline_times.haml b/app/views/projects/pipelines/charts/_pipeline_times.haml index 55477a922e7..a5dbd1b1532 100644 --- a/app/views/projects/pipelines/charts/_pipeline_times.haml +++ b/app/views/projects/pipelines/charts/_pipeline_times.haml @@ -8,25 +8,3 @@ %canvas#build_timesChart{ height: 200 } %script#pipelinesTimesChartsData{ type: "application/json" }= { :labels => @charts[:pipeline_times].labels, :values => @charts[:pipeline_times].pipeline_times }.to_json.html_safe - -:javascript - var data = { - labels : #{@charts[:pipeline_times].labels.to_json}, - datasets : [ - { - fillColor : "rgba(220,220,220,0.5)", - strokeColor : "rgba(220,220,220,1)", - barStrokeWidth: 1, - barValueSpacing: 1, - barDatasetSpacing: 1, - data : #{@charts[:pipeline_times].pipeline_times.to_json} - } - ] - } - var ctx = $("#build_timesChart").get(0).getContext("2d"); - var 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).Bar(data, options); diff --git a/app/views/projects/pipelines/charts/_pipelines.haml b/app/views/projects/pipelines/charts/_pipelines.haml index be884448087..9de22b39d23 100644 --- a/app/views/projects/pipelines/charts/_pipelines.haml +++ b/app/views/projects/pipelines/charts/_pipelines.haml @@ -1,3 +1,6 @@ +- content_for :page_specific_javascripts do + = webpack_bundle_tag('pipelines_charts') + %h4= _("Pipelines charts") %p @@ -26,31 +29,8 @@ = _("Jobs for last year") %canvas#yearChart.padded{ height: 250 } -- [:week, :month, :year].each do |scope| - :javascript - var data = { - labels : #{@charts[scope].labels.to_json}, - datasets : [ - { - fillColor : "#7f8fa4", - strokeColor : "#7f8fa4", - pointColor : "#7f8fa4", - pointStrokeColor : "#EEE", - data : #{@charts[scope].total.to_json} - }, - { - fillColor : "#44aa22", - strokeColor : "#44aa22", - pointColor : "#44aa22", - pointStrokeColor : "#fff", - data : #{@charts[scope].success.to_json} - } - ] - } - var ctx = $("##{scope}Chart").get(0).getContext("2d"); - var 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); +%script#pipelinesChartsData{ type: "application/json" } + - chartData = [] + - [:week, :month, :year].each do |scope| + - chartData.push({ 'scope' => scope, 'labels' => @charts[scope].labels, 'totalValues' => @charts[scope].total, 'successValues' => @charts[scope].success }) + = chartData.to_json.html_safe diff --git a/config/webpack.config.js b/config/webpack.config.js index 9a9399cbf02..18d28256a8b 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -54,6 +54,7 @@ var config = { notebook_viewer: './blob/notebook_viewer.js', pdf_viewer: './blob/pdf_viewer.js', pipelines: './pipelines/pipelines_bundle.js', + pipelines_charts: './pipelines/pipelines_charts.js', pipelines_details: './pipelines/pipeline_details_bundle.js', pipelines_times: './pipelines/pipelines_times.js', profile: './profile/profile_bundle.js', |