@oliasoft-open-source/charts-library 2.2.1 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "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.3.0
+
+- Text annotations in line chart
+
 ## 2.2.1
 
 - Support for dark mode

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

@@ -64,6 +64,7 @@ export const LineChartPropTypes = {
         showMinorGridlines: PropTypes.bool,
       }),
       annotations: PropTypes.shape({
+        labelAnnotation: PropTypes.object,
         showAnnotations: PropTypes.bool,
         controlAnnotation: PropTypes.bool,
         annotationsData: PropTypes.arrayOf(
@@ -166,6 +167,7 @@ export const getDefaultProps = (props) => {
           props.chart.options.graph.showMinorGridlines || false,
       },
       annotations: {
+        labelAnnotation: props.chart.options.annotations.labelAnnotation || {},
         showAnnotations:
           props.chart.options.annotations.showAnnotations ?? false,
         controlAnnotation:

package/src/components/line-chart/line-chart.stories.jsx

@@ -317,6 +317,9 @@ Annotations.args = {
       ...basicChart.options,
       annotations: {
         showAnnotations: true,
+        labelAnnotation: {
+          content: ['Annotation label'],
+        },
         annotationsData: [
           {
             annotationAxis: 'y',

package/src/helpers/chart-interface.ts

@@ -8,10 +8,18 @@ export interface IChartAnnotationsData {
     endValue: number
 };
 
+export interface ILabelAnnotation {
+    content: string[];
+    fontSize: number;
+    xAdjust: number;
+    yAdjust: number;
+}
+
 export interface IChartAnnotations {
     showAnnotations: boolean;
     controlAnnotation: boolean;
     annotationsData: IChartAnnotationsData[];
+    labelAnnotation: ILabelAnnotation
 }
 
 export interface IChartStyling {

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

@@ -64,6 +64,36 @@ const generateAnnotations = (options, state) => {
   return annotations;
 };
 
+/**
+ * @param {import('../components/bar-chart/bar-chart.interface').IBarChartOptions |
+ * import('../components/line-chart/line-chart.interface').ILineChartOptions} options - chart options object
+ * @return {{label1: {}}}
+ */
+const getLabelAnnotation = (options) => {
+  const { annotations } = options;
+  const isDarkModeOn = options.chartStyling.darkMode || false;
+  const {
+    content = [],
+    xAdjust = -200,
+    yAdjust = 120,
+    fontSize = 12,
+  } = annotations.labelAnnotation;
+
+  return {
+    label1: {
+      type: 'label',
+      xAdjust,
+      yAdjust,
+      backgroundColor: 'rgba(0, 0, 0, 0)',
+      color: isDarkModeOn && 'rgba(255, 255, 255, 1)',
+      content,
+      font: {
+        size: fontSize,
+      },
+    },
+  };
+};
+
 /**
  * @param {import('../components/bar-chart/bar-chart.interface').IBarChartOptions |
  * import('../components/line-chart/line-chart.interface').ILineChartOptions} options - chart options object
@@ -74,11 +104,16 @@ const getAnnotation = (options, state) => {
   const { annotations } = options;
   const isAnnotationShown = annotations?.showAnnotations;
   const isAnnotationDataProvided = annotations?.annotationsData?.length;
+
+  const formAnnotation = {
+    ...getLabelAnnotation(options),
+    ...(isAnnotationShown && isAnnotationDataProvided
+      ? generateAnnotations(options, state)
+      : []),
+  };
+
   return {
-    annotations:
-      isAnnotationShown && isAnnotationDataProvided
-        ? generateAnnotations(options, state)
-        : [],
+    annotations: formAnnotation,
   };
 };
 export default getAnnotation;