Robot/morris.js
1
0
Fork 0
mirror of https://github.com/morrisjs/morris.js.git synced 2024-11-10 21:36:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP: Donut charts.

Browse Source
This commit is contained in:
Olly Smith 2012-08-27 22:39:16 +01:00
parent 8d7522a2f0
commit b299d5eb40
4 changed files with 434 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
examples/pie.html Normal file
View File

@ -0,0 +1,25 @@
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://raw.github.com/DmitryBaranovskiy/raphael/300aa589f5a0ba7fce667cd62c7cdda0bd5ad904/raphael-min.js"></script>
<script src="../morris.js"></script>
<script src="lib/prettify.js"></script>
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
</head>
<body>
<h1>Pie Chart</h1>
<div id="graph"></div>
<pre id="code" class="prettyprint linenums">
Morris.Donut({
element: 'graph',
data: [
{value: 70, label: 'foo'},
{value: 15, label: 'bar'},
{value: 10, label: 'baz'},
{value: 5, label: 'A really really long label'}
]
});
</pre>
</body>

158
lib/morris.coffee
View File

@ -3,6 +3,20 @@
$ = jQuery $ = jQuery
Morris = {} Morris = {}
class Morris.EventEmitter
on: (name, handler) ->
unless @handlers?
@handlers = {}
unless @handlers[name]?
@handlers[name] = []
@handlers[name].push(handler)
fire: (name, args...) ->
if @handlers? and @handlers[name]?
for handler in @handlers[name]
handler(args...)
class Morris.Line class Morris.Line
# Initialise the graph. # Initialise the graph.
# #
@ -593,5 +607,149 @@ Morris.AUTO_LABEL_ORDER = [
"30sec", "15sec", "10sec", "5sec", "second" "30sec", "15sec", "10sec", "5sec", "second"
] ]
class Morris.Donut
colors: [
'#0B62A4'
'#3980B5'
'#679DC6'
'#95BBD7'
'#B0CCE1'
'#095791'
'#095085'
'#083E67'
'#052C48'
'#042135'
]
constructor: (options) ->
if not (this instanceof Morris.Donut)
return new Morris.Donut(options)
if typeof options.element is 'string'
@el = $ document.getElementById(options.element)
else
@el = $ options.element
if options.colors?
@colors = options.colors
if @el == null || @el.length == 0
throw new Error("Graph placeholder not found.")
# bail if there's no data
if options.data is undefined or options.data.length is 0
return
@data = options.data
@el.addClass 'graph-initialised'
# the raphael drawing instance
@r = new Raphael(@el[0])
@draw()
draw: ->
cx = @el.width() / 2
cy = @el.height() / 2
w = (Math.min(cx, cy) - 10) / 3
total = 0
total += x.value for x in @data
min = 5 / (2 * w)
C = 1.9999 * Math.PI - min * @data.length
last = 0
idx = 0
@segments = []
for d in @data
next = last + min + C * (d.value / total)
seg = new Morris.DonutSegment(cx, cy, w*2, w, last, next, @colors[idx % @colors.length], d)
seg.render @r
@segments.push seg
seg.on 'hover', @select
last = next
idx += 1
@text1 = @r.text(cx, cy - 10, '').attr('font-size': 15, 'font-weight': 800)
@text2 = @r.text(cx, cy + 10, '').attr('font-size': 14)
max_value = Math.max.apply(null, d.value for d in @data)
idx = 0
for d in @data
if d.value == max_value
@select @segments[idx]
break
idx += 1
select: (segment) =>
s.deselect() for s in @segments
segment.select()
@setLabels segment.data.label, Morris.commas(segment.data.value)
setLabels: (label1, label2) ->
inner = (Math.min(@el.width() / 2, @el.height() / 2) - 10) * 2 / 3
maxWidth = 1.8 * inner
maxHeightTop = inner / 2
maxHeightBottom = inner / 3
@text1.attr(text: label1, transform: '')
text1bbox = @text1.getBBox()
text1scale = Math.min(maxWidth / text1bbox.width, maxHeightTop / text1bbox.height)
@text1.attr(transform: "S#{text1scale},#{text1scale},#{text1bbox.x + text1bbox.width / 2},#{text1bbox.y + text1bbox.height}")
@text2.attr(text: label2, transform: '')
text2bbox = @text2.getBBox()
text2scale = Math.min(maxWidth / text2bbox.width, maxHeightBottom / text2bbox.height)
@text2.attr(transform: "S#{text2scale},#{text2scale},#{text2bbox.x + text2bbox.width / 2},#{text2bbox.y}")
class Morris.DonutSegment extends Morris.EventEmitter
constructor: (@cx, @cy, @inner, @outer, p0, p1, @color, @data) ->
@sin_p0 = Math.sin(p0)
@cos_p0 = Math.cos(p0)
@sin_p1 = Math.sin(p1)
@cos_p1 = Math.cos(p1)
@long = if (p1 - p0) > Math.PI then 1 else 0
@path = @calcSegment(@inner + 3, @inner + @outer - 5)
@selectedPath = @calcSegment(@inner + 3, @inner + @outer)
@hilight = @calcArc(@inner)
calcArcPoints: (r) ->
return [
@cx + r * @sin_p0,
@cy + r * @cos_p0,
@cx + r * @sin_p1,
@cy + r * @cos_p1]
calcSegment: (r1, r2) ->
[ix0, iy0, ix1, iy1] = @calcArcPoints(r1)
[ox0, oy0, ox1, oy1] = @calcArcPoints(r2)
return (
"M#{ix0},#{iy0}" +
"A#{r1},#{r1},0,#{@long},0,#{ix1},#{iy1}" +
"L#{ox1},#{oy1}" +
"A#{r2},#{r2},0,#{@long},1,#{ox0},#{oy0}" +
"Z")
calcArc: (r) ->
[ix0, iy0, ix1, iy1] = @calcArcPoints(r)
return (
"M#{ix0},#{iy0}" +
"A#{r},#{r},0,#{@long},0,#{ix1},#{iy1}")
render: (r) ->
@arc = r.path(@hilight).attr(stroke: @color, 'stroke-width': 2, opacity: 0)
@seg = r.path(@path)
.attr(fill: @color, stroke: 'white', 'stroke-width': 3)
.hover(=> @fire('hover', @))
select: =>
unless @selected
@seg.animate(path: @selectedPath, 150, '<>')
@arc.animate(opacity: 1, 150, '<>')
@selected = true
deselect: =>
if @selected
@seg.animate(path: @path, 150, '<>')
@arc.animate(opacity: 0, 150, '<>')
@selected = false
window.Morris = Morris window.Morris = Morris
# vim: set et ts=2 sw=2 sts=2 # vim: set et ts=2 sw=2 sts=2

251
morris.js
View File

@ -1,11 +1,46 @@
(function() { (function() {
var $, Morris, minutesSpecHelper, secondsSpecHelper, var $, Morris, minutesSpecHelper, secondsSpecHelper,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; __slice = [].slice,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
$ = jQuery; $ = jQuery;
Morris = {}; Morris = {};
Morris.EventEmitter = (function() {
function EventEmitter() {}
EventEmitter.prototype.on = function(name, handler) {
if (this.handlers == null) {
this.handlers = {};
}
if (this.handlers[name] == null) {
this.handlers[name] = [];
}
return this.handlers[name].push(handler);
};
EventEmitter.prototype.fire = function() {
var args, handler, name, _i, _len, _ref, _results;
name = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
if ((this.handlers != null) && (this.handlers[name] != null)) {
_ref = this.handlers[name];
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
handler = _ref[_i];
_results.push(handler.apply(null, args));
}
return _results;
}
};
return EventEmitter;
})();
Morris.Line = (function() { Morris.Line = (function() {
function Line(options) { function Line(options) {
@ -707,6 +742,220 @@
Morris.AUTO_LABEL_ORDER = ["year", "month", "day", "hour", "30min", "15min", "10min", "5min", "minute", "30sec", "15sec", "10sec", "5sec", "second"]; Morris.AUTO_LABEL_ORDER = ["year", "month", "day", "hour", "30min", "15min", "10min", "5min", "minute", "30sec", "15sec", "10sec", "5sec", "second"];
Morris.Donut = (function() {
Donut.prototype.colors = ['#0B62A4', '#3980B5', '#679DC6', '#95BBD7', '#B0CCE1', '#095791', '#095085', '#083E67', '#052C48', '#042135'];
function Donut(options) {
this.select = __bind(this.select, this);
if (!(this instanceof Morris.Donut)) {
return new Morris.Donut(options);
}
if (typeof options.element === 'string') {
this.el = $(document.getElementById(options.element));
} else {
this.el = $(options.element);
}
if (options.colors != null) {
this.colors = options.colors;
}
if (this.el === null || this.el.length === 0) {
throw new Error("Graph placeholder not found.");
}
if (options.data === void 0 || options.data.length === 0) {
return;
}
this.data = options.data;
this.el.addClass('graph-initialised');
this.r = new Raphael(this.el[0]);
this.draw();
}
Donut.prototype.draw = function() {
var C, cx, cy, d, idx, last, max_value, min, next, seg, total, w, x, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _results;
cx = this.el.width() / 2;
cy = this.el.height() / 2;
w = (Math.min(cx, cy) - 10) / 3;
total = 0;
_ref = this.data;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
x = _ref[_i];
total += x.value;
}
min = 5 / (2 * w);
C = 1.9999 * Math.PI - min * this.data.length;
last = 0;
idx = 0;
this.segments = [];
_ref1 = this.data;
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
d = _ref1[_j];
next = last + min + C * (d.value / total);
seg = new Morris.DonutSegment(cx, cy, w * 2, w, last, next, this.colors[idx % this.colors.length], d);
seg.render(this.r);
this.segments.push(seg);
seg.on('hover', this.select);
last = next;
idx += 1;
}
this.text1 = this.r.text(cx, cy - 10, '').attr({
'font-size': 15,
'font-weight': 800
});
this.text2 = this.r.text(cx, cy + 10, '').attr({
'font-size': 14
});
max_value = Math.max.apply(null, (function() {
var _k, _len2, _ref2, _results;
_ref2 = this.data;
_results = [];
for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
d = _ref2[_k];
_results.push(d.value);
}
return _results;
}).call(this));
idx = 0;
_ref2 = this.data;
_results = [];
for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
d = _ref2[_k];
if (d.value === max_value) {
this.select(this.segments[idx]);
break;
}
_results.push(idx += 1);
}
return _results;
};
Donut.prototype.select = function(segment) {
var s, _i, _len, _ref;
_ref = this.segments;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
s = _ref[_i];
s.deselect();
}
segment.select();
return this.setLabels(segment.data.label, Morris.commas(segment.data.value));
};
Donut.prototype.setLabels = function(label1, label2) {
var inner, maxHeightBottom, maxHeightTop, maxWidth, text1bbox, text1scale, text2bbox, text2scale;
inner = (Math.min(this.el.width() / 2, this.el.height() / 2) - 10) * 2 / 3;
maxWidth = 1.8 * inner;
maxHeightTop = inner / 2;
maxHeightBottom = inner / 3;
this.text1.attr({
text: label1,
transform: ''
});
text1bbox = this.text1.getBBox();
text1scale = Math.min(maxWidth / text1bbox.width, maxHeightTop / text1bbox.height);
this.text1.attr({
transform: "S" + text1scale + "," + text1scale + "," + (text1bbox.x + text1bbox.width / 2) + "," + (text1bbox.y + text1bbox.height)
});
this.text2.attr({
text: label2,
transform: ''
});
text2bbox = this.text2.getBBox();
text2scale = Math.min(maxWidth / text2bbox.width, maxHeightBottom / text2bbox.height);
return this.text2.attr({
transform: "S" + text2scale + "," + text2scale + "," + (text2bbox.x + text2bbox.width / 2) + "," + text2bbox.y
});
};
return Donut;
})();
Morris.DonutSegment = (function(_super) {
__extends(DonutSegment, _super);
function DonutSegment(cx, cy, inner, outer, p0, p1, color, data) {
this.cx = cx;
this.cy = cy;
this.inner = inner;
this.outer = outer;
this.color = color;
this.data = data;
this.deselect = __bind(this.deselect, this);
this.select = __bind(this.select, this);
this.sin_p0 = Math.sin(p0);
this.cos_p0 = Math.cos(p0);
this.sin_p1 = Math.sin(p1);
this.cos_p1 = Math.cos(p1);
this.long = (p1 - p0) > Math.PI ? 1 : 0;
this.path = this.calcSegment(this.inner + 3, this.inner + this.outer - 5);
this.selectedPath = this.calcSegment(this.inner + 3, this.inner + this.outer);
this.hilight = this.calcArc(this.inner);
}
DonutSegment.prototype.calcArcPoints = function(r) {
return [this.cx + r * this.sin_p0, this.cy + r * this.cos_p0, this.cx + r * this.sin_p1, this.cy + r * this.cos_p1];
};
DonutSegment.prototype.calcSegment = function(r1, r2) {
var ix0, ix1, iy0, iy1, ox0, ox1, oy0, oy1, _ref, _ref1;
_ref = this.calcArcPoints(r1), ix0 = _ref[0], iy0 = _ref[1], ix1 = _ref[2], iy1 = _ref[3];
_ref1 = this.calcArcPoints(r2), ox0 = _ref1[0], oy0 = _ref1[1], ox1 = _ref1[2], oy1 = _ref1[3];
return ("M" + ix0 + "," + iy0) + ("A" + r1 + "," + r1 + ",0," + this.long + ",0," + ix1 + "," + iy1) + ("L" + ox1 + "," + oy1) + ("A" + r2 + "," + r2 + ",0," + this.long + ",1," + ox0 + "," + oy0) + "Z";
};
DonutSegment.prototype.calcArc = function(r) {
var ix0, ix1, iy0, iy1, _ref;
_ref = this.calcArcPoints(r), ix0 = _ref[0], iy0 = _ref[1], ix1 = _ref[2], iy1 = _ref[3];
return ("M" + ix0 + "," + iy0) + ("A" + r + "," + r + ",0," + this.long + ",0," + ix1 + "," + iy1);
};
DonutSegment.prototype.render = function(r) {
var _this = this;
this.arc = r.path(this.hilight).attr({
stroke: this.color,
'stroke-width': 2,
opacity: 0
});
return this.seg = r.path(this.path).attr({
fill: this.color,
stroke: 'white',
'stroke-width': 3
}).hover(function() {
return _this.fire('hover', _this);
});
};
DonutSegment.prototype.select = function() {
if (!this.selected) {
this.seg.animate({
path: this.selectedPath
}, 150, '<>');
this.arc.animate({
opacity: 1
}, 150, '<>');
return this.selected = true;
}
};
DonutSegment.prototype.deselect = function() {
if (this.selected) {
this.seg.animate({
path: this.path
}, 150, '<>');
this.arc.animate({
opacity: 0
}, 150, '<>');
return this.selected = false;
}
};
return DonutSegment;
})(Morris.EventEmitter);
window.Morris = Morris; window.Morris = Morris;
}).call(this); }).call(this);

2
morris.min.js vendored
View File

File diff suppressed because one or more lines are too long