lib/templates/chart.mustache

   1 {{!
   2     This file is part of Moodle - http://moodle.org/
   3
   4     Moodle is free software: you can redistribute it and/or modify
   5     it under the terms of the GNU General Public License as published by
   6     the Free Software Foundation, either version 3 of the License, or
   7     (at your option) any later version.
   8
   9     Moodle is distributed in the hope that it will be useful,
  10     but WITHOUT ANY WARRANTY; without even the implied warranty of
  11     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  12     GNU General Public License for more details.
  13
  14     You should have received a copy of the GNU General Public License
  15     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  16 }}
  17 {{!
  18     @template core/chart
  19
  20     Chart rendering.
  21
  22     Example context (json):
  23     {
  24         "withtable": true,
  25         "chartdata": "null"
  26     }
  27 }}
  28 <div class="chart-area" id="chart-area-{{uniqid}}">
  29     <div class="chart-image" role="presentation" aria-describedby="chart-table-data-{{uniqid}}"></div>
  30     <div class="chart-table {{^withtable}}accesshide{{/withtable}}">
  31         <p class="chart-table-expand">
  32             <a href="#" aria-controls="chart-table-data-{{uniqid}}" role="button">
  33                 {{#str}}showchartdata, moodle{{/str}}
  34             </a>
  35         </p>
  36         <div class="chart-table-data" id="chart-table-data-{{uniqid}}" {{#withtable}}role="complementary" aria-expanded="false"{{/withtable}}></div>
  37     </div>
  38 </div>
  39
  40 {{#js}}
  41 require([
  42     'jquery',
  43     'core/chart_builder',
  44     'core/chart_output_chartjs',
  45     'core/chart_output_htmltable',
  46 ], function($, Builder, Output, OutputTable) {
  47     var data = {{{chartdata}}},
  48         uniqid = "{{uniqid}}",
  49         chartArea = $('#chart-area-' + uniqid),
  50         chartImage = chartArea.find('.chart-image'),
  51         chartTable = chartArea.find('.chart-table-data'),
  52         chartLink = chartArea.find('.chart-table-expand a');
  53     Builder.make(data).then(function(ChartInst) {
  54         new Output(chartImage, ChartInst);
  55         new OutputTable(chartTable, ChartInst);
  56     });
  57
  58     chartLink.on('click', function(e) {
  59         e.preventDefault();
  60         if (chartTable.is(':visible')) {
  61             chartTable.hide();
  62             chartLink.text({{#quote}}{{#str}}showchartdata, moodle{{/str}}{{/quote}});
  63             chartTable.attr('aria-expanded', false);
  64         } else {
  65             chartTable.show();
  66             chartLink.text({{#quote}}{{#str}}hidechartdata, moodle{{/str}}{{/quote}});
  67             chartTable.attr('aria-expanded', true);
  68         }
  69     });
  70 });
  71 {{/js}}