Versatile clipping (#6642)

Versatile clipping algorithm for different chart types

diff --git a/docs/charts/bar.md b/docs/charts/bar.md
index 9bb8e4c8b4356af3fc7f701edab5d9de382e08ac..f2b0193bd2aaef578e4e17e902097ed5f9082c0d 100644 (file)
--- a/docs/charts/bar.md
+++ b/docs/charts/bar.md
@@ -72,6 +72,7 @@ the color of the bars is generally set this way.
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'bottom'`
 | [`borderWidth`](#borderwidth) | <code>number&#124;object</code> | Yes | Yes | `0`
+| [`clip`](#general) | <code>number&#124;object</code> | - | - | `undefined`
 | [`data`](#data-structure) | `object[]` | - | - | **required**
 | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | - | Yes | `undefined`
 | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | - | Yes | `undefined`
@@ -85,6 +86,7 @@ the color of the bars is generally set this way.
 
 | Name | Description
 | ---- | ----
+| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
 | `label` | The label for the dataset which appears in the legend and tooltips.
 | `order` | The drawing order of dataset. Also affects order for stacking, tooltip, and legend.
 | `xAxisID` | The ID of the x axis to plot this dataset on.
@@ -100,6 +102,7 @@ The style of each bar can be controlled with the following properties:
 | `borderColor` | The bar border color.
 | [`borderSkipped`](#borderskipped) | The edge to skip when drawing bar.
 | [`borderWidth`](#borderwidth) | The bar border width (in pixels).
+| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
 
 All these values, if `undefined`, fallback to the associated [`elements.rectangle.*`](../configuration/elements.md#rectangle-configuration) options.
 

diff --git a/docs/charts/bubble.md b/docs/charts/bubble.md
index 6536395c279c21fb02c88ede9b1821a9f8f66924..d9dd73892a3af1c10dbf0cab4450ae6367a9b58d 100644 (file)
--- a/docs/charts/bubble.md
+++ b/docs/charts/bubble.md
@@ -43,6 +43,7 @@ The bubble chart allows a number of properties to be specified for each dataset.
 | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`borderWidth`](#styling) | `number` | Yes | Yes | `3`
+| [`clip`](#general) | <code>number&#124;object</code> | - | - | `undefined`
 | [`data`](#data-structure) | `object[]` | - | - | **required**
 | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
 | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
@@ -59,6 +60,7 @@ The bubble chart allows a number of properties to be specified for each dataset.
 
 | Name | Description
 | ---- | ----
+| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
 | `label` | The label for the dataset which appears in the legend and tooltips.
 | `order` | The drawing order of dataset.
 

diff --git a/docs/charts/doughnut.md b/docs/charts/doughnut.md
index 5140051b3985ba996f0072b94f21d835e9e86858..b13a422d1e94d56356490cc35e709ce3defd5ee0 100644 (file)
--- a/docs/charts/doughnut.md
+++ b/docs/charts/doughnut.md
@@ -59,12 +59,20 @@ The doughnut/pie chart allows a number of properties to be specified for each da
 | [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'`
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
 | [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
+| [`clip`](#general) | <code>number&#124;object</code> | - | - | `undefined`
 | [`data`](#data-structure) | `number[]` | - | - | **required**
 | [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
 | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
 | [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
 | [`weight`](#styling) | `number` | - | - | `1`
 
+### General
+
+| Name | Description
+| ---- | ----
+| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
+
+
 ### Styling
 
 The style of each arc can be controlled with the following properties:

diff --git a/docs/charts/line.md b/docs/charts/line.md
index beec61ed50f286bc76452544318930184a954cef..665513dae2d78e391a1ef84ab9aaca5a939a99f5 100644 (file)
--- a/docs/charts/line.md
+++ b/docs/charts/line.md
@@ -50,6 +50,7 @@ The line chart allows a number of properties to be specified for each dataset. T
 | [`borderDashOffset`](#line-styling) | `number` | Yes | - | `0.0`
 | [`borderJoinStyle`](#line-styling) | `string` | Yes | - | `'miter'`
 | [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
+| [`clip`](#general) | <code>number&#124;object</code> | - | - | `undefined`
 | [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | Yes | - | `'default'`
 | [`fill`](#line-styling) | <code>boolean&#124;string</code> | Yes | - | `true`
 | [`hoverBackgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
@@ -83,6 +84,7 @@ The line chart allows a number of properties to be specified for each dataset. T
 
 | Name | Description
 | ---- | ----
+| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
 | `label` | The label for the dataset which appears in the legend and tooltips.
 | `order` | The drawing order of dataset. Also affects order for stacking, tooltip, and legend.
 | `xAxisID` | The ID of the x axis to plot this dataset on.

diff --git a/docs/charts/polar.md b/docs/charts/polar.md
index 84275dd9357844201c37fc15925d44d28ddc5c00..bbc9f046c4b0ae5eafb09e6584b2334adfa490ce 100644 (file)
--- a/docs/charts/polar.md
+++ b/docs/charts/polar.md
@@ -50,11 +50,18 @@ The following options can be included in a polar area chart dataset to configure
 | [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'`
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
 | [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
+| [`clip`](#general) | <code>number&#124;object</code> | - | - | `undefined`
 | [`data`](#data-structure) | `number[]` | - | - | **required**
 | [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
 | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
 | [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
 
+### General
+
+| Name | Description
+| ---- | ----
+| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
+
 ### Styling
 
 The style of each arc can be controlled with the following properties:

diff --git a/docs/charts/radar.md b/docs/charts/radar.md
index 7ec74026627db80deef2fc049d9005328ee5d9fa..0e993f597bf5fa00db24f64c5cfeacff0f2c8618 100644 (file)
--- a/docs/charts/radar.md
+++ b/docs/charts/radar.md
@@ -81,6 +81,7 @@ The radar chart allows a number of properties to be specified for each dataset.
 | [`hoverBorderDashOffset`](#line-styling) | `number` | Yes | - | `undefined`
 | [`hoverBorderJoinStyle`](#line-styling) | `string` | Yes | - | `undefined`
 | [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
+| [`clip`](#general) | <code>number&#124;object</code> | - | - | `undefined`
 | [`fill`](#line-styling) | <code>boolean&#124;string</code> | Yes | - | `true`
 | [`label`](#general) | `string` | - | - | `''`
 | [`order`](#general) | `number` | - | - | `0`
@@ -102,6 +103,7 @@ The radar chart allows a number of properties to be specified for each dataset.
 
 | Name | Description
 | ---- | ----
+| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
 | `label` | The label for the dataset which appears in the legend and tooltips.
 | `order` | The drawing order of dataset.
 

diff --git a/src/controllers/controller.bubble.js b/src/controllers/controller.bubble.js
index 39cf25668b8af3e4c3ebf571b6649286645b86bf..d344f488e745ad6a90990b921517736d8836d917 100644 (file)
--- a/src/controllers/controller.bubble.js
+++ b/src/controllers/controller.bubble.js
@@ -79,6 +79,21 @@ module.exports = DatasetController.extend({
                return parsed;
        },
 
+       /**
+        * @private
+        */
+       _getMaxOverflow: function() {
+               var me = this;
+               var meta = me._cachedMeta;
+               var data = meta.data || [];
+               if (!data.length) {
+                       return false;
+               }
+               var firstPoint = data[0].size();
+               var lastPoint = data[data.length - 1].size();
+               return Math.max(firstPoint, lastPoint) / 2;
+       },
+
        /**
         * @protected
         */

diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
index b7fc90c299e998f342fee0ae2ea8d6b54009075a..c4e49110ba4afe3d9b88a24ef6eb5d45826ed3ef 100644 (file)
--- a/src/controllers/controller.line.js
+++ b/src/controllers/controller.line.js
@@ -159,6 +159,22 @@ module.exports = DatasetController.extend({
                return values;
        },
 
+       /**
+        * @private
+        */
+       _getMaxOverflow: function() {
+               var me = this;
+               var meta = me._cachedMeta;
+               var data = meta.data || [];
+               if (!data.length) {
+                       return false;
+               }
+               var border = me._showLine ? meta.dataset._model.borderWidth : 0;
+               var firstPoint = data[0].size();
+               var lastPoint = data[data.length - 1].size();
+               return Math.max(border, firstPoint, lastPoint) / 2;
+       },
+
        updateBezierControlPoints: function() {
                var me = this;
                var chart = me.chart;
@@ -222,21 +238,10 @@ module.exports = DatasetController.extend({
                var area = chart.chartArea;
                var i = 0;
                var ilen = points.length;
-               var halfBorderWidth;
 
                if (me._showLine) {
-                       halfBorderWidth = (meta.dataset._model.borderWidth || 0) / 2;
-
-                       helpers.canvas.clipArea(chart.ctx, {
-                               left: area.left - halfBorderWidth,
-                               right: area.right + halfBorderWidth,
-                               top: area.top - halfBorderWidth,
-                               bottom: area.bottom + halfBorderWidth
-                       });
 
                        meta.dataset.draw();
-
-                       helpers.canvas.unclipArea(chart.ctx);
                }
 
                // Draw the points

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index db5391dd99e4de40a2a91e6803f01edc2bc6120f..fb42f119571439d7030e01ab6376d0b2be04d6fb 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -772,6 +772,10 @@ helpers.extend(Chart.prototype, /** @lends Chart */ {
         */
        drawDataset: function(meta, easingValue) {
                var me = this;
+               var ctx = me.ctx;
+               var clip = meta._clip;
+               var canvas = me.canvas;
+               var area = me.chartArea;
                var args = {
                        meta: meta,
                        index: meta.index,
@@ -782,8 +786,17 @@ helpers.extend(Chart.prototype, /** @lends Chart */ {
                        return;
                }
 
+               helpers.canvas.clipArea(ctx, {
+                       left: clip.left === false ? 0 : area.left - clip.left,
+                       right: clip.right === false ? canvas.width : area.right + clip.right,
+                       top: clip.top === false ? 0 : area.top - clip.top,
+                       bottom: clip.bottom === false ? canvas.height : area.bottom + clip.bottom
+               });
+
                meta.controller.draw(easingValue);
 
+               helpers.canvas.unclipArea(ctx);
+
                plugins.notify(me, 'afterDatasetDraw', [args]);
        },
 

diff --git a/src/core/core.datasetController.js b/src/core/core.datasetController.js
index a434d0c5ae43515fbc5e7e48614229d0aa248b62..9d33d72a9b44dacea452bb052848e4cbc365f12b 100644 (file)
--- a/src/core/core.datasetController.js
+++ b/src/core/core.datasetController.js
@@ -48,6 +48,53 @@ function listenArrayEvents(array, listener) {
        });
 }
 
+
+function scaleClip(scale, allowedOverflow) {
+       var tickOpts = scale && scale.options.ticks || {};
+       var reverse = tickOpts.reverse;
+       var min = tickOpts.min === undefined ? allowedOverflow : 0;
+       var max = tickOpts.max === undefined ? allowedOverflow : 0;
+       return {
+               start: reverse ? max : min,
+               end: reverse ? min : max
+       };
+}
+
+function defaultClip(xScale, yScale, allowedOverflow) {
+       if (allowedOverflow === false) {
+               return false;
+       }
+       var x = scaleClip(xScale, allowedOverflow);
+       var y = scaleClip(yScale, allowedOverflow);
+
+       return {
+               top: y.end,
+               right: x.end,
+               bottom: y.start,
+               left: x.start
+       };
+}
+
+function toClip(value) {
+       var t, r, b, l;
+
+       if (helpers.isObject(value)) {
+               t = value.top;
+               r = value.right;
+               b = value.bottom;
+               l = value.left;
+       } else {
+               t = r = b = l = value;
+       }
+
+       return {
+               top: t,
+               right: r,
+               bottom: b,
+               left: l
+       };
+}
+
 /**
  * Removes the given array event listener and cleanup extra attached properties (such as
  * the _chartjs stub and overridden methods) if array doesn't have any more listeners.
@@ -556,6 +603,9 @@ helpers.extend(DatasetController.prototype, {
                return applyStack(stack, value, meta.index);
        },
 
+       /**
+        * @private
+        */
        _getMinMax: function(scale, canStack) {
                var chart = this.chart;
                var meta = this._cachedMeta;
@@ -596,6 +646,9 @@ helpers.extend(DatasetController.prototype, {
                };
        },
 
+       /**
+        * @private
+        */
        _getAllParsedValues: function(scale) {
                var meta = this._cachedMeta;
                var metaData = meta.data;
@@ -611,6 +664,9 @@ helpers.extend(DatasetController.prototype, {
                return values;
        },
 
+       /**
+        * @private
+        */
        _cacheScaleStackStatus: function() {
                var me = this;
                var indexScale = me._getIndexScale();
@@ -622,6 +678,9 @@ helpers.extend(DatasetController.prototype, {
                }
        },
 
+       /**
+        * @private
+        */
        _scaleCheck: function() {
                var me = this;
                var indexScale = me._getIndexScale();
@@ -634,11 +693,19 @@ helpers.extend(DatasetController.prototype, {
                        cache[valueScale.id] !== valueScale.options.stacked;
        },
 
+       /**
+        * @private
+        */
+       _getMaxOverflow: function() {
+               return false;
+       },
+
        _update: function(reset) {
                var me = this;
                me._configure();
                me._cachedDataOpts = null;
                me.update(reset);
+               me._cachedMeta._clip = toClip(helpers.valueOrDefault(me._config.clip, defaultClip(me._xScale, me._yScale, me._getMaxOverflow())));
                me._cacheScaleStackStatus();
        },
 

diff --git a/src/elements/element.point.js b/src/elements/element.point.js
index d985094dd188d78a5966c32984b91b6e3411c006..14849f9ae3963289742636ec0298c97cb107482c 100644 (file)
--- a/src/elements/element.point.js
+++ b/src/elements/element.point.js
@@ -53,6 +53,13 @@ class Point extends Element {
                };
        }
 
+       size() {
+               var vm = this._view;
+               var radius = vm.radius || 0;
+               var borderWidth = vm.borderWidth || 0;
+               return (radius + borderWidth) * 2;
+       }
+
        tooltipPosition() {
                var vm = this._view;
                return {

diff --git a/test/fixtures/controller.bubble/clip.js b/test/fixtures/controller.bubble/clip.js
new file mode 100644 (file)
index 0000000..9502ad1
--- /dev/null
+++ b/test/fixtures/controller.bubble/clip.js
@@ -0,0 +1,35 @@
+module.exports = {
+       config: {
+               type: 'line',
+               data: {
+                       labels: [0, 5, 10, 15, 20, 25, 30, 50, 55, 60],
+                       datasets: [{
+                               data: [6, 11, 10, 10, 3, 22, 7, 24],
+                               type: 'bubble',
+                               label: 'test',
+                               borderColor: '#3e95cd',
+                               fill: false
+                       }]
+               },
+               options: {
+                       legend: false,
+                       scales: {
+                               xAxes: [{ticks: {display: false}}],
+                               yAxes: [{
+                                       ticks: {
+                                               display: false,
+                                               min: 8,
+                                               max: 25,
+                                               beginAtZero: true
+                                       }
+                               }]
+                       }
+               }
+       },
+       options: {
+               canvas: {
+                       height: 256,
+                       width: 256
+               }
+       }
+};

diff --git a/test/fixtures/controller.bubble/clip.png b/test/fixtures/controller.bubble/clip.png
new file mode 100644 (file)
index 0000000..2c2c454
Binary files /dev/null and b/test/fixtures/controller.bubble/clip.png differ

diff --git a/test/fixtures/controller.bubble/point-style.json b/test/fixtures/controller.bubble/point-style.json
index a645075168b3c9d0969d2619709f22e3caf34e99..9849eef8c903a729406c34c8d2d144fea267935d 100644 (file)
--- a/test/fixtures/controller.bubble/point-style.json
+++ b/test/fixtures/controller.bubble/point-style.json
@@ -44,7 +44,7 @@
                     {"x": 9, "y": 2}
                 ],
                 "backgroundColor": "transparent",
-                "borderColor": "0000ff",
+                "borderColor": "#0000ff",
                 "borderWidth": 0,
                 "pointStyle": [
                     "circle",

diff --git a/test/fixtures/controller.line/clip/default-x-max.json b/test/fixtures/controller.line/clip/default-x-max.json
new file mode 100644 (file)
index 0000000..f69182d
--- /dev/null
+++ b/test/fixtures/controller.line/clip/default-x-max.json
@@ -0,0 +1,38 @@
+{
+    "config": {
+        "type": "scatter",
+        "data": {
+            "datasets": [{
+                "borderColor": "red",
+                "data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}],
+                "fill": false,
+                "showLine": true,
+                "borderWidth": 20,
+                "pointRadius": 0
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "ticks": {
+                        "max": 3,
+                        "display": false
+                    }
+                }],
+                "yAxes": [{"ticks": {"display": false}}]
+            },
+            "layout": {
+                "padding": 24
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

diff --git a/test/fixtures/controller.line/clip/default-x-max.png b/test/fixtures/controller.line/clip/default-x-max.png
new file mode 100644 (file)
index 0000000..18a4eb2
Binary files /dev/null and b/test/fixtures/controller.line/clip/default-x-max.png differ

diff --git a/test/fixtures/controller.line/clip/default-x-min.json b/test/fixtures/controller.line/clip/default-x-min.json
new file mode 100644 (file)
index 0000000..b4a4b0c
--- /dev/null
+++ b/test/fixtures/controller.line/clip/default-x-min.json
@@ -0,0 +1,38 @@
+{
+    "config": {
+        "type": "scatter",
+        "data": {
+            "datasets": [{
+                "borderColor": "red",
+                "data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}],
+                "fill": false,
+                "showLine": true,
+                "borderWidth": 20,
+                "pointRadius": 0
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "ticks": {
+                        "min": -2,
+                        "display": false
+                    }
+                }],
+                "yAxes": [{"ticks": {"display": false}}]
+            },
+            "layout": {
+                "padding": 24
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

diff --git a/test/fixtures/controller.line/clip/default-x-min.png b/test/fixtures/controller.line/clip/default-x-min.png
new file mode 100644 (file)
index 0000000..44dce35
Binary files /dev/null and b/test/fixtures/controller.line/clip/default-x-min.png differ

diff --git a/test/fixtures/controller.line/clip/default-x.json b/test/fixtures/controller.line/clip/default-x.json
new file mode 100644 (file)
index 0000000..79dc08c
--- /dev/null
+++ b/test/fixtures/controller.line/clip/default-x.json
@@ -0,0 +1,39 @@
+{
+    "config": {
+        "type": "scatter",
+        "data": {
+            "datasets": [{
+                "borderColor": "red",
+                "data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}],
+                "fill": false,
+                "showLine": true,
+                "borderWidth": 20,
+                "pointRadius": 0
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "ticks": {
+                        "min": -2,
+                        "max": 3,
+                        "display": false
+                    }
+                }],
+                "yAxes": [{"ticks": {"display": false}}]
+            },
+            "layout": {
+                "padding": 24
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

diff --git a/test/fixtures/controller.line/clip/default-x.png b/test/fixtures/controller.line/clip/default-x.png
new file mode 100644 (file)
index 0000000..70ad431
Binary files /dev/null and b/test/fixtures/controller.line/clip/default-x.png differ

diff --git a/test/fixtures/controller.line/clip/default-y-max.json b/test/fixtures/controller.line/clip/default-y-max.json
new file mode 100644 (file)
index 0000000..1ab631b
--- /dev/null
+++ b/test/fixtures/controller.line/clip/default-y-max.json
@@ -0,0 +1,38 @@
+{
+    "config": {
+        "type": "scatter",
+        "data": {
+            "datasets": [{
+                "borderColor": "red",
+                "data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}],
+                "fill": false,
+                "showLine": true,
+                "borderWidth": 20,
+                "pointRadius": 0
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{"ticks": {"display": false}}],
+                "yAxes": [{
+                    "ticks": {
+                        "max": 6,
+                        "display": false
+                    }
+                }]
+            },
+            "layout": {
+                "padding": 24
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

diff --git a/test/fixtures/controller.line/clip/default-y-max.png b/test/fixtures/controller.line/clip/default-y-max.png
new file mode 100644 (file)
index 0000000..1089e94
Binary files /dev/null and b/test/fixtures/controller.line/clip/default-y-max.png differ

diff --git a/test/fixtures/controller.line/clip/default-y-min.json b/test/fixtures/controller.line/clip/default-y-min.json
new file mode 100644 (file)
index 0000000..7c6114a
--- /dev/null
+++ b/test/fixtures/controller.line/clip/default-y-min.json
@@ -0,0 +1,38 @@
+{
+    "config": {
+        "type": "scatter",
+        "data": {
+            "datasets": [{
+                "borderColor": "red",
+                "data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}],
+                "fill": false,
+                "showLine": true,
+                "borderWidth": 20,
+                "pointRadius": 0
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{"ticks": {"display": false}}],
+                "yAxes": [{
+                    "ticks": {
+                        "min": 2,
+                        "display": false
+                    }
+                }]
+            },
+            "layout": {
+                "padding": 24
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

diff --git a/test/fixtures/controller.line/clip/default-y-min.png b/test/fixtures/controller.line/clip/default-y-min.png
new file mode 100644 (file)
index 0000000..7ae2e65
Binary files /dev/null and b/test/fixtures/controller.line/clip/default-y-min.png differ

diff --git a/test/fixtures/controller.line/clip/default-y.json b/test/fixtures/controller.line/clip/default-y.json
new file mode 100644 (file)
index 0000000..3075144
--- /dev/null
+++ b/test/fixtures/controller.line/clip/default-y.json
@@ -0,0 +1,39 @@
+{
+    "config": {
+        "type": "scatter",
+        "data": {
+            "datasets": [{
+                "borderColor": "red",
+                "data": [{"x":-5,"y":5},{"x":-4,"y":6},{"x":-3,"y":7},{"x":-2,"y":6},{"x":-1,"y":5},{"x":0,"y":4},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":5},{"x":4,"y":7},{"x":5,"y":9}],
+                "fill": false,
+                "showLine": true,
+                "borderWidth": 20,
+                "pointRadius": 0
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{"ticks": {"display": false}}],
+                "yAxes": [{
+                    "ticks": {
+                        "min": 2,
+                        "max": 6,
+                        "display": false
+                    }
+                }]
+            },
+            "layout": {
+                "padding": 24
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

diff --git a/test/fixtures/controller.line/clip/default-y.png b/test/fixtures/controller.line/clip/default-y.png
new file mode 100644 (file)
index 0000000..6a1e981
Binary files /dev/null and b/test/fixtures/controller.line/clip/default-y.png differ

diff --git a/test/fixtures/controller.line/clip/specified.json b/test/fixtures/controller.line/clip/specified.json
new file mode 100644 (file)
index 0000000..5885240
--- /dev/null
+++ b/test/fixtures/controller.line/clip/specified.json
@@ -0,0 +1,77 @@
+{
+    "config": {
+        "type": "scatter",
+        "data": {
+            "datasets": [
+                {
+                    "showLine": true,
+                    "borderColor": "red",
+                    "data": [{"x":-4,"y":-4},{"x":4,"y":4}],
+                    "clip": false
+                },
+                {
+                    "showLine": true,
+                    "borderColor": "green",
+                    "data": [{"x":-4,"y":-5},{"x":4,"y":3}],
+                    "clip": 5
+                },
+                {
+                    "showLine": true,
+                    "borderColor": "blue",
+                    "data": [{"x":-4,"y":-3},{"x":4,"y":5}],
+                    "clip": -5
+                },
+                {
+                    "showLine": true,
+                    "borderColor": "brown",
+                    "data": [{"x":-3,"y":-3},{"x":-1,"y":3},{"x":1,"y":-2},{"x":2,"y":3}],
+                    "clip": {
+                        "top": 8,
+                        "left": false,
+                        "right": -20,
+                        "bottom": -20
+                    }
+                }
+            ]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scales": {
+                "xAxes": [{
+                    "ticks": {
+                        "min": -2,
+                        "max": 2,
+                        "display": false
+                    }
+                }],
+                "yAxes": [{
+                    "ticks": {
+                        "min": -2,
+                        "max": 2,
+                        "display": false
+                    }
+                }]
+            },
+            "layout": {
+                "padding": 24
+            },
+            "elements": {
+                "line": {
+                    "fill": false,
+                    "borderWidth": 20
+                },
+                "point": {
+                    "radius": 0
+                }
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}

diff --git a/test/fixtures/controller.line/clip/specified.png b/test/fixtures/controller.line/clip/specified.png
new file mode 100644 (file)
index 0000000..60e60b2
Binary files /dev/null and b/test/fixtures/controller.line/clip/specified.png differ