MDL-55110 core: Add support for smooth lines

Part of MDL-54987 epic.

lib/amd/build/chart_line.min.js

@@ -1 +1 @@
-define(["core/chart_base"],function(a){function b(){a.prototype.constructor.apply(this,arguments)}return b.prototype=Object.create(a.prototype),b.prototype.TYPE="line",b});
+define(["core/chart_base"],function(a){function b(){a.prototype.constructor.apply(this,arguments)}return b.prototype=Object.create(a.prototype),b.prototype.TYPE="line",b.prototype._smooth=!1,b.prototype.create=function(b,c){var d=a.prototype.create.apply(this,arguments);return d.setSmooth(c.smooth),d},b.prototype.getSmooth=function(){return this._smooth},b.prototype.setSmooth=function(a){this._smooth=Boolean(a)},b});

lib/amd/build/chart_output_chartjs.min.js

@@ -1 +1 @@
-define(["jquery","core/chartjs","core/chart_axis","core/chart_output_base","core/chart_pie"],function(a,b,c,d,e){function f(){d.prototype.constructor.apply(this,arguments),this._canvas=this._node,"CANVAS"!=this._canvas.prop("tagName")&&(this._canvas=a("<canvas>"),this._node.append(this._canvas)),this._build()}var g=function(a,b){return"axis-"+a+"-"+b};return f.prototype=Object.create(d.prototype),f.prototype._config=null,f.prototype._chartjs=null,f.prototype._canvas=null,f.prototype._build=function(){this._config=this._makeConfig(),this._chartjs=new b(this._canvas[0],this._config)},f.prototype._makeAxisConfig=function(a,b,d){var e={id:g(b,d)};return a.getPosition()!==c.prototype.POS_DEFAULT&&(e.position=a.getPosition()),null!==a.getLabel()&&(e.scaleLabel={display:!0,labelString:a.getLabel()}),null!==a.getStepSize()&&(e.ticks=e.ticks||{},e.ticks.stepSize=a.getStepSize()),null!==a.getMax()&&(e.ticks=e.ticks||{},e.ticks.max=a.getMax()),null!==a.getMin()&&(e.ticks=e.ticks||{},e.ticks.min=a.getMin()),e},f.prototype._makeConfig=function(){var a={type:this._chart.getType(),data:{labels:this._chart.getLabels(),datasets:this._makeDatasetsConfig()},options:{title:{display:null!==this._chart.getTitle(),text:this._chart.getTitle()}}};return this._chart.getXAxes().forEach(function(b,c){var d=b.getLabels();a.options.scales=a.options.scales||{},a.options.scales.xAxes=a.options.scales.xAxes||[],a.options.scales.xAxes[c]=this._makeAxisConfig(b,"x",c),null!==d&&(a.options.scales.xAxes[c].ticks.callback=function(a,b){return d[b]||""})}.bind(this)),this._chart.getYAxes().forEach(function(b,c){var d=b.getLabels();a.options.scales=a.options.scales||{},a.options.scales.yAxes=a.options.scales.yAxes||[],a.options.scales.yAxes[c]=this._makeAxisConfig(b,"y",c),null!==d&&(a.options.scales.yAxes[c].ticks.callback=function(a){return d[parseInt(a,10)]||""})}.bind(this)),a},f.prototype._makeDatasetsConfig=function(){var a=this._chart.getSeries().map(function(a){var b=a.hasColoredValues()?a.getColors():a.getColor(),c={label:a.getLabel(),data:a.getValues(),type:a.getType(),fill:!1,backgroundColor:b,borderColor:this._chart.getType()==e.prototype.TYPE?null:b};return null!==a.getXAxis()&&(c.xAxisID=g("x",a.getXAxis())),null!==a.getYAxis()&&(c.yAxisID=g("y",a.getYAxis())),c}.bind(this));return a},f.prototype.update=function(){a.extend(!0,this._config,this._makeConfig()),this._chartjs.update()},f});
+define(["jquery","core/chartjs","core/chart_axis","core/chart_output_base","core/chart_line","core/chart_pie","core/chart_series"],function(a,b,c,d,e,f,g){function h(){d.prototype.constructor.apply(this,arguments),this._canvas=this._node,"CANVAS"!=this._canvas.prop("tagName")&&(this._canvas=a("<canvas>"),this._node.append(this._canvas)),this._build()}var i=function(a,b){return"axis-"+a+"-"+b};return h.prototype=Object.create(d.prototype),h.prototype._config=null,h.prototype._chartjs=null,h.prototype._canvas=null,h.prototype._build=function(){this._config=this._makeConfig(),this._chartjs=new b(this._canvas[0],this._config)},h.prototype._makeAxisConfig=function(a,b,d){var e={id:i(b,d)};return a.getPosition()!==c.prototype.POS_DEFAULT&&(e.position=a.getPosition()),null!==a.getLabel()&&(e.scaleLabel={display:!0,labelString:a.getLabel()}),null!==a.getStepSize()&&(e.ticks=e.ticks||{},e.ticks.stepSize=a.getStepSize()),null!==a.getMax()&&(e.ticks=e.ticks||{},e.ticks.max=a.getMax()),null!==a.getMin()&&(e.ticks=e.ticks||{},e.ticks.min=a.getMin()),e},h.prototype._makeConfig=function(){var a={type:this._chart.getType(),data:{labels:this._chart.getLabels(),datasets:this._makeDatasetsConfig()},options:{title:{display:null!==this._chart.getTitle(),text:this._chart.getTitle()}}};return this._chart.getXAxes().forEach(function(b,c){var d=b.getLabels();a.options.scales=a.options.scales||{},a.options.scales.xAxes=a.options.scales.xAxes||[],a.options.scales.xAxes[c]=this._makeAxisConfig(b,"x",c),null!==d&&(a.options.scales.xAxes[c].ticks.callback=function(a,b){return d[b]||""})}.bind(this)),this._chart.getYAxes().forEach(function(b,c){var d=b.getLabels();a.options.scales=a.options.scales||{},a.options.scales.yAxes=a.options.scales.yAxes||[],a.options.scales.yAxes[c]=this._makeAxisConfig(b,"y",c),null!==d&&(a.options.scales.yAxes[c].ticks.callback=function(a){return d[parseInt(a,10)]||""})}.bind(this)),a},h.prototype._makeDatasetsConfig=function(){var a=this._chart.getSeries().map(function(a){var b=a.hasColoredValues()?a.getColors():a.getColor(),c={label:a.getLabel(),data:a.getValues(),type:a.getType(),fill:!1,backgroundColor:b,borderColor:this._chart.getType()==f.prototype.TYPE?null:b,lineTension:this._isSmooth(a)?.3:0};return null!==a.getXAxis()&&(c.xAxisID=i("x",a.getXAxis())),null!==a.getYAxis()&&(c.yAxisID=i("y",a.getYAxis())),c}.bind(this));return a},h.prototype._isSmooth=function(a){var b=!1;return this._chart.getType()===e.prototype.TYPE?(b=a.getSmooth(),null===b&&(b=this._chart.getSmooth())):a.getType()===g.prototype.TYPE_LINE&&(b=a.getSmooth()),b},h.prototype.update=function(){a.extend(!0,this._config,this._makeConfig()),this._chartjs.update()},h});

lib/amd/build/chart_series.min.js

@@ -1 +1 @@
-define([],function(){function a(a,b){if("string"!=typeof a)throw new Error("Invalid label for series.");if("object"!=typeof b)throw new Error("Values for a series must be an array.");if(b.length<1)throw new Error("Invalid values received for series.");this._colors=[],this._label=a,this._values=b}return a.prototype.TYPE_DEFAULT=null,a.prototype.TYPE_LINE="line",a.prototype._colors=null,a.prototype._label=null,a.prototype._type=a.prototype.TYPE_DEFAULT,a.prototype._values=null,a.prototype._xaxis=null,a.prototype._yaxis=null,a.prototype.create=function(b){var c=new a(b.label,b.values);return c.setType(b.type),c.setXAxis(b.axes.x),c.setYAxis(b.axes.y),b.colors&&b.colors.length>1?c.setColors(b.colors):c.setColor(b.colors[0]),c},a.prototype.getColor=function(){return this._colors[0]||null},a.prototype.getColors=function(){return this._colors},a.prototype.getCount=function(){return this._values.length},a.prototype.getLabel=function(){return this._label},a.prototype.getType=function(){return this._type},a.prototype.getValues=function(){return this._values},a.prototype.getXAxis=function(){return this._xaxis},a.prototype.getYAxis=function(){return this._yaxis},a.prototype.hasColoredValues=function(){return this._colors.length==this.getCount()},a.prototype.setColor=function(a){this._colors=[a]},a.prototype.setColors=function(a){if(a&&a.length!=this.getCount())throw new Error("When setting multiple colors there must be one per value.");this._colors=a||[]},a.prototype.setType=function(a){if(a!=this.TYPE_DEFAULT&&a!=this.TYPE_LINE)throw new Error("Invalid serie type.");this._type=a||null},a.prototype.setXAxis=function(a){this._xaxis=a||null},a.prototype.setYAxis=function(a){this._yaxis=a||null},a});
+define([],function(){function a(a,b){if("string"!=typeof a)throw new Error("Invalid label for series.");if("object"!=typeof b)throw new Error("Values for a series must be an array.");if(b.length<1)throw new Error("Invalid values received for series.");this._colors=[],this._label=a,this._values=b}return a.prototype.TYPE_DEFAULT=null,a.prototype.TYPE_LINE="line",a.prototype._colors=null,a.prototype._label=null,a.prototype._smooth=!1,a.prototype._type=a.prototype.TYPE_DEFAULT,a.prototype._values=null,a.prototype._xaxis=null,a.prototype._yaxis=null,a.prototype.create=function(b){var c=new a(b.label,b.values);return c.setType(b.type),c.setXAxis(b.axes.x),c.setYAxis(b.axes.y),b.colors&&b.colors.length>1?c.setColors(b.colors):c.setColor(b.colors[0]),c.setSmooth(b.smooth),c},a.prototype.getColor=function(){return this._colors[0]||null},a.prototype.getColors=function(){return this._colors},a.prototype.getCount=function(){return this._values.length},a.prototype.getLabel=function(){return this._label},a.prototype.getSmooth=function(){return this._smooth},a.prototype.getType=function(){return this._type},a.prototype.getValues=function(){return this._values},a.prototype.getXAxis=function(){return this._xaxis},a.prototype.getYAxis=function(){return this._yaxis},a.prototype.hasColoredValues=function(){return this._colors.length==this.getCount()},a.prototype.setColor=function(a){this._colors=[a]},a.prototype.setColors=function(a){if(a&&a.length!=this.getCount())throw new Error("When setting multiple colors there must be one per value.");this._colors=a||[]},a.prototype.setSmooth=function(a){a="undefined"==typeof a?null:a,this._smooth=a},a.prototype.setType=function(a){if(a!=this.TYPE_DEFAULT&&a!=this.TYPE_LINE)throw new Error("Invalid serie type.");this._type=a||null},a.prototype.setXAxis=function(a){this._xaxis=a||null},a.prototype.setYAxis=function(a){this._yaxis=a||null},a});

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;
 
 });

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());

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.
      *