MDL-55110 core: Add support for smooth lines

Part of MDL-54987 epic.

diff --git a/lib/amd/build/chart_line.min.js b/lib/amd/build/chart_line.min.js
index 69764d6..042acb2 100644 (file)
Binary files a/lib/amd/build/chart_line.min.js and b/lib/amd/build/chart_line.min.js differ

diff --git a/lib/amd/build/chart_output_chartjs.min.js b/lib/amd/build/chart_output_chartjs.min.js
index 82499a8..b513434 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/build/chart_series.min.js b/lib/amd/build/chart_series.min.js
index 91e0a00..8cc752b 100644 (file)
Binary files a/lib/amd/build/chart_series.min.js and b/lib/amd/build/chart_series.min.js differ

diff --git a/lib/amd/src/chart_line.js b/lib/amd/src/chart_line.js
index ff30a86..07ccb9b 100644 (file)
--- a/lib/amd/src/chart_line.js
+++ b/lib/amd/src/chart_line.js
@@ -38,6 +38,43 @@ define(['core/chart_base'], function(Base) {
     /** @override */
     Line.prototype.TYPE = 'line';
 
+    /**
+     * Whether the line should be smooth or not.
+     *
+     * By default the chart lines are not smooth.
+     *
+     * @type {Bool}
+     * @protected
+     */
+    Line.prototype._smooth = false;
+
+    /** @override */
+    Line.prototype.create = function(Klass, data) {
+        var chart = Base.prototype.create.apply(this, arguments);
+        chart.setSmooth(data.smooth);
+        return chart;
+    };
+
+    /**
+     * Get whether the line should be smooth or not.
+     *
+     * @method getSmooth
+     * @returns {Bool}
+     */
+    Line.prototype.getSmooth = function() {
+        return this._smooth;
+    };
+
+    /**
+     * Set whether the line should be smooth or not.
+     *
+     * @method setSmooth
+     * @param {Bool} smooth True if the line chart should be smooth, false otherwise.
+     */
+    Line.prototype.setSmooth = function(smooth) {
+        this._smooth = Boolean(smooth);
+    };
+
     return Line;
 
 });

diff --git a/lib/amd/src/chart_output_chartjs.js b/lib/amd/src/chart_output_chartjs.js
index d7e42d3..dad0074 100644 (file)
--- a/lib/amd/src/chart_output_chartjs.js
+++ b/lib/amd/src/chart_output_chartjs.js
@@ -26,8 +26,10 @@ define([
     'core/chartjs',
     'core/chart_axis',
     'core/chart_output_base',
+    'core/chart_line',
     'core/chart_pie',
-], function($, Chartjs, Axis, Base, Pie) {
+    'core/chart_series'
+], function($, Chartjs, Axis, Base, Line, Pie, Series) {
 
     /**
      * Makes an axis ID.
@@ -208,6 +210,7 @@ define([
                 backgroundColor: colors,
                 // Pie charts look better without borders.
                 borderColor: this._chart.getType() == Pie.prototype.TYPE ? null : colors,
+                lineTension: this._isSmooth(series) ? 0.3 : 0
             };
 
             if (series.getXAxis() !== null) {
@@ -222,6 +225,27 @@ define([
         return sets;
     };
 
+    /**
+     * Verify if the chart line is smooth or not.
+     *
+     * @protected
+     * @param {module:core/chart_series} series The series.
+     * @returns {Bool}
+     */
+    Output.prototype._isSmooth = function(series) {
+        var smooth = false;
+        if (this._chart.getType() === Line.prototype.TYPE) {
+            smooth = series.getSmooth();
+            if (smooth === null) {
+                smooth = this._chart.getSmooth();
+            }
+        } else if (series.getType() === Series.prototype.TYPE_LINE) {
+            smooth = series.getSmooth();
+        }
+
+        return smooth;
+    };
+
     /** @override */
     Output.prototype.update = function() {
         $.extend(true, this._config, this._makeConfig());

diff --git a/lib/amd/src/chart_series.js b/lib/amd/src/chart_series.js
index c32d523..e5756c6 100644 (file)
--- a/lib/amd/src/chart_series.js
+++ b/lib/amd/src/chart_series.js
@@ -79,6 +79,14 @@ define([], function() {
      */
     Series.prototype._label = null;
 
+    /**
+     * Whether the line of the serie should be smooth or not.
+     *
+     * @type {Bool}
+     * @protected
+     */
+    Series.prototype._smooth = false;
+
     /**
      * The type of the series.
      *
@@ -132,6 +140,7 @@ define([], function() {
             s.setColor(obj.colors[0]);
         }
 
+        s.setSmooth(obj.smooth);
         return s;
     };
 
@@ -171,6 +180,15 @@ define([], function() {
         return this._label;
     };
 
+    /**
+     * Get whether the line of the serie should be smooth or not.
+     *
+     * @returns {Bool}
+     */
+    Series.prototype.getSmooth = function() {
+        return this._smooth;
+    };
+
     /**
      * Get the series type.
      *
@@ -237,6 +255,18 @@ define([], function() {
         this._colors = colors || [];
     };
 
+    /**
+     * Set Whether the line of the serie should be smooth or not.
+     *
+     * Only applicable for line chart or a line series, if null it assumes the chart default (not smooth).
+     *
+     * @param smooth
+     */
+    Series.prototype.setSmooth = function(smooth) {
+        smooth = typeof smooth === 'undefined' ? null : smooth;
+        this._smooth = smooth;
+    };
+
     /**
      * Set the type of the series.
      *

diff --git a/lib/classes/chart_line.php b/lib/classes/chart_line.php
index 82f4f46..5a55e0e 100644 (file)
--- a/lib/classes/chart_line.php
+++ b/lib/classes/chart_line.php
@@ -33,4 +33,36 @@ defined('MOODLE_INTERNAL') || die();
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 class chart_line extends chart_base {
+
+    /** @var bool Whether the line should be smooth or not. */
+    protected $smooth = false;
+
+    /**
+     * Add the smooth to the parent and return the serialized data.
+     *
+     * @return array
+     */
+    public function jsonSerialize() {
+        $data = parent::jsonSerialize();
+        $data['smooth'] = $this->get_smooth();
+        return $data;
+    }
+
+    /**
+     * Get whether a lines should be smooth or not.
+     *
+     * @return bool
+     */
+    public function get_smooth() {
+        return $this->smooth;
+    }
+
+    /**
+     * Set Whether the line should be smooth or not.
+     *
+     * @param bool $smooth True if the line chart should be smooth, false otherwise.
+     */
+    public function set_smooth($smooth) {
+        $this->smooth = $smooth;
+    }
 }

diff --git a/lib/classes/chart_series.php b/lib/classes/chart_series.php
index 8b01e41..24e3623 100644 (file)
--- a/lib/classes/chart_series.php
+++ b/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 bool Whether the line of the serie should be smooth or not. */
+    protected $smooth = null;
     /** @var string Type of the series. */
     protected $type = self::TYPE_DEFAULT;
     /** @var float[] Values of the series. */
@@ -102,6 +104,15 @@ class chart_series implements JsonSerializable {
         return $this->label;
     }
 
+    /**
+     * Get whether the line of the serie should be smooth or not.
+     *
+     * @return bool
+     */
+    public function get_smooth() {
+        return $this->smooth;
+    }
+
     /**
      * Get the type of series.
      *
@@ -161,7 +172,8 @@ class chart_series implements JsonSerializable {
             'axes' => [
                 'x' => $this->xaxis,
                 'y' => $this->yaxis,
-            ]
+            ],
+            'smooth' => $this->smooth
         ];
         return $data;
     }
@@ -184,6 +196,17 @@ class chart_series implements JsonSerializable {
         $this->colors = $colors;
     }
 
+    /**
+     * Set whether the line of the serie should be smooth or not.
+     *
+     * Only applicable for line chart or a line series, if null it assumes the chart default (not smooth).
+     *
+     * @param bool true if the line should be smooth, false if not.
+     */
+    public function set_smooth($smooth) {
+        $this->smooth = $smooth;
+    }
+
     /**
      * Set the type of the series.
      *