| /* 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(); | |
| } | |
| } | |
| }; | |
| }); | |