Skip to content

Commit

Permalink
RT-1530: (charts-on-fhir) Update to Angular 18 (#257)
Browse files Browse the repository at this point in the history
* RT-1530: Updated charts-on-fhir to use Angular 18

* RT-1530: Updated test case

* RT-1530: Updated version name
vdeshkar authored Sep 13, 2024
1 parent 317313b commit 19ed149
Showing 35 changed files with 12,985 additions and 7,589 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -37,6 +37,7 @@ yarn-error.log
testem.log
/typings
/.nx/cache
.nx/workspace-data

# System files
.DS_Store
3 changes: 2 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
@@ -7,4 +7,5 @@ node_modules
**/synthea-utils/**/*.json
**/mock-fhir-server/**/*.json

/.nx/cache
/.nx/cache
/.nx/workspace-data
6 changes: 3 additions & 3 deletions apps/documentation/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<ng-doc-root>
<ng-doc-navbar [leftContent]="leftContent" [rightContent]="rightContent">
<ng-template #leftContent>
<ng-doc-navbar>
<ng-template ngDocNavbarLeft>
<h3 style="margin: 0">Charts-on-FHIR</h3>
</ng-template>
<ng-template #rightContent>
<ng-template ngDocNavbarRight>
<div class="ng-doc-header-controls">
<a ng-doc-button-icon size="large" href="https://github.com/elimuinformatics/charts-on-fhir" ngDocTooltip="GitHub Repository">
<ng-doc-icon customIcon="github" [size]="24"></ng-doc-icon>
4 changes: 2 additions & 2 deletions apps/documentation/src/app/app.component.spec.ts
Original file line number Diff line number Diff line change
@@ -5,14 +5,14 @@ import { NG_DOC_CONTEXT, NgDocRootComponent } from '@ng-doc/app';
import { NgDocNavbarComponent } from '@ng-doc/app/components/navbar';
import { NgDocSidebarComponent } from '@ng-doc/app/components/sidebar';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { provideHttpClient } from '@angular/common/http';

describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [RouterModule.forRoot([]), NoopAnimationsModule, NgDocNavbarComponent, NgDocSidebarComponent, NgDocRootComponent],
declarations: [AppComponent],
providers: [{ provide: NG_DOC_CONTEXT, useValue: { navigation: [] } }, HttpClientModule],
providers: [{ provide: NG_DOC_CONTEXT, useValue: { navigation: [] } }, provideHttpClient()],
}).compileComponents();
});

6 changes: 3 additions & 3 deletions apps/documentation/src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -27,10 +27,11 @@ import {
import { MockDataLayerService } from './mock/mock-data-layer.service';
import { MockPatientService } from './mock/mock-patient.service';
import { NgDocIconComponent, NgDocButtonIconComponent } from '@ng-doc/ui-kit';
import { HttpClientModule } from '@angular/common/http';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

@NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
@@ -39,7 +40,6 @@ import { HttpClientModule } from '@angular/common/http';
NgDocSidebarComponent,
NgDocIconComponent,
NgDocButtonIconComponent,
HttpClientModule,
RouterModule.forRoot(
[
...NG_DOC_ROUTING,
@@ -68,7 +68,7 @@ import { HttpClientModule } from '@angular/common/http';
withSummaryServices(ScatterDataPointSummaryService)
),
{ provide: PatientService, useClass: MockPatientService },
provideHttpClient(withInterceptorsFromDi()),
],
bootstrap: [AppComponent],
})
export class AppModule {}
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# {{ NgDocPage.title }}
---
keyword: "ChartLayout"
---

## Overview

Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@ import { ChartLayoutDemoComponent } from './demo/chart-layout-demo.component';

const ChartLayout: NgDocPage = {
title: 'Chart Layout',
keyword: 'ChartLayout',
category: ComponentsCategory,
mdFile: './index.md',
imports: [],
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# {{ NgDocPage.title }}
---
keyword: ChartLegend
---

## Overview

Original file line number Diff line number Diff line change
@@ -6,7 +6,6 @@ import { ChartTagsLegendDemoComponent } from './demos/tags-legend/chart-tags-leg
const ChartLegend: NgDocPage = {
title: `Chart Legend`,
mdFile: './index.md',
keyword: `ChartLegend`,
category: ComponentsCategory,
imports: [],
demos: { ChartLegendDemoComponent, ChartTagsLegendDemoComponent },
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# {{ NgDocPage.title }}
---
keyword: "ChartSummary"
---

## Overview

Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@ import { ChartSummaryDemoComponent } from './demo/chart-summary-demo.component';

const ChartSummary: NgDocPage = {
title: 'Chart Summary',
keyword: 'ChartSummary',
category: ComponentsCategory,
mdFile: './index.md',
imports: [],
4 changes: 3 additions & 1 deletion apps/documentation/src/app/pages/components/chart/index.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# {{ NgDocPage.title }}
---
keyword: "Chart"
---

## Overview

Original file line number Diff line number Diff line change
@@ -5,7 +5,6 @@ import { FloatingContentDemoComponent } from './demos/floating-content/floating-

const Chart: NgDocPage = {
title: 'Chart',
keyword: 'Chart',
category: ComponentsCategory,
mdFile: './index.md',
imports: [],
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# {{ NgDocPage.title }}
---
keyword: "DataLayerBrowser"
---

## Overview

Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@ import { DataLayerBrowserDemoComponent } from './demo/data-layer-browser-demo.co

const DataLayerBrowser: NgDocPage = {
title: 'Data Layer Browser',
keyword: 'DataLayerBrowser',
category: ComponentsCategory,
mdFile: './index.md',
imports: [],
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# {{ NgDocPage.title }}
---
keyword: "DataLayerList"
---

## Overview

Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@ import { DataLayerListDemoComponent } from './demo/data-layer-list-demo.componen

const DataLayerList: NgDocPage = {
title: 'Data Layer List',
keyword: 'DataLayerList',
category: ComponentsCategory,
mdFile: './index.md',
imports: [],
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# {{ NgDocPage.title }}
---
keyword: "DataLayerSelector"
---

## Overview

Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@ import { DataLayerSelectorDemoComponent } from './demo/data-layer-selector-demo.

const DataLayerSelector: NgDocPage = {
title: 'Data Layer Selector',
keyword: 'DataLayerSelector',
category: ComponentsCategory,
mdFile: './index.md',
imports: [],
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# {{ NgDocPage.title }}
---
keyword: "PatientBrowser"
---

## Overview

Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@ import { PatientBrowserDemoComponent } from './demo/patient-browser-demo.compone

const PatientBrowser: NgDocPage = {
title: 'Patient Browser',
keyword: 'PatientBrowser',
category: ComponentsCategory,
mdFile: './index.md',
imports: [],
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# {{ NgDocPage.title }}
---
keyword: "SummaryRangeSelector"
---

## Overview

Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@ import { SummaryRangeSelectorDemoComponent } from './demo/summary-range-selector

const SummaryRangeSelector: NgDocPage = {
title: 'Summary Range Selector',
keyword: 'SummaryRangeSelector',
category: ComponentsCategory,
mdFile: './index.md',
imports: [],
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# {{ NgDocPage.title }}
---
keyword: "TimelineRangeSelector"
---

## Overview

Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@ import { TimelineRangeSelectorDemoComponent } from './demo/timeline-range-select

const TimelineRangeSelector: NgDocPage = {
title: 'Timeline Range Selector',
keyword: 'TimelineRangeSelector',
category: ComponentsCategory,
mdFile: './index.md',
imports: [],
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
# {{ NgDocPage.title }}

Charts-on-FHIR provides an Angular service (`FhirDataService`) that wraps the [SMART Health IT FHIR Client](http://docs.smarthealthit.org/client-js/) and makes it easier to integrate with Angular applications. This service should be initialized during the Angular bootstrap process so it can handle the SMART launch authorization flow before the application starts up.

```ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
# {{ NgDocPage.title }}

Before installing Charts-on-FHIR, you will need to create an Angular project.

## Install Angular
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# {{ NgDocPage.title }}
---
keyword: "RetrievingData"
---

## Implement a DataLayerService

Original file line number Diff line number Diff line change
@@ -3,7 +3,6 @@ import GettingStartedCategory from '../ng-doc.category';

const RetrievingData: NgDocPage = {
title: 'Retrieving Data',
keyword: 'RetrievingData',
category: GettingStartedCategory,
mdFile: './index.md',
order: 3,
2 changes: 1 addition & 1 deletion libs/ngx-charts-on-fhir/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@elimuinformatics/ngx-charts-on-fhir",
"version": "4.0.1",
"version": "5.0.0",
"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",
8 changes: 4 additions & 4 deletions libs/ngx-charts-on-fhir/src/default.scss
Original file line number Diff line number Diff line change
@@ -7,16 +7,16 @@
@include mat.core();

// Define a theme.
$primary: mat.define-palette(mat.$indigo-palette);
$accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$primary: mat.m2-define-palette(mat.$m2-indigo-palette);
$accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);

$theme: mat.define-light-theme(
$theme: mat.m2-define-light-theme(
(
color: (
primary: $primary,
accent: $accent,
),
typography: mat.define-typography-config(),
typography: mat.m2-define-typography-config(),
density: -1,
)
);
Original file line number Diff line number Diff line change
@@ -2,11 +2,11 @@
@use "@angular/material" as mat;

@mixin theme($theme) {
$color-config: mat.get-color-config($theme);
$color-config: mat.m2-get-color-config($theme);
$primary-palette: map.get($color-config, "primary");

.layout-toolbar {
background-color: mat.get-color-from-palette($primary-palette, 500);
background-color: mat.m2-get-color-from-palette($primary-palette, 500);
}
.mat-badge-content {
background: none;
Original file line number Diff line number Diff line change
@@ -2,10 +2,10 @@
@use "@angular/material" as mat;

@mixin theme($theme) {
$color-config: mat.get-color-config($theme);
$color-config: mat.m2-get-color-config($theme);
$primary-palette: map.get($color-config, "primary");

.sidebar-close-button {
background-color: mat.get-color-from-palette($primary-palette, 500);
background-color: mat.m2-get-color-from-palette($primary-palette, 500);
}
}
20,421 changes: 12,903 additions & 7,518 deletions package-lock.json

Large diffs are not rendered by default.

56 changes: 29 additions & 27 deletions package.json
Original file line number Diff line number Diff line change
@@ -12,22 +12,22 @@
},
"private": true,
"dependencies": {
"@angular/animations": "17.3.9",
"@angular/cdk": "17.3.9",
"@angular/common": "17.3.9",
"@angular/compiler": "17.3.9",
"@angular/core": "17.3.9",
"@angular/forms": "17.3.9",
"@angular/material": "17.3.9",
"@angular/platform-browser": "17.3.9",
"@angular/platform-browser-dynamic": "17.3.9",
"@angular/router": "17.3.9",
"@angular/animations": "18.2.4",
"@angular/cdk": "18.2.3",
"@angular/common": "18.2.4",
"@angular/compiler": "18.2.4",
"@angular/core": "18.2.4",
"@angular/forms": "18.2.4",
"@angular/material": "18.2.3",
"@angular/platform-browser": "18.2.4",
"@angular/platform-browser-dynamic": "18.2.4",
"@angular/router": "18.2.4",
"@fontsource/roboto": "^4.5.8",
"@ng-doc/app": "17.6.13",
"@ng-doc/builder": "17.6.13",
"@ng-doc/core": "17.6.13",
"@ng-doc/ui-kit": "17.6.13",
"@nx/angular": "18.2.4",
"@ng-doc/app": "18.0.3",
"@ng-doc/builder": "18.0.3",
"@ng-doc/core": "18.0.3",
"@ng-doc/ui-kit": "18.0.3",
"@nx/angular": "19.7.2",
"backoff-rxjs": "^7.0.0",
"chart.js": "^4.3.3",
"chartjs-adapter-date-fns": "^3.0.0",
@@ -42,17 +42,19 @@
"rxjs": "~7.5.0",
"tinycolor2": "^1.5.2",
"tslib": "^2.6.2",
"zone.js": "0.14.7"
"zone.js": "0.14.10"
},
"devDependencies": {
"@angular-devkit/build-angular": "17.3.8",
"@angular-devkit/core": "17.3.8",
"@angular-devkit/schematics": "17.3.8",
"@angular/cli": "~17.3.0",
"@angular/compiler-cli": "17.3.9",
"@nx/eslint": "^19.2.3",
"@nx/workspace": "18.2.4",
"@schematics/angular": "17.3.8",
"@angular-devkit/build-angular": "18.2.4",
"@angular-devkit/core": "18.2.4",
"@angular-devkit/schematics": "18.2.4",
"@angular/cli": "~18.2.0",
"@angular/compiler-cli": "18.2.4",
"@nx/eslint": "19.7.2",
"@nx/workspace": "19.7.2",
"@schematics/angular": "18.2.4",
"@types/d3": "^7.4.3",
"@types/dompurify": "^3.0.5",
"@types/fhir": "^0.0.37",
"@types/jasmine": "~4.0.0",
"@types/lodash-es": "^4.17.6",
@@ -67,13 +69,13 @@
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"lint-staged": "^14.0.1",
"ng-packagr": "17.3.0",
"nx": "18.2.4",
"ng-packagr": "18.2.1",
"nx": "19.7.2",
"postcss": "^8.4.28",
"postcss-import": "~14.1.0",
"postcss-preset-env": "~7.5.0",
"postcss-url": "~10.1.3",
"prettier": "2.7.1",
"typescript": "5.4.5"
"typescript": "5.5.4"
}
}

0 comments on commit 19ed149

Please sign in to comment.