Enable label position as percentage of the size (#554)

* Fix #553

* adds box implementation

* fixes multiple returns

* fixes test case and complexity in box position calculation

* reduces duplication code

* adds label implementation

* changes getSize and toPercent with default

* adds documentation

* adds types

* Update types/label.d.ts

Co-authored-by: Jukka Kurkela <[email protected]>

* Update src/types/box.js

Co-authored-by: Jukka Kurkela <[email protected]>

* Update src/types/label.js

Co-authored-by: Jukka Kurkela <[email protected]>

* Update src/types/label.js

Co-authored-by: Jukka Kurkela <[email protected]>

* applies some review updates

* getRelativePosition

* temporary commit having a look how to simply the position calculation

* rebase to merge PR

* fixes double content options in test cases and sample

* fixes typo

* Update test/fixtures/box/labelPosition.js

Co-authored-by: Jukka Kurkela <[email protected]>

* adds fixture for position label box

Co-authored-by: Jukka Kurkela <[email protected]>

Author: stockiNail

docs/guide/types/box.md

@@ -126,6 +126,11 @@ All of these options can be [Scriptable](../options#scriptable-options)
 
 #### Position
 
-If this value is a string (possible options are `'start'`, `'center'`, `'end'`), it is applied to vertical and horizontal position in the box.
+A position can be set in 2 different values types:
 
-If this value is an object, the `x` property defines the horizontal alignment in the box. Similarly, the `y` property defines the vertical alignment in the box. Possible options for both properties are `'start'`, `'center'`, `'end'`. Omitted property have value of the default, `'center'`.
+1. `'start'`, `'center'`, `'end'` which are defining where the label will be located
+2. a `string`, in percentage format `'number%'`, is representing the percentage on the size where the label will be located
+
+If this value is a string (possible options are `'start'`, `'center'`, `'end'` or a string in percentage format), it is applied to vertical and horizontal position in the box.
+
+If this value is an object, the `x` property defines the horizontal alignment in the box. Similarly, the `y` property defines the vertical alignment in the box. Possible options for both properties are `'start'`, `'center'`, `'end'`, a string in percentage format. Omitted property have value of the default, `'center'`.

docs/guide/types/label.md

@@ -128,9 +128,14 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
 
 ### Position
 
-If this value is a string (possible options are `'start'`, `'center'`, `'end'`), it is applied to vertical and horizontal position of the label, with respect to the selected point.
+A position can be set in 2 different values types:
 
-If this value is an object, the `x` property defines the horizontal alignment of the label, with respect to the selected point. Similarly, the `y` property defines the vertical alignment of the label, with respect to the selected point. Possible options for both properties are `'start'`, `'center'`, `'end'`. Omitted property have value of the default, `'center'`.
+1. `'start'`, `'center'`, `'end'` which are defining where the label will be located
+2. a `string`, in percentage format `'number%'`, is representing the percentage on the size where the label will be located
+
+If this value is a string (possible options are `'start'`, `'center'`, `'end'` or a string in percentage format), it is applied to vertical and horizontal position in the box.
+
+If this value is an object, the `x` property defines the horizontal alignment in the label, with respect to the selected point. Similarly, the `y` property defines the vertical alignment in the label, with respect to the selected point. Possible options for both properties are `'start'`, `'center'`, `'end'`, a string in percentage format. Omitted property have value of the default, `'center'`.
 
 #### borderRadius
 

docs/guide/types/line.md

@@ -138,7 +138,7 @@ All of these options can be [Scriptable](../options#scriptable-options)
 | `padding` | [`Padding`](../options#padding) | `6` | The padding to add around the text label.
 | `xPadding` | `number` | `6` | Padding of label to add left/right. This is **deprecated**. Use `padding`.
 | `yPadding` | `number` | `6` | Padding of label to add top/bottom. This is **deprecated**. Use `padding`.
-| `position` | `string` | `'center'` | Anchor position of label on line. Possible options are: `'start'`, `'center'`, `'end'`.
+| `position` | `string` | `'center'` | Anchor position of label on line. Possible options are: `'start'`, `'center'`, `'end'`. It can be set by a string in percentage format `'number%'` which are representing the percentage on the width of the line where the label will be located.
 | `rotation` | `number`\|`'auto'` | `0` | Rotation of label, in degrees, or 'auto' to use the degrees of the line
 | `textAlign` | `string` | `'center'` | Text alignment of label content when there's more than one line. Possible options are: `'start'`, `'center'`, `'end'`.
 | `width` | `number`\|`string` | `undefined` | Overrides the width of the image or canvas element. Could be set in pixel by a number, or in percentage of current width of image or canvas element by a string. If undefined, uses the width of the image or canvas element. It is used only when the content is an image or canvas element.

docs/samples/line/labelVisibility.md

@@ -80,13 +80,7 @@ function toggleLabel(ctx, event) {
   const chart = ctx.chart;
   const annotationOpts = chart.options.plugins.annotation.annotations.annotation;
   annotationOpts.label.enabled = !annotationOpts.label.enabled;
-  if (event.x < oneThirdWidth) {
-    annotationOpts.label.position = 'start';
-  } else if (event.x > oneThirdWidth * 2) {
-    annotationOpts.label.position = 'end';
-  } else {
-    annotationOpts.label.position = 'center';
-  }
+  annotationOpts.label.position = (event.x / ctx.chart.chartArea.width * 100) + '%';
   chart.update();
 }
 // </block:utils>

src/helpers/helpers.options.js

@@ -1,12 +1,27 @@
 import {isObject, valueOrDefault, defined} from 'chart.js/helpers';
+import {clamp} from './helpers.core';
 
 const isEnabled = (options) => options && (options.display || options.enabled);
-const toPercent = (s) => typeof s === 'string' && s.endsWith('%') && parseFloat(s) / 100;
+const isPercentString = (s) => typeof s === 'string' && s.endsWith('%');
+const toPercent = (s) => clamp(parseFloat(s) / 100, 0, 1);
+
+export function getRelativePosition(size, positionOption) {
+  if (positionOption === 'start') {
+    return 0;
+  }
+  if (positionOption === 'end') {
+    return size;
+  }
+  if (isPercentString(positionOption)) {
+    return toPercent(positionOption) * size;
+  }
+  return size / 2;
+}
 
 export function getSize(size, value) {
   if (typeof value === 'number') {
     return value;
-  } else if (typeof value === 'string') {
+  } else if (isPercentString(value)) {
     return toPercent(value) * size;
   }
   return size;

src/types/box.js

@@ -1,6 +1,6 @@
 import {Element} from 'chart.js';
 import {toPadding} from 'chart.js/helpers';
-import {drawBox, drawLabel, measureLabelSize, isLabelVisible, getRectCenterPoint, getChartRect, toPosition, inBoxRange} from '../helpers';
+import {drawBox, drawLabel, getRelativePosition, measureLabelSize, isLabelVisible, getRectCenterPoint, getChartRect, toPosition, inBoxRange} from '../helpers';
 
 export default class BoxAnnotation extends Element {
   inRange(mouseX, mouseY, useFinalPosition) {
@@ -94,24 +94,28 @@ BoxAnnotation.defaultRoutes = {
 function calculateX(box, labelSize, position, padding) {
   const {x: start, x2: end, width: size, options} = box;
   const {xAdjust: adjust, borderWidth} = options.label;
-  return calculatePosition({start, end, size}, {position: position.x, padding: padding.left, adjust, borderWidth, size: labelSize.width});
+  return calculatePosition({start, end, size}, {
+    position: position.x,
+    padding: {start: padding.left, end: padding.right},
+    adjust, borderWidth,
+    size: labelSize.width
+  });
 }
 
 function calculateY(box, labelSize, position, padding) {
   const {y: start, y2: end, height: size, options} = box;
   const {yAdjust: adjust, borderWidth} = options.label;
-  return calculatePosition({start, end, size}, {position: position.y, padding: padding.top, adjust, borderWidth, size: labelSize.height});
+  return calculatePosition({start, end, size}, {
+    position: position.y,
+    padding: {start: padding.top, end: padding.bottom},
+    adjust, borderWidth,
+    size: labelSize.height
+  });
 }
 
 function calculatePosition(boxOpts, labelOpts) {
-  const {start, end, size} = boxOpts;
-  const {position, padding, adjust, borderWidth} = labelOpts;
-  const margin = padding + (borderWidth / 2) + adjust;
-  if (position === 'start') {
-    return start + margin;
-  } else if (position === 'end') {
-    return end - labelOpts.size - margin;
-  }
-  return start + (size - labelOpts.size) / 2;
+  const {start, end} = boxOpts;
+  const {position, padding: {start: padStart, end: padEnd}, adjust, borderWidth} = labelOpts;
+  const availableSize = end - borderWidth - start - padStart - padEnd - labelOpts.size;
+  return start + borderWidth / 2 + adjust + padStart + getRelativePosition(availableSize, position);
 }
-

src/types/label.js

@@ -1,4 +1,4 @@
-import {drawBox, drawLabel, measureLabelSize, isLabelVisible, getChartPoint, getRectCenterPoint, toPosition, setBorderStyle, getSize, inBoxRange, isBoundToPoint, getChartRect} from '../helpers';
+import {drawBox, drawLabel, measureLabelSize, isLabelVisible, getChartPoint, getRectCenterPoint, toPosition, setBorderStyle, getSize, inBoxRange, isBoundToPoint, getChartRect, getRelativePosition} from '../helpers';
 import {color, toPadding} from 'chart.js/helpers';
 import {Element} from 'chart.js';
 
@@ -119,12 +119,7 @@ function measureRect(point, size, options, padding) {
 }
 
 function calculatePosition(start, size, adjust, position) {
-  if (position === 'start') {
-    return start + adjust;
-  } else if (position === 'end') {
-    return start - size + adjust;
-  }
-  return start - size / 2 + adjust;
+  return start - getRelativePosition(size, position) + adjust;
 }
 
 function drawCallout(ctx, element) {
@@ -182,20 +177,15 @@ function getCalloutSideCoord(element, position, separatorStart) {
   const side = getCalloutSideAdjust(position, options.callout);
   let sideStart, sideEnd;
   if (position === 'left' || position === 'right') {
-    sideStart = {x: separatorStart.x, y: y + getStartSize(height, start)};
+    sideStart = {x: separatorStart.x, y: y + getSize(height, start)};
     sideEnd = {x: sideStart.x + side, y: sideStart.y};
   } else if (position === 'top' || position === 'bottom') {
-    sideStart = {x: separatorStart.x + getStartSize(width, start), y: separatorStart.y};
+    sideStart = {x: separatorStart.x + getSize(width, start), y: separatorStart.y};
     sideEnd = {x: sideStart.x, y: sideStart.y + side};
   }
   return {sideStart, sideEnd};
 }
 
-function getStartSize(size, value) {
-  const start = getSize(size, value);
-  return Math.min(Math.max(start, 0), size);
-}
-
 function getCalloutSideAdjust(position, options) {
   const side = options.side;
   if (position === 'left' || position === 'top') {

src/types/line.js

@@ -1,6 +1,6 @@
 import {Element} from 'chart.js';
 import {toRadians, toPadding} from 'chart.js/helpers';
-import {clamp, scaleValue, rotated, drawBox, drawLabel, measureLabelSize, isLabelVisible} from '../helpers';
+import {clamp, scaleValue, rotated, drawBox, drawLabel, measureLabelSize, isLabelVisible, getRelativePosition} from '../helpers';
 
 const PI = Math.PI;
 const pointInLine = (p1, p2, t) => ({x: p1.x + t * (p2.x - p1.x), y: p1.y + t * (p2.y - p1.y)});
@@ -307,12 +307,14 @@ function rotatedSize(width, height, rotation) {
 }
 
 function calculateT(line, label, sizes, chartArea) {
-  let t = 0.5;
+  let t;
   const space = spaceAround(line, chartArea);
   if (label.position === 'start') {
     t = calculateTAdjust({w: line.x2 - line.x, h: line.y2 - line.y}, sizes, label, space);
   } else if (label.position === 'end') {
     t = 1 - calculateTAdjust({w: line.x - line.x2, h: line.y - line.y2}, sizes, label, space);
+  } else {
+    t = getRelativePosition(1, label.position);
   }
   return t;
 }

test/fixtures/box/labelPosition.js

@@ -0,0 +1,111 @@
+module.exports = {
+  tolerance: 0.0085,
+  config: {
+    type: 'scatter',
+    options: {
+      scales: {
+        x: {
+          display: true,
+          min: -10,
+          max: 10
+        },
+        y: {
+          display: true,
+          min: -10,
+          max: 10
+        }
+      },
+      plugins: {
+        legend: false,
+        annotation: {
+          drawTime: 'afterDraw',
+          annotations: {
+            box1: {
+              type: 'box',
+              xScaleID: 'x',
+              yScaleID: 'y',
+              xMin: -9,
+              yMin: 9,
+              xMax: -1,
+              yMax: 1,
+              backgroundColor: 'white',
+              borderColor: 'red',
+              borderWidth: 2,
+              label: {
+                enabled: true,
+                content: 'p: 0%,100%',
+                position: {
+                  x: '0%',
+                  y: '100%'
+                }
+              }
+            },
+            box2: {
+              type: 'box',
+              xScaleID: 'x',
+              yScaleID: 'y',
+              xMin: 1,
+              yMin: 9,
+              xMax: 9,
+              yMax: 1,
+              backgroundColor: 'white',
+              borderColor: 'red',
+              borderWidth: 2,
+              label: {
+                enabled: true,
+                content: 'p: 25%,75%',
+                position: {
+                  x: '25%',
+                  y: '75%'
+                }
+              }
+            },
+            box3: {
+              type: 'box',
+              xScaleID: 'x',
+              yScaleID: 'y',
+              xMin: -9,
+              yMin: -1,
+              xMax: -1,
+              yMax: -9,
+              backgroundColor: 'white',
+              borderColor: 'red',
+              borderWidth: 2,
+              label: {
+                enabled: true,
+                content: 'p: 50%,50%',
+                position: {
+                  x: '50%',
+                  y: '50%'
+                }
+              }
+            },
+            box4: {
+              type: 'box',
+              xScaleID: 'x',
+              yScaleID: 'y',
+              xMin: 1,
+              yMin: -1,
+              xMax: 9,
+              yMax: -9,
+              backgroundColor: 'white',
+              borderColor: 'red',
+              borderWidth: 2,
+              label: {
+                enabled: true,
+                content: 'p: 100%,0%',
+                position: {
+                  x: '100%',
+                  y: '0%'
+                }
+              }
+            },
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};