Merge branch 'MDL-71708' of https://github.com/lostrogit/moodle

lib/amd/build/chart_output_chartjs.min.js

@@ -5,6 +5,6 @@
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  * @module     core/chart_output_chartjs
  */
-define("core/chart_output_chartjs",["jquery","core/chartjs","core/chart_axis","core/chart_bar","core/chart_output_base","core/chart_line","core/chart_pie","core/chart_series"],(function($,Chartjs,Axis,Bar,Base,Line,Pie,Series){var makeAxisId=function(xy,index){return"axis-"+xy+"-"+index};function Output(){Base.prototype.constructor.apply(this,arguments),this._canvas=this._node,"CANVAS"!=this._canvas.prop("tagName")&&(this._canvas=$("<canvas>"),this._node.append(this._canvas)),this._build()}return Output.prototype=Object.create(Base.prototype),Output.prototype._config=null,Output.prototype._chartjs=null,Output.prototype._canvas=null,Output.prototype._build=function(){this._config=this._makeConfig(),this._chartjs=new Chartjs(this._canvas[0],this._config)},Output.prototype._cleanData=function(data){return data instanceof Array?data.map((function(value){return $("<span>").html(value).text()})):$("<span>").html(data).text()},Output.prototype._getChartType=function(){var type=this._chart.getType();return this._chart.getType()===Bar.prototype.TYPE&&!0===this._chart.getHorizontal()?type="horizontalBar":this._chart.getType()===Pie.prototype.TYPE&&!0===this._chart.getDoughnut()&&(type="doughnut"),type},Output.prototype._makeAxisConfig=function(axis,xy,index){var scaleData={id:makeAxisId(xy,index)};return axis.getPosition()!==Axis.prototype.POS_DEFAULT&&(scaleData.position=axis.getPosition()),null!==axis.getLabel()&&(scaleData.scaleLabel={display:!0,labelString:this._cleanData(axis.getLabel())}),null!==axis.getStepSize()&&(scaleData.ticks=scaleData.ticks||{},scaleData.ticks.stepSize=axis.getStepSize()),null!==axis.getMax()&&(scaleData.ticks=scaleData.ticks||{},scaleData.ticks.max=axis.getMax()),null!==axis.getMin()&&(scaleData.ticks=scaleData.ticks||{},scaleData.ticks.min=axis.getMin()),scaleData},Output.prototype._makeConfig=function(){var config={type:this._getChartType(),data:{labels:this._cleanData(this._chart.getLabels()),datasets:this._makeDatasetsConfig()},options:{title:{display:null!==this._chart.getTitle(),text:this._cleanData(this._chart.getTitle())}}},legendOptions=this._chart.getLegendOptions();return legendOptions&&(config.options.legend=legendOptions),this._chart.getXAxes().forEach(function(axis,i){var axisLabels=axis.getLabels();config.options.scales=config.options.scales||{},config.options.scales.xAxes=config.options.scales.xAxes||[],config.options.scales.xAxes[i]=this._makeAxisConfig(axis,"x",i),null!==axisLabels&&(config.options.scales.xAxes[i].ticks.callback=function(value,index){return axisLabels[index]||""}),config.options.scales.xAxes[i].stacked=this._isStacked()}.bind(this)),this._chart.getYAxes().forEach(function(axis,i){var axisLabels=axis.getLabels();config.options.scales=config.options.scales||{},config.options.scales.yAxes=config.options.scales.yAxes||[],config.options.scales.yAxes[i]=this._makeAxisConfig(axis,"y",i),null!==axisLabels&&(config.options.scales.yAxes[i].ticks.callback=function(value){return axisLabels[parseInt(value,10)]||""}),config.options.scales.yAxes[i].stacked=this._isStacked()}.bind(this)),config.options.tooltips={callbacks:{label:this._makeTooltip.bind(this)}},config},Output.prototype._makeDatasetsConfig=function(){return this._chart.getSeries().map(function(series){var colors=series.hasColoredValues()?series.getColors():series.getColor(),dataset={label:this._cleanData(series.getLabel()),data:series.getValues(),type:series.getType(),fill:series.getFill(),backgroundColor:colors,borderColor:this._chart.getType()==Pie.prototype.TYPE?"#fff":colors,lineTension:this._isSmooth(series)?.3:0};return null!==series.getXAxis()&&(dataset.xAxisID=makeAxisId("x",series.getXAxis())),null!==series.getYAxis()&&(dataset.yAxisID=makeAxisId("y",series.getYAxis())),dataset}.bind(this))},Output.prototype._makeTooltip=function(tooltipItem,data){var series=this._chart.getSeries()[tooltipItem.datasetIndex],serieLabel=series.getLabel(),serieLabels=series.getLabels(),tooltipData=data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index],tooltip=[];if(""==tooltipItem.xLabel&&""==tooltipItem.yLabel){var chartLabels=this._cleanData(this._chart.getLabels());tooltip.push(chartLabels[tooltipItem.index])}return null!==serieLabels?tooltip.push(this._cleanData(serieLabels[tooltipItem.index])):tooltip.push(this._cleanData(serieLabel)+": "+tooltipData),tooltip},Output.prototype._isSmooth=function(series){var smooth=!1;return this._chart.getType()===Line.prototype.TYPE?null===(smooth=series.getSmooth())&&(smooth=this._chart.getSmooth()):series.getType()===Series.prototype.TYPE_LINE&&(smooth=series.getSmooth()),smooth},Output.prototype._isStacked=function(){var stacked=!1;return this._chart.getType()===Bar.prototype.TYPE&&(stacked=this._chart.getStacked()),stacked},Output.prototype.update=function(){$.extend(!0,this._config,this._makeConfig()),this._chartjs.update()},Output}));
+define("core/chart_output_chartjs",["jquery","core/chartjs","core/chart_axis","core/chart_bar","core/chart_output_base","core/chart_line","core/chart_pie","core/chart_series"],(function($,Chartjs,Axis,Bar,Base,Line,Pie,Series){var makeAxisId=function(xy,index){return"axis-"+xy+"-"+index};function Output(){Base.prototype.constructor.apply(this,arguments),this._canvas=this._node,"CANVAS"!=this._canvas.prop("tagName")&&(this._canvas=$("<canvas>"),this._node.append(this._canvas)),this._build()}return Output.prototype=Object.create(Base.prototype),Output.prototype._config=null,Output.prototype._chartjs=null,Output.prototype._canvas=null,Output.prototype._build=function(){this._config=this._makeConfig(),this._chartjs=new Chartjs(this._canvas[0],this._config)},Output.prototype._cleanData=function(data){return data instanceof Array?data.map((function(value){return $("<span>").html(value).text()})):$("<span>").html(data).text()},Output.prototype._getChartType=function(){var type=this._chart.getType();return this._chart.getType()===Bar.prototype.TYPE&&!0===this._chart.getHorizontal()?type="horizontalBar":this._chart.getType()===Pie.prototype.TYPE&&!0===this._chart.getDoughnut()&&(type="doughnut"),type},Output.prototype._makeAxisConfig=function(axis,xy,index){var scaleData={id:makeAxisId(xy,index)};return axis.getPosition()!==Axis.prototype.POS_DEFAULT&&(scaleData.position=axis.getPosition()),null!==axis.getLabel()&&(scaleData.title={display:!0,text:this._cleanData(axis.getLabel())}),null!==axis.getStepSize()&&(scaleData.ticks=scaleData.ticks||{},scaleData.ticks.stepSize=axis.getStepSize()),null!==axis.getMax()&&(scaleData.ticks=scaleData.ticks||{},scaleData.ticks.max=axis.getMax()),null!==axis.getMin()&&(scaleData.ticks=scaleData.ticks||{},scaleData.ticks.min=axis.getMin()),scaleData},Output.prototype._makeConfig=function(){var charType=this._getChartType(),config={type:charType,data:{labels:this._cleanData(this._chart.getLabels()),datasets:this._makeDatasetsConfig()},options:{responsive:!0,maintainAspectRatio:!1,plugins:{title:{display:null!==this._chart.getTitle(),text:this._cleanData(this._chart.getTitle())}}}};"horizontalBar"===charType&&(config.type="bar",config.options.indexAxis="y");var legendOptions=this._chart.getLegendOptions();return legendOptions&&(config.options.plugins.legend=legendOptions),this._chart.getXAxes().forEach(function(axis,i){var axisLabels=axis.getLabels();config.options.scales=config.options.scales||{},config.options.scales.x=config.options.scales.x||{},config.options.scales.x[i]=this._makeAxisConfig(axis,"x",i),null!==axisLabels&&(config.options.scales.x[i].ticks.callback=function(value,index){return axisLabels[index]||""}),config.options.scales.x.stacked=this._isStacked()}.bind(this)),this._chart.getYAxes().forEach(function(axis,i){var axisLabels=axis.getLabels();config.options.scales=config.options.scales||{},config.options.scales.y=config.options.scales.yAxes||{},config.options.scales.y[i]=this._makeAxisConfig(axis,"y",i),null!==axisLabels&&(config.options.scales.y[i].ticks.callback=function(value){return axisLabels[parseInt(value,10)]||""}),config.options.scales.y.stacked=this._isStacked()}.bind(this)),config.options.plugins.tooltip={callbacks:{label:this._makeTooltip.bind(this)}},config},Output.prototype._makeDatasetsConfig=function(){return this._chart.getSeries().map(function(series){var colors=series.hasColoredValues()?series.getColors():series.getColor(),dataset={label:this._cleanData(series.getLabel()),data:series.getValues(),type:series.getType(),fill:series.getFill(),backgroundColor:colors,borderColor:this._chart.getType()==Pie.prototype.TYPE?"#fff":colors,tension:this._isSmooth(series)?.3:0};return null!==series.getXAxis()&&(dataset.xAxisID=makeAxisId("x",series.getXAxis())),null!==series.getYAxis()&&(dataset.yAxisID=makeAxisId("y",series.getYAxis())),dataset}.bind(this))},Output.prototype._makeTooltip=function(tooltipItem){var serieLabel=this._chart.getSeries()[tooltipItem.datasetIndex].getLabel(),tooltipData=tooltipItem.dataset.data[tooltipItem.dataIndex],tooltip=[];if(this._chart.getType()===Pie.prototype.TYPE){var chartLabels=this._cleanData(this._chart.getLabels());tooltip.push(chartLabels[tooltipItem.dataIndex]+" - "+this._cleanData(serieLabel)+": "+tooltipData)}else tooltip.push(this._cleanData(serieLabel)+": "+tooltipData);return tooltip},Output.prototype._isSmooth=function(series){var smooth=!1;return this._chart.getType()===Line.prototype.TYPE?null===(smooth=series.getSmooth())&&(smooth=this._chart.getSmooth()):series.getType()===Series.prototype.TYPE_LINE&&(smooth=series.getSmooth()),smooth},Output.prototype._isStacked=function(){var stacked=!1;return this._chart.getType()===Bar.prototype.TYPE&&(stacked=this._chart.getStacked()),stacked},Output.prototype.update=function(){$.extend(!0,this._config,this._makeConfig()),this._chartjs.update()},Output}));
 
 //# sourceMappingURL=chart_output_chartjs.min.js.map

lib/amd/src/chart_output_chartjs.js

@@ -156,9 +156,9 @@ define([
         }
 
         if (axis.getLabel() !== null) {
-            scaleData.scaleLabel = {
+            scaleData.title = {
                 display: true,
-                labelString: this._cleanData(axis.getLabel())
+                text: this._cleanData(axis.getLabel())
             };
         }
 
@@ -187,22 +187,33 @@ define([
      * @return {Object} The axis config.
      */
     Output.prototype._makeConfig = function() {
+        var charType = this._getChartType();
         var config = {
-            type: this._getChartType(),
+            type: charType,
             data: {
                 labels: this._cleanData(this._chart.getLabels()),
                 datasets: this._makeDatasetsConfig()
             },
             options: {
-                title: {
+                responsive: true,
-                    display: this._chart.getTitle() !== null,
+                maintainAspectRatio: false,
-                    text: this._cleanData(this._chart.getTitle())
+                plugins: {
+                    title: {
+                        display: this._chart.getTitle() !== null,
+                        text: this._cleanData(this._chart.getTitle())
+                    }
                 }
             }
         };
+
+        if (charType === 'horizontalBar') {
+            config.type = 'bar';
+            config.options.indexAxis = 'y';
+        }
+
         var legendOptions = this._chart.getLegendOptions();
         if (legendOptions) {
-            config.options.legend = legendOptions;
+            config.options.plugins.legend = legendOptions;
         }
 
 
@@ -210,33 +221,33 @@ define([
             var axisLabels = axis.getLabels();
 
             config.options.scales = config.options.scales || {};
-            config.options.scales.xAxes = config.options.scales.xAxes || [];
+            config.options.scales.x = config.options.scales.x || {};
-            config.options.scales.xAxes[i] = this._makeAxisConfig(axis, 'x', i);
+            config.options.scales.x[i] = this._makeAxisConfig(axis, 'x', i);
 
             if (axisLabels !== null) {
-                config.options.scales.xAxes[i].ticks.callback = function(value, index) {
+                config.options.scales.x[i].ticks.callback = function(value, index) {
                     return axisLabels[index] || '';
                 };
             }
-            config.options.scales.xAxes[i].stacked = this._isStacked();
+            config.options.scales.x.stacked = this._isStacked();
         }.bind(this));
 
         this._chart.getYAxes().forEach(function(axis, i) {
             var axisLabels = axis.getLabels();
 
             config.options.scales = config.options.scales || {};
-            config.options.scales.yAxes = config.options.scales.yAxes || [];
+            config.options.scales.y = config.options.scales.yAxes || {};
-            config.options.scales.yAxes[i] = this._makeAxisConfig(axis, 'y', i);
+            config.options.scales.y[i] = this._makeAxisConfig(axis, 'y', i);
 
             if (axisLabels !== null) {
-                config.options.scales.yAxes[i].ticks.callback = function(value) {
+                config.options.scales.y[i].ticks.callback = function(value) {
                     return axisLabels[parseInt(value, 10)] || '';
                 };
             }
-            config.options.scales.yAxes[i].stacked = this._isStacked();
+            config.options.scales.y.stacked = this._isStacked();
         }.bind(this));
 
-        config.options.tooltips = {
+        config.options.plugins.tooltip = {
             callbacks: {
                 label: this._makeTooltip.bind(this)
             }
@@ -262,7 +273,7 @@ define([
                 backgroundColor: colors,
                 // Pie charts look better without borders.
                 borderColor: this._chart.getType() == Pie.prototype.TYPE ? '#fff' : colors,
-                lineTension: this._isSmooth(series) ? 0.3 : 0
+                tension: this._isSmooth(series) ? 0.3 : 0
             };
 
             if (series.getXAxis() !== null) {
@@ -280,32 +291,25 @@ define([
     /**
      * Get the chart data, add labels and rebuild the tooltip.
      *
-     * @param {Object[]} tooltipItem The tooltip item data.
+     * @param {Object[]} tooltipItem The tooltip item object.
-     * @param {Object[]} data The chart data.
+     * @returns {*[]}
-     * @returns {String}
      * @protected
      */
-    Output.prototype._makeTooltip = function(tooltipItem, data) {
+    Output.prototype._makeTooltip = function(tooltipItem) {
 
         // Get series and chart data to rebuild the tooltip and add labels.
         var series = this._chart.getSeries()[tooltipItem.datasetIndex];
         var serieLabel = series.getLabel();
-        var serieLabels = series.getLabels();
+        var chartData = tooltipItem.dataset.data;
-        var chartData = data.datasets[tooltipItem.datasetIndex].data;
+        var tooltipData = chartData[tooltipItem.dataIndex];
-        var tooltipData = chartData[tooltipItem.index];
 
         // Build default tooltip.
         var tooltip = [];
 
-        // Pie and doughnut charts does not have axis.
+        // Pie and doughnut charts tooltip are different.
-        if (tooltipItem.xLabel == '' && tooltipItem.yLabel == '') {
+        if (this._chart.getType() === Pie.prototype.TYPE) {
             var chartLabels = this._cleanData(this._chart.getLabels());
-            tooltip.push(chartLabels[tooltipItem.index]);
+            tooltip.push(chartLabels[tooltipItem.dataIndex] + ' - ' + this._cleanData(serieLabel) + ': ' + tooltipData);
-        }
-
-        // Add series labels to the tooltip if any.
-        if (serieLabels !== null) {
-            tooltip.push(this._cleanData(serieLabels[tooltipItem.index]));
         } else {
             tooltip.push(this._cleanData(serieLabel) + ': ' + tooltipData);
         }

lib/thirdpartylibs.xml

@@ -228,7 +228,7 @@
     <location>amd/src/chartjs-lazy.js</location>
     <name>Chart.js</name>
     <license>MIT</license>
-    <version>2.9.4</version>
+    <version>3.8.0</version>
   </library>
   <library>
     <location>maxmind/GeoIp2</location>

theme/boost/scss/moodle/core.scss

@@ -2164,6 +2164,14 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
 
 /** Chart area. */
 .chart-area {
+    @include media-breakpoint-up(lg) {
+        .chart-image {
+            position: relative;
+            margin: auto;
+            height: 48vh;
+            width: 46vw;
+        }
+    }
 
     .chart-table-data {
         display: none;

theme/boost/style/moodle.css

@@ -11612,6 +11612,13 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
   margin-top: -20px; }
 
 /** Chart area. */
+@media (min-width: 992px) {
+  .chart-area .chart-image {
+    position: relative;
+    margin: auto;
+    height: 48vh;
+    width: 46vw; } }
+
 .chart-area .chart-table-data {
   display: none; }
 

theme/classic/style/moodle.css

@@ -11612,6 +11612,13 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
   margin-top: -20px; }
 
 /** Chart area. */
+@media (min-width: 992px) {
+  .chart-area .chart-image {
+    position: relative;
+    margin: auto;
+    height: 48vh;
+    width: 46vw; } }
+
 .chart-area .chart-table-data {
   display: none; }