MDL-56792 core_charts: clean html content from title and labels

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.

diff --git a/lib/amd/build/chart_output_chartjs.min.js b/lib/amd/build/chart_output_chartjs.min.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

diff --git a/lib/amd/src/chart_output_chartjs.js b/lib/amd/src/chart_output_chartjs.js
index 9665a37..99656e8 100644 (file)
--- a/lib/amd/src/chart_output_chartjs.js
+++ b/lib/amd/src/chart_output_chartjs.js
@@ -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;