added little pie chart

5 files changed, 191 insertions, 28 deletions

diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index a2701bbc7..355f5a569 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -366,6 +366,7 @@ footer h2 {
   font-weight: bold;

   border-radius: 5px;

   margin-bottom: 3px;

+  line-height: 28px;

 }

 

 .package-view > div {

@@ -379,7 +380,6 @@ footer h2 {
 .package-view .package-row {

   display: inline-block;

   height: 100%;

-//  padding-top: 4px;

   padding-left: 8px;

 }

 

@@ -387,15 +387,10 @@ footer h2 {
   width: 50%;

 }

 

-// TODO: bad scaling and positioning

 .package-view .second {

   width: 30%;

   .gradient(top, @darkblue, @darkerblue);

 

-  span {

-    margin-top: 4px;

-    display: block;

-  }

 }

 

 .package-view a {

@@ -403,7 +398,7 @@ footer h2 {
 }

 

 .package-graph {

-  display: none;

+  display: inline;

   width: 20px;

   height: 20px;

 }
\ No newline at end of file
diff --git a/module/web/static/js/default.js b/module/web/static/js/default.js
index cb2ef38c3..3d02ba49e 100644
--- a/module/web/static/js/default.js
+++ b/module/web/static/js/default.js
@@ -9,6 +9,7 @@ require.config({
         jqueryui:"libs/jqueryui",
         flot:"libs/jquery.flot-1.1",
         flotpie: "libs/jquery.flot.pie",
+        peity: "libs/jquery.peity-0.6",
         transit:"libs/jquery.transit-0.1.3",
         omniwindow: "libs/jquery.omniwindow",
         bootstrap: "libs/bootstrap-2.1.1",
@@ -32,6 +33,7 @@ require.config({
             exports:"Backbone"  //attaches "Backbone" to the window object
         },
         "flot" : ["jquery"],
+        "peity" : ["jquery"],
         "flotpie" : ["flot"],
         "transit" : ["jquery"],
         "omniwindow" : ["jquery"],
diff --git a/module/web/static/js/libs/jquery.peity-0.6.js b/module/web/static/js/libs/jquery.peity-0.6.js
new file mode 100644
index 000000000..323ba6fac
--- /dev/null
+++ b/module/web/static/js/libs/jquery.peity-0.6.js
@@ -0,0 +1,184 @@
+// Peity jQuery plugin version 0.6.0
+// (c) 2011 Ben Pickles
+//
+// http://benpickles.github.com/peity/
+//
+// Released under MIT license.
+(function($, document) {
+  var peity = $.fn.peity = function(type, options) {
+    if (document.createElement("canvas").getContext) {
+      this.each(function() {
+        $(this).change(function() {
+          var opts = $.extend({}, options)
+          var self = this
+
+          $.each(opts, function(name, value) {
+            if ($.isFunction(value)) opts[name] = value.call(self)
+          })
+
+          var value = $(this).html();
+          peity.graphers[type].call(this, $.extend({}, peity.defaults[type], opts));
+          $(this).trigger("chart:changed", value);
+        }).trigger("change");
+      });
+    }
+
+    return this;
+  };
+
+  peity.graphers = {};
+  peity.defaults = {};
+
+  peity.add = function(type, defaults, grapher){
+    peity.graphers[type] = grapher;
+    peity.defaults[type] = defaults;
+  };
+
+  var devicePixelRatio = window.devicePixelRatio || 1
+
+  function createCanvas(width, height) {
+    var canvas = document.createElement("canvas")
+    canvas.setAttribute("width", width * devicePixelRatio)
+    canvas.setAttribute("height", height * devicePixelRatio)
+
+    if (devicePixelRatio != 1) {
+      var style = "width:" + width + "px;height:" + height + "px"
+      canvas.setAttribute("style", style)
+    }
+
+    return canvas
+  }
+
+  peity.add(
+    'pie',
+    {
+      colours: ['#FFF4DD', '#FF9900'],
+      delimeter: '/',
+      diameter: 16
+    },
+    function(opts) {
+      var $this = $(this)
+      var values = $this.text().split(opts.delimeter)
+      var v1 = parseFloat(values[0]);
+      var v2 = parseFloat(values[1]);
+      var adjust = -Math.PI / 2;
+      var slice = (v1 / v2) * Math.PI * 2;
+
+      var canvas = createCanvas(opts.diameter, opts.diameter)
+      var context = canvas.getContext("2d");
+      var centre = canvas.width / 2;
+
+      // Plate.
+      context.beginPath();
+      context.moveTo(centre, centre);
+      context.arc(centre, centre, centre, slice + adjust, (slice == 0) ? Math.PI * 2 : adjust, false);
+      context.fillStyle = opts.colours[0];
+      context.fill();
+
+      // Slice of pie.
+      context.beginPath();
+      context.moveTo(centre, centre);
+      context.arc(centre, centre, centre, adjust, slice + adjust, false);
+      context.fillStyle = opts.colours[1];
+      context.fill();
+
+      $this.wrapInner($("<span>").hide()).append(canvas)
+  });
+
+  peity.add(
+    "line",
+    {
+      colour: "#c6d9fd",
+      strokeColour: "#4d89f9",
+      strokeWidth: 1,
+      delimeter: ",",
+      height: 16,
+      max: null,
+      min: 0,
+      width: 32
+    },
+    function(opts) {
+      var $this = $(this)
+      var canvas = createCanvas(opts.width, opts.height)
+      var values = $this.text().split(opts.delimeter)
+      if (values.length == 1) values.push(values[0])
+      var max = Math.max.apply(Math, values.concat([opts.max]));
+      var min = Math.min.apply(Math, values.concat([opts.min]))
+
+      var context = canvas.getContext("2d");
+      var width = canvas.width
+      var height = canvas.height
+      var xQuotient = width / (values.length - 1)
+      var yQuotient = height / (max - min)
+
+      var coords = [];
+      var i;
+
+      context.beginPath();
+      context.moveTo(0, height + (min * yQuotient))
+
+      for (i = 0; i < values.length; i++) {
+        var x = i * xQuotient
+        var y = height - (yQuotient * (values[i] - min))
+
+        coords.push({ x: x, y: y });
+        context.lineTo(x, y);
+      }
+
+      context.lineTo(width, height + (min * yQuotient))
+      context.fillStyle = opts.colour;
+      context.fill();
+
+      if (opts.strokeWidth) {
+        context.beginPath();
+        context.moveTo(0, coords[0].y);
+        for (i = 0; i < coords.length; i++) {
+          context.lineTo(coords[i].x, coords[i].y);
+        }
+        context.lineWidth = opts.strokeWidth * devicePixelRatio;
+        context.strokeStyle = opts.strokeColour;
+        context.stroke();
+      }
+
+      $this.wrapInner($("<span>").hide()).append(canvas)
+    }
+  );
+
+  peity.add(
+    'bar',
+    {
+      colour: "#4D89F9",
+      delimeter: ",",
+      height: 16,
+      max: null,
+      min: 0,
+      width: 32
+    },
+    function(opts) {
+      var $this = $(this)
+      var values = $this.text().split(opts.delimeter)
+      var max = Math.max.apply(Math, values.concat([opts.max]));
+      var min = Math.min.apply(Math, values.concat([opts.min]))
+
+      var canvas = createCanvas(opts.width, opts.height)
+      var context = canvas.getContext("2d");
+
+      var width = canvas.width
+      var height = canvas.height
+      var yQuotient = height / (max - min)
+      var space = devicePixelRatio / 2
+      var xQuotient = (width + space) / values.length
+
+      context.fillStyle = opts.colour;
+
+      for (var i = 0; i < values.length; i++) {
+        var x = i * xQuotient
+        var y = height - (yQuotient * (values[i] - min))
+
+        context.fillRect(x, y, xQuotient - space, yQuotient * values[i])
+      }
+
+      $this.wrapInner($("<span>").hide()).append(canvas)
+    }
+  );
+})(jQuery, document);
diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js
index 3b743b448..6a7e3cc65 100644
--- a/module/web/static/js/views/packageView.js
+++ b/module/web/static/js/views/packageView.js
@@ -1,4 +1,4 @@
-define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView', 'utils/lazyRequire', 'flotpie'],
+define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView', 'utils/lazyRequire', 'peity'],
     function($, itemView, _, fileView, lazyLoader) {
 
     // Renders a single package item
@@ -35,25 +35,7 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView', 'ut
              { label: "Series2", data: 90}
              ];
             var pie = this.$('.package-graph');
-            $.plot(pie, data,
-                {
-                    series: {
-                        pie: {
-                            radius: 1,
-                            show: true,
-                            label: {
-                                show: false
-                            },
-                            offset: {
-                              top: 0,
-                              left: 0
-                            }
-                        }
-                    },
-                    legend: {
-                        show: false
-                    }
-                });
+            pie.peity('pie');
 
             if (this.model.isLoaded()) {
                 var ul = $('<ul></ul>');
diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html
index 239ab47be..d8d06956f 100644
--- a/module/web/templates/default/dashboard.html
+++ b/module/web/templates/default/dashboard.html
@@ -12,7 +12,7 @@
         <div>

             <div class="package-row first">

                 Package <%= pid %>: <%= name %>

-                <div class="package-graph"></div>

+                <div class="package-graph">3/5</div>

             </div>

             <div class="package-row second">

                 <span>