MDL-55039 core: First implementation of HTML table rendering for charts

Part of MDL-54987 epic.

lib/amd/build/chart_output_htmltable.min.js

@@ -0,0 +1 @@
+define(["jquery","core/chart_output_base"],function(a,b){function c(){b.prototype.constructor.apply(this,arguments),this._build()}return c.prototype=Object.create(b.prototype),c.prototype._build=function(){this._node.empty(),this._node.append(this._makeTable())},c.prototype._makeTable=function(){var b,c,d=a("<table>"),e=this._chart,f=e.getLabels(),g=f.length>0,h=e.getSeries(),i=h[0].getCount();d.addClass("chart-output-htmltable"),null!==e.getTitle()&&d.append(a("<caption>").text(e.getTitle())),b=a("<tr>"),g&&b.append(a("<td>")),h.forEach(function(c){b.append(a("<th>").text(c.getLabel()).attr("scope","col"))}),d.append(b);for(var j=0;i>j;j++){b=a("<tr>"),f.length>0&&b.append(a("<th>").text(f[j]).attr("scope","row"));for(var k=0;k<h.length;k++)c=h[k].getValues()[j],b.append(a("<td>").text(c));d.append(b)}return d},c.prototype.update=function(){this._build()},c});

lib/amd/src/chart_output_htmltable.js

@@ -0,0 +1,117 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Chart output for HTML table.
+ *
+ * @package    core
+ * @copyright  2016 Frédéric Massart - FMCorz.net
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ * @module     core/chart_output_htmltable
+ */
+define([
+    'jquery',
+    'core/chart_output_base',
+], function($, Base) {
+
+    /**
+     * Render a chart as an HTML table.
+     *
+     * @class
+     * @extends {module:core/chart_output_base}
+     * @alias module:core/chart_output_htmltable
+     */
+    function Output() {
+        Base.prototype.constructor.apply(this, arguments);
+        this._build();
+    }
+    Output.prototype = Object.create(Base.prototype);
+
+    /**
+     * Attach the table to the document.
+     *
+     * @protected
+     */
+    Output.prototype._build = function() {
+        this._node.empty();
+        this._node.append(this._makeTable());
+    };
+
+    /**
+     * Builds the table node.
+     *
+     * @protected
+     * @return {Jquery}
+     */
+    Output.prototype._makeTable = function() {
+        var tbl = $('<table>'),
+            c = this._chart,
+            node,
+            value,
+            labels = c.getLabels(),
+            hasLabel = labels.length > 0,
+            series = c.getSeries(),
+            rowCount = series[0].getCount();
+
+        // Identify the table.
+        tbl.addClass('chart-output-htmltable');
+
+        // Set the caption.
+        if (c.getTitle() !== null) {
+            tbl.append($('<caption>').text(c.getTitle()));
+        }
+
+        // Write the column headers.
+        node = $('<tr>');
+        if (hasLabel) {
+            node.append($('<td>'));
+        }
+        series.forEach(function(serie) {
+            node.append(
+                $('<th>')
+                .text(serie.getLabel())
+                .attr('scope', 'col')
+            );
+        });
+        tbl.append(node);
+
+        // Write rows.
+        for (var rowId = 0; rowId < rowCount; rowId++) {
+            node = $('<tr>');
+            if (labels.length > 0) {
+                node.append(
+                    $('<th>')
+                    .text(labels[rowId])
+                    .attr('scope', 'row')
+                );
+            }
+            for (var serieId = 0; serieId < series.length; serieId++) {
+                value = series[serieId].getValues()[rowId];
+                node.append($('<td>').text(value));
+            }
+            tbl.append(node);
+        }
+
+        return tbl;
+    };
+
+    /** @override */
+    Output.prototype.update = function() {
+        this._build();
+    };
+
+    return Output;
+
+});

theme/bootstrapbase/less/moodle/core.less

@@ -2535,3 +2535,8 @@ dd:after {
 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
     margin-top: -20px;
 }
+
+/** Chart output HTML table */
+.chart-output-htmltable {
+    width: 100%;
+}