Enhance annotation value extraction in computeBounds function (#266)

* Enhance annotation value extraction in computeBounds function

* Bump version to 6.1.3 in ngx-charts-on-fhir package

* Refactor annotation value extraction to use LineAnnotationOptions in computeBounds function

libs/ngx-charts-on-fhir/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elimuinformatics/ngx-charts-on-fhir",
-  "version": "6.1.2",
+  "version": "6.1.3",
   "description": "Charts-on-FHIR: A data visualization library for SMART-on-FHIR healthcare applications",
   "license": "Apache-2.0",
   "homepage": "https://elimuinformatics.github.io/charts-on-fhir",

libs/ngx-charts-on-fhir/src/lib/fhir-chart/fhir-chart-configuration.service.ts

@@ -10,6 +10,7 @@ import { TIME_SCALE_OPTIONS, TIMEFRAME_ANNOTATION_OPTIONS } from '../fhir-mapper
 import { ChartAnnotation, ChartAnnotations, ChartScales, formatDateTime, formatMonths, isDefined, MonthRange, NumberRange, subtractMonths } from '../utils';
 import './center-tooltip-positioner';
 import { sortData } from '../data-layer/data-layer-merge.service';
+import { LineAnnotationOptions } from 'chartjs-plugin-annotation';
 export type TimelineConfiguration = ChartConfiguration<TimelineChartType, TimelineDataPoint[]>;
 
 type MergedDataLayer = {
@@ -27,7 +28,7 @@ export class FhirChartConfigurationService {
     private layerManager: DataLayerManagerService,
     @Inject(TIME_SCALE_OPTIONS) private timeScaleOptions: ScaleOptions<'time'>,
     @Inject(TIMEFRAME_ANNOTATION_OPTIONS) private timeframeAnnotationOptions: ChartAnnotation,
-    private ngZone: NgZone
+    private ngZone: NgZone,
   ) {
     this.setSummaryRange(0);
   }
@@ -50,7 +51,7 @@ export class FhirChartConfigurationService {
   chartConfig$ = combineLatest([this.mergedLayer$, this.annotationSubject]).pipe(
     map(([layer, annotations]) => ({ ...layer, annotations: layer.annotations.concat(annotations) })),
     scan((config, layer) => this.updateConfiguration(config, layer), this.buildConfiguration()),
-    tap((config) => this.updateTimelineBounds(config.data.datasets))
+    tap((config) => this.updateTimelineBounds(config.data.datasets)),
   );
 
   private timelineDataBounds: Partial<NumberRange> = { min: undefined, max: undefined };
@@ -268,7 +269,16 @@ function computeBounds(axis: 'x' | 'y', padding: number, datasets: Dataset[], an
   if (annotations) {
     const annoMin = axis === 'x' ? 'xMin' : 'yMin';
     const annoMax = axis === 'x' ? 'xMax' : 'yMax';
-    values.push(...annotations.flatMap((anno) => [anno[annoMin], anno[annoMax]]).filter(isNotNaN));
+    values.push(
+      ...annotations.flatMap((anno) => {
+        const annotationValues: number[] = [];
+        if (isNotNaN(anno[annoMin])) annotationValues.push(anno[annoMin]);
+        if (isNotNaN(anno[annoMax])) annotationValues.push(anno[annoMax]);
+        const annoValue = (anno as LineAnnotationOptions).value;
+        if (isNotNaN(annoValue)) annotationValues.push(annoValue);
+        return annotationValues;
+      }),
+    );
   }
   if (values.length > 0) {
     const min = Math.min(...values);