@oliasoft-open-source/charts-library 2.6.0 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "main": "index.js",
   "scripts": {

package/release-notes.md

@@ -1,5 +1,9 @@
 # Charts Library Release Notes
 
+## 2.6.1
+
+- Added Box and Ellipse annotations ([OW-10519](https://oliasoft.atlassian.net/browse/OW-10519))
+
 ## 2.6.0
 
 - Add support for optional `autoAxisPadding` prop, which autoscales 5% padding around data ([OW-10398](https://oliasoft.atlassian.net/browse/OW-10398))
@@ -31,7 +35,7 @@
 
 ## 2.5.21
 
-- Revert changes from `2.5.12` / [OW-10320](https://oliasoft.atlassian.net/browse/OW-10320) 
+- Revert changes from `2.5.12` / [OW-10320](https://oliasoft.atlassian.net/browse/OW-10320)
 - Changing thousands separators broke decimal separators in some locales
 - Resolves [OW-10320](https://oliasoft.atlassian.net/browse/OW-10320)
 

package/src/components/line-chart/line-chart-prop-types.js

@@ -71,11 +71,17 @@ export const LineChartPropTypes = {
         controlAnnotation: PropTypes.bool,
         annotationsData: PropTypes.arrayOf(
           PropTypes.shape({
+            adjustScaleRange: PropTypes.bool,
             annotationAxis: PropTypes.oneOf(['x', 'y']),
-            label: PropTypes.string,
             color: PropTypes.string,
-            value: PropTypes.number,
             endValue: PropTypes.number,
+            label: PropTypes.string,
+            type: PropTypes.string,
+            value: PropTypes.number,
+            xMin: PropTypes.number,
+            xMax: PropTypes.number,
+            yMin: PropTypes.number,
+            yMax: PropTypes.number,
           }),
         ),
       }),

package/src/helpers/chart-interface.ts

@@ -1,11 +1,17 @@
 import { Plugin } from "chart.js";
 
 export interface IChartAnnotationsData {
+    adjustScaleRange: boolean;
     annotationAxis: 'x' | 'y';
-    label: string;
     color: string;
+    endValue: number;
+    label: string;
+    type: string;
     value: number;
-    endValue: number
+    xMin: number,
+    xMax: number,
+    yMin: number,
+    yMax: number,
 };
 
 export interface ILabelAnnotation {

package/src/helpers/get-chart-annotation.js

@@ -6,14 +6,14 @@ const annotationEnter = ({ element }, { chart }) => {
     element.options.label.xAdjust = chart.chartArea.left;
   }
   element.options.borderWidth = BORDER_WIDTH.HOVERED;
-  element.options.label.enabled = true;
+  if (element.options.label) element.options.label.enabled = true;
   chart.draw();
   chart.canvas.style.cursor = CursorStyle.Pointer;
 };
 
 const annotationLeave = ({ element }, { chart }) => {
   element.options.borderWidth = BORDER_WIDTH.INITIAL;
-  element.options.label.enabled = false;
+  if (element.options.label) element.options.label.enabled = false;
   chart.draw();
   chart.canvas.style.cursor = CursorStyle.Initial;
 };
@@ -37,27 +37,49 @@ const generateAnnotations = (options, state) => {
     };
 
     const color = curr?.color || COLORS[i];
+    const type = curr?.type || 'line';
+    const adjustScaleRange = curr?.adjustScaleRange;
+    const borderColor = type === 'line' ? color : 'transparent';
+    const borderWidth = type === 'line' ? BORDER_WIDTH.INITIAL : 0;
+    const borderDash = ANNOTATION_DASH;
+
+    const label =
+      type === 'line'
+        ? {
+            backgroundColor: color,
+            content: curr?.label,
+            enabled: false,
+            position: Position.Top,
+          }
+        : {
+            content: curr?.label,
+            enabled: true,
+            font: { weight: 'normal' },
+          };
+
+    const enter = (context, event) => {
+      if (type !== 'line') return;
+      annotationEnter(context, event);
+    };
+
+    const leave = (context, event) => {
+      if (type !== 'line') return;
+      annotationLeave(context, event);
+    };
 
     const annotation = {
       ...curr,
       id: `${curr?.label}-${curr?.value}-${i}`,
       scaleID: getScaleId(),
-      label: {
-        backgroundColor: color,
-        content: curr?.label,
-        enabled: false,
-        position: Position.Top,
-      },
-      borderColor: color,
-      borderWidth: BORDER_WIDTH.INITIAL,
-      borderDash: ANNOTATION_DASH,
-      type: ChartType.Line,
-      enter: (context, event) => {
-        annotationEnter(context, event);
-      },
-      leave: (context, event) => {
-        annotationLeave(context, event);
-      },
+      label,
+      backgroundColor: color,
+      borderColor,
+      borderWidth,
+      borderDash,
+      type,
+      adjustScaleRange,
+      enter,
+      leave,
     };
     return { ...acc, [`annotation${i + 1}`]: annotation };
   }, {});