MDL-55262 core: Add support for series values labels

Part of MDL-54987 epic.

lib/amd/src/chart_output_chartjs.js

@@ -211,6 +211,12 @@ define([
             }
         }.bind(this));
 
+        config.options.tooltips = {
+            callbacks: {
+                label: this._makeTooltip.bind(this)
+            }
+        };
+
         return config;
     };
 
@@ -246,6 +252,34 @@ define([
         return sets;
     };
 
+    /**
+     * Get the chart data, add labels and rebuild the tooltip.
+     *
+     * @param {Object[]} tooltipItem The tooltip item data.
+     * @param {Object[]} data The chart data.
+     * @returns {String}
+     * @protected
+     */
+    Output.prototype._makeTooltip = function(tooltipItem, data) {
+
+        // 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 = data.datasets[tooltipItem.datasetIndex].data;
+        var tooltipData = chartData[tooltipItem.index];
+
+        // Build default tooltip.
+        var tooltip = serieLabel + ': ' + tooltipData;
+
+        // Add serie labels to the tooltip if any.
+        if (serieLabels !== null) {
+            tooltip += ' ' + serieLabels[tooltipItem.index];
+        }
+
+        return tooltip;
+    };
+
     /**
      * Verify if the chart line is smooth or not.
      *

lib/amd/src/chart_output_htmltable.js

@@ -63,6 +63,7 @@ define([
             labels = c.getLabels(),
             hasLabel = labels.length > 0,
             series = c.getSeries(),
+            seriesLabels,
             rowCount = series[0].getCount();
 
         // Identify the table.
@@ -99,6 +100,10 @@ define([
             }
             for (var serieId = 0; serieId < series.length; serieId++) {
                 value = series[serieId].getValues()[rowId];
+                seriesLabels = series[serieId].getLabels();
+                if (seriesLabels !== null) {
+                    value += ' ' + series[serieId].getLabels()[rowId];
+                }
                 node.append($('<td>').text(value));
             }
             tbl.append(node);

lib/amd/src/chart_series.js

@@ -79,6 +79,14 @@ define([], function() {
      */
     Series.prototype._label = null;
 
+    /**
+     * The labels for the values of the series.
+     *
+     * @type {String[]}
+     * @protected
+     */
+     Series.prototype._labels = null;
+
     /**
      * Whether the line of the serie should be smooth or not.
      *
@@ -132,6 +140,7 @@ define([], function() {
         s.setType(obj.type);
         s.setXAxis(obj.axes.x);
         s.setYAxis(obj.axes.y);
+        s.setLabels(obj.labels);
 
         // Colors are exported as an array with 1, or n values.
         if (obj.colors && obj.colors.length > 1) {
@@ -180,6 +189,15 @@ define([], function() {
         return this._label;
     };
 
+    /**
+     * Get labels for the values of the series.
+     *
+     * @return {String[]}
+     */
+    Series.prototype.getLabels = function() {
+        return this._labels;
+    };
+
     /**
      * Get whether the line of the serie should be smooth or not.
      *
@@ -255,6 +273,17 @@ define([], function() {
         this._colors = colors || [];
     };
 
+    /**
+     * Set the labels for the values of the series.
+     *
+     * @param labels
+     */
+    Series.prototype.setLabels = function(labels) {
+        this._validateLabels(labels);
+        labels = typeof labels === 'undefined' ? null : labels;
+        this._labels = labels;
+    };
+
     /**
      * Set Whether the line of the serie should be smooth or not.
      *
@@ -298,6 +327,18 @@ define([], function() {
         this._yaxis = index || null;
     };
 
+    /**
+     * Validate series labels.
+     *
+     * @protected
+     * @param {String[]} labels The labels of the serie.
+     */
+    Series.prototype._validateLabels = function(labels) {
+        if (labels && labels.length > 0 && labels.length != this.getCount()) {
+            throw new Error('Series labels must match series values.');
+        }
+    };
+
     return Series;
 
 });

lib/classes/chart_series.php

@@ -46,6 +46,8 @@ class chart_series implements JsonSerializable {
     protected $colors = [];
     /** @var string Label for this series. */
     protected $label;
+    /** @var string[] Labels for the values of the series. */
+    protected $labels = null;
     /** @var bool Whether the line of the serie should be smooth or not. */
     protected $smooth = null;
     /** @var string Type of the series. */
@@ -104,6 +106,15 @@ public function get_label() {
         return $this->label;
     }
 
+    /**
+     * Set labels for the values of the series.
+     *
+     * @return array
+     */
+    public function get_labels() {
+        return $this->labels;
+    }
+
     /**
      * Get whether the line of the serie should be smooth or not.
      *
@@ -166,6 +177,7 @@ public function has_colored_values() {
     public function jsonSerialize() {
         $data = [
             'label' => $this->label,
+            'labels' => $this->labels,
             'type' => $this->type,
             'values' => $this->values,
             'colors' => $this->colors,
@@ -196,6 +208,15 @@ public function set_colors(array $colors) {
         $this->colors = $colors;
     }
 
+    /**
+     * Set labels for the values of the series.
+     *
+     * @param array $labels The labels for the series values.
+     */
+    public function set_labels($labels) {
+        $this->labels = $labels;
+    }
+
     /**
      * Set whether the line of the serie should be smooth or not.
      *