Fix #556 (#558)

Author: stockiNail

docs/guide/types/label.md

@@ -70,7 +70,6 @@ The following options are available for label annotations.
 | [`font`](#styling) | [`Font`](../options#font) | Yes | `{}`
 | [`height`](#general) | `number`\|`string` | Yes | `undefined`
 | [`padding`](#general) | [`Padding`](../options#padding) | Yes | `6`
-| [`point`](#point) | `object` | Yes |
 | [`position`](#position) | `string`\|`{x: string, y: string}` | Yes | `'center'`
 | [`textAlign`](#general) | `string` | Yes | `'center'`
 | [`width`](#general) | `number`\|`string` | Yes | `undefined`
@@ -137,83 +136,9 @@ If this value is an object, the `x` property defines the horizontal alignment of
 
 If this value is a number, it is applied to all corners of the rectangle (topLeft, topRight, bottomLeft, bottomRight). If this value is an object, the `topLeft` property defines the top-left corners border radius. Similarly, the `topRight`, `bottomLeft`, and `bottomRight` properties can also be specified. Omitted corners have radius of 0.
 
-### Point
+## Callout
 
-A point options can enable the selected point drawing.
-
-Namespace: `options.annotations[annotationID].label.point`, it defines options for the point on the annotation label.
-
-```js chart-editor
-/* <block:options:0> */
-const options = {
-  plugins: {
-    autocolors: false,
-    annotation: {
-      annotations: {
-        label1: {
-          type: 'label',
-          xValue: 2.5,
-          yValue: 60,
-          backgroundColor: 'rgba(245,245,245)',
-          content: ['In this point of time,', 'something happened'],
-          textAlign: 'start',
-          position: {
-            y: 'start'
-          },
-          font: {
-            size: 18
-          },
-          point: {
-            enabled: true,
-            backgroundColor: 'red',
-            radius: 5
-          }
-        }
-      }
-    }
-  }
-};
-/* </block:options> */
-
-/* <block:config:1> */
-const config = {
-  type: 'line',
-  data: {
-    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-    datasets: [{
-      label: 'My First Dataset',
-      data: [65, 59, 80, 81, 56, 55, 40],
-      fill: false,
-      borderColor: 'rgb(75, 192, 192)',
-      tension: 0.1
-    }]
-  },
-  options
-};
-/* </block:config> */
-
-module.exports = {
-  config
-};
-```
-
-All of these options can be [Scriptable](../options#scriptable-options).
-
-| Name | Type | Default | Notes
-| ---- | ---- | :----: | ---- | ----
-| `enabled` | `boolean` | `false` | If true, the point is drawn.
-| `backgroundColor` | `Color` | `undefined` | Fill color of the selected point.
-| `borderColor` | [`Color`](../options#color) | `undefined` | Stroke color of the selected point.
-| `borderDash` | `number[]` | `[]` | Length and spacing of dashes of the border of the selected point. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
-| `borderDashOffset` | `number` | `0` | Offset for line dashes of the border of the selected point. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
-| `borderWidth` | `number` | `1` | Stroke width of the selected point.
-| `pointStyle` | [`PointStyle`](../options#point-style) | `'circle'` | Style of the point.
-| `radius` | `number` | `3` | Radius of the selected point.
-| `rotation` | `number` | `0` | Rotation of point, in degrees.
-
-### Callout
-
-A callout connects the label by a line to a point.
+A callout connects the label by a line to the selected point.
 
 Namespace: `options.annotations[annotationID].label.callout`, it defines options for the callout on the annotation label.
 
@@ -239,10 +164,6 @@ const options = {
           callout: {
             enabled: true,
             side: 10
-          },
-          point: {
-            enabled: true,
-            backgroundColor: 'rgba(245,245,245)'
           }
         }
       }

docs/samples/label/point.md

@@ -1,7 +1,7 @@
 # Point
 
 ```js chart-editor
-// <block:setup:2>
+// <block:setup:3>
 const DATA_COUNT = 12;
 const MIN = 0;
 const MAX = 100;
@@ -16,8 +16,8 @@ const data = {
 };
 // </block:setup>
 
-// <block:annotation:1>
-const annotation = {
+// <block:annotation1:1>
+const annotation1 = {
   type: 'label',
   backgroundColor: 'rgba(245,245,245, 0.5)',
   content: (ctx) => 'Maximum value is ' + maxValue(ctx).toFixed(2),
@@ -45,7 +45,19 @@ const annotation = {
   yAdjust: -6,
   yValue: (ctx) => maxValue(ctx)
 };
-// </block:annotation>
+// </block:annotation1>
+
+// <block:annotation2:2>
+const annotation2 = {
+  type: 'point',
+  backgroundColor: 'transparent',
+  borderColor: (ctx) => ctx.chart.data.datasets[0].borderColor,
+  pointStyle: 'rectRounded',
+  radius: 10,
+  xValue: (ctx) => maxLabel(ctx),
+  yValue: (ctx) => maxValue(ctx)
+};
+// </block:annotation2>
 
 /* <block:config:0> */
 const config = {
@@ -68,15 +80,16 @@ const config = {
       annotation: {
         clip: false,
         annotations: {
-          annotation
+          annotation1,
+          annotation2
         }
       }
     }
   }
 };
 /* </block:config> */
 
-// <block:utils:3>
+// <block:utils:4>
 function maxValue(ctx) {
   let max = 0;
   const dataset = ctx.chart.data.datasets[0];

src/types/label.js

@@ -1,24 +1,11 @@
-import {drawBox, drawLabel, drawPoint, measureLabelSize, isLabelVisible, getChartPoint, getRectCenterPoint, toPosition, setBorderStyle, getSize, inBoxRange, inPointRange, isBoundToPoint, getChartRect, isPointVisible} from '../helpers';
+import {drawBox, drawLabel, measureLabelSize, isLabelVisible, getChartPoint, getRectCenterPoint, toPosition, setBorderStyle, getSize, inBoxRange, isBoundToPoint, getChartRect} from '../helpers';
 import {color, toPadding} from 'chart.js/helpers';
 import {Element} from 'chart.js';
 
 export default class LabelAnnotation extends Element {
 
   inRange(mouseX, mouseY, useFinalPosition) {
-    if (!this.visible) {
-      return false;
-    }
-    if (inBoxRange(mouseX, mouseY, this.getProps(['x', 'y', 'width', 'height'], useFinalPosition))) {
-      return true;
-    }
-    const pointOpts = this.options.point;
-    if (isPointVisible(pointOpts)) {
-      const {pointX: x, pointY: y} = this.getProps(['pointX', 'pointY'], useFinalPosition);
-      if (inPointRange({x: mouseX, y: mouseY}, {x, y}, pointOpts.radius)) {
-        return true;
-      }
-    }
-    return false;
+    return this.visible && inBoxRange(mouseX, mouseY, this.getProps(['x', 'y', 'width', 'height'], useFinalPosition));
   }
 
   getCenterPoint(useFinalPosition) {
@@ -29,13 +16,12 @@ export default class LabelAnnotation extends Element {
     if (!this.visible) {
       return;
     }
-    const {labelX, labelY, labelWidth, labelHeight, pointX, pointY, options} = this;
+    const {labelX, labelY, labelWidth, labelHeight, options} = this;
     drawCallout(ctx, this);
     if (this.boxVisible) {
       drawBox(ctx, this, options);
     }
     drawLabel(ctx, {x: labelX, y: labelY, width: labelWidth, height: labelHeight}, options);
-    drawPoint(ctx, {x: pointX, y: pointY}, options.point);
   }
 
   resolveElementProperties(chart, options) {
@@ -87,17 +73,6 @@ LabelAnnotation.defaults = {
     side: 5,
     start: '50%',
   },
-  point: {
-    backgroundColor: undefined,
-    borderColor: undefined,
-    borderDash: [],
-    borderDashOffset: 0,
-    borderWidth: 1,
-    enabled: false,
-    pointStyle: 'circle',
-    radius: 3,
-    rotation: 0
-  },
   color: 'black',
   content: null,
   display: true,

test/fixtures/label/boxLocation.js

@@ -45,15 +45,21 @@ module.exports = {
               },
               position: {
                 y: 'end'
-              },
-              point: {
-                enabled: true,
-                radius: 10,
-                backgroundColor: 'red',
-                borderColor: 'black',
-                borderWidth: 1
               }
             },
+            point1: {
+              type: 'point',
+              xScaleID: 'x',
+              yScaleID: 'y',
+              xMin: 1,
+              yMin: 1,
+              xMax: 8,
+              yMax: 8,
+              radius: 10,
+              backgroundColor: 'red',
+              borderColor: 'black',
+              borderWidth: 1
+            },
             box1: {
               type: 'box',
               xScaleID: 'x',
@@ -85,13 +91,19 @@ module.exports = {
               position: {
                 y: 'end'
               },
-              point: {
-                enabled: true,
-                radius: 10,
-                backgroundColor: 'red',
-                borderColor: 'black',
-                borderWidth: 1,
-              }
+            },
+            point2: {
+              type: 'point',
+              xScaleID: 'x',
+              yScaleID: 'y',
+              xMin: -8,
+              yMin: -8,
+              xMax: 1,
+              yMax: 1,
+              radius: 10,
+              backgroundColor: 'red',
+              borderColor: 'black',
+              borderWidth: 1
             },
             box2: {
               type: 'box',

test/fixtures/label/calloutHorizontalPosition.js

@@ -57,9 +57,13 @@ module.exports = {
                 enabled: true,
                 position: 'left',
               },
-              point: {
-                enabled: true
-              }
+            },
+            point2: {
+              type: 'point',
+              xScaleID: 'x',
+              yScaleID: 'y',
+              xValue: 'May',
+              yValue: 10
             }
           }
         }

test/fixtures/label/calloutHorizontalPosition.png

@@ -36,11 +36,15 @@ module.exports = {
                 enabled: true,
                 margin: 10,
                 position: 'right',
-              },
-              point: {
-                enabled: true,
               }
             },
+            point1: {
+              type: 'point',
+              xScaleID: 'x',
+              yScaleID: 'y',
+              xValue: 2.5,
+              yValue: 20
+            },
             text2: {
               type: 'label',
               xScaleID: 'x',
@@ -61,10 +65,14 @@ module.exports = {
                 enabled: true,
                 margin: 0,
                 position: 'left',
-              },
-              point: {
-                enabled: true,
               }
+            },
+            point2: {
+              type: 'point',
+              xScaleID: 'x',
+              yScaleID: 'y',
+              xValue: 'May',
+              yValue: 10
             }
           }
         }

test/fixtures/label/calloutMargin.js

@@ -34,10 +34,15 @@ module.exports = {
               yAdjust: -100,
               callout: {
                 enabled: true,
-              },
-              point: {
-                enabled: true,
               }
+            },
+            point1: {
+              type: 'point',
+              xScaleID: 'x',
+              yScaleID: 'y',
+              xValue: 'February',
+              yValue: 10,
+              radius: 3
             }
           }
         }