MDL-56792 core_charts: clean html content from title and labels
authorSimey Lameze <simey@moodle.com>
Tue, 8 Nov 2016 06:30:55 +0000 (14:30 +0800)
committerSimey Lameze <simey@moodle.com>
Wed, 9 Nov 2016 02:41:12 +0000 (10:41 +0800)
This commit add cleanData() and call it from all places that has labels or title
to guarantee that html content will not be printed on the chart.

lib/amd/build/chart_output_chartjs.min.js
lib/amd/src/chart_output_chartjs.js

index a329bcd..69b06cd 100644 (file)
Binary files a/lib/amd/build/chart_output_chartjs.min.js and b/lib/amd/build/chart_output_chartjs.min.js differ
index 9665a37..99656e8 100644 (file)
@@ -98,6 +98,23 @@ define([
         this._chartjs = new Chartjs(this._canvas[0], this._config);
     };
 
+    /**
+     * Clean data.
+     *
+     * @param {(String|String[])} data A single string or an array of strings.
+     * @returns {(String|String[])}
+     * @protected
+     */
+    Output.prototype._cleanData = function(data) {
+        if (data instanceof Array) {
+            return data.map(function(value) {
+                return $('<span>').html(value).text();
+            });
+        } else {
+            return $('<span>').html(data).text();
+        }
+    };
+
     /**
      * Get the chart type and handles the Chart.js specific chart types.
      *
@@ -143,7 +160,7 @@ define([
         if (axis.getLabel() !== null) {
             scaleData.scaleLabel = {
                 display: true,
-                labelString: axis.getLabel()
+                labelString: this._cleanData(axis.getLabel())
             };
         }
 
@@ -176,13 +193,13 @@ define([
         var config = {
             type: this._getChartType(),
             data: {
-                labels: this._chart.getLabels(),
+                labels: this._cleanData(this._chart.getLabels()),
                 datasets: this._makeDatasetsConfig()
             },
             options: {
                 title: {
                     display: this._chart.getTitle() !== null,
-                    text: this._chart.getTitle()
+                    text: this._cleanData(this._chart.getTitle())
                 }
             }
         };
@@ -236,7 +253,7 @@ define([
         var sets = this._chart.getSeries().map(function(series) {
             var colors = series.hasColoredValues() ? series.getColors() : series.getColor();
             var dataset = {
-                label: series.getLabel(),
+                label: this._cleanData(series.getLabel()),
                 data: series.getValues(),
                 type: series.getType(),
                 fill: false,
@@ -276,11 +293,11 @@ define([
         var tooltipData = chartData[tooltipItem.index];
 
         // Build default tooltip.
-        var tooltip = serieLabel + ': ' + tooltipData;
+        var tooltip = this._cleanData(serieLabel) + ': ' + tooltipData;
 
-        // Add serie labels to the tooltip if any.
+        // Add series labels to the tooltip if any.
         if (serieLabels !== null) {
-            tooltip = serieLabels[tooltipItem.index];
+            tooltip = this._cleanData(serieLabels[tooltipItem.index]);
         }
 
         return tooltip;