From: Jacco van den Berg <39033624+LeeLenaleee@users.noreply.github.com>
Date: Sun, 5 Dec 2021 13:56:53 +0000 (+0100)
Subject: Feature/active elements on top (#9920)
X-Git-Tag: v3.7.0~20
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=6d3a1c5fa6ed1ff957ce08feb71ef9ad4a8f88c2;p=thirdparty%2FChart.js.git

Feature/active elements on top (#9920)

* add flag to draw active items on top

* add documentation and types

* remove redundent check

* added test

* resolve linting errors

* increase tollerance

* remove axes for better test, hope no tolerance needed
---

diff --git a/docs/charts/bubble.md b/docs/charts/bubble.md
index 61710badf..328612729 100644
--- a/docs/charts/bubble.md
+++ b/docs/charts/bubble.md
@@ -63,6 +63,7 @@ The bubble chart allows a number of properties to be specified for each dataset.
 | [`pointStyle`](#styling) | [`pointStyle`](../configuration/elements.md#types) | Yes | Yes | `'circle'`
 | [`rotation`](#styling) | `number` | Yes | Yes | `0`
 | [`radius`](#styling) | `number` | Yes | Yes | `3`
+| [`drawActiveElementsOnTop`](#styling) | `boolean` | Yes | Yes | `true`
 
 All these values, if `undefined`, fallback to the scopes described in [option resolution](../general/options)
 
@@ -86,6 +87,7 @@ The style of each bubble can be controlled with the following properties:
 | `pointStyle` | bubble [shape style](../configuration/elements.md#point-styles).
 | `rotation` | bubble rotation (in degrees).
 | `radius` | bubble radius (in pixels).
+| `drawActiveElementsOnTop` | Draw the active bubbles of a dataset over the other bubbles of the dataset
 
 All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
 
diff --git a/docs/charts/line.md b/docs/charts/line.md
index 819799fe9..cf0787b9f 100644
--- a/docs/charts/line.md
+++ b/docs/charts/line.md
@@ -84,6 +84,7 @@ The line chart allows a number of properties to be specified for each dataset. T
 | [`tension`](#line-styling) | `number` | - | - | `0`
 | [`xAxisID`](#general) | `string` | - | - | first x axis
 | [`yAxisID`](#general) | `string` | - | - | first y axis
+| [`drawActiveElementsOnTop`](#point-styling) | `boolean` | Yes | Yes | `true`
 
 All these values, if `undefined`, fallback to the scopes described in [option resolution](../general/options)
 
@@ -112,6 +113,7 @@ The style of each point can be controlled with the following properties:
 | `pointRadius` | The radius of the point shape. If set to 0, the point is not rendered.
 | `pointRotation` | The rotation of the point in degrees.
 | `pointStyle` | Style of the point. [more...](../configuration/elements.md#point-styles)
+| `drawActiveElementsOnTop` | Draw the active points of a dataset over the other points of the dataset
 
 All these values, if `undefined`, fallback first to the dataset options then to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
 
diff --git a/src/core/core.datasetController.js b/src/core/core.datasetController.js
index 8ba52e169..b6c6778d9 100644
--- a/src/core/core.datasetController.js
+++ b/src/core/core.datasetController.js
@@ -678,6 +678,7 @@ export default class DatasetController {
     const active = [];
     const start = this._drawStart || 0;
     const count = this._drawCount || (elements.length - start);
+    const drawActiveElementsOnTop = this.options.drawActiveElementsOnTop;
     let i;
 
     if (meta.dataset) {
@@ -689,7 +690,7 @@ export default class DatasetController {
       if (element.hidden) {
         continue;
       }
-      if (element.active) {
+      if (element.active && drawActiveElementsOnTop) {
         active.push(element);
       } else {
         element.draw(ctx, area);
diff --git a/src/core/core.defaults.js b/src/core/core.defaults.js
index eb0092894..9817e7aba 100644
--- a/src/core/core.defaults.js
+++ b/src/core/core.defaults.js
@@ -73,6 +73,7 @@ export class Defaults {
     this.scale = undefined;
     this.scales = {};
     this.showLine = true;
+    this.drawActiveElementsOnTop = true;
 
     this.describe(_descriptors);
   }
diff --git a/test/fixtures/core.interaction/drawActiveElementsOnTop-false.js b/test/fixtures/core.interaction/drawActiveElementsOnTop-false.js
new file mode 100644
index 000000000..718555315
--- /dev/null
+++ b/test/fixtures/core.interaction/drawActiveElementsOnTop-false.js
@@ -0,0 +1,41 @@
+module.exports = {
+  config: {
+    type: 'bubble',
+    data: {
+      datasets: [{
+        data: [
+          {x: 1, y: 1, r: 80},
+          {x: 1, y: 1, r: 20}
+        ],
+        drawActiveElementsOnTop: false,
+        backgroundColor: (ctx) => (ctx.dataIndex === 1 ? 'red' : 'blue'),
+        hoverBackgroundColor: 'yellow',
+        hoverRadius: 0,
+      }]
+    },
+    options: {
+      scales: {
+        x: {
+          display: false
+        },
+        y: {
+          display: false
+        },
+      },
+      plugins: {
+        tooltip: false,
+        legend: false
+      },
+    }
+  },
+  options: {
+    canvas: {
+      width: 256,
+      height: 256
+    },
+    async run(chart) {
+      const point = chart.getDatasetMeta(0).data[0];
+      await jasmine.triggerMouseEvent(chart, 'click', {y: point.y, x: point.x + 25});
+    }
+  }
+};
diff --git a/test/fixtures/core.interaction/drawActiveElementsOnTop-false.png b/test/fixtures/core.interaction/drawActiveElementsOnTop-false.png
new file mode 100644
index 000000000..ecfe37700
Binary files /dev/null and b/test/fixtures/core.interaction/drawActiveElementsOnTop-false.png differ
diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index 48f398e58..29512c4cf 100644
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -1845,6 +1845,11 @@ export interface PointOptions extends CommonElementOptions {
    * @default 0
    */
   rotation: number;
+  /**
+   * Draw the active elements over the other elements of the dataset,
+   * @default true
+   */
+  drawActiveElementsOnTop: boolean;
 }
 
 export interface PointHoverOptions extends CommonHoverOptions {