mirror of
https://github.com/morrisjs/morris.js.git
synced 2024-09-21 02:31:32 +02:00
WIP: Donut charts.
This commit is contained in:
Olly Smith
parent
8d7522a2f0
commit
b299d5eb40
25
examples/pie.html
Normal file
25
examples/pie.html
Normal 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>
|
||||
@ -3,6 +3,20 @@
|
||||
$ = jQuery
|
||||
|
||||
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
|
||||
# Initialise the graph.
|
||||
#
|
||||
@ -593,5 +607,149 @@ Morris.AUTO_LABEL_ORDER = [
|
||||
"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
|
||||
# vim: set et ts=2 sw=2 sts=2
|
||||
|
||||
251
morris.js
251
morris.js
@ -1,11 +1,46 @@
|
||||
(function() {
|
||||
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;
|
||||
|
||||
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() {
|
||||
|
||||
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.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;
|
||||
|
||||
}).call(this);
|
||||
|
||||
2
morris.min.js
vendored
2
morris.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user