Change the languages chart from chart.js to d3.jsupdate-pie-chart-languages-to-d3

5 files changed, 103 insertions, 20 deletions

diff --git a/app/assets/javascripts/graphs/graphs_bundle.js b/app/assets/javascripts/graphs/graphs_bundle.js
index a433c7ba8f0..ecde4ec293a 100644
--- a/app/assets/javascripts/graphs/graphs_bundle.js
+++ b/app/assets/javascripts/graphs/graphs_bundle.js
@@ -1,6 +1,8 @@
 import Chart from 'vendor/Chart';
 import ContributorsStatGraph from './stat_graph_contributors';
+import LanguagesGraph from './stat_graph_languages_graph';
 
 // export to global scope
 window.Chart = Chart;
 window.ContributorsStatGraph = ContributorsStatGraph;
+window.LanguagesGraph = LanguagesGraph;
diff --git a/app/assets/javascripts/graphs/stat_graph_languages_graph.js b/app/assets/javascripts/graphs/stat_graph_languages_graph.js
new file mode 100644
index 00000000000..01e6ac36f87
--- /dev/null
+++ b/app/assets/javascripts/graphs/stat_graph_languages_graph.js
@@ -0,0 +1,80 @@
+import d3 from 'd3';
+import _ from 'underscore';
+import graphUtils from './stat_graph_languages_util';
+
+export default class LanguagesGraph {
+  constructor(selector, data) {
+    this.$rootSvg = document.querySelector(selector);
+    this.data = data;
+    this.d3RootSvg = d3.select(this.$rootSvg);
+    this.updateProps();
+    this.bindEvents();
+    this.createGraph(true);
+  }
+
+  bindEvents() {
+    this.windowResizedThrottled = _.bind(_.throttle(this.windowResized, 1000), this);
+    window.addEventListener('resize', this.windowResizedThrottled);
+  }
+
+  createGraph(transition) {
+    this.pie = d3.layout.pie()
+    .value(d => d.value);
+
+    const arcPath = d3.svg.arc()
+      .outerRadius(this.radius - 10)
+      .innerRadius(0);
+
+    const arcs = this.pieContainer.selectAll('.arc')
+      .data(this.pie(this.data))
+      .enter().append('g')
+        .attr('class', 'arc');
+
+    if (transition) {
+      arcs.append('path')
+      .attr('fill', d => d.data.color)
+      .transition().duration(500)
+      .attrTween('d', (d) => {
+        const data = d;
+        const interpolation = d3.interpolate(data.startAngle + 0.1, data.endAngle);
+        return function endAnglePath(t) {
+          data.endAngle = interpolation(t);
+          return arcPath(data);
+        };
+      });
+    } else {
+      arcs.append('path')
+          .attr('fill', d => d.data.color)
+          .attr('d', arcPath);
+    }
+
+    arcs.on('mouseover', this.showToolTipWithLabel);
+    arcs.on('mouseout', this.showToolTipWithLabel);
+  }
+
+  showToolTipWithLabel() {
+    console.log('this: ', this);
+  }
+
+  hideTooltip() {
+    console.log('this: ', this);
+  }
+
+  updateProps() {
+    this.parentWidth = this.$rootSvg.parentNode.clientWidth - graphUtils.margin.left;
+    this.parentHeight = this.$rootSvg.parentNode.clientHeight - graphUtils.margin.top;
+    this.radius = Math.min(this.parentWidth, this.parentHeight) / 2;
+    this.d3RootSvg.attr('viewBox', `0 0 ${this.parentWidth} ${this.parentHeight}`);
+    this.$rootSvg.style.paddingBottom =
+      (Math.ceil(this.parentHeight * 100) / this.parentWidth) || 0;
+    this.pieContainer = this.d3RootSvg.append('g')
+                        .attr('class', 'pie-container')
+                        .attr('transform', `translate(${this.parentWidth / 2}, ${this.parentHeight / 2})`);
+  }
+
+  windowResized() {
+    this.pieContainer.remove();
+    this.updateProps();
+    this.createGraph();
+  }
+}
diff --git a/app/assets/javascripts/graphs/stat_graph_languages_util.js b/app/assets/javascripts/graphs/stat_graph_languages_util.js
new file mode 100644
index 00000000000..75ce1c78f27
--- /dev/null
+++ b/app/assets/javascripts/graphs/stat_graph_languages_util.js
@@ -0,0 +1,6 @@
+export default {
+  margin: {
+    top: 40,
+    left: 40,
+  },
+};
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index ce1a13c6afa..0a243696fbb 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -244,4 +244,12 @@
       line-height: 36px;
     }
   }
+
+  .languages-chart-container {
+    height: 400px;
+
+    @media (max-width: $screen-xs-max){
+      height: 300px;
+    }
+  }
 }
diff --git a/app/views/projects/graphs/charts.html.haml b/app/views/projects/graphs/charts.html.haml
index 464ac34d961..f67efeb1497 100644
--- a/app/views/projects/graphs/charts.html.haml
+++ b/app/views/projects/graphs/charts.html.haml
@@ -1,8 +1,8 @@
 - @no_container = true
 - page_title "Charts"
 - 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')
 = render "projects/commits/head"
 
 .repo-charts{ class: container_class }
@@ -21,8 +21,9 @@
             .pull-right
               = language[:value]
               \%
-    .col-md-8
-      %canvas#languages-chart{ height: 400 }
+    .col-md-8.languages-chart-container
+      -# %canvas#languages-chart{ height: 400 }
+      %svg#languages-chart
 
 .repo-charts{ class: container_class }
   .sub-header-block.border-top
@@ -108,20 +109,6 @@
     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);
+
+  new LanguagesGraph('#languages-chart', data);