charts on fhir update to angular 17

.prettierignore

@@ -6,3 +6,5 @@ node_modules
 .ng-doc
 **/synthea-utils/**/*.json
 **/mock-fhir-server/**/*.json
+
+/.nx/cache

apps/cardio-patient/project.json

@@ -2,13 +2,13 @@
   "name": "cardio-patient",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
+  "sourceRoot": "apps/cardio-patient/src",
+  "prefix": "app",
   "generators": {
     "@schematics/angular:component": {
       "style": "scss"
     }
   },
-  "sourceRoot": "apps/cardio-patient/src",
-  "prefix": "app",
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:browser",
@@ -76,13 +76,13 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "cardio-patient:build:production"
+          "buildTarget": "cardio-patient:build:production"
         },
         "development": {
-          "browserTarget": "cardio-patient:build:development"
+          "buildTarget": "cardio-patient:build:development"
         },
         "logica-open": {
-          "browserTarget": "cardio-patient:build:development,logica-open"
+          "buildTarget": "cardio-patient:build:development,logica-open"
         }
       },
       "defaultConfiguration": "logica-open"
@@ -96,7 +96,7 @@
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "cardio-patient:build"
+        "buildTarget": "cardio-patient:build"
       }
     },
     "test": {

apps/cardio/project.json

@@ -2,13 +2,13 @@
   "name": "cardio",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
+  "sourceRoot": "apps/cardio/src",
+  "prefix": "app",
   "generators": {
     "@schematics/angular:component": {
       "style": "scss"
     }
   },
-  "sourceRoot": "apps/cardio/src",
-  "prefix": "app",
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:browser",
@@ -76,13 +76,13 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "cardio:build:production"
+          "buildTarget": "cardio:build:production"
         },
         "development": {
-          "browserTarget": "cardio:build:development"
+          "buildTarget": "cardio:build:development"
         },
         "logica-open": {
-          "browserTarget": "cardio:build:development,logica-open"
+          "buildTarget": "cardio:build:development,logica-open"
         }
       },
       "defaultConfiguration": "logica-open"
@@ -96,7 +96,7 @@
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "cardio:build"
+        "buildTarget": "cardio:build"
       }
     },
     "test": {

apps/documentation/project.json

@@ -2,13 +2,13 @@
   "name": "documentation",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
+  "sourceRoot": "apps/documentation/src",
+  "prefix": "app",
   "generators": {
     "@schematics/angular:component": {
       "style": "scss"
     }
   },
-  "sourceRoot": "apps/documentation/src",
-  "prefix": "app",
   "targets": {
     "build": {
       "executor": "@ng-doc/builder:browser",
@@ -84,7 +84,7 @@
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "documentation:build"
+        "buildTarget": "documentation:build"
       }
     },
     "test": {

apps/documentation/src/app/app-routing.module.ts

@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { ChartLayoutDemoComponent } from './pages/components/chart-layout/demo/chart-layout-demo.component';
 
-const routes: Routes = [];
+const routes: Routes = [{ path: 'demo', component: ChartLayoutDemoComponent }];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

apps/documentation/src/app/app.component.spec.ts

@@ -1,15 +1,15 @@
 import { TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterTestingModule } from '@angular/router/testing';
+import { RouterModule } from '@angular/router';
+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 { NgDocModule, NG_DOC_CONTEXT } from '@ng-doc/app';
-import { NgDocSidebarModule } from '@ng-doc/app/components/sidebar';
-import { NgDocNavbarModule } from '@ng-doc/app/components/navbar';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RouterTestingModule, NoopAnimationsModule, NgDocNavbarModule, NgDocSidebarModule, NgDocModule.forRoot()],
+      imports: [RouterModule.forRoot([]), NoopAnimationsModule, NgDocNavbarComponent, NgDocSidebarComponent, NgDocRootComponent],
       declarations: [AppComponent],
       providers: [{ provide: NG_DOC_CONTEXT, useValue: { navigation: [] } }],
     }).compileComponents();

apps/documentation/src/app/app.module.ts

@@ -1,8 +1,17 @@
-import { NgDocDefaultSearchEngine, NgDocModule, provideSearchEngine } from '@ng-doc/app';
-import { NG_DOC_ROUTING, NgDocGeneratedModule } from '@ng-doc/generated';
+import {
+  NG_DOC_DEFAULT_PAGE_PROCESSORS,
+  NG_DOC_DEFAULT_PAGE_SKELETON,
+  NgDocDefaultSearchEngine,
+  providePageProcessor,
+  NgDocRootComponent,
+  provideNgDocApp,
+  providePageSkeleton,
+  provideSearchEngine,
+} from '@ng-doc/app';
+import { NG_DOC_ROUTING, provideNgDocContext } from '@ng-doc/generated';
 import { RouterModule } from '@angular/router';
-import { NgDocSidebarModule } from '@ng-doc/app/components/sidebar';
-import { NgDocNavbarModule } from '@ng-doc/app/components/navbar';
+import { NgDocSidebarComponent } from '@ng-doc/app/components/sidebar';
+import { NgDocNavbarComponent } from '@ng-doc/app/components/navbar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -26,8 +35,9 @@ import { NgDocIconComponent, NgDocButtonIconComponent } from '@ng-doc/ui-kit';
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
-    NgDocNavbarModule,
-    NgDocSidebarModule,
+    NgDocRootComponent,
+    NgDocNavbarComponent,
+    NgDocSidebarComponent,
     NgDocIconComponent,
     NgDocButtonIconComponent,
     RouterModule.forRoot(
@@ -36,7 +46,7 @@ import { NgDocIconComponent, NgDocButtonIconComponent } from '@ng-doc/ui-kit';
         // this page has a custom child route for the full-screen demo
         {
           path: 'components/chart-layout',
-          loadChildren: () => import('./pages/components/chart-layout/ng-doc.module').then((m) => m.FhirChartLayoutDemoModule),
+          loadChildren: () => import('./pages/components/chart-layout/demo/chart-layout-demo.component').then((m) => m.ChartLayoutDemoComponent),
         },
         {
           path: '**',
@@ -50,11 +60,13 @@ import { NgDocIconComponent, NgDocButtonIconComponent } from '@ng-doc/ui-kit';
         scrollOffset: [0, 70],
       }
     ),
-    NgDocModule.forRoot(),
-    NgDocGeneratedModule.forRoot(),
   ],
   providers: [
+    provideNgDocContext(),
+    provideNgDocApp(),
     provideSearchEngine(NgDocDefaultSearchEngine),
+    providePageSkeleton(NG_DOC_DEFAULT_PAGE_SKELETON),
+    providePageProcessor(NG_DOC_DEFAULT_PAGE_PROCESSORS),
     provideChartsOnFhir(
       withColors('#e36667', '#377eb8', '#4daf4a', '#984ea3'),
       withDataLayerServices(MockDataLayerService),

apps/documentation/src/app/pages/components/chart-layout/demo/chart-layout-demo.component.ts

@@ -1,10 +1,20 @@
+import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { DataLayerManagerService } from '@elimuinformatics/ngx-charts-on-fhir';
+import { ROUTES, RouterModule } from '@angular/router';
+import {
+  DataLayerManagerService,
+  FhirChartLayoutModule,
+} from '@elimuinformatics/ngx-charts-on-fhir';
+import { AppRoutingModule } from 'apps/documentation/src/app/app-routing.module';
+import { FullPageDemoComponent } from 'apps/documentation/src/app/full-page-demo/full-page-demo.component';
 
 @Component({
   selector: 'example-chart-layout-demo',
   templateUrl: './chart-layout-demo.component.html',
   styleUrls: ['./chart-layout-demo.component.css'],
+  standalone: true,
+  imports: [CommonModule, FhirChartLayoutModule, FullPageDemoComponent, AppRoutingModule],
+  providers: [DataLayerManagerService],
 })
 export class ChartLayoutDemoComponent implements OnInit {
   constructor(private layerManager: DataLayerManagerService) {}

apps/documentation/src/app/pages/components/chart-layout/ng-doc.page.ts

@@ -1,14 +1,13 @@
 import { NgDocPage } from '@ng-doc/core';
 import ComponentsCategory from '../ng-doc.category';
-import { FhirChartLayoutDemoModule } from './ng-doc.module';
 import { ChartLayoutDemoComponent } from './demo/chart-layout-demo.component';
 
 const ChartLayout: NgDocPage = {
   title: 'Chart Layout',
   keyword: 'ChartLayout',
   category: ComponentsCategory,
   mdFile: './index.md',
-  imports: [FhirChartLayoutDemoModule],
+  imports: [],
   demos: { ChartLayoutDemoComponent },
 };
 

apps/documentation/src/app/pages/components/chart-legend/demos/legend/chart-legend-demo.component.ts

@@ -1,9 +1,17 @@
+import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { DataLayerManagerService } from '@elimuinformatics/ngx-charts-on-fhir';
+import {
+  DataLayerManagerService,
+  FhirChartLegendModule,
+  FhirChartTagsService,
+} from '@elimuinformatics/ngx-charts-on-fhir';
 
 @Component({
   selector: 'example-chart-legend-demo',
   templateUrl: './chart-legend-demo.component.html',
+  standalone: true,
+  imports: [CommonModule, FhirChartLegendModule],
+  providers: [DataLayerManagerService, FhirChartTagsService],
 })
 export class ChartLegendDemoComponent implements OnInit {
   constructor(private layerManager: DataLayerManagerService) {}

apps/documentation/src/app/pages/components/chart-legend/demos/tags-legend/chart-tags-legend-demo.component.ts

@@ -1,9 +1,17 @@
+import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { DataLayerManagerService } from '@elimuinformatics/ngx-charts-on-fhir';
+import {
+  DataLayerManagerService,
+  FhirChartLegendModule,
+  FhirChartTagsService,
+} from '@elimuinformatics/ngx-charts-on-fhir';
 
 @Component({
   selector: 'example-chart-tags-legend-demo',
   templateUrl: './chart-tags-legend-demo.component.html',
+  standalone: true,
+  imports: [CommonModule, FhirChartLegendModule],
+  providers: [DataLayerManagerService, FhirChartTagsService],
 })
 export class ChartTagsLegendDemoComponent implements OnInit {
   constructor(private layerManager: DataLayerManagerService) {}

apps/documentation/src/app/pages/components/chart-legend/ng-doc.page.ts

@@ -1,6 +1,5 @@
 import { NgDocPage } from '@ng-doc/core';
 import ComponentsCategory from '../ng-doc.category';
-import { ChartLegendDemoModule } from './ng-doc.module';
 import { ChartLegendDemoComponent } from './demos/legend/chart-legend-demo.component';
 import { ChartTagsLegendDemoComponent } from './demos/tags-legend/chart-tags-legend-demo.component';
 
@@ -9,7 +8,7 @@ const ChartLegend: NgDocPage = {
   mdFile: './index.md',
   keyword: `ChartLegend`,
   category: ComponentsCategory,
-  imports: [ChartLegendDemoModule],
+  imports: [],
   demos: { ChartLegendDemoComponent, ChartTagsLegendDemoComponent },
 };
 

apps/documentation/src/app/pages/components/chart-summary/demo/chart-summary-demo.component.ts

@@ -1,10 +1,19 @@
+import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { DataLayerManagerService } from '@elimuinformatics/ngx-charts-on-fhir';
+import {
+  DataLayerManagerService,
+  FhirChartConfigurationService,
+  FhirChartModule,
+  FhirChartSummaryModule,
+} from '@elimuinformatics/ngx-charts-on-fhir';
 
 @Component({
   selector: 'example-chart-summary-demo',
   templateUrl: './chart-summary-demo.component.html',
   styleUrls: ['./chart-summary-demo.css'],
+  standalone: true,
+  imports: [CommonModule, FhirChartModule, FhirChartSummaryModule],
+  providers: [DataLayerManagerService, FhirChartConfigurationService],
 })
 export class ChartSummaryDemoComponent implements OnInit {
   constructor(private layerManager: DataLayerManagerService) {}

apps/documentation/src/app/pages/components/chart-summary/ng-doc.page.ts

@@ -1,14 +1,13 @@
 import { NgDocPage } from '@ng-doc/core';
 import ComponentsCategory from '../ng-doc.category';
-import { ChartSummaryDemoModule } from './ng-doc.module';
 import { ChartSummaryDemoComponent } from './demo/chart-summary-demo.component';
 
 const ChartSummary: NgDocPage = {
   title: 'Chart Summary',
   keyword: 'ChartSummary',
   category: ComponentsCategory,
   mdFile: './index.md',
-  imports: [ChartSummaryDemoModule],
+  imports: [],
   demos: { ChartSummaryDemoComponent },
 };