From 2e18ea0390d92ed8483467589012ee4fb1de2969 Mon Sep 17 00:00:00 2001
From: Heiko Kernbach <heiko@arangodb.com>
Date: Sat, 22 Feb 2014 14:13:50 +0100
Subject: [PATCH] added bar graphs for distribution data

---
 .../frontend/js/views/dashboardView.js        | 74 ++++++++++++++-----
 .../frontend/scss/_dashboardDistribution.scss |  4 +-
 .../aardvark/frontend/scss/generated.css      |  4 +-
 3 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/js/apps/system/aardvark/frontend/js/views/dashboardView.js b/js/apps/system/aardvark/frontend/js/views/dashboardView.js
index 3d1f22d6ed..37e0bca170 100644
--- a/js/apps/system/aardvark/frontend/js/views/dashboardView.js
+++ b/js/apps/system/aardvark/frontend/js/views/dashboardView.js
@@ -316,33 +316,69 @@
       this.createDistributionCharts();
     },
 
-    createDistributionCharts: function () { /*
+    createDistributionSeries: function(name) {
+      console.log(name);
+      //value prep for d3 graphs
+      var distributionValues = this.series.client[name].distribution.data.counts;
+      var sum = this.series.client[name].distribution.data.sum;
+      var areaLength = this.series.client[name].distribution.data.counts.length;
+      var values = [];
+      var counter = 1;
+
+      _.each(distributionValues, function() {
+        values.push({
+          "label" : (sum / areaLength) * counter,
+          "value" : distributionValues[counter-1]
+        });
+        counter++;
+      });
+      console.log(values);
+    return values;
+    },
+
+    createDistributionCharts: function () {
+      //distribution bar charts
       var self = this;
       _.each(this.chartTypeExceptions.distribution, function(k, v) {
 
-         nv.addGraph(function() {
-           var chart = nv.models.multiBarHorizontalChart()
-           .x(function(d) { return d.label })
-           .y(function(d) { return d.value })
-           .margin({top: 30, right: 20, bottom: 50, left: 175})
-           .showValues(true) //Show bar value next to each bar.
-           .tooltips(true) //Show tooltips on hover.
-           .transitionDuration(350)
-           .showControls(true); //Allow user to switch between "Grouped" and "Stacked" mode.
+        var valueData = self.createDistributionSeries(v);
 
-           chart.yAxis
-           .tickFormat(d3.format(',.2f'));
+        var data = [{
+          key: v,
+          color: "#D67777",
+          values: valueData
+        }];
 
-           d3.select('#' + v + ' svg')
-           .datum(data)
-           .call(chart);
+        nv.addGraph(function() {
+          var chart = nv.models.multiBarHorizontalChart()
+          .x(function(d) { return d.label })
+          .y(function(d) { return d.value })
+          //.margin({top: 30, right: 20, bottom: 50, left: 175})
+          .showValues(true) //Show bar value next to each bar.
+          .tooltips(true) //Show tooltips on hover.
+          .transitionDuration(350)
+          .showControls(true); //Allow user to switch between "Grouped" and "Stacked" mode.
 
-           nv.utils.windowResize(chart.update);
-           return chart;
-         });
+          chart.yAxis
+          .tickFormat(d3.format(',.2f'));
 
+          chart.xAxis
+          .tickFormat(d3.format(',.2f'));
+
+          d3.select('#' + v + ' svg')
+          .datum(data)
+          .call(chart)
+          .append("text")
+          .attr("x", 0)
+          .attr("y", 16)
+          .style("font-size", "16px")
+          .style("text-decoration", "underline")
+          .text(v);
+
+          nv.utils.windowResize(chart.update);
+          return chart;
+        });
       });
-      */
     },
 
     renderDistributionPlaceholder: function () {
diff --git a/js/apps/system/aardvark/frontend/scss/_dashboardDistribution.scss b/js/apps/system/aardvark/frontend/scss/_dashboardDistribution.scss
index e497026b7f..5268bb4db2 100644
--- a/js/apps/system/aardvark/frontend/scss/_dashboardDistribution.scss
+++ b/js/apps/system/aardvark/frontend/scss/_dashboardDistribution.scss
@@ -1,4 +1,4 @@
-.dashboardDistribution {
-  width: 50%;
+.dashboardDistribution svg {
+  width: 300px;
   height: 300px;
 }
diff --git a/js/apps/system/aardvark/frontend/scss/generated.css b/js/apps/system/aardvark/frontend/scss/generated.css
index 015b0564d8..3f18c5959a 100644
--- a/js/apps/system/aardvark/frontend/scss/generated.css
+++ b/js/apps/system/aardvark/frontend/scss/generated.css
@@ -756,6 +756,6 @@ select.filterSelect {
   height: 300px;
   border: 1px solid black; }
 
-.dashboardDistribution {
-  width: 50%;
+.dashboardDistribution svg {
+  width: 300px;
   height: 300px; }