MDL-55089 core: Charts are displayed with a data table by default

Part of MDL-54987 epic.

lang/en/moodle.php

@@ -1680,6 +1680,7 @@ $string['showallcourses'] = 'Show all courses';
 $string['showallusers'] = 'Show all users';
 $string['showblockcourse'] = 'Show list of courses containing block';
 $string['showcategory'] = 'Show {$a}';
+$string['showchartdata'] = 'Show chart data';
 $string['showcomments'] = 'Show/hide comments';
 $string['showcommentsnonjs'] = 'Show comments';
 $string['showdescription'] = 'Display description on course page';

lib/outputrenderers.php

@@ -4315,18 +4315,15 @@ EOD;
      * Renders a chart.
      *
      * @param \core\chart_base $chart The chart.
+     * @param bool $withtable Whether to include a data table with the chart.
      * @return string.
      */
-    public function render_chart(\core\chart_base $chart) {
+    public function render_chart(\core\chart_base $chart, $withtable = true) {
-        $id = 'chart' . uniqid();
+        $chartdata = json_encode($chart);
-        $div = html_writer::tag('div', '', ['id' => $id]);
+        return $this->render_from_template('core/chart', (object) [
-        $js = "require(['core/chart_builder', 'core/chart_output'], function(Builder, Output) {
+            'chartdata' => $chartdata,
-            Builder.make(" . json_encode($chart) . ").then(function(ChartInst) {
+            'withtable' => $withtable
-                new Output('#" . $id . "', ChartInst);
+        ]);
-            });
-        });";
-        $this->page->requires->js_init_code($js, true);
-        return $div;
     }
 
 }

lib/templates/chart.mustache

@@ -0,0 +1,61 @@
+{{!
+    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 rendering.
+}}
+<div class="chart-area" id="chart-area-{{uniqid}}">
+    <div class="chart-image" role="decoration" aria-describedby="chart-table-data-{{uniqid}}"></div>
+    <div class="chart-table {{^withtable}}accesshide{{/withtable}}">
+        <p class="chart-table-expand">
+            <a href="#" aria-controls="chart-table-data-{{uniqid}}" role="button">
+                {{#str}}showchartdata, moodle{{/str}}
+            </a>
+        </p>
+        <div class="chart-table-data" id="chart-table-data-{{uniqid}}" {{#withtable}}aria-expanded="false"{{/withtable}}></div>
+    </div>
+</div>
+
+{{#js}}
+require([
+    'jquery',
+    'core/chart_builder',
+    'core/chart_output_chartjs',
+    'core/chart_output_htmltable',
+], function($, Builder, Output, OutputTable) {
+    var data = {{{chartdata}}},
+        uniqid = "{{uniqid}}",
+        chartArea = $('#chart-area-' + uniqid),
+        chartImage = chartArea.find('.chart-image'),
+        chartTable = chartArea.find('.chart-table-data');
+
+    Builder.make(data).then(function(ChartInst) {
+        new Output(chartImage, ChartInst);
+        new OutputTable(chartTable, ChartInst);
+    });
+
+    chartArea.find('.chart-table-expand a').first().click(function(e) {
+        e.preventDefault();
+        if (chartTable.is(':visible')) {
+            chartTable.hide();
+            chartTable.attr('aria-expanded', false);
+        } else {
+            chartTable.show();
+            chartTable.attr('aria-expanded', true);
+        }
+    });
+});
+{{/js}}

theme/bootstrapbase/less/moodle/core.less

@@ -2540,3 +2540,29 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
 .chart-output-htmltable {
     width: 100%;
 }
+
+/** Chart area. */
+.chart-area {
+
+    .chart-table-data {
+        display: none;
+    }
+    .chart-table-expand {
+        text-align: right;
+    }
+
+    .chart-table {
+        /** When accessible, we display the table only. */
+        &.accesshide {
+            .chart-table-expand {
+                display: none;
+            }
+            .chart-table-data {
+                display: block;
+            }
+        }
+    }
+}
+.dir-rtl .chart-area .chart-table-expand {
+    text-align: left;
+}