Use new component in observation resource and report lab component

frontend/src/app/components/fhir-card/resources/observation/observation.component.html

@@ -14,13 +14,7 @@ <h6 class="card-title">{{displayModel?.sort_title}}</h6>
     <p class="az-content-text mg-b-20">Observations are a central element in healthcare, used to support diagnosis, monitor progress, determine baselines and patterns and even capture demographic characteristics.</p>
     <fhir-ui-table [displayModel]="displayModel" [tableData]="tableData"></fhir-ui-table>
 
-    <canvas baseChart
-            [height]="chartHeight"
-            [type]="'bar'"
-            [datasets]="barChartData"
-            [labels]="barChartLabels"
-            [options]="barChartOptions"
-    ></canvas>
+    <observation-bar-chart [observations]="[displayModel]"></observation-bar-chart>
   </div>
   <div *ngIf="showDetails" class="card-footer">
     <a class="float-right" [routerLink]="['/explore', displayModel?.source_id, 'resource', displayModel?.source_resource_id]">details</a>

frontend/src/app/components/fhir-card/resources/observation/observation.component.ts

@@ -1,19 +1,17 @@
 import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
-import {NgbCollapseModule} from '@ng-bootstrap/ng-bootstrap';
-import {CommonModule, formatDate} from '@angular/common';
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
+import {CommonModule} from '@angular/common';
 import {BadgeComponent} from '../../common/badge/badge.component';
 import {TableComponent} from '../../common/table/table.component';
 import {Router, RouterModule} from '@angular/router';
-import {LocationModel} from '../../../../../lib/models/resources/location-model';
 import {TableRowItem, TableRowItemDataType} from '../../common/table/table-row-item';
 import {ObservationModel} from '../../../../../lib/models/resources/observation-model';
-import {ChartConfiguration} from 'chart.js';
-import fhirpath from 'fhirpath';
-import {NgChartsModule} from 'ng2-charts';
+import { ObservationBarChartComponent } from 'src/app/components/fhir-card/common/observation-bar-chart/observation-bar-chart.component';
 
 @Component({
   standalone: true,
-  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, RouterModule, NgChartsModule],
+  imports: [CommonModule, BadgeComponent, TableComponent, RouterModule, NgbCollapseModule, ObservationBarChartComponent],
+  providers: [],
   selector: 'fhir-observation',
   templateUrl: './observation.component.html',
   styleUrls: ['./observation.component.scss']
@@ -25,89 +23,15 @@ export class ObservationComponent implements OnInit {
 
   tableData: TableRowItem[] = []
 
-  //observation chart data
-  chartHeight = 45
-
-  barChartData =[
-
-    {
-      label: "Reference",
-      data: [[55,102], [44,120]],
-      backgroundColor: "rgba(91, 71, 251,0.6)",
-      hoverBackgroundColor: "rgba(91, 71, 251,0.2)"
-    },{
-      label: "Current",
-      data: [[80,81], [130,131]],
-      borderColor: "rgba(0,0,0,1)",
-      backgroundColor: "rgba(0,0,0,1)",
-      hoverBackgroundColor: "rgba(0,0,0,1)",
-      minBarLength: 3,
-      barPercentage: 1,
-      tooltip: {
-
-      }
-    }
-  ]  as ChartConfiguration<'bar'>['data']['datasets']
-
-  barChartLabels = [] // ["2020", "2018"] //["1","2","3","4","5","6","7","8"]
-
-  barChartOptions = {
-    indexAxis: 'y',
-    legend:{
-      display: false,
-    },
-    autoPadding: true,
-    //add padding to fix tooltip cutoff
-    layout: {
-      padding: {
-        left: 0,
-        right: 4,
-        top: 0,
-        bottom: 10
-      }
-    },
-    scales: {
-      y: {
-        stacked: true,
-        ticks: {
-          beginAtZero: true,
-          fontSize: 10,
-          min: 0,
-          // max: 80
-        },
-      },
-      x: {
-        scaleLabel:{
-          display: false,
-          labelString: "xaxis",
-          padding: 4,
-        },
-        // stacked: true,
-        ticks: {
-          beginAtZero: true,
-          fontSize: 10,
-          min: 0,
-          // max: 80
-        },
-      },
-    }
-  } as ChartConfiguration<'bar'>['options']
-
-  barChartColors = [
-    {
-      backgroundColor: 'white'
-    }
-  ];
-
-
   constructor(public changeRef: ChangeDetectorRef, public router: Router) { }
 
   ngOnInit(): void {
     if(!this.displayModel){
       return
     }
 
-    this.tableData.push(    {
+    this.tableData.push(
+      {
         label: 'Issued on',
         data: this.displayModel?.effective_date,
         enabled: !!this.displayModel?.effective_date,
@@ -131,30 +55,13 @@ export class ObservationComponent implements OnInit {
       },
       {
         label: 'Reference',
-        data: [this.displayModel?.reference_range?.[0]?.low?.value,this.displayModel?.reference_range?.[0]?.high?.value].join(" "),
+        data: this.displayModel.referenceRangeDisplay(),
         enabled: !!this.displayModel?.reference_range,
-      })
-
-
-    //populate chart data
-    if(this.displayModel?.effective_date) {
-      this.barChartLabels.push(
-        formatDate(this.displayModel?.effective_date, "mediumDate", "en-US", undefined)
-      )
-    } else {
-      this.barChartLabels.push("")
-    }
-
-    this.barChartData[0].data = [[this.displayModel?.reference_range?.[0]?.low?.value, this.displayModel?.reference_range?.[0]?.high?.value]]
-    this.barChartData[1].data = [[this.displayModel?.value_quantity_value as number, this.displayModel?.value_quantity_value as number]]
-
-    let suggestedMax = (this.displayModel?.value_quantity_value as number) * 1.1;
-    this.barChartOptions.scales['x']['suggestedMax'] = suggestedMax
-
-    console.log("Observation chart data: ", this.barChartData[0].data, this.barChartData[1].data)
+      }
+    )
   }
+
   markForCheck(){
     this.changeRef.markForCheck()
   }
-
 }

frontend/src/app/components/fhir-card/resources/observation/observation.stories.ts

@@ -1,24 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import {fhirVersions} from "../../../../../lib/models/constants";
-import R4Example1Json from "../../../../../lib/fixtures/r4/resources/observation/example1.json";
-import R4Example2Json from "../../../../../lib/fixtures/r4/resources/observation/example2.json";
-import R4Example3Json from "../../../../../lib/fixtures/r4/resources/observation/example3.json";
-import {ObservationComponent} from "./observation.component";
-import {ObservationModel} from "../../../../../lib/models/resources/observation-model";
+import { moduleMetadata } from '@storybook/angular';
+import { fhirVersions } from "../../../../../lib/models/constants";
+import { ObservationComponent } from "./observation.component";
+import { ObservationModel } from "../../../../../lib/models/resources/observation-model";
+import { RouterTestingModule } from '@angular/router/testing';
+import { observationR4Factory } from 'src/lib/fixtures/factories/r4/resources/observation-r4-factory';
 
-
-
-// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
 const meta: Meta<ObservationComponent> = {
   title: 'Fhir Card/Observation',
   component: ObservationComponent,
   decorators: [
-    // moduleMetadata({
-    //   imports: [AppModule]
-    // })
-    // applicationConfig({
-    //   providers: [importProvidersFrom(AppModule)],
-    // }),
+    moduleMetadata({
+      imports: [ RouterTestingModule ]
+    })
   ],
   tags: ['autodocs'],
   render: (args: ObservationComponent) => ({
@@ -40,30 +34,11 @@ const meta: Meta<ObservationComponent> = {
 export default meta;
 type Story = StoryObj<ObservationComponent>;
 
-// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
-let r4Example1DisplayModel =  new ObservationModel(R4Example1Json, fhirVersions.R4)
-r4Example1DisplayModel.source_id = '123-456-789'
-r4Example1DisplayModel.source_resource_id = '123-456-789'
-export const R4Example1: Story = {
-  args: {
-    displayModel: r4Example1DisplayModel
-  }
-};
-
-let r4Example2DisplayModel =  new ObservationModel(R4Example2Json, fhirVersions.R4)
-r4Example2DisplayModel.source_id = '123-456-789'
-r4Example2DisplayModel.source_resource_id = '123-456-789'
-export const R4Example2: Story = {
-  args: {
-    displayModel: r4Example2DisplayModel
-  }
-};
-
-let r4Example3DisplayModel =  new ObservationModel(R4Example3Json, fhirVersions.R4)
-r4Example3DisplayModel.source_id = '123-456-789'
-r4Example3DisplayModel.source_resource_id = '123-456-789'
-export const R4Example3: Story = {
+let observation = new ObservationModel(observationR4Factory.referenceRange().build(), fhirVersions.R4);
+observation.source_id = '123-456-789'
+observation.source_resource_id = '123-456-789'
+export const Entry: Story = {
   args: {
-    displayModel: r4Example3DisplayModel
+    displayModel: observation
   }
 };

frontend/src/app/components/report-labs-observation/report-labs-observation.component.html

@@ -36,12 +36,13 @@
             <div #collapse="ngbCollapse" [ngbCollapse]="true">
 
               <ul>
-                <li class="cursor-pointer tx-indigo" *ngFor="let observation of observations" [routerLink]="['/explore', observation?.source_id, 'resource', observation?.source_resource_id]">Observation: {{observation | fhirPath: "Observation.effectiveDateTime": "Observation.issued" | date}}</li>
+                <li class="cursor-pointer tx-indigo" *ngFor="let observation of observations">
+                  <a [routerLink]="['/explore', observation?.source_id, 'resource', observation?.source_resource_id]">
+                    Observation: {{observation | fhirPath: "Observation.effectiveDateTime": "Observation.issued" | date}}
+                  </a>
+                </li>
               </ul>
             </div>
-
-
-
           </div>
         </div>
 
@@ -53,15 +54,12 @@
           </div>
 
           <div class="col-12">
-            <canvas baseChart [height]="chartHeight" [type]="'bar'" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions"></canvas>
+            <observation-bar-chart [observations]="observationModels"></observation-bar-chart>
           </div>
 
-
-
         </div>
       </div>
     </div>
 
-
   </div><!-- card-body -->
 </div>

frontend/src/app/components/report-labs-observation/report-labs-observation.component.spec.ts

@@ -1,17 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ReportLabsObservationComponent } from './report-labs-observation.component';
-import {PipesModule} from '../../pipes/pipes.module';
-import {NgbCollapseModule} from '@ng-bootstrap/ng-bootstrap';
+import { PipesModule } from '../../pipes/pipes.module';
+import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap';
 
 describe('ReportLabsObservationComponent', () => {
   let component: ReportLabsObservationComponent;
   let fixture: ComponentFixture<ReportLabsObservationComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PipesModule, NgbCollapseModule],
-      declarations: [ ReportLabsObservationComponent ]
+      imports: [PipesModule],
+      declarations: [ ReportLabsObservationComponent, NgbCollapse ],
     })
     .compileComponents();