Enable the line curve in the line annotation

docs/.vuepress/config.js

@@ -171,6 +171,7 @@ module.exports = {
           title: 'Line annotations',
           children: [
             'line/basic',
+            'line/curve',
             'line/lowerUpper',
             'line/limited',
             'line/average',

docs/guide/types/line.md

@@ -54,6 +54,8 @@ The following options are available for line annotations.
 | ---- | ---- | :----: | ----
 | [`arrowHeads`](#arrow-heads) | `{start: object, end:object}` | Yes |
 | [`borderWidth`](#styling) | `number` | Yes | `2`
+| [`controlPoint`](#general) | `number` \| `string` \| `{x: number | string, y: number | string}` | Yes | `{y:'-50%'}`
+| [`curve`](#general) | `boolean` | Yes | `false`
 | [`endValue`](#positioning) | `number` | Yes | `undefined`
 | [`label`](#label) | `object` | Yes |
 | [`scaleID`](#positioning) | `string` | Yes | `undefined`
@@ -83,6 +85,8 @@ If `scaleID` is unset, then `xScaleID` and `yScaleID` are used to draw a line fr
 | Name | Description
 | ---- | ----
 | `adjustScaleRange` | Should the scale range be adjusted if this annotation is out of range.
+| `controlPoint` | if `curve` is enabled, it configures the control point to drawn the curve, calculated in pixels. It can be set by a string in percentage format `'number%'` which are representing the percentage of the distance between the start and end point from the center.
+| `curve` | Whether or not a quadratic [Bézier curve](https://developer.mozilla.org/en-US/docs/Glossary/Bezier_curve) is drawn.
 | `display` | Whether or not this annotation is visible.
 | `drawTime` | See [drawTime](../options#draw-time).
 | `endValue` | End two of the line when a single scale is specified.

docs/samples/line/curve.md

@@ -0,0 +1,78 @@
+# Curve
+
+```js chart-editor
+// <block:setup:2>
+const DATA_COUNT = 8;
+const MIN = 10;
+const MAX = 100;
+
+Utils.srand(8);
+
+const labels = [];
+for (let i = 0; i < DATA_COUNT; ++i) {
+  labels.push('' + i);
+}
+
+const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};
+
+const data = {
+  labels: labels,
+  datasets: [{
+    data: Utils.numbers(numberCfg)
+  }]
+};
+// </block:setup>
+
+// <block:annotation:1>
+const annotation = {
+  type: 'line',
+  borderColor: 'black',
+  borderWidth: 3,
+  xScaleID: 'x',
+  yScaleID: 'y',
+  xMin: 1,
+  xMax: 6,
+  yMin: ({chart}) => chart.data.datasets[0].data[1] / 2,
+  yMax: ({chart}) => chart.data.datasets[0].data[6] / 2,
+  curve: true,
+  arrowHeads: {
+    end: {
+      display: true
+    }
+  }
+};
+// </block:annotation>
+
+/* <block:config:0> */
+const config = {
+  type: 'bar',
+  data,
+  options: {
+    plugins: {
+      annotation: {
+        annotations: {
+          annotation
+        }
+      }
+    }
+  }
+};
+/* </block:config> */
+
+const actions = [
+  {
+    name: 'Randomize',
+    handler: function(chart) {
+      chart.data.datasets.forEach(function(dataset, i) {
+        dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX));
+      });
+      chart.update();
+    }
+  }
+];
+
+module.exports = {
+  actions: actions,
+  config: config
+};
+```

src/helpers/helpers.chart.js

@@ -2,12 +2,18 @@ import {isFinite, toPadding} from 'chart.js/helpers';
 import {measureLabelSize} from './helpers.canvas';
 import {isBoundToPoint, getRelativePosition, toPosition} from './helpers.options';
 
+const limitedLineScale = {
+  xScaleID: {min: 'xMin', max: 'xMax', start: 'left', end: 'right', startProp: 'x', endProp: 'x2'},
+  yScaleID: {min: 'yMin', max: 'yMax', start: 'bottom', end: 'top', startProp: 'y', endProp: 'y2'}
+};
+
 /**
  * @typedef { import("chart.js").Chart } Chart
  * @typedef { import("chart.js").Scale } Scale
  * @typedef { import("chart.js").Point } Point
  * @typedef { import('../../types/element').AnnotationBoxModel } AnnotationBoxModel
  * @typedef { import('../../types/options').CoreAnnotationOptions } CoreAnnotationOptions
+ * @typedef { import('../../types/options').LineAnnotationOptions } LineAnnotationOptions
  * @typedef { import('../../types/options').PointAnnotationOptions } PointAnnotationOptions
  * @typedef { import('../../types/options').PolygonAnnotationOptions } PolygonAnnotationOptions
  */
@@ -144,6 +150,23 @@ export function resolvePointProperties(chart, options) {
   }
   return getChartCircle(chart, options);
 }
+/**
+ * @param {Chart} chart
+ * @param {LineAnnotationOptions} options
+ * @returns {AnnotationBoxModel}
+ */
+export function resolveLineProperties(chart, options) {
+  const {scales, chartArea} = chart;
+  const scale = scales[options.scaleID];
+  const area = {x: chartArea.left, y: chartArea.top, x2: chartArea.right, y2: chartArea.bottom};
+
+  if (scale) {
+    resolveFullLineProperties(scale, area, options);
+  } else {
+    resolveLimitedLineProperties(scales, area, options);
+  }
+  return area;
+}
 
 /**
  * @param {Chart} chart
@@ -185,6 +208,30 @@ function getChartDimensionByScale(scale, options) {
   };
 }
 
+function resolveFullLineProperties(scale, area, options) {
+  const min = scaleValue(scale, options.value, NaN);
+  const max = scaleValue(scale, options.endValue, min);
+  if (scale.isHorizontal()) {
+    area.x = min;
+    area.x2 = max;
+  } else {
+    area.y = min;
+    area.y2 = max;
+  }
+}
+
+function resolveLimitedLineProperties(scales, area, options) {
+  for (const scaleId of Object.keys(limitedLineScale)) {
+    const scale = scales[retrieveScaleID(scales, options, scaleId)];
+    if (scale) {
+      const {min, max, start, end, startProp, endProp} = limitedLineScale[scaleId];
+      const dim = getDimensionByScale(scale, {min: options[min], max: options[max], start: scale[start], end: scale[end]});
+      area[startProp] = dim.start;
+      area[endProp] = dim.end;
+    }
+  }
+}
+
 function calculateX({properties, options}, labelSize, position, padding) {
   const {x: start, x2: end, width: size} = properties;
   return calculatePosition({start, end, size, borderWidth: options.borderWidth}, {
@@ -234,4 +281,5 @@ function resolveLabelElementProperties(chart, properties, options) {
     centerY: y + height / 2,
     rotation: label.rotation
   };
+
 }

src/helpers/helpers.options.js

@@ -2,7 +2,8 @@ import {isObject, valueOrDefault, defined} from 'chart.js/helpers';
 import {clamp} from './helpers.core';
 
 const isPercentString = (s) => typeof s === 'string' && s.endsWith('%');
-const toPercent = (s) => clamp(parseFloat(s) / 100, 0, 1);
+const toPercent = (s) => parseFloat(s) / 100;
+const toPositivePercent = (s) => clamp(toPercent(s), 0, 1);
 
 /**
  * @typedef { import('../../types/options').AnnotationPointCoordinates } AnnotationPointCoordinates
@@ -13,7 +14,6 @@ const toPercent = (s) => clamp(parseFloat(s) / 100, 0, 1);
 /**
  * @param {number} size
  * @param {number|string} position
- * @param {number} to
  * @returns {number}
  */
 export function getRelativePosition(size, position) {
@@ -24,22 +24,22 @@ export function getRelativePosition(size, position) {
     return size;
   }
   if (isPercentString(position)) {
-    return toPercent(position) * size;
+    return toPositivePercent(position) * size;
   }
   return size / 2;
 }
 
 /**
  * @param {number} size
  * @param {number|string} value
- * @param {number} to
+ * @param {boolean} [positivePercent=true]
  * @returns {number}
  */
-export function getSize(size, value) {
+export function getSize(size, value, positivePercent = true) {
   if (typeof value === 'number') {
     return value;
   } else if (isPercentString(value)) {
-    return toPercent(value) * size;
+    return (positivePercent ? toPositivePercent(value) : toPercent(value)) * size;
   }
   return size;
 }
@@ -61,17 +61,18 @@ export function calculateTextAlignment(size, options) {
 }
 
 /**
- * @param {LabelPositionObject|string} value
- * @returns {LabelPositionObject}
+ * @param {{x: number|string, y: number|string}|string|number} value
+ * @param {string|number} defaultValue
+ * @returns {{x: number|string, y: number|string}}
  */
-export function toPosition(value) {
+export function toPosition(value, defaultValue = 'center') {
   if (isObject(value)) {
     return {
-      x: valueOrDefault(value.x, 'center'),
-      y: valueOrDefault(value.y, 'center'),
+      x: valueOrDefault(value.x, defaultValue),
+      y: valueOrDefault(value.y, defaultValue),
     };
   }
-  value = valueOrDefault(value, 'center');
+  value = valueOrDefault(value, defaultValue);
   return {
     x: value,
     y: value

src/types/label.js

@@ -116,7 +116,7 @@ LabelAnnotation.defaultRoutes = {
 function measureRect(point, size, options, padding) {
   const width = size.width + padding.width + options.borderWidth;
   const height = size.height + padding.height + options.borderWidth;
-  const position = toPosition(options.position);
+  const position = toPosition(options.position, 'center');
   const x = calculatePosition(point.x, width, options.xAdjust, position.x);
   const y = calculatePosition(point.y, height, options.yAdjust, position.y);