*.py[cod] | |
# C extensions | |
*.so | |
# Packages | |
*.egg | |
*.egg-info | |
dist | |
build | |
eggs | |
parts | |
bin | |
var | |
sdist | |
develop-eggs | |
.installed.cfg | |
lib | |
lib64 | |
# Installer logs | |
pip-log.txt | |
# Unit test / coverage reports | |
.coverage | |
.tox | |
nosetests.xml | |
# Translations | |
*.mo | |
# Mr Developer | |
.mr.developer.cfg | |
.project | |
.pydevproject | |
# ckanext-dga-stats | |
Fork of CKAN's built-in Statistics plugin modified for data.gov.au | |
* Remove private datasets from all statistics (except top users) | |
* Add summary page | |
* Add activity summary page | |
* Add organisation public/private dataset count page | |
# this is a namespace package | |
try: | |
import pkg_resources | |
pkg_resources.declare_namespace(__name__) | |
except ImportError: | |
import pkgutil | |
__path__ = pkgutil.extend_path(__path__, __name__) | |
# empty file needed for pylons to find templates in this directory | |
Binary files a/ckanext/dga-stats/__init__.pyc and /dev/null differ
import ckan.plugins as p | |
from ckan.lib.base import BaseController, config | |
import stats as stats_lib | |
import ckan.lib.helpers as h | |
class StatsController(BaseController): | |
def index(self): | |
c = p.toolkit.c | |
stats = stats_lib.Stats() | |
rev_stats = stats_lib.RevisionStats() | |
c.top_rated_packages = stats.top_rated_packages() | |
c.most_edited_packages = stats.most_edited_packages() | |
c.largest_groups = stats.largest_groups() | |
c.top_tags = stats.top_tags() | |
c.top_package_owners = stats.top_package_owners() | |
c.new_packages_by_week = rev_stats.get_by_week('new_packages') | |
c.deleted_packages_by_week = rev_stats.get_by_week('deleted_packages') | |
c.num_packages_by_week = rev_stats.get_num_packages_by_week() | |
c.package_revisions_by_week = rev_stats.get_by_week('package_revisions') | |
# Used in the legacy CKAN templates. | |
c.packages_by_week = [] | |
# Used in new CKAN templates gives more control to the templates for formatting. | |
c.raw_packages_by_week = [] | |
for week_date, num_packages, cumulative_num_packages in c.num_packages_by_week: | |
c.packages_by_week.append('[new Date(%s), %s]' % (week_date.replace('-', ','), cumulative_num_packages)) | |
c.raw_packages_by_week.append({'date': h.date_str_to_datetime(week_date), 'total_packages': cumulative_num_packages}) | |
c.all_package_revisions = [] | |
c.raw_all_package_revisions = [] | |
for week_date, revs, num_revisions, cumulative_num_revisions in c.package_revisions_by_week: | |
c.all_package_revisions.append('[new Date(%s), %s]' % (week_date.replace('-', ','), num_revisions)) | |
c.raw_all_package_revisions.append({'date': h.date_str_to_datetime(week_date), 'total_revisions': num_revisions}) | |
c.new_datasets = [] | |
c.raw_new_datasets = [] | |
for week_date, pkgs, num_packages, cumulative_num_packages in c.new_packages_by_week: | |
c.new_datasets.append('[new Date(%s), %s]' % (week_date.replace('-', ','), num_packages)) | |
c.raw_new_datasets.append({'date': h.date_str_to_datetime(week_date), 'new_packages': num_packages}) | |
return p.toolkit.render('ckanext/stats/index.html') | |
def leaderboard(self, id=None): | |
c = p.toolkit.c | |
c.solr_core_url = config.get('ckanext.stats.solr_core_url', | |
'http://solr.okfn.org/solr/ckan') | |
return p.toolkit.render('ckanext/stats/leaderboard.html') | |
from logging import getLogger | |
import ckan.plugins as p | |
log = getLogger(__name__) | |
class StatsPlugin(p.SingletonPlugin): | |
'''Stats plugin.''' | |
p.implements(p.IRoutes, inherit=True) | |
p.implements(p.IConfigurer, inherit=True) | |
def after_map(self, map): | |
map.connect('stats', '/stats', | |
controller='ckanext.stats.controller:StatsController', | |
action='index') | |
map.connect('stats_action', '/stats/{action}', | |
controller='ckanext.stats.controller:StatsController') | |
return map | |
def update_config(self, config): | |
templates = 'templates' | |
if p.toolkit.asbool(config.get('ckan.legacy_templates', False)): | |
templates = 'templates_legacy' | |
p.toolkit.add_template_directory(config, templates) | |
p.toolkit.add_public_directory(config, 'public') | |
p.toolkit.add_resource('public/ckanext/stats', 'ckanext_stats') | |
Binary files a/ckanext/dga-stats/plugin.pyc and /dev/null differ
**.min.js | |
**.min.css | |
# this is a namespace package | |
try: | |
import pkg_resources | |
pkg_resources.declare_namespace(__name__) | |
except ImportError: | |
import pkgutil | |
__path__ = pkgutil.extend_path(__path__, __name__) | |
# this is a namespace package | |
try: | |
import pkg_resources | |
pkg_resources.declare_namespace(__name__) | |
except ImportError: | |
import pkgutil | |
__path__ = pkgutil.extend_path(__path__, __name__) | |
# this is a namespace package | |
try: | |
import pkg_resources | |
pkg_resources.declare_namespace(__name__) | |
except ImportError: | |
import pkgutil | |
__path__ = pkgutil.extend_path(__path__, __name__) | |
jQuery(document).ready(function($) { | |
$('form').submit(function(e) { | |
e.preventDefault(); | |
attribute = $('#form-attribute').val(); | |
loadSolr(attribute); | |
}) | |
// default! (also in html) | |
loadSolr('tags'); | |
function loadSolr(attribute) { | |
var url = solrCoreUrl + '/select?indent=on&wt=json&facet=true&rows=0&indent=true&facet.mincount=1&facet.limit=30&q=*:*&facet.field=' + attribute; | |
function handleSolr(data) { | |
var results = []; | |
ourdata = data.facet_counts.facet_fields[attribute]; | |
var newrow = {}; | |
for (ii in ourdata) { | |
if (ii % 2 == 0) { | |
newrow.name = ourdata[ii]; | |
if (!newrow.name) { | |
newrow.name = '[Not Specified]'; | |
} | |
} else { | |
newrow.count = ourdata[ii]; | |
results.push(newrow); | |
newrow = {}; | |
} | |
} | |
display(results); | |
} | |
$.ajax({ | |
url: url, | |
success: handleSolr, | |
dataType: 'jsonp', | |
jsonp: 'json.wrf' | |
}); | |
} | |
function display(results) { | |
var list = $('#category-counts'); | |
list.html(''); | |
if (results.length == 0) { | |
return | |
} | |
var maximum = results[0]['count']; | |
for(ii in results) { | |
maximum = Math.max(maximum, results[ii]['count']); | |
} | |
$.each(results, function(idx, row) { | |
var newentry = $('<li></li>'); | |
newentry.append($('<a href="#">' + row['name'] + '</a>')); | |
newentry.append($('<span class="count">' + row['count'] + '</a>')); | |
var percent = 100 * row['count'] / maximum; | |
newentry.append($('<span class="index" style="width: ' + percent + '%"></span>')); | |
list.append(newentry); | |
}); | |
} | |
}); | |
.tab-content h2 { | |
margin-bottom: 12px; | |
} | |
.js .tab-content { | |
padding-top: 20px; | |
padding-bottom: 20px; | |
margin-top: 0; | |
} | |
.module-plot-canvas { | |
display: block; | |
width: 650px; | |
height: 300px; | |
margin: 20px 0; | |
} | |
<html> | |
<head> | |
<script type="text/javascript"> | |
var solrCoreUrl = 'http://solr.okfn.org/solr/ckan'; | |
</script> | |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> | |
<script type="text/javascript" src="app.js"></script> | |
<link type="text/css" rel="stylesheet" media="all" href="style.css" /> | |
</head> | |
<body> | |
<h1>CKAN Dataset Leaderboard</h1> | |
<p>Choose a dataset attribute and find out which categories in that area have the most datasets. E.g. tags, groups, license, res_format, country.</p> | |
<form> | |
<label for="category">Choose area</label> | |
<input type="text" value="tags" name="attribute" id="form-attribute" /> | |
<input type="submit" value="Dataset Counts »" name="submit" /> | |
</form> | |
<div class="category-counts"> | |
<ul class="chartlist" id="category-counts"> | |
</ul> | |
</div> | |
</body> | |
</html> | |
/* A quick module for generating flot charts from an HTML table. Options can | |
* be passed directly to flot using the data-module-* attributes. The tables | |
* are currently expected to be marked up as follows: | |
* | |
* <table data-module="plot"> | |
* <thead> | |
* <tr> | |
* <th>X Axis</th> | |
* <th>Series A Legend</th> | |
* <th>Series B Legend</th> | |
* </tr> | |
* </thead> | |
* <tbody> | |
* <tr> | |
* <th>X Value</th> | |
* <td>Series A Y Value</td> | |
* <td>Series B Y Value</td> | |
* </tr> | |
* ... | |
* </tbody> | |
* </table> | |
* | |
* Points are pulled out of the th/td elements using innerHTML or by looking | |
* for a data-value attribute. This is useful when a more readable value | |
* needs to be used in the elements contents (eg. dates). A data-type attribute | |
* can also be applied to parse the value. Only data-type="date" is currently | |
* supported and expects data-value to be a unix timestamp. | |
*/ | |
this.ckan.module('plot', function (jQuery, _) { | |
return { | |
/* Holds the jQuery.plot() object when created */ | |
graph: null, | |
/* Holds the canvas container when created */ | |
canvas: null, | |
/* Default options */ | |
options: { | |
xaxis: {}, | |
yaxis: {}, | |
legend: {position: 'nw'}, | |
colors: ['#ffcc33', '#ff8844'] | |
}, | |
/* Sets up the canvas element and parses the table. | |
* | |
* Returns nothing. | |
*/ | |
initialize: function () { | |
jQuery.proxyAll(this, /_on/); | |
if (!this.el.is('table')) { | |
throw new Error('CKAN module plot can only be called on table elements'); | |
} | |
this.setupCanvas(); | |
// Because the canvas doesn't render correctly unless visible we must | |
// listen for events that reveal the canvas and then try and re-render. | |
// Currently the most common of these is the "shown" event triggered by | |
// the tabs plugin. | |
this.sandbox.body.on("shown", this._onShown); | |
this.data = this.parseTable(this.el); | |
this.draw(); | |
}, | |
/* Removes event handlers when the module is removed from the DOM. | |
* | |
* Returns nothing. | |
*/ | |
teardown: function () { | |
this.sandbox.body.off("shown", this._onShown); | |
}, | |
/* Creates the canvas wrapper and removes the table from the document. | |
* | |
* Returns nothing. | |
*/ | |
setupCanvas: function () { | |
this.canvas = jQuery('<div class="module-plot-canvas">'); | |
this.el.replaceWith(this.canvas); | |
}, | |
/* Attempts to draw the chart if the canvas is visible. If not visible the | |
* graph does not render correctly. So we keep trying until it is. | |
* | |
* Examples | |
* | |
* module.draw(); | |
* | |
* Returns nothing. | |
*/ | |
draw: function () { | |
if (!this.drawn && this.canvas.is(':visible')) { | |
this.graph = jQuery.plot(this.canvas, this.data, this.options); | |
} | |
}, | |
/* Parses an HTML table element to build the data array for the chart. | |
* The thead element provides the axis and labels for the series. The | |
* first column in the tbody is used for the x-axis and subsequent | |
* columns are the series. | |
* | |
* table - A table element to parse. | |
* | |
* Examples | |
* | |
* module.parseTable(module.el); | |
* | |
* Returns data object suitable for use in jQuery.plot(). | |
*/ | |
parseTable: function (table) { | |
var data = []; | |
var _this = this; | |
var headings = table.find('thead tr:first th').map(function () { | |
return this.innerHTML; | |
}); | |
table.find('tbody tr').each(function (row) { | |
var element = jQuery(this); | |
var x = []; | |
x[row] = _this.getValue(element.find('th')); | |
element.find('td').each(function (series) { | |
var value = _this.getValue(this); | |
var label = headings[series + 1]; | |
data[series] = data[series] || {data: [], label: label}; | |
data[series].data[row] = [x[row], value]; | |
}); | |
}); | |
return data; | |
}, | |
/* Retrieves the value from a td/th element. This first looks for a | |
* data-value attribute on the element otherwise uses the element | |
* text contents. | |
* | |
* A data-type attribute can also be provided to tell the module how | |
* to deal with the element. By default we let jQuery.data() handle | |
* the parsing but this can provide additional data. See .parseValue() | |
* for more info. | |
* | |
* cell - An element to extract a value from. | |
* | |
* Examples | |
* | |
* var element = jQuery('<td data-value="10">Ten</td>'); | |
* module.getValue(element); //=> 10 | |
* | |
* var element = jQuery('<td>20</td>'); | |
* module.getValue(element); //=> 20 | |
* | |
* var element = jQuery('<td data-type="date">1343747094</td>'); | |
* module.getValue(element); //=> <Date Tue Jul 31 2012 16:04:54 GMT+0100 (BST)> | |
* | |
* Returns the parsed value. | |
*/ | |
getValue: function (cell) { | |
var item = cell instanceof jQuery ? cell : jQuery(cell); | |
var type = item.data('type') || 'string'; | |
var value = item.data('value') || item.text(); | |
return this.parseValue(value, type); | |
}, | |
/* Provides the ability to further format a value. | |
* | |
* If date is provided as a type then it expects value to be a unix | |
* timestamp in seconds. | |
* | |
* value - The value extracted from the element. | |
* type - A type string, currently only supports "date". | |
* | |
* Examples | |
* | |
* module.parseValue(10); // => 10 | |
* module.parseValue("cat"); // => "cat" | |
* module.parseValue(1343747094, 'date'); // => <Date Tue Jul 31 2012 16:04:54 GMT+0100 (BST)> | |
* | |
* Returns the parsed value. | |
*/ | |
parseValue: function (value, type) { | |
if (type === 'date') { | |
value = new Date(parseInt(value, 10) * 1000); | |
if (!value) { | |
value = 0; | |
} | |
} | |
return value; | |
}, | |
/* Event handler for when tabs are toggled. Determines if the canvas | |
* resides in the shown element and attempts to re-render. | |
* | |
* event - The shown event object. | |
* | |
* Returns nothing. | |
*/ | |
_onShown: function (event) { | |
if (!this.drawn && jQuery.contains(jQuery(event.target.hash)[0], this.canvas[0])) { | |
this.draw(); | |
} | |
} | |
}; | |
}); | |
/* Quick module to enhance the Bootstrap tags plug-in to update the url | |
* hash when a tab changes to allow the user to bookmark the page. | |
* | |
* Each tab id must use a prefix which which will be stripped from the hash. | |
* This is to prevent the page jumping when the hash fragment changes. | |
* | |
* prefix - The prefix used on the ids. | |
* | |
*/ | |
this.ckan.module('stats-nav', { | |
/* An options object */ | |
options: { | |
prefix: 'stats-' | |
}, | |
/* Initializes the module and sets up event listeners. | |
* | |
* Returns nothing. | |
*/ | |
initialize: function () { | |
var location = this.sandbox.location; | |
var prefix = this.options.prefix; | |
var hash = location.hash.slice(1); | |
var selected = this.$('[href^=#' + prefix + hash + ']'); | |
// Update the hash fragment when the tab changes. | |
this.el.on('shown', function (event) { | |
location.hash = event.target.hash.slice(prefix.length + 1); | |
}); | |
// Show the current tab if the location provides one. | |
if (selected.length) { | |
selected.tab('show'); | |
} | |
} | |
}); | |
[IE conditional] | |
lte IE 8 = vendor/excanvas.js | |
[groups] | |
stats = | |
css/stats.css | |
vendor/excanvas.js | |
vendor/jquery.flot.js | |
javascript/modules/plot.js | |
javascript/modules/stats-nav.js | |
div.category-counts { | |
} | |
div.category-counts-over-time { | |
clear: both; | |
} | |
/*************************** | |
* CHART LISTS | |
**************************/ | |
.chartlist { | |
float: left; | |
border-top: 1px solid #EEE; | |
width: 90%; | |
padding-left: 0; | |
margin-left: 0; | |
} | |
.chartlist li { | |
position: relative; | |
display: block; | |
border-bottom: 1px solid #EEE; | |
_zoom: 1; | |
} | |
.chartlist li a { | |
display: block; | |
padding: 0.4em 4.5em 0.4em 0.5em; | |
position: relative; | |
z-index: 2; | |
} | |
.chartlist .count { | |
display: block; | |
position: absolute; | |
top: 0; | |
right: 0; | |
margin: 0 0.3em; | |
text-align: right; | |
color: #999; | |
font-weight: bold; | |
font-size: 0.875em; | |
line-height: 2em; | |
z-index: 999; | |
} | |
.chartlist .index { | |
display: block; | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 100%; | |
background: #B8E4F5; | |
text-indent: -9999px; | |
overflow: hidden; | |
line-height: 2em; | |
} | |
.chartlist li:hover { | |
background: #EFEFEF; | |
} | |
<table data-module="plot"> | |
<thead> | |
<tr> | |
<th>X Axis</th> | |
<th>Series A Legend</th> | |
<th>Series B Legend</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<!-- This is the x value for each series --> | |
<th data-type="date" data-value="1176073200">Apr 09, 2007</th> | |
<!-- This is the y value for series a --> | |
<td>20</td> | |
<!-- This is the y value for series b --> | |
<td>7</td> | |
</tr> | |
<tr> | |
<th data-type="date" data-value="1176678000">Apr 16, 2007</th> | |
<td>12</td> | |
<td>6</td> | |
</tr> | |
<tr> | |
<th data-type="date" data-value="1177282800">Apr 23, 2007</th> | |
<td>27</td> | |
<td>12</td> | |
</tr> | |
</tbody> | |
</table> | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<title>Mocha Tests</title> | |
<link rel="stylesheet" href="../../../base/test/vendor/mocha.css" /> | |
</head> | |
<body> | |
<div id="mocha"></div> | |
<div id="fixture" style="position: absolute; top: -9999px; left: -9999px"></div> | |
<!-- Test Runner --> | |
<script src="../../../base/test/vendor/sinon.js"></script> | |
<script src="../../../base/test/vendor/mocha.js"></script> | |
<script src="../../../base/test/vendor/chai.js"></script> | |
<script> | |
mocha.setup('bdd'); | |
var assert = chai.assert; | |
// Export sinon.assert methods onto assert. | |
sinon.assert.expose(assert, {prefix: ''}); | |
var ckan = {ENV: 'testing'}; | |
</script> | |
<!-- Source --> | |
<script src="../../../base/vendor/jed.js"></script> | |
<script src="../../../base/vendor/jquery.js"></script> | |
<script src="../../../base/vendor/bootstrap/js/bootstrap-transition.js"></script> | |
<script src="../../../base/vendor/bootstrap/js/bootstrap-alert.js"></script> | |
<script src="../../../base/javascript/plugins/jquery.inherit.js"></script> | |
<script src="../../../base/javascript/plugins/jquery.proxy-all.js"></script> | |
<script src="../../../base/javascript/sandbox.js"></script> | |
<script src="../../../base/javascript/module.js"></script> | |
<script src="../../../base/javascript/pubsub.js"></script> | |
<script src="../../../base/javascript/client.js"></script> | |
<script src="../../../base/javascript/notify.js"></script> | |
<script src="../../../base/javascript/i18n.js"></script> | |
<script src="../../../base/javascript/main.js"></script> | |
<script src="../javascript/modules/plot.js"></script> | |
<script src="../javascript/modules/stats-nav.js"></script> | |
<!-- Suite --> | |
<script src="./spec/modules/plot.spec.js"></script> | |
<script src="./spec/modules/stats-nav.spec.js"></script> | |
<script> | |
beforeEach(function () { | |
this.fixture = jQuery('#fixture').empty(); | |
}); | |
afterEach(function () { | |
this.fixture.empty(); | |
}); | |
mocha.run().globals(['ckan', 'setTimeout', 'setInterval', 'clearTimeout', 'clearInterval']); | |
</script> | |
</body> | |
</html> | |
/*globals describe before beforeEach afterEach it assert sinon ckan jQuery */ | |
describe('ckan.module.PlotModule()', function () { | |
var PlotModule = ckan.module.registry['plot']; | |
before(function (done) { | |
var _this = this; | |
jQuery.get('./fixtures/table.html', function (html) { | |
_this.template = html; | |
done(); | |
}); | |
}); | |
beforeEach(function () { | |
this.el = jQuery(this.template).appendTo(this.fixture); | |
this.sandbox = ckan.sandbox(); | |
this.sandbox.body = this.fixture; | |
this.module = new PlotModule(this.el, {}, this.sandbox); | |
}); | |
afterEach(function () { | |
this.module.teardown(); | |
}); | |
describe('.initialize()', function () { | |
it('should setup the canvas element', function () { | |
var target = sinon.stub(this.module, 'setupCanvas', this.module.setupCanvas); | |
this.module.initialize(); | |
assert.called(target); | |
}); | |
it('should draw the graph', function () { | |
var target = sinon.stub(this.module, 'draw'); | |
this.module.initialize(); | |
assert.called(target); | |
}); | |
it('should listen for "shown" events on the body', function () { | |
var target = sinon.stub(this.sandbox.body, 'on'); | |
this.module.initialize(); | |
assert.called(target); | |
assert.calledWith(target, "shown", this.module._onShown); | |
}); | |
}); | |
describe('.teardown()', function () { | |
it('should remove "shown" listeners from the body', function () { | |
var target = sinon.stub(this.sandbox.body, 'off'); | |
this.module.teardown(); | |
assert.called(target); | |
assert.calledWith(target, "shown", this.module._onShown); | |
}); | |
}); | |
describe('.setupCanvas()', function () { | |
it('should create the .canvas element', function () { | |
this.module.setupCanvas(); | |
assert.isDefined(this.module.canvas); | |
assert.isDefined(this.module.canvas.is('div')); | |
}); | |
it('should replace the .el with the .canvas', function () { | |
this.module.setupCanvas(); | |
assert.ok(jQuery.contains(this.sandbox.body[0], this.module.canvas[0])); | |
}); | |
}); | |
describe('.draw()', function () { | |
beforeEach(function () { | |
this.plot = {}; | |
this.module.canvas = jQuery('<div />').appendTo(this.fixture); | |
jQuery.plot = sinon.stub().returns(this.plot); | |
}); | |
it('should call jQuery.plot() if the canvas is visible', function () { | |
this.module.draw(); | |
assert.called(jQuery.plot); | |
assert.calledWith(jQuery.plot, this.module.canvas, this.module.data, this.module.options); | |
}); | |
it('should assign the .graph property', function () { | |
this.module.draw(); | |
assert.strictEqual(this.module.graph, this.plot); | |
}); | |
it('should not call jQuery.plot() if the canvas is not visible', function () { | |
this.module.canvas.hide(); | |
this.module.draw(); | |
assert.notCalled(jQuery.plot); | |
}); | |
}); | |
describe('.parseTable(table)', function () { | |
it('should parse the contents of the provided table', function () { | |
var target = this.module.parseTable(this.module.el); | |
assert.deepEqual(target, [{ | |
label: 'Series A Legend', | |
data: [ | |
[new Date(1176073200000), "20"], | |
[new Date(1176678000000), "12"], | |
[new Date(1177282800000), "27"] | |
] | |
}, { | |
label: 'Series B Legend', | |
data: [ | |
[new Date(1176073200000), "7"], | |
[new Date(1176678000000), "6"], | |
[new Date(1177282800000), "12"] | |
] | |
}]); | |
}); | |
}); | |
describe('.getValue(cell)', function () { | |
it('should extract the value from a table cell'); | |
it('should use the data-value attribute if present'); | |
it('should parse the value using the data-type'); | |
}); | |
describe('.parseValue(value, type)', function () { | |
it('should create a date object if type == "date"'); | |
it('should return the value if the type is not recognised'); | |
}); | |
describe('._onShown(event)', function () { | |
it('should call .draw() if the event.target contains the canvas'); | |
}); | |
}); | |
/*globals describe before beforeEach afterEach it assert sinon ckan jQuery */ | |
describe('ckan.module.StatsNavModule()', function () { | |
var StatsNavModule = ckan.module.registry['stats-nav']; | |
beforeEach(function () { | |
this.el = document.createElement('div'); | |
this.sandbox = ckan.sandbox(); | |
this.sandbox.body = this.fixture; | |
this.sandbox.location = { | |
href: '', | |
hash: '' | |
}; | |
this.module = new StatsNavModule(this.el, {}, this.sandbox); | |
jQuery.fn.tab = sinon.stub(); | |
}); | |
afterEach(function () { | |
this.module.teardown(); | |
delete jQuery.fn.tab; | |
}); | |
describe('.initialize()', function () { | |
it('should listen for shown events and update the location.hash', function () { | |
var anchor = jQuery('<a />').attr('href', '#stats-test')[0]; | |
this.module.initialize(); | |
this.module.el.trigger({type: 'shown', target: anchor}); | |
assert.equal(this.sandbox.location.hash, 'test'); | |
}); | |
it('should select the tab from the location hash on init', function () { | |
var anchor = jQuery('<a />').attr('href', '#stats-test').appendTo(this.el); | |
this.sandbox.location.hash = '#test'; | |
this.module.initialize(); | |
assert.called(jQuery.fn.tab); | |
assert.calledWith(jQuery.fn.tab, 'show'); | |
}); | |
}); | |
}); | |
// Copyright 2006 Google Inc. | |
// | |
// Licensed under the Apache License, Version 2.0 (the "License"); | |
// you may not use this file except in compliance with the License. | |
// You may obtain a copy of the License at | |
// | |
// http://www.apache.org/licenses/LICENSE-2.0 | |
// | |
// Unless required by applicable law or agreed to in writing, software | |
// distributed under the License is distributed on an "AS IS" BASIS, | |
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
// See the License for the specific language governing permissions and | |
// limitations under the License. | |
// Known Issues: | |
// | |
// * Patterns only support repeat. | |
// * Radial gradient are not implemented. The VML version of these look very | |
// different from the canvas one. | |
// * Clipping paths are not implemented. | |
// * Coordsize. The width and height attribute have higher priority than the | |
// width and height style values which isn't correct. | |
// * Painting mode isn't implemented. | |
// * Canvas width/height should is using content-box by default. IE in | |
// Quirks mode will draw the canvas using border-box. Either change your | |
// doctype to HTML5 | |
// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype) | |
// or use Box Sizing Behavior from WebFX | |
// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html) | |
// * Non uniform scaling does not correctly scale strokes. | |
// * Filling very large shapes (above 5000 points) is buggy. | |
// * Optimize. There is always room for speed improvements. | |
// Only add this code if we do not already have a canvas implementation | |
if (!document.createElement('canvas').getContext) { | |
(function() { | |
// alias some functions to make (compiled) code shorter | |
var m = Math; | |
var mr = m.round; | |
var ms = m.sin; | |
var mc = m.cos; | |
var abs = m.abs; | |
var sqrt = m.sqrt; | |
// this is used for sub pixel precision | |
var Z = 10; | |
var Z2 = Z / 2; | |
/** | |
* This funtion is assigned to the <canvas> elements as element.getContext(). | |
* @this {HTMLElement} | |
* @return {CanvasRenderingContext2D_} | |
*/ | |
function getContext() { | |
return this.context_ || | |
(this.context_ = new CanvasRenderingContext2D_(this)); | |
} | |
var slice = Array.prototype.slice; | |
/** | |
* Binds a function to an object. The returned function will always use the | |
* passed in {@code obj} as {@code this}. | |
* | |
* Example: | |
* | |
* g = bind(f, obj, a, b) | |
* g(c, d) // will do f.call(obj, a, b, c, d) | |
* | |
* @param {Function} f The function to bind the object to | |
* @param {Object} obj The object that should act as this when the function | |
* is called | |
* @param {*} var_args Rest arguments that will be used as the initial | |
* arguments when the function is called | |
* @return {Function} A new function that has bound this | |
*/ | |
function bind(f, obj, var_args) { | |
var a = slice.call(arguments, 2); | |
return function() { | |
return f.apply(obj, a.concat(slice.call(arguments))); | |
}; | |
} | |
function encodeHtmlAttribute(s) { | |
return String(s).replace(/&/g, '&').replace(/"/g, '"'); | |
} | |
function addNamespacesAndStylesheet(doc) { | |
// create xmlns | |
if (!doc.namespaces['g_vml_']) { | |
doc.namespaces.add('g_vml_', 'urn:schemas-microsoft-com:vml', | |
'#default#VML'); | |
} | |
if (!doc.namespaces['g_o_']) { | |
doc.namespaces.add('g_o_', 'urn:schemas-microsoft-com:office:office', | |
'#default#VML'); | |
} | |
// Setup default CSS. Only add one style sheet per document | |
if (!doc.styleSheets['ex_canvas_']) { | |
var ss = doc.createStyleSheet(); | |
ss.owningElement.id = 'ex_canvas_'; | |
ss.cssText = 'canvas{display:inline-block;overflow:hidden;' + | |
// default size is 300x150 in Gecko and Opera | |
'text-align:left;width:300px;height:150px}'; | |
} | |
} | |
// Add namespaces and stylesheet at startup. | |
addNamespacesAndStylesheet(document); | |
var G_vmlCanvasManager_ = { | |
init: function(opt_doc) { | |
if (/MSIE/.test(navigator.userAgent) && !window.opera) { | |
var doc = opt_doc || document; | |
// Create a dummy element so that IE will allow canvas elements to be | |
// recognized. | |
doc.createElement('canvas'); | |
doc.attachEvent('onreadystatechange', bind(this.init_, this, doc)); | |
} | |
}, | |
init_: function(doc) { | |
// find all canvas elements | |
var els = doc.getElementsByTagName('canvas'); | |
for (var i = 0; i < els.length; i++) { | |
this.initElement(els[i]); | |
} | |
}, | |
/** | |
* Public initializes a canvas element so that it can be used as canvas | |
* element from now on. This is called automatically before the page is | |
* loaded but if you are creating elements using createElement you need to | |
* make sure this is called on the element. | |
* @param {HTMLElement} el The canvas element to initialize. | |
* @return {HTMLElement} the element that was created. | |
*/ | |
initElement: function(el) { | |
if (!el.getContext) { | |
el.getContext = getContext; | |
// Add namespaces and stylesheet to document of the element. | |
addNamespacesAndStylesheet(el.ownerDocument); | |
// Remove fallback content. There is no way to hide text nodes so we | |
// just remove all childNodes. We could hide all elements and remove | |
// text nodes but who really cares about the fallback content. | |
el.innerHTML = ''; | |
// do not use inline function because that will leak memory | |
el.attachEvent('onpropertychange', onPropertyChange); | |
el.attachEvent('onresize', onResize); | |
var attrs = el.attributes; | |
if (attrs.width && attrs.width.specified) { | |
// TODO: use runtimeStyle and coordsize | |
// el.getContext().setWidth_(attrs.width.nodeValue); | |
el.style.width = attrs.width.nodeValue + 'px'; | |
} else { | |
el.width = el.clientWidth; | |
} | |
if (attrs.height && attrs.height.specified) { | |
// TODO: use runtimeStyle and coordsize | |
// el.getContext().setHeight_(attrs.height.nodeValue); | |
el.style.height = attrs.height.nodeValue + 'px'; | |
} else { | |
el.height = el.clientHeight; | |
} | |
//el.getContext().setCoordsize_() | |
} | |
return el; | |
} | |
}; | |
function onPropertyChange(e) { | |
var el = e.srcElement; | |
switch (e.propertyName) { | |
case 'width': | |
el.getContext().clearRect(); | |
el.style.width = el.attributes.width.nodeValue + 'px'; | |
// In IE8 this does not trigger onresize. | |
el.firstChild.style.width = el.clientWidth + 'px'; | |
break; | |
case 'height': | |
el.getContext().clearRect(); | |
el.style.height = el.attributes.height.nodeValue + 'px'; | |
el.firstChild.style.height = el.clientHeight + 'px'; | |
break; | |
} | |
} | |
function onResize(e) { | |
var el = e.srcElement; | |
if (el.firstChild) { | |
el.firstChild.style.width = el.clientWidth + 'px'; | |
el.firstChild.style.height = el.clientHeight + 'px'; | |
} | |
} | |
G_vmlCanvasManager_.init(); | |
// precompute "00" to "FF" | |
var decToHex = []; | |
for (var i = 0; i < 16; i++) { | |
for (var j = 0; j < 16; j++) { | |
decToHex[i * 16 + j] = i.toString(16) + j.toString(16); | |
} | |
} | |
function createMatrixIdentity() { | |
return [ | |
[1, 0, 0], | |
[0, 1, 0], | |
[0, 0, 1] | |
]; | |
} | |
function matrixMultiply(m1, m2) { | |
var result = createMatrixIdentity(); | |
for (var x = 0; x < 3; x++) { | |
for (var y = 0; y < 3; y++) { | |
var sum = 0; | |
for (var z = 0; z < 3; z++) { | |
sum += m1[x][z] * m2[z][y]; | |
} | |
result[x][y] = sum; | |
} | |
} | |
return result; | |
} | |
function copyState(o1, o2) { | |
o2.fillStyle = o1.fillStyle; | |
o2.lineCap = o1.lineCap; | |
o2.lineJoin = o1.lineJoin; | |
o2.lineWidth = o1.lineWidth; | |
o2.miterLimit = o1.miterLimit; | |
o2.shadowBlur = o1.shadowBlur; | |
o2.shadowColor = o1.shadowColor; | |
o2.shadowOffsetX = o1.shadowOffsetX; | |
o2.shadowOffsetY = o1.shadowOffsetY; | |
o2.strokeStyle = o1.strokeStyle; | |
o2.globalAlpha = o1.globalAlpha; | |
o2.font = o1.font; | |
o2.textAlign = o1.textAlign; | |
o2.textBaseline = o1.textBaseline; | |
o2.arcScaleX_ = o1.arcScaleX_; | |
o2.arcScaleY_ = o1.arcScaleY_; | |
o2.lineScale_ = o1.lineScale_; | |
} | |
var colorData = { | |
aliceblue: '#F0F8FF', | |
antiquewhite: '#FAEBD7', | |
aquamarine: '#7FFFD4', | |
azure: '#F0FFFF', | |
beige: '#F5F5DC', | |
bisque: '#FFE4C4', | |
black: '#000000', | |
blanchedalmond: '#FFEBCD', | |
blueviolet: '#8A2BE2', | |
brown: '#A52A2A', | |
burlywood: '#DEB887', | |
cadetblue: '#5F9EA0', | |
chartreuse: '#7FFF00', | |
chocolate: '#D2691E', | |
coral: '#FF7F50', | |
cornflowerblue: '#6495ED', | |
cornsilk: '#FFF8DC', | |
crimson: '#DC143C', | |
cyan: '#00FFFF', | |
darkblue: '#00008B', | |
darkcyan: '#008B8B', | |
darkgoldenrod: '#B8860B', | |
darkgray: '#A9A9A9', | |
darkgreen: '#006400', | |
darkgrey: '#A9A9A9', | |
darkkhaki: '#BDB76B', | |
darkmagenta: '#8B008B', | |
darkolivegreen: '#556B2F', | |
darkorange: '#FF8C00', | |
darkorchid: '#9932CC', | |
darkred: '#8B0000', | |
darksalmon: '#E9967A', | |
darkseagreen: '#8FBC8F', | |
darkslateblue: '#483D8B', | |
darkslategray: '#2F4F4F', | |
darkslategrey: '#2F4F4F', | |
darkturquoise: '#00CED1', | |
darkviolet: '#9400D3', | |
deeppink: '#FF1493', | |
deepskyblue: '#00BFFF', | |
dimgray: '#696969', | |
dimgrey: '#696969', | |
dodgerblue: '#1E90FF', | |
firebrick: '#B22222', | |
floralwhite: '#FFFAF0', | |
forestgreen: '#228B22', | |
gainsboro: '#DCDCDC', | |
ghostwhite: '#F8F8FF', | |
gold: '#FFD700', | |
goldenrod: '#DAA520', | |
grey: '#808080', | |
greenyellow: '#ADFF2F', | |
honeydew: '#F0FFF0', | |
hotpink: '#FF69B4', | |
indianred: '#CD5C5C', | |
indigo: '#4B0082', | |
ivory: '#FFFFF0', | |
khaki: '#F0E68C', | |
lavender: '#E6E6FA', | |
lavenderblush: '#FFF0F5', | |
lawngreen: '#7CFC00', | |
lemonchiffon: '#FFFACD', | |
lightblue: '#ADD8E6', | |
lightcoral: '#F08080', | |
lightcyan: '#E0FFFF', | |
lightgoldenrodyellow: '#FAFAD2', | |
lightgreen: '#90EE90', | |
lightgrey: '#D3D3D3', | |
lightpink: '#FFB6C1', | |
lightsalmon: '#FFA07A', | |
lightseagreen: '#20B2AA', | |
lightskyblue: '#87CEFA', | |
lightslategray: '#778899', | |
lightslategrey: '#778899', | |
lightsteelblue: '#B0C4DE', | |
lightyellow: '#FFFFE0', | |
limegreen: '#32CD32', | |
linen: '#FAF0E6', | |
magenta: '#FF00FF', | |
mediumaquamarine: '#66CDAA', | |
mediumblue: '#0000CD', | |
mediumorchid: '#BA55D3', | |
mediumpurple: '#9370DB', | |
mediumseagreen: '#3CB371', | |
mediumslateblue: '#7B68EE', | |
mediumspringgreen: '#00FA9A', | |
mediumturquoise: '#48D1CC', | |
mediumvioletred: '#C71585', | |
midnightblue: '#191970', | |
mintcream: '#F5FFFA', | |
mistyrose: '#FFE4E1', | |
moccasin: '#FFE4B5', | |
navajowhite: '#FFDEAD', | |
oldlace: '#FDF5E6', | |
olivedrab: '#6B8E23', | |
orange: '#FFA500', | |
orangered: '#FF4500', | |
orchid: '#DA70D6', | |
palegoldenrod: '#EEE8AA', | |
palegreen: '#98FB98', | |
paleturquoise: '#AFEEEE', | |
palevioletred: '#DB7093', | |
papayawhip: '#FFEFD5', | |
peachpuff: '#FFDAB9', | |
peru: '#CD853F', | |
pink: '#FFC0CB', | |
plum: '#DDA0DD', | |
powderblue: '#B0E0E6', | |
rosybrown: '#BC8F8F', | |
royalblue: '#4169E1', | |
saddlebrown: '#8B4513', | |
salmon: '#FA8072', | |
sandybrown: '#F4A460', | |
seagreen: '#2E8B57', | |
seashell: '#FFF5EE', | |
sienna: '#A0522D', | |
skyblue: '#87CEEB', | |
slateblue: '#6A5ACD', | |
slategray: '#708090', | |
slategrey: '#708090', | |
snow: '#FFFAFA', | |
springgreen: '#00FF7F', | |
steelblue: '#4682B4', | |
tan: '#D2B48C', | |
thistle: '#D8BFD8', | |
tomato: '#FF6347', | |
turquoise: '#40E0D0', | |
violet: '#EE82EE', | |
wheat: '#F5DEB3', | |
whitesmoke: '#F5F5F5', | |
yellowgreen: '#9ACD32' | |
}; | |
function getRgbHslContent(styleString) { | |
var start = styleString.indexOf('(', 3); | |
var end = styleString.indexOf(')', start + 1); | |
var parts = styleString.substring(start + 1, end).split(','); | |
// add alpha if needed | |
if (parts.length == 4 && styleString.substr(3, 1) == 'a') { | |
alpha = Number(parts[3]); | |
} else { | |
parts[3] = 1; | |
} | |
return parts; | |
} | |
function percent(s) { | |
return parseFloat(s) / 100; | |
} | |
function clamp(v, min, max) { | |
return Math.min(max, Math.max(min, v)); | |
} | |
function hslToRgb(parts){ | |
var r, g, b; | |
h = parseFloat(parts[0]) / 360 % 360; | |
if (h < 0) | |
h++; | |
s = clamp(percent(parts[1]), 0, 1); | |
l = clamp(percent(parts[2]), 0, 1); | |
if (s == 0) { | |
r = g = b = l; // achromatic | |
} else { | |
var q = l < 0.5 ? l * (1 + s) : l + s - l * s; | |
var p = 2 * l - q; | |
r = hueToRgb(p, q, h + 1 / 3); | |
g = hueToRgb(p, q, h); | |
b = hueToRgb(p, q, h - 1 / 3); | |
} | |
return '#' + decToHex[Math.floor(r * 255)] + | |
decToHex[Math.floor(g * 255)] + | |
decToHex[Math.floor(b * 255)]; | |
} | |
function hueToRgb(m1, m2, h) { | |
if (h < 0) | |
h++; | |
if (h > 1) | |
h--; | |
if (6 * h < 1) | |
return m1 + (m2 - m1) * 6 * h; | |
else if (2 * h < 1) | |
return m2; | |
else if (3 * h < 2) | |
return m1 + (m2 - m1) * (2 / 3 - h) * 6; | |
else | |
return m1; | |
} | |
function processStyle(styleString) { | |
var str, alpha = 1; | |
styleString = String(styleString); | |
if (styleString.charAt(0) == '#') { | |
str = styleString; | |
} else if (/^rgb/.test(styleString)) { | |
var parts = getRgbHslContent(styleString); | |
var str = '#', n; | |
for (var i = 0; i < 3; i++) { | |
if (parts[i].indexOf('%') != -1) { | |
n = Math.floor(percent(parts[i]) * 255); | |
} else { | |
n = Number(parts[i]); | |
} | |
str += decToHex[clamp(n, 0, 255)]; | |
} | |
alpha = parts[3]; | |
} else if (/^hsl/.test(styleString)) { | |
var parts = getRgbHslContent(styleString); | |
str = hslToRgb(parts); | |
alpha = parts[3]; | |
} else { | |
str = colorData[styleString] || styleString; | |
} | |
return {color: str, alpha: alpha}; | |
} | |
var DEFAULT_STYLE = { | |
style: 'normal', | |
variant: 'normal', | |
weight: 'normal', | |
size: 10, | |
family: 'sans-serif' | |
}; | |
// Internal text style cache | |
var fontStyleCache = {}; | |
function processFontStyle(styleString) { | |
if (fontStyleCache[styleString]) { | |
return fontStyleCache[styleString]; | |
} | |
var el = document.createElement('div'); | |
var style = el.style; | |
try { | |
style.font = styleString; | |
} catch (ex) { | |
// Ignore failures to set to invalid font. | |
} | |
return fontStyleCache[styleString] = { | |
style: style.fontStyle || DEFAULT_STYLE.style, | |
variant: style.fontVariant || DEFAULT_STYLE.variant, | |
weight: style.fontWeight || DEFAULT_STYLE.weight, | |
size: style.fontSize || DEFAULT_STYLE.size, | |
family: style.fontFamily || DEFAULT_STYLE.family | |
}; | |
} | |
function getComputedStyle(style, element) { | |
var computedStyle = {}; | |
for (var p in style) { | |
computedStyle[p] = style[p]; | |
} | |
// Compute the size | |
var canvasFontSize = parseFloat(element.currentStyle.fontSize), | |
fontSize = parseFloat(style.size); | |
if (typeof style.size == 'number') { | |
computedStyle.size = style.size; | |
} else if (style.size.indexOf('px') != -1) { | |
computedStyle.size = fontSize; | |
} else if (style.size.indexOf('em') != -1) { | |
computedStyle.size = canvasFontSize * fontSize; | |
} else if(style.size.indexOf('%') != -1) { | |
computedStyle.size = (canvasFontSize / 100) * fontSize; | |
} else if (style.size.indexOf('pt') != -1) { | |
computedStyle.size = fontSize / .75; | |
} else { | |
computedStyle.size = canvasFontSize; | |
} | |
// Different scaling between normal text and VML text. This was found using | |
// trial and error to get the same size as non VML text. | |
computedStyle.size *= 0.981; | |
return computedStyle; | |
} | |
function buildStyle(style) { | |
return style.style + ' ' + style.variant + ' ' + style.weight + ' ' + | |
style.size + 'px ' + style.family; | |
} | |
function processLineCap(lineCap) { | |
switch (lineCap) { | |
case 'butt': | |
return 'flat'; | |
case 'round': | |
return 'round'; | |
case 'square': | |
default: | |
return 'square'; | |
} | |
} | |
/** | |
* This class implements CanvasRenderingContext2D interface as described by | |
* the WHATWG. | |
* @param {HTMLElement} surfaceElement The element that the 2D context should | |
* be associated with | |
*/ | |
function CanvasRenderingContext2D_(surfaceElement) { | |
this.m_ = createMatrixIdentity(); | |
this.mStack_ = []; | |
this.aStack_ = []; | |
this.currentPath_ = []; | |
// Canvas context properties | |
this.strokeStyle = '#000'; | |
this.fillStyle = '#000'; | |
this.lineWidth = 1; | |
this.lineJoin = 'miter'; | |
this.lineCap = 'butt'; | |
this.miterLimit = Z * 1; | |
this.globalAlpha = 1; | |
this.font = '10px sans-serif'; | |
this.textAlign = 'left'; | |
this.textBaseline = 'alphabetic'; | |
this.canvas = surfaceElement; | |
var el = surfaceElement.ownerDocument.createElement('div'); | |
el.style.width = surfaceElement.clientWidth + 'px'; | |
el.style.height = surfaceElement.clientHeight + 'px'; | |
el.style.overflow = 'hidden'; | |
el.style.position = 'absolute'; | |
surfaceElement.appendChild(el); | |
this.element_ = el; | |
this.arcScaleX_ = 1; | |
this.arcScaleY_ = 1; | |
this.lineScale_ = 1; | |
} | |
var contextPrototype = CanvasRenderingContext2D_.prototype; | |
contextPrototype.clearRect = function() { | |
if (this.textMeasureEl_) { | |
this.textMeasureEl_.removeNode(true); | |
this.textMeasureEl_ = null; | |
} | |
this.element_.innerHTML = ''; | |
}; | |
contextPrototype.beginPath = function() { | |
// TODO: Branch current matrix so that save/restore has no effect | |
// as per safari docs. | |
this.currentPath_ = []; | |
}; | |
contextPrototype.moveTo = function(aX, aY) { | |
var p = this.getCoords_(aX, aY); | |
this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y}); | |
this.currentX_ = p.x; | |
this.currentY_ = p.y; | |
}; | |
contextPrototype.lineTo = function(aX, aY) { | |
var p = this.getCoords_(aX, aY); | |
this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y}); | |
this.currentX_ = p.x; | |
this.currentY_ = p.y; | |
}; | |
contextPrototype.bezierCurveTo = function(aCP1x, aCP1y, | |
aCP2x, aCP2y, | |
aX, aY) { | |
var p = this.getCoords_(aX, aY); | |
var cp1 = this.getCoords_(aCP1x, aCP1y); | |
var cp2 = this.getCoords_(aCP2x, aCP2y); | |
bezierCurveTo(this, cp1, cp2, p); | |
}; | |
// Helper function that takes the already fixed cordinates. | |
function bezierCurveTo(self, cp1, cp2, p) { | |
self.currentPath_.push({ | |
type: 'bezierCurveTo', | |
cp1x: cp1.x, | |
cp1y: cp1.y, | |
cp2x: cp2.x, | |
cp2y: cp2.y, | |
x: p.x, | |
y: p.y | |
}); | |
self.currentX_ = p.x; | |
self.currentY_ = p.y; | |
} | |
contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) { | |
// the following is lifted almost directly from | |
// http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes | |
var cp = this.getCoords_(aCPx, aCPy); | |
var p = this.getCoords_(aX, aY); | |
var cp1 = { | |
x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_), | |
y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_) | |
}; | |
var cp2 = { | |
x: cp1.x + (p.x - this.currentX_) / 3.0, | |
y: cp1.y + (p.y - this.currentY_) / 3.0 | |
}; | |
bezierCurveTo(this, cp1, cp2, p); | |
}; | |
contextPrototype.arc = function(aX, aY, aRadius, | |
aStartAngle, aEndAngle, aClockwise) { | |
aRadius *= Z; | |
var arcType = aClockwise ? 'at' : 'wa'; | |
var xStart = aX + mc(aStartAngle) * aRadius - Z2; | |
var yStart = aY + ms(aStartAngle) * aRadius - Z2; | |
var xEnd = aX + mc(aEndAngle) * aRadius - Z2; | |
var yEnd = aY + ms(aEndAngle) * aRadius - Z2; | |
// IE won't render arches drawn counter clockwise if xStart == xEnd. | |
if (xStart == xEnd && !aClockwise) { | |
xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something | |
// that can be represented in binary | |
} | |
var p = this.getCoords_(aX, aY); | |
var pStart = this.getCoords_(xStart, yStart); | |
var pEnd = this.getCoords_(xEnd, yEnd); | |
this.currentPath_.push({type: arcType, | |
x: p.x, | |
y: p.y, | |
radius: aRadius, | |
xStart: pStart.x, | |
yStart: pStart.y, | |
xEnd: pEnd.x, | |
yEnd: pEnd.y}); | |
}; | |
contextPrototype.rect = function(aX, aY, aWidth, aHeight) { | |
this.moveTo(aX, aY); | |
this.lineTo(aX + aWidth, aY); | |
this.lineTo(aX + aWidth, aY + aHeight); | |
this.lineTo(aX, aY + aHeight); | |
this.closePath(); | |
}; | |
contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) { | |
var oldPath = this.currentPath_; | |
this.beginPath(); | |
this.moveTo(aX, aY); | |
this.lineTo(aX + aWidth, aY); | |
this.lineTo(aX + aWidth, aY + aHeight); | |
this.lineTo(aX, aY + aHeight); | |
this.closePath(); | |
this.stroke(); | |
this.currentPath_ = oldPath; | |
}; | |
contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) { | |
var oldPath = this.currentPath_; | |
this.beginPath(); | |
this.moveTo(aX, aY); | |
this.lineTo(aX + aWidth, aY); | |
this.lineTo(aX + aWidth, aY + aHeight); | |
this.lineTo(aX, aY + aHeight); | |
this.closePath(); | |
this.fill(); | |
this.currentPath_ = oldPath; | |
}; | |
contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) { | |
var gradient = new CanvasGradient_('gradient'); | |
gradient.x0_ = aX0; | |
gradient.y0_ = aY0; | |
gradient.x1_ = aX1; | |
gradient.y1_ = aY1; | |
return gradient; | |
}; | |
contextPrototype.createRadialGradient = function(aX0, aY0, aR0, | |
aX1, aY1, aR1) { | |
var gradient = new CanvasGradient_('gradientradial'); | |
gradient.x0_ = aX0; | |
gradient.y0_ = aY0; | |
gradient.r0_ = aR0; | |
gradient.x1_ = aX1; | |
gradient.y1_ = aY1; | |
gradient.r1_ = aR1; | |
return gradient; | |
}; | |
contextPrototype.drawImage = function(image, var_args) { | |
var dx, dy, dw, dh, sx, sy, sw, sh; | |
// to find the original width we overide the width and height | |
var oldRuntimeWidth = image.runtimeStyle.width; | |
var oldRuntimeHeight = image.runtimeStyle.height; | |
image.runtimeStyle.width = 'auto'; | |
image.runtimeStyle.height = 'auto'; | |
// get the original size | |
var w = image.width; | |
var h = image.height; | |
// and remove overides | |
image.runtimeStyle.width = oldRuntimeWidth; | |
image.runtimeStyle.height = oldRuntimeHeight; | |
if (arguments.length == 3) { | |
dx = arguments[1]; | |
dy = arguments[2]; | |
sx = sy = 0; | |
sw = dw = w; | |
sh = dh = h; | |
} else if (arguments.length == 5) { | |
dx = arguments[1]; | |
dy = arguments[2]; | |
dw = arguments[3]; | |
dh = arguments[4]; | |
sx = sy = 0; | |
sw = w; | |
sh = h; | |
} else if (arguments.length == 9) { | |
sx = arguments[1]; | |
sy = arguments[2]; | |
sw = arguments[3]; | |
sh = arguments[4]; | |
dx = arguments[5]; | |
dy = arguments[6]; | |
dw = arguments[7]; | |
dh = arguments[8]; | |
} else { | |
throw Error('Invalid number of arguments'); | |
} | |
var d = this.getCoords_(dx, dy); | |
var w2 = sw / 2; | |
var h2 = sh / 2; | |
var vmlStr = []; | |
var W = 10; | |
var H = 10; | |
// For some reason that I've now forgotten, using divs didn't work | |
vmlStr.push(' <g_vml_:group', | |
' coordsize="', Z * W, ',', Z * H, '"', | |
' coordorigin="0,0"' , | |
' style="width:', W, 'px;height:', H, 'px;position:absolute;'); | |
// If filters are necessary (rotation exists), create them | |
// filters are bog-slow, so only create them if abbsolutely necessary | |
// The following check doesn't account for skews (which don't exist | |
// in the canvas spec (yet) anyway. | |
if (this.m_[0][0] != 1 || this.m_[0][1] || | |
this.m_[1][1] != 1 || this.m_[1][0]) { | |
var filter = []; | |
// Note the 12/21 reversal | |
filter.push('M11=', this.m_[0][0], ',', | |
'M12=', this.m_[1][0], ',', | |
'M21=', this.m_[0][1], ',', | |
'M22=', this.m_[1][1], ',', | |
'Dx=', mr(d.x / Z), ',', | |
'Dy=', mr(d.y / Z), ''); | |
// Bounding box calculation (need to minimize displayed area so that | |
// filters don't waste time on unused pixels. | |
var max = d; | |
var c2 = this.getCoords_(dx + dw, dy); | |
var c3 = this.getCoords_(dx, dy + dh); | |
var c4 = this.getCoords_(dx + dw, dy + dh); | |
max.x = m.max(max.x, c2.x, c3.x, c4.x); | |
max.y = m.max(max.y, c2.y, c3.y, c4.y); | |
vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z), | |
'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(', | |
filter.join(''), ", sizingmethod='clip');"); | |
} else { | |
vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;'); | |
} | |
vmlStr.push(' ">' , | |
'<g_vml_:image src="', image.src, '"', | |
' style="width:', Z * dw, 'px;', | |
' height:', Z * dh, 'px"', | |
' cropleft="', sx / w, '"', | |
' croptop="', sy / h, '"', | |
' cropright="', (w - sx - sw) / w, '"', | |
' cropbottom="', (h - sy - sh) / h, '"', | |
' />', | |
'</g_vml_:group>'); | |
this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join('')); | |
}; | |
contextPrototype.stroke = function(aFill) { | |
var W = 10; | |
var H = 10; | |
// Divide the shape into chunks if it's too long because IE has a limit | |
// somewhere for how long a VML shape can be. This simple division does | |
// not work with fills, only strokes, unfortunately. | |
var chunkSize = 5000; | |
var min = {x: null, y: null}; | |
var max = {x: null, y: null}; | |
for (var j = 0; j < this.currentPath_.length; j += chunkSize) { | |
var lineStr = []; | |
var lineOpen = false; | |
lineStr.push('<g_vml_:shape', | |
' filled="', !!aFill, '"', | |
' style="position:absolute;width:', W, 'px;height:', H, 'px;"', | |
' coordorigin="0,0"', | |
' coordsize="', Z * W, ',', Z * H, '"', | |
' stroked="', !aFill, '"', | |
' path="'); | |
var newSeq = false; | |
for (var i = j; i < Math.min(j + chunkSize, this.currentPath_.length); i++) { | |
if (i % chunkSize == 0 && i > 0) { // move into position for next chunk | |
lineStr.push(' m ', mr(this.currentPath_[i-1].x), ',', mr(this.currentPath_[i-1].y)); | |
} | |
var p = this.currentPath_[i]; | |
var c; | |
switch (p.type) { | |
case 'moveTo': | |
c = p; | |
lineStr.push(' m ', mr(p.x), ',', mr(p.y)); | |
break; | |
case 'lineTo': | |
lineStr.push(' l ', mr(p.x), ',', mr(p.y)); | |
break; | |
case 'close': | |
lineStr.push(' x '); | |
p = null; | |
break; | |
case 'bezierCurveTo': | |
lineStr.push(' c ', | |
mr(p.cp1x), ',', mr(p.cp1y), ',', | |
mr(p.cp2x), ',', mr(p.cp2y), ',', | |
mr(p.x), ',', mr(p.y)); | |
break; | |
case 'at': | |
case 'wa': | |
lineStr.push(' ', p.type, ' ', | |
mr(p.x - this.arcScaleX_ * p.radius), ',', | |
mr(p.y - this.arcScaleY_ * p.radius), ' ', | |
mr(p.x + this.arcScaleX_ * p.radius), ',', | |
mr(p.y + this.arcScaleY_ * p.radius), ' ', | |
mr(p.xStart), ',', mr(p.yStart), ' ', | |
mr(p.xEnd), ',', mr(p.yEnd)); | |
break; | |
} | |
// TODO: Following is broken for curves due to | |
// move to proper paths. | |
// Figure out dimensions so we can do gradient fills | |
// properly | |
if (p) { | |
if (min.x == null || p.x < min.x) { | |
min.x = p.x; | |
} | |
if (max.x == null || p.x > max.x) { | |
max.x = p.x; | |
} | |
if (min.y == null || p.y < min.y) { | |
min.y = p.y; | |
} | |
if (max.y == null || p.y > max.y) { | |
max.y = p.y; | |
} | |
} | |
} | |
lineStr.push(' ">'); | |
if (!aFill) { | |
appendStroke(this, lineStr); | |
} else { | |
appendFill(this, lineStr, min, max); | |
} | |
lineStr.push('</g_vml_:shape>'); | |
this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); | |
} | |
}; | |
function appendStroke(ctx, lineStr) { | |
var a = processStyle(ctx.strokeStyle); | |
var color = a.color; | |
var opacity = a.alpha * ctx.globalAlpha; | |
var lineWidth = ctx.lineScale_ * ctx.lineWidth; | |
// VML cannot correctly render a line if the width is less than 1px. | |
// In that case, we dilute the color to make the line look thinner. | |
if (lineWidth < 1) { | |
opacity *= lineWidth; | |
} | |
lineStr.push( | |
'<g_vml_:stroke', | |
' opacity="', opacity, '"', | |
' joinstyle="', ctx.lineJoin, '"', | |
' miterlimit="', ctx.miterLimit, '"', | |
' endcap="', processLineCap(ctx.lineCap), '"', | |
' weight="', lineWidth, 'px"', | |
' color="', color, '" />' | |
); | |
} | |
function appendFill(ctx, lineStr, min, max) { | |
var fillStyle = ctx.fillStyle; | |
var arcScaleX = ctx.arcScaleX_; | |
var arcScaleY = ctx.arcScaleY_; | |
var width = max.x - min.x; | |
var height = max.y - min.y; | |
if (fillStyle instanceof CanvasGradient_) { | |
// TODO: Gradients transformed with the transformation matrix. | |
var angle = 0; | |
var focus = {x: 0, y: 0}; | |
// additional offset | |
var shift = 0; | |
// scale factor for offset | |
var expansion = 1; | |
if (fillStyle.type_ == 'gradient') { | |
var x0 = fillStyle.x0_ / arcScaleX; | |
var y0 = fillStyle.y0_ / arcScaleY; | |
var x1 = fillStyle.x1_ / arcScaleX; | |
var y1 = fillStyle.y1_ / arcScaleY; | |
var p0 = ctx.getCoords_(x0, y0); | |
var p1 = ctx.getCoords_(x1, y1); | |
var dx = p1.x - p0.x; | |
var dy = p1.y - p0.y; | |
angle = Math.atan2(dx, dy) * 180 / Math.PI; | |
// The angle should be a non-negative number. | |
if (angle < 0) { | |
angle += 360; | |
} | |
// Very small angles produce an unexpected result because they are | |
// converted to a scientific notation string. | |
if (angle < 1e-6) { | |
angle = 0; | |
} | |
} else { | |
var p0 = ctx.getCoords_(fillStyle.x0_, fillStyle.y0_); | |
focus = { | |
x: (p0.x - min.x) / width, | |
y: (p0.y - min.y) / height | |
}; | |
width /= arcScaleX * Z; | |
height /= arcScaleY * Z; | |
var dimension = m.max(width, height); | |
shift = 2 * fillStyle.r0_ / dimension; | |
expansion = 2 * fillStyle.r1_ / dimension - shift; | |
} | |
// We need to sort the color stops in ascending order by offset, | |
// otherwise IE won't interpret it correctly. | |
var stops = fillStyle.colors_; | |
stops.sort(function(cs1, cs2) { | |
return cs1.offset - cs2.offset; | |
}); | |
var length = stops.length; | |
var color1 = stops[0].color; | |
var color2 = stops[length - 1].color; | |
var opacity1 = stops[0].alpha * ctx.globalAlpha; | |
var opacity2 = stops[length - 1].alpha * ctx.globalAlpha; | |
var colors = []; | |
for (var i = 0; i < length; i++) { | |
var stop = stops[i]; | |
colors.push(stop.offset * expansion + shift + ' ' + stop.color); | |
} | |
// When colors attribute is used, the meanings of opacity and o:opacity2 | |
// are reversed. | |
lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"', | |
' method="none" focus="100%"', | |
' color="', color1, '"', | |
' color2="', color2, '"', | |
' colors="', colors.join(','), '"', | |
' opacity="', opacity2, '"', | |
' g_o_:opacity2="', opacity1, '"', | |
' angle="', angle, '"', | |
' focusposition="', focus.x, ',', focus.y, '" />'); | |
} else if (fillStyle instanceof CanvasPattern_) { | |
if (width && height) { | |
var deltaLeft = -min.x; | |
var deltaTop = -min.y; | |
lineStr.push('<g_vml_:fill', | |
' position="', | |
deltaLeft / width * arcScaleX * arcScaleX, ',', | |
deltaTop / height * arcScaleY * arcScaleY, '"', | |
' type="tile"', | |
// TODO: Figure out the correct size to fit the scale. | |
//' size="', w, 'px ', h, 'px"', | |
' src="', fillStyle.src_, '" />'); | |
} | |
} else { | |
var a = processStyle(ctx.fillStyle); | |
var color = a.color; | |
var opacity = a.alpha * ctx.globalAlpha; | |
lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity, | |
'" />'); | |
} | |
} | |
contextPrototype.fill = function() { | |
this.stroke(true); | |
}; | |
contextPrototype.closePath = function() { | |
this.currentPath_.push({type: 'close'}); | |
}; | |
/** | |
* @private | |
*/ | |
contextPrototype.getCoords_ = function(aX, aY) { | |
var m = this.m_; | |
return { | |
x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2, | |
y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2 | |
}; | |
}; | |
contextPrototype.save = function() { | |
var o = {}; | |
copyState(this, o); | |
this.aStack_.push(o); | |
this.mStack_.push(this.m_); | |
this.m_ = matrixMultiply(createMatrixIdentity(), this.m_); | |
}; | |
contextPrototype.restore = function() { | |
if (this.aStack_.length) { | |
copyState(this.aStack_.pop(), this); | |
this.m_ = this.mStack_.pop(); | |
} | |
}; | |
function matrixIsFinite(m) { | |
return isFinite(m[0][0]) && isFinite(m[0][1]) && | |
isFinite(m[1][0]) && isFinite(m[1][1]) && | |
isFinite(m[2][0]) && isFinite(m[2][1]); | |
} | |
function setM(ctx, m, updateLineScale) { | |
if (!matrixIsFinite(m)) { | |
return; | |
} | |
ctx.m_ = m; | |
if (updateLineScale) { | |
// Get the line scale. | |
// Determinant of this.m_ means how much the area is enlarged by the | |
// transformation. So its square root can be used as a scale factor | |
// for width. | |
var det = m[0][0] * m[1][1] - m[0][1] * m[1][0]; | |
ctx.lineScale_ = sqrt(abs(det)); | |
} | |
} | |
contextPrototype.translate = function(aX, aY) { | |
var m1 = [ | |
[1, 0, 0], | |
[0, 1, 0], | |
[aX, aY, 1] | |
]; | |
setM(this, matrixMultiply(m1, this.m_), false); | |
}; | |
contextPrototype.rotate = function(aRot) { | |
var c = mc(aRot); | |
var s = ms(aRot); | |
var m1 = [ | |
[c, s, 0], | |
[-s, c, 0], | |
[0, 0, 1] | |
]; | |
setM(this, matrixMultiply(m1, this.m_), false); | |
}; | |
contextPrototype.scale = function(aX, aY) { | |
this.arcScaleX_ *= aX; | |
this.arcScaleY_ *= aY; | |
var m1 = [ | |
[aX, 0, 0], | |
[0, aY, 0], | |
[0, 0, 1] | |
]; | |
setM(this, matrixMultiply(m1, this.m_), true); | |
}; | |
contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) { | |
var m1 = [ | |
[m11, m12, 0], | |
[m21, m22, 0], | |
[dx, dy, 1] | |
]; | |
setM(this, matrixMultiply(m1, this.m_), true); | |
}; | |
contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) { | |
var m = [ | |
[m11, m12, 0], | |
[m21, m22, 0], | |
[dx, dy, 1] | |
]; | |
setM(this, m, true); | |
}; | |
/** | |
* The text drawing function. | |
* The maxWidth argument isn't taken in account, since no browser supports | |
* it yet. | |
*/ | |
contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) { | |
var m = this.m_, | |
delta = 1000, | |
left = 0, | |
right = delta, | |
offset = {x: 0, y: 0}, | |
lineStr = []; | |
var fontStyle = getComputedStyle(processFontStyle(this.font), | |
this.element_); | |
var fontStyleString = buildStyle(fontStyle); | |
var elementStyle = this.element_.currentStyle; | |
var textAlign = this.textAlign.toLowerCase(); | |
switch (textAlign) { | |
case 'left': | |
case 'center': | |
case 'right': | |
break; | |
case 'end': | |
textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left'; | |
break; | |
case 'start': | |
textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left'; | |
break; | |
default: | |
textAlign = 'left'; | |
} | |
// 1.75 is an arbitrary number, as there is no info about the text baseline | |
switch (this.textBaseline) { | |
case 'hanging': | |
case 'top': | |
offset.y = fontStyle.size / 1.75; | |
break; | |
case 'middle': | |
break; | |
default: | |
case null: | |
case 'alphabetic': | |
case 'ideographic': | |
case 'bottom': | |
offset.y = -fontStyle.size / 2.25; | |
break; | |
} | |
switch(textAlign) { | |
case 'right': | |
left = delta; | |
right = 0.05; | |
break; | |
case 'center': | |
left = right = delta / 2; | |
break; | |
} | |
var d = this.getCoords_(x + offset.x, y + offset.y); | |
lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ', | |
' coordsize="100 100" coordorigin="0 0"', | |
' filled="', !stroke, '" stroked="', !!stroke, | |
'" style="position:absolute;width:1px;height:1px;">'); | |
if (stroke) { | |
appendStroke(this, lineStr); | |
} else { | |
// TODO: Fix the min and max params. | |
appendFill(this, lineStr, {x: -left, y: 0}, | |
{x: right, y: fontStyle.size}); | |
} | |
var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' + | |
m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0'; | |
var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z); | |
lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ', | |
' offset="', skewOffset, '" origin="', left ,' 0" />', | |
'<g_vml_:path textpathok="true" />', | |
'<g_vml_:textpath on="true" string="', | |
encodeHtmlAttribute(text), | |
'" style="v-text-align:', textAlign, | |
';font:', encodeHtmlAttribute(fontStyleString), | |
'" /></g_vml_:line>'); | |
this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); | |
}; | |
contextPrototype.fillText = function(text, x, y, maxWidth) { | |
this.drawText_(text, x, y, maxWidth, false); | |
}; | |
contextPrototype.strokeText = function(text, x, y, maxWidth) { | |
this.drawText_(text, x, y, maxWidth, true); | |
}; | |
contextPrototype.measureText = function(text) { | |
if (!this.textMeasureEl_) { | |
var s = '<span style="position:absolute;' + | |
'top:-20000px;left:0;padding:0;margin:0;border:none;' + | |
'white-space:pre;"></span>'; | |
this.element_.insertAdjacentHTML('beforeEnd', s); | |
this.textMeasureEl_ = this.element_.lastChild; | |
} | |
var doc = this.element_.ownerDocument; | |
this.textMeasureEl_.innerHTML = ''; | |
this.textMeasureEl_.style.font = this.font; | |
// Don't use innerHTML or innerText because they allow markup/whitespace. | |
this.textMeasureEl_.appendChild(doc.createTextNode(text)); | |
return {width: this.textMeasureEl_.offsetWidth}; | |
}; | |
/******** STUBS ********/ | |
contextPrototype.clip = function() { | |
// TODO: Implement | |
}; | |
contextPrototype.arcTo = function() { | |
// TODO: Implement | |
}; | |
contextPrototype.createPattern = function(image, repetition) { | |
return new CanvasPattern_(image, repetition); | |
}; | |
// Gradient / Pattern Stubs | |
function CanvasGradient_(aType) { | |
this.type_ = aType; | |
this.x0_ = 0; | |
this.y0_ = 0; | |
this.r0_ = 0; | |
this.x1_ = 0; | |
this.y1_ = 0; | |
this.r1_ = 0; | |
this.colors_ = []; | |
} | |
CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) { | |
aColor = processStyle(aColor); | |
this.colors_.push({offset: aOffset, | |
color: aColor.color, | |
alpha: aColor.alpha}); | |
}; | |
function CanvasPattern_(image, repetition) { | |
assertImageIsValid(image); | |
switch (repetition) { | |
case 'repeat': | |
case null: | |
case '': | |
this.repetition_ = 'repeat'; | |
break | |
case 'repeat-x': | |
case 'repeat-y': | |
case 'no-repeat': | |
this.repetition_ = repetition; | |
break; | |
default: | |
throwException('SYNTAX_ERR'); | |
} | |
this.src_ = image.src; | |
this.width_ = image.width; | |
this.height_ = image.height; | |
} | |
function throwException(s) { | |
throw new DOMException_(s); | |
} | |
function assertImageIsValid(img) { | |
if (!img || img.nodeType != 1 || img.tagName != 'IMG') { | |
throwException('TYPE_MISMATCH_ERR'); | |
} | |
if (img.readyState != 'complete') { | |
throwException('INVALID_STATE_ERR'); | |
} | |
} | |
function DOMException_(s) { | |
this.code = this[s]; | |
this.message = s +': DOM Exception ' + this.code; | |
} | |
var p = DOMException_.prototype = new Error; | |
p.INDEX_SIZE_ERR = 1; | |
p.DOMSTRING_SIZE_ERR = 2; | |
p.HIERARCHY_REQUEST_ERR = 3; | |
p.WRONG_DOCUMENT_ERR = 4; | |
p.INVALID_CHARACTER_ERR = 5; | |
p.NO_DATA_ALLOWED_ERR = 6; | |
p.NO_MODIFICATION_ALLOWED_ERR = 7; | |
p.NOT_FOUND_ERR = 8; | |
p.NOT_SUPPORTED_ERR = 9; | |
p.INUSE_ATTRIBUTE_ERR = 10; | |
p.INVALID_STATE_ERR = 11; | |
p.SYNTAX_ERR = 12; | |
p.INVALID_MODIFICATION_ERR = 13; | |
p.NAMESPACE_ERR = 14; | |
p.INVALID_ACCESS_ERR = 15; | |
p.VALIDATION_ERR = 16; | |
p.TYPE_MISMATCH_ERR = 17; | |
// set up externs | |
G_vmlCanvasManager = G_vmlCanvasManager_; | |
CanvasRenderingContext2D = CanvasRenderingContext2D_; | |
CanvasGradient = CanvasGradient_; | |
CanvasPattern = CanvasPattern_; | |
DOMException = DOMException_; | |
})(); | |
} // if | |
/*! Javascript plotting library for jQuery, v. 0.7. | |
* | |
* Released under the MIT license by IOLA, December 2007. | |
* | |
*/ | |
// first an inline dependency, jquery.colorhelpers.js, we inline it here | |
// for convenience | |
/* Plugin for jQuery for working with colors. | |
* | |
* Version 1.1. | |
* | |
* Inspiration from jQuery color animation plugin by John Resig. | |
* | |
* Released under the MIT license by Ole Laursen, October 2009. | |
* | |
* Examples: | |
* | |
* $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString() | |
* var c = $.color.extract($("#mydiv"), 'background-color'); | |
* console.log(c.r, c.g, c.b, c.a); | |
* $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)" | |
* | |
* Note that .scale() and .add() return the same modified object | |
* instead of making a new one. | |
* | |
* V. 1.1: Fix error handling so e.g. parsing an empty string does | |
* produce a color rather than just crashing. | |
*/ | |
(function(B){B.color={};B.color.make=function(F,E,C,D){var G={};G.r=F||0;G.g=E||0;G.b=C||0;G.a=D!=null?D:1;G.add=function(J,I){for(var H=0;H<J.length;++H){G[J.charAt(H)]+=I}return G.normalize()};G.scale=function(J,I){for(var H=0;H<J.length;++H){G[J.charAt(H)]*=I}return G.normalize()};G.toString=function(){if(G.a>=1){return"rgb("+[G.r,G.g,G.b].join(",")+")"}else{return"rgba("+[G.r,G.g,G.b,G.a].join(",")+")"}};G.normalize=function(){function H(J,K,I){return K<J?J:(K>I?I:K)}G.r=H(0,parseInt(G.r),255);G.g=H(0,parseInt(G.g),255);G.b=H(0,parseInt(G.b),255);G.a=H(0,G.a,1);return G};G.clone=function(){return B.color.make(G.r,G.b,G.g,G.a)};return G.normalize()};B.color.extract=function(D,C){var E;do{E=D.css(C).toLowerCase();if(E!=""&&E!="transparent"){break}D=D.parent()}while(!B.nodeName(D.get(0),"body"));if(E=="rgba(0, 0, 0, 0)"){E="transparent"}return B.color.parse(E)};B.color.parse=function(F){var E,C=B.color.make;if(E=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(F)){return C(parseInt(E[1],10),parseInt(E[2],10),parseInt(E[3],10))}if(E=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(F)){return C(parseInt(E[1],10),parseInt(E[2],10),parseInt(E[3],10),parseFloat(E[4]))}if(E=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(F)){return C(parseFloat(E[1])*2.55,parseFloat(E[2])*2.55,parseFloat(E[3])*2.55)}if(E=/rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(F)){return C(parseFloat(E[1])*2.55,parseFloat(E[2])*2.55,parseFloat(E[3])*2.55,parseFloat(E[4]))}if(E=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(F)){return C(parseInt(E[1],16),parseInt(E[2],16),parseInt(E[3],16))}if(E=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(F)){return C(parseInt(E[1]+E[1],16),parseInt(E[2]+E[2],16),parseInt(E[3]+E[3],16))}var D=B.trim(F).toLowerCase();if(D=="transparent"){return C(255,255,255,0)}else{E=A[D]||[0,0,0];return C(E[0],E[1],E[2])}};var A={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]}})(jQuery); | |
// the actual Flot code | |
(function($) { | |
function Plot(placeholder, data_, options_, plugins) { | |
// data is on the form: | |
// [ series1, series2 ... ] | |
// where series is either just the data as [ [x1, y1], [x2, y2], ... ] | |
// or { data: [ [x1, y1], [x2, y2], ... ], label: "some label", ... } | |
var series = [], | |
options = { | |
// the color theme used for graphs | |
colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"], | |
legend: { | |
show: true, | |
noColumns: 1, // number of colums in legend table | |
labelFormatter: null, // fn: string -> string | |
labelBoxBorderColor: "#ccc", // border color for the little label boxes | |
container: null, // container (as jQuery object) to put legend in, null means default on top of graph | |
position: "ne", // position of default legend container within plot | |
margin: 5, // distance from grid edge to default legend container within plot | |
backgroundColor: null, // null means auto-detect | |
backgroundOpacity: 0.85 // set to 0 to avoid background | |
}, | |
xaxis: { | |
show: null, // null = auto-detect, true = always, false = never | |
position: "bottom", // or "top" | |
mode: null, // null or "time" | |
color: null, // base color, labels, ticks | |
tickColor: null, // possibly different color of ticks, e.g. "rgba(0,0,0,0.15)" | |
transform: null, // null or f: number -> number to transform axis | |
inverseTransform: null, // if transform is set, this should be the inverse function | |
min: null, // min. value to show, null means set automatically | |
max: null, // max. value to show, null means set automatically | |
autoscaleMargin: null, // margin in % to add if auto-setting min/max | |
ticks: null, // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks | |
tickFormatter: null, // fn: number -> string | |
labelWidth: null, // size of tick labels in pixels | |
labelHeight: null, | |
reserveSpace: null, // whether to reserve space even if axis isn't shown | |
tickLength: null, // size in pixels of ticks, or "full" for whole line | |
alignTicksWithAxis: null, // axis number or null for no sync | |
// mode specific options | |
tickDecimals: null, // no. of decimals, null means auto | |
tickSize: null, // number or [number, "unit"] | |
minTickSize: null, // number or [number, "unit"] | |
monthNames: null, // list of names of months | |
timeformat: null, // format string to use | |
twelveHourClock: false // 12 or 24 time in time mode | |
}, | |
yaxis: { | |
autoscaleMargin: 0.02, | |
position: "left" // or "right" | |
}, | |
xaxes: [], | |
yaxes: [], | |
series: { | |
points: { | |
show: false, | |
radius: 3, | |
lineWidth: 2, // in pixels | |
fill: true, | |
fillColor: "#ffffff", | |
symbol: "circle" // or callback | |
}, | |
lines: { | |
// we don't put in show: false so we can see | |
// whether lines were actively disabled | |
lineWidth: 2, // in pixels | |
fill: false, | |
fillColor: null, | |
steps: false | |
}, | |
bars: { | |
show: false, | |
lineWidth: 2, // in pixels | |
barWidth: 1, // in units of the x axis | |
fill: true, | |
fillColor: null, | |
align: "left", // or "center" | |
horizontal: false | |
}, | |
shadowSize: 3 | |
}, | |
grid: { | |
show: true, | |
aboveData: false, | |
color: "#545454", // primary color used for outline and labels | |
backgroundColor: null, // null for transparent, else color | |
borderColor: null, // set if different from the grid color | |
tickColor: null, // color for the ticks, e.g. "rgba(0,0,0,0.15)" | |
labelMargin: 5, // in pixels | |
axisMargin: 8, // in pixels | |
borderWidth: 2, // in pixels | |
minBorderMargin: null, // in pixels, null means taken from points radius | |
markings: null, // array of ranges or fn: axes -> array of ranges | |
markingsColor: "#f4f4f4", | |
markingsLineWidth: 2, | |
// interactive stuff | |
clickable: false, | |
hoverable: false, | |
autoHighlight: true, // highlight in case mouse is near | |
mouseActiveRadius: 10 // how far the mouse can be away to activate an item | |
}, | |
hooks: {} | |
}, | |
canvas = null, // the canvas for the plot itself | |
overlay = null, // canvas for interactive stuff on top of plot | |
eventHolder = null, // jQuery object that events should be bound to | |
ctx = null, octx = null, | |
xaxes = [], yaxes = [], | |
plotOffset = { left: 0, right: 0, top: 0, bottom: 0}, | |
canvasWidth = 0, canvasHeight = 0, | |
plotWidth = 0, plotHeight = 0, | |
hooks = { | |
processOptions: [], | |
processRawData: [], | |
processDatapoints: [], | |
drawSeries: [], | |
draw: [], | |
bindEvents: [], | |
drawOverlay: [], | |
shutdown: [] | |
}, | |
plot = this; | |
// public functions | |
plot.setData = setData; | |
plot.setupGrid = setupGrid; | |
plot.draw = draw; | |
plot.getPlaceholder = function() { return placeholder; }; | |
plot.getCanvas = function() { return canvas; }; | |
plot.getPlotOffset = function() { return plotOffset; }; | |
plot.width = function () { return plotWidth; }; | |
plot.height = function () { return plotHeight; }; | |
plot.offset = function () { | |
var o = eventHolder.offset(); | |
o.left += plotOffset.left; | |
o.top += plotOffset.top; | |
return o; | |
}; | |
plot.getData = function () { return series; }; | |
plot.getAxes = function () { | |
var res = {}, i; | |
$.each(xaxes.concat(yaxes), function (_, axis) { | |
if (axis) | |
res[axis.direction + (axis.n != 1 ? axis.n : "") + "axis"] = axis; | |
}); | |
return res; | |
}; | |
plot.getXAxes = function () { return xaxes; }; | |
plot.getYAxes = function () { return yaxes; }; | |
plot.c2p = canvasToAxisCoords; | |
plot.p2c = axisToCanvasCoords; | |
plot.getOptions = function () { return options; }; | |
plot.highlight = highlight; | |
plot.unhighlight = unhighlight; | |
plot.triggerRedrawOverlay = triggerRedrawOverlay; | |
plot.pointOffset = function(point) { | |
return { | |
left: parseInt(xaxes[axisNumber(point, "x") - 1].p2c(+point.x) + plotOffset.left), | |
top: parseInt(yaxes[axisNumber(point, "y") - 1].p2c(+point.y) + plotOffset.top) | |
}; | |
}; | |
plot.shutdown = shutdown; | |
plot.resize = function () { | |
getCanvasDimensions(); | |
resizeCanvas(canvas); | |
resizeCanvas(overlay); | |
}; | |
// public attributes | |
plot.hooks = hooks; | |
// initialize | |
initPlugins(plot); | |
parseOptions(options_); | |
setupCanvases(); | |
setData(data_); | |
setupGrid(); | |
draw(); | |
bindEvents(); | |
function executeHooks(hook, args) { | |
args = [plot].concat(args); | |
for (var i = 0; i < hook.length; ++i) | |
hook[i].apply(this, args); | |
} | |
function initPlugins() { | |
for (var i = 0; i < plugins.length; ++i) { | |
var p = plugins[i]; | |
p.init(plot); | |
if (p.options) | |
$.extend(true, options, p.options); | |
} | |
} | |
function parseOptions(opts) { | |
var i; | |
$.extend(true, options, opts); | |
if (options.xaxis.color == null) | |
options.xaxis.color = options.grid.color; | |
if (options.yaxis.color == null) | |
options.yaxis.color = options.grid.color; | |
if (options.xaxis.tickColor == null) // backwards-compatibility | |
options.xaxis.tickColor = options.grid.tickColor; | |
if (options.yaxis.tickColor == null) // backwards-compatibility | |
options.yaxis.tickColor = options.grid.tickColor; | |
if (options.grid.borderColor == null) | |
options.grid.borderColor = options.grid.color; | |
if (options.grid.tickColor == null) | |
options.grid.tickColor = $.color.parse(options.grid.color).scale('a', 0.22).toString(); | |
// fill in defaults in axes, copy at least always the | |
// first as the rest of the code assumes it'll be there | |
for (i = 0; i < Math.max(1, options.xaxes.length); ++i) | |
options.xaxes[i] = $.extend(true, {}, options.xaxis, options.xaxes[i]); | |
for (i = 0; i < Math.max(1, options.yaxes.length); ++i) | |
options.yaxes[i] = $.extend(true, {}, options.yaxis, options.yaxes[i]); | |
// backwards compatibility, to be removed in future | |
if (options.xaxis.noTicks && options.xaxis.ticks == null) | |
options.xaxis.ticks = options.xaxis.noTicks; | |
if (options.yaxis.noTicks && options.yaxis.ticks == null) | |
options.yaxis.ticks = options.yaxis.noTicks; | |
if (options.x2axis) { | |
options.xaxes[1] = $.extend(true, {}, options.xaxis, options.x2axis); | |
options.xaxes[1].position = "top"; | |
} | |
if (options.y2axis) { | |
options.yaxes[1] = $.extend(true, {}, options.yaxis, options.y2axis); | |
options.yaxes[1].position = "right"; | |
} | |
if (options.grid.coloredAreas) | |
options.grid.markings = options.grid.coloredAreas; | |
if (options.grid.coloredAreasColor) | |
options.grid.markingsColor = options.grid.coloredAreasColor; | |
if (options.lines) | |
$.extend(true, options.series.lines, options.lines); | |
if (options.points) | |
$.extend(true, options.series.points, options.points); | |
if (options.bars) | |
$.extend(true, options.series.bars, options.bars); | |
if (options.shadowSize != null) | |
options.series.shadowSize = options.shadowSize; | |
// save options on axes for future reference | |
for (i = 0; i < options.xaxes.length; ++i) | |
getOrCreateAxis(xaxes, i + 1).options = options.xaxes[i]; | |
for (i = 0; i < options.yaxes.length; ++i) | |
getOrCreateAxis(yaxes, i + 1).options = options.yaxes[i]; | |
// add hooks from options | |
for (var n in hooks) | |
if (options.hooks[n] && options.hooks[n].length) | |
hooks[n] = hooks[n].concat(options.hooks[n]); | |
executeHooks(hooks.processOptions, [options]); | |
} | |
function setData(d) { | |
series = parseData(d); | |
fillInSeriesOptions(); | |
processData(); | |
} | |
function parseData(d) { | |
var res = []; | |
for (var i = 0; i < d.length; ++i) { | |
var s = $.extend(true, {}, options.series); | |
if (d[i].data != null) { | |
s.data = d[i].data; // move the data instead of deep-copy | |
delete d[i].data; | |
$.extend(true, s, d[i]); | |
d[i].data = s.data; | |
} | |
else | |
s.data = d[i]; | |
res.push(s); | |
} | |
return res; | |
} | |
function axisNumber(obj, coord) { | |
var a = obj[coord + "axis"]; | |
if (typeof a == "object") // if we got a real axis, extract number | |
a = a.n; | |
if (typeof a != "number") | |
a = 1; // default to first axis | |
return a; | |
} | |
function allAxes() { | |
// return flat array without annoying null entries | |
return $.grep(xaxes.concat(yaxes), function (a) { return a; }); | |
} | |
function canvasToAxisCoords(pos) { | |
// return an object with x/y corresponding to all used axes | |
var res = {}, i, axis; | |
for (i = 0; i < xaxes.length; ++i) { | |
axis = xaxes[i]; | |
if (axis && axis.used) | |
res["x" + axis.n] = axis.c2p(pos.left); | |
} | |
for (i = 0; i < yaxes.length; ++i) { | |
axis = yaxes[i]; | |
if (axis && axis.used) | |
res["y" + axis.n] = axis.c2p(pos.top); | |
} | |
if (res.x1 !== undefined) | |
res.x = res.x1; | |
if (res.y1 !== undefined) | |
res.y = res.y1; | |
return res; | |
} | |
function axisToCanvasCoords(pos) { | |
// get canvas coords from the first pair of x/y found in pos | |
var res = {}, i, axis, key; | |
for (i = 0; i < xaxes.length; ++i) { | |
axis = xaxes[i]; | |
if (axis && axis.used) { | |
key = "x" + axis.n; | |
if (pos[key] == null && axis.n == 1) | |
key = "x"; | |
if (pos[key] != null) { | |
res.left = axis.p2c(pos[key]); | |
break; | |
} | |
} | |
} | |
for (i = 0; i < yaxes.length; ++i) { | |
axis = yaxes[i]; | |
if (axis && axis.used) { | |
key = "y" + axis.n; | |
if (pos[key] == null && axis.n == 1) | |
key = "y"; | |
if (pos[key] != null) { | |
res.top = axis.p2c(pos[key]); | |
break; | |
} | |
} | |
} | |
return res; | |
} | |
function getOrCreateAxis(axes, number) { | |
if (!axes[number - 1]) | |
axes[number - 1] = { | |
n: number, // save the number for future reference | |
direction: axes == xaxes ? "x" : "y", | |
options: $.extend(true, {}, axes == xaxes ? options.xaxis : options.yaxis) | |
}; | |
return axes[number - 1]; | |
} | |
function fillInSeriesOptions() { | |
var i; | |
// collect what we already got of colors | |
var neededColors = series.length, | |
usedColors = [], | |
assignedColors = []; | |
for (i = 0; i < series.length; ++i) { | |
var sc = series[i].color; | |
if (sc != null) { | |
--neededColors; | |
if (typeof sc == "number") | |
assignedColors.push(sc); | |
else | |
usedColors.push($.color.parse(series[i].color)); | |
} | |
} | |
// we might need to generate more colors if higher indices | |
// are assigned | |
for (i = 0; i < assignedColors.length; ++i) { | |
neededColors = Math.max(neededColors, assignedColors[i] + 1); | |
} | |
// produce colors as needed | |
var colors = [], variation = 0; | |
i = 0; | |
while (colors.length < neededColors) { | |
var c; | |
if (options.colors.length == i) // check degenerate case | |
c = $.color.make(100, 100, 100); | |
else | |
c = $.color.parse(options.colors[i]); | |
// vary color if needed | |
var sign = variation % 2 == 1 ? -1 : 1; | |
c.scale('rgb', 1 + sign * Math.ceil(variation / 2) * 0.2) | |
// FIXME: if we're getting to close to something else, | |
// we should probably skip this one | |
colors.push(c); | |
++i; | |
if (i >= options.colors.length) { | |
i = 0; | |
++variation; | |
} | |
} | |
// fill in the options | |
var colori = 0, s; | |
for (i = 0; i < series.length; ++i) { | |
s = series[i]; | |
// assign colors | |
if (s.color == null) { | |
s.color = colors[colori].toString(); | |
++colori; | |
} | |
else if (typeof s.color == "number") | |
s.color = colors[s.color].toString(); | |
// turn on lines automatically in case nothing is set | |
if (s.lines.show == null) { | |
var v, show = true; | |
for (v in s) | |
if (s[v] && s[v].show) { | |
show = false; | |
break; | |
} | |
if (show) | |
s.lines.show = true; | |
} | |
// setup axes | |
s.xaxis = getOrCreateAxis(xaxes, axisNumber(s, "x")); | |
s.yaxis = getOrCreateAxis(yaxes, axisNumber(s, "y")); | |
} | |
} | |
function processData() { | |
var topSentry = Number.POSITIVE_INFINITY, | |
bottomSentry = Number.NEGATIVE_INFINITY, | |
fakeInfinity = Number.MAX_VALUE, | |
i, j, k, m, length, | |
s, points, ps, x, y, axis, val, f, p; | |
function updateAxis(axis, min, max) { | |
if (min < axis.datamin && min != -fakeInfinity) | |
axis.datamin = min; | |
if (max > axis.datamax && max != fakeInfinity) | |
axis.datamax = max; | |
} | |
$.each(allAxes(), function (_, axis) { | |
// init axis | |
axis.datamin = topSentry; | |
axis.datamax = bottomSentry; | |
axis.used = false; | |
}); | |
for (i = 0; i < series.length; ++i) { | |
s = series[i]; | |
s.datapoints = { points: [] }; | |
executeHooks(hooks.processRawData, [ s, s.data, s.datapoints ]); | |
} | |
// first pass: clean and copy data | |
for (i = 0; i < series.length; ++i) { | |
s = series[i]; | |
var data = s.data, format = s.datapoints.format; | |
if (!format) { | |
format = []; | |
// find out how to copy | |
format.push({ x: true, number: true, required: true }); | |
format.push({ y: true, number: true, required: true }); | |
if (s.bars.show || (s.lines.show && s.lines.fill)) { | |
format.push({ y: true, number: true, required: false, defaultValue: 0 }); | |
if (s.bars.horizontal) { | |
delete format[format.length - 1].y; | |
format[format.length - 1].x = true; | |
} | |
} | |
s.datapoints.format = format; | |
} | |
if (s.datapoints.pointsize != null) | |
continue; // already filled in | |
s.datapoints.pointsize = format.length; | |
ps = s.datapoints.pointsize; | |
points = s.datapoints.points; | |
insertSteps = s.lines.show && s.lines.steps; | |
s.xaxis.used = s.yaxis.used = true; | |
for (j = k = 0; j < data.length; ++j, k += ps) { | |
p = data[j]; | |
var nullify = p == null; | |
if (!nullify) { | |
for (m = 0; m < ps; ++m) { | |
val = p[m]; | |
f = format[m]; | |
if (f) { | |
if (f.number && val != null) { | |
val = +val; // convert to number | |
if (isNaN(val)) | |
val = null; | |
else if (val == Infinity) | |
val = fakeInfinity; | |
else if (val == -Infinity) | |
val = -fakeInfinity; | |
} | |
if (val == null) { | |
if (f.required) | |
nullify = true; | |
if (f.defaultValue != null) | |
val = f.defaultValue; | |
} | |
} | |
points[k + m] = val; | |
} | |
} | |
if (nullify) { | |
for (m = 0; m < ps; ++m) { | |
val = points[k + m]; | |
if (val != null) { | |
f = format[m]; | |
// extract min/max info | |
if (f.x) | |
updateAxis(s.xaxis, val, val); | |
if (f.y) | |
updateAxis(s.yaxis, val, val); | |
} | |
points[k + m] = null; | |
} | |
} | |
else { | |
// a little bit of line specific stuff that | |
// perhaps shouldn't be here, but lacking | |
// better means... | |
if (insertSteps && k > 0 | |
&& points[k - ps] != null | |
&& points[k - ps] != points[k] | |
&& points[k - ps + 1] != points[k + 1]) { | |
// copy the point to make room for a middle point | |
for (m = 0; m < ps; ++m) | |
points[k + ps + m] = points[k + m]; | |
// middle point has same y | |
points[k + 1] = points[k - ps + 1]; | |
// we've added a point, better reflect that | |
k += ps; | |
} | |
} | |
} | |
} | |
// give the hooks a chance to run | |
for (i = 0; i < series.length; ++i) { | |
s = series[i]; | |
executeHooks(hooks.processDatapoints, [ s, s.datapoints]); | |
} | |
// second pass: find datamax/datamin for auto-scaling | |
for (i = 0; i < series.length; ++i) { | |
s = series[i]; | |
points = s.datapoints.points, | |
ps = s.datapoints.pointsize; | |
var xmin = topSentry, ymin = topSentry, | |
xmax = bottomSentry, ymax = bottomSentry; | |
for (j = 0; j < points.length; j += ps) { | |
if (points[j] == null) | |
continue; | |
for (m = 0; m < ps; ++m) { | |
val = points[j + m]; | |
f = format[m]; | |
if (!f || val == fakeInfinity || val == -fakeInfinity) | |
continue; | |
if (f.x) { | |
if (val < xmin) | |
xmin = val; | |
if (val > xmax) | |
xmax = val; | |
} | |
if (f.y) { | |
if (val < ymin) | |
ymin = val; | |
if (val > ymax) | |
ymax = val; | |
} | |
} | |
} | |
if (s.bars.show) { | |
// make sure we got room for the bar on the dancing floor | |
var delta = s.bars.align == "left" ? 0 : -s.bars.barWidth/2; | |
if (s.bars.horizontal) { | |
ymin += delta; | |
ymax += delta + s.bars.barWidth; | |
} | |
else { | |
xmin += delta; | |
xmax += delta + s.bars.barWidth; | |
} | |
} | |
updateAxis(s.xaxis, xmin, xmax); | |
updateAxis(s.yaxis, ymin, ymax); | |
} | |
$.each(allAxes(), function (_, axis) { | |
if (axis.datamin == topSentry) | |
axis.datamin = null; | |
if (axis.datamax == bottomSentry) | |
axis.datamax = null; | |
}); | |
} | |
function makeCanvas(skipPositioning, cls) { | |
var c = document.createElement('canvas'); | |
c.className = cls; | |
c.width = canvasWidth; | |
c.height = canvasHeight; | |
if (!skipPositioning) | |
$(c).css({ position: 'absolute', left: 0, top: 0 }); | |
$(c).appendTo(placeholder); | |
if (!c.getContext) // excanvas hack | |
c = window.G_vmlCanvasManager.initElement(c); | |
// used for resetting in case we get replotted | |
c.getContext("2d").save(); | |
return c; | |
} | |
function getCanvasDimensions() { | |
canvasWidth = placeholder.width(); | |
canvasHeight = placeholder.height(); | |
if (canvasWidth <= 0 || canvasHeight <= 0) | |
throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight; | |
} | |
function resizeCanvas(c) { | |
// resizing should reset the state (excanvas seems to be | |
// buggy though) | |
if (c.width != canvasWidth) | |
c.width = canvasWidth; | |
if (c.height != canvasHeight) | |
c.height = canvasHeight; | |
// so try to get back to the initial state (even if it's | |
// gone now, this should be safe according to the spec) | |
var cctx = c.getContext("2d"); | |
cctx.restore(); | |
// and save again | |
cctx.save(); | |
} | |
function setupCanvases() { | |
var reused, | |
existingCanvas = placeholder.children("canvas.base"), | |
existingOverlay = placeholder.children("canvas.overlay"); | |
if (existingCanvas.length == 0 || existingOverlay == 0) { | |
// init everything | |
placeholder.html(""); // make sure placeholder is clear | |
placeholder.css({ padding: 0 }); // padding messes up the positioning | |
if (placeholder.css("position") == 'static') | |
placeholder.css("position", "relative"); // for positioning labels and overlay | |
getCanvasDimensions(); | |
canvas = makeCanvas(true, "base"); | |
overlay = makeCanvas(false, "overlay"); // overlay canvas for interactive features | |
reused = false; | |
} | |
else { | |
// reuse existing elements | |
canvas = existingCanvas.get(0); | |
overlay = existingOverlay.get(0); | |
reused = true; | |
} | |
ctx = canvas.getContext("2d"); | |
octx = overlay.getContext("2d"); | |
// we include the canvas in the event holder too, because IE 7 | |
// sometimes has trouble with the stacking order | |
eventHolder = $([overlay, canvas]); | |
if (reused) { | |
// run shutdown in the old plot object | |
placeholder.data("plot").shutdown(); | |
// reset reused canvases | |
plot.resize(); | |
// make sure overlay pixels are cleared (canvas is cleared when we redraw) | |
octx.clearRect(0, 0, canvasWidth, canvasHeight); | |
// then whack any remaining obvious garbage left | |
eventHolder.unbind(); | |
placeholder.children().not([canvas, overlay]).remove(); | |
} | |
// save in case we get replotted | |
placeholder.data("plot", plot); | |
} | |
function bindEvents() { | |
// bind events | |
if (options.grid.hoverable) { | |
eventHolder.mousemove(onMouseMove); | |
eventHolder.mouseleave(onMouseLeave); | |
} | |
if (options.grid.clickable) | |
eventHolder.click(onClick); | |
executeHooks(hooks.bindEvents, [eventHolder]); | |
} | |
function shutdown() { | |
if (redrawTimeout) | |
clearTimeout(redrawTimeout); | |
eventHolder.unbind("mousemove", onMouseMove); | |
eventHolder.unbind("mouseleave", onMouseLeave); | |
eventHolder.unbind("click", onClick); | |
executeHooks(hooks.shutdown, [eventHolder]); | |
} | |
function setTransformationHelpers(axis) { | |
// set helper functions on the axis, assumes plot area | |
// has been computed already | |
function identity(x) { return x; } | |
var s, m, t = axis.options.transform || identity, | |
it = axis.options.inverseTransform; | |
// precompute how much the axis is scaling a point | |
// in canvas space | |
if (axis.direction == "x") { | |
s = axis.scale = plotWidth / Math.abs(t(axis.max) - t(axis.min)); | |
m = Math.min(t(axis.max), t(axis.min)); | |
} | |
else { | |
s = axis.scale = plotHeight / Math.abs(t(axis.max) - t(axis.min)); | |
s = -s; | |
m = Math.max(t(axis.max), t(axis.min)); | |
} | |
// data point to canvas coordinate | |
if (t == identity) // slight optimization | |
axis.p2c = function (p) { return (p - m) * s; }; | |
else | |
axis.p2c = function (p) { return (t(p) - m) * s; }; | |
// canvas coordinate to data point | |
if (!it) | |
axis.c2p = function (c) { return m + c / s; }; | |
else | |
axis.c2p = function (c) { return it(m + c / s); }; | |
} | |
function measureTickLabels(axis) { | |
var opts = axis.options, i, ticks = axis.ticks || [], labels = [], | |
l, w = opts.labelWidth, h = opts.labelHeight, dummyDiv; | |
function makeDummyDiv(labels, width) { | |
return $('<div style="position:absolute;top:-10000px;' + width + 'font-size:smaller">' + | |
'<div class="' + axis.direction + 'Axis ' + axis.direction + axis.n + 'Axis">' | |
+ labels.join("") + '</div></div>') | |
.appendTo(placeholder); | |
} | |
if (axis.direction == "x") { | |
// to avoid measuring the widths of the labels (it's slow), we | |
// construct fixed-size boxes and put the labels inside | |
// them, we don't need the exact figures and the | |
// fixed-size box content is easy to center | |
if (w == null) | |
w = Math.floor(canvasWidth / (ticks.length > 0 ? ticks.length : 1)); | |
// measure x label heights | |
if (h == null) { | |
labels = []; | |
for (i = 0; i < ticks.length; ++i) { | |
l = ticks[i].label; | |
if (l) | |
labels.push('<div class="tickLabel" style="float:left;width:' + w + 'px">' + l + '</div>'); | |
} | |
if (labels.length > 0) { | |
// stick them all in the same div and measure | |
// collective height | |
labels.push('<div style="clear:left"></div>'); | |
dummyDiv = makeDummyDiv(labels, "width:10000px;"); | |
h = dummyDiv.height(); | |
dummyDiv.remove(); | |
} | |
} | |
} | |
else if (w == null || h == null) { | |
// calculate y label dimensions | |
for (i = 0; i < ticks.length; ++i) { | |
l = ticks[i].label; | |
if (l) | |
labels.push('<div class="tickLabel">' + l + '</div>'); | |
} | |
if (labels.length > 0) { | |
dummyDiv = makeDummyDiv(labels, ""); | |
if (w == null) | |
w = dummyDiv.children().width(); | |
if (h == null) | |
h = dummyDiv.find("div.tickLabel").height(); | |
dummyDiv.remove(); | |
} | |
} | |
if (w == null) | |
w = 0; | |
if (h == null) | |
h = 0; | |
axis.labelWidth = w; | |
axis.labelHeight = h; | |
} | |
function allocateAxisBoxFirstPhase(axis) { | |
// find the bounding box of the axis by looking at label | |
// widths/heights and ticks, make room by diminishing the | |
// plotOffset | |
var lw = axis.labelWidth, | |
lh = axis.labelHeight, | |
pos = axis.options.position, | |
tickLength = axis.options.tickLength, | |
axismargin = options.grid.axisMargin, | |
padding = options.grid.labelMargin, | |
all = axis.direction == "x" ? xaxes : yaxes, | |
index; | |
// determine axis margin | |
var samePosition = $.grep(all, function (a) { | |
return a && a.options.position == pos && a.reserveSpace; | |
}); | |
if ($.inArray(axis, samePosition) == samePosition.length - 1) | |
axismargin = 0; // outermost | |
// determine tick length - if we're innermost, we can use "full" | |
if (tickLength == null) | |
tickLength = "full"; | |
var sameDirection = $.grep(all, function (a) { | |
return a && a.reserveSpace; | |
}); | |
var innermost = $.inArray(axis, sameDirection) == 0; | |
if (!innermost && tickLength == "full") | |
tickLength = 5; | |
if (!isNaN(+tickLength)) | |
padding += +tickLength; | |
// compute box | |
if (axis.direction == "x") { | |
lh += padding; | |
if (pos == "bottom") { | |
plotOffset.bottom += lh + axismargin; | |
axis.box = { top: canvasHeight - plotOffset.bottom, height: lh }; | |
} | |
else { | |
axis.box = { top: plotOffset.top + axismargin, height: lh }; | |
plotOffset.top += lh + axismargin; | |
} | |
} | |
else { | |
lw += padding; | |
if (pos == "left") { | |
axis.box = { left: plotOffset.left + axismargin, width: lw }; | |
plotOffset.left += lw + axismargin; | |
} | |
else { | |
plotOffset.right += lw + axismargin; | |
axis.box = { left: canvasWidth - plotOffset.right, width: lw }; | |
} | |
} | |
// save for future reference | |
axis.position = pos; | |
axis.tickLength = tickLength; | |
axis.box.padding = padding; | |
axis.innermost = innermost; | |
} | |
function allocateAxisBoxSecondPhase(axis) { | |
// set remaining bounding box coordinates | |
if (axis.direction == "x") { | |
axis.box.left = plotOffset.left; | |
axis.box.width = plotWidth; | |
} | |
else { | |
axis.box.top = plotOffset.top; | |
axis.box.height = plotHeight; | |
} | |
} | |
function setupGrid() { | |
var i, axes = allAxes(); | |
// first calculate the plot and axis box dimensions | |
$.each(axes, function (_, axis) { | |
axis.show = axis.options.show; | |
if (axis.show == null) | |
axis.show = axis.used; // by default an axis is visible if it's got data | |
axis.reserveSpace = axis.show || axis.options.reserveSpace; | |
setRange(axis); | |
}); | |
allocatedAxes = $.grep(axes, function (axis) { return axis.reserveSpace; }); | |
plotOffset.left = plotOffset.right = plotOffset.top = plotOffset.bottom = 0; | |
if (options.grid.show) { | |
$.each(allocatedAxes, function (_, axis) { | |
// make the ticks | |
setupTickGeneration(axis); | |
setTicks(axis); | |
snapRangeToTicks(axis, axis.ticks); | |
// find labelWidth/Height for axis | |
measureTickLabels(axis); | |
}); | |
// with all dimensions in house, we can compute the | |
// axis boxes, start from the outside (reverse order) | |
for (i = allocatedAxes.length - 1; i >= 0; --i) | |
allocateAxisBoxFirstPhase(allocatedAxes[i]); | |
// make sure we've got enough space for things that | |
// might stick out | |
var minMargin = options.grid.minBorderMargin; | |
if (minMargin == null) { | |
minMargin = 0; | |
for (i = 0; i < series.length; ++i) | |
minMargin = Math.max(minMargin, series[i].points.radius + series[i].points.lineWidth/2); | |
} | |
for (var a in plotOffset) { | |
plotOffset[a] += options.grid.borderWidth; | |
plotOffset[a] = Math.max(minMargin, plotOffset[a]); | |
} | |
} | |
plotWidth = canvasWidth - plotOffset.left - plotOffset.right; | |
plotHeight = canvasHeight - plotOffset.bottom - plotOffset.top; | |
// now we got the proper plotWidth/Height, we can compute the scaling | |
$.each(axes, function (_, axis) { | |
setTransformationHelpers(axis); | |
}); | |
if (options.grid.show) { | |
$.each(allocatedAxes, function (_, axis) { | |
allocateAxisBoxSecondPhase(axis); | |
}); | |
insertAxisLabels(); | |
} | |
insertLegend(); | |
} | |
function setRange(axis) { | |
var opts = axis.options, | |
min = +(opts.min != null ? opts.min : axis.datamin), | |
max = +(opts.max != null ? opts.max : axis.datamax), | |
delta = max - min; | |
if (delta == 0.0) { | |
// degenerate case | |
var widen = max == 0 ? 1 : 0.01; | |
if (opts.min == null) | |
min -= widen; | |
// always widen max if we couldn't widen min to ensure we | |
// don't fall into min == max which doesn't work | |
if (opts.max == null || opts.min != null) | |
max += widen; | |
} | |
else { | |
// consider autoscaling | |
var margin = opts.autoscaleMargin; | |
if (margin != null) { | |
if (opts.min == null) { | |
min -= delta * margin; | |
// make sure we don't go below zero if all values | |
// are positive | |
if (min < 0 && axis.datamin != null && axis.datamin >= 0) | |
min = 0; | |
} | |
if (opts.max == null) { | |
max += delta * margin; | |
if (max > 0 && axis.datamax != null && axis.datamax <= 0) | |
max = 0; | |
} | |
} | |
} | |
axis.min = min; | |
axis.max = max; | |
} | |
function setupTickGeneration(axis) { | |
var opts = axis.options; | |
// estimate number of ticks | |
var noTicks; | |
if (typeof opts.ticks == "number" && opts.ticks > 0) | |
noTicks = opts.ticks; | |
else | |
// heuristic based on the model a*sqrt(x) fitted to | |
// some data points that seemed reasonable | |
noTicks = 0.3 * Math.sqrt(axis.direction == "x" ? canvasWidth : canvasHeight); | |
var delta = (axis.max - axis.min) / noTicks, | |
size, generator, unit, formatter, i, magn, norm; | |
if (opts.mode == "time") { | |
// pretty handling of time | |
// map of app. size of time units in milliseconds | |
var timeUnitSize = { | |
"second": 1000, | |
"minute": 60 * 1000, | |
"hour": 60 * 60 * 1000, | |
"day": 24 * 60 * 60 * 1000, | |
"month": 30 * 24 * 60 * 60 * 1000, | |
"year": 365.2425 * 24 * 60 * 60 * 1000 | |
}; | |
// the allowed tick sizes, after 1 year we use | |
// an integer algorithm | |
var spec = [ | |
[1, "second"], [2, "second"], [5, "second"], [10, "second"], | |
[30, "second"], | |
[1, "minute"], [2, "minute"], [5, "minute"], [10, "minute"], | |
[30, "minute"], | |
[1, "hour"], [2, "hour"], [4, "hour"], | |
[8, "hour"], [12, "hour"], | |
[1, "day"], [2, "day"], [3, "day"], | |
[0.25, "month"], [0.5, "month"], [1, "month"], | |
[2, "month"], [3, "month"], [6, "month"], | |
[1, "year"] | |
]; | |
var minSize = 0; | |
if (opts.minTickSize != null) { | |
if (typeof opts.tickSize == "number") | |
minSize = opts.tickSize; | |
else | |
minSize = opts.minTickSize[0] * timeUnitSize[opts.minTickSize[1]]; | |
} | |
for (var i = 0; i < spec.length - 1; ++i) | |
if (delta < (spec[i][0] * timeUnitSize[spec[i][1]] | |
+ spec[i + 1][0] * timeUnitSize[spec[i + 1][1]]) / 2 | |
&& spec[i][0] * timeUnitSize[spec[i][1]] >= minSize) | |
break; | |
size = spec[i][0]; | |
unit = spec[i][1]; | |
// special-case the possibility of several years | |
if (unit == "year") { | |
magn = Math.pow(10, Math.floor(Math.log(delta / timeUnitSize.year) / Math.LN10)); | |
norm = (delta / timeUnitSize.year) / magn; | |
if (norm < 1.5) | |
size = 1; | |
else if (norm < 3) | |
size = 2; | |
else if (norm < 7.5) | |
size = 5; | |
else | |
size = 10; | |
size *= magn; | |
} | |
axis.tickSize = opts.tickSize || [size, unit]; | |
generator = function(axis) { | |
var ticks = [], | |
tickSize = axis.tickSize[0], unit = axis.tickSize[1], | |
d = new Date(axis.min); | |
var step = tickSize * timeUnitSize[unit]; | |
if (unit == "second") | |
d.setUTCSeconds(floorInBase(d.getUTCSeconds(), tickSize)); | |
if (unit == "minute") | |
d.setUTCMinutes(floorInBase(d.getUTCMinutes(), tickSize)); | |
if (unit == "hour") | |
d.setUTCHours(floorInBase(d.getUTCHours(), tickSize)); | |
if (unit == "month") | |
d.setUTCMonth(floorInBase(d.getUTCMonth(), tickSize)); | |
if (unit == "year") | |
d.setUTCFullYear(floorInBase(d.getUTCFullYear(), tickSize)); | |
// reset smaller components | |
d.setUTCMilliseconds(0); | |
if (step >= timeUnitSize.minute) | |
d.setUTCSeconds(0); | |
if (step >= timeUnitSize.hour) | |
d.setUTCMinutes(0); | |
if (step >= timeUnitSize.day) | |
d.setUTCHours(0); | |
if (step >= timeUnitSize.day * 4) | |
d.setUTCDate(1); | |
if (step >= timeUnitSize.year) | |
d.setUTCMonth(0); | |
var carry = 0, v = Number.NaN, prev; | |
do { | |
prev = v; | |
v = d.getTime(); | |
ticks.push(v); | |
if (unit == "month") { | |
if (tickSize < 1) { | |
// a bit complicated - we'll divide the month | |
// up but we need to take care of fractions | |
// so we don't end up in the middle of a day | |
d.setUTCDate(1); | |
var start = d.getTime(); | |
d.setUTCMonth(d.getUTCMonth() + 1); | |
var end = d.getTime(); | |
d.setTime(v + carry * timeUnitSize.hour + (end - start) * tickSize); | |
carry = d.getUTCHours(); | |
d.setUTCHours(0); | |
} | |
else | |
d.setUTCMonth(d.getUTCMonth() + tickSize); | |
} | |
else if (unit == "year") { | |
d.setUTCFullYear(d.getUTCFullYear() + tickSize); | |
} | |
else | |
d.setTime(v + step); | |
} while (v < axis.max && v != prev); | |
return ticks; | |
}; | |
formatter = function (v, axis) { | |
var d = new Date(v); | |
// first check global format | |
if (opts.timeformat != null) | |
return $.plot.formatDate(d, opts.timeformat, opts.monthNames); | |
var t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]]; | |
var span = axis.max - axis.min; | |
var suffix = (opts.twelveHourClock) ? " %p" : ""; | |
if (t < timeUnitSize.minute) | |
fmt = "%h:%M:%S" + suffix; | |
else if (t < timeUnitSize.day) { | |
if (span < 2 * timeUnitSize.day) | |
fmt = "%h:%M" + suffix; | |
else | |
fmt = "%b %d %h:%M" + suffix; | |
} | |
else if (t < timeUnitSize.month) | |
fmt = "%b %d"; | |
else if (t < timeUnitSize.year) { | |
if (span < timeUnitSize.year) | |
fmt = "%b"; | |
else | |
fmt = "%b %y"; | |
} | |
else | |
fmt = "%y"; | |
return $.plot.formatDate(d, fmt, opts.monthNames); | |
}; | |
} | |
else { | |
// pretty rounding of base-10 numbers | |
var maxDec = opts.tickDecimals; | |
var dec = -Math.floor(Math.log(delta) / Math.LN10); | |
if (maxDec != null && dec > maxDec) | |
dec = maxDec; | |
magn = Math.pow(10, -dec); | |
norm = delta / magn; // norm is between 1.0 and 10.0 | |
if (norm < 1.5) | |
size = 1; | |
else if (norm < 3) { | |
size = 2; | |
// special case for 2.5, requires an extra decimal | |
if (norm > 2.25 && (maxDec == null || dec + 1 <= maxDec)) { | |
size = 2.5; | |
++dec; | |
} | |
} | |
else if (norm < 7.5) | |
size = 5; | |
else | |
size = 10; | |
size *= magn; | |
if (opts.minTickSize != null && size < opts.minTickSize) | |
size = opts.minTickSize; | |
axis.tickDecimals = Math.max(0, maxDec != null ? maxDec : dec); | |
axis.tickSize = opts.tickSize || size; | |
generator = function (axis) { | |
var ticks = []; | |
// spew out all possible ticks | |
var start = floorInBase(axis.min, axis.tickSize), | |
i = 0, v = Number.NaN, prev; | |
do { | |
prev = v; | |
v = start + i * axis.tickSize; | |
ticks.push(v); | |
++i; | |
} while (v < axis.max && v != prev); | |
return ticks; | |
}; | |
formatter = function (v, axis) { | |
return v.toFixed(axis.tickDecimals); | |
}; | |
} | |
if (opts.alignTicksWithAxis != null) { | |
var otherAxis = (axis.direction == "x" ? xaxes : yaxes)[opts.alignTicksWithAxis - 1]; | |
if (otherAxis && otherAxis.used && otherAxis != axis) { | |
// consider snapping min/max to outermost nice ticks | |
var niceTicks = generator(axis); | |
if (niceTicks.length > 0) { | |
if (opts.min == null) | |
axis.min = Math.min(axis.min, niceTicks[0]); | |
if (opts.max == null && niceTicks.length > 1) | |
axis.max = Math.max(axis.max, niceTicks[niceTicks.length - 1]); | |
} | |
generator = function (axis) { | |
// copy ticks, scaled to this axis | |
var ticks = [], v, i; | |
for (i = 0; i < otherAxis.ticks.length; ++i) { | |
v = (otherAxis.ticks[i].v - otherAxis.min) / (otherAxis.max - otherAxis.min); | |
v = axis.min + v * (axis.max - axis.min); | |
ticks.push(v); | |
} | |
return ticks; | |
}; | |
// we might need an extra decimal since forced | |
// ticks don't necessarily fit naturally | |
if (axis.mode != "time" && opts.tickDecimals == null) { | |
var extraDec = Math.max(0, -Math.floor(Math.log(delta) / Math.LN10) + 1), | |
ts = generator(axis); | |
// only proceed if the tick interval rounded | |
// with an extra decimal doesn't give us a | |
// zero at end | |
if (!(ts.length > 1 && /\..*0$/.test((ts[1] - ts[0]).toFixed(extraDec)))) | |
axis.tickDecimals = extraDec; | |
} | |
} | |
} | |
axis.tickGenerator = generator; | |
if ($.isFunction(opts.tickFormatter)) | |
axis.tickFormatter = function (v, axis) { return "" + opts.tickFormatter(v, axis); }; | |
else | |
axis.tickFormatter = formatter; | |
} | |
function setTicks(axis) { | |
var oticks = axis.options.ticks, ticks = []; | |
if (oticks == null || (typeof oticks == "number" && oticks > 0)) | |
ticks = axis.tickGenerator(axis); | |
else if (oticks) { | |
if ($.isFunction(oticks)) | |
// generate the ticks | |
ticks = oticks({ min: axis.min, max: axis.max }); | |
else | |
ticks = oticks; | |
} | |
// clean up/labelify the supplied ticks, copy them over | |
var i, v; | |
axis.ticks = []; | |
for (i = 0; i < ticks.length; ++i) { | |
var label = null; | |
var t = ticks[i]; | |
if (typeof t == "object") { | |
v = +t[0]; | |
if (t.length > 1) | |
label = t[1]; | |
} | |
else | |
v = +t; | |
if (label == null) | |
label = axis.tickFormatter(v, axis); | |
if (!isNaN(v)) | |
axis.ticks.push({ v: v, label: label }); | |
} | |
} | |
function snapRangeToTicks(axis, ticks) { | |
if (axis.options.autoscaleMargin && ticks.length > 0) { | |
// snap to ticks | |
if (axis.options.min == null) | |
axis.min = Math.min(axis.min, ticks[0].v); | |
if (axis.options.max == null && ticks.length > 1) | |
axis.max = Math.max(axis.max, ticks[ticks.length - 1].v); | |
} | |
} | |
function draw() { | |
ctx.clearRect(0, 0, canvasWidth, canvasHeight); | |
var grid = options.grid; | |
// draw background, if any | |
if (grid.show && grid.backgroundColor) | |
drawBackground(); | |
if (grid.show && !grid.aboveData) | |
drawGrid(); | |
for (var i = 0; i < series.length; ++i) { | |
executeHooks(hooks.drawSeries, [ctx, series[i]]); | |
drawSeries(series[i]); | |
} | |
executeHooks(hooks.draw, [ctx]); | |
if (grid.show && grid.aboveData) | |
drawGrid(); | |
} | |
function extractRange(ranges, coord) { | |
var axis, from, to, key, axes = allAxes(); | |
for (i = 0; i < axes.length; ++i) { | |
axis = axes[i]; | |
if (axis.direction == coord) { | |
key = coord + axis.n + "axis"; | |
if (!ranges[key] && axis.n == 1) | |
key = coord + "axis"; // support x1axis as xaxis | |
if (ranges[key]) { | |
from = ranges[key].from; | |
to = ranges[key].to; | |
break; | |
} | |
} | |
} | |
// backwards-compat stuff - to be removed in future | |
if (!ranges[key]) { | |
axis = coord == "x" ? xaxes[0] : yaxes[0]; | |
from = ranges[coord + "1"]; | |
to = ranges[coord + "2"]; | |
} | |
// auto-reverse as an added bonus | |
if (from != null && to != null && from > to) { | |
var tmp = from; | |
from = to; | |
to = tmp; | |
} | |
return { from: from, to: to, axis: axis }; | |
} | |
function drawBackground() { | |
ctx.save(); | |
ctx.translate(plotOffset.left, plotOffset.top); | |
ctx.fillStyle = getColorOrGradient(options.grid.backgroundColor, plotHeight, 0, "rgba(255, 255, 255, 0)"); | |
ctx.fillRect(0, 0, plotWidth, plotHeight); | |
ctx.restore(); | |
} | |
function drawGrid() { | |
var i; | |
ctx.save(); | |
ctx.translate(plotOffset.left, plotOffset.top); | |
// draw markings | |
var markings = options.grid.markings; | |
if (markings) { | |
if ($.isFunction(markings)) { | |
var axes = plot.getAxes(); | |
// xmin etc. is backwards compatibility, to be | |
// removed in the future | |
axes.xmin = axes.xaxis.min; | |
axes.xmax = axes.xaxis.max; | |
axes.ymin = axes.yaxis.min; | |
axes.ymax = axes.yaxis.max; | |
markings = markings(axes); | |
} | |
for (i = 0; i < markings.length; ++i) { | |
var m = markings[i], | |
xrange = extractRange(m, "x"), | |
yrange = extractRange(m, "y"); | |
// fill in missing | |
if (xrange.from == null) | |
xrange.from = xrange.axis.min; | |
if (xrange.to == null) | |
xrange.to = xrange.axis.max; | |
if (yrange.from == null) | |
yrange.from = yrange.axis.min; | |
if (yrange.to == null) | |
yrange.to = yrange.axis.max; | |
// clip | |
if (xrange.to < xrange.axis.min || xrange.from > xrange.axis.max || | |
yrange.to < yrange.axis.min || yrange.from > yrange.axis.max) | |
continue; | |
xrange.from = Math.max(xrange.from, xrange.axis.min); | |
xrange.to = Math.min(xrange.to, xrange.axis.max); | |
yrange.from = Math.max(yrange.from, yrange.axis.min); | |
yrange.to = Math.min(yrange.to, yrange.axis.max); | |
if (xrange.from == xrange.to && yrange.from == yrange.to) | |
continue; | |
// then draw | |
xrange.from = xrange.axis.p2c(xrange.from); | |
xrange.to = xrange.axis.p2c(xrange.to); | |
yrange.from = yrange.axis.p2c(yrange.from); | |
yrange.to = yrange.axis.p2c(yrange.to); | |
if (xrange.from == xrange.to || yrange.from == yrange.to) { | |
// draw line | |
ctx.beginPath(); | |
ctx.strokeStyle = m.color || options.grid.markingsColor; | |
ctx.lineWidth = m.lineWidth || options.grid.markingsLineWidth; | |
ctx.moveTo(xrange.from, yrange.from); | |
ctx.lineTo(xrange.to, yrange.to); | |
ctx.stroke(); | |
} | |
else { | |
// fill area | |
ctx.fillStyle = m.color || options.grid.markingsColor; | |
ctx.fillRect(xrange.from, yrange.to, | |
xrange.to - xrange.from, | |
yrange.from - yrange.to); | |
} | |
} | |
} | |
// draw the ticks | |
var axes = allAxes(), bw = options.grid.borderWidth; | |
for (var j = 0; j < axes.length; ++j) { | |
var axis = axes[j], box = axis.box, | |
t = axis.tickLength, x, y, xoff, yoff; | |
if (!axis.show || axis.ticks.length == 0) | |
continue | |
ctx.strokeStyle = axis.options.tickColor || $.color.parse(axis.options.color).scale('a', 0.22).toString(); | |
ctx.lineWidth = 1; | |
// find the edges | |
if (axis.direction == "x") { | |
x = 0; | |
if (t == "full") | |
y = (axis.position == "top" ? 0 : plotHeight); | |
else | |
y = box.top - plotOffset.top + (axis.position == "top" ? box.height : 0); | |
} | |
else { | |
y = 0; | |
if (t == "full") | |
x = (axis.position == "left" ? 0 : plotWidth); | |
else | |
x = box.left - plotOffset.left + (axis.position == "left" ? box.width : 0); | |
} | |
// draw tick bar | |
if (!axis.innermost) { | |
ctx.beginPath(); | |
xoff = yoff = 0; | |
if (axis.direction == "x") | |
xoff = plotWidth; | |
else | |
yoff = plotHeight; | |
if (ctx.lineWidth == 1) { | |
x = Math.floor(x) + 0.5; | |
y = Math.floor(y) + 0.5; | |
} | |
ctx.moveTo(x, y); | |
ctx.lineTo(x + xoff, y + yoff); | |
ctx.stroke(); | |
} | |
// draw ticks | |
ctx.beginPath(); | |
for (i = 0; i < axis.ticks.length; ++i) { | |
var v = axis.ticks[i].v; | |
xoff = yoff = 0; | |
if (v < axis.min || v > axis.max | |
// skip those lying on the axes if we got a border | |
|| (t == "full" && bw > 0 | |
&& (v == axis.min || v == axis.max))) | |
continue; | |
if (axis.direction == "x") { | |
x = axis.p2c(v); | |
yoff = t == "full" ? -plotHeight : t; | |
if (axis.position == "top") | |
yoff = -yoff; | |
} | |
else { | |
y = axis.p2c(v); | |
xoff = t == "full" ? -plotWidth : t; | |
if (axis.position == "left") | |
xoff = -xoff; | |
} | |
if (ctx.lineWidth == 1) { | |
if (axis.direction == "x") | |
x = Math.floor(x) + 0.5; | |
else | |
y = Math.floor(y) + 0.5; | |
} | |
ctx.moveTo(x, y); | |
ctx.lineTo(x + xoff, y + yoff); | |
} | |
ctx.stroke(); | |
} | |
// draw border | |
if (bw) { | |
ctx.lineWidth = bw; | |
ctx.strokeStyle = options.grid.borderColor; | |
ctx.strokeRect(-bw/2, -bw/2, plotWidth + bw, plotHeight + bw); | |
} | |
ctx.restore(); | |
} | |
function insertAxisLabels() { | |
placeholder.find(".tickLabels").remove(); | |
var html = ['<div class="tickLabels" style="font-size:smaller">']; | |
var axes = allAxes(); | |
for (var j = 0; j < axes.length; ++j) { | |
var axis = axes[j], box = axis.box; | |
if (!axis.show) | |
continue; | |
//debug: html.push('<div style="position:absolute;opacity:0.10;background-color:red;left:' + box.left + 'px;top:' + box.top + 'px;width:' + box.width + 'px;height:' + box.height + 'px"></div>') | |
html.push('<div class="' + axis.direction + 'Axis ' + axis.direction + axis.n + 'Axis" style="color:' + axis.options.color + '">'); | |
for (var i = 0; i < axis.ticks.length; ++i) { | |
var tick = axis.ticks[i]; | |
if (!tick.label || tick.v < axis.min || tick.v > axis.max) | |
continue; | |
var pos = {}, align; | |
if (axis.direction == "x") { | |
align = "center"; | |
pos.left = Math.round(plotOffset.left + axis.p2c(tick.v) - axis.labelWidth/2); | |
if (axis.position == "bottom") | |
pos.top = box.top + box.padding; | |
else | |
pos.bottom = canvasHeight - (box.top + box.height - box.padding); | |
} | |
else { | |
pos.top = Math.round(plotOffset.top + axis.p2c(tick.v) - axis.labelHeight/2); | |
if (axis.position == "left") { | |
pos.right = canvasWidth - (box.left + box.width - box.padding) | |
align = "right"; | |
} | |
else { | |
pos.left = box.left + box.padding; | |
align = "left"; | |
} | |
} | |
pos.width = axis.labelWidth; | |
var style = ["position:absolute", "text-align:" + align ]; | |
for (var a in pos) | |
style.push(a + ":" + pos[a] + "px") | |
html.push('<div class="tickLabel" style="' + style.join(';') + '">' + tick.label + '</div>'); | |
} | |
html.push('</div>'); | |
} | |
html.push('</div>'); | |
placeholder.append(html.join("")); | |
} | |
function drawSeries(series) { | |
if (series.lines.show) | |
drawSeriesLines(series); | |
if (series.bars.show) | |
drawSeriesBars(series); | |
if (series.points.show) | |
drawSeriesPoints(series); | |
} | |
function drawSeriesLines(series) { | |
function plotLine(datapoints, xoffset, yoffset, axisx, axisy) { | |
var points = datapoints.points, | |
ps = datapoints.pointsize, | |
prevx = null, prevy = null; | |
ctx.beginPath(); | |
for (var i = ps; i < points.length; i += ps) { | |
var x1 = points[i - ps], y1 = points[i - ps + 1], | |
x2 = points[i], y2 = points[i + 1]; | |
if (x1 == null || x2 == null) | |
continue; | |
// clip with ymin | |
if (y1 <= y2 && y1 < axisy.min) { | |
if (y2 < axisy.min) | |
continue; // line segment is outside | |
// compute new intersection point | |
x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; | |
y1 = axisy.min; | |
} | |
else if (y2 <= y1 && y2 < axisy.min) { | |
if (y1 < axisy.min) | |
continue; | |
x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; | |
y2 = axisy.min; | |
} | |
// clip with ymax | |
if (y1 >= y2 && y1 > axisy.max) { | |
if (y2 > axisy.max) | |
continue; | |
x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; | |
y1 = axisy.max; | |
} | |
else if (y2 >= y1 && y2 > axisy.max) { | |
if (y1 > axisy.max) | |
continue; | |
x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; | |
y2 = axisy.max; | |
} | |
// clip with xmin | |
if (x1 <= x2 && x1 < axisx.min) { | |
if (x2 < axisx.min) | |
continue; | |
y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; | |
x1 = axisx.min; | |
} | |
else if (x2 <= x1 && x2 < axisx.min) { | |
if (x1 < axisx.min) | |
continue; | |
y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; | |
x2 = axisx.min; | |
} | |
// clip with xmax | |
if (x1 >= x2 && x1 > axisx.max) { | |
if (x2 > axisx.max) | |
continue; | |
y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; | |
x1 = axisx.max; | |
} | |
else if (x2 >= x1 && x2 > axisx.max) { | |
if (x1 > axisx.max) | |
continue; | |
y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; | |
x2 = axisx.max; | |
} | |
if (x1 != prevx || y1 != prevy) | |
ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset); | |
prevx = x2; | |
prevy = y2; | |
ctx.lineTo(axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset); | |
} | |
ctx.stroke(); | |
} | |
function plotLineArea(datapoints, axisx, axisy) { | |
var points = datapoints.points, | |
ps = datapoints.pointsize, | |
bottom = Math.min(Math.max(0, axisy.min), axisy.max), | |
i = 0, top, areaOpen = false, | |
ypos = 1, segmentStart = 0, segmentEnd = 0; | |
// we process each segment in two turns, first forward | |
// direction to sketch out top, then once we hit the | |
// end we go backwards to sketch the bottom | |
while (true) { | |
if (ps > 0 && i > points.length + ps) | |
break; | |
i += ps; // ps is negative if going backwards | |
var x1 = points[i - ps], | |
y1 = points[i - ps + ypos], | |
x2 = points[i], y2 = points[i + ypos]; | |
if (areaOpen) { | |
if (ps > 0 && x1 != null && x2 == null) { | |
// at turning point | |
segmentEnd = i; | |
ps = -ps; | |
ypos = 2; | |
continue; | |
} | |
if (ps < 0 && i == segmentStart + ps) { | |
// done with the reverse sweep | |
ctx.fill(); | |
areaOpen = false; | |
ps = -ps; | |
ypos = 1; | |
i = segmentStart = segmentEnd + ps; | |
continue; | |
} | |
} | |
if (x1 == null || x2 == null) | |
continue; | |
// clip x values | |
// clip with xmin | |
if (x1 <= x2 && x1 < axisx.min) { | |
if (x2 < axisx.min) | |
continue; | |
y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; | |
x1 = axisx.min; | |
} | |
else if (x2 <= x1 && x2 < axisx.min) { | |
if (x1 < axisx.min) | |
continue; | |
y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; | |
x2 = axisx.min; | |
} | |
// clip with xmax | |
if (x1 >= x2 && x1 > axisx.max) { | |
if (x2 > axisx.max) | |
continue; | |
y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; | |
x1 = axisx.max; | |
} | |
else if (x2 >= x1 && x2 > axisx.max) { | |
if (x1 > axisx.max) | |
continue; | |
y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; | |
x2 = axisx.max; | |
} | |
if (!areaOpen) { | |
// open area | |
ctx.beginPath(); | |
ctx.moveTo(axisx.p2c(x1), axisy.p2c(bottom)); | |
areaOpen = true; | |
} | |
// now first check the case where both is outside | |
if (y1 >= axisy.max && y2 >= axisy.max) { | |
ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.max)); | |
ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.max)); | |
continue; | |
} | |
else if (y1 <= axisy.min && y2 <= axisy.min) { | |
ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min)); | |
ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.min)); | |
continue; | |
} | |
// else it's a bit more complicated, there might | |
// be a flat maxed out rectangle first, then a | |
// triangular cutout or reverse; to find these | |
// keep track of the current x values | |
var x1old = x1, x2old = x2; | |
// clip the y values, without shortcutting, we | |
// go through all cases in turn | |
// clip with ymin | |
if (y1 <= y2 && y1 < axisy.min && y2 >= axisy.min) { | |
x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; | |
y1 = axisy.min; | |
} | |
else if (y2 <= y1 && y2 < axisy.min && y1 >= axisy.min) { | |
x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; | |
y2 = axisy.min; | |
} | |
// clip with ymax | |
if (y1 >= y2 && y1 > axisy.max && y2 <= axisy.max) { | |
x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; | |
y1 = axisy.max; | |
} | |
else if (y2 >= y1 && y2 > axisy.max && y1 <= axisy.max) { | |
x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; | |
y2 = axisy.max; | |
} | |
// if the x value was changed we got a rectangle | |
// to fill | |
if (x1 != x1old) { | |
ctx.lineTo(axisx.p2c(x1old), axisy.p2c(y1)); | |
// it goes to (x1, y1), but we fill that below | |
} | |
// fill triangular section, this sometimes result | |
// in redundant points if (x1, y1) hasn't changed | |
// from previous line to, but we just ignore that | |
ctx.lineTo(axisx.p2c(x1), axisy.p2c(y1)); | |
ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2)); | |
// fill the other rectangle if it's there | |
if (x2 != x2old) { | |
ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2)); | |
ctx.lineTo(axisx.p2c(x2old), axisy.p2c(y2)); | |
} | |
} | |
} | |
ctx.save(); | |
ctx.translate(plotOffset.left, plotOffset.top); | |
ctx.lineJoin = "round"; | |
var lw = series.lines.lineWidth, | |
sw = series.shadowSize; | |
// FIXME: consider another form of shadow when filling is turned on | |
if (lw > 0 && sw > 0) { | |
// draw shadow as a thick and thin line with transparency | |
ctx.lineWidth = sw; | |
ctx.strokeStyle = "rgba(0,0,0,0.1)"; | |
// position shadow at angle from the mid of line | |
var angle = Math.PI/18; | |
plotLine(series.datapoints, Math.sin(angle) * (lw/2 + sw/2), Math.cos(angle) * (lw/2 + sw/2), series.xaxis, series.yaxis); | |
ctx.lineWidth = sw/2; | |
plotLine(series.datapoints, Math.sin(angle) * (lw/2 + sw/4), Math.cos(angle) * (lw/2 + sw/4), series.xaxis, series.yaxis); | |
} | |
ctx.lineWidth = lw; | |
ctx.strokeStyle = series.color; | |
var fillStyle = getFillStyle(series.lines, series.color, 0, plotHeight); | |
if (fillStyle) { | |
ctx.fillStyle = fillStyle; | |
plotLineArea(series.datapoints, series.xaxis, series.yaxis); | |
} | |
if (lw > 0) | |
plotLine(series.datapoints, 0, 0, series.xaxis, series.yaxis); | |
ctx.restore(); | |
} | |
function drawSeriesPoints(series) { | |
function plotPoints(datapoints, radius, fillStyle, offset, shadow, axisx, axisy, symbol) { | |
var points = datapoints.points, ps = datapoints.pointsize; | |
for (var i = 0; i < points.length; i += ps) { | |
var x = points[i], y = points[i + 1]; | |
if (x == null || x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) | |
continue; | |
ctx.beginPath(); | |
x = axisx.p2c(x); | |
y = axisy.p2c(y) + offset; | |
if (symbol == "circle") | |
ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false); | |
else | |
symbol(ctx, x, y, radius, shadow); | |
ctx.closePath(); | |
if (fillStyle) { | |
ctx.fillStyle = fillStyle; | |
ctx.fill(); | |
} | |
ctx.stroke(); | |
} | |
} | |
ctx.save(); | |
ctx.translate(plotOffset.left, plotOffset.top); | |
var lw = series.points.lineWidth, | |
sw = series.shadowSize, | |
radius = series.points.radius, | |
symbol = series.points.symbol; | |
if (lw > 0 && sw > 0) { | |
// draw shadow in two steps | |
var w = sw / 2; | |
ctx.lineWidth = w; | |
ctx.strokeStyle = "rgba(0,0,0,0.1)"; | |
plotPoints(series.datapoints, radius, null, w + w/2, true, | |
series.xaxis, series.yaxis, symbol); | |
ctx.strokeStyle = "rgba(0,0,0,0.2)"; | |
plotPoints(series.datapoints, radius, null, w/2, true, | |
series.xaxis, series.yaxis, symbol); | |
} | |
ctx.lineWidth = lw; | |
ctx.strokeStyle = series.color; | |
plotPoints(series.datapoints, radius, | |
getFillStyle(series.points, series.color), 0, false, | |
series.xaxis, series.yaxis, symbol); | |
ctx.restore(); | |
} | |
function drawBar(x, y, b, barLeft, barRight, offset, fillStyleCallback, axisx, axisy, c, horizontal, lineWidth) { | |
var left, right, bottom, top, | |
drawLeft, drawRight, drawTop, drawBottom, | |
tmp; | |
// in horizontal mode, we start the bar from the left | |
// instead of from the bottom so it appears to be | |
// horizontal rather than vertical | |
if (horizontal) { | |
drawBottom = drawRight = drawTop = true; | |
drawLeft = false; | |
left = b; | |
right = x; | |
top = y + barLeft; | |
bottom = y + barRight; | |
// account for negative bars | |
if (right < left) { | |
tmp = right; | |
right = left; | |
left = tmp; | |
drawLeft = true; | |
drawRight = false; | |
} | |
} | |
else { | |
drawLeft = drawRight = drawTop = true; | |
drawBottom = false; | |
left = x + barLeft; | |
right = x + barRight; | |
bottom = b; | |
top = y; | |
// account for negative bars | |
if (top < bottom) { | |
tmp = top; | |
top = bottom; | |
bottom = tmp; | |
drawBottom = true; | |
drawTop = false; | |
} | |
} | |
// clip | |
if (right < axisx.min || left > axisx.max || | |
top < axisy.min || bottom > axisy.max) | |
return; | |
if (left < axisx.min) { | |
left = axisx.min; | |
drawLeft = false; | |
} | |
if (right > axisx.max) { | |
right = axisx.max; | |
drawRight = false; | |
} | |
if (bottom < axisy.min) { | |
bottom = axisy.min; | |
drawBottom = false; | |
} | |
if (top > axisy.max) { | |
top = axisy.max; | |
drawTop = false; | |
} | |
left = axisx.p2c(left); | |
bottom = axisy.p2c(bottom); | |
right = axisx.p2c(right); | |
top = axisy.p2c(top); | |
// fill the bar | |
if (fillStyleCallback) { | |
c.beginPath(); | |
c.moveTo(left, bottom); | |
c.lineTo(left, top); | |
c.lineTo(right, top); | |
c.lineTo(right, bottom); | |
c.fillStyle = fillStyleCallback(bottom, top); | |
c.fill(); | |
} | |
// draw outline | |
if (lineWidth > 0 && (drawLeft || drawRight || drawTop || drawBottom)) { | |
c.beginPath(); | |
// FIXME: inline moveTo is buggy with excanvas | |
c.moveTo(left, bottom + offset); | |
if (drawLeft) | |
c.lineTo(left, top + offset); | |
else | |
c.moveTo(left, top + offset); | |
if (drawTop) | |
c.lineTo(right, top + offset); | |
else | |
c.moveTo(right, top + offset); | |
if (drawRight) | |
c.lineTo(right, bottom + offset); | |
else | |
c.moveTo(right, bottom + offset); | |
if (drawBottom) | |
c.lineTo(left, bottom + offset); | |
else | |
c.moveTo(left, bottom + offset); | |
c.stroke(); | |
} | |
} | |
function drawSeriesBars(series) { | |
function plotBars(datapoints, barLeft, barRight, offset, fillStyleCallback, axisx, axisy) { | |
var points = datapoints.points, ps = datapoints.pointsize; | |
for (var i = 0; i < points.length; i += ps) { | |
if (points[i] == null) | |
continue; | |
drawBar(points[i], points[i + 1], points[i + 2], barLeft, barRight, offset, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal, series.bars.lineWidth); | |
} | |
} | |
ctx.save(); | |
ctx.translate(plotOffset.left, plotOffset.top); | |
// FIXME: figure out a way to add shadows (for instance along the right edge) | |
ctx.lineWidth = series.bars.lineWidth; | |
ctx.strokeStyle = series.color; | |
var barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2; | |
var fillStyleCallback = series.bars.fill ? function (bottom, top) { return getFillStyle(series.bars, series.color, bottom, top); } : null; | |
plotBars(series.datapoints, barLeft, barLeft + series.bars.barWidth, 0, fillStyleCallback, series.xaxis, series.yaxis); | |
ctx.restore(); | |
} | |
function getFillStyle(filloptions, seriesColor, bottom, top) { | |
var fill = filloptions.fill; | |
if (!fill) | |
return null; | |
if (filloptions.fillColor) | |
return getColorOrGradient(filloptions.fillColor, bottom, top, seriesColor); | |
var c = $.color.parse(seriesColor); | |
c.a = typeof fill == "number" ? fill : 0.4; | |
c.normalize(); | |
return c.toString(); | |
} | |
function insertLegend() { | |
placeholder.find(".legend").remove(); | |
if (!options.legend.show) | |
return; | |
var fragments = [], rowStarted = false, | |
lf = options.legend.labelFormatter, s, label; | |
for (var i = 0; i < series.length; ++i) { | |
s = series[i]; | |
label = s.label; | |
if (!label) | |
continue; | |
if (i % options.legend.noColumns == 0) { | |
if (rowStarted) | |
fragments.push('</tr>'); | |
fragments.push('<tr>'); | |
rowStarted = true; | |
} | |
if (lf) | |
label = lf(label, s); | |
fragments.push( | |
'<td class="legendColorBox"><div style="border:1px solid ' + options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:4px;height:0;border:5px solid ' + s.color + ';overflow:hidden"></div></div></td>' + | |
'<td class="legendLabel">' + label + '</td>'); | |
} | |
if (rowStarted) | |
fragments.push('</tr>'); | |
if (fragments.length == 0) | |
return; | |
var table = '<table style="font-size:smaller;color:' + options.grid.color + '">' + fragments.join("") + '</table>'; | |
if (options.legend.container != null) | |
$(options.legend.container).html(table); | |
else { | |
var pos = "", | |
p = options.legend.position, | |
m = options.legend.margin; | |
if (m[0] == null) | |
m = [m, m]; | |
if (p.charAt(0) == "n") | |
pos += 'top:' + (m[1] + plotOffset.top) + 'px;'; | |
else if (p.charAt(0) == "s") | |
pos += 'bottom:' + (m[1] + plotOffset.bottom) + 'px;'; | |
if (p.charAt(1) == "e") | |
pos += 'right:' + (m[0] + plotOffset.right) + 'px;'; | |
else if (p.charAt(1) == "w") | |
pos += 'left:' + (m[0] + plotOffset.left) + 'px;'; | |
var legend = $('<div class="legend">' + table.replace('style="', 'style="position:absolute;' + pos +';') + '</div>').appendTo(placeholder); | |
if (options.legend.backgroundOpacity != 0.0) { | |
// put in the transparent background | |
// separately to avoid blended labels and | |
// label boxes | |
var c = options.legend.backgroundColor; | |
if (c == null) { | |
c = options.grid.backgroundColor; | |
if (c && typeof c == "string") | |
c = $.color.parse(c); | |
else | |
c = $.color.extract(legend, 'background-color'); | |
c.a = 1; | |
c = c.toString(); | |
} | |
var div = legend.children(); | |
$('<div style="position:absolute;width:' + div.width() + 'px;height:' + div.height() + 'px;' + pos +'background-color:' + c + ';"> </div>').prependTo(legend).css('opacity', options.legend.backgroundOpacity); | |
} | |
} | |
} | |
// interactive features | |
var highlights = [], | |
redrawTimeout = null; | |
// returns the data item the mouse is over, or null if none is found | |
function findNearbyItem(mouseX, mouseY, seriesFilter) { | |
var maxDistance = options.grid.mouseActiveRadius, | |
smallestDistance = maxDistance * maxDistance + 1, | |
item = null, foundPoint = false, i, j; | |
for (i = series.length - 1; i >= 0; --i) { | |
if (!seriesFilter(series[i])) | |
continue; | |
var s = series[i], | |
axisx = s.xaxis, | |
axisy = s.yaxis, | |
points = s.datapoints.points, | |
ps = s.datapoints.pointsize, | |
mx = axisx.c2p(mouseX), // precompute some stuff to make the loop faster | |
my = axisy.c2p(mouseY), | |
maxx = maxDistance / axisx.scale, | |
maxy = maxDistance / axisy.scale; | |
// with inverse transforms, we can't use the maxx/maxy | |
// optimization, sadly | |
if (axisx.options.inverseTransform) | |
maxx = Number.MAX_VALUE; | |
if (axisy.options.inverseTransform) | |
maxy = Number.MAX_VALUE; | |
if (s.lines.show || s.points.show) { | |
for (j = 0; j < points.length; j += ps) { | |
var x = points[j], y = points[j + 1]; | |
if (x == null) | |
continue; | |
// For points and lines, the cursor must be within a | |
// certain distance to the data point | |
if (x - mx > maxx || x - mx < -maxx || | |
y - my > maxy || y - my < -maxy) | |
continue; | |
// We have to calculate distances in pixels, not in | |
// data units, because the scales of the axes may be different | |
var dx = Math.abs(axisx.p2c(x) - mouseX), | |
dy = Math.abs(axisy.p2c(y) - mouseY), | |
dist = dx * dx + dy * dy; // we save the sqrt | |
// use <= to ensure last point takes precedence | |
// (last generally means on top of) | |
if (dist < smallestDistance) { | |
smallestDistance = dist; | |
item = [i, j / ps]; | |
} | |
} | |
} | |
if (s.bars.show && !item) { // no other point can be nearby | |
var barLeft = s.bars.align == "left" ? 0 : -s.bars.barWidth/2, | |
barRight = barLeft + s.bars.barWidth; | |
for (j = 0; j < points.length; j += ps) { | |
var x = points[j], y = points[j + 1], b = points[j + 2]; | |
if (x == null) | |
continue; | |
// for a bar graph, the cursor must be inside the bar | |
if (series[i].bars.horizontal ? | |
(mx <= Math.max(b, x) && mx >= Math.min(b, x) && | |
my >= y + barLeft && my <= y + barRight) : | |
(mx >= x + barLeft && mx <= x + barRight && | |
my >= Math.min(b, y) && my <= Math.max(b, y))) | |
item = [i, j / ps]; | |
} | |
} | |
} | |
if (item) { | |
i = item[0]; | |
j = item[1]; | |
ps = series[i].datapoints.pointsize; | |
return { datapoint: series[i].datapoints.points.slice(j * ps, (j + 1) * ps), | |
dataIndex: j, | |
series: series[i], | |
seriesIndex: i }; | |
} | |
return null; | |
} | |
function onMouseMove(e) { | |
if (options.grid.hoverable) | |
triggerClickHoverEvent("plothover", e, | |
function (s) { return s["hoverable"] != false; }); | |
} | |
function onMouseLeave(e) { | |
if (options.grid.hoverable) | |
triggerClickHoverEvent("plothover", e, | |
function (s) { return false; }); | |
} | |
function onClick(e) { | |
triggerClickHoverEvent("plotclick", e, | |
function (s) { return s["clickable"] != false; }); | |
} | |
// trigger click or hover event (they send the same parameters | |
// so we share their code) | |
function triggerClickHoverEvent(eventname, event, seriesFilter) { | |
var offset = eventHolder.offset(), | |
canvasX = event.pageX - offset.left - plotOffset.left, | |
canvasY = event.pageY - offset.top - plotOffset.top, | |
pos = canvasToAxisCoords({ left: canvasX, top: canvasY }); | |
pos.pageX = event.pageX; | |
pos.pageY = event.pageY; | |
var item = findNearbyItem(canvasX, canvasY, seriesFilter); | |
if (item) { | |
// fill in mouse pos for any listeners out there | |
item.pageX = parseInt(item.series.xaxis.p2c(item.datapoint[0]) + offset.left + plotOffset.left); | |
item.pageY = parseInt(item.series.yaxis.p2c(item.datapoint[1]) + offset.top + plotOffset.top); | |
} | |
if (options.grid.autoHighlight) { | |
// clear auto-highlights | |
for (var i = 0; i < highlights.length; ++i) { | |
var h = highlights[i]; | |
if (h.auto == eventname && | |
!(item && h.series == item.series && | |
h.point[0] == item.datapoint[0] && | |
h.point[1] == item.datapoint[1])) | |
unhighlight(h.series, h.point); | |
} | |
if (item) | |
highlight(item.series, item.datapoint, eventname); | |
} | |
placeholder.trigger(eventname, [ pos, item ]); | |
} | |
function triggerRedrawOverlay() { | |
if (!redrawTimeout) | |
redrawTimeout = setTimeout(drawOverlay, 30); | |
} | |
function drawOverlay() { | |
redrawTimeout = null; | |
// draw highlights | |
octx.save(); | |
octx.clearRect(0, 0, canvasWidth, canvasHeight); | |
octx.translate(plotOffset.left, plotOffset.top); | |
var i, hi; | |
for (i = 0; i < highlights.length; ++i) { | |
hi = highlights[i]; | |
if (hi.series.bars.show) | |
drawBarHighlight(hi.series, hi.point); | |
else | |
drawPointHighlight(hi.series, hi.point); | |
} | |
octx.restore(); | |
executeHooks(hooks.drawOverlay, [octx]); | |
} | |
function highlight(s, point, auto) { | |
if (typeof s == "number") | |
s = series[s]; | |
if (typeof point == "number") { | |
var ps = s.datapoints.pointsize; | |
point = s.datapoints.points.slice(ps * point, ps * (point + 1)); | |
} | |
var i = indexOfHighlight(s, point); | |
if (i == -1) { | |
highlights.push({ series: s, point: point, auto: auto }); | |
triggerRedrawOverlay(); | |
} | |
else if (!auto) | |
highlights[i].auto = false; | |
} | |
function unhighlight(s, point) { | |
if (s == null && point == null) { | |
highlights = []; | |
triggerRedrawOverlay(); | |
} | |
if (typeof s == "number") | |
s = series[s]; | |
if (typeof point == "number") | |
point = s.data[point]; | |
var i = indexOfHighlight(s, point); | |
if (i != -1) { | |
highlights.splice(i, 1); | |
triggerRedrawOverlay(); | |
} | |
} | |
function indexOfHighlight(s, p) { | |
for (var i = 0; i < highlights.length; ++i) { | |
var h = highlights[i]; | |
if (h.series == s && h.point[0] == p[0] | |
&& h.point[1] == p[1]) | |
return i; | |
} | |
return -1; | |
} | |
function drawPointHighlight(series, point) { | |
var x = point[0], y = point[1], | |
axisx = series.xaxis, axisy = series.yaxis; | |
if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) | |
return; | |
var pointRadius = series.points.radius + series.points.lineWidth / 2; | |
octx.lineWidth = pointRadius; | |
octx.strokeStyle = $.color.parse(series.color).scale('a', 0.5).toString(); | |
var radius = 1.5 * pointRadius, | |
x = axisx.p2c(x), | |
y = axisy.p2c(y); | |
octx.beginPath(); | |
if (series.points.symbol == "circle") | |
octx.arc(x, y, radius, 0, 2 * Math.PI, false); | |
else | |
series.points.symbol(octx, x, y, radius, false); | |
octx.closePath(); | |
octx.stroke(); | |
} | |
function drawBarHighlight(series, point) { | |
octx.lineWidth = series.bars.lineWidth; | |
octx.strokeStyle = $.color.parse(series.color).scale('a', 0.5).toString(); | |
var fillStyle = $.color.parse(series.color).scale('a', 0.5).toString(); | |
var barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2; | |
drawBar(point[0], point[1], point[2] || 0, barLeft, barLeft + series.bars.barWidth, | |
0, function () { return fillStyle; }, series.xaxis, series.yaxis, octx, series.bars.horizontal, series.bars.lineWidth); | |
} | |
function getColorOrGradient(spec, bottom, top, defaultColor) { | |
if (typeof spec == "string") | |
return spec; | |
else { | |
// assume this is a gradient spec; IE currently only | |
// supports a simple vertical gradient properly, so that's | |
// what we support too | |
var gradient = ctx.createLinearGradient(0, top, 0, bottom); | |
for (var i = 0, l = spec.colors.length; i < l; ++i) { | |
var c = spec.colors[i]; | |
if (typeof c != "string") { | |
var co = $.color.parse(defaultColor); | |
if (c.brightness != null) | |
co = co.scale('rgb', c.brightness) | |
if (c.opacity != null) | |
co.a *= c.opacity; | |
c = co.toString(); | |
} | |
gradient.addColorStop(i / (l - 1), c); | |
} | |
return gradient; | |
} | |
} | |
} | |
$.plot = function(placeholder, data, options) { | |
//var t0 = new Date(); | |
var plot = new Plot($(placeholder), data, options, $.plot.plugins); | |
//(window.console ? console.log : alert)("time used (msecs): " + ((new Date()).getTime() - t0.getTime())); | |
return plot; | |
}; | |
$.plot.version = "0.7"; | |
$.plot.plugins = []; | |
// returns a string with the date d formatted according to fmt | |
$.plot.formatDate = function(d, fmt, monthNames) { | |
var leftPad = function(n) { | |
n = "" + n; | |
return n.length == 1 ? "0" + n : n; | |
}; | |
var r = []; | |
var escape = false, padNext = false; | |
var hours = d.getUTCHours(); | |
var isAM = hours < 12; | |
if (monthNames == null) | |
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; | |
if (fmt.search(/%p|%P/) != -1) { | |
if (hours > 12) { | |
hours = hours - 12; | |
} else if (hours == 0) { | |
hours = 12; | |
} | |
} | |
for (var i = 0; i < fmt.length; ++i) { | |
var c = fmt.charAt(i); | |
if (escape) { | |
switch (c) { | |
case 'h': c = "" + hours; break; | |
case 'H': c = leftPad(hours); break; | |
case 'M': c = leftPad(d.getUTCMinutes()); break; | |
case 'S': c = leftPad(d.getUTCSeconds()); break; | |
case 'd': c = "" + d.getUTCDate(); break; | |
case 'm': c = "" + (d.getUTCMonth() + 1); break; | |
case 'y': c = "" + d.getUTCFullYear(); break; | |
case 'b': c = "" + monthNames[d.getUTCMonth()]; break; | |
case 'p': c = (isAM) ? ("" + "am") : ("" + "pm"); break; | |
case 'P': c = (isAM) ? ("" + "AM") : ("" + "PM"); break; | |
case '0': c = ""; padNext = true; break; | |
} | |
if (c && padNext) { | |
c = leftPad(c); | |
padNext = false; | |
} | |
r.push(c); | |
if (!padNext) | |
escape = false; | |
} | |
else { | |
if (c == "%") | |
escape = true; | |
else | |
r.push(c); | |
} | |
} | |
return r.join(""); | |
}; | |
// round to nearby lower multiple of base | |
function floorInBase(n, base) { | |
return base * Math.floor(n / base); | |
} | |
})(jQuery); | |
import datetime | |
from pylons import config | |
from sqlalchemy import Table, select, func, and_ | |
import ckan.plugins as p | |
import ckan.model as model | |
cache_enabled = p.toolkit.asbool(config.get('ckanext.stats.cache_enabled', 'True')) | |
if cache_enabled: | |
from pylons import cache | |
our_cache = cache.get_cache('stats', type='dbm') | |
DATE_FORMAT = '%Y-%m-%d' | |
def table(name): | |
return Table(name, model.meta.metadata, autoload=True) | |
def datetime2date(datetime_): | |
return datetime.date(datetime_.year, datetime_.month, datetime_.day) | |
class Stats(object): | |
@classmethod | |
def top_rated_packages(cls, limit=10): | |
# NB Not using sqlalchemy as sqla 0.4 doesn't work using both group_by | |
# and apply_avg | |
package = table('package') | |
rating = table('rating') | |
sql = select([package.c.id, func.avg(rating.c.rating), func.count(rating.c.rating)], from_obj=[package.join(rating)]).\ | |
group_by(package.c.id).\ | |
order_by(func.avg(rating.c.rating).desc(), func.count(rating.c.rating).desc()).\ | |
limit(limit) | |
res_ids = model.Session.execute(sql).fetchall() | |
res_pkgs = [(model.Session.query(model.Package).get(unicode(pkg_id)), avg, num) for pkg_id, avg, num in res_ids] | |
return res_pkgs | |
@classmethod | |
def most_edited_packages(cls, limit=10): | |
package_revision = table('package_revision') | |
s = select([package_revision.c.id, func.count(package_revision.c.revision_id)]).\ | |
group_by(package_revision.c.id).\ | |
order_by(func.count(package_revision.c.revision_id).desc()).\ | |
limit(limit) | |
res_ids = model.Session.execute(s).fetchall() | |
res_pkgs = [(model.Session.query(model.Package).get(unicode(pkg_id)), val) for pkg_id, val in res_ids] | |
return res_pkgs | |
@classmethod | |
def largest_groups(cls, limit=10): | |
member = table('member') | |
s = select([member.c.group_id, func.count(member.c.table_id)]).\ | |
group_by(member.c.group_id).\ | |
where(and_(member.c.group_id!=None, member.c.table_name=='package')).\ | |
order_by(func.count(member.c.table_id).desc()).\ | |
limit(limit) | |
res_ids = model.Session.execute(s).fetchall() | |
res_groups = [(model.Session.query(model.Group).get(unicode(group_id)), val) for group_id, val in res_ids] | |
return res_groups | |
@classmethod | |
def top_tags(cls, limit=10, returned_tag_info='object'): # by package | |
assert returned_tag_info in ('name', 'id', 'object') | |
tag = table('tag') | |
package_tag = table('package_tag') | |
#TODO filter out tags with state=deleted | |
if returned_tag_info == 'name': | |
from_obj = [package_tag.join(tag)] | |
tag_column = tag.c.name | |
else: | |
from_obj = None | |
tag_column = package_tag.c.tag_id | |
s = select([tag_column, func.count(package_tag.c.package_id)], | |
from_obj=from_obj) | |
s = s.group_by(tag_column).\ | |
order_by(func.count(package_tag.c.package_id).desc()).\ | |
limit(limit) | |
res_col = model.Session.execute(s).fetchall() | |
if returned_tag_info in ('id', 'name'): | |
return res_col | |
elif returned_tag_info == 'object': | |
res_tags = [(model.Session.query(model.Tag).get(unicode(tag_id)), val) for tag_id, val in res_col] | |
return res_tags | |
@classmethod | |
def top_package_owners(cls, limit=10): | |
package_role = table('package_role') | |
user_object_role = table('user_object_role') | |
s = select([user_object_role.c.user_id, func.count(user_object_role.c.role)], from_obj=[user_object_role.join(package_role)]).\ | |
where(user_object_role.c.role==model.authz.Role.ADMIN).\ | |
where(user_object_role.c.user_id!=None).\ | |
group_by(user_object_role.c.user_id).\ | |
order_by(func.count(user_object_role.c.role).desc()).\ | |
limit(limit) | |
res_ids = model.Session.execute(s).fetchall() | |
res_users = [(model.Session.query(model.User).get(unicode(user_id)), val) for user_id, val in res_ids] | |
return res_users | |
class RevisionStats(object): | |
@classmethod | |
def package_addition_rate(cls, weeks_ago=0): | |
week_commenced = cls.get_date_weeks_ago(weeks_ago) | |
return cls.get_objects_in_a_week(week_commenced, | |
type_='package_addition_rate') | |
@classmethod | |
def package_revision_rate(cls, weeks_ago=0): | |
week_commenced = cls.get_date_weeks_ago(weeks_ago) | |
return cls.get_objects_in_a_week(week_commenced, | |
type_='package_revision_rate') | |
@classmethod | |
def get_date_weeks_ago(cls, weeks_ago): | |
''' | |
@param weeks_ago: specify how many weeks ago to give count for | |
(0 = this week so far) | |
''' | |
date_ = datetime.date.today() | |
return date_ - datetime.timedelta(days= | |
datetime.date.weekday(date_) + 7 * weeks_ago) | |
@classmethod | |
def get_week_dates(cls, weeks_ago): | |
''' | |
@param weeks_ago: specify how many weeks ago to give count for | |
(0 = this week so far) | |
''' | |
package_revision = table('package_revision') | |
revision = table('revision') | |
today = datetime.date.today() | |
date_from = datetime.datetime(today.year, today.month, today.day) -\ | |
datetime.timedelta(days=datetime.date.weekday(today) + \ | |
7 * weeks_ago) | |
date_to = date_from + datetime.timedelta(days=7) | |
return (date_from, date_to) | |
@classmethod | |
def get_date_week_started(cls, date_): | |
assert isinstance(date_, datetime.date) | |
if isinstance(date_, datetime.datetime): | |
date_ = datetime2date(date_) | |
return date_ - datetime.timedelta(days=datetime.date.weekday(date_)) | |
@classmethod | |
def get_package_revisions(cls): | |
''' | |
@return: Returns list of revisions and date of them, in | |
format: [(id, date), ...] | |
''' | |
package_revision = table('package_revision') | |
revision = table('revision') | |
s = select([package_revision.c.id, revision.c.timestamp], from_obj=[package_revision.join(revision)]).order_by(revision.c.timestamp) | |
res = model.Session.execute(s).fetchall() # [(id, datetime), ...] | |
return res | |
@classmethod | |
def get_new_packages(cls): | |
''' | |
@return: Returns list of new pkgs and date when they were created, in | |
format: [(id, date_ordinal), ...] | |
''' | |
def new_packages(): | |
# Can't filter by time in select because 'min' function has to | |
# be 'for all time' else you get first revision in the time period. | |
package_revision = table('package_revision') | |
revision = table('revision') | |
s = select([package_revision.c.id, func.min(revision.c.timestamp)], from_obj=[package_revision.join(revision)]).group_by(package_revision.c.id).order_by(func.min(revision.c.timestamp)) | |
res = model.Session.execute(s).fetchall() # [(id, datetime), ...] | |
res_pickleable = [] | |
for pkg_id, created_datetime in res: | |
res_pickleable.append((pkg_id, created_datetime.toordinal())) | |
return res_pickleable | |
if cache_enabled: | |
week_commences = cls.get_date_week_started(datetime.date.today()) | |
key = 'all_new_packages_%s' + week_commences.strftime(DATE_FORMAT) | |
new_packages = our_cache.get_value(key=key, | |
createfunc=new_packages) | |
else: | |
new_packages = new_packages() | |
return new_packages | |
@classmethod | |
def get_deleted_packages(cls): | |
''' | |
@return: Returns list of deleted pkgs and date when they were deleted, in | |
format: [(id, date_ordinal), ...] | |
''' | |
def deleted_packages(): | |
# Can't filter by time in select because 'min' function has to | |
# be 'for all time' else you get first revision in the time period. | |
package_revision = table('package_revision') | |
revision = table('revision') | |
s = select([package_revision.c.id, func.min(revision.c.timestamp)], from_obj=[package_revision.join(revision)]).\ | |
where(package_revision.c.state==model.State.DELETED).\ | |
group_by(package_revision.c.id).\ | |
order_by(func.min(revision.c.timestamp)) | |
res = model.Session.execute(s).fetchall() # [(id, datetime), ...] | |
res_pickleable = [] | |
for pkg_id, deleted_datetime in res: | |
res_pickleable.append((pkg_id, deleted_datetime.toordinal())) | |
return res_pickleable | |
if cache_enabled: | |
week_commences = cls.get_date_week_started(datetime.date.today()) | |
key = 'all_deleted_packages_%s' + week_commences.strftime(DATE_FORMAT) | |
deleted_packages = our_cache.get_value(key=key, | |
createfunc=deleted_packages) | |
else: | |
deleted_packages = deleted_packages() | |
return deleted_packages | |
@classmethod | |
def get_num_packages_by_week(cls): | |
def num_packages(): | |
new_packages_by_week = cls.get_by_week('new_packages') | |
deleted_packages_by_week = cls.get_by_week('deleted_packages') | |
first_date = (min(datetime.datetime.strptime(new_packages_by_week[0][0], DATE_FORMAT), | |
datetime.datetime.strptime(deleted_packages_by_week[0][0], DATE_FORMAT))).date() | |
cls._cumulative_num_pkgs = 0 | |
new_pkgs = [] | |
deleted_pkgs = [] | |
def build_weekly_stats(week_commences, new_pkg_ids, deleted_pkg_ids): | |
num_pkgs = len(new_pkg_ids) - len(deleted_pkg_ids) | |
new_pkgs.extend([model.Session.query(model.Package).get(id).name for id in new_pkg_ids]) | |
deleted_pkgs.extend([model.Session.query(model.Package).get(id).name for id in deleted_pkg_ids]) | |
cls._cumulative_num_pkgs += num_pkgs | |
return (week_commences.strftime(DATE_FORMAT), | |
num_pkgs, cls._cumulative_num_pkgs) | |
week_ends = first_date | |
today = datetime.date.today() | |
new_package_week_index = 0 | |
deleted_package_week_index = 0 | |
weekly_numbers = [] # [(week_commences, num_packages, cumulative_num_pkgs])] | |
while week_ends <= today: | |
week_commences = week_ends | |
week_ends = week_commences + datetime.timedelta(days=7) | |
if datetime.datetime.strptime(new_packages_by_week[new_package_week_index][0], DATE_FORMAT).date() == week_commences: | |
new_pkg_ids = new_packages_by_week[new_package_week_index][1] | |
new_package_week_index += 1 | |
else: | |
new_pkg_ids = [] | |
if datetime.datetime.strptime(deleted_packages_by_week[deleted_package_week_index][0], DATE_FORMAT).date() == week_commences: | |
deleted_pkg_ids = deleted_packages_by_week[deleted_package_week_index][1] | |
deleted_package_week_index += 1 | |
else: | |
deleted_pkg_ids = [] | |
weekly_numbers.append(build_weekly_stats(week_commences, new_pkg_ids, deleted_pkg_ids)) | |
# just check we got to the end of each count | |
assert new_package_week_index == len(new_packages_by_week) | |
assert deleted_package_week_index == len(deleted_packages_by_week) | |
return weekly_numbers | |
if cache_enabled: | |
week_commences = cls.get_date_week_started(datetime.date.today()) | |
key = 'number_packages_%s' + week_commences.strftime(DATE_FORMAT) | |
num_packages = our_cache.get_value(key=key, | |
createfunc=num_packages) | |
else: | |
num_packages = num_packages() | |
return num_packages | |
@classmethod | |
def get_by_week(cls, object_type): | |
cls._object_type = object_type | |
def objects_by_week(): | |
if cls._object_type == 'new_packages': | |
objects = cls.get_new_packages() | |
def get_date(object_date): | |
return datetime.date.fromordinal(object_date) | |
elif cls._object_type == 'deleted_packages': | |
objects = cls.get_deleted_packages() | |
def get_date(object_date): | |
return datetime.date.fromordinal(object_date) | |
elif cls._object_type == 'package_revisions': | |
objects = cls.get_package_revisions() | |
def get_date(object_date): | |
return datetime2date(object_date) | |
else: | |
raise NotImplementedError() | |
first_date = get_date(objects[0][1]) if objects else datetime.date.today() | |
week_commences = cls.get_date_week_started(first_date) | |
week_ends = week_commences + datetime.timedelta(days=7) | |
week_index = 0 | |
weekly_pkg_ids = [] # [(week_commences, [pkg_id1, pkg_id2, ...])] | |
pkg_id_stack = [] | |
cls._cumulative_num_pkgs = 0 | |
def build_weekly_stats(week_commences, pkg_ids): | |
num_pkgs = len(pkg_ids) | |
cls._cumulative_num_pkgs += num_pkgs | |
return (week_commences.strftime(DATE_FORMAT), | |
pkg_ids, num_pkgs, cls._cumulative_num_pkgs) | |
for pkg_id, date_field in objects: | |
date_ = get_date(date_field) | |
if date_ >= week_ends: | |
weekly_pkg_ids.append(build_weekly_stats(week_commences, pkg_id_stack)) | |
pkg_id_stack = [] | |
week_commences = week_ends | |
week_ends = week_commences + datetime.timedelta(days=7) | |
pkg_id_stack.append(pkg_id) | |
weekly_pkg_ids.append(build_weekly_stats(week_commences, pkg_id_stack)) | |
today = datetime.date.today() | |
while week_ends <= today: | |
week_commences = week_ends | |
week_ends = week_commences + datetime.timedelta(days=7) | |
weekly_pkg_ids.append(build_weekly_stats(week_commences, [])) | |
return weekly_pkg_ids | |
if cache_enabled: | |
week_commences = cls.get_date_week_started(datetime.date.today()) | |
key = '%s_by_week_%s' % (cls._object_type, week_commences.strftime(DATE_FORMAT)) | |
objects_by_week_ = our_cache.get_value(key=key, | |
createfunc=objects_by_week) | |
else: | |
objects_by_week_ = objects_by_week() | |
return objects_by_week_ | |
@classmethod | |
def get_objects_in_a_week(cls, date_week_commences, | |
type_='new-package-rate'): | |
''' | |
@param type: Specifies what to return about the specified week: | |
"package_addition_rate" number of new packages | |
"package_revision_rate" number of package revisions | |
"new_packages" a list of the packages created | |
in a tuple with the date. | |
"deleted_packages" a list of the packages deleted | |
in a tuple with the date. | |
@param dates: date range of interest - a tuple: | |
(start_date, end_date) | |
''' | |
assert isinstance(date_week_commences, datetime.date) | |
if type_ in ('package_addition_rate', 'new_packages'): | |
object_type = 'new_packages' | |
elif type_ == 'deleted_packages': | |
object_type = 'deleted_packages' | |
elif type_ == 'package_revision_rate': | |
object_type = 'package_revisions' | |
else: | |
raise NotImplementedError() | |
objects_by_week = cls.get_by_week(object_type) | |
date_wc_str = date_week_commences.strftime(DATE_FORMAT) | |
object_ids = None | |
for objects_in_a_week in objects_by_week: | |
if objects_in_a_week[0] == date_wc_str: | |
object_ids = objects_in_a_week[1] | |
break | |
if object_ids is None: | |
raise TypeError('Week specified is outside range') | |
assert isinstance(object_ids, list) | |
if type_ in ('package_revision_rate', 'package_addition_rate'): | |
return len(object_ids) | |
elif type_ in ('new_packages', 'deleted_packages'): | |
return [ model.Session.query(model.Package).get(pkg_id) \ | |
for pkg_id in object_ids ] | |
{% extends "page.html" %} | |
{% block breadcrumb_content %} | |
<li class="active">{{ 'Statistics' }}</li> | |
{% endblock %} | |
{% block primary_content %} | |
<article class="module"> | |
<section id="stats-total-datasets" class="module-content tab-content active"> | |
<h2>{{ _('Total number of Datasets') }}</h2> | |
{% set xaxis = {'mode': 'time', 'timeformat': '%y-%b'} %} | |
{% set yaxis = {'min': 0} %} | |
<table class="table table-chunky table-bordered table-striped" data-module="plot" data-module-xaxis="{{ h.dump_json(xaxis) }}" data-module-yaxis="{{ h.dump_json(yaxis) }}"> | |
<thead> | |
<tr> | |
<th>{{ _("Date") }}</th> | |
<th>{{ _("Total datasets") }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for row in c.raw_packages_by_week %} | |
<tr> | |
<th data-type="date" data-value="{{ row.date.strftime("%s") }}"><time datetime="{{ row.date.isoformat() }}">{{ h.render_datetime(row.date) }}</time></th> | |
<td>{{ row.total_packages }}</td> | |
</tr> | |
{% endfor %} | |
</tbody> | |
</table> | |
</section> | |
<section id="stats-dataset-revisions" class="module-content tab-content"> | |
<h2>{{ _('Dataset Revisions per Week') }}</h2> | |
{% set xaxis = {'mode': 'time', 'timeformat': '%y-%b'} %} | |
{% set lines = {'fill': 1} %} | |
<table class="table table-chunky table-bordered table-striped" data-module="plot" data-module-xaxis="{{ h.dump_json(xaxis) }}" data-module-lines="{{ h.dump_json(lines) }}"> | |
<thead> | |
<tr> | |
<th>{{ _("Date") }}</th> | |
<th>{{ _("All dataset revisions") }}</th> | |
<th>{{ _("New datasets") }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for row in c.raw_all_package_revisions %} | |
<tr> | |
<th data-type="date" data-value="{{ row.date.strftime("%s") }}"><time datetime="{{ row.date.isoformat() }}">{{ h.render_datetime(row.date) }}</time></th> | |
<td>{{ row.total_revisions }}</td> | |
<td>{{ c.raw_new_datasets[loop.index0].new_packages }}</td> | |
</tr> | |
{% endfor %} | |
</tbody> | |
</table> | |
</section> | |
<section id="stats-top-rated" class="module-content tab-content"> | |
<h2>{{ _('Top Rated Datasets') }}</h2> | |
{% if c.top_rated_packages %} | |
<table class="table table-chunky table-bordered table-striped"> | |
<thead> | |
<tr> | |
<th>Dataset</th> | |
<th class="metric">{{ _('Average rating') }}</th> | |
<th class="metric">{{ _('Number of ratings') }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for package, rating, num_ratings in c.top_rated_packages %} | |
<tr> | |
<th>{{ h.link_to(package.title or package.name, h.url_for(controller='package', action='read', id=package.name)) }}</th> | |
<td class="metric">{{ rating }}</td> | |
<td class="metric">{{ num_ratings }}</td> | |
</tr> | |
{% endfor %} | |
</tbody> | |
</table> | |
{% else %} | |
<p class="empty">{{ _('No ratings') }}</p> | |
{% endif %} | |
</section> | |
<section id="stats-most-edited" class="module-content tab-content"> | |
<h2>{{ _('Most Edited Datasets') }}</h2> | |
{% if c.most_edited_packages %} | |
<table class="table table-chunky table-bordered table-striped"> | |
<thead> | |
<tr> | |
<th>{{ _('Dataset') }}</th> | |
<th class="metric">{{ _('Number of edits') }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for package, edits in c.most_edited_packages %} | |
<tr py:for="package, edits in c.most_edited_packages"> | |
<td>{{ h.link_to(package.title or package.name, h.url_for(controller='package', action='read', id=package.name)) }}</td> | |
<td class="metric">{{ edits }}</td> | |
</tr> | |
{% endfor %} | |
</tbody> | |
</table> | |
{% else %} | |
<p class="empty">{{ _('No edited datasets') }}</p> | |
{% endif %} | |
</section> | |
<section id="stats-largest-groups" class="module-content tab-content"> | |
<h2>{{ _('Largest Groups') }}</h2> | |
{% if c.largest_groups %} | |
<table class="table table-chunky table-bordered table-striped"> | |
<thead> | |
<tr> | |
<th>{{ _('Group') }}</th> | |
<th class="metric">{{ _('Number of datasets') }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for group, num_packages in c.largest_groups %} | |
<tr> | |
<td>{{ h.link_to(group.title or group.name, h.url_for(controller='group', action='read', id=group.name)) }}</td> | |
<td class="metric">{{ num_packages }}</td> | |
</tr> | |
{% endfor %} | |
</tbody> | |
</table> | |
{% else %} | |
<p class="empty">{{ _('No groups') }}</p> | |
{% endif %} | |
</section> | |
<section id="stats-top-tags" class="module-content tab-content"> | |
<h2>{{ _('Top Tags') }}</h2> | |
<table class="table table-chunky table-bordered table-striped"> | |
<thead> | |
<tr> | |
<th>{{ _('Tag Name') }}</th> | |
<th class="metric">{{ _('Number of Datasets') }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for tag, num_packages in c.top_tags %} | |
<tr> | |
<td>{{ h.link_to(tag.name, h.url_for(controller='package', action='search', tags=tag.name)) }}</td> | |
<td class="metric">{{ num_packages }}</td> | |
</tr> | |
{% endfor %} | |
</tbody> | |
</table> | |
</section> | |
<section id="stats-most-owned" class="module-content tab-content"> | |
<h2>{{ _('Users Owning Most Datasets') }}</h2> | |
<table class="table table-chunky table-bordered table-striped"> | |
<thead> | |
<tr> | |
<th>{{ _('User') }}</th> | |
<th class="metric">{{ _('Number of Datasets') }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for user, num_packages in c.top_package_owners %} | |
<tr> | |
<td class="media">{{ h.linked_user(user) }}</td> | |
<td class="metric">{{ num_packages }}</td> | |
</tr> | |
{% endfor %} | |
</tbody> | |
</table> | |
</section> | |
</article> | |
{% endblock %} | |
{% block secondary_content %} | |
<section class="module module-narrow"> | |
<h2 class="module-heading"><i class="icon-bar-chart icon-medium"></i> {{ _('Statistics Menu') }}</h2> | |
<nav data-module="stats-nav"> | |
<ul class="unstyled nav nav-simple"> | |
<li class="nav-item active"><a href="#stats-total-datasets" data-toggle="tab">{{ _('Total Number of Datasets') }}</a></li> | |
<li class="nav-item"><a href="#stats-dataset-revisions" data-toggle="tab">{{ _('Dataset Revisions per Week') }}</a></li> | |
<li class="nav-item"><a href="#stats-top-rated" data-toggle="tab">{{ _('Top Rated Datasets') }}</a></li> | |
<li class="nav-item"><a href="#stats-most-edited" data-toggle="tab">{{ _('Most Edited Datasets') }}</a></li> | |
<li class="nav-item"><a href="#stats-largest-groups" data-toggle="tab">{{ _('Largest Groups') }}</a></li> | |
<li class="nav-item"><a href="#stats-top-tags" data-toggle="tab">{{ _('Top Tags') }}</a></li> | |
<li class="nav-item"><a href="#stats-most-owned" data-toggle="tab">{{ _('Users Owning Most Datasets') }}</a></li> | |
</ul> | |
</nav> | |
</section> | |
{% endblock %} | |
{% block scripts %} | |
{{ super() }} | |
{# | |
Hellish hack to get excanvas to work in IE8. We disable html5shiv from | |
overriding the createElement() method on this page. | |
See: http://stackoverflow.com/questions/10208062/using-flot-with-bootstrap-ie8-incompatibility | |
#} | |
{% resource "vendor/block_html5_shim" %} | |
{% resource "ckanext_stats/stats" %} | |
{% endblock %} | |
<html xmlns:py="http://genshi.edgewall.org/" | |
xmlns:i18n="http://genshi.edgewall.org/i18n" | |
xmlns:xi="http://www.w3.org/2001/XInclude" | |
py:strip=""> | |
<py:def i18n:msg="" function="page_title">Statistics</py:def> | |
<py:def function="page_heading"> | |
Statistics | |
</py:def> | |
<py:def function="optional_feed"> | |
<!--! | |
Hellish hack to get excanvas to work in IE8. We disable html5shiv from | |
overriding the createElement() method on this page. | |
See: http://stackoverflow.com/questions/10208062/using-flot-with-bootstrap-ie8-incompatibility | |
--> | |
<!--[if lte IE 8 ]><script>var html5 = {shivMethods: false};</script><![endif]--> | |
</py:def> | |
<py:def function="optional_head"> | |
<style type="text/css"> | |
body #sidebar { | |
display: none; | |
} | |
body #content { | |
width: 950px; | |
} | |
h3 { | |
margin-top: 20px; | |
} | |
.graph { | |
width: 950px; | |
height: 300px; | |
margin-bottom: 20px; | |
} | |
.metric { | |
width: 30%; | |
} | |
</style> | |
</py:def> | |
<py:match path="minornavigation"> | |
<ul class="tabbed"> | |
<li class="current-tab"> | |
<a href="">Home</a> | |
</li> | |
</ul> | |
</py:match> | |
<div py:match="content"> | |
<h3>Total number of Datasets</h3> | |
<div id="new_packages_graph" class="graph"></div> | |
<h3>Revisions to Datasets per week</h3> | |
<div id="package_revisions_graph" class="graph"></div> | |
<h3>Top Rated Datasets</h3> | |
<table py:if="c.top_rated_packages" class="table table-bordered table-striped"> | |
<tr><th>Dataset</th><th>Average rating</th><th class="metric">Number of ratings</th></tr> | |
<tr py:for="package, rating, num_ratings in c.top_rated_packages"> | |
<td>${h.link_to(package.title or package.name, h.url_for(controller='package', action='read', id=package.name))}</td><td>${rating}</td><td>${num_ratings}</td> | |
</tr> | |
</table> | |
<p py:if="not c.top_rated_packages">No ratings</p> | |
<h3>Most Edited Datasets</h3> | |
<table class="table table-bordered table-striped"> | |
<tr><th>Dataset</th><th class="metric">Number of edits</th></tr> | |
<tr py:for="package, edits in c.most_edited_packages"> | |
<td>${h.link_to(package.title or package.name, h.url_for(controller='package', action='read', id=package.name))}</td><td>${edits}</td> | |
</tr> | |
</table> | |
<h3>Largest Groups</h3> | |
<table class="table table-bordered table-striped"> | |
<tr><th>Group</th><th class="metric">Number of datasets</th></tr> | |
<tr py:for="group, num_packages in c.largest_groups"> | |
<td>${h.link_to(group.title or group.name, h.url_for(controller='group', action='read', id=group.name))}</td><td>${num_packages}</td> | |
</tr> | |
</table> | |
<h3>Top Tags</h3> | |
<table class="table table-bordered table-striped"> | |
<tr py:for="tag, num_packages in c.top_tags"> | |
<td>${h.link_to(tag.name, h.url_for(controller='tag', action='read', id=tag.name))}</td><td class="metric">${num_packages}</td> | |
</tr> | |
</table> | |
<h3>Users owning most datasets</h3> | |
<table class="table table-bordered table-striped"> | |
<tr py:for="user, num_packages in c.top_package_owners"> | |
<td>${h.linked_user(user)}</td><td class="metric">${num_packages}</td> | |
</tr> | |
</table> | |
<p> | |
Page last updated: | |
<?python | |
import datetime | |
?> | |
${datetime.datetime.now().strftime('%c')} | |
</p> | |
</div> | |
<py:def function="optional_footer"> | |
<script type="text/javascript"> | |
// HACKy | |
$('body').addClass('no-sidebar'); | |
</script> | |
${jsConditionalForIe(8, '<script language="javascript" type="text/javascript" src="' + h.url_for_static('/scripts/vendor/flot/0.7/excanvas.js') + '"></script>', 'lte')} | |
<script type="text/javascript" src="${ h.url_for_static('/scripts/vendor/flot/0.7/jquery.flot.js') }">//pointless jscript comment</script> | |
<script type="text/javascript"> | |
var options = { | |
xaxis: { | |
mode: "time", | |
timeformat: "%y-%b" | |
}, | |
yaxis: { | |
min: 0 | |
}, | |
legend: { | |
position: "nw" | |
} | |
}; | |
var data = [ | |
[ | |
${",".join(c.packages_by_week)} | |
] | |
]; | |
$.plot($("#new_packages_graph"), data, options); | |
</script> | |
<script type="text/javascript"> | |
var options = { | |
xaxis: { | |
mode: "time", | |
timeformat: "%y-%b" | |
}, | |
legend: { | |
position: "nw" | |
}, | |
colors: ["#ffcc33", "#ff8844"] | |
}; | |
var data = [ | |
{label: "All package revisions", | |
lines: {fill: 1 }, | |
data: [${",".join(c.all_package_revisions)}]}, | |
{label: "New datasets", | |
lines: {fill: 1}, | |
data: [${",".join(c.new_datasets)}]} | |
]; | |
$.plot($("#package_revisions_graph"), data, options); | |
</script> | |
</py:def> | |
<xi:include href="../../layout.html" /> | |
</html> | |
<html xmlns:py="http://genshi.edgewall.org/" | |
xmlns:i18n="http://genshi.edgewall.org/i18n" | |
xmlns:xi="http://www.w3.org/2001/XInclude" | |
py:strip=""> | |
<py:def function="page_title">Leaderboard - Stats</py:def> | |
<py:def function="optional_head"> | |
<script type="text/javascript"> | |
var solrCoreUrl = '${c.solr_core_url}'; | |
</script> | |
<script type="text/javascript" src="${h.url_for('/ckanext/stats/app.js')}"></script> | |
<link type="text/css" rel="stylesheet" media="all" href="${h.url_for('/ckanext/stats/style.css')}" /> | |
</py:def> | |
<div py:match="content"> | |
<h2>Dataset Leaderboard</h2> | |
<p>Choose a dataset attribute and find out which categories in that area have the most datasets. E.g. tags, groups, license, res_format, country.</p> | |
<form> | |
<label for="category">Choose area</label> | |
<input type="text" value="tags" name="attribute" id="form-attribute" /> | |
<input type="submit" value="Dataset Counts »" name="submit" /> | |
</form> | |
<div class="category-counts"> | |
<ul class="chartlist" id="category-counts"> | |
</ul> | |
</div> | |
</div> | |
<xi:include href="../../layout.html" /> | |
</html> | |
import paste.fixture | |
from pylons import config | |
from ckan.config.middleware import make_app | |
class StatsFixture(object): | |
@classmethod | |
def setup_class(cls): | |
cls._original_config = config.copy() | |
config['ckan.plugins'] = 'stats' | |
wsgiapp = make_app(config['global_conf'], **config) | |
cls.app = paste.fixture.TestApp(wsgiapp) | |
@classmethod | |
def teardown_class(cls): | |
config.clear() | |
config.update(cls._original_config) | |
import datetime | |
from nose.tools import assert_equal | |
from ckan.lib.create_test_data import CreateTestData | |
from ckan import model | |
from ckanext.stats.stats import Stats, RevisionStats | |
from ckanext.stats.tests import StatsFixture | |
class TestStatsPlugin(StatsFixture): | |
@classmethod | |
def setup_class(cls): | |
super(TestStatsPlugin, cls).setup_class() | |
CreateTestData.create_arbitrary([ | |
{'name':'test1', 'groups':['grp1'], 'tags':['tag1']}, | |
{'name':'test2', 'groups':['grp1', 'grp2'], 'tags':['tag1']}, | |
{'name':'test3', 'groups':['grp1', 'grp2'], 'tags':['tag1', 'tag2']}, | |
{'name':'test4'}, | |
], | |
extra_user_names=['bob'], | |
admins=['bob'], | |
) | |
# hack revision timestamps to be this date | |
week1 = datetime.datetime(2011, 1, 5) | |
for rev in model.Session.query(model.Revision): | |
rev.timestamp = week1 + datetime.timedelta(seconds=1) | |
# week 2 | |
rev = model.repo.new_revision() | |
rev.author = 'bob' | |
rev.timestamp = datetime.datetime(2011, 1, 12) | |
model.Package.by_name(u'test2').delete() | |
model.repo.commit_and_remove() | |
# week 3 | |
rev = model.repo.new_revision() | |
rev.author = 'sandra' | |
rev.timestamp = datetime.datetime(2011, 1, 19) | |
model.Package.by_name(u'test3').title = 'Test 3' | |
model.repo.commit_and_remove() | |
rev = model.repo.new_revision() | |
rev.author = 'sandra' | |
rev.timestamp = datetime.datetime(2011, 1, 20) | |
model.Package.by_name(u'test4').title = 'Test 4' | |
model.repo.commit_and_remove() | |
# week 4 | |
rev = model.repo.new_revision() | |
rev.author = 'bob' | |
rev.timestamp = datetime.datetime(2011, 1, 26) | |
model.Package.by_name(u'test3').notes = 'Test 3 notes' | |
model.repo.commit_and_remove() | |
@classmethod | |
def teardown_class(cls): | |
CreateTestData.delete() | |
def test_top_rated_packages(self): | |
pkgs = Stats.top_rated_packages() | |
assert pkgs == [] | |
def test_most_edited_packages(self): | |
pkgs = Stats.most_edited_packages() | |
pkgs = [(pkg.name, count) for pkg, count in pkgs] | |
assert_equal(pkgs[0], ('test3', 3)) | |
assert_equal(pkgs[1][1], 2) | |
assert_equal(pkgs[2][1], 2) | |
assert_equal(pkgs[3], ('test1', 1)) | |
def test_largest_groups(self): | |
grps = Stats.largest_groups() | |
grps = [(grp.name, count) for grp, count in grps] | |
assert_equal(grps, [('grp1', 3), | |
('grp2', 2)]) | |
def test_top_tags(self): | |
tags = Stats.top_tags() | |
tags = [(tag.name, count) for tag, count in tags] | |
assert_equal(tags, [('tag1', 3), | |
('tag2', 1)]) | |
def test_top_package_owners(self): | |
owners = Stats.top_package_owners() | |
owners = [(owner.name, count) for owner, count in owners] | |
assert_equal(owners, [('bob', 4)]) | |
def test_new_packages_by_week(self): | |
new_packages_by_week = RevisionStats.get_by_week('new_packages') | |
def get_results(week_number): | |
date, ids, num, cumulative = new_packages_by_week[week_number] | |
return (date, set([model.Session.query(model.Package).get(id).name for id in ids]), num, cumulative) | |
assert_equal(get_results(0), | |
('2011-01-03', set((u'test1', u'test2', u'test3', u'test4')), 4, 4)) | |
assert_equal(get_results(1), | |
('2011-01-10', set([]), 0, 4)) | |
assert_equal(get_results(2), | |
('2011-01-17', set([]), 0, 4)) | |
assert_equal(get_results(3), | |
('2011-01-24', set([]), 0, 4)) | |
def test_deleted_packages_by_week(self): | |
deleted_packages_by_week = RevisionStats.get_by_week('deleted_packages') | |
def get_results(week_number): | |
date, ids, num, cumulative = deleted_packages_by_week[week_number] | |
return (date, [model.Session.query(model.Package).get(id).name for id in ids], num, cumulative) | |
assert_equal(get_results(0), | |
('2011-01-10', [u'test2'], 1, 1)) | |
assert_equal(get_results(1), | |
('2011-01-17', [], 0, 1)) | |
assert_equal(get_results(2), | |
('2011-01-24', [], 0, 1)) | |
assert_equal(get_results(3), | |
('2011-01-31', [], 0, 1)) | |
def test_revisions_by_week(self): | |
revisions_by_week = RevisionStats.get_by_week('package_revisions') | |
def get_results(week_number): | |
date, ids, num, cumulative = revisions_by_week[week_number] | |
return (date, num, cumulative) | |
num_setup_revs = revisions_by_week[0][2] | |
assert 6 > num_setup_revs > 2, num_setup_revs | |
assert_equal(get_results(0), | |
('2011-01-03', num_setup_revs, num_setup_revs)) | |
assert_equal(get_results(1), | |
('2011-01-10', 1, num_setup_revs+1)) | |
assert_equal(get_results(2), | |
('2011-01-17', 2, num_setup_revs+3)) | |
assert_equal(get_results(3), | |
('2011-01-24', 1, num_setup_revs+4)) | |
def test_num_packages_by_week(self): | |
num_packages_by_week = RevisionStats.get_num_packages_by_week() | |
# e.g. [('2011-05-30', 3, 3)] | |
assert_equal(num_packages_by_week[0], ('2011-01-03', 4, 4)) | |
assert_equal(num_packages_by_week[1], ('2011-01-10', -1, 3)) | |
assert_equal(num_packages_by_week[2], ('2011-01-17', 0, 3)) | |
assert_equal(num_packages_by_week[3], ('2011-01-24', 0, 3)) | |
import os | |
from ckan.tests import url_for | |
from ckanext.stats.tests import StatsFixture | |
class TestStatsPlugin(StatsFixture): | |
def test_01_config(self): | |
from pylons import config | |
paths = config['extra_public_paths'] | |
publicdir = os.path.join(os.path.dirname(os.path.dirname(__file__)), | |
'public') | |
assert paths.startswith(publicdir), (publicdir, paths) | |
def test_02_index(self): | |
url = url_for('stats') | |
out = self.app.get(url) | |
assert 'Total number of Datasets' in out, out | |
assert 'Most Edited Datasets' in out, out | |
def test_03_leaderboard(self): | |
url = url_for('stats_action', action='leaderboard') | |
out = self.app.get(url) | |
assert 'Leaderboard' in out, out | |
# empty file needed for pylons to find templates in this directory | |
import ckan.plugins as p | |
from ckan.lib.base import BaseController, config | |
import stats as stats_lib | |
import ckan.lib.helpers as h | |
class StatsController(BaseController): | |
def index(self): | |
c = p.toolkit.c | |
stats = stats_lib.Stats() | |
rev_stats = stats_lib.RevisionStats() | |
c.top_rated_packages = stats.top_rated_packages() | |
c.most_edited_packages = stats.most_edited_packages() | |
c.largest_groups = stats.largest_groups() | |
c.top_tags = stats.top_tags() | |
c.top_package_owners = stats.top_package_owners() | |
c.summary_stats = stats.summary_stats() | |
c.activity_counts = stats.activity_counts() | |
c.by_org = stats.by_org() | |
c.res_by_org = stats.res_by_org() | |
c.top_active_orgs = stats.top_active_orgs() | |
c.user_access_list = stats.user_access_list() | |
c.recent_datasets = stats.recent_datasets() | |
c.new_packages_by_week = rev_stats.get_by_week('new_packages') | |
c.deleted_packages_by_week = rev_stats.get_by_week('deleted_packages') | |
c.num_packages_by_week = rev_stats.get_num_packages_by_week() | |
c.package_revisions_by_week = rev_stats.get_by_week('package_revisions') | |
# Used in the legacy CKAN templates. | |
c.packages_by_week = [] | |
# Used in new CKAN templates gives more control to the templates for formatting. | |
c.raw_packages_by_week = [] | |
for week_date, num_packages, cumulative_num_packages in c.num_packages_by_week: | |
c.packages_by_week.append('[new Date(%s), %s]' % (week_date.replace('-', ','), cumulative_num_packages)) | |
c.raw_packages_by_week.append({'date': h.date_str_to_datetime(week_date), 'total_packages': cumulative_num_packages}) | |
c.all_package_revisions = [] | |
c.raw_all_package_revisions = [] | |
for week_date, revs, num_revisions, cumulative_num_revisions in c.package_revisions_by_week: | |
c.all_package_revisions.append('[new Date(%s), %s]' % (week_date.replace('-', ','), num_revisions)) | |
c.raw_all_package_revisions.append({'date': h.date_str_to_datetime(week_date), 'total_revisions': num_revisions}) | |
c.new_datasets = [] | |
c.raw_new_datasets = [] | |
for week_date, pkgs, num_packages, cumulative_num_packages in c.new_packages_by_week: | |
c.new_datasets.append('[new Date(%s), %s]' % (week_date.replace('-', ','), num_packages)) | |
c.raw_new_datasets.append({'date': h.date_str_to_datetime(week_date), 'new_packages': num_packages}) | |
return p.toolkit.render('ckanext/stats/index.html') | |
def leaderboard(self, id=None): | |
c = p.toolkit.c | |
c.solr_core_url = config.get('ckanext.stats.solr_core_url', | |
'http://solr.okfn.org/solr/ckan') | |
return p.toolkit.render('ckanext/stats/leaderboard.html') | |
from logging import getLogger | |
import ckan.plugins as p | |
log = getLogger(__name__) | |
class StatsPlugin(p.SingletonPlugin): | |
'''Stats plugin.''' | |
p.implements(p.IRoutes, inherit=True) | |
p.implements(p.IConfigurer, inherit=True) | |
def after_map(self, map): | |
map.connect('stats', '/stats', | |
controller='ckanext.dga_stats.controller:StatsController', | |
action='index') | |
map.connect('stats_action', '/stats/{action}', | |
controller='ckanext.dga_stats.controller:StatsController') | |
return map | |
def update_config(self, config): | |
templates = 'templates' | |
if p.toolkit.asbool(config.get('ckan.legacy_templates', False)): | |
templates = 'templates_legacy' | |
p.toolkit.add_template_directory(config, templates) | |
p.toolkit.add_public_directory(config, 'public') | |
p.toolkit.add_resource('public/ckanext/stats', 'ckanext_dga_stats') | |
**.min.js | |
**.min.css | |
# this is a namespace package | |
try: | |
import pkg_resources | |
pkg_resources.declare_namespace(__name__) | |
except ImportError: | |
import pkgutil | |
__path__ = pkgutil.extend_path(__path__, __name__) | |
# this is a namespace package | |
try: | |
import pkg_resources | |
pkg_resources.declare_namespace(__name__) | |
except ImportError: | |
import pkgutil | |
__path__ = pkgutil.extend_path(__path__, __name__) | |
# this is a namespace package | |
try: | |
import pkg_resources | |
pkg_resources.declare_namespace(__name__) | |
except ImportError: | |
import pkgutil | |
__path__ = pkgutil.extend_path(__path__, __name__) | |
jQuery(document).ready(function($) { | |
$('form').submit(function(e) { | |
e.preventDefault(); | |
attribute = $('#form-attribute').val(); | |
loadSolr(attribute); | |
}) | |
// default! (also in html) | |
loadSolr('tags'); | |
function loadSolr(attribute) { | |
var url = solrCoreUrl + '/select?indent=on&wt=json&facet=true&rows=0&indent=true&facet.mincount=1&facet.limit=30&q=*:*&facet.field=' + attribute; | |
function handleSolr(data) { | |
var results = []; | |
ourdata = data.facet_counts.facet_fields[attribute]; | |
var newrow = {}; | |
for (ii in ourdata) { | |
if (ii % 2 == 0) { | |
newrow.name = ourdata[ii]; | |
if (!newrow.name) { | |
newrow.name = '[Not Specified]'; | |
} | |
} else { | |
newrow.count = ourdata[ii]; | |
results.push(newrow); | |
newrow = {}; | |
} | |
} | |
display(results); | |
} | |
$.ajax({ | |
url: url, | |
success: handleSolr, | |
dataType: 'jsonp', | |
jsonp: 'json.wrf' | |
}); | |
} | |
function display(results) { | |
var list = $('#category-counts'); | |
list.html(''); | |
if (results.length == 0) { | |
return | |
} | |
var maximum = results[0]['count']; | |
for(ii in results) { | |
maximum = Math.max(maximum, results[ii]['count']); | |
} | |
$.each(results, function(idx, row) { | |
var newentry = $('<li></li>'); | |
newentry.append($('<a href="#">' + row['name'] + '</a>')); | |
newentry.append($('<span class="count">' + row['count'] + '</a>')); | |
var percent = 100 * row['count'] / maximum; | |
newentry.append($('<span class="index" style="width: ' + percent + '%"></span>')); | |
list.append(newentry); | |
}); | |
} | |
}); | |
.tab-content h2 { | |
margin-bottom: 12px; | |
} | |
.js .tab-content { | |
padding-top: 20px; | |
padding-bottom: 20px; | |
margin-top: 0; | |
} | |
.module-plot-canvas { | |
display: block; | |
width: 650px; | |
height: 300px; | |
margin: 20px 0; | |
} | |
<html> | |
<head> | |
<script type="text/javascript"> | |
var solrCoreUrl = 'http://solr.okfn.org/solr/ckan'; | |
</script> | |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> | |
<script type="text/javascript" src="app.js"></script> | |
<link type="text/css" rel="stylesheet" media="all" href="style.css" /> | |
</head> | |
<body> | |
<h1>CKAN Dataset Leaderboard</h1> | |
<p>Choose a dataset attribute and find out which categories in that area have the most datasets. E.g. tags, groups, license, res_format, country.</p> | |
<form> | |
<label for="category">Choose area</label> | |
<input type="text" value="tags" name="attribute" id="form-attribute" /> | |
<input type="submit" value="Dataset Counts »" name="submit" /> | |
</form> | |
<div class="category-counts"> | |
<ul class="chartlist" id="category-counts"> | |
</ul> | |
</div> | |
</body> | |
</html> | |
/* A quick module for generating flot charts from an HTML table. Options can | |
* be passed directly to flot using the data-module-* attributes. The tables | |
* are currently expected to be marked up as follows: | |
* | |
* <table data-module="plot"> | |
* <thead> | |
* <tr> | |
* <th>X Axis</th> | |
* <th>Series A Legend</th> | |
* <th>Series B Legend</th> | |
* </tr> | |
* </thead> | |
* <tbody> | |
* <tr> | |
* <th>X Value</th> | |
* <td>Series A Y Value</td> | |
* <td>Series B Y Value</td> | |
* </tr> | |
* ... | |
* </tbody> | |
* </table> | |
* | |
* Points are pulled out of the th/td elements using innerHTML or by looking | |
* for a data-value attribute. This is useful when a more readable value | |
* needs to be used in the elements contents (eg. dates). A data-type attribute | |
* can also be applied to parse the value. Only data-type="date" is currently | |
* supported and expects data-value to be a unix timestamp. | |
*/ | |
this.ckan.module('plot', function (jQuery, _) { | |
return { | |
/* Holds the jQuery.plot() object when created */ | |
graph: null, | |
/* Holds the canvas container when created */ | |
canvas: null, | |
/* Default options */ | |
options: { | |
xaxis: {}, | |
yaxis: {}, | |
legend: {position: 'nw'}, | |
colors: ['#ffcc33', '#ff8844'] | |
}, | |
/* Sets up the canvas element and parses the table. | |
* | |
* Returns nothing. | |
*/ | |
initialize: function () { | |
jQuery.proxyAll(this, /_on/); | |
if (!this.el.is('table')) { | |
throw new Error('CKAN module plot can only be called on table elements'); | |
} | |
this.setupCanvas(); | |
// Because the canvas doesn't render correctly unless visible we must | |
// listen for events that reveal the canvas and then try and re-render. | |
// Currently the most common of these is the "shown" event triggered by | |
// the tabs plugin. | |
this.sandbox.body.on("shown", this._onShown); | |
this.data = this.parseTable(this.el); | |
this.draw(); | |
}, | |
/* Removes event handlers when the module is removed from the DOM. | |
* | |
* Returns nothing. | |
*/ | |
teardown: function () { | |
this.sandbox.body.off("shown", this._onShown); | |
}, | |
/* Creates the canvas wrapper and removes the table from the document. | |
* | |
* Returns nothing. | |
*/ | |
setupCanvas: function () { | |
this.canvas = jQuery('<div class="module-plot-canvas">'); | |
this.el.replaceWith(this.canvas); | |
}, | |
/* Attempts to draw the chart if the canvas is visible. If not visible the | |
* graph does not render correctly. So we keep trying until it is. | |
* | |
* Examples | |
* | |
* module.draw(); | |
* | |
* Returns nothing. | |
*/ | |
draw: function () { | |
if (!this.drawn && this.canvas.is(':visible')) { | |
this.graph = jQuery.plot(this.canvas, this.data, this.options); | |
} | |
}, | |
/* Parses an HTML table element to build the data array for the chart. | |
* The thead element provides the axis and labels for the series. The | |
* first column in the tbody is used for the x-axis and subsequent | |
* columns are the series. | |
* | |
* table - A table element to parse. | |
* | |
* Examples | |
* | |
* module.parseTable(module.el); | |
* | |
* Returns data object suitable for use in jQuery.plot(). | |
*/ | |
parseTable: function (table) { | |
var data = []; | |
var _this = this; | |
var headings = table.find('thead tr:first th').map(function () { | |
return this.innerHTML; | |
}); | |
table.find('tbody tr').each(function (row) { | |
var element = jQuery(this); | |
var x = []; | |
x[row] = _this.getValue(element.find('th')); | |
element.find('td').each(function (series) { | |
var value = _this.getValue(this); | |
var label = headings[series + 1]; | |
data[series] = data[series] || {data: [], label: label}; | |
data[series].data[row] = [x[row], value]; | |
}); | |
}); | |
return data; | |
}, | |
/* Retrieves the value from a td/th element. This first looks for a | |
* data-value attribute on the element otherwise uses the element | |
* text contents. | |
* | |
* A data-type attribute can also be provided to tell the module how | |
* to deal with the element. By default we let jQuery.data() handle | |
* the parsing but this can provide additional data. See .parseValue() | |
* for more info. | |
* | |
* cell - An element to extract a value from. | |
* | |
* Examples | |
* | |
* var element = jQuery('<td data-value="10">Ten</td>'); | |
* module.getValue(element); //=> 10 | |
* | |
* var element = jQuery('<td>20</td>'); | |
* module.getValue(element); //=> 20 | |
* | |
* var element = jQuery('<td data-type="date">1343747094</td>'); | |
* module.getValue(element); //=> <Date Tue Jul 31 2012 16:04:54 GMT+0100 (BST)> | |
* | |
* Returns the parsed value. | |
*/ | |
getValue: function (cell) { | |
var item = cell instanceof jQuery ? cell : jQuery(cell); | |
var type = item.data('type') || 'string'; | |
var value = item.data('value') || item.text(); | |
return this.parseValue(value, type); | |
}, | |
/* Provides the ability to further format a value. | |
* | |
* If date is provided as a type then it expects value to be a unix | |
* timestamp in seconds. | |
* | |
* value - The value extracted from the element. | |
* type - A type string, currently only supports "date". | |
* | |
* Examples | |
* | |
* module.parseValue(10); // => 10 | |
* module.parseValue("cat"); // => "cat" | |
* module.parseValue(1343747094, 'date'); // => <Date Tue Jul 31 2012 16:04:54 GMT+0100 (BST)> | |
* | |
* Returns the parsed value. | |
*/ | |
parseValue: function (value, type) { | |
if (type === 'date') { | |
value = new Date(parseInt(value, 10) * 1000); | |
if (!value) { | |
value = 0; | |
} | |
} | |
return value; | |
}, | |
/* Event handler for when tabs are toggled. Determines if the canvas | |
* resides in the shown element and attempts to re-render. | |
* | |
* event - The shown event object. | |
* | |
* Returns nothing. | |
*/ | |
_onShown: function (event) { | |
if (!this.drawn && jQuery.contains(jQuery(event.target.hash)[0], this.canvas[0])) { | |
this.draw(); | |
} | |
} | |
}; | |
}); | |
/* Quick module to enhance the Bootstrap tags plug-in to update the url | |
* hash when a tab changes to allow the user to bookmark the page. | |
* | |
* Each tab id must use a prefix which which will be stripped from the hash. | |
* This is to prevent the page jumping when the hash fragment changes. | |
* | |
* prefix - The prefix used on the ids. | |
* | |
*/ | |
this.ckan.module('stats-nav', { | |
/* An options object */ | |
options: { | |
prefix: 'stats-' | |
}, | |
/* Initializes the module and sets up event listeners. | |
* | |
* Returns nothing. | |
*/ | |
initialize: function () { | |
var location = this.sandbox.location; | |
var prefix = this.options.prefix; | |
var hash = location.hash.slice(1); | |
var selected = this.$('[href^=#' + prefix + hash + ']'); | |
// Update the hash fragment when the tab changes. | |
this.el.on('shown', function (event) { | |
location.hash = event.target.hash.slice(prefix.length + 1); | |
}); | |
// Show the current tab if the location provides one. | |
if (selected.length) { | |
selected.tab('show'); | |
} | |
} | |
}); | |
[IE conditional] | |
lte IE 8 = vendor/excanvas.js | |
[groups] | |
stats = | |
css/stats.css | |
vendor/excanvas.js | |
vendor/jquery.flot.js | |
javascript/modules/plot.js | |
javascript/modules/stats-nav.js | |
div.category-counts { | |
} | |
div.category-counts-over-time { | |
clear: both; | |
} | |
/*************************** | |
* CHART LISTS | |
**************************/ | |
.chartlist { | |
float: left; | |
border-top: 1px solid #EEE; | |
width: 90%; | |
padding-left: 0; | |
margin-left: 0; | |
} | |
.chartlist li { | |
position: relative; | |
display: block; | |
border-bottom: 1px solid #EEE; | |
_zoom: 1; | |
} | |
.chartlist li a { | |
display: block; | |
padding: 0.4em 4.5em 0.4em 0.5em; | |
position: relative; | |
z-index: 2; | |
} | |
.chartlist .count { | |
display: block; | |
position: absolute; | |
top: 0; | |
right: 0; | |
margin: 0 0.3em; | |
text-align: right; | |
color: #999; | |
font-weight: bold; | |
font-size: 0.875em; | |
line-height: 2em; | |
z-index: 999; | |
} | |
.chartlist .index { | |
display: block; | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 100%; | |
background: #B8E4F5; | |
text-indent: -9999px; | |
overflow: hidden; | |
line-height: 2em; | |
} | |
.chartlist li:hover { | |
background: #EFEFEF; | |
} | |
<table data-module="plot"> | |
<thead> | |
<tr> | |
<th>X Axis</th> | |
<th>Series A Legend</th> | |
<th>Series B Legend</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<!-- This is the x value for each series --> | |
<th data-type="date" data-value="1176073200">Apr 09, 2007</th> | |
<!-- This is the y value for series a --> | |
<td>20</td> | |
<!-- This is the y value for series b --> | |
<td>7</td> | |
</tr> | |
<tr> | |
<th data-type="date" data-value="1176678000">Apr 16, 2007</th> | |
<td>12</td> | |
<td>6</td> | |
</tr> | |
<tr> | |
<th data-type="date" data-value="1177282800">Apr 23, 2007</th> | |
<td>27</td> | |
<td>12</td> | |
</tr> | |
</tbody> | |
</table> | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<title>Mocha Tests</title> | |
<link rel="stylesheet" href="../../../base/test/vendor/mocha.css" /> | |
</head> | |
<body> | |
<div id="mocha"></div> | |
<div id="fixture" style="position: absolute; top: -9999px; left: -9999px"></div> | |
<!-- Test Runner --> | |
<script src="../../../base/test/vendor/sinon.js"></script> | |
<script src="../../../base/test/vendor/mocha.js"></script> | |
<script src="../../../base/test/vendor/chai.js"></script> | |
<script> | |
mocha.setup('bdd'); | |
var assert = chai.assert; | |
// Export sinon.assert methods onto assert. | |
sinon.assert.expose(assert, {prefix: ''}); | |
var ckan = {ENV: 'testing'}; | |
</script> | |
<!-- Source --> | |
<script src="../../../base/vendor/jed.js"></script> | |
<script src="../../../base/vendor/jquery.js"></script> | |
<script src="../../../base/vendor/bootstrap/js/bootstrap-transition.js"></script> | |
<script src="../../../base/vendor/bootstrap/js/bootstrap-alert.js"></script> | |
<script src="../../../base/javascript/plugins/jquery.inherit.js"></script> | |
<script src="../../../base/javascript/plugins/jquery.proxy-all.js"></script> | |
<script src="../../../base/javascript/sandbox.js"></script> | |
<script src="../../../base/javascript/module.js"></script> | |
<script src="../../../base/javascript/pubsub.js"></script> | |
<script src="../../../base/javascript/client.js"></script> | |
<script src="../../../base/javascript/notify.js"></script> | |
<script src="../../../base/javascript/i18n.js"></script> | |
<script src="../../../base/javascript/main.js"></script> | |
<script src="../javascript/modules/plot.js"></script> | |
<script src="../javascript/modules/stats-nav.js"></script> | |
<!-- Suite --> | |
<script src="./spec/modules/plot.spec.js"></script> | |
<script src="./spec/modules/stats-nav.spec.js"></script> | |
<script> | |
beforeEach(function () { | |
this.fixture = jQuery('#fixture').empty(); | |
}); | |
afterEach(function () { | |
this.fixture.empty(); | |
}); | |
mocha.run().globals(['ckan', 'setTimeout', 'setInterval', 'clearTimeout', 'clearInterval']); | |
</script> | |
</body> | |
</html> | |
/*globals describe before beforeEach afterEach it assert sinon ckan jQuery */ | |
describe('ckan.module.PlotModule()', function () { | |
var PlotModule = ckan.module.registry['plot']; | |
before(function (done) { | |
var _this = this; | |
jQuery.get('./fixtures/table.html', function (html) { | |
_this.template = html; | |
done(); | |
}); | |
}); | |
beforeEach(function () { | |
this.el = jQuery(this.template).appendTo(this.fixture); | |
this.sandbox = ckan.sandbox(); | |
this.sandbox.body = this.fixture; | |
this.module = new PlotModule(this.el, {}, this.sandbox); | |
}); | |
afterEach(function () { | |
this.module.teardown(); | |
}); | |
describe('.initialize()', function () { | |
it('should setup the canvas element', function () { | |
var target = sinon.stub(this.module, 'setupCanvas', this.module.setupCanvas); | |
this.module.initialize(); | |
assert.called(target); | |
}); | |
it('should draw the graph', function () { | |
var target = sinon.stub(this.module, 'draw'); | |
this.module.initialize(); | |
assert.called(target); | |
}); | |
it('should listen for "shown" events on the body', function () { | |
var target = sinon.stub(this.sandbox.body, 'on'); | |
this.module.initialize(); | |
assert.called(target); | |
assert.calledWith(target, "shown", this.module._onShown); | |
}); | |
}); | |
describe('.teardown()', function () { | |
it('should remove "shown" listeners from the body', function () { | |
var target = sinon.stub(this.sandbox.body, 'off'); | |
this.module.teardown(); | |
assert.called(target); | |
assert.calledWith(target, "shown", this.module._onShown); | |
}); | |
}); | |
describe('.setupCanvas()', function () { | |
it('should create the .canvas element', function () { | |
this.module.setupCanvas(); | |
assert.isDefined(this.module.canvas); | |
assert.isDefined(this.module.canvas.is('div')); | |
}); | |
it('should replace the .el with the .canvas', function () { | |
this.module.setupCanvas(); | |
assert.ok(jQuery.contains(this.sandbox.body[0], this.module.canvas[0])); | |
}); | |
}); | |
describe('.draw()', function () { | |
beforeEach(function () { | |
this.plot = {}; | |
this.module.canvas = jQuery('<div />').appendTo(this.fixture); | |
jQuery.plot = sinon.stub().returns(this.plot); | |
}); | |
it('should call jQuery.plot() if the canvas is visible', function () { | |
this.module.draw(); | |
assert.called(jQuery.plot); | |
assert.calledWith(jQuery.plot, this.module.canvas, this.module.data, this.module.options); | |
}); | |
it('should assign the .graph property', function () { | |
this.module.draw(); | |
assert.strictEqual(this.module.graph, this.plot); | |
}); | |
it('should not call jQuery.plot() if the canvas is not visible', function () { | |
this.module.canvas.hide(); | |
this.module.draw(); | |
assert.notCalled(jQuery.plot); | |
}); | |
}); | |
describe('.parseTable(table)', function () { | |
it('should parse the contents of the provided table', function () { | |
var target = this.module.parseTable(this.module.el); | |
assert.deepEqual(target, [{ | |
label: 'Series A Legend', | |
data: [ | |
[new Date(1176073200000), "20"], | |
[new Date(1176678000000), "12"], | |
[new Date(1177282800000), "27"] | |
] | |
}, { | |
label: 'Series B Legend', | |
data: [ | |
[new Date(1176073200000), "7"], | |
[new Date(1176678000000), "6"], | |
[new Date(1177282800000), "12"] | |
] | |
}]); | |
}); | |
}); | |
describe('.getValue(cell)', function () { | |
it('should extract the value from a table cell'); | |
it('should use the data-value attribute if present'); | |
it('should parse the value using the data-type'); | |
}); | |
describe('.parseValue(value, type)', function () { | |
it('should create a date object if type == "date"'); | |
it('should return the value if the type is not recognised'); | |
}); | |
describe('._onShown(event)', function () { | |
it('should call .draw() if the event.target contains the canvas'); | |
}); | |
}); | |
/*globals describe before beforeEach afterEach it assert sinon ckan jQuery */ | |
describe('ckan.module.StatsNavModule()', function () { | |
var StatsNavModule = ckan.module.registry['stats-nav']; | |
beforeEach(function () { | |
this.el = document.createElement('div'); | |
this.sandbox = ckan.sandbox(); | |
this.sandbox.body = this.fixture; | |
this.sandbox.location = { | |
href: '', | |
hash: '' | |
}; | |
this.module = new StatsNavModule(this.el, {}, this.sandbox); | |
jQuery.fn.tab = sinon.stub(); | |
}); | |
afterEach(function () { | |
this.module.teardown(); | |
delete jQuery.fn.tab; | |
}); | |
describe('.initialize()', function () { | |
it('should listen for shown events and update the location.hash', function () { | |
var anchor = jQuery('<a />').attr('href', '#stats-test')[0]; | |
this.module.initialize(); | |
this.module.el.trigger({type: 'shown', target: anchor}); | |
assert.equal(this.sandbox.location.hash, 'test'); | |
}); | |
it('should select the tab from the location hash on init', function () { | |
var anchor = jQuery('<a />').attr('href', '#stats-test').appendTo(this.el); | |
this.sandbox.location.hash = '#test'; | |
this.module.initialize(); | |
assert.called(jQuery.fn.tab); | |
assert.calledWith(jQuery.fn.tab, 'show'); | |
}); | |
}); | |
}); | |
// Copyright 2006 Google Inc. | |
// | |
// Licensed under the Apache License, Version 2.0 (the "License"); | |
// you may not use this file except in compliance with the License. | |
// You may obtain a copy of the License at | |
// | |
// http://www.apache.org/licenses/LICENSE-2.0 | |
// | |
// Unless required by applicable law or agreed to in writing, software | |
// distributed under the License is distributed on an "AS IS" BASIS, | |
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
// See the License for the specific language governing permissions and | |
// limitations under the License. | |
// Known Issues: | |
// | |
// * Patterns only support repeat. | |
// * Radial gradient are not implemented. The VML version of these look very | |
// different from the canvas one. | |
// * Clipping paths are not implemented. | |
// * Coordsize. The width and height attribute have higher priority than the | |
// width and height style values which isn't correct. | |
// * Painting mode isn't implemented. | |
// * Canvas width/height should is using content-box by default. IE in | |
// Quirks mode will draw the canvas using border-box. Either change your | |
// doctype to HTML5 | |
// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype) | |
// or use Box Sizing Behavior from WebFX | |
// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html) | |
// * Non uniform scaling does not correctly scale strokes. | |
// * Filling very large shapes (above 5000 points) is buggy. | |
// * Optimize. There is always room for speed improvements. | |
// Only add this code if we do not already have a canvas implementation | |
if (!document.createElement('canvas').getContext) { | |
(function() { | |
// alias some functions to make (compiled) code shorter | |
var m = Math; | |
var mr = m.round; | |
var ms = m.sin; | |
var mc = m.cos; | |
var abs = m.abs; | |
var sqrt = m.sqrt; | |
// this is used for sub pixel precision | |
var Z = 10; | |
var Z2 = Z / 2; | |
/** | |
* This funtion is assigned to the <canvas> elements as element.getContext(). | |
* @this {HTMLElement} | |
* @return {CanvasRenderingContext2D_} | |
*/ | |
function getContext() { | |
return this.context_ || | |
(this.context_ = new CanvasRenderingContext2D_(this)); | |
} | |
var slice = Array.prototype.slice; | |
/** | |
* Binds a function to an object. The returned function will always use the | |
* passed in {@code obj} as {@code this}. | |
* | |
* Example: | |
* | |
* g = bind(f, obj, a, b) | |
* g(c, d) // will do f.call(obj, a, b, c, d) | |
* | |
* @param {Function} f The function to bind the object to | |
* @param {Object} obj The object that should act as this when the function | |
* is called | |
* @param {*} var_args Rest arguments that will be used as the initial | |
* arguments when the function is called | |
* @return {Function} A new function that has bound this | |
*/ | |
function bind(f, obj, var_args) { | |
var a = slice.call(arguments, 2); | |
return function() { | |
return f.apply(obj, a.concat(slice.call(arguments))); | |
}; | |
} | |
function encodeHtmlAttribute(s) { | |
return String(s).replace(/&/g, '&').replace(/"/g, '"'); | |
} | |
function addNamespacesAndStylesheet(doc) { | |
// create xmlns | |
if (!doc.namespaces['g_vml_']) { | |
doc.namespaces.add('g_vml_', 'urn:schemas-microsoft-com:vml', | |
'#default#VML'); | |
} | |
if (!doc.namespaces['g_o_']) { | |
doc.namespaces.add('g_o_', 'urn:schemas-microsoft-com:office:office', | |
'#default#VML'); | |
} | |
// Setup default CSS. Only add one style sheet per document | |
if (!doc.styleSheets['ex_canvas_']) { | |
var ss = doc.createStyleSheet(); | |
ss.owningElement.id = 'ex_canvas_'; | |
ss.cssText = 'canvas{display:inline-block;overflow:hidden;' + | |
// default size is 300x150 in Gecko and Opera | |
'text-align:left;width:300px;height:150px}'; | |
} | |
} | |
// Add namespaces and stylesheet at startup. | |
addNamespacesAndStylesheet(document); | |
var G_vmlCanvasManager_ = { | |
init: function(opt_doc) { | |
if (/MSIE/.test(navigator.userAgent) && !window.opera) { | |
var doc = opt_doc || document; | |
// Create a dummy element so that IE will allow canvas elements to be | |
// recognized. | |
doc.createElement('canvas'); | |
doc.attachEvent('onreadystatechange', bind(this.init_, this, doc)); | |
} | |
}, | |
init_: function(doc) { | |
// find all canvas elements | |
var els = doc.getElementsByTagName('canvas'); | |
for (var i = 0; i < els.length; i++) { | |
this.initElement(els[i]); | |
} | |
}, | |
/** | |
* Public initializes a canvas element so that it can be used as canvas | |
* element from now on. This is called automatically before the page is | |
* loaded but if you are creating elements using createElement you need to | |
* make sure this is called on the element. | |
* @param {HTMLElement} el The canvas element to initialize. | |
* @return {HTMLElement} the element that was created. | |
*/ | |
initElement: function(el) { | |
if (!el.getContext) { | |
el.getContext = getContext; | |
// Add namespaces and stylesheet to document of the element. | |
addNamespacesAndStylesheet(el.ownerDocument); | |
// Remove fallback content. There is no way to hide text nodes so we | |
// just remove all childNodes. We could hide all elements and remove | |
// text nodes but who really cares about the fallback content. | |
el.innerHTML = ''; | |
// do not use inline function because that will leak memory | |
el.attachEvent('onpropertychange', onPropertyChange); | |
el.attachEvent('onresize', onResize); | |
var attrs = el.attributes; | |
if (attrs.width && attrs.width.specified) { | |
// TODO: use runtimeStyle and coordsize | |
// el.getContext().setWidth_(attrs.width.nodeValue); | |
el.style.width = attrs.width.nodeValue + 'px'; | |
} else { | |
el.width = el.clientWidth; | |
} | |
if (attrs.height && attrs.height.specified) { | |
// TODO: use runtimeStyle and coordsize | |
// el.getContext().setHeight_(attrs.height.nodeValue); | |
el.style.height = attrs.height.nodeValue + 'px'; | |
} else { | |
el.height = el.clientHeight; | |
} | |
//el.getContext().setCoordsize_() | |
} | |
return el; | |
} | |
}; | |
function onPropertyChange(e) { | |
var el = e.srcElement; | |
switch (e.propertyName) { | |
case 'width': | |
el.getContext().clearRect(); | |
el.style.width = el.attributes.width.nodeValue + 'px'; | |
// In IE8 this does not trigger onresize. | |
el.firstChild.style.width = el.clientWidth + 'px'; | |
break; | |
case 'height': | |
el.getContext().clearRect(); | |
el.style.height = el.attributes.height.nodeValue + 'px'; | |
el.firstChild.style.height = el.clientHeight + 'px'; | |
break; | |
} | |
} | |
function onResize(e) { | |
var el = e.srcElement; | |
if (el.firstChild) { | |
el.firstChild.style.width = el.clientWidth + 'px'; | |
el.firstChild.style.height = el.clientHeight + 'px'; | |
} | |
} | |
G_vmlCanvasManager_.init(); | |
// precompute "00" to "FF" | |
var decToHex = []; | |
for (var i = 0; i < 16; i++) { | |
for (var j = 0; j < 16; j++) { | |
decToHex[i * 16 + j] = i.toString(16) + j.toString(16); | |
} | |
} | |
function createMatrixIdentity() { | |
return [ | |
[1, 0, 0], | |
[0, 1, 0], | |
[0, 0, 1] | |
]; | |
} | |
function matrixMultiply(m1, m2) { | |
var result = createMatrixIdentity(); | |
for (var x = 0; x < 3; x++) { | |
for (var y = 0; y < 3; y++) { | |
var sum = 0; | |
for (var z = 0; z < 3; z++) { | |
sum += m1[x][z] * m2[z][y]; | |
} | |
result[x][y] = sum; | |
} | |
} | |
return result; | |
} | |
function copyState(o1, o2) { | |
o2.fillStyle = o1.fillStyle; | |
o2.lineCap = o1.lineCap; | |
o2.lineJoin = o1.lineJoin; | |
o2.lineWidth = o1.lineWidth; | |
o2.miterLimit = o1.miterLimit; | |
o2.shadowBlur = o1.shadowBlur; | |
o2.shadowColor = o1.shadowColor; | |
o2.shadowOffsetX = o1.shadowOffsetX; | |
o2.shadowOffsetY = o1.shadowOffsetY; | |
o2.strokeStyle = o1.strokeStyle; | |
o2.globalAlpha = o1.globalAlpha; | |
o2.font = o1.font; | |
o2.textAlign = o1.textAlign; | |
o2.textBaseline = o1.textBaseline; | |
o2.arcScaleX_ = o1.arcScaleX_; | |
o2.arcScaleY_ = o1.arcScaleY_; | |
o2.lineScale_ = o1.lineScale_; | |
} | |
var colorData = { | |
aliceblue: '#F0F8FF', | |
antiquewhite: '#FAEBD7', | |
aquamarine: '#7FFFD4', | |
azure: '#F0FFFF', | |
beige: '#F5F5DC', | |
bisque: '#FFE4C4', | |
black: '#000000', | |
blanchedalmond: '#FFEBCD', | |
blueviolet: '#8A2BE2', | |
brown: '#A52A2A', | |
burlywood: '#DEB887', | |
cadetblue: '#5F9EA0', | |
chartreuse: '#7FFF00', | |
chocolate: '#D2691E', | |
coral: '#FF7F50', | |
cornflowerblue: '#6495ED', | |
cornsilk: '#FFF8DC', | |
crimson: '#DC143C', | |
cyan: '#00FFFF', | |
darkblue: '#00008B', | |
darkcyan: '#008B8B', | |
darkgoldenrod: '#B8860B', | |
darkgray: '#A9A9A9', | |
darkgreen: '#006400', | |
darkgrey: '#A9A9A9', | |
darkkhaki: '#BDB76B', | |
darkmagenta: '#8B008B', | |
darkolivegreen: '#556B2F', | |
darkorange: '#FF8C00', | |
darkorchid: '#9932CC', | |
darkred: '#8B0000', | |
darksalmon: '#E9967A', | |
darkseagreen: '#8FBC8F', | |
darkslateblue: '#483D8B', | |
darkslategray: '#2F4F4F', | |
darkslategrey: '#2F4F4F', | |
darkturquoise: '#00CED1', | |
darkviolet: '#9400D3', | |
deeppink: '#FF1493', | |
deepskyblue: '#00BFFF', | |
dimgray: '#696969', | |
dimgrey: '#696969', | |
dodgerblue: '#1E90FF', | |
firebrick: '#B22222', | |
floralwhite: '#FFFAF0', | |
forestgreen: '#228B22', | |
gainsboro: '#DCDCDC', | |
ghostwhite: '#F8F8FF', | |
gold: '#FFD700', | |
goldenrod: '#DAA520', | |
grey: '#808080', | |
greenyellow: '#ADFF2F', | |
honeydew: '#F0FFF0', | |
hotpink: '#FF69B4', | |
indianred: '#CD5C5C', | |
indigo: '#4B0082', | |
ivory: '#FFFFF0', | |
khaki: '#F0E68C', | |
lavender: '#E6E6FA', | |
lavenderblush: '#FFF0F5', | |
lawngreen: '#7CFC00', | |
lemonchiffon: '#FFFACD', | |
lightblue: '#ADD8E6', | |
lightcoral: '#F08080', | |
lightcyan: '#E0FFFF', | |
lightgoldenrodyellow: '#FAFAD2', | |
lightgreen: '#90EE90', | |
lightgrey: '#D3D3D3', | |
lightpink: '#FFB6C1', | |
lightsalmon: '#FFA07A', | |
lightseagreen: '#20B2AA', | |
lightskyblue: '#87CEFA', | |
lightslategray: '#778899', | |
lightslategrey: '#778899', | |
lightsteelblue: '#B0C4DE', | |
lightyellow: '#FFFFE0', | |
limegreen: '#32CD32', | |
linen: '#FAF0E6', | |
magenta: '#FF00FF', | |
mediumaquamarine: '#66CDAA', | |
mediumblue: '#0000CD', | |
mediumorchid: '#BA55D3', | |
mediumpurple: '#9370DB', | |
mediumseagreen: '#3CB371', | |
mediumslateblue: '#7B68EE', | |
mediumspringgreen: '#00FA9A', | |
mediumturquoise: '#48D1CC', | |
mediumvioletred: '#C71585', | |
midnightblue: '#191970', | |
mintcream: '#F5FFFA', | |
mistyrose: '#FFE4E1', | |
moccasin: '#FFE4B5', | |
navajowhite: '#FFDEAD', | |
oldlace: '#FDF5E6', | |
olivedrab: '#6B8E23', | |
orange: '#FFA500', | |
orangered: '#FF4500', | |
orchid: '#DA70D6', | |
palegoldenrod: '#EEE8AA', | |
palegreen: '#98FB98', | |
paleturquoise: '#AFEEEE', | |
palevioletred: '#DB7093', | |
papayawhip: '#FFEFD5', | |
peachpuff: '#FFDAB9', | |
peru: '#CD853F', | |
pink: '#FFC0CB', | |
plum: '#DDA0DD', | |
powderblue: '#B0E0E6', | |
rosybrown: '#BC8F8F', | |
royalblue: '#4169E1', | |
saddlebrown: '#8B4513', | |
salmon: '#FA8072', | |
sandybrown: '#F4A460', | |
seagreen: '#2E8B57', | |
seashell: '#FFF5EE', | |
sienna: '#A0522D', | |
skyblue: '#87CEEB', | |
slateblue: '#6A5ACD', | |
slategray: '#708090', | |
slategrey: '#708090', | |
snow: '#FFFAFA', | |
springgreen: '#00FF7F', | |
steelblue: '#4682B4', | |
tan: '#D2B48C', | |
thistle: '#D8BFD8', | |
tomato: '#FF6347', | |
turquoise: '#40E0D0', | |
violet: '#EE82EE', | |
wheat: '#F5DEB3', | |
whitesmoke: '#F5F5F5', | |
yellowgreen: '#9ACD32' | |
}; | |
function getRgbHslContent(styleString) { | |
var start = styleString.indexOf('(', 3); | |
var end = styleString.indexOf(')', start + 1); | |
var parts = styleString.substring(start + 1, end).split(','); | |
// add alpha if needed | |
if (parts.length == 4 && styleString.substr(3, 1) == 'a') { | |
alpha = Number(parts[3]); | |
} else { | |
parts[3] = 1; | |
} | |
return parts; | |
} | |
function percent(s) { | |
return parseFloat(s) / 100; | |
} | |
function clamp(v, min, max) { | |
return Math.min(max, Math.max(min, v)); | |
} | |
function hslToRgb(parts){ | |
var r, g, b; | |
h = parseFloat(parts[0]) / 360 % 360; | |
if (h < 0) | |
h++; | |
s = clamp(percent(parts[1]), 0, 1); | |
l = clamp(percent(parts[2]), 0, 1); | |
if (s == 0) { | |
r = g = b = l; // achromatic | |
} else { | |
var q = l < 0.5 ? l * (1 + s) : l + s - l * s; | |
var p = 2 * l - q; | |
r = hueToRgb(p, q, h + 1 / 3); | |
g = hueToRgb(p, q, h); | |
b = hueToRgb(p, q, h - 1 / 3); | |
} | |
return '#' + decToHex[Math.floor(r * 255)] + | |
decToHex[Math.floor(g * 255)] + | |
decToHex[Math.floor(b * 255)]; | |
} | |
function hueToRgb(m1, m2, h) { | |
if (h < 0) | |
h++; | |
if (h > 1) | |
h--; | |
if (6 * h < 1) | |
return m1 + (m2 - m1) * 6 * h; | |
else if (2 * h < 1) | |
return m2; | |
else if (3 * h < 2) | |
return m1 + (m2 - m1) * (2 / 3 - h) * 6; | |
else | |
return m1; | |
} | |
function processStyle(styleString) { | |
var str, alpha = 1; | |
styleString = String(styleString); | |
if (styleString.charAt(0) == '#') { | |
str = styleString; | |
} else if (/^rgb/.test(styleString)) { | |
var parts = getRgbHslContent(styleString); | |
var str = '#', n; | |
for (var i = 0; i < 3; i++) { | |
if (parts[i].indexOf('%') != -1) { | |
n = Math.floor(percent(parts[i]) * 255); | |
} else { | |
n = Number(parts[i]); | |
} | |
str += decToHex[clamp(n, 0, 255)]; | |
} | |
alpha = parts[3]; | |
} else if (/^hsl/.test(styleString)) { | |
var parts = getRgbHslContent(styleString); | |
str = hslToRgb(parts); | |
alpha = parts[3]; | |
} else { | |
str = colorData[styleString] || styleString; | |
} | |
return {color: str, alpha: alpha}; | |
} | |
var DEFAULT_STYLE = { | |
style: 'normal', | |
variant: 'normal', | |
weight: 'normal', | |
size: 10, | |
family: 'sans-serif' | |
}; | |
// Internal text style cache | |
var fontStyleCache = {}; | |
function processFontStyle(styleString) { | |
if (fontStyleCache[styleString]) { | |
return fontStyleCache[styleString]; | |
} | |
var el = document.createElement('div'); | |
var style = el.style; | |
try { | |
style.font = styleString; | |
} catch (ex) { | |
// Ignore failures to set to invalid font. | |
} | |
return fontStyleCache[styleString] = { | |
style: style.fontStyle || DEFAULT_STYLE.style, | |
variant: style.fontVariant || DEFAULT_STYLE.variant, | |
weight: style.fontWeight || DEFAULT_STYLE.weight, | |
size: style.fontSize || DEFAULT_STYLE.size, | |
family: style.fontFamily || DEFAULT_STYLE.family | |
}; | |
} | |
function getComputedStyle(style, element) { | |
var computedStyle = {}; | |
for (var p in style) { | |
computedStyle[p] = style[p]; | |
} | |
// Compute the size | |
var canvasFontSize = parseFloat(element.currentStyle.fontSize), | |
fontSize = parseFloat(style.size); | |
if (typeof style.size == 'number') { | |
computedStyle.size = style.size; | |
} else if (style.size.indexOf('px') != -1) { | |
computedStyle.size = fontSize; | |
} else if (style.size.indexOf('em') != -1) { | |
computedStyle.size = canvasFontSize * fontSize; | |
} else if(style.size.indexOf('%') != -1) { | |
computedStyle.size = (canvasFontSize / 100) * fontSize; | |
} else if (style.size.indexOf('pt') != -1) { | |
computedStyle.size = fontSize / .75; | |
} else { | |
computedStyle.size = canvasFontSize; | |
} | |
// Different scaling between normal text and VML text. This was found using | |
// trial and error to get the same size as non VML text. | |
computedStyle.size *= 0.981; | |
return computedStyle; | |
} | |
function buildStyle(style) { | |
return style.style + ' ' + style.variant + ' ' + style.weight + ' ' + | |
style.size + 'px ' + style.family; | |
} | |
function processLineCap(lineCap) { | |
switch (lineCap) { | |
case 'butt': | |
return 'flat'; | |
case 'round': | |
return 'round'; | |
case 'square': | |
default: | |
return 'square'; | |
} | |
} | |
/** | |
* This class implements CanvasRenderingContext2D interface as described by | |
* the WHATWG. | |
* @param {HTMLElement} surfaceElement The element that the 2D context should | |
* be associated with | |
*/ | |
function CanvasRenderingContext2D_(surfaceElement) { | |
this.m_ = createMatrixIdentity(); | |
this.mStack_ = []; | |
this.aStack_ = []; | |
this.currentPath_ = []; | |
// Canvas context properties | |
this.strokeStyle = '#000'; | |
this.fillStyle = '#000'; | |
this.lineWidth = 1; | |
this.lineJoin = 'miter'; | |
this.lineCap = 'butt'; | |
this.miterLimit = Z * 1; | |
this.globalAlpha = 1; | |
this.font = '10px sans-serif'; | |
this.textAlign = 'left'; | |
this.textBaseline = 'alphabetic'; | |
this.canvas = surfaceElement; | |
var el = surfaceElement.ownerDocument.createElement('div'); | |
el.style.width = surfaceElement.clientWidth + 'px'; | |
el.style.height = surfaceElement.clientHeight + 'px'; | |
el.style.overflow = 'hidden'; | |
el.style.position = 'absolute'; | |
surfaceElement.appendChild(el); | |
this.element_ = el; | |
this.arcScaleX_ = 1; | |
this.arcScaleY_ = 1; | |
this.lineScale_ = 1; | |
} | |
var contextPrototype = CanvasRenderingContext2D_.prototype; | |
contextPrototype.clearRect = function() { | |
if (this.textMeasureEl_) { | |
this.textMeasureEl_.removeNode(true); | |
this.textMeasureEl_ = null; | |
} | |
this.element_.innerHTML = ''; | |
}; | |
contextPrototype.beginPath = function() { | |
// TODO: Branch current matrix so that save/restore has no effect | |
// as per safari docs. | |
this.currentPath_ = []; | |
}; | |
contextPrototype.moveTo = function(aX, aY) { | |
var p = this.getCoords_(aX, aY); | |
this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y}); | |
this.currentX_ = p.x; | |
this.currentY_ = p.y; | |
}; | |
contextPrototype.lineTo = function(aX, aY) { | |
var p = this.getCoords_(aX, aY); | |
this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y}); | |
this.currentX_ = p.x; | |
this.currentY_ = p.y; | |
}; | |
contextPrototype.bezierCurveTo = function(aCP1x, aCP1y, | |
aCP2x, aCP2y, | |
aX, aY) { | |
var p = this.getCoords_(aX, aY); | |
var cp1 = this.getCoords_(aCP1x, aCP1y); | |
var cp2 = this.getCoords_(aCP2x, aCP2y); | |
bezierCurveTo(this, cp1, cp2, p); | |
}; | |
// Helper function that takes the already fixed cordinates. | |
function bezierCurveTo(self, cp1, cp2, p) { | |
self.currentPath_.push({ | |
type: 'bezierCurveTo', | |
cp1x: cp1.x, | |
cp1y: cp1.y, | |
cp2x: cp2.x, | |
cp2y: cp2.y, | |
x: p.x, | |
y: p.y | |
}); | |
self.currentX_ = p.x; | |
self.currentY_ = p.y; | |
} | |
contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) { | |
// the following is lifted almost directly from | |
// http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes | |
var cp = this.getCoords_(aCPx, aCPy); | |
var p = this.getCoords_(aX, aY); | |
var cp1 = { | |
x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_), | |
y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_) | |
}; | |
var cp2 = { | |
x: cp1.x + (p.x - this.currentX_) / 3.0, | |
y: cp1.y + (p.y - this.currentY_) / 3.0 | |
}; | |
bezierCurveTo(this, cp1, cp2, p); | |
}; | |
contextPrototype.arc = function(aX, aY, aRadius, | |
aStartAngle, aEndAngle, aClockwise) { | |
aRadius *= Z; | |
var arcType = aClockwise ? 'at' : 'wa'; | |
var xStart = aX + mc(aStartAngle) * aRadius - Z2; | |
var yStart = aY + ms(aStartAngle) * aRadius - Z2; | |
var xEnd = aX + mc(aEndAngle) * aRadius - Z2; | |
var yEnd = aY + ms(aEndAngle) * aRadius - Z2; | |
// IE won't render arches drawn counter clockwise if xStart == xEnd. | |
if (xStart == xEnd && !aClockwise) { | |
xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something | |
// that can be represented in binary | |
} | |
var p = this.getCoords_(aX, aY); | |
var pStart = this.getCoords_(xStart, yStart); | |
var pEnd = this.getCoords_(xEnd, yEnd); | |
this.currentPath_.push({type: arcType, | |
x: p.x, | |
y: p.y, | |
radius: aRadius, | |
xStart: pStart.x, | |
yStart: pStart.y, | |
xEnd: pEnd.x, | |
yEnd: pEnd.y}); | |
}; | |
contextPrototype.rect = function(aX, aY, aWidth, aHeight) { | |
this.moveTo(aX, aY); | |
this.lineTo(aX + aWidth, aY); | |
this.lineTo(aX + aWidth, aY + aHeight); | |
this.lineTo(aX, aY + aHeight); | |
this.closePath(); | |
}; | |
contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) { | |
var oldPath = this.currentPath_; | |
this.beginPath(); | |
this.moveTo(aX, aY); | |
this.lineTo(aX + aWidth, aY); | |
this.lineTo(aX + aWidth, aY + aHeight); | |
this.lineTo(aX, aY + aHeight); | |
this.closePath(); | |
this.stroke(); | |
this.currentPath_ = oldPath; | |
}; | |
contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) { | |
var oldPath = this.currentPath_; | |
this.beginPath(); | |
this.moveTo(aX, aY); | |
this.lineTo(aX + aWidth, aY); | |
this.lineTo(aX + aWidth, aY + aHeight); | |
this.lineTo(aX, aY + aHeight); | |
this.closePath(); | |
this.fill(); | |
this.currentPath_ = oldPath; | |
}; | |
contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) { | |
var gradient = new CanvasGradient_('gradient'); | |
gradient.x0_ = aX0; | |
gradient.y0_ = aY0; | |
gradient.x1_ = aX1; | |
gradient.y1_ = aY1; | |
return gradient; | |
}; | |
contextPrototype.createRadialGradient = function(aX0, aY0, aR0, | |
aX1, aY1, aR1) { | |
var gradient = new CanvasGradient_('gradientradial'); | |
gradient.x0_ = aX0; | |
gradient.y0_ = aY0; | |
gradient.r0_ = aR0; | |
gradient.x1_ = aX1; | |
gradient.y1_ = aY1; | |
gradient.r1_ = aR1; | |
return gradient; | |
}; | |
contextPrototype.drawImage = function(image, var_args) { | |
var dx, dy, dw, dh, sx, sy, sw, sh; | |
// to find the original width we overide the width and height | |
var oldRuntimeWidth = image.runtimeStyle.width; | |
var oldRuntimeHeight = image.runtimeStyle.height; | |
image.runtimeStyle.width = 'auto'; | |
image.runtimeStyle.height = 'auto'; | |
// get the original size | |
var w = image.width; | |
var h = image.height; | |
// and remove overides | |
image.runtimeStyle.width = oldRuntimeWidth; | |
image.runtimeStyle.height = oldRuntimeHeight; | |
if (arguments.length == 3) { | |
dx = arguments[1]; | |
dy = arguments[2]; | |
sx = sy = 0; | |
sw = dw = w; | |
sh = dh = h; | |
} else if (arguments.length == 5) { | |
dx = arguments[1]; | |
dy = arguments[2]; | |
dw = arguments[3]; | |
dh = arguments[4]; | |
sx = sy = 0; | |
sw = w; | |
sh = h; | |
} else if (arguments.length == 9) { | |
sx = arguments[1]; | |
sy = arguments[2]; | |
sw = arguments[3]; | |
sh = arguments[4]; | |
dx = arguments[5]; | |
dy = arguments[6]; | |
dw = arguments[7]; | |
dh = arguments[8]; | |
} else { | |
throw Error('Invalid number of arguments'); | |
} | |
var d = this.getCoords_(dx, dy); | |
var w2 = sw / 2; | |
var h2 = sh / 2; | |
var vmlStr = []; | |
var W = 10; | |
var H = 10; | |
// For some reason that I've now forgotten, using divs didn't work | |
vmlStr.push(' <g_vml_:group', | |
' coordsize="', Z * W, ',', Z * H, '"', | |
' coordorigin="0,0"' , | |
' style="width:', W, 'px;height:', H, 'px;position:absolute;'); | |
// If filters are necessary (rotation exists), create them | |
// filters are bog-slow, so only create them if abbsolutely necessary | |
// The following check doesn't account for skews (which don't exist | |
// in the canvas spec (yet) anyway. | |
if (this.m_[0][0] != 1 || this.m_[0][1] || | |
this.m_[1][1] != 1 || this.m_[1][0]) { | |
var filter = []; | |
// Note the 12/21 reversal | |
filter.push('M11=', this.m_[0][0], ',', | |
'M12=', this.m_[1][0], ',', | |
'M21=', this.m_[0][1], ',', | |
'M22=', this.m_[1][1], ',', | |
'Dx=', mr(d.x / Z), ',', | |
'Dy=', mr(d.y / Z), ''); | |
// Bounding box calculation (need to minimize displayed area so that | |
// filters don't waste time on unused pixels. | |
var max = d; | |
var c2 = this.getCoords_(dx + dw, dy); | |
var c3 = this.getCoords_(dx, dy + dh); | |
var c4 = this.getCoords_(dx + dw, dy + dh); | |
max.x = m.max(max.x, c2.x, c3.x, c4.x); | |
max.y = m.max(max.y, c2.y, c3.y, c4.y); | |
vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z), | |
'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(', | |
filter.join(''), ", sizingmethod='clip');"); | |
} else { | |
vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;'); | |
} | |
vmlStr.push(' ">' , | |
'<g_vml_:image src="', image.src, '"', | |
' style="width:', Z * dw, 'px;', | |
' height:', Z * dh, 'px"', | |
' cropleft="', sx / w, '"', | |
' croptop="', sy / h, '"', | |
' cropright="', (w - sx - sw) / w, '"', | |
' cropbottom="', (h - sy - sh) / h, '"', | |
' />', | |
'</g_vml_:group>'); | |
this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join('')); | |
}; | |
contextPrototype.stroke = function(aFill) { | |
var W = 10; | |
var H = 10; | |
// Divide the shape into chunks if it's too long because IE has a limit | |
// somewhere for how long a VML shape can be. This simple division does | |
// not work with fills, only strokes, unfortunately. | |
var chunkSize = 5000; | |
var min = {x: null, y: null}; | |
var max = {x: null, y: null}; | |
for (var j = 0; j < this.currentPath_.length; j += chunkSize) { | |
var lineStr = []; | |
var lineOpen = false; | |
lineStr.push('<g_vml_:shape', | |
' filled="', !!aFill, '"', | |
' style="position:absolute;width:', W, 'px;height:', H, 'px;"', | |
' coordorigin="0,0"', | |
' coordsize="', Z * W, ',', Z * H, '"', | |
' stroked="', !aFill, '"', | |
' path="'); | |
var newSeq = false; | |
for (var i = j; i < Math.min(j + chunkSize, this.currentPath_.length); i++) { | |
if (i % chunkSize == 0 && i > 0) { // move into position for next chunk | |
lineStr.push(' m ', mr(this.currentPath_[i-1].x), ',', mr(this.currentPath_[i-1].y)); | |
} | |
var p = this.currentPath_[i]; | |
var c; | |
switch (p.type) { | |
case 'moveTo': | |
c = p; | |
lineStr.push(' m ', mr(p.x), ',', mr(p.y)); | |
break; | |
case 'lineTo': | |
lineStr.push(' l ', mr(p.x), ',', mr(p.y)); | |
break; | |
case 'close': | |
lineStr.push(' x '); | |
p = null; | |
break; | |
case 'bezierCurveTo': | |
lineStr.push(' c ', | |
mr(p.cp1x), ',', mr(p.cp1y), ',', | |
mr(p.cp2x), ',', mr(p.cp2y), ',', | |
mr(p.x), ',', mr(p.y)); | |
break; | |
case 'at': | |
case 'wa': | |
lineStr.push(' ', p.type, ' ', | |
mr(p.x - this.arcScaleX_ * p.radius), ',', | |
mr(p.y - this.arcScaleY_ * p.radius), ' ', | |
mr(p.x + this.arcScaleX_ * p.radius), ',', | |
mr(p.y + this.arcScaleY_ * p.radius), ' ', | |
mr(p.xStart), ',', mr(p.yStart), ' ', | |
mr(p.xEnd), ',', mr(p.yEnd)); | |
break; | |
} | |
// TODO: Following is broken for curves due to | |
// move to proper paths. | |
// Figure out dimensions so we can do gradient fills | |
// properly | |
if (p) { | |
if (min.x == null || p.x < min.x) { | |
min.x = p.x; | |
} | |
if (max.x == null || p.x > max.x) { | |
max.x = p.x; | |
} | |
if (min.y == null || p.y < min.y) { | |
min.y = p.y; | |
} | |
if (max.y == null || p.y > max.y) { | |
max.y = p.y; | |
} | |
} | |
} | |
lineStr.push(' ">'); | |
if (!aFill) { | |
appendStroke(this, lineStr); | |
} else { | |
appendFill(this, lineStr, min, max); | |
} | |
lineStr.push('</g_vml_:shape>'); | |
this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); | |
} | |
}; | |
function appendStroke(ctx, lineStr) { | |
var a = processStyle(ctx.strokeStyle); | |
var color = a.color; | |
var opacity = a.alpha * ctx.globalAlpha; | |
var lineWidth = ctx.lineScale_ * ctx.lineWidth; | |
// VML cannot correctly render a line if the width is less than 1px. | |
// In that case, we dilute the color to make the line look thinner. | |
if (lineWidth < 1) { | |
opacity *= lineWidth; | |
} | |
lineStr.push( | |
'<g_vml_:stroke', | |
' opacity="', opacity, '"', | |
' joinstyle="', ctx.lineJoin, '"', | |
' miterlimit="', ctx.miterLimit, '"', | |
' endcap="', processLineCap(ctx.lineCap), '"', | |
' weight="', lineWidth, 'px"', | |
' color="', color, '" />' | |
); | |
} | |
function appendFill(ctx, lineStr, min, max) { | |
var fillStyle = ctx.fillStyle; | |
var arcScaleX = ctx.arcScaleX_; | |
var arcScaleY = ctx.arcScaleY_; | |
var width = max.x - min.x; | |
var height = max.y - min.y; | |
if (fillStyle instanceof CanvasGradient_) { | |
// TODO: Gradients transformed with the transformation matrix. | |
var angle = 0; | |
var focus = {x: 0, y: 0}; | |
// additional offset | |
var shift = 0; | |
// scale factor for offset | |
var expansion = 1; | |
if (fillStyle.type_ == 'gradient') { | |
var x0 = fillStyle.x0_ / arcScaleX; | |
var y0 = fillStyle.y0_ / arcScaleY; | |
var x1 = fillStyle.x1_ / arcScaleX; | |
var y1 = fillStyle.y1_ / arcScaleY; | |
var p0 = ctx.getCoords_(x0, y0); | |
var p1 = ctx.getCoords_(x1, y1); | |
var dx = p1.x - p0.x; | |
var dy = p1.y - p0.y; | |
angle = Math.atan2(dx, dy) * 180 / Math.PI; | |
// The angle should be a non-negative number. | |
if (angle < 0) { | |
angle += 360; | |
} | |
// Very small angles produce an unexpected result because they are | |
// converted to a scientific notation string. | |
if (angle < 1e-6) { | |
angle = 0; | |
} | |
} else { | |
var p0 = ctx.getCoords_(fillStyle.x0_, fillStyle.y0_); | |
focus = { | |
x: (p0.x - min.x) / width, | |
y: (p0.y - min.y) / height | |
}; | |
width /= arcScaleX * Z; | |
height /= arcScaleY * Z; | |
var dimension = m.max(width, height); | |
shift = 2 * fillStyle.r0_ / dimension; | |
expansion = 2 * fillStyle.r1_ / dimension - shift; | |
} | |
// We need to sort the color stops in ascending order by offset, | |
// otherwise IE won't interpret it correctly. | |
var stops = fillStyle.colors_; | |
stops.sort(function(cs1, cs2) { | |
return cs1.offset - cs2.offset; | |
}); | |
var length = stops.length; | |
var color1 = stops[0].color; | |
var color2 = stops[length - 1].color; | |
var opacity1 = stops[0].alpha * ctx.globalAlpha; | |
var opacity2 = stops[length - 1].alpha * ctx.globalAlpha; | |
var colors = []; | |
for (var i = 0; i < length; i++) { | |
var stop = stops[i]; | |
colors.push(stop.offset * expansion + shift + ' ' + stop.color); | |
} | |
// When colors attribute is used, the meanings of opacity and o:opacity2 | |
// are reversed. | |
lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"', | |
' method="none" focus="100%"', | |
' color="', color1, '"', | |
' color2="', color2, '"', | |
' colors="', colors.join(','), '"', | |
' opacity="', opacity2, '"', | |
' g_o_:opacity2="', opacity1, '"', | |
' angle="', angle, '"', | |
' focusposition="', focus.x, ',', focus.y, '" />'); | |
} else if (fillStyle instanceof CanvasPattern_) { | |
if (width && height) { | |
var deltaLeft = -min.x; | |
var deltaTop = -min.y; | |
lineStr.push('<g_vml_:fill', | |
' position="', | |
deltaLeft / width * arcScaleX * arcScaleX, ',', | |
deltaTop / height * arcScaleY * arcScaleY, '"', | |
' type="tile"', | |
// TODO: Figure out the correct size to fit the scale. | |
//' size="', w, 'px ', h, 'px"', | |
' src="', fillStyle.src_, '" />'); | |
} | |
} else { | |
var a = processStyle(ctx.fillStyle); | |
var color = a.color; | |
var opacity = a.alpha * ctx.globalAlpha; | |
lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity, | |
'" />'); | |
} | |
} | |
contextPrototype.fill = function() { | |
this.stroke(true); | |
}; | |
contextPrototype.closePath = function() { | |
this.currentPath_.push({type: 'close'}); | |
}; | |
/** | |
* @private | |
*/ | |
contextPrototype.getCoords_ = function(aX, aY) { | |
var m = this.m_; | |
return { | |
x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2, | |
y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2 | |
}; | |
}; | |
contextPrototype.save = function() { | |
var o = {}; | |
copyState(this, o); | |
this.aStack_.push(o); | |
this.mStack_.push(this.m_); | |
this.m_ = matrixMultiply(createMatrixIdentity(), this.m_); | |
}; | |
contextPrototype.restore = function() { | |
if (this.aStack_.length) { | |
copyState(this.aStack_.pop(), this); | |
this.m_ = this.mStack_.pop(); | |
} | |
}; | |
function matrixIsFinite(m) { | |
return isFinite(m[0][0]) && isFinite(m[0][1]) && | |
isFinite(m[1][0]) && isFinite(m[1][1]) && | |
isFinite(m[2][0]) && isFinite(m[2][1]); | |
} | |
function setM(ctx, m, updateLineScale) { | |
if (!matrixIsFinite(m)) { | |
return; | |
} | |
ctx.m_ = m; | |
if (updateLineScale) { | |
// Get the line scale. | |
// Determinant of this.m_ means how much the area is enlarged by the | |
// transformation. So its square root can be used as a scale factor | |
// for width. | |
var det = m[0][0] * m[1][1] - m[0][1] * m[1][0]; | |
ctx.lineScale_ = sqrt(abs(det)); | |
} | |
} | |
contextPrototype.translate = function(aX, aY) { | |
var m1 = [ | |
[1, 0, 0], | |
[0, 1, 0], | |
[aX, aY, 1] | |
]; | |
setM(this, matrixMultiply(m1, this.m_), false); | |
}; | |
contextPrototype.rotate = function(aRot) { | |
var c = mc(aRot); | |
var s = ms(aRot); | |
var m1 = [ | |
[c, s, 0], | |
[-s, c, 0], | |
[0, 0, 1] | |
]; | |
setM(this, matrixMultiply(m1, this.m_), false); | |
}; | |
contextPrototype.scale = function(aX, aY) { | |
this.arcScaleX_ *= aX; | |
this.arcScaleY_ *= aY; | |
var m1 = [ | |
[aX, 0, 0], | |
[0, aY, 0], | |
[0, 0, 1] | |
]; | |
setM(this, matrixMultiply(m1, this.m_), true); | |
}; | |
contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) { | |
var m1 = [ | |
[m11, m12, 0], | |
[m21, m22, 0], | |
[dx, dy, 1] | |
]; | |
setM(this, matrixMultiply(m1, this.m_), true); | |
}; | |
contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) { | |
var m = [ | |
[m11, m12, 0], | |
[m21, m22, 0], | |
[dx, dy, 1] | |
]; | |
setM(this, m, true); | |
}; | |
/** | |
* The text drawing function. | |
* The maxWidth argument isn't taken in account, since no browser supports | |
* it yet. | |
*/ | |
contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) { | |
var m = this.m_, | |
delta = 1000, | |
left = 0, | |
right = delta, | |
offset = {x: 0, y: 0}, | |
lineStr = []; | |
var fontStyle = getComputedStyle(processFontStyle(this.font), | |
this.element_); | |
var fontStyleString = buildStyle(fontStyle); | |
var elementStyle = this.element_.currentStyle; | |
var textAlign = this.textAlign.toLowerCase(); | |
switch (textAlign) { | |
case 'left': | |
case 'center': | |
case 'right': | |
break; | |
case 'end': | |
textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left'; | |
break; | |
case 'start': | |
textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left'; | |
break; | |
default: | |
textAlign = 'left'; | |
} | |
// 1.75 is an arbitrary number, as there is no info about the text baseline | |
switch (this.textBaseline) { | |
case 'hanging': | |
case 'top': | |
offset.y = fontStyle.size / 1.75; | |
break; | |
case 'middle': | |
break; | |
default: | |
case null: | |
case 'alphabetic': | |
case 'ideographic': | |
case 'bottom': | |
offset.y = -fontStyle.size / 2.25; | |
break; | |
} | |
switch(textAlign) { | |
case 'right': | |
left = delta; | |
right = 0.05; | |
break; | |
case 'center': | |
left = right = delta / 2; | |
break; | |
} | |
var d = this.getCoords_(x + offset.x, y + offset.y); | |
lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ', | |
' coordsize="100 100" coordorigin="0 0"', | |
' filled="', !stroke, '" stroked="', !!stroke, | |
'" style="position:absolute;width:1px;height:1px;">'); | |
if (stroke) { | |
appendStroke(this, lineStr); | |
} else { | |
// TODO: Fix the min and max params. | |
appendFill(this, lineStr, {x: -left, y: 0}, | |
{x: right, y: fontStyle.size}); | |
} | |
var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' + | |
m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0'; | |
var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z); | |
lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ', | |
' offset="', skewOffset, '" origin="', left ,' 0" />', | |
'<g_vml_:path textpathok="true" />', | |
'<g_vml_:textpath on="true" string="', | |
encodeHtmlAttribute(text), | |
'" style="v-text-align:', textAlign, | |
';font:', encodeHtmlAttribute(fontStyleString), | |
'" /></g_vml_:line>'); | |
this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); | |
}; | |
contextPrototype.fillText = function(text, x, y, maxWidth) { | |
this.drawText_(text, x, y, maxWidth, false); | |
}; | |
contextPrototype.strokeText = function(text, x, y, maxWidth) { | |
this.drawText_(text, x, y, maxWidth, true); | |
}; | |
contextPrototype.measureText = function(text) { | |
if (!this.textMeasureEl_) { | |
var s = '<span style="position:absolute;' + | |
'top:-20000px;left:0;padding:0;margin:0;border:none;' + | |
'white-space:pre;"></span>'; | |
this.element_.insertAdjacentHTML('beforeEnd', s); | |
this.textMeasureEl_ = this.element_.lastChild; | |
} | |
var doc = this.element_.ownerDocument; | |
this.textMeasureEl_.innerHTML = ''; | |
this.textMeasureEl_.style.font = this.font; | |
// Don't use innerHTML or innerText because they allow markup/whitespace. | |
this.textMeasureEl_.appendChild(doc.createTextNode(text)); | |
return {width: this.textMeasureEl_.offsetWidth}; | |
}; | |
/******** STUBS ********/ | |
contextPrototype.clip = function() { | |
// TODO: Implement | |
}; | |
contextPrototype.arcTo = function() { | |
// TODO: Implement | |
}; | |
contextPrototype.createPattern = function(image, repetition) { | |
return new CanvasPattern_(image, repetition); | |
}; | |
// Gradient / Pattern Stubs | |
function CanvasGradient_(aType) { | |
this.type_ = aType; | |
this.x0_ = 0; | |
this.y0_ = 0; | |
this.r0_ = 0; | |
this.x1_ = 0; | |
this.y1_ = 0; | |
this.r1_ = 0; | |
this.colors_ = []; | |
} | |
CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) { | |
aColor = processStyle(aColor); | |
this.colors_.push({offset: aOffset, | |
color: aColor.color, | |
alpha: aColor.alpha}); | |
}; | |
function CanvasPattern_(image, repetition) { | |
assertImageIsValid(image); | |
switch (repetition) { | |
case 'repeat': | |
case null: | |
case '': | |
this.repetition_ = 'repeat'; | |
break | |
case 'repeat-x': | |
case 'repeat-y': | |
case 'no-repeat': | |
this.repetition_ = repetition; | |
break; | |
default: | |
throwException('SYNTAX_ERR'); | |
} | |
this.src_ = image.src; | |
this.width_ = image.width; | |
this.height_ = image.height; | |
} | |
function throwException(s) { | |
throw new DOMException_(s); | |
} | |
function assertImageIsValid(img) { | |
if (!img || img.nodeType != 1 || img.tagName != 'IMG') { | |
throwException('TYPE_MISMATCH_ERR'); | |
} | |
if (img.readyState != 'complete') { | |
throwException('INVALID_STATE_ERR'); | |
} | |
} | |
function DOMException_(s) { | |
this.code = this[s]; | |
this.message = s +': DOM Exception ' + this.code; | |
} | |
var p = DOMException_.prototype = new Error; | |
p.INDEX_SIZE_ERR = 1; | |
p.DOMSTRING_SIZE_ERR = 2; | |
p.HIERARCHY_REQUEST_ERR = 3; | |
p.WRONG_DOCUMENT_ERR = 4; | |
p.INVALID_CHARACTER_ERR = 5; | |
p.NO_DATA_ALLOWED_ERR = 6; | |
p.NO_MODIFICATION_ALLOWED_ERR = 7; | |
p.NOT_FOUND_ERR = 8; | |
p.NOT_SUPPORTED_ERR = 9; | |
p.INUSE_ATTRIBUTE_ERR = 10; | |
p.INVALID_STATE_ERR = 11; | |
p.SYNTAX_ERR = 12; | |
p.INVALID_MODIFICATION_ERR = 13; | |
p.NAMESPACE_ERR = 14; | |
p.INVALID_ACCESS_ERR = 15; | |
p.VALIDATION_ERR = 16; | |
p.TYPE_MISMATCH_ERR = 17; | |
// set up externs | |
G_vmlCanvasManager = G_vmlCanvasManager_; | |
CanvasRenderingContext2D = CanvasRenderingContext2D_; | |
CanvasGradient = CanvasGradient_; | |
CanvasPattern = CanvasPattern_; | |
DOMException = DOMException_; | |
})(); | |
} // if | |
/*! Javascript plotting library for jQuery, v. 0.7. | |
* | |
* Released under the MIT license by IOLA, December 2007. | |
* | |
*/ | |
// first an inline dependency, jquery.colorhelpers.js, we inline it here | |
// for convenience | |
/* Plugin for jQuery for working with colors. | |
* | |
* Version 1.1. | |
* | |
* Inspiration from jQuery color animation plugin by John Resig. | |
* | |
* Released under the MIT license by Ole Laursen, October 2009. | |
* | |
* Examples: | |
* | |
* $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString() | |
* var c = $.color.extract($("#mydiv"), 'background-color'); | |
* console.log(c.r, c.g, c.b, c.a); | |
* $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)" | |
* | |
* Note that .scale() and .add() return the same modified object | |
* instead of making a new one. | |
* | |
* V. 1.1: Fix error handling so e.g. parsing an empty string does | |
* produce a color rather than just crashing. | |
*/ | |
(function(B){B.color={};B.color.make=function(F,E,C,D){var G={};G.r=F||0;G.g=E||0;G.b=C||0;G.a=D!=null?D:1;G.add=function(J,I){for(var H=0;H<J.length;++H){G[J.charAt(H)]+=I}return G.normalize()};G.scale=function(J,I){for(var H=0;H<J.length;++H){G[J.charAt(H)]*=I}return G.normalize()};G.toString=function(){if(G.a>=1){return"rgb("+[G.r,G.g,G.b].join(",")+")"}else{return"rgba("+[G.r,G.g,G.b,G.a].join(",")+")"}};G.normalize=function(){function H(J,K,I){return K<J?J:(K>I?I:K)}G.r=H(0,parseInt(G.r),255);G.g=H(0,parseInt(G.g),255);G.b=H(0,parseInt(G.b),255);G.a=H(0,G.a,1);return G};G.clone=function(){return B.color.make(G.r,G.b,G.g,G.a)};return G.normalize()};B.color.extract=function(D,C){var E;do{E=D.css(C).toLowerCase();if(E!=""&&E!="transparent"){break}D=D.parent()}while(!B.nodeName(D.get(0),"body"));if(E=="rgba(0, 0, 0, 0)"){E="transparent"}return B.color.parse(E)};B.color.parse=function(F){var E,C=B.color.make;if(E=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(F)){return C(parseInt(E[1],10),parseInt(E[2],10),parseInt(E[3],10))}if(E=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(F)){return C(parseInt(E[1],10),parseInt(E[2],10),parseInt(E[3],10),parseFloat(E[4]))}if(E=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(F)){return C(parseFloat(E[1])*2.55,parseFloat(E[2])*2.55,parseFloat(E[3])*2.55)}if(E=/rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(F)){return C(parseFloat(E[1])*2.55,parseFloat(E[2])*2.55,parseFloat(E[3])*2.55,parseFloat(E[4]))}if(E=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(F)){return C(parseInt(E[1],16),parseInt(E[2],16),parseInt(E[3],16))}if(E=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(F)){return C(parseInt(E[1]+E[1],16),parseInt(E[2]+E[2],16),parseInt(E[3]+E[3],16))}var D=B.trim(F).toLowerCase();if(D=="transparent"){return C(255,255,255,0)}else{E=A[D]||[0,0,0];return C(E[0],E[1],E[2])}};var A={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]}})(jQuery); | |
// the actual Flot code | |
(function($) { | |
function Plot(placeholder, data_, options_, plugins) { | |
// data is on the form: | |
// [ series1, series2 ... ] | |
// where series is either just the data as [ [x1, y1], [x2, y2], ... ] | |
// or { data: [ [x1, y1], [x2, y2], ... ], label: "some label", ... } | |
var series = [], | |
options = { | |
// the color theme used for graphs | |
colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"], | |
legend: { | |
show: true, | |
noColumns: 1, // number of colums in legend table | |
labelFormatter: null, // fn: string -> string | |
labelBoxBorderColor: "#ccc", // border color for the little label boxes | |
container: null, // container (as jQuery object) to put legend in, null means default on top of graph | |
position: "ne", // position of default legend container within plot | |
margin: 5, // distance from grid edge to default legend container within plot | |
backgroundColor: null, // null means auto-detect | |
backgroundOpacity: 0.85 // set to 0 to avoid background | |
}, | |
xaxis: { | |
show: null, // null = auto-detect, true = always, false = never | |
position: "bottom", // or "top" | |
mode: null, // null or "time" | |
color: null, // base color, labels, ticks | |
tickColor: null, // possibly different color of ticks, e.g. "rgba(0,0,0,0.15)" | |
transform: null, // null or f: number -> number to transform axis | |
inverseTransform: null, // if transform is set, this should be the inverse function | |
min: null, // min. value to show, null means set automatically | |
max: null, // max. value to show, null means set automatically | |
autoscaleMargin: null, // margin in % to add if auto-setting min/max | |
ticks: null, // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks | |
tickFormatter: null, // fn: number -> string | |
labelWidth: null, // size of tick labels in pixels | |
labelHeight: null, | |
reserveSpace: null, // whether to reserve space even if axis isn't shown | |
tickLength: null, // size in pixels of ticks, or "full" for whole line | |
alignTicksWithAxis: null, // axis number or null for no sync | |
// mode specific options | |
tickDecimals: null, // no. of decimals, null means auto | |
tickSize: null, // number or [number, "unit"] | |
minTickSize: null, // number or [number, "unit"] | |
monthNames: null, // list of names of months | |
timeformat: null, // format string to use | |
twelveHourClock: false // 12 or 24 time in time mode | |
}, | |
yaxis: { | |
autoscaleMargin: 0.02, | |
position: "left" // or "right" | |
}, | |
xaxes: [], | |
yaxes: [], | |
series: { | |
points: { | |
show: false, | |
radius: 3, | |
lineWidth: 2, // in pixels | |
fill: true, | |
fillColor: "#ffffff", | |
symbol: "circle" // or callback | |
}, | |
lines: { | |
// we don't put in show: false so we can see | |
// whether lines were actively disabled | |
lineWidth: 2, // in pixels | |
fill: false, | |
fillColor: null, | |
steps: false | |
}, | |
bars: { | |
show: false, | |
lineWidth: 2, // in pixels | |
barWidth: 1, // in units of the x axis | |
fill: true, | |
fillColor: null, | |
align: "left", // or "center" | |
horizontal: false | |
}, | |
shadowSize: 3 | |
}, | |
grid: { | |
show: true, | |
aboveData: false, | |
color: "#545454", // primary color used for outline and labels | |
backgroundColor: null, // null for transparent, else color | |
borderColor: null, // set if different from the grid color | |
tickColor: null, // color for the ticks, e.g. "rgba(0,0,0,0.15)" | |
labelMargin: 5, // in pixels | |
axisMargin: 8, // in pixels | |
borderWidth: 2, // in pixels | |
minBorderMargin: null, // in pixels, null means taken from points radius | |
markings: null, // array of ranges or fn: axes -> array of ranges | |
markingsColor: "#f4f4f4", | |
markingsLineWidth: 2, | |
// interactive stuff | |
clickable: false, | |
hoverable: false, | |
autoHighlight: true, // highlight in case mouse is near | |
mouseActiveRadius: 10 // how far the mouse can be away to activate an item | |
}, | |
hooks: {} | |
}, | |
canvas = null, // the canvas for the plot itself | |
overlay = null, // canvas for interactive stuff on top of plot | |
eventHolder = null, // jQuery object that events should be bound to | |
ctx = null, octx = null, | |
xaxes = [], yaxes = [], | |
plotOffset = { left: 0, right: 0, top: 0, bottom: 0}, | |
canvasWidth = 0, canvasHeight = 0, | |
plotWidth = 0, plotHeight = 0, | |
hooks = { | |
processOptions: [], | |
processRawData: [], | |
processDatapoints: [], | |
drawSeries: [], | |
draw: [], | |
bindEvents: [], | |
drawOverlay: [], | |
shutdown: [] | |
}, | |
plot = this; | |
// public functions | |
plot.setData = setData; | |
plot.setupGrid = setupGrid; | |
plot.draw = draw; | |
plot.getPlaceholder = function() { return placeholder; }; | |
plot.getCanvas = function() { return canvas; }; | |
plot.getPlotOffset = function() { return plotOffset; }; | |
plot.width = function () { return plotWidth; }; | |
plot.height = function () { return plotHeight; }; | |
plot.offset = function () { | |
var o = eventHolder.offset(); | |
o.left += plotOffset.left; | |
o.top += plotOffset.top; | |
return o; | |
}; | |
plot.getData = function () { return series; }; | |
plot.getAxes = function () { | |
var res = {}, i; | |
$.each(xaxes.concat(yaxes), function (_, axis) { | |
if (axis) | |
res[axis.direction + (axis.n != 1 ? axis.n : "") + "axis"] = axis; | |
}); | |
return res; | |
}; | |
plot.getXAxes = function () { return xaxes; }; | |
plot.getYAxes = function () { return yaxes; }; | |
plot.c2p = canvasToAxisCoords; | |
plot.p2c = axisToCanvasCoords; | |
plot.getOptions = function () { return options; }; | |
plot.highlight = highlight; | |
plot.unhighlight = unhighlight; | |
plot.triggerRedrawOverlay = triggerRedrawOverlay; | |
plot.pointOffset = function(point) { | |
return { | |
left: parseInt(xaxes[axisNumber(point, "x") - 1].p2c(+point.x) + plotOffset.left), | |
top: parseInt(yaxes[axisNumber(point, "y") - 1].p2c(+point.y) + plotOffset.top) | |
}; | |
}; | |
plot.shutdown = shutdown; | |
plot.resize = function () { | |
getCanvasDimensions(); | |
resizeCanvas(canvas); | |
resizeCanvas(overlay); | |
}; | |
// public attributes | |
plot.hooks = hooks; | |
// initialize | |
initPlugins(plot); | |
parseOptions(options_); | |
setupCanvases(); | |
setData(data_); | |
setupGrid(); | |
draw(); | |
bindEvents(); | |
function executeHooks(hook, args) { | |
args = [plot].concat(args); | |
for (var i = 0; i < hook.length; ++i) | |
hook[i].apply(this, args); | |
} | |
function initPlugins() { | |
for (var i = 0; i < plugins.length; ++i) { | |
var p = plugins[i]; | |
p.init(plot); | |
if (p.options) | |
$.extend(true, options, p.options); | |
} | |
} | |
function parseOptions(opts) { | |
var i; | |
$.extend(true, options, opts); | |
if (options.xaxis.color == null) | |
options.xaxis.color = options.grid.color; | |
if (options.yaxis.color == null) | |
options.yaxis.color = options.grid.color; | |
if (options.xaxis.tickColor == null) // backwards-compatibility | |
options.xaxis.tickColor = options.grid.tickColor; | |
if (options.yaxis.tickColor == null) // backwards-compatibility | |
options.yaxis.tickColor = options.grid.tickColor; | |
if (options.grid.borderColor == null) | |
options.grid.borderColor = options.grid.color; | |
if (options.grid.tickColor == null) | |
options.grid.tickColor = $.color.parse(options.grid.color).scale('a', 0.22).toString(); | |
// fill in defaults in axes, copy at least always the | |
// first as the rest of the code assumes it'll be there | |
for (i = 0; i < Math.max(1, options.xaxes.length); ++i) | |
options.xaxes[i] = $.extend(true, {}, options.xaxis, options.xaxes[i]); | |
for (i = 0; i < Math.max(1, options.yaxes.length); ++i) | |
options.yaxes[i] = $.extend(true, {}, options.yaxis, options.yaxes[i]); | |
// backwards compatibility, to be removed in future | |
if (options.xaxis.noTicks && options.xaxis.ticks == null) | |
options.xaxis.ticks = options.xaxis.noTicks; | |
if (options.yaxis.noTicks && options.yaxis.ticks == null) | |
options.yaxis.ticks = options.yaxis.noTicks; | |
if (options.x2axis) { | |
options.xaxes[1] = $.extend(true, {}, options.xaxis, options.x2axis); | |
options.xaxes[1].position = "top"; | |
} | |
if (options.y2axis) { | |
options.yaxes[1] = $.extend(true, {}, options.yaxis, options.y2axis); | |
options.yaxes[1].position = "right"; | |
} | |
if (options.grid.coloredAreas) | |
options.grid.markings = options.grid.coloredAreas; | |
if (options.grid.coloredAreasColor) | |
options.grid.markingsColor = options.grid.coloredAreasColor; | |
if (options.lines) | |
$.extend(true, options.series.lines, options.lines); | |
if (options.points) | |
$.extend(true, options.series.points, options.points); | |
if (options.bars) | |
$.extend(true, options.series.bars, options.bars); | |
if (options.shadowSize != null) | |
options.series.shadowSize = options.shadowSize; | |
// save options on axes for future reference | |
for (i = 0; i < options.xaxes.length; ++i) | |
getOrCreateAxis(xaxes, i + 1).options = options.xaxes[i]; | |
for (i = 0; i < options.yaxes.length; ++i) | |
getOrCreateAxis(yaxes, i + 1).options = options.yaxes[i]; | |
// add hooks from options | |
for (var n in hooks) | |
if (options.hooks[n] && options.hooks[n].length) | |
hooks[n] = hooks[n].concat(options.hooks[n]); | |
executeHooks(hooks.processOptions, [options]); | |
} | |
function setData(d) { | |
series = parseData(d); | |
fillInSeriesOptions(); | |
processData(); | |
} | |
function parseData(d) { | |
var res = []; | |
for (var i = 0; i < d.length; ++i) { | |
var s = $.extend(true, {}, options.series); | |
if (d[i].data != null) { | |
s.data = d[i].data; // move the data instead of deep-copy | |
delete d[i].data; | |
$.extend(true, s, d[i]); | |
d[i].data = s.data; | |
} | |
else | |
s.data = d[i]; | |
res.push(s); | |
} | |
return res; | |
} | |
function axisNumber(obj, coord) { | |
var a = obj[coord + "axis"]; | |
if (typeof a == "object") // if we got a real axis, extract number | |
a = a.n; | |
if (typeof a != "number") | |
a = 1; // default to first axis | |
return a; | |
} | |
function allAxes() { | |
// return flat array without annoying null entries | |
return $.grep(xaxes.concat(yaxes), function (a) { return a; }); | |
} | |
function canvasToAxisCoords(pos) { | |
// return an object with x/y corresponding to all used axes | |
var res = {}, i, axis; | |
for (i = 0; i < xaxes.length; ++i) { | |
axis = xaxes[i]; | |
if (axis && axis.used) | |
res["x" + axis.n] = axis.c2p(pos.left); | |
} | |
for (i = 0; i < yaxes.length; ++i) { | |
axis = yaxes[i]; | |
if (axis && axis.used) | |
res["y" + axis.n] = axis.c2p(pos.top); | |
} | |
if (res.x1 !== undefined) | |
res.x = res.x1; | |
if (res.y1 !== undefined) | |
res.y = res.y1; | |
return res; | |
} | |
function axisToCanvasCoords(pos) { | |
// get canvas coords from the first pair of x/y found in pos | |
var res = {}, i, axis, key; | |
for (i = 0; i < xaxes.length; ++i) { | |
axis = xaxes[i]; | |
if (axis && axis.used) { | |
key = "x" + axis.n; | |
if (pos[key] == null && axis.n == 1) | |
key = "x"; | |
if (pos[key] != null) { | |
res.left = axis.p2c(pos[key]); | |
break; | |
} | |
} | |
} | |
for (i = 0; i < yaxes.length; ++i) { | |
axis = yaxes[i]; | |
if (axis && axis.used) { | |
key = "y" + axis.n; | |
if (pos[key] == null && axis.n == 1) | |
key = "y"; | |
if (pos[key] != null) { | |
res.top = axis.p2c(pos[key]); | |
break; | |
} | |
} | |
} | |
return res; | |
} | |
function getOrCreateAxis(axes, number) { | |
if (!axes[number - 1]) | |
axes[number - 1] = { | |
n: number, // save the number for future reference | |
direction: axes == xaxes ? "x" : "y", | |
options: $.extend(true, {}, axes == xaxes ? options.xaxis : options.yaxis) | |
}; | |
return axes[number - 1]; | |
} | |
function fillInSeriesOptions() { | |
var i; | |
// collect what we already got of colors | |
var neededColors = series.length, | |
usedColors = [], | |
assignedColors = []; | |
for (i = 0; i < series.length; ++i) { | |
var sc = series[i].color; | |
if (sc != null) { | |
--neededColors; | |
if (typeof sc == "number") | |
assignedColors.push(sc); | |
else | |
usedColors.push($.color.parse(series[i].color)); | |
} | |
} | |
// we might need to generate more colors if higher indices | |
// are assigned | |
for (i = 0; i < assignedColors.length; ++i) { | |
neededColors = Math.max(neededColors, assignedColors[i] + 1); | |
} | |
// produce colors as needed | |
var colors = [], variation = 0; | |
i = 0; | |
while (colors.length < neededColors) { | |
var c; | |
if (options.colors.length == i) // check degenerate case | |
c = $.color.make(100, 100, 100); | |
else | |
c = $.color.parse(options.colors[i]); | |
// vary color if needed | |
var sign = variation % 2 == 1 ? -1 : 1; | |
c.scale('rgb', 1 + sign * Math.ceil(variation / 2) * 0.2) | |
// FIXME: if we're getting to close to something else, | |
// we should probably skip this one | |
colors.push(c); | |
++i; | |
if (i >= options.colors.length) { | |
i = 0; | |
++variation; | |
} | |
} | |
// fill in the options | |
var colori = 0, s; | |
for (i = 0; i < series.length; ++i) { | |
s = series[i]; | |
// assign colors | |
if (s.color == null) { | |
s.color = colors[colori].toString(); | |
++colori; | |
} | |
else if (typeof s.color == "number") | |
s.color = colors[s.color].toString(); | |
// turn on lines automatically in case nothing is set | |
if (s.lines.show == null) { | |
var v, show = true; | |
for (v in s) | |
if (s[v] && s[v].show) { | |
show = false; | |
break; | |
} | |
if (show) | |
s.lines.show = true; | |
} | |
// setup axes | |
s.xaxis = getOrCreateAxis(xaxes, axisNumber(s, "x")); | |
s.yaxis = getOrCreateAxis(yaxes, axisNumber(s, "y")); | |
} | |
} | |
function processData() { | |
var topSentry = Number.POSITIVE_INFINITY, | |
bottomSentry = Number.NEGATIVE_INFINITY, | |
fakeInfinity = Number.MAX_VALUE, | |
i, j, k, m, length, | |
s, points, ps, x, y, axis, val, f, p; | |
function updateAxis(axis, min, max) { | |
if (min < axis.datamin && min != -fakeInfinity) | |
axis.datamin = min; | |
if (max > axis.datamax && max != fakeInfinity) | |
axis.datamax = max; | |
} | |
$.each(allAxes(), function (_, axis) { | |
// init axis | |
axis.datamin = topSentry; | |
axis.datamax = bottomSentry; | |
axis.used = false; | |
}); | |
for (i = 0; i < series.length; ++i) { | |
s = series[i]; | |
s.datapoints = { points: [] }; | |
executeHooks(hooks.processRawData, [ s, s.data, s.datapoints ]); | |
} | |
// first pass: clean and copy data | |
for (i = 0; i < series.length; ++i) { | |
s = series[i]; | |
var data = s.data, format = s.datapoints.format; | |
if (!format) { | |
format = []; | |
// find out how to copy | |
format.push({ x: true, number: true, required: true }); | |
format.push({ y: true, number: true, required: true }); | |
if (s.bars.show || (s.lines.show && s.lines.fill)) { | |
format.push({ y: true, number: true, required: false, defaultValue: 0 }); | |
if (s.bars.horizontal) { | |
delete format[format.length - 1].y; | |
format[format.length - 1].x = true; | |
} | |
} | |
s.datapoints.format = format; | |
} | |
if (s.datapoints.pointsize != null) | |
continue; // already filled in | |
s.datapoints.pointsize = format.length; | |
ps = s.datapoints.pointsize; | |
points = s.datapoints.points; | |
insertSteps = s.lines.show && s.lines.steps; | |
s.xaxis.used = s.yaxis.used = true; | |
for (j = k = 0; j < data.length; ++j, k += ps) { | |
p = data[j]; | |
var nullify = p == null; | |
if (!nullify) { | |
for (m = 0; m < ps; ++m) { | |
val = p[m]; | |
f = format[m]; | |
if (f) { | |
if (f.number && val != null) { | |
val = +val; // convert to number | |
if (isNaN(val)) | |
val = null; | |
else if (val == Infinity) | |
val = fakeInfinity; | |
else if (val == -Infinity) | |
val = -fakeInfinity; | |
} | |
if (val == null) { | |
if (f.required) | |
nullify = true; | |
if (f.defaultValue != null) | |
val = f.defaultValue; | |
} | |
} | |
points[k + m] = val; | |
} | |
} | |
if (nullify) { | |
for (m = 0; m < ps; ++m) { | |
val = points[k + m]; | |
if (val != null) { | |
f = format[m]; | |
// extract min/max info | |
if (f.x) | |
updateAxis(s.xaxis, val, val); | |
if (f.y) | |
updateAxis(s.yaxis, val, val); | |
} | |
points[k + m] = null; | |
} | |
} | |
else { | |
// a little bit of line specific stuff that | |
// perhaps shouldn't be here, but lacking | |
// better means... | |
if (insertSteps && k > 0 | |
&& points[k - ps] != null | |
&& points[k - ps] != points[k] | |
&& points[k - ps + 1] != points[k + 1]) { | |
// copy the point to make room for a middle point | |
for (m = 0; m < ps; ++m) | |
points[k + ps + m] = points[k + m]; | |
// middle point has same y | |
points[k + 1] = points[k - ps + 1]; | |
// we've added a point, better reflect that | |
k += ps; | |
} | |
} | |
} | |
} | |
// give the hooks a chance to run | |
for (i = 0; i < series.length; ++i) { | |
s = series[i]; | |
executeHooks(hooks.processDatapoints, [ s, s.datapoints]); | |
} | |
// second pass: find datamax/datamin for auto-scaling | |
for (i = 0; i < series.length; ++i) { | |
s = series[i]; | |
points = s.datapoints.points, | |
ps = s.datapoints.pointsize; | |
var xmin = topSentry, ymin = topSentry, | |
xmax = bottomSentry, ymax = bottomSentry; | |
for (j = 0; j < points.length; j += ps) { | |
if (points[j] == null) | |
continue; | |
for (m = 0; m < ps; ++m) { | |
val = points[j + m]; | |
f = format[m]; | |
if (!f || val == fakeInfinity || val == -fakeInfinity) | |
continue; | |
if (f.x) { | |
if (val < xmin) | |
xmin = val; | |
if (val > xmax) | |
xmax = val; | |
} | |
if (f.y) { | |
if (val < ymin) | |
ymin = val; | |
if (val > ymax) | |
ymax = val; | |
} | |
} | |
} | |
if (s.bars.show) { | |
// make sure we got room for the bar on the dancing floor | |
var delta = s.bars.align == "left" ? 0 : -s.bars.barWidth/2; | |
if (s.bars.horizontal) { | |
ymin += delta; | |
ymax += delta + s.bars.barWidth; | |
} | |
else { | |
xmin += delta; | |
xmax += delta + s.bars.barWidth; | |
} | |
} | |
updateAxis(s.xaxis, xmin, xmax); | |
updateAxis(s.yaxis, ymin, ymax); | |
} | |
$.each(allAxes(), function (_, axis) { | |
if (axis.datamin == topSentry) | |
axis.datamin = null; | |
if (axis.datamax == bottomSentry) | |
axis.datamax = null; | |
}); | |
} | |
function makeCanvas(skipPositioning, cls) { | |
var c = document.createElement('canvas'); | |
c.className = cls; | |
c.width = canvasWidth; | |
c.height = canvasHeight; | |
if (!skipPositioning) | |
$(c).css({ position: 'absolute', left: 0, top: 0 }); | |
$(c).appendTo(placeholder); | |
if (!c.getContext) // excanvas hack | |
c = window.G_vmlCanvasManager.initElement(c); | |
// used for resetting in case we get replotted | |
c.getContext("2d").save(); | |
return c; | |
} | |
function getCanvasDimensions() { | |
canvasWidth = placeholder.width(); | |
canvasHeight = placeholder.height(); | |
if (canvasWidth <= 0 || canvasHeight <= 0) | |
throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight; | |
} | |
function resizeCanvas(c) { | |
// resizing should reset the state (excanvas seems to be | |
// buggy though) | |
if (c.width != canvasWidth) | |
c.width = canvasWidth; | |
if (c.height != canvasHeight) | |
c.height = canvasHeight; | |
// so try to get back to the initial state (even if it's | |
// gone now, this should be safe according to the spec) | |
var cctx = c.getContext("2d"); | |
cctx.restore(); | |
// and save again | |
cctx.save(); | |
} | |
function setupCanvases() { | |
var reused, | |
existingCanvas = placeholder.children("canvas.base"), | |
existingOverlay = placeholder.children("canvas.overlay"); | |
if (existingCanvas.length == 0 || existingOverlay == 0) { | |
// init everything | |
placeholder.html(""); // make sure placeholder is clear | |
placeholder.css({ padding: 0 }); // padding messes up the positioning | |
if (placeholder.css("position") == 'static') | |
placeholder.css("position", "relative"); // for positioning labels and overlay | |
getCanvasDimensions(); | |
canvas = makeCanvas(true, "base"); | |
overlay = makeCanvas(false, "overlay"); // overlay canvas for interactive features | |
reused = false; | |
} | |
else { | |
// reuse existing elements | |
canvas = existingCanvas.get(0); | |
overlay = existingOverlay.get(0); | |
reused = true; | |
} | |
ctx = canvas.getContext("2d"); | |
octx = overlay.getContext("2d"); | |
// we include the canvas in the event holder too, because IE 7 | |
// sometimes has trouble with the stacking order | |
eventHolder = $([overlay, canvas]); | |
if (reused) { | |
// run shutdown in the old plot object | |
placeholder.data("plot").shutdown(); | |
// reset reused canvases | |
plot.resize(); | |
// make sure overlay pixels are cleared (canvas is cleared when we redraw) | |
octx.clearRect(0, 0, canvasWidth, canvasHeight); | |
// then whack any remaining obvious garbage left | |
eventHolder.unbind(); | |
placeholder.children().not([canvas, overlay]).remove(); | |
} | |
// save in case we get replotted | |
placeholder.data("plot", plot); | |
} | |
function bindEvents() { | |
// bind events | |
if (options.grid.hoverable) { | |
eventHolder.mousemove(onMouseMove); | |
eventHolder.mouseleave(onMouseLeave); | |
} | |
if (options.grid.clickable) | |
eventHolder.click(onClick); | |
executeHooks(hooks.bindEvents, [eventHolder]); | |
} | |
function shutdown() { | |
if (redrawTimeout) | |
clearTimeout(redrawTimeout); | |
eventHolder.unbind("mousemove", onMouseMove); | |
eventHolder.unbind("mouseleave", onMouseLeave); | |
eventHolder.unbind("click", onClick); | |
executeHooks(hooks.shutdown, [eventHolder]); | |
} | |
function setTransformationHelpers(axis) { | |
// set helper functions on the axis, assumes plot area | |
// has been computed already | |
function identity(x) { return x; } | |
var s, m, t = axis.options.transform || identity, | |
it = axis.options.inverseTransform; | |
// precompute how much the axis is scaling a point | |
// in canvas space | |
if (axis.direction == "x") { | |
s = axis.scale = plotWidth / Math.abs(t(axis.max) - t(axis.min)); | |
m = Math.min(t(axis.max), t(axis.min)); | |
} | |
else { | |
s = axis.scale = plotHeight / Math.abs(t(axis.max) - t(axis.min)); | |
s = -s; | |
m = Math.max(t(axis.max), t(axis.min)); | |
} | |
// data point to canvas coordinate | |
if (t == identity) // slight optimization | |
axis.p2c = function (p) { return (p - m) * s; }; | |
else | |
axis.p2c = function (p) { return (t(p) - m) * s; }; | |
// canvas coordinate to data point | |
if (!it) | |
axis.c2p = function (c) { return m + c / s; }; | |
else | |
axis.c2p = function (c) { return it(m + c / s); }; | |
} | |
function measureTickLabels(axis) { | |
var opts = axis.options, i, ticks = axis.ticks || [], labels = [], | |
l, w = opts.labelWidth, h = opts.labelHeight, dummyDiv; | |
function makeDummyDiv(labels, width) { | |
return $('<div style="position:absolute;top:-10000px;' + width + 'font-size:smaller">' + | |
'<div class="' + axis.direction + 'Axis ' + axis.direction + axis.n + 'Axis">' | |
+ labels.join("") + '</div></div>') | |
.appendTo(placeholder); | |
} | |
if (axis.direction == "x") { | |
// to avoid measuring the widths of the labels (it's slow), we | |
// construct fixed-size boxes and put the labels inside | |
// them, we don't need the exact figures and the | |
// fixed-size box content is easy to center | |
if (w == null) | |
w = Math.floor(canvasWidth / (ticks.length > 0 ? ticks.length : 1)); | |
// measure x label heights | |
if (h == null) { | |
labels = []; | |
for (i = 0; i < ticks.length; ++i) { | |
l = ticks[i].label; | |
if (l) | |
labels.push('<div class="tickLabel" style="float:left;width:' + w + 'px">' + l + '</div>'); | |
} | |
if (labels.length > 0) { | |
// stick them all in the same div and measure | |
// collective height | |
labels.push('<div style="clear:left"></div>'); | |
dummyDiv = makeDummyDiv(labels, "width:10000px;"); | |
h = dummyDiv.height(); | |
dummyDiv.remove(); | |
} | |
} | |
} | |
else if (w == null || h == null) { | |
// calculate y label dimensions | |
for (i = 0; i < ticks.length; ++i) { | |
l = ticks[i].label; | |
if (l) | |
labels.push('<div class="tickLabel">' + l + '</div>'); | |
} | |
if (labels.length > 0) { | |
dummyDiv = makeDummyDiv(labels, ""); | |
if (w == null) | |
w = dummyDiv.children().width(); | |
if (h == null) | |
h = dummyDiv.find("div.tickLabel").height(); | |
dummyDiv.remove(); | |
} | |
} | |
if (w == null) | |
w = 0; | |
if (h == null) | |
h = 0; | |
axis.labelWidth = w; | |
axis.labelHeight = h; | |
} | |
function allocateAxisBoxFirstPhase(axis) { | |
// find the bounding box of the axis by looking at label | |
// widths/heights and ticks, make room by diminishing the | |
// plotOffset | |
var lw = axis.labelWidth, | |
lh = axis.labelHeight, | |
pos = axis.options.position, | |
tickLength = axis.options.tickLength, | |
axismargin = options.grid.axisMargin, | |
padding = options.grid.labelMargin, | |
all = axis.direction == "x" ? xaxes : yaxes, | |
index; | |
// determine axis margin | |
var samePosition = $.grep(all, function (a) { | |
return a && a.options.position == pos && a.reserveSpace; | |
}); | |
if ($.inArray(axis, samePosition) == samePosition.length - 1) | |
axismargin = 0; // outermost | |
// determine tick length - if we're innermost, we can use "full" | |
if (tickLength == null) | |
tickLength = "full"; | |
var sameDirection = $.grep(all, function (a) { | |
return a && a.reserveSpace; | |
}); | |
var innermost = $.inArray(axis, sameDirection) == 0; | |
if (!innermost && tickLength == "full") | |
tickLength = 5; | |
if (!isNaN(+tickLength)) | |
padding += +tickLength; | |
// compute box | |
if (axis.direction == "x") { | |
lh += padding; | |
if (pos == "bottom") { | |
plotOffset.bottom += lh + axismargin; | |
axis.box = { top: canvasHeight - plotOffset.bottom, height: lh }; | |
} | |
else { | |
axis.box = { top: plotOffset.top + axismargin, height: lh }; | |
plotOffset.top += lh + axismargin; | |
} | |
} | |
else { | |
lw += padding; | |
if (pos == "left") { | |
axis.box = { left: plotOffset.left + axismargin, width: lw }; | |
plotOffset.left += lw + axismargin; | |
} | |
else { | |
plotOffset.right += lw + axismargin; | |
axis.box = { left: canvasWidth - plotOffset.right, width: lw }; | |
} | |
} | |
// save for future reference | |
axis.position = pos; | |
axis.tickLength = tickLength; | |
axis.box.padding = padding; | |
axis.innermost = innermost; | |
} | |
function allocateAxisBoxSecondPhase(axis) { | |
// set remaining bounding box coordinates | |
if (axis.direction == "x") { | |
axis.box.left = plotOffset.left; | |
axis.box.width = plotWidth; | |
} | |
else { | |
axis.box.top = plotOffset.top; | |
axis.box.height = plotHeight; | |
} | |
} | |
function setupGrid() { | |
var i, axes = allAxes(); | |
// first calculate the plot and axis box dimensions | |
$.each(axes, function (_, axis) { | |
axis.show = axis.options.show; | |
if (axis.show == null) | |
axis.show = axis.used; // by default an axis is visible if it's got data | |
axis.reserveSpace = axis.show || axis.options.reserveSpace; | |
setRange(axis); | |
}); | |
allocatedAxes = $.grep(axes, function (axis) { return axis.reserveSpace; }); | |
plotOffset.left = plotOffset.right = plotOffset.top = plotOffset.bottom = 0; | |
if (options.grid.show) { | |
$.each(allocatedAxes, function (_, axis) { | |
// make the ticks | |
setupTickGeneration(axis); | |
setTicks(axis); | |
snapRangeToTicks(axis, axis.ticks); | |
// find labelWidth/Height for axis | |
measureTickLabels(axis); | |
}); | |
// with all dimensions in house, we can compute the | |
// axis boxes, start from the outside (reverse order) | |
for (i = allocatedAxes.length - 1; i >= 0; --i) | |
allocateAxisBoxFirstPhase(allocatedAxes[i]); | |
// make sure we've got enough space for things that | |
// might stick out | |
var minMargin = options.grid.minBorderMargin; | |
if (minMargin == null) { | |
minMargin = 0; | |
for (i = 0; i < series.length; ++i) | |
minMargin = Math.max(minMargin, series[i].points.radius + series[i].points.lineWidth/2); | |
} | |
for (var a in plotOffset) { | |
plotOffset[a] += options.grid.borderWidth; | |
plotOffset[a] = Math.max(minMargin, plotOffset[a]); | |
} | |
} | |
plotWidth = canvasWidth - plotOffset.left - plotOffset.right; | |
plotHeight = canvasHeight - plotOffset.bottom - plotOffset.top; | |
// now we got the proper plotWidth/Height, we can compute the scaling | |
$.each(axes, function (_, axis) { | |
setTransformationHelpers(axis); | |
}); | |
if (options.grid.show) { | |
$.each(allocatedAxes, function (_, axis) { | |
allocateAxisBoxSecondPhase(axis); | |
}); | |
insertAxisLabels(); | |
} | |
insertLegend(); | |
} | |
function setRange(axis) { | |
var opts = axis.options, | |
min = +(opts.min != null ? opts.min : axis.datamin), | |
max = +(opts.max != null ? opts.max : axis.datamax), | |
delta = max - min; | |
if (delta == 0.0) { | |
// degenerate case | |
var widen = max == 0 ? 1 : 0.01; | |
if (opts.min == null) | |
min -= widen; | |
// always widen max if we couldn't widen min to ensure we | |
// don't fall into min == max which doesn't work | |
if (opts.max == null || opts.min != null) | |
max += widen; | |
} | |
else { | |
// consider autoscaling | |
var margin = opts.autoscaleMargin; | |
if (margin != null) { | |
if (opts.min == null) { | |
min -= delta * margin; | |
// make sure we don't go below zero if all values | |
// are positive | |
if (min < 0 && axis.datamin != null && axis.datamin >= 0) | |
min = 0; | |
} | |
if (opts.max == null) { | |
max += delta * margin; | |
if (max > 0 && axis.datamax != null && axis.datamax <= 0) | |
max = 0; | |
} | |
} | |
} | |
axis.min = min; | |
axis.max = max; | |
} | |
function setupTickGeneration(axis) { | |
var opts = axis.options; | |
// estimate number of ticks | |
var noTicks; | |
if (typeof opts.ticks == "number" && opts.ticks > 0) | |
noTicks = opts.ticks; | |
else | |
// heuristic based on the model a*sqrt(x) fitted to | |
// some data points that seemed reasonable | |
noTicks = 0.3 * Math.sqrt(axis.direction == "x" ? canvasWidth : canvasHeight); | |
var delta = (axis.max - axis.min) / noTicks, | |
size, generator, unit, formatter, i, magn, norm; | |
if (opts.mode == "time") { | |
// pretty handling of time | |
// map of app. size of time units in milliseconds | |
var timeUnitSize = { | |
"second": 1000, | |
"minute": 60 * 1000, | |
"hour": 60 * 60 * 1000, | |
"day": 24 * 60 * 60 * 1000, | |
"month": 30 * 24 * 60 * 60 * 1000, | |
"year": 365.2425 * 24 * 60 * 60 * 1000 | |
}; | |
// the allowed tick sizes, after 1 year we use | |
// an integer algorithm | |
var spec = [ | |
[1, "second"], [2, "second"], [5, "second"], [10, "second"], | |
[30, "second"], | |
[1, "minute"], [2, "minute"], [5, "minute"], [10, "minute"], | |
[30, "minute"], | |
[1, "hour"], [2, "hour"], [4, "hour"], | |
[8, "hour"], [12, "hour"], | |
[1, "day"], [2, "day"], [3, "day"], | |
[0.25, "month"], [0.5, "month"], [1, "month"], | |
[2, "month"], [3, "month"], [6, "month"], | |
[1, "year"] | |
]; | |
var minSize = 0; | |
if (opts.minTickSize != null) { | |
if (typeof opts.tickSize == "number") | |
minSize = opts.tickSize; | |
else | |
minSize = opts.minTickSize[0] * timeUnitSize[opts.minTickSize[1]]; | |
} | |
for (var i = 0; i < spec.length - 1; ++i) | |
if (delta < (spec[i][0] * timeUnitSize[spec[i][1]] | |
+ spec[i + 1][0] * timeUnitSize[spec[i + 1][1]]) / 2 | |
&& spec[i][0] * timeUnitSize[spec[i][1]] >= minSize) | |
break; | |
size = spec[i][0]; | |
unit = spec[i][1]; | |
// special-case the possibility of several years | |
if (unit == "year") { | |
magn = Math.pow(10, Math.floor(Math.log(delta / timeUnitSize.year) / Math.LN10)); | |
norm = (delta / timeUnitSize.year) / magn; | |
if (norm < 1.5) | |
size = 1; | |
else if (norm < 3) | |
size = 2; | |
else if (norm < 7.5) | |
size = 5; | |
else | |
size = 10; | |
size *= magn; | |
} | |
axis.tickSize = opts.tickSize || [size, unit]; | |
generator = function(axis) { | |
var ticks = [], | |
tickSize = axis.tickSize[0], unit = axis.tickSize[1], | |
d = new Date(axis.min); | |
var step = tickSize * timeUnitSize[unit]; | |
if (unit == "second") | |
d.setUTCSeconds(floorInBase(d.getUTCSeconds(), tickSize)); | |
if (unit == "minute") | |
d.setUTCMinutes(floorInBase(d.getUTCMinutes(), tickSize)); | |
if (unit == "hour") | |
d.setUTCHours(floorInBase(d.getUTCHours(), tickSize)); | |
if (unit == "month") | |
d.setUTCMonth(floorInBase(d.getUTCMonth(), tickSize)); | |
if (unit == "year") | |
d.setUTCFullYear(floorInBase(d.getUTCFullYear(), tickSize)); | |
// reset smaller components | |
d.setUTCMilliseconds(0); | |
if (step >= timeUnitSize.minute) | |
d.setUTCSeconds(0); | |
if (step >= timeUnitSize.hour) | |
d.setUTCMinutes(0); | |
if (step >= timeUnitSize.day) | |
d.setUTCHours(0); | |
if (step >= timeUnitSize.day * 4) | |
d.setUTCDate(1); | |
if (step >= timeUnitSize.year) | |
d.setUTCMonth(0); | |
var carry = 0, v = Number.NaN, prev; | |
do { | |
prev = v; | |
v = d.getTime(); | |
ticks.push(v); | |
if (unit == "month") { | |
if (tickSize < 1) { | |
// a bit complicated - we'll divide the month | |
// up but we need to take care of fractions | |
// so we don't end up in the middle of a day | |
d.setUTCDate(1); | |
var start = d.getTime(); | |
d.setUTCMonth(d.getUTCMonth() + 1); | |
var end = d.getTime(); | |
d.setTime(v + carry * timeUnitSize.hour + (end - start) * tickSize); | |
carry = d.getUTCHours(); | |
d.setUTCHours(0); | |
} | |
else | |
d.setUTCMonth(d.getUTCMonth() + tickSize); | |
} | |
else if (unit == "year") { | |
d.setUTCFullYear(d.getUTCFullYear() + tickSize); | |
} | |
else | |
d.setTime(v + step); | |
} while (v < axis.max && v != prev); | |
return ticks; | |
}; | |
formatter = function (v, axis) { | |
var d = new Date(v); | |
// first check global format | |
if (opts.timeformat != null) | |
return $.plot.formatDate(d, opts.timeformat, opts.monthNames); | |
var t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]]; | |
var span = axis.max - axis.min; | |
var suffix = (opts.twelveHourClock) ? " %p" : ""; | |
if (t < timeUnitSize.minute) | |
fmt = "%h:%M:%S" + suffix; | |
else if (t < timeUnitSize.day) { | |
if (span < 2 * timeUnitSize.day) | |
fmt = "%h:%M" + suffix; | |
else | |
fmt = "%b %d %h:%M" + suffix; | |
} | |
else if (t < timeUnitSize.month) | |
fmt = "%b %d"; | |
else if (t < timeUnitSize.year) { | |
if (span < timeUnitSize.year) | |
fmt = "%b"; | |
else | |
fmt = "%b %y"; | |
} | |
else | |
fmt = "%y"; | |
return $.plot.formatDate(d, fmt, opts.monthNames); | |
}; | |
} | |
else { | |
// pretty rounding of base-10 numbers | |
var maxDec = opts.tickDecimals; | |
var dec = -Math.floor(Math.log(delta) / Math.LN10); | |
if (maxDec != null && dec > maxDec) | |
dec = maxDec; | |
magn = Math.pow(10, -dec); | |
norm = delta / magn; // norm is between 1.0 and 10.0 | |
if (norm < 1.5) | |
size = 1; | |
else if (norm < 3) { | |
size = 2; | |
// special case for 2.5, requires an extra decimal | |
if (norm > 2.25 && (maxDec == null || dec + 1 <= maxDec)) { | |
size = 2.5; | |
++dec; | |
} | |
} | |
else if (norm < 7.5) | |
size = 5; | |
else | |
size = 10; | |
size *= magn; | |
if (opts.minTickSize != null && size < opts.minTickSize) | |
size = opts.minTickSize; | |
axis.tickDecimals = Math.max(0, maxDec != null ? maxDec : dec); | |
axis.tickSize = opts.tickSize || size; | |
generator = function (axis) { | |
var ticks = []; | |
// spew out all possible ticks | |
var start = floorInBase(axis.min, axis.tickSize), | |
i = 0, v = Number.NaN, prev; | |
do { | |
prev = v; | |
v = start + i * axis.tickSize; | |
ticks.push(v); | |
++i; | |
} while (v < axis.max && v != prev); | |
return ticks; | |
}; | |
formatter = function (v, axis) { | |
return v.toFixed(axis.tickDecimals); | |
}; | |
} | |
if (opts.alignTicksWithAxis != null) { | |
var otherAxis = (axis.direction == "x" ? xaxes : yaxes)[opts.alignTicksWithAxis - 1]; | |
if (otherAxis && otherAxis.used && otherAxis != axis) { | |
// consider snapping min/max to outermost nice ticks | |
var niceTicks = generator(axis); | |
if (niceTicks.length > 0) { | |
if (opts.min == null) | |
axis.min = Math.min(axis.min, niceTicks[0]); | |
if (opts.max == null && niceTicks.length > 1) | |
axis.max = Math.max(axis.max, niceTicks[niceTicks.length - 1]); | |
} | |
generator = function (axis) { | |
// copy ticks, scaled to this axis | |
var ticks = [], v, i; | |
for (i = 0; i < otherAxis.ticks.length; ++i) { | |
v = (otherAxis.ticks[i].v - otherAxis.min) / (otherAxis.max - otherAxis.min); | |
v = axis.min + v * (axis.max - axis.min); | |
ticks.push(v); | |
} | |
return ticks; | |
}; | |
// we might need an extra decimal since forced | |
// ticks don't necessarily fit naturally | |
if (axis.mode != "time" && opts.tickDecimals == null) { | |
var extraDec = Math.max(0, -Math.floor(Math.log(delta) / Math.LN10) + 1), | |
ts = generator(axis); | |
// only proceed if the tick interval rounded | |
// with an extra decimal doesn't give us a | |
// zero at end | |
if (!(ts.length > 1 && /\..*0$/.test((ts[1] - ts[0]).toFixed(extraDec)))) | |
axis.tickDecimals = extraDec; | |
} | |
} | |
} | |
axis.tickGenerator = generator; | |
if ($.isFunction(opts.tickFormatter)) | |
axis.tickFormatter = function (v, axis) { return "" + opts.tickFormatter(v, axis); }; | |
else | |
axis.tickFormatter = formatter; | |
} | |
function setTicks(axis) { | |
var oticks = axis.options.ticks, ticks = []; | |
if (oticks == null || (typeof oticks == "number" && oticks > 0)) | |
ticks = axis.tickGenerator(axis); | |
else if (oticks) { | |
if ($.isFunction(oticks)) | |
// generate the ticks | |
ticks = oticks({ min: axis.min, max: axis.max }); | |
else | |
ticks = oticks; | |
} | |
// clean up/labelify the supplied ticks, copy them over | |
var i, v; | |
axis.ticks = []; | |
for (i = 0; i < ticks.length; ++i) { | |
var label = null; | |
var t = ticks[i]; | |
if (typeof t == "object") { | |
v = +t[0]; | |
if (t.length > 1) | |
label = t[1]; | |
} | |
else | |
v = +t; | |
if (label == null) | |
label = axis.tickFormatter(v, axis); | |
if (!isNaN(v)) | |
axis.ticks.push({ v: v, label: label }); | |
} | |
} | |
function snapRangeToTicks(axis, ticks) { | |
if (axis.options.autoscaleMargin && ticks.length > 0) { | |
// snap to ticks | |
if (axis.options.min == null) | |
axis.min = Math.min(axis.min, ticks[0].v); | |
if (axis.options.max == null && ticks.length > 1) | |
axis.max = Math.max(axis.max, ticks[ticks.length - 1].v); | |
} | |
} | |
function draw() { | |
ctx.clearRect(0, 0, canvasWidth, canvasHeight); | |
var grid = options.grid; | |
// draw background, if any | |
if (grid.show && grid.backgroundColor) | |
drawBackground(); | |
if (grid.show && !grid.aboveData) | |
drawGrid(); | |
for (var i = 0; i < series.length; ++i) { | |
executeHooks(hooks.drawSeries, [ctx, series[i]]); | |
drawSeries(series[i]); | |
} | |
executeHooks(hooks.draw, [ctx]); | |
if (grid.show && grid.aboveData) | |
drawGrid(); | |
} | |
function extractRange(ranges, coord) { | |
var axis, from, to, key, axes = allAxes(); | |
for (i = 0; i < axes.length; ++i) { | |
axis = axes[i]; | |
if (axis.direction == coord) { | |
key = coord + axis.n + "axis"; | |
if (!ranges[key] && axis.n == 1) | |
key = coord + "axis"; // support x1axis as xaxis | |
if (ranges[key]) { | |
from = ranges[key].from; | |
to = ranges[key].to; | |
break; | |
} | |
} | |
} | |
// backwards-compat stuff - to be removed in future | |
if (!ranges[key]) { | |
axis = coord == "x" ? xaxes[0] : yaxes[0]; | |
from = ranges[coord + "1"]; | |
to = ranges[coord + "2"]; | |
} | |
// auto-reverse as an added bonus | |
if (from != null && to != null && from > to) { | |
var tmp = from; | |
from = to; | |
to = tmp; | |
} | |
return { from: from, to: to, axis: axis }; | |
} | |
function drawBackground() { | |
ctx.save(); | |
ctx.translate(plotOffset.left, plotOffset.top); | |
ctx.fillStyle = getColorOrGradient(options.grid.backgroundColor, plotHeight, 0, "rgba(255, 255, 255, 0)"); | |
ctx.fillRect(0, 0, plotWidth, plotHeight); | |
ctx.restore(); | |
} | |
function drawGrid() { | |
var i; | |
ctx.save(); | |
ctx.translate(plotOffset.left, plotOffset.top); | |
// draw markings | |
var markings = options.grid.markings; | |
if (markings) { | |
if ($.isFunction(markings)) { | |
var axes = plot.getAxes(); | |
// xmin etc. is backwards compatibility, to be | |
// removed in the future | |
axes.xmin = axes.xaxis.min; | |
axes.xmax = axes.xaxis.max; | |
axes.ymin = axes.yaxis.min; | |
axes.ymax = axes.yaxis.max; | |
markings = markings(axes); | |
} | |
for (i = 0; i < markings.length; ++i) { | |
var m = markings[i], | |
xrange = extractRange(m, "x"), | |
yrange = extractRange(m, "y"); | |
// fill in missing | |
if (xrange.from == null) | |
xrange.from = xrange.axis.min; | |
if (xrange.to == null) | |
xrange.to = xrange.axis.max; | |
if (yrange.from == null) | |
yrange.from = yrange.axis.min; | |
if (yrange.to == null) | |
yrange.to = yrange.axis.max; | |
// clip | |
if (xrange.to < xrange.axis.min || xrange.from > xrange.axis.max || | |
yrange.to < yrange.axis.min || yrange.from > yrange.axis.max) | |
continue; | |
xrange.from = Math.max(xrange.from, xrange.axis.min); | |
xrange.to = Math.min(xrange.to, xrange.axis.max); | |
yrange.from = Math.max(yrange.from, yrange.axis.min); | |
yrange.to = Math.min(yrange.to, yrange.axis.max); | |
if (xrange.from == xrange.to && yrange.from == yrange.to) | |
continue; | |
// then draw | |
xrange.from = xrange.axis.p2c(xrange.from); | |
xrange.to = xrange.axis.p2c(xrange.to); | |
yrange.from = yrange.axis.p2c(yrange.from); | |
yrange.to = yrange.axis.p2c(yrange.to); | |
if (xrange.from == xrange.to || yrange.from == yrange.to) { | |
// draw line | |
ctx.beginPath(); | |
ctx.strokeStyle = m.color || options.grid.markingsColor; | |
ctx.lineWidth = m.lineWidth || options.grid.markingsLineWidth; | |
ctx.moveTo(xrange.from, yrange.from); | |
ctx.lineTo(xrange.to, yrange.to); | |
ctx.stroke(); | |
} | |
else { | |
// fill area | |
ctx.fillStyle = m.color || options.grid.markingsColor; | |
ctx.fillRect(xrange.from, yrange.to, | |
xrange.to - xrange.from, | |
yrange.from - yrange.to); | |
} | |
} | |
} | |
// draw the ticks | |
var axes = allAxes(), bw = options.grid.borderWidth; | |
for (var j = 0; j < axes.length; ++j) { | |
var axis = axes[j], box = axis.box, | |
t = axis.tickLength, x, y, xoff, yoff; | |
if (!axis.show || axis.ticks.length == 0) | |
continue | |
ctx.strokeStyle = axis.options.tickColor || $.color.parse(axis.options.color).scale('a', 0.22).toString(); | |
ctx.lineWidth = 1; | |
// find the edges | |
if (axis.direction == "x") { | |
x = 0; | |
if (t == "full") | |
y = (axis.position == "top" ? 0 : plotHeight); | |
else | |
y = box.top - plotOffset.top + (axis.position == "top" ? box.height : 0); | |
} | |
else { | |
y = 0; | |
if (t == "full") | |
x = (axis.position == "left" ? 0 : plotWidth); | |
else | |
x = box.left - plotOffset.left + (axis.position == "left" ? box.width : 0); | |
} | |
// draw tick bar | |
if (!axis.innermost) { | |
ctx.beginPath(); | |
xoff = yoff = 0; | |
if (axis.direction == "x") | |
xoff = plotWidth; | |
else | |
yoff = plotHeight; | |
if (ctx.lineWidth == 1) { | |
x = Math.floor(x) + 0.5; | |
y = Math.floor(y) + 0.5; | |
} | |
ctx.moveTo(x, y); | |
ctx.lineTo(x + xoff, y + yoff); | |
ctx.stroke(); | |
} | |
// draw ticks | |
ctx.beginPath(); | |
for (i = 0; i < axis.ticks.length; ++i) { | |
var v = axis.ticks[i].v; | |
xoff = yoff = 0; | |
if (v < axis.min || v > axis.max | |
// skip those lying on the axes if we got a border | |
|| (t == "full" && bw > 0 | |
&& (v == axis.min || v == axis.max))) | |
continue; | |
if (axis.direction == "x") { | |
x = axis.p2c(v); | |
yoff = t == "full" ? -plotHeight : t; | |
if (axis.position == "top") | |
yoff = -yoff; | |
} | |
else { | |
y = axis.p2c(v); | |
xoff = t == "full" ? -plotWidth : t; | |
if (axis.position == "left") | |
xoff = -xoff; | |
} | |
if (ctx.lineWidth == 1) { | |
if (axis.direction == "x") | |
x = Math.floor(x) + 0.5; | |
else | |
y = Math.floor(y) + 0.5; | |
} | |
ctx.moveTo(x, y); | |
ctx.lineTo(x + xoff, y + yoff); | |
} | |
ctx.stroke(); | |
} | |
// draw border | |
if (bw) { | |
ctx.lineWidth = bw; | |
ctx.strokeStyle = options.grid.borderColor; | |
ctx.strokeRect(-bw/2, -bw/2, plotWidth + bw, plotHeight + bw); | |
} | |
ctx.restore(); | |
} | |
function insertAxisLabels() { | |
placeholder.find(".tickLabels").remove(); | |
var html = ['<div class="tickLabels" style="font-size:smaller">']; | |
var axes = allAxes(); | |
for (var j = 0; j < axes.length; ++j) { | |
var axis = axes[j], box = axis.box; | |
if (!axis.show) | |
continue; | |
//debug: html.push('<div style="position:absolute;opacity:0.10;background-color:red;left:' + box.left + 'px;top:' + box.top + 'px;width:' + box.width + 'px;height:' + box.height + 'px"></div>') | |
html.push('<div class="' + axis.direction + 'Axis ' + axis.direction + axis.n + 'Axis" style="color:' + axis.options.color + '">'); | |
for (var i = 0; i < axis.ticks.length; ++i) { | |
var tick = axis.ticks[i]; | |
if (!tick.label || tick.v < axis.min || tick.v > axis.max) | |
continue; | |
var pos = {}, align; | |
if (axis.direction == "x") { | |
align = "center"; | |
pos.left = Math.round(plotOffset.left + axis.p2c(tick.v) - axis.labelWidth/2); | |
if (axis.position == "bottom") | |
pos.top = box.top + box.padding; | |
else | |
pos.bottom = canvasHeight - (box.top + box.height - box.padding); | |
} | |
else { | |
pos.top = Math.round(plotOffset.top + axis.p2c(tick.v) - axis.labelHeight/2); | |
if (axis.position == "left") { | |
pos.right = canvasWidth - (box.left + box.width - box.padding) | |
align = "right"; | |
} | |
else { | |
pos.left = box.left + box.padding; | |
align = "left"; | |
} | |
} | |
pos.width = axis.labelWidth; | |
var style = ["position:absolute", "text-align:" + align ]; | |
for (var a in pos) | |
style.push(a + ":" + pos[a] + "px") | |
html.push('<div class="tickLabel" style="' + style.join(';') + '">' + tick.label + '</div>'); | |
} | |
html.push('</div>'); | |
} | |
html.push('</div>'); | |
placeholder.append(html.join("")); | |
} | |
function drawSeries(series) { | |
if (series.lines.show) | |
drawSeriesLines(series); | |
if (series.bars.show) | |
drawSeriesBars(series); | |
if (series.points.show) | |
drawSeriesPoints(series); | |
} | |
function drawSeriesLines(series) { | |
function plotLine(datapoints, xoffset, yoffset, axisx, axisy) { | |
var points = datapoints.points, | |
ps = datapoints.pointsize, | |
prevx = null, prevy = null; | |
ctx.beginPath(); | |
for (var i = ps; i < points.length; i += ps) { | |
var x1 = points[i - ps], y1 = points[i - ps + 1], | |
x2 = points[i], y2 = points[i + 1]; | |
if (x1 == null || x2 == null) | |
continue; | |
// clip with ymin | |
if (y1 <= y2 && y1 < axisy.min) { | |
if (y2 < axisy.min) | |
continue; // line segment is outside | |
// compute new intersection point | |
x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; | |
y1 = axisy.min; | |
} | |
else if (y2 <= y1 && y2 < axisy.min) { | |
if (y1 < axisy.min) | |
continue; | |
x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; | |
y2 = axisy.min; | |
} | |
// clip with ymax | |
if (y1 >= y2 && y1 > axisy.max) { | |
if (y2 > axisy.max) | |
continue; | |
x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; | |
y1 = axisy.max; | |
} | |
else if (y2 >= y1 && y2 > axisy.max) { | |
if (y1 > axisy.max) | |
continue; | |
x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; | |
y2 = axisy.max; | |
} | |
// clip with xmin | |
if (x1 <= x2 && x1 < axisx.min) { | |
if (x2 < axisx.min) | |
continue; | |
y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; | |
x1 = axisx.min; | |
} | |
else if (x2 <= x1 && x2 < axisx.min) { | |
if (x1 < axisx.min) | |
continue; | |
y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; | |
x2 = axisx.min; | |
} | |
// clip with xmax | |
if (x1 >= x2 && x1 > axisx.max) { | |
if (x2 > axisx.max) | |
continue; | |
y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; | |
x1 = axisx.max; | |
} | |
else if (x2 >= x1 && x2 > axisx.max) { | |
if (x1 > axisx.max) | |
continue; | |
y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; | |
x2 = axisx.max; | |
} | |
if (x1 != prevx || y1 != prevy) | |
ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset); | |
prevx = x2; | |
prevy = y2; | |
ctx.lineTo(axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset); | |
} | |
ctx.stroke(); | |
} | |
function plotLineArea(datapoints, axisx, axisy) { | |
var points = datapoints.points, | |
ps = datapoints.pointsize, | |
bottom = Math.min(Math.max(0, axisy.min), axisy.max), | |
i = 0, top, areaOpen = false, | |
ypos = 1, segmentStart = 0, segmentEnd = 0; | |
// we process each segment in two turns, first forward | |
// direction to sketch out top, then once we hit the | |
// end we go backwards to sketch the bottom | |
while (true) { | |
if (ps > 0 && i > points.length + ps) | |
break; | |
i += ps; // ps is negative if going backwards | |
var x1 = points[i - ps], | |
y1 = points[i - ps + ypos], | |
x2 = points[i], y2 = points[i + ypos]; | |
if (areaOpen) { | |
if (ps > 0 && x1 != null && x2 == null) { | |
// at turning point | |
segmentEnd = i; | |
ps = -ps; | |
ypos = 2; | |
continue; | |
} | |
if (ps < 0 && i == segmentStart + ps) { | |
// done with the reverse sweep | |
ctx.fill(); | |
areaOpen = false; | |
ps = -ps; | |
ypos = 1; | |
i = segmentStart = segmentEnd + ps; | |
continue; | |
} | |
} | |
if (x1 == null || x2 == null) | |
continue; | |
// clip x values | |
// clip with xmin | |
if (x1 <= x2 && x1 < axisx.min) { | |
if (x2 < axisx.min) | |
continue; | |
y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; | |
x1 = axisx.min; | |
} | |
else if (x2 <= x1 && x2 < axisx.min) { | |
if (x1 < axisx.min) | |
continue; | |
y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; | |
x2 = axisx.min; | |
} | |
// clip with xmax | |
if (x1 >= x2 && x1 > axisx.max) { | |
if (x2 > axisx.max) | |
continue; | |
y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; | |
x1 = axisx.max; | |
} | |
else if (x2 >= x1 && x2 > axisx.max) { | |
if (x1 > axisx.max) | |
continue; | |
y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; | |
x2 = axisx.max; | |
} | |
if (!areaOpen) { | |
// open area | |
ctx.beginPath(); | |
ctx.moveTo(axisx.p2c(x1), axisy.p2c(bottom)); | |
areaOpen = true; | |
} | |
// now first check the case where both is outside | |
if (y1 >= axisy.max && y2 >= axisy.max) { | |
ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.max)); | |
ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.max)); | |
continue; | |
} | |
else if (y1 <= axisy.min && y2 <= axisy.min) { | |
ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min)); | |
ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.min)); | |
continue; | |
} | |
// else it's a bit more complicated, there might | |
// be a flat maxed out rectangle first, then a | |
// triangular cutout or reverse; to find these | |
// keep track of the current x values | |
var x1old = x1, x2old = x2; | |
// clip the y values, without shortcutting, we | |
// go through all cases in turn | |
// clip with ymin | |
if (y1 <= y2 && y1 < axisy.min && y2 >= axisy.min) { | |
x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; | |
y1 = axisy.min; | |
} | |
else if (y2 <= y1 && y2 < axisy.min && y1 >= axisy.min) { | |
x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; | |
y2 = axisy.min; | |
} | |
// clip with ymax | |
if (y1 >= y2 && y1 > axisy.max && y2 <= axisy.max) { | |
x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; | |
y1 = axisy.max; | |
} | |
else if (y2 >= y1 && y2 > axisy.max && y1 <= axisy.max) { | |
x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; | |
y2 = axisy.max; | |
} | |
// if the x value was changed we got a rectangle | |
// to fill | |
if (x1 != x1old) { | |
ctx.lineTo(axisx.p2c(x1old), axisy.p2c(y1)); | |
// it goes to (x1, y1), but we fill that below | |
} | |
// fill triangular section, this sometimes result | |
// in redundant points if (x1, y1) hasn't changed | |
// from previous line to, but we just ignore that | |
ctx.lineTo(axisx.p2c(x1), axisy.p2c(y1)); | |
ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2)); | |
// fill the other rectangle if it's there | |
if (x2 != x2old) { | |
ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2)); | |
ctx.lineTo(axisx.p2c(x2old), axisy.p2c(y2)); | |
} | |
} | |
} | |
ctx.save(); | |
ctx.translate(plotOffset.left, plotOffset.top); | |
ctx.lineJoin = "round"; | |
var lw = series.lines.lineWidth, | |
sw = series.shadowSize; | |
// FIXME: consider another form of shadow when filling is turned on | |
if (lw > 0 && sw > 0) { | |
// draw shadow as a thick and thin line with transparency | |
ctx.lineWidth = sw; | |
ctx.strokeStyle = "rgba(0,0,0,0.1)"; | |
// position shadow at angle from the mid of line | |
var angle = Math.PI/18; | |
plotLine(series.datapoints, Math.sin(angle) * (lw/2 + sw/2), Math.cos(angle) * (lw/2 + sw/2), series.xaxis, series.yaxis); | |
ctx.lineWidth = sw/2; | |
plotLine(series.datapoints, Math.sin(angle) * (lw/2 + sw/4), Math.cos(angle) * (lw/2 + sw/4), series.xaxis, series.yaxis); | |
} | |
ctx.lineWidth = lw; | |
ctx.strokeStyle = series.color; | |
var fillStyle = getFillStyle(series.lines, series.color, 0, plotHeight); | |
if (fillStyle) { | |
ctx.fillStyle = fillStyle; | |
plotLineArea(series.datapoints, series.xaxis, series.yaxis); | |
} | |
if (lw > 0) | |
plotLine(series.datapoints, 0, 0, series.xaxis, series.yaxis); | |
ctx.restore(); | |
} | |
function drawSeriesPoints(series) { | |
function plotPoints(datapoints, radius, fillStyle, offset, shadow, axisx, axisy, symbol) { | |
var points = datapoints.points, ps = datapoints.pointsize; | |
for (var i = 0; i < points.length; i += ps) { | |
var x = points[i], y = points[i + 1]; | |
if (x == null || x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) | |
continue; | |
ctx.beginPath(); | |
x = axisx.p2c(x); | |
y = axisy.p2c(y) + offset; | |
if (symbol == "circle") | |
ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false); | |
else | |
symbol(ctx, x, y, radius, shadow); | |
ctx.closePath(); | |
if (fillStyle) { | |
ctx.fillStyle = fillStyle; | |
ctx.fill(); | |
} | |
ctx.stroke(); | |
} | |
} | |
ctx.save(); | |
ctx.translate(plotOffset.left, plotOffset.top); | |
var lw = series.points.lineWidth, | |
sw = series.shadowSize, | |
radius = series.points.radius, | |
symbol = series.points.symbol; | |
if (lw > 0 && sw > 0) { | |
// draw shadow in two steps | |
var w = sw / 2; | |
ctx.lineWidth = w; | |
ctx.strokeStyle = "rgba(0,0,0,0.1)"; | |
plotPoints(series.datapoints, radius, null, w + w/2, true, | |
series.xaxis, series.yaxis, symbol); | |
ctx.strokeStyle = "rgba(0,0,0,0.2)"; | |
plotPoints(series.datapoints, radius, null, w/2, true, | |
series.xaxis, series.yaxis, symbol); | |
} | |
ctx.lineWidth = lw; | |
ctx.strokeStyle = series.color; | |
plotPoints(series.datapoints, radius, | |
getFillStyle(series.points, series.color), 0, false, | |
series.xaxis, series.yaxis, symbol); | |
ctx.restore(); | |
} | |
function drawBar(x, y, b, barLeft, barRight, offset, fillStyleCallback, axisx, axisy, c, horizontal, lineWidth) { | |
var left, right, bottom, top, | |
drawLeft, drawRight, drawTop, drawBottom, | |
tmp; | |
// in horizontal mode, we start the bar from the left | |
// instead of from the bottom so it appears to be | |
// horizontal rather than vertical | |
if (horizontal) { | |
drawBottom = drawRight = drawTop = true; | |
drawLeft = false; | |
left = b; | |
right = x; | |
top = y + barLeft; | |
bottom = y + barRight; | |
// account for negative bars | |
if (right < left) { | |
tmp = right; | |
right = left; | |
left = tmp; | |
drawLeft = true; | |
drawRight = false; | |
} | |
} | |
else { | |
drawLeft = drawRight = drawTop = true; | |
drawBottom = false; | |
left = x + barLeft; | |
right = x + barRight; | |
bottom = b; | |
top = y; | |
// account for negative bars | |
if (top < bottom) { | |
tmp = top; | |
top = bottom; | |
bottom = tmp; | |
drawBottom = true; | |
drawTop = false; | |
} | |
} | |
// clip | |
if (right < axisx.min || left > axisx.max || | |
top < axisy.min || bottom > axisy.max) | |
return; | |
if (left < axisx.min) { | |
left = axisx.min; | |
drawLeft = false; | |
} | |
if (right > axisx.max) { | |
right = axisx.max; | |
drawRight = false; | |
} | |
if (bottom < axisy.min) { | |
bottom = axisy.min; | |
drawBottom = false; | |
} | |
if (top > axisy.max) { | |
top = axisy.max; | |
drawTop = false; | |
} | |
left = axisx.p2c(left); | |
bottom = axisy.p2c(bottom); | |
right = axisx.p2c(right); | |
top = axisy.p2c(top); | |
// fill the bar | |
if (fillStyleCallback) { | |
c.beginPath(); | |
c.moveTo(left, bottom); | |
c.lineTo(left, top); | |
c.lineTo(right, top); | |
c.lineTo(right, bottom); | |
c.fillStyle = fillStyleCallback(bottom, top); | |
c.fill(); | |
} | |
// draw outline | |
if (lineWidth > 0 && (drawLeft || drawRight || drawTop || drawBottom)) { | |
c.beginPath(); | |
// FIXME: inline moveTo is buggy with excanvas | |
c.moveTo(left, bottom + offset); | |
if (drawLeft) | |
c.lineTo(left, top + offset); | |
else | |
c.moveTo(left, top + offset); | |
if (drawTop) | |
c.lineTo(right, top + offset); | |
else | |
c.moveTo(right, top + offset); | |
if (drawRight) | |
c.lineTo(right, bottom + offset); | |
else | |
c.moveTo(right, bottom + offset); | |
if (drawBottom) | |
c.lineTo(left, bottom + offset); | |
else | |
c.moveTo(left, bottom + offset); | |
c.stroke(); | |
} | |
} | |
function drawSeriesBars(series) { | |
function plotBars(datapoints, barLeft, barRight, offset, fillStyleCallback, axisx, axisy) { | |
var points = datapoints.points, ps = datapoints.pointsize; | |
for (var i = 0; i < points.length; i += ps) { | |
if (points[i] == null) | |
continue; | |
drawBar(points[i], points[i + 1], points[i + 2], barLeft, barRight, offset, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal, series.bars.lineWidth); | |
} | |
} | |
ctx.save(); | |
ctx.translate(plotOffset.left, plotOffset.top); | |
// FIXME: figure out a way to add shadows (for instance along the right edge) | |
ctx.lineWidth = series.bars.lineWidth; | |
ctx.strokeStyle = series.color; | |
var barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2; | |
var fillStyleCallback = series.bars.fill ? function (bottom, top) { return getFillStyle(series.bars, series.color, bottom, top); } : null; | |
plotBars(series.datapoints, barLeft, barLeft + series.bars.barWidth, 0, fillStyleCallback, series.xaxis, series.yaxis); | |
ctx.restore(); | |
} | |
function getFillStyle(filloptions, seriesColor, bottom, top) { | |
var fill = filloptions.fill; | |
if (!fill) | |
return null; | |
if (filloptions.fillColor) | |
return getColorOrGradient(filloptions.fillColor, bottom, top, seriesColor); | |
var c = $.color.parse(seriesColor); | |
c.a = typeof fill == "number" ? fill : 0.4; | |
c.normalize(); | |
return c.toString(); | |
} | |
function insertLegend() { | |
placeholder.find(".legend").remove(); | |
if (!options.legend.show) | |
return; | |
var fragments = [], rowStarted = false, | |
lf = options.legend.labelFormatter, s, label; | |
for (var i = 0; i < series.length; ++i) { | |
s = series[i]; | |
label = s.label; | |
if (!label) | |
continue; | |
if (i % options.legend.noColumns == 0) { | |
if (rowStarted) | |
fragments.push('</tr>'); | |
fragments.push('<tr>'); | |
rowStarted = true; | |
} | |
if (lf) | |
label = lf(label, s); | |
fragments.push( | |
'<td class="legendColorBox"><div style="border:1px solid ' + options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:4px;height:0;border:5px solid ' + s.color + ';overflow:hidden"></div></div></td>' + | |
'<td class="legendLabel">' + label + '</td>'); | |
} | |
if (rowStarted) | |
fragments.push('</tr>'); | |
if (fragments.length == 0) | |
return; | |
var table = '<table style="font-size:smaller;color:' + options.grid.color + '">' + fragments.join("") + '</table>'; | |
if (options.legend.container != null) | |
$(options.legend.container).html(table); | |
else { | |
var pos = "", | |
p = options.legend.position, | |
m = options.legend.margin; | |
if (m[0] == null) | |
m = [m, m]; | |
if (p.charAt(0) == "n") | |
pos += 'top:' + (m[1] + plotOffset.top) + 'px;'; | |
else if (p.charAt(0) == "s") | |
pos += 'bottom:' + (m[1] + plotOffset.bottom) + 'px;'; | |
if (p.charAt(1) == "e") | |
pos += 'right:' + (m[0] + plotOffset.right) + 'px;'; | |
else if (p.charAt(1) == "w") | |
pos += 'left:' + (m[0] + plotOffset.left) + 'px;'; | |
var legend = $('<div class="legend">' + table.replace('style="', 'style="position:absolute;' + pos +';') + '</div>').appendTo(placeholder); | |
if (options.legend.backgroundOpacity != 0.0) { | |
// put in the transparent background | |
// separately to avoid blended labels and | |
// label boxes | |
var c = options.legend.backgroundColor; | |
if (c == null) { | |
c = options.grid.backgroundColor; | |
if (c && typeof c == "string") | |
c = $.color.parse(c); | |
else | |
c = $.color.extract(legend, 'background-color'); | |
c.a = 1; | |
c = c.toString(); | |
} | |
var div = legend.children(); | |
$('<div style="position:absolute;width:' + div.width() + 'px;height:' + div.height() + 'px;' + pos +'background-color:' + c + ';"> </div>').prependTo(legend).css('opacity', options.legend.backgroundOpacity); | |
} | |
} | |
} | |
// interactive features | |
var highlights = [], | |
redrawTimeout = null; | |
// returns the data item the mouse is over, or null if none is found | |
function findNearbyItem(mouseX, mouseY, seriesFilter) { | |
var maxDistance = options.grid.mouseActiveRadius, | |
smallestDistance = maxDistance * maxDistance + 1, | |
item = null, foundPoint = false, i, j; | |
for (i = series.length - 1; i >= 0; --i) { | |
if (!seriesFilter(series[i])) | |
continue; | |
var s = series[i], | |
axisx = s.xaxis, | |
axisy = s.yaxis, | |
points = s.datapoints.points, | |
ps = s.datapoints.pointsize, | |
mx = axisx.c2p(mouseX), // precompute some stuff to make the loop faster | |
my = axisy.c2p(mouseY), | |
maxx = maxDistance / axisx.scale, | |
maxy = maxDistance / axisy.scale; | |
// with inverse transforms, we can't use the maxx/maxy | |
// optimization, sadly | |
if (axisx.options.inverseTransform) | |
maxx = Number.MAX_VALUE; | |
if (axisy.options.inverseTransform) | |
maxy = Number.MAX_VALUE; | |
if (s.lines.show || s.points.show) { | |
for (j = 0; j < points.length; j += ps) { | |
var x = points[j], y = points[j + 1]; | |
if (x == null) | |
continue; | |
// For points and lines, the cursor must be within a | |
// certain distance to the data point | |
if (x - mx > maxx || x - mx < -maxx || | |
y - my > maxy || y - my < -maxy) | |
continue; | |
// We have to calculate distances in pixels, not in | |
// data units, because the scales of the axes may be different | |
var dx = Math.abs(axisx.p2c(x) - mouseX), | |
dy = Math.abs(axisy.p2c(y) - mouseY), | |
dist = dx * dx + dy * dy; // we save the sqrt | |
// use <= to ensure last point takes precedence | |
// (last generally means on top of) | |
if (dist < smallestDistance) { | |
smallestDistance = dist; | |
item = [i, j / ps]; | |
} | |
} | |
} | |
if (s.bars.show && !item) { // no other point can be nearby | |
var barLeft = s.bars.align == "left" ? 0 : -s.bars.barWidth/2, | |
barRight = barLeft + s.bars.barWidth; | |
for (j = 0; j < points.length; j += ps) { | |
var x = points[j], y = points[j + 1], b = points[j + 2]; | |
if (x == null) | |
continue; | |
// for a bar graph, the cursor must be inside the bar | |
if (series[i].bars.horizontal ? | |
(mx <= Math.max(b, x) && mx >= Math.min(b, x) && | |
my >= y + barLeft && my <= y + barRight) : | |
(mx >= x + barLeft && mx <= x + barRight && | |
my >= Math.min(b, y) && my <= Math.max(b, y))) | |
item = [i, j / ps]; | |
} | |
} | |
} | |
if (item) { | |
i = item[0]; | |
j = item[1]; | |
ps = series[i].datapoints.pointsize; | |
return { datapoint: series[i].datapoints.points.slice(j * ps, (j + 1) * ps), | |
dataIndex: j, | |
series: series[i], | |
seriesIndex: i }; | |
} | |
return null; | |
} | |
function onMouseMove(e) { | |
if (options.grid.hoverable) | |
triggerClickHoverEvent("plothover", e, | |
function (s) { return s["hoverable"] != false; }); | |
} | |
function onMouseLeave(e) { | |
if (options.grid.hoverable) | |
triggerClickHoverEvent("plothover", e, | |
function (s) { return false; }); | |
} | |
function onClick(e) { | |
triggerClickHoverEvent("plotclick", e, | |
function (s) { return s["clickable"] != false; }); | |
} | |
// trigger click or hover event (they send the same parameters | |
// so we share their code) | |
function triggerClickHoverEvent(eventname, event, seriesFilter) { | |
var offset = eventHolder.offset(), | |
canvasX = event.pageX - offset.left - plotOffset.left, | |
canvasY = event.pageY - offset.top - plotOffset.top, | |
pos = canvasToAxisCoords({ left: canvasX, top: canvasY }); | |
pos.pageX = event.pageX; | |
pos.pageY = event.pageY; | |
var item = findNearbyItem(canvasX, canvasY, seriesFilter); | |
if (item) { | |
// fill in mouse pos for any listeners out there | |
item.pageX = parseInt(item.series.xaxis.p2c(item.datapoint[0]) + offset.left + plotOffset.left); | |
item.pageY = parseInt(item.series.yaxis.p2c(item.datapoint[1]) + offset.top + plotOffset.top); | |
} | |
if (options.grid.autoHighlight) { | |
// clear auto-highlights | |
for (var i = 0; i < highlights.length; ++i) { | |
var h = highlights[i]; | |
if (h.auto == eventname && | |
!(item && h.series == item.series && | |
h.point[0] == item.datapoint[0] && | |
h.point[1] == item.datapoint[1])) | |
unhighlight(h.series, h.point); | |
} | |
if (item) | |
highlight(item.series, item.datapoint, eventname); | |
} | |
placeholder.trigger(eventname, [ pos, item ]); | |
} | |
function triggerRedrawOverlay() { | |
if (!redrawTimeout) | |
redrawTimeout = setTimeout(drawOverlay, 30); | |
} | |
function drawOverlay() { | |
redrawTimeout = null; | |
// draw highlights | |
octx.save(); | |
octx.clearRect(0, 0, canvasWidth, canvasHeight); | |
octx.translate(plotOffset.left, plotOffset.top); | |
var i, hi; | |
for (i = 0; i < highlights.length; ++i) { | |
hi = highlights[i]; | |
if (hi.series.bars.show) | |
drawBarHighlight(hi.series, hi.point); | |
else | |
drawPointHighlight(hi.series, hi.point); | |
} | |
octx.restore(); | |
executeHooks(hooks.drawOverlay, [octx]); | |
} | |
function highlight(s, point, auto) { | |
if (typeof s == "number") | |
s = series[s]; | |
if (typeof point == "number") { | |
var ps = s.datapoints.pointsize; | |
point = s.datapoints.points.slice(ps * point, ps * (point + 1)); | |
} | |
var i = indexOfHighlight(s, point); | |
if (i == -1) { | |
highlights.push({ series: s, point: point, auto: auto }); | |
triggerRedrawOverlay(); | |
} | |
else if (!auto) | |
highlights[i].auto = false; | |
} | |
function unhighlight(s, point) { | |
if (s == null && point == null) { | |
highlights = []; | |
triggerRedrawOverlay(); | |
} | |
if (typeof s == "number") | |
s = series[s]; | |
if (typeof point == "number") | |
point = s.data[point]; | |
var i = indexOfHighlight(s, point); | |
if (i != -1) { | |
highlights.splice(i, 1); | |
triggerRedrawOverlay(); | |
} | |
} | |
function indexOfHighlight(s, p) { | |
for (var i = 0; i < highlights.length; ++i) { | |
var h = highlights[i]; | |
if (h.series == s && h.point[0] == p[0] | |
&& h.point[1] == p[1]) | |
return i; | |
} | |
return -1; | |
} | |
function drawPointHighlight(series, point) { | |
var x = point[0], y = point[1], | |
axisx = series.xaxis, axisy = series.yaxis; | |
if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) | |
return; | |
var pointRadius = series.points.radius + series.points.lineWidth / 2; | |
octx.lineWidth = pointRadius; | |
octx.strokeStyle = $.color.parse(series.color).scale('a', 0.5).toString(); | |
var radius = 1.5 * pointRadius, | |
x = axisx.p2c(x), | |
y = axisy.p2c(y); | |
octx.beginPath(); | |
if (series.points.symbol == "circle") | |
octx.arc(x, y, radius, 0, 2 * Math.PI, false); | |
else | |
series.points.symbol(octx, x, y, radius, false); | |
octx.closePath(); | |
octx.stroke(); | |
} | |
function drawBarHighlight(series, point) { | |
octx.lineWidth = series.bars.lineWidth; | |
octx.strokeStyle = $.color.parse(series.color).scale('a', 0.5).toString(); | |
var fillStyle = $.color.parse(series.color).scale('a', 0.5).toString(); | |
var barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2; | |
drawBar(point[0], point[1], point[2] || 0, barLeft, barLeft + series.bars.barWidth, | |
0, function () { return fillStyle; }, series.xaxis, series.yaxis, octx, series.bars.horizontal, series.bars.lineWidth); | |
} | |
function getColorOrGradient(spec, bottom, top, defaultColor) { | |
if (typeof spec == "string") | |
return spec; | |
else { | |
// assume this is a gradient spec; IE currently only | |
// supports a simple vertical gradient properly, so that's | |
// what we support too | |
var gradient = ctx.createLinearGradient(0, top, 0, bottom); | |
for (var i = 0, l = spec.colors.length; i < l; ++i) { | |
var c = spec.colors[i]; | |
if (typeof c != "string") { | |
var co = $.color.parse(defaultColor); | |
if (c.brightness != null) | |
co = co.scale('rgb', c.brightness) | |
if (c.opacity != null) | |
co.a *= c.opacity; | |
c = co.toString(); | |
} | |
gradient.addColorStop(i / (l - 1), c); | |
} | |
return gradient; | |
} | |
} | |
} | |
$.plot = function(placeholder, data, options) { | |
//var t0 = new Date(); | |
var plot = new Plot($(placeholder), data, options, $.plot.plugins); | |
//(window.console ? console.log : alert)("time used (msecs): " + ((new Date()).getTime() - t0.getTime())); | |
return plot; | |
}; | |
$.plot.version = "0.7"; | |
$.plot.plugins = []; | |
// returns a string with the date d formatted according to fmt | |
$.plot.formatDate = function(d, fmt, monthNames) { | |
var leftPad = function(n) { | |
n = "" + n; | |
return n.length == 1 ? "0" + n : n; | |
}; | |
var r = []; | |
var escape = false, padNext = false; | |
var hours = d.getUTCHours(); | |
var isAM = hours < 12; | |
if (monthNames == null) | |
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; | |
if (fmt.search(/%p|%P/) != -1) { | |
if (hours > 12) { | |
hours = hours - 12; | |
} else if (hours == 0) { | |
hours = 12; | |
} | |
} | |
for (var i = 0; i < fmt.length; ++i) { | |
var c = fmt.charAt(i); | |
if (escape) { | |
switch (c) { | |
case 'h': c = "" + hours; break; | |
case 'H': c = leftPad(hours); break; | |
case 'M': c = leftPad(d.getUTCMinutes()); break; | |
case 'S': c = leftPad(d.getUTCSeconds()); break; | |
case 'd': c = "" + d.getUTCDate(); break; | |
case 'm': c = "" + (d.getUTCMonth() + 1); break; | |
case 'y': c = "" + d.getUTCFullYear(); break; | |
case 'b': c = "" + monthNames[d.getUTCMonth()]; break; | |
case 'p': c = (isAM) ? ("" + "am") : ("" + "pm"); break; | |
case 'P': c = (isAM) ? ("" + "AM") : ("" + "PM"); break; | |
case '0': c = ""; padNext = true; break; | |
} | |
if (c && padNext) { | |
c = leftPad(c); | |
padNext = false; | |
} | |
r.push(c); | |
if (!padNext) | |
escape = false; | |
} | |
else { | |
if (c == "%") | |
escape = true; | |
else | |
r.push(c); | |
} | |
} | |
return r.join(""); | |
}; | |
// round to nearby lower multiple of base | |
function floorInBase(n, base) { | |
return base * Math.floor(n / base); | |
} | |
})(jQuery); | |
import datetime | |
from pylons import config | |
from sqlalchemy import Table, select, func, and_ | |
from sqlalchemy.sql.expression import text | |
import ckan.plugins as p | |
import ckan.model as model | |
import re | |
cache_enabled = p.toolkit.asbool(config.get('ckanext.stats.cache_enabled', 'True')) | |
if cache_enabled: | |
from pylons import cache | |
our_cache = cache.get_cache('stats', type='dbm') | |
DATE_FORMAT = '%Y-%m-%d' | |
def table(name): | |
return Table(name, model.meta.metadata, autoload=True) | |
def datetime2date(datetime_): | |
return datetime.date(datetime_.year, datetime_.month, datetime_.day) | |
class Stats(object): | |
@classmethod | |
def top_rated_packages(cls, limit=10): | |
# NB Not using sqlalchemy as sqla 0.4 doesn't work using both group_by | |
# and apply_avg | |
package = table('package') | |
rating = table('rating') | |
sql = select([package.c.id, func.avg(rating.c.rating), func.count(rating.c.rating)], from_obj=[package.join(rating)]).\ | |
where(package.c.private == 'f').\ | |
group_by(package.c.id).\ | |
order_by(func.avg(rating.c.rating).desc(), func.count(rating.c.rating).desc()).\ | |
limit(limit) | |
res_ids = model.Session.execute(sql).fetchall() | |
res_pkgs = [(model.Session.query(model.Package).get(unicode(pkg_id)), avg, num) for pkg_id, avg, num in res_ids] | |
return res_pkgs | |
@classmethod | |
def most_edited_packages(cls, limit=10): | |
package_revision = table('package_revision') | |
package = table('package') | |
s = select([package_revision.c.id, func.count(package_revision.c.revision_id)], from_obj=[package_revision.join(package)]).\ | |
where(package.c.private == 'f').\ | |
group_by(package_revision.c.id).\ | |
order_by(func.count(package_revision.c.revision_id).desc()).\ | |
limit(limit) | |
res_ids = model.Session.execute(s).fetchall() | |
res_pkgs = [(model.Session.query(model.Package).get(unicode(pkg_id)), val) for pkg_id, val in res_ids] | |
return res_pkgs | |
@classmethod | |
def largest_groups(cls, limit=10): | |
member = table('member') | |
s = select([member.c.group_id, func.count(member.c.table_id)]).\ | |
group_by(member.c.group_id).\ | |
where(member.c.group_id!=None).\ | |
where(member.c.table_name=='package').\ | |
where(member.c.capacity=='public').\ | |
order_by(func.count(member.c.table_id).desc()) | |
#limit(limit) | |
res_ids = model.Session.execute(s).fetchall() | |
res_groups = [(model.Session.query(model.Group).get(unicode(group_id)), val) for group_id, val in res_ids] | |
return res_groups | |
@classmethod | |
def by_org(cls, limit=10): | |
connection = model.Session.connection() | |
res = connection.execute("select package.owner_org, package.private, count(*) from package \ | |
inner join \"group\" on package.owner_org = \"group\".id \ | |
where package.state='active'\ | |
group by package.owner_org,\"group\".name, package.private \ | |
order by \"group\".name, package.private;").fetchall(); | |
res_groups = [(model.Session.query(model.Group).get(unicode(group_id)), private, val) for group_id, private, val in res] | |
return res_groups | |
@classmethod | |
def res_by_org(cls, limit=10): | |
connection = model.Session.connection() | |
reses = connection.execute("select owner_org,format,count(*) from \ | |
resource inner join resource_group on resource.resource_group_id = resource_group.id \ | |
inner join package on resource_group.package_id = package.id group by owner_org,format order by count desc;").fetchall(); | |
group_ids = [] | |
group_tab = {} | |
group_spatial = {} | |
group_other = {} | |
for group_id,format,count in reses: | |
if group_id not in group_ids: | |
group_ids.append(group_id) | |
group_tab[group_id] = 0 | |
group_spatial[group_id] = 0 | |
group_other[group_id] = 0 | |
if re.search('xls|csv|ms-excel|spreadsheetml.sheet|zip|netcdf',format, re.IGNORECASE): | |
group_tab[group_id] = group_tab[group_id] + count | |
elif re.search('wms|wfs|wcs|shp|kml|kmz',format, re.IGNORECASE): | |
group_spatial[group_id] = group_spatial[group_id] + count | |
else: | |
group_other[group_id] = group_other[group_id] + count | |
return [(model.Session.query(model.Group).get(unicode(group_id)), group_tab[group_id],group_spatial[group_id],group_other[group_id], group_tab[group_id]+group_spatial[group_id]+group_other[group_id]) for group_id in group_ids] | |
@classmethod | |
def top_active_orgs(cls, limit=10): | |
connection = model.Session.connection() | |
res = connection.execute("select package.owner_org, count(*) from package \ | |
inner join \"group\" on package.owner_org = \"group\".id \ | |
inner join (select distinct object_id from activity where activity.timestamp > (now() - interval '60 day')) \ | |
latestactivities on latestactivities.object_id = package.id \ | |
where package.state='active' \ | |
and package.private = 'f' \ | |
group by package.owner_org \ | |
order by count(*) desc;").fetchall(); | |
res_groups = [(model.Session.query(model.Group).get(unicode(group_id)), val) for group_id, val in res] | |
return res_groups | |
@classmethod | |
def top_tags(cls, limit=10, returned_tag_info='object'): # by package | |
assert returned_tag_info in ('name', 'id', 'object') | |
tag = table('tag') | |
package_tag = table('package_tag') | |
package = table('package') | |
#TODO filter out tags with state=deleted | |
if returned_tag_info == 'name': | |
from_obj = [package_tag.join(tag)] | |
tag_column = tag.c.name | |
else: | |
from_obj = None | |
tag_column = package_tag.c.tag_id | |
s = select([tag_column, func.count(package_tag.c.package_id)], | |
from_obj=from_obj) | |
s = s.group_by(tag_column).\ | |
where(package.c.private == 'f').\ | |
order_by(func.count(package_tag.c.package_id).desc()).\ | |
limit(limit) | |
res_col = model.Session.execute(s).fetchall() | |
if returned_tag_info in ('id', 'name'): | |
return res_col | |
elif returned_tag_info == 'object': | |
res_tags = [(model.Session.query(model.Tag).get(unicode(tag_id)), val) for tag_id, val in res_col] | |
return res_tags | |
@classmethod | |
def top_package_owners(cls, limit=10): | |
package_role = table('package_role') | |
user_object_role = table('user_object_role') | |
package = table('package') | |
s = select([user_object_role.c.user_id, func.count(user_object_role.c.role)], from_obj=[user_object_role.join(package_role).join(package, package_role.c.package_id == package.c.id)]).\ | |
where(user_object_role.c.role==model.authz.Role.ADMIN).\ | |
where(package.c.private == 'f').\ | |
where(user_object_role.c.user_id!=None).\ | |
group_by(user_object_role.c.user_id).\ | |
order_by(func.count(user_object_role.c.role).desc()).\ | |
limit(limit) | |
res_ids = model.Session.execute(s).fetchall() | |
res_users = [(model.Session.query(model.User).get(unicode(user_id)), val) for user_id, val in res_ids] | |
return res_users | |
@classmethod | |
def summary_stats(cls): | |
connection = model.Session.connection() | |
res = connection.execute("SELECT 'Total Organisations', count(*) from \"group\" where type = 'organization' and state = 'active' union \ | |
select 'Total Datasets', count(*) from package where (state='active' or state='draft' or state='draft-complete') and private = 'f' union \ | |
select 'Total Archived Datasets', count(*) from package where (state='active' or state='draft' or state='draft-complete') and private = 't' union \ | |
select 'Total Data Files/Resources', count(*) from resource where state='active' union \ | |
select 'Total Machine Readable/Data API Resources', count(*) from resource where state='active' and webstore_url = 'active'\ | |
").fetchall(); | |
return res | |
@classmethod | |
def activity_counts(cls): | |
connection = model.Session.connection() | |
res = connection.execute("select to_char(timestamp, 'YYYY-MM') as month,activity_type, count(*) from activity group by month, activity_type order by month;").fetchall(); | |
return res | |
@classmethod | |
def user_access_list(cls): | |
connection = model.Session.connection() | |
res = connection.execute("select name,sysadmin,role from user_object_role right outer join \"user\" on user_object_role.user_id = \"user\".id where name not in ('logged_in','visitor') group by name,sysadmin,role order by sysadmin desc, role asc;").fetchall(); | |
return res | |
@classmethod | |
def recent_datasets(cls): | |
activity = table('activity') | |
package = table('package') | |
s = select([func.max(activity.c.timestamp),package.c.id, activity.c.activity_type], from_obj=[activity.join(package,activity.c.object_id == package.c.id)]).where(package.c.private == 'f').\ | |
where(activity.c.timestamp > func.now() - text("interval '60 day'")).group_by(package.c.id,activity.c.activity_type).order_by(func.max(activity.c.timestamp)) | |
result = model.Session.execute(s).fetchall() | |
return [(datetime2date(timestamp), model.Session.query(model.Package).get(unicode(package_id)), activity_type) for timestamp,package_id,activity_type in result] | |
class RevisionStats(object): | |
@classmethod | |
def package_addition_rate(cls, weeks_ago=0): | |
week_commenced = cls.get_date_weeks_ago(weeks_ago) | |
return cls.get_objects_in_a_week(week_commenced, | |
type_='package_addition_rate') | |
@classmethod | |
def package_revision_rate(cls, weeks_ago=0): | |
week_commenced = cls.get_date_weeks_ago(weeks_ago) | |
return cls.get_objects_in_a_week(week_commenced, | |
type_='package_revision_rate') | |
@classmethod | |
def get_date_weeks_ago(cls, weeks_ago): | |
''' | |
@param weeks_ago: specify how many weeks ago to give count for | |
(0 = this week so far) | |
''' | |
date_ = datetime.date.today() | |
return date_ - datetime.timedelta(days= | |
datetime.date.weekday(date_) + 7 * weeks_ago) | |
@classmethod | |
def get_week_dates(cls, weeks_ago): | |
''' | |
@param weeks_ago: specify how many weeks ago to give count for | |
(0 = this week so far) | |
''' | |
package_revision = table('package_revision') | |
revision = table('revision') | |
today = datetime.date.today() | |
date_from = datetime.datetime(today.year, today.month, today.day) -\ | |
datetime.timedelta(days=datetime.date.weekday(today) + \ | |
7 * weeks_ago) | |
date_to = date_from + datetime.timedelta(days=7) | |
return (date_from, date_to) | |
@classmethod | |
def get_date_week_started(cls, date_): | |
assert isinstance(date_, datetime.date) | |
if isinstance(date_, datetime.datetime): | |
date_ = datetime2date(date_) | |
return date_ - datetime.timedelta(days=datetime.date.weekday(date_)) | |
@classmethod | |
def get_package_revisions(cls): | |
''' | |
@return: Returns list of revisions and date of them, in | |
format: [(id, date), ...] | |
''' | |
package_revision = table('package_revision') | |
revision = table('revision') | |
s = select([package_revision.c.id, revision.c.timestamp], from_obj=[package_revision.join(revision)]).order_by(revision.c.timestamp) | |
res = model.Session.execute(s).fetchall() # [(id, datetime), ...] | |
return res | |
@classmethod | |
def get_new_packages(cls): | |
''' | |
@return: Returns list of new pkgs and date when they were created, in | |
format: [(id, date_ordinal), ...] | |
''' | |
def new_packages(): | |
# Can't filter by time in select because 'min' function has to | |
# be 'for all time' else you get first revision in the time period. | |
package_revision = table('package_revision') | |
revision = table('revision') | |
package = table('package') | |
s = select([package_revision.c.id, func.min(revision.c.timestamp)], from_obj=[package_revision.join(revision).join(package)]).\ | |
where(package.c.private == 'f').\ | |
group_by(package_revision.c.id).order_by(func.min(revision.c.timestamp)) | |
res = model.Session.execute(s).fetchall() # [(id, datetime), ...] | |
res_pickleable = [] | |
for pkg_id, created_datetime in res: | |
res_pickleable.append((pkg_id, created_datetime.toordinal())) | |
return res_pickleable | |
if cache_enabled: | |
week_commences = cls.get_date_week_started(datetime.date.today()) | |
key = 'all_new_packages_%s' + week_commences.strftime(DATE_FORMAT) | |
new_packages = our_cache.get_value(key=key, | |
createfunc=new_packages) | |
else: | |
new_packages = new_packages() | |
return new_packages | |
@classmethod | |
def get_deleted_packages(cls): | |
''' | |
@return: Returns list of deleted pkgs and date when they were deleted, in | |
format: [(id, date_ordinal), ...] | |
''' | |
def deleted_packages(): | |
# Can't filter by time in select because 'min' function has to | |
# be 'for all time' else you get first revision in the time period. | |
package_revision = table('package_revision') | |
revision = table('revision') | |
package = table('package') | |
s = select([package_revision.c.id, func.min(revision.c.timestamp)], from_obj=[package_revision.join(revision).join(package)]).\ | |
where(package_revision.c.state==model.State.DELETED).\ | |
where(package.c.private == 'f').\ | |
group_by(package_revision.c.id).\ | |
order_by(func.min(revision.c.timestamp)) | |
res = model.Session.execute(s).fetchall() # [(id, datetime), ...] | |
res_pickleable = [] | |
for pkg_id, deleted_datetime in res: | |
res_pickleable.append((pkg_id, deleted_datetime.toordinal())) | |
return res_pickleable | |
if cache_enabled: | |
week_commences = cls.get_date_week_started(datetime.date.today()) | |
key = 'all_deleted_packages_%s' + week_commences.strftime(DATE_FORMAT) | |
deleted_packages = our_cache.get_value(key=key, | |
createfunc=deleted_packages) | |
else: | |
deleted_packages = deleted_packages() | |
return deleted_packages | |
@classmethod | |
def get_num_packages_by_week(cls): | |
def num_packages(): | |
new_packages_by_week = cls.get_by_week('new_packages') | |
deleted_packages_by_week = cls.get_by_week('deleted_packages') | |
first_date = (min(datetime.datetime.strptime(new_packages_by_week[0][0], DATE_FORMAT), | |
datetime.datetime.strptime(deleted_packages_by_week[0][0], DATE_FORMAT))).date() | |
cls._cumulative_num_pkgs = 0 | |
new_pkgs = [] | |
deleted_pkgs = [] | |
def build_weekly_stats(week_commences, new_pkg_ids, deleted_pkg_ids): | |
num_pkgs = len(new_pkg_ids) - len(deleted_pkg_ids) | |
new_pkgs.extend([model.Session.query(model.Package).get(id).name for id in new_pkg_ids]) | |
deleted_pkgs.extend([model.Session.query(model.Package).get(id).name for id in deleted_pkg_ids]) | |
cls._cumulative_num_pkgs += num_pkgs | |
return (week_commences.strftime(DATE_FORMAT), | |
num_pkgs, cls._cumulative_num_pkgs) | |
week_ends = first_date | |
today = datetime.date.today() | |
new_package_week_index = 0 | |
deleted_package_week_index = 0 | |
weekly_numbers = [] # [(week_commences, num_packages, cumulative_num_pkgs])] | |
while week_ends <= today: | |
week_commences = week_ends | |
week_ends = week_commences + datetime.timedelta(days=7) | |
if datetime.datetime.strptime(new_packages_by_week[new_package_week_index][0], DATE_FORMAT).date() == week_commences: | |
new_pkg_ids = new_packages_by_week[new_package_week_index][1] | |
new_package_week_index += 1 | |
else: | |
new_pkg_ids = [] | |
if datetime.datetime.strptime(deleted_packages_by_week[deleted_package_week_index][0], DATE_FORMAT).date() == week_commences: | |
deleted_pkg_ids = deleted_packages_by_week[deleted_package_week_index][1] | |
deleted_package_week_index += 1 | |
else: | |
deleted_pkg_ids = [] | |
weekly_numbers.append(build_weekly_stats(week_commences, new_pkg_ids, deleted_pkg_ids)) | |
# just check we got to the end of each count | |
assert new_package_week_index == len(new_packages_by_week) | |
assert deleted_package_week_index == len(deleted_packages_by_week) | |
return weekly_numbers | |
if cache_enabled: | |
week_commences = cls.get_date_week_started(datetime.date.today()) | |
key = 'number_packages_%s' + week_commences.strftime(DATE_FORMAT) | |
num_packages = our_cache.get_value(key=key, | |
createfunc=num_packages) | |
else: | |
num_packages = num_packages() | |
return num_packages | |
@classmethod | |
def get_by_week(cls, object_type): | |
cls._object_type = object_type | |
def objects_by_week(): | |
if cls._object_type == 'new_packages': | |
objects = cls.get_new_packages() | |
def get_date(object_date): | |
return datetime.date.fromordinal(object_date) | |
elif cls._object_type == 'deleted_packages': | |
objects = cls.get_deleted_packages() | |
def get_date(object_date): | |
return datetime.date.fromordinal(object_date) | |
elif cls._object_type == 'package_revisions': | |
objects = cls.get_package_revisions() | |
def get_date(object_date): | |
return datetime2date(object_date) | |
else: | |
raise NotImplementedError() | |
first_date = get_date(objects[0][1]) if objects else datetime.date.today() | |
week_commences = cls.get_date_week_started(first_date) | |
week_ends = week_commences + datetime.timedelta(days=7) | |
week_index = 0 | |
weekly_pkg_ids = [] # [(week_commences, [pkg_id1, pkg_id2, ...])] | |
pkg_id_stack = [] | |
cls._cumulative_num_pkgs = 0 | |
def build_weekly_stats(week_commences, pkg_ids): | |
num_pkgs = len(pkg_ids) | |
cls._cumulative_num_pkgs += num_pkgs | |
return (week_commences.strftime(DATE_FORMAT), | |
pkg_ids, num_pkgs, cls._cumulative_num_pkgs) | |
for pkg_id, date_field in objects: | |
date_ = get_date(date_field) | |
if date_ >= week_ends: | |
weekly_pkg_ids.append(build_weekly_stats(week_commences, pkg_id_stack)) | |
pkg_id_stack = [] | |
week_commences = week_ends | |
week_ends = week_commences + datetime.timedelta(days=7) | |
pkg_id_stack.append(pkg_id) | |
weekly_pkg_ids.append(build_weekly_stats(week_commences, pkg_id_stack)) | |
today = datetime.date.today() | |
while week_ends <= today: | |
week_commences = week_ends | |
week_ends = week_commences + datetime.timedelta(days=7) | |
weekly_pkg_ids.append(build_weekly_stats(week_commences, [])) | |
return weekly_pkg_ids | |
if cache_enabled: | |
week_commences = cls.get_date_week_started(datetime.date.today()) | |
key = '%s_by_week_%s' % (cls._object_type, week_commences.strftime(DATE_FORMAT)) | |
objects_by_week_ = our_cache.get_value(key=key, | |
createfunc=objects_by_week) | |
else: | |
objects_by_week_ = objects_by_week() | |
return objects_by_week_ | |
@classmethod | |
def get_objects_in_a_week(cls, date_week_commences, | |
type_='new-package-rate'): | |
''' | |
@param type: Specifies what to return about the specified week: | |
"package_addition_rate" number of new packages | |
"package_revision_rate" number of package revisions | |
"new_packages" a list of the packages created | |
in a tuple with the date. | |
"deleted_packages" a list of the packages deleted | |
in a tuple with the date. | |
@param dates: date range of interest - a tuple: | |
(start_date, end_date) | |
''' | |
assert isinstance(date_week_commences, datetime.date) | |
if type_ in ('package_addition_rate', 'new_packages'): | |
object_type = 'new_packages' | |
elif type_ == 'deleted_packages': | |
object_type = 'deleted_packages' | |
elif type_ == 'package_revision_rate': | |
object_type = 'package_revisions' | |
else: | |
raise NotImplementedError() | |
objects_by_week = cls.get_by_week(object_type) | |
date_wc_str = date_week_commences.strftime(DATE_FORMAT) | |
object_ids = None | |
for objects_in_a_week in objects_by_week: | |
if objects_in_a_week[0] == date_wc_str: | |
object_ids = objects_in_a_week[1] | |
break | |
if object_ids is None: | |
raise TypeError('Week specified is outside range') | |
assert isinstance(object_ids, list) | |
if type_ in ('package_revision_rate', 'package_addition_rate'): | |
return len(object_ids) | |
elif type_ in ('new_packages', 'deleted_packages'): | |
return [ model.Session.query(model.Package).get(pkg_id) \ | |
for pkg_id in object_ids ] | |
{% extends "page.html" %} | |
{% block breadcrumb_content %} | |
<li class="active">{{ 'Statistics' }}</li> | |
{% endblock %} | |
{% block primary_content %} | |
<article class="module"> | |
{% if h.check_access('sysadmin') %} | |
<section id="stats-activity-counts" class="module-content tab-content"> | |
<h2>{{ _('Site Activity Log') }}</h2> | |
{% if c.activity_counts %} | |
<table class="table table-chunky table-bordered table-striped"> | |
<thead> | |
<tr> | |
<th>{{ _('Month') }}</th> | |
<th>{{ _('Activity Type') }}</th> | |
<th class="metric">{{ _('Count') }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for month, type, count in c.activity_counts %} | |
<tr> | |
<td>{{ month }}</td> | |
<td>{{ type }}</td> | |
<td class="metric">{{ count }}</td> | |
</tr> | |
{% endfor %} | |
</tbody> | |
</table> | |
{% else %} | |
<p class="empty">{{ _('No groups') }}</p> | |
{% endif %} | |
</section> | |
<section id="stats-recent-datasets" class="module-content tab-content"> | |
<h2>{{ _('Recent Datasets') }}</h2> | |
{% if c.recent_datasets %} | |
<table class="table table-chunky table-bordered table-striped"> | |
<thead> | |
<tr> | |
<th>{{ _('Date') }}</th> | |
<th>{{ _('Dataset') }}</th> | |
<th>{{ _('New/Modified') }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for date,package,newmodified in c.recent_datasets %} | |
<tr> | |
<td>{{ date }}</td> | |
<td>{{ h.link_to(package.title or package.name, h.url_for(controller='package', action='read', id=package.name)) }}</td> | |
<td>{{ newmodified }}</td> | |
</tr> | |
{% endfor %} | |
</tbody> | |
</table> | |
{% else %} | |
<p class="empty">{{ _('No groups') }}</p> | |
{% endif %} | |
</section> | |
<section id="stats-user-access-list" class="module-content tab-content"> | |
<h2>{{ _('User Access List') }}</h2> | |
{% if c.user_access_list %} | |
<table class="table table-chunky table-bordered table-striped"> | |
<thead> | |
<tr> | |
<th>{{ _('Username') }}</th> | |
<th>{{ _('Sysadmin') }}</th> | |
<th class="metric">{{ _('Organisational Role') }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for username,sysadmin,role in c.user_access_list %} | |
<tr> | |
<td>{{ username }}</td> | |
<td>{{ sysadmin }}</td> | |
<td>{{ role }}</td> | |
</tr> | |
{% endfor %} | |
</tbody> | |
</table> | |
{% else %} | |
<p class="empty">{{ _('No groups') }}</p> | |
{% endif %} | |
</section> | |
{% endif %} | |
<section id="stats-total-datasets" class="module-content tab-content active"> | |
<h2>{{ _('Total number of Datasets') }}</h2> | |
{% set xaxis = {'mode': 'time', 'timeformat': '%y-%b'} %} | |
{% set yaxis = {'min': 0} %} | |
<table class="table table-chunky table-bordered table-striped" data-module="plot" data-module-xaxis="{{ h.dump_json(xaxis) }}" data-module-yaxis="{{ h.dump_json(yaxis) }}"> | |
<thead> | |
<tr> | |
<th>{{ _("Date") }}</th> | |
<th>{{ _("Total datasets") }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for row in c.raw_packages_by_week %} | |
<tr> | |
<th data-type="date" data-value="{{ row.date.strftime("%s") }}"><time datetime="{{ row.date.isoformat() }}">{{ h.render_datetime(row.date) }}</time></th> | |
<td>{{ row.total_packages }}</td> | |
</tr> | |
{% endfor %} | |
</tbody> | |
</table> | |
</section> | |
<section id="stats-dataset-revisions" class="module-content tab-content"> | |
<h2>{{ _('Dataset Revisions per Week') }}</h2> | |
{% set xaxis = {'mode': 'time', 'timeformat': '%y-%b'} %} | |
{% set lines = {'fill': 1} %} | |
<table class="table table-chunky table-bordered table-striped" data-module="plot" data-module-xaxis="{{ h.dump_json(xaxis) }}" data-module-lines="{{ h.dump_json(lines) }}"> | |
<thead> | |
<tr> | |
<th>{{ _("Date") }}</th> | |
<th>{{ _("All dataset revisions") }}</th> | |
<th>{{ _("New datasets") }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for row in c.raw_all_package_revisions %} | |
<tr> | |
<th data-type="date" data-value="{{ row.date.strftime("%s") }}"><time datetime="{{ row.date.isoformat() }}">{{ h.render_datetime(row.date) }}</time></th> | |
<td>{{ row.total_revisions }}</td> | |
<td>{{ c.raw_new_datasets[loop.index0].new_packages }}</td> | |
</tr> | |
{% endfor %} | |
</tbody> | |
</table> | |
</section> | |
<section id="stats-most-edited" class="module-content tab-content"> | |
<h2>{{ _('Most Edited Datasets') }}</h2> | |
{% if c.most_edited_packages %} | |
<table class="table table-chunky table-bordered table-striped"> | |
<thead> | |
<tr> | |
<th>{{ _('Dataset') }}</th> | |
<th class="metric">{{ _('Number of edits') }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for package, edits in c.most_edited_packages %} | |
<tr py:for="package, edits in c.most_edited_packages"> | |
<td>{{ h.link_to(package.title or package.name, h.url_for(controller='package', action='read', id=package.name)) }}</td> | |
<td class="metric">{{ edits }}</td> | |
</tr> | |
{% endfor %} | |
</tbody> | |
</table> | |
{% else %} | |
<p class="empty">{{ _('No edited datasets') }}</p> | |
{% endif %} | |
</section> | |
<section id="stats-largest-groups" class="module-content tab-content"> | |
<h2>{{ _('Largest Groups') }}</h2> | |
{% if c.largest_groups %} | |
<table class="table table-chunky table-bordered table-striped"> | |
<thead> | |
<tr> | |
<th>{{ _('Group') }}</th> | |
<th class="metric">{{ _('Number of datasets') }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for group, num_packages in c.largest_groups %} | |
<tr> | |
<td>{{ h.link_to(group.title or group.name, h.url_for(controller='group', action='read', id=group.name)) }}</td> | |
<td class="metric">{{ num_packages }}</td> | |
</tr> | |
{% endfor %} | |
</tbody> | |
</table> | |
{% else %} | |
<p class="empty">{{ _('No groups') }}</p> | |
{% endif %} | |
</section> | |
<section id="stats-by-org" class="module-content tab-content"> | |
<h2>{{ _('Datasets by Organization') }}</h2> | |
{% if c.by_org %} | |
<table class="table table-chunky table-bordered table-striped"> | |
<thead> | |
<tr> | |
<th>{{ _('Organisation') }}</th> | |
<th>{{ _('Public/Archived') }}</th> | |
<th class="metric">{{ _('Number of datasets') }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for group,private, num_packages in c.by_org %} | |
{% if private == False or h.check_access('sysadmin') %} | |
<tr> | |
<td>{{ h.link_to(group.title or group.name, h.url_for(controller='organization', action='read', id=group.name)) }}</td> | |
{% if private == True %} | |
<td>Archived</td> | |
{% else %} | |
<td>Public</td> | |
{% endif %} | |
<td class="metric">{{ num_packages }}</td> | |
</tr> | |
{% endif %} | |
{% endfor %} | |
</tbody> | |
</table> | |
{% else %} | |
<p class="empty">{{ _('No groups') }}</p> | |
{% endif %} | |
</section> | |
<section id="stats-res-by-org" class="module-content tab-content"> | |
<h2>{{ _('Resources by Organization') }}</h2> | |
{% if c.res_by_org %} | |
<table class="table table-chunky table-bordered table-striped"> | |
<thead> | |
<tr> | |
<th>{{ _('Organisation') }}</th> | |
<th>{{ _('Tabular') }}</th> | |
<th>{{ _('Spatial') }}</th> | |
<th>{{ _('Other') }}</th> | |
<th class="metric">{{ _('Total') }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for group,t,s,o,tot in c.res_by_org %} | |
<tr> | |
<td>{{ h.link_to(group.title or group.name, h.url_for(controller='organization', action='read', id=group.name)) }}</td> | |
<td>{{ t }}</td> | |
<td>{{ s }}</td> | |
<td>{{ o }}</td> | |
<td class="metric">{{ tot }}</td> | |
</tr> | |
{% endfor %} | |
</tbody> | |
</table> | |
{% else %} | |
<p class="empty">{{ _('No groups') }}</p> | |
{% endif %} | |
</section> | |
<section id="stats-activity-org" class="module-content tab-content"> | |
<h2>{{ _('Most Active Organisations') }}</h2> | |
{% if c.top_active_orgs %} | |
<table class="table table-chunky table-bordered table-striped"> | |
<thead> | |
<tr> | |
<th>{{ _('Organisation') }}</th> | |
<th class="metric">{{ _('Number of datasets updated recently') }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for group, num_packages in c.top_active_orgs %} | |
<tr> | |
<td>{{ h.link_to(group.title or group.name, h.url_for(controller='organization', action='read', id=group.name)) }}</td> | |
<td class="metric">{{ num_packages }}</td> | |
</tr> | |
{% endfor %} | |
</tbody> | |
</table> | |
{% else %} | |
<p class="empty">{{ _('No groups') }}</p> | |
{% endif %} | |
</section> | |
<section id="stats-summary" class="module-content tab-content"> | |
<h2>{{ _('Summary') }}</h2> | |
{% if c.summary_stats %} | |
<table class="table table-chunky table-bordered table-striped"> | |
<thead> | |
<tr> | |
<th>{{ _('Measure') }}</th> | |
<th class="metric">{{ _('Value') }}</th> | |
</tr> | |
</thead> | |
<tbody> | |
{% for measure,value in c.summary_stats %} | |
{% if 'Archived' not in measure or h.check_access('sysadmin') %} | |
<tr> | |
<td>{{measure}}</td> | |
<td class="metric">{{ value }}</td> | |
</tr> | |
{% endif %} | |
{% endfor %} | |
</tbody> | |
</table> | |
{% else %} | |
<p class="empty">{{ _('No groups') }}</p> | |
{% endif %} | |
</section> | |
</article> | |
{% endblock %} | |
{% block secondary_content %} | |
<section class="module module-narrow"> | |
<h2 class="module-heading"><i class="icon-bar-chart icon-medium"></i> {{ _('Statistics Menu') }}</h2> | |
<nav data-module="stats-nav"> | |
<ul class="unstyled nav nav-simple"> | |
{% if h.check_access('sysadmin') %} | |
<li class="nav-item"><a href="#stats-recent-datasets" data-toggle="tab">{{ _('Recent Datasets') }}</a></li> | |
<li class="nav-item"><a href="#stats-user-access-list" data-toggle="tab">{{ _('User Access List') }}</a></li> | |
{% endif %} | |
<li class="nav-item"><a href="#stats-total-datasets" data-toggle="tab">{{ _('Total Number of Datasets') }}</a></li> | |
<li class="nav-item"><a href="#stats-dataset-revisions" data-toggle="tab">{{ _('Dataset Revisions per Week') }}</a></li> | |
<li class="nav-item"><a href="#stats-most-edited" data-toggle="tab">{{ _('Most Edited Datasets') }}</a></li> | |
<li class="nav-item"><a href="#stats-by-org" data-toggle="tab">{{ _('Datasets by Organization') }}</a></li> | |
<li class="nav-item"><a href="#stats-res-by-org" data-toggle="tab">{{ _('Resources by Organization') }}</a></li> | |
<li class="nav-item active"><a href="#stats-summary" data-toggle="tab">{{ _('Summary') }}</a></li> | |
</ul> | |
</nav> | |
</section> | |
{% endblock %} | |
{% block scripts %} | |
{{ super() }} | |
{# | |
Hellish hack to get excanvas to work in IE8. We disable html5shiv from | |
overriding the createElement() method on this page. | |
See: http://stackoverflow.com/questions/10208062/using-flot-with-bootstrap-ie8-incompatibility | |
#} | |
{% resource "vendor/block_html5_shim" %} | |
{% resource "ckanext_dga_stats/stats" %} | |
{% endblock %} | |
<html xmlns:py="http://genshi.edgewall.org/" | |
xmlns:i18n="http://genshi.edgewall.org/i18n" | |
xmlns:xi="http://www.w3.org/2001/XInclude" | |
py:strip=""> | |
<py:def i18n:msg="" function="page_title">Statistics</py:def> | |
<py:def function="page_heading"> | |
Statistics | |
</py:def> | |
<py:def function="optional_feed"> | |
<!--! | |
Hellish hack to get excanvas to work in IE8. We disable html5shiv from | |
overriding the createElement() method on this page. | |
See: http://stackoverflow.com/questions/10208062/using-flot-with-bootstrap-ie8-incompatibility | |
--> | |
<!--[if lte IE 8 ]><script>var html5 = {shivMethods: false};</script><![endif]--> | |
</py:def> | |
<py:def function="optional_head"> | |
<style type="text/css"> | |
body #sidebar { | |
display: none; | |
} | |
body #content { | |
width: 950px; | |
} | |
h3 { | |
margin-top: 20px; | |
} | |
.graph { | |
width: 950px; | |
height: 300px; | |
margin-bottom: 20px; | |
} | |
.metric { | |
width: 30%; | |
} | |
</style> | |
</py:def> | |
<py:match path="minornavigation"> | |
<ul class="tabbed"> | |
<li class="current-tab"> | |
<a href="">Home</a> | |
</li> | |
</ul> | |
</py:match> | |
<div py:match="content"> | |
<h3>Total number of Datasets</h3> | |
<div id="new_packages_graph" class="graph"></div> | |
<h3>Revisions to Datasets per week</h3> | |
<div id="package_revisions_graph" class="graph"></div> | |
<h3>Top Rated Datasets</h3> | |
<table py:if="c.top_rated_packages" class="table table-bordered table-striped"> | |
<tr><th>Dataset</th><th>Average rating</th><th class="metric">Number of ratings</th></tr> | |
<tr py:for="package, rating, num_ratings in c.top_rated_packages"> | |
<td>${h.link_to(package.title or package.name, h.url_for(controller='package', action='read', id=package.name))}</td><td>${rating}</td><td>${num_ratings}</td> | |
</tr> | |
</table> | |
<p py:if="not c.top_rated_packages">No ratings</p> | |
<h3>Most Edited Datasets</h3> | |
<table class="table table-bordered table-striped"> | |
<tr><th>Dataset</th><th class="metric">Number of edits</th></tr> | |
<tr py:for="package, edits in c.most_edited_packages"> | |
<td>${h.link_to(package.title or package.name, h.url_for(controller='package', action='read', id=package.name))}</td><td>${edits}</td> | |
</tr> | |
</table> | |
<h3>Largest Groups</h3> | |
<table class="table table-bordered table-striped"> | |
<tr><th>Group</th><th class="metric">Number of datasets</th></tr> | |
<tr py:for="group, num_packages in c.largest_groups"> | |
<td>${h.link_to(group.title or group.name, h.url_for(controller='group', action='read', id=group.name))}</td><td>${num_packages}</td> | |
</tr> | |
</table> | |
<h3>Top Tags</h3> | |
<table class="table table-bordered table-striped"> | |
<tr py:for="tag, num_packages in c.top_tags"> | |
<td>${h.link_to(tag.name, h.url_for(controller='tag', action='read', id=tag.name))}</td><td class="metric">${num_packages}</td> | |
</tr> | |
</table> | |
<h3>Users owning most datasets</h3> | |
<table class="table table-bordered table-striped"> | |
<tr py:for="user, num_packages in c.top_package_owners"> | |
<td>${h.linked_user(user)}</td><td class="metric">${num_packages}</td> | |
</tr> | |
</table> | |
<p> | |
Page last updated: | |
<?python | |
import datetime | |
?> | |
${datetime.datetime.now().strftime('%c')} | |
</p> | |
</div> | |
<py:def function="optional_footer"> | |
<script type="text/javascript"> | |
// HACKy | |
$('body').addClass('no-sidebar'); | |
</script> | |
${jsConditionalForIe(8, '<script language="javascript" type="text/javascript" src="' + h.url_for_static('/scripts/vendor/flot/0.7/excanvas.js') + '"></script>', 'lte')} | |
<script type="text/javascript" src="${ h.url_for_static('/scripts/vendor/flot/0.7/jquery.flot.js') }">//pointless jscript comment</script> | |
<script type="text/javascript"> | |
var options = { | |
xaxis: { | |
mode: "time", | |
timeformat: "%y-%b" | |
}, | |
yaxis: { | |
min: 0 | |
}, | |
legend: { | |
position: "nw" | |
} | |
}; | |
var data = [ | |
[ | |
${",".join(c.packages_by_week)} | |
] | |
]; | |
$.plot($("#new_packages_graph"), data, options); | |
</script> | |
<script type="text/javascript"> | |
var options = { | |
xaxis: { | |
mode: "time", | |
timeformat: "%y-%b" | |
}, | |
legend: { | |
position: "nw" | |
}, | |
colors: ["#ffcc33", "#ff8844"] | |
}; | |
var data = [ | |
{label: "All package revisions", | |
lines: {fill: 1 }, | |
data: [${",".join(c.all_package_revisions)}]}, | |
{label: "New datasets", | |
lines: {fill: 1}, | |
data: [${",".join(c.new_datasets)}]} | |
]; | |
$.plot($("#package_revisions_graph"), data, options); | |
</script> | |
</py:def> | |
<xi:include href="../../layout.html" /> | |
</html> | |
<html xmlns:py="http://genshi.edgewall.org/" | |
xmlns:i18n="http://genshi.edgewall.org/i18n" | |
xmlns:xi="http://www.w3.org/2001/XInclude" | |
py:strip=""> | |
<py:def function="page_title">Leaderboard - Stats</py:def> | |
<py:def function="optional_head"> | |
<script type="text/javascript"> | |
var solrCoreUrl = '${c.solr_core_url}'; | |
</script> | |
<script type="text/javascript" src="${h.url_for('/ckanext/stats/app.js')}"></script> | |
<link type="text/css" rel="stylesheet" media="all" href="${h.url_for('/ckanext/stats/style.css')}" /> | |
</py:def> | |
<div py:match="content"> | |
<h2>Dataset Leaderboard</h2> | |
<p>Choose a dataset attribute and find out which categories in that area have the most datasets. E.g. tags, groups, license, res_format, country.</p> | |
<form> | |
<label for="category">Choose area</label> | |
<input type="text" value="tags" name="attribute" id="form-attribute" /> | |
<input type="submit" value="Dataset Counts »" name="submit" /> | |
</form> | |
<div class="category-counts"> | |
<ul class="chartlist" id="category-counts"> | |
</ul> | |
</div> | |
</div> | |
<xi:include href="../../layout.html" /> | |
</html> | |
import paste.fixture | |
from pylons import config | |
from ckan.config.middleware import make_app | |
class StatsFixture(object): | |
@classmethod | |
def setup_class(cls): | |
cls._original_config = config.copy() | |
config['ckan.plugins'] = 'dga_stats' | |
wsgiapp = make_app(config['global_conf'], **config) | |
cls.app = paste.fixture.TestApp(wsgiapp) | |
@classmethod | |
def teardown_class(cls): | |
config.clear() | |
config.update(cls._original_config) | |
import datetime | |
from nose.tools import assert_equal | |
from ckan.lib.create_test_data import CreateTestData | |
from ckan import model | |
from ckanext.dga_stats.stats import Stats, RevisionStats | |
from ckanext.dga_stats.tests import StatsFixture | |
class TestStatsPlugin(StatsFixture): | |
@classmethod | |
def setup_class(cls): | |
super(TestStatsPlugin, cls).setup_class() | |
CreateTestData.create_arbitrary([ | |
{'name':'test1', 'groups':['grp1'], 'tags':['tag1']}, | |
{'name':'test2', 'groups':['grp1', 'grp2'], 'tags':['tag1']}, | |
{'name':'test3', 'groups':['grp1', 'grp2'], 'tags':['tag1', 'tag2']}, | |
{'name':'test4'}, | |
], | |
extra_user_names=['bob'], | |
admins=['bob'], | |
) | |
# hack revision timestamps to be this date | |
week1 = datetime.datetime(2011, 1, 5) | |
for rev in model.Session.query(model.Revision): | |
rev.timestamp = week1 + datetime.timedelta(seconds=1) | |
# week 2 | |
rev = model.repo.new_revision() | |
rev.author = 'bob' | |
rev.timestamp = datetime.datetime(2011, 1, 12) | |
model.Package.by_name(u'test2').delete() | |
model.repo.commit_and_remove() | |
# week 3 | |
rev = model.repo.new_revision() | |
rev.author = 'sandra' | |
rev.timestamp = datetime.datetime(2011, 1, 19) | |
model.Package.by_name(u'test3').title = 'Test 3' | |
model.repo.commit_and_remove() | |
rev = model.repo.new_revision() | |
rev.author = 'sandra' | |
rev.timestamp = datetime.datetime(2011, 1, 20) | |
model.Package.by_name(u'test4').title = 'Test 4' | |
model.repo.commit_and_remove() | |
# week 4 | |
rev = model.repo.new_revision() | |
rev.author = 'bob' | |
rev.timestamp = datetime.datetime(2011, 1, 26) | |
model.Package.by_name(u'test3').notes = 'Test 3 notes' | |
model.repo.commit_and_remove() | |
@classmethod | |
def teardown_class(cls): | |
CreateTestData.delete() | |
def test_top_rated_packages(self): | |
pkgs = Stats.top_rated_packages() | |
assert pkgs == [] | |
def test_most_edited_packages(self): | |
pkgs = Stats.most_edited_packages() | |
pkgs = [(pkg.name, count) for pkg, count in pkgs] | |
assert_equal(pkgs[0], ('test3', 3)) | |
assert_equal(pkgs[1][1], 2) | |
assert_equal(pkgs[2][1], 2) | |
assert_equal(pkgs[3], ('test1', 1)) | |
def test_largest_groups(self): | |
grps = Stats.largest_groups() | |
grps = [(grp.name, count) for grp, count in grps] | |
assert_equal(grps, [('grp1', 3), | |
('grp2', 2)]) | |
def test_top_tags(self): | |
tags = Stats.top_tags() | |
tags = [(tag.name, count) for tag, count in tags] | |
assert_equal(tags, [('tag1', 3), | |
('tag2', 1)]) | |
def test_top_package_owners(self): | |
owners = Stats.top_package_owners() | |
owners = [(owner.name, count) for owner, count in owners] | |
assert_equal(owners, [('bob', 4)]) | |
def test_new_packages_by_week(self): | |
new_packages_by_week = RevisionStats.get_by_week('new_packages') | |
def get_results(week_number): | |
date, ids, num, cumulative = new_packages_by_week[week_number] | |
return (date, set([model.Session.query(model.Package).get(id).name for id in ids]), num, cumulative) | |
assert_equal(get_results(0), | |
('2011-01-03', set((u'test1', u'test2', u'test3', u'test4')), 4, 4)) | |
assert_equal(get_results(1), | |
('2011-01-10', set([]), 0, 4)) | |
assert_equal(get_results(2), | |
('2011-01-17', set([]), 0, 4)) | |
assert_equal(get_results(3), | |
('2011-01-24', set([]), 0, 4)) | |
def test_deleted_packages_by_week(self): | |
deleted_packages_by_week = RevisionStats.get_by_week('deleted_packages') | |
def get_results(week_number): | |
date, ids, num, cumulative = deleted_packages_by_week[week_number] | |
return (date, [model.Session.query(model.Package).get(id).name for id in ids], num, cumulative) | |
assert_equal(get_results(0), | |
('2011-01-10', [u'test2'], 1, 1)) | |
assert_equal(get_results(1), | |
('2011-01-17', [], 0, 1)) | |
assert_equal(get_results(2), | |
('2011-01-24', [], 0, 1)) | |
assert_equal(get_results(3), | |
('2011-01-31', [], 0, 1)) | |
def test_revisions_by_week(self): | |
revisions_by_week = RevisionStats.get_by_week('package_revisions') | |
def get_results(week_number): | |
date, ids, num, cumulative = revisions_by_week[week_number] | |
return (date, num, cumulative) | |
num_setup_revs = revisions_by_week[0][2] | |
assert 6 > num_setup_revs > 2, num_setup_revs | |
assert_equal(get_results(0), | |
('2011-01-03', num_setup_revs, num_setup_revs)) | |
assert_equal(get_results(1), | |
('2011-01-10', 1, num_setup_revs+1)) | |
assert_equal(get_results(2), | |
('2011-01-17', 2, num_setup_revs+3)) | |
assert_equal(get_results(3), | |
('2011-01-24', 1, num_setup_revs+4)) | |
def test_num_packages_by_week(self): | |
num_packages_by_week = RevisionStats.get_num_packages_by_week() | |
# e.g. [('2011-05-30', 3, 3)] | |
assert_equal(num_packages_by_week[0], ('2011-01-03', 4, 4)) | |
assert_equal(num_packages_by_week[1], ('2011-01-10', -1, 3)) | |
assert_equal(num_packages_by_week[2], ('2011-01-17', 0, 3)) | |
assert_equal(num_packages_by_week[3], ('2011-01-24', 0, 3)) | |
import os | |
from ckan.tests import url_for | |
from ckanext.dga_stats.tests import StatsFixture | |
class TestStatsPlugin(StatsFixture): | |
def test_01_config(self): | |
from pylons import config | |
paths = config['extra_public_paths'] | |
publicdir = os.path.join(os.path.dirname(os.path.dirname(__file__)), | |
'public') | |
assert paths.startswith(publicdir), (publicdir, paths) | |
def test_02_index(self): | |
url = url_for('stats') | |
out = self.app.get(url) | |
assert 'Total number of Datasets' in out, out | |
assert 'Most Edited Datasets' in out, out | |
def test_03_leaderboard(self): | |
url = url_for('stats_action', action='leaderboard') | |
out = self.app.get(url) | |
assert 'Leaderboard' in out, out | |
from setuptools import setup, find_packages | from setuptools import setup, find_packages |
version = '0.1' | version = '0.1' |
setup( | setup( |
name='ckanext-dga-stats', | name='ckanext-dga-stats', |
version=version, | version=version, |
description='Extension for customising CKAN Statistics for data.gov.au', | description='Extension for customising CKAN Statistics for data.gov.au', |
long_description='', | long_description='', |
classifiers=[], # Get strings from http://pypi.python.org/pypi?%3Aaction=list_classifiers | classifiers=[], # Get strings from http://pypi.python.org/pypi?%3Aaction=list_classifiers |
keywords='', | keywords='', |
author='Alex Sadleir', | author='Alex Sadleir', |
author_email='alex.sadleir@linkdigital.com.au', | author_email='alex.sadleir@linkdigital.com.au', |
url='', | url='', |
license='', | license='', |
packages=find_packages(exclude=['ez_setup', 'examples', 'tests']), | packages=find_packages(exclude=['ez_setup', 'examples', 'tests']), |
namespace_packages=['ckanext', 'ckanext.dga-stats'], | namespace_packages=['ckanext', 'ckanext.dga_stats'], |
include_package_data=True, | include_package_data=True, |
zip_safe=False, | zip_safe=False, |
install_requires=[], | install_requires=[], |
entry_points=\ | entry_points=\ |
""" | """ |
[ckan.plugins] | [ckan.plugins] |
dga-stats=ckanext.dga-stats.plugin:StatsPlugin | dga_stats=ckanext.dga_stats.plugin:StatsPlugin |
""", | """, |
) | ) |