From 423d31a300370c9c0acd9e8faae4d7bda2ac7d61 Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Tue, 1 Aug 2017 08:50:59 +0000
Subject: Inline script cleanup globals and easy

---
 app/views/projects/graphs/charts.html.haml | 64 +++++-------------------------
 app/views/projects/graphs/show.html.haml   | 28 ++-----------
 2 files changed, 14 insertions(+), 78 deletions(-)

(limited to 'app/views/projects/graphs')

diff --git a/app/views/projects/graphs/charts.html.haml b/app/views/projects/graphs/charts.html.haml
index 249b9d82ad9..228c8c84792 100644
--- a/app/views/projects/graphs/charts.html.haml
+++ b/app/views/projects/graphs/charts.html.haml
@@ -3,8 +3,9 @@
 - if show_new_nav?
   - add_to_breadcrumbs("Repository", project_tree_path(@project))
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_d3')
-  = page_specific_javascript_bundle_tag('graphs')
+  = webpack_bundle_tag('common_d3')
+  = webpack_bundle_tag('graphs')
+  = webpack_bundle_tag('graphs_charts')
 = render "projects/commits/head"
 
 .repo-charts{ class: container_class }
@@ -75,55 +76,10 @@
           Commits per day hour (UTC)
         %canvas#hour-chart
 
-:javascript
-  var responsiveChart = function (selector, data) {
-    var options = { "scaleOverlay": true, responsive: true, pointHitDetectionRadius: 2, maintainAspectRatio: false };
-    // get selector by context
-    var ctx = selector.get(0).getContext("2d");
-    // pointing parent container to make chart.js inherit its width
-    var container = $(selector).parent();
-    var generateChart = function() {
-      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();
-  };
-
-  var chartData = function (keys, values) {
-    var data = {
-      labels : keys,
-      datasets : [{
-        fillColor : "rgba(220,220,220,0.5)",
-        strokeColor : "rgba(220,220,220,1)",
-        barStrokeWidth: 1,
-        barValueSpacing: 1,
-        barDatasetSpacing: 1,
-        data : values
-      }]
-    };
-    return data;
-  };
-
-  var hourData = chartData(#{@commits_per_time.keys.to_json}, #{@commits_per_time.values.to_json});
-  responsiveChart($('#hour-chart'), hourData);
-
-  var dayData = chartData(#{@commits_per_week_days.keys.to_json}, #{@commits_per_week_days.values.to_json});
-  responsiveChart($('#weekday-chart'), dayData);
-
-  var monthData = chartData(#{@commits_per_month.keys.to_json}, #{@commits_per_month.values.to_json});
-  responsiveChart($('#month-chart'), monthData);
-
-  var data = #{@languages.to_json};
-  var ctx = $("#languages-chart").get(0).getContext("2d");
-  var options = {
-    scaleOverlay: true,
-    responsive: true,
-    maintainAspectRatio: false
-  }
-  var myPieChart = new Chart(ctx).Pie(data, options);
+%script#projectChartData{ type: "application/json" }
+  - projectChartData = {};
+  - projectChartData['hour'] = { 'keys' => @commits_per_time.keys, 'values' => @commits_per_time.values }
+  - projectChartData['weekDays'] = { 'keys' => @commits_per_week_days.keys, 'values' => @commits_per_week_days.values }
+  - projectChartData['month'] = { 'keys' => @commits_per_month.keys, 'values' => @commits_per_month.values }
+  - projectChartData['languages'] = @languages
+  = projectChartData.to_json.html_safe
diff --git a/app/views/projects/graphs/show.html.haml b/app/views/projects/graphs/show.html.haml
index 4256a8c4d7e..f41a0d8293b 100644
--- a/app/views/projects/graphs/show.html.haml
+++ b/app/views/projects/graphs/show.html.haml
@@ -1,15 +1,16 @@
 - @no_container = true
 - page_title "Contributors"
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_d3')
-  = page_specific_javascript_bundle_tag('graphs')
+  = webpack_bundle_tag('common_d3')
+  = webpack_bundle_tag('graphs')
+  = webpack_bundle_tag('graphs_show')
 
 - if show_new_nav?
   - add_to_breadcrumbs("Repository", project_tree_path(@project))
 
 = render 'projects/commits/head'
 
-%div{ class: container_class }
+.js-graphs-show{ class: container_class, 'data-project-graph-path': project_graph_path(@project, current_ref, format: :json) }
   .sub-header-block
     .tree-ref-holder
       = render 'shared/ref_switcher', destination: 'graphs'
@@ -33,24 +34,3 @@
       #contributors-master
       #contributors.clearfix
         %ol.contributors-list.clearfix
-
-
-
-:javascript
-  $.ajax({
-    type: "GET",
-    url: "#{project_graph_path(@project, current_ref, format: :json)}",
-    dataType: "json",
-    success: function (data) {
-      var graph = new ContributorsStatGraph();
-      graph.init(data);
-
-      $("#brush_change").change(function(){
-        graph.change_date_header();
-        graph.redraw_authors();
-      });
-
-      $(".stat-graph").fadeIn();
-      $(".loading-graph").hide();
-    }
-  });
-- 
cgit v1.2.1