RT-1530: (charts-on-fhir) Update to Angular 18 (#257)

* RT-1530: Updated charts-on-fhir to use Angular 18 * RT-1530: Updated test case * RT-1530: Updated version name
elimuinformatics · Sep 13, 2024 · 19ed149 · 19ed149
1 parent 317313b
commit 19ed149
Show file tree

Hide file tree

Showing 35 changed files with 12,985 additions and 7,589 deletions.
diff --git a/.gitignore b/.gitignore
@@ -37,6 +37,7 @@ yarn-error.log
 testem.log
 /typings
 /.nx/cache
+.nx/workspace-data
 
 # System files
 .DS_Store

diff --git a/.prettierignore b/.prettierignore
@@ -7,4 +7,5 @@ node_modules
 **/synthea-utils/**/*.json
 **/mock-fhir-server/**/*.json
 
-/.nx/cache
+/.nx/cache
+/.nx/workspace-data
diff --git a/apps/documentation/src/app/app.component.html b/apps/documentation/src/app/app.component.html
@@ -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>

diff --git a/apps/documentation/src/app/app.component.spec.ts b/apps/documentation/src/app/app.component.spec.ts
@@ -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();
   });
 

diff --git a/apps/documentation/src/app/app.module.ts b/apps/documentation/src/app/app.module.ts
@@ -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 {}
diff --git a/apps/documentation/src/app/pages/components/chart-layout/index.md b/apps/documentation/src/app/pages/components/chart-layout/index.md
@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "ChartLayout"
+---
 
 ## Overview
 

diff --git a/apps/documentation/src/app/pages/components/chart-layout/ng-doc.page.ts b/apps/documentation/src/app/pages/components/chart-layout/ng-doc.page.ts
@@ -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: [],

diff --git a/apps/documentation/src/app/pages/components/chart-legend/index.md b/apps/documentation/src/app/pages/components/chart-legend/index.md
@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: ChartLegend
+---
 
 ## Overview
 

diff --git a/apps/documentation/src/app/pages/components/chart-legend/ng-doc.page.ts b/apps/documentation/src/app/pages/components/chart-legend/ng-doc.page.ts
@@ -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 },

diff --git a/apps/documentation/src/app/pages/components/chart-summary/index.md b/apps/documentation/src/app/pages/components/chart-summary/index.md
@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "ChartSummary"
+---
 
 ## Overview
 

diff --git a/apps/documentation/src/app/pages/components/chart-summary/ng-doc.page.ts b/apps/documentation/src/app/pages/components/chart-summary/ng-doc.page.ts
@@ -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: [],

diff --git a/apps/documentation/src/app/pages/components/chart/index.md b/apps/documentation/src/app/pages/components/chart/index.md
@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "Chart"
+---
 
 ## Overview
 

diff --git a/apps/documentation/src/app/pages/components/chart/ng-doc.page.ts b/apps/documentation/src/app/pages/components/chart/ng-doc.page.ts
@@ -5,7 +5,6 @@ import { FloatingContentDemoComponent } from './demos/floating-content/floating-
 
 const Chart: NgDocPage = {
   title: 'Chart',
-  keyword: 'Chart',
   category: ComponentsCategory,
   mdFile: './index.md',
   imports: [],

diff --git a/apps/documentation/src/app/pages/components/data-layer-browser/index.md b/apps/documentation/src/app/pages/components/data-layer-browser/index.md
@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "DataLayerBrowser"
+---
 
 ## Overview
 

diff --git a/apps/documentation/src/app/pages/components/data-layer-browser/ng-doc.page.ts b/apps/documentation/src/app/pages/components/data-layer-browser/ng-doc.page.ts
@@ -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: [],

diff --git a/apps/documentation/src/app/pages/components/data-layer-list/index.md b/apps/documentation/src/app/pages/components/data-layer-list/index.md
@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "DataLayerList"
+---
 
 ## Overview
 

diff --git a/apps/documentation/src/app/pages/components/data-layer-list/ng-doc.page.ts b/apps/documentation/src/app/pages/components/data-layer-list/ng-doc.page.ts
@@ -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: [],

diff --git a/apps/documentation/src/app/pages/components/data-layer-selector/index.md b/apps/documentation/src/app/pages/components/data-layer-selector/index.md
@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "DataLayerSelector"
+---
 
 ## Overview
 

diff --git a/apps/documentation/src/app/pages/components/data-layer-selector/ng-doc.page.ts b/apps/documentation/src/app/pages/components/data-layer-selector/ng-doc.page.ts
@@ -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: [],

diff --git a/apps/documentation/src/app/pages/components/patient-browser/index.md b/apps/documentation/src/app/pages/components/patient-browser/index.md
@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "PatientBrowser"
+---
 
 ## Overview
 

diff --git a/apps/documentation/src/app/pages/components/patient-browser/ng-doc.page.ts b/apps/documentation/src/app/pages/components/patient-browser/ng-doc.page.ts
@@ -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: [],

diff --git a/apps/documentation/src/app/pages/components/summary-range-selector/index.md b/apps/documentation/src/app/pages/components/summary-range-selector/index.md
@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "SummaryRangeSelector"
+---
 
 ## Overview
 

diff --git a/apps/documentation/src/app/pages/components/summary-range-selector/ng-doc.page.ts b/apps/documentation/src/app/pages/components/summary-range-selector/ng-doc.page.ts
@@ -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: [],

diff --git a/apps/documentation/src/app/pages/components/timeline-range-selector/index.md b/apps/documentation/src/app/pages/components/timeline-range-selector/index.md
@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "TimelineRangeSelector"
+---
 
 ## Overview
 

diff --git a/apps/documentation/src/app/pages/components/timeline-range-selector/ng-doc.page.ts b/apps/documentation/src/app/pages/components/timeline-range-selector/ng-doc.page.ts
@@ -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: [],

diff --git a/...ocumentation/src/app/pages/getting-started/connecting-to-a-fhir-server/index.md b/...ocumentation/src/app/pages/getting-started/connecting-to-a-fhir-server/index.md
@@ -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

diff --git a/apps/documentation/src/app/pages/getting-started/installation/index.md b/apps/documentation/src/app/pages/getting-started/installation/index.md
@@ -1,5 +1,3 @@
-# {{ NgDocPage.title }}
-
 Before installing Charts-on-FHIR, you will need to create an Angular project.
 
 ## Install Angular

diff --git a/apps/documentation/src/app/pages/getting-started/retrieving-data/index.md b/apps/documentation/src/app/pages/getting-started/retrieving-data/index.md
@@ -1,4 +1,6 @@
-# {{ NgDocPage.title }}
+---
+keyword: "RetrievingData"
+---
 
 ## Implement a DataLayerService
 

diff --git a/apps/documentation/src/app/pages/getting-started/retrieving-data/ng-doc.page.ts b/apps/documentation/src/app/pages/getting-started/retrieving-data/ng-doc.page.ts
@@ -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,

diff --git a/libs/ngx-charts-on-fhir/package.json b/libs/ngx-charts-on-fhir/package.json
@@ -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",

diff --git a/libs/ngx-charts-on-fhir/src/default.scss b/libs/ngx-charts-on-fhir/src/default.scss
@@ -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,
   )
 );

diff --git a/libs/ngx-charts-on-fhir/src/lib/data-layer-toolbar/_data-layer-toolbar-theme.scss b/libs/ngx-charts-on-fhir/src/lib/data-layer-toolbar/_data-layer-toolbar-theme.scss
@@ -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;

diff --git a/libs/ngx-charts-on-fhir/src/lib/fhir-chart-layout/_fhir-chart-layout-theme.scss b/libs/ngx-charts-on-fhir/src/lib/fhir-chart-layout/_fhir-chart-layout-theme.scss
@@ -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);
   }
 }