From 6a3dd0260dc9bc2380bbe34a9817644c2980e72b Mon Sep 17 00:00:00 2001 From: RaNaN Date: Sat, 6 Oct 2012 19:53:31 +0200 Subject: added little pie chart --- module/web/static/css/default/style.less | 9 +- module/web/static/js/default.js | 2 + module/web/static/js/libs/jquery.peity-0.6.js | 184 ++++++++++++++++++++++++++ module/web/static/js/views/packageView.js | 22 +-- module/web/templates/default/dashboard.html | 2 +- 5 files changed, 191 insertions(+), 28 deletions(-) create mode 100644 module/web/static/js/libs/jquery.peity-0.6.js (limited to 'module') 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($("").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($("").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($("").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 = $('
    '); 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 @@
    Package <%= pid %>: <%= name %> -
    +
    3/5
    -- cgit v1.2.3