generated from PackagrIO/goweb-template
-
-
Notifications
You must be signed in to change notification settings - Fork 73
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add vscode config * Comment out empty tests causing issues running tests in vscode * Add Fishery, update test dependencies, update chart.js * Add factory for building fhir r4 observation object * Fix deprecation warnings in _mixins.scss * Update observation model for better value and reference range parsing * Add observation-bar-chart.component to pull out bar chart logic into reusable component * Use new component in observation resource and report lab component
- Loading branch information
1 parent
43579df
commit bcffbb4
Showing
24 changed files
with
785 additions
and
436 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| { | ||
| "version": "0.2.0", | ||
| "configurations": [ | ||
| { | ||
| "name": "Go Tests", | ||
| "type": "go", | ||
| "request": "launch", | ||
| "mode": "test", | ||
| "program": "${workspaceFolder}/backend", | ||
| "args": [ | ||
| "-test.run" | ||
| ] | ||
| }, | ||
| { | ||
| "type": "chrome", | ||
| "request": "attach", | ||
| "name": "Attach Karma Chrome", | ||
| "address": "localhost", | ||
| "port": 9333, | ||
| "pathMapping": { | ||
| "/": "${workspaceRoot}/frontend", | ||
| "/base/": "${workspaceRoot}/frontend" | ||
| } | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "karmaTestExplorer.karmaConfFilePath": "frontend/karma.conf.js", | ||
| "karmaTestExplorer.projectWorkspaces": [ | ||
| "frontend" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 9 additions & 0 deletions
9
...pp/components/fhir-card/common/observation-bar-chart/observation-bar-chart.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <!-- surrounding div needed so chart can resize when window size changes --> | ||
| <div class="observation-bar-chart-container"> | ||
| <canvas baseChart | ||
| [height]="chartHeight" | ||
| [type]="'bar'" | ||
| [datasets]="barChartData" | ||
| [labels]="barChartLabels" | ||
| [options]="barChartOptions"></canvas> | ||
| </div> |
Empty file.
22 changes: 22 additions & 0 deletions
22
...components/fhir-card/common/observation-bar-chart/observation-bar-chart.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { ObservationBarChartComponent } from './observation-bar-chart.component'; | ||
|
|
||
| describe('ObservationBarChartComponent', () => { | ||
| let component: ObservationBarChartComponent; | ||
| let fixture: ComponentFixture<ObservationBarChartComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [ ObservationBarChartComponent ] | ||
| }) | ||
| .compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(ObservationBarChartComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
161 changes: 161 additions & 0 deletions
161
.../app/components/fhir-card/common/observation-bar-chart/observation-bar-chart.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| import { Component, Input, OnInit } from '@angular/core'; | ||
| import { formatDate } from '@angular/common'; | ||
| import { ObservationModel } from '../../../../../lib/models/resources/observation-model'; | ||
| import { ChartConfiguration } from 'chart.js'; | ||
| import { NgChartsModule } from 'ng2-charts'; | ||
|
|
||
| const defaultChartHeight = 65; | ||
| const defaultChartEntryHeight = 30; | ||
|
|
||
| @Component({ | ||
| standalone: true, | ||
| selector: 'observation-bar-chart', | ||
| imports: [ NgChartsModule ], | ||
| templateUrl: './observation-bar-chart.component.html', | ||
| styleUrls: ['./observation-bar-chart.component.scss'] | ||
| }) | ||
| export class ObservationBarChartComponent implements OnInit { | ||
| @Input() observations: [ObservationModel] | ||
|
|
||
| chartHeight = defaultChartEntryHeight; | ||
|
|
||
| // based on https://stackoverflow.com/questions/38889716/chartjs-2-stacked-bar-with-marker-on-top | ||
| // https://stackoverflow.com/questions/62711919/chart-js-horizontal-lines-per-bar | ||
| barChartData =[ | ||
| { | ||
| label: "Reference", | ||
| data: [], | ||
| dataLabels: [], | ||
| backgroundColor: "rgba(91, 71, 251,0.6)", | ||
| hoverBackgroundColor: "rgba(91, 71, 251,0.2)", | ||
| parsing: { | ||
| xAxisKey: 'range' | ||
| }, | ||
| tooltip: { | ||
| callbacks: { | ||
| label: function(context) { | ||
| return `${context.dataset.label}: ${context.dataset.dataLabels[context.dataIndex]}`; | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| label: "Result", | ||
| data: [], | ||
| // @ts-ignore | ||
| dataLabels: [], | ||
| borderColor: "rgba(0,0,0,1)", | ||
| backgroundColor: "rgba(0,0,0,1)", | ||
| hoverBackgroundColor: "rgba(0,0,0,1)", | ||
| minBarLength: 3, | ||
| barPercentage: 1, | ||
| parsing: { | ||
| xAxisKey: 'value' | ||
| }, | ||
| // @ts-ignore | ||
| tooltip: { | ||
| callbacks: { | ||
| label: function(context) { | ||
| let label = `${context.dataset.label}: ${context.parsed.x}`; | ||
|
|
||
| if (context.dataset.dataLabels[context.dataIndex]) { | ||
| return `${label} ${context.dataset.dataLabels[context.dataIndex]}`; | ||
| } | ||
| return label; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ] as ChartConfiguration<'bar'>['data']['datasets'] | ||
|
|
||
| barChartLabels = [] // ["2020", "2018"] //["1","2","3","4","5","6","7","8"] | ||
|
|
||
| barChartOptions = { | ||
| indexAxis: 'y', | ||
| maintainAspectRatio: false, | ||
| 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, | ||
| }, | ||
| }, | ||
| x: { | ||
| scaleLabel:{ | ||
| display: false, | ||
| padding: 4, | ||
| }, | ||
| ticks: { | ||
| beginAtZero: true, | ||
| fontSize: 10, | ||
| min: 0, | ||
| }, | ||
| }, | ||
| } | ||
| } as ChartConfiguration<'bar'>['options'] | ||
|
|
||
| barChartColors = [ | ||
| { | ||
| backgroundColor: 'white' | ||
| } | ||
| ]; | ||
|
|
||
| constructor() { } | ||
|
|
||
| ngOnInit(): void { | ||
| if(!this.observations || !this.observations[0]) { | ||
| return; | ||
| } | ||
|
|
||
| let currentValues: number[] = [] | ||
| let referenceRanges = [] | ||
|
|
||
| for(let observation of this.observations) { | ||
| let refRange = observation.reference_range; | ||
|
|
||
| referenceRanges.push([refRange.low || 0, refRange.high || 0]); | ||
| currentValues.push(observation.value_quantity_value); | ||
|
|
||
| if (observation.effective_date) { | ||
| this.barChartLabels.push(formatDate(observation.effective_date, "mediumDate", "en-US", undefined)); | ||
| } else { | ||
| this.barChartLabels.push('Unknown date'); | ||
| } | ||
|
|
||
| this.barChartData[0]['dataLabels'].push(observation.referenceRangeDisplay()); | ||
| this.barChartData[1]['dataLabels'].push(observation.value_quantity_unit); | ||
| } | ||
|
|
||
| let xAxisMax = Math.max(...currentValues) * 1.3; | ||
| this.barChartOptions.scales['x']['max'] = xAxisMax | ||
|
|
||
| let updatedRefRanges = referenceRanges.map(range => { | ||
| if (range[0] && !range[1]) { | ||
| return [range[0], xAxisMax] | ||
| } else { | ||
| return [range[0], range[1]] | ||
| } | ||
| }); | ||
|
|
||
| // @ts-ignore | ||
| this.barChartData[0].data = updatedRefRanges | ||
| this.barChartData[1].data = currentValues.map(v => [v, v]) | ||
|
|
||
| this.chartHeight = defaultChartHeight + (defaultChartEntryHeight * currentValues.length) | ||
| } | ||
| } |
64 changes: 64 additions & 0 deletions
64
...rc/app/components/fhir-card/common/observation-bar-chart/observation-bar-chart.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import type { Meta, StoryObj } from '@storybook/angular'; | ||
| import { fhirVersions } from "../../../../../lib/models/constants"; | ||
| import { ObservationBarChartComponent } from './observation-bar-chart.component'; | ||
| import { ObservationModel } from 'src/lib/models/resources/observation-model'; | ||
| 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<ObservationBarChartComponent> = { | ||
| title: 'Fhir Card/Common/ObservationBarChart', | ||
| component: ObservationBarChartComponent, | ||
| decorators: [ | ||
| ], | ||
| tags: ['autodocs'], | ||
| render: (args: ObservationBarChartComponent) => ({ | ||
| props: { | ||
| backgroundColor: null, | ||
| ...args, | ||
| }, | ||
| }), | ||
| argTypes: { | ||
| observations: { | ||
| control: 'object', | ||
| } | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<ObservationBarChartComponent>; | ||
|
|
||
| export const NoRange: Story = { | ||
| args: { | ||
| observations: [new ObservationModel(observationR4Factory.build(), fhirVersions.R4)] | ||
| } | ||
| }; | ||
|
|
||
| export const Range: Story = { | ||
| args: { | ||
| observations: [new ObservationModel(observationR4Factory.referenceRange().build(), fhirVersions.R4)] | ||
| } | ||
| }; | ||
|
|
||
| export const RangeOnlyLow: Story = { | ||
| args: { | ||
| observations: [new ObservationModel(observationR4Factory.referenceRangeOnlyLow().build(), fhirVersions.R4)] | ||
| } | ||
| }; | ||
|
|
||
| export const RangeOnlyLowText: Story = { | ||
| args: { | ||
| observations: [new ObservationModel(observationR4Factory.referenceRangeStringOnlyLow().build(), fhirVersions.R4)] | ||
| } | ||
| }; | ||
|
|
||
| export const RangeOnlyHigh: Story = { | ||
| args: { | ||
| observations: [new ObservationModel(observationR4Factory.referenceRangeOnlyHigh().build(), fhirVersions.R4)] | ||
| } | ||
| }; | ||
|
|
||
| export const RangeOnlyHighText: Story = { | ||
| args: { | ||
| observations: [new ObservationModel(observationR4Factory.referenceRangeStringOnlyHigh().build(), fhirVersions.R4)] | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.