Updated the code to use the built-in fullscreen mode for chart layout…

… component

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

@@ -1,11 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { ChartDemoComponent } from './pages/components/chart/demos/chart/chart-demo.component';
 
-const routes: Routes = [{ path: 'demo', component: ChartDemoComponent }];
+const routes: Routes = [];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

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

@@ -44,15 +44,9 @@ import { HttpClientModule } from '@angular/common/http';
     NgDocButtonIconComponent,
     FhirChartLegendModule,
     HttpClientModule,
-
     RouterModule.forRoot(
       [
         ...NG_DOC_ROUTING,
-        // this page has a custom child route for the full-screen demo
-        {
-          path: 'components/chart-layout',
-          loadChildren: () => import('./pages/components/chart-layout/demo/chart-layout-demo.component').then((m) => m.ChartLayoutDemoComponent),
-        },
         {
           path: '**',
           redirectTo: 'introduction',
@@ -67,7 +61,6 @@ import { HttpClientModule } from '@angular/common/http';
     ),
   ],
   providers: [
-    HttpClientModule,
     provideNgDocContext(),
     provideNgDocApp(),
     provideSearchEngine(NgDocDefaultSearchEngine),

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

@@ -4,3 +4,12 @@
   align-items: center;
   justify-content: center;
 }
+
+.full-page-demo {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1000;
+}

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

@@ -1,7 +1,7 @@
-<full-page-demo>
-  <!-- NgDocHTMLSnippetStart(HTML) -->
+<!-- NgDocHTMLSnippetStart(HTML) -->
+<div class="full-page-demo">
   <fhir-chart-layout [toolbar]="['loading', 'patients', 'browser', 'options']">
     <div class="example-main-content">Main content</div>
   </fhir-chart-layout>
-  <!-- NgDocHTMLSnippetEnd(HTML) -->
-</full-page-demo>
+</div>
+<!-- NgDocHTMLSnippetEnd(HTML) -->

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

@@ -1,18 +1,19 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 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],
+  imports: [CommonModule, FhirChartLayoutModule, AppRoutingModule, MatIconModule, MatButtonModule],
   providers: [DataLayerManagerService],
 })
 export class ChartLayoutDemoComponent implements OnInit {

apps/documentation/src/app/pages/components/chart-layout/index.md

@@ -15,17 +15,7 @@ A full-page layout with a toolbar and collapsible panels on the left side of the
 
 ## Example
 
-{{ NgDocActions.demo("ChartLayoutDemoComponent", { expanded: true, defaultTab: "HTML" }) }}
-
-```ts
-// app.module.ts
-import { FhirChartLayoutModule } from "@elimuinformatics/ngx-charts-on-fhir";
-
-@NgModule({
-  imports: [/* ... */ FhirChartLayoutModule],
-})
-export class AppModule {}
-```
+{{ NgDocActions.demo("ChartLayoutDemoComponent", {fullscreenRoute: "demo"}) }}
 
 ## API Reference
 

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

@@ -9,6 +9,14 @@ const ChartLayout: NgDocPage = {
   mdFile: './index.md',
   imports: [],
   demos: { ChartLayoutDemoComponent },
+  route: {
+    children: [
+      {
+        path: 'demo',
+        component: ChartLayoutDemoComponent,
+      },
+    ],
+  },
 };
 
 export default ChartLayout;

apps/documentation/src/app/pages/components/chart-legend/index.md

@@ -18,16 +18,6 @@ Displays the symbol for each tag. Tags are used to apply the same style to multi
 
 {{ NgDocActions.demo("ChartTagsLegendDemoComponent", { expanded: true, defaultTab: "HTML" }) }}
 
-```ts
-// app.module.ts
-import { FhirChartModule } from "@elimuinformatics/ngx-charts-on-fhir";
-
-@NgModule({
-  imports: [/* ... */ FhirChartLegendModule],
-})
-export class AppModule {}
-```
-
 ## Configuring Tags
 
 The built-in Observation mappers (`SimpleObservationMapper` and `ComponentObservationMapper`) add "Home" and "Clinic" tags.

apps/documentation/src/app/pages/components/chart-summary/index.md

@@ -18,17 +18,6 @@ If the chart and summary are arranged vertically, `autoAlign` should be set to f
 
 {{ NgDocActions.demo("ChartSummaryDemoComponent", { expanded: true, defaultTab: "HTML" }) }}
 
-```ts
-// app.module.ts
-import { FhirChartModule, FhirChartSummaryModule } from "@elimuinformatics/ngx-charts-on-fhir";
-
-@NgModule({
-  imports: [/* ... */ FhirChartModule, FhirChartSummaryModule],
-  providers: [provideChartsOnFhir(withSummaryServices(ScatterDataPointSummaryService))],
-})
-export class AppModule {}
-```
-
 ## Summary Services
 
 This component uses the provided `SummaryService` implementations to generate the content for each summary card. It requires at least one `SummaryService` that is capable of summarizing each layer. If more than one service is capable of a summarizing a layer, it will use the one that comes first in the providers array. Charts-on-FHIR comes with a few built-in summary services. Applications can create additional services to customize the summary information or add support for other types of data.

apps/documentation/src/app/pages/components/chart/index.md

@@ -10,16 +10,6 @@ A dynamic chart that displays multiple Data Layers along a single time scale.
 
 {{ NgDocActions.demo("ChartDemoComponent", { expanded: true, defaultTab: "HTML" }) }}
 
-```ts
-// app.module.ts
-import { FhirChartModule } from "@elimuinformatics/ngx-charts-on-fhir";
-
-@NgModule({
-  imports: [/* ... */ FhirChartModule],
-})
-export class AppModule {}
-```
-
 ### Floating Content
 
 Content can be projected into a draggable floating panel on top of the chart. This can be used to display other Charts-on-FHIR components (like a `*ChartLegend`), or any other custom content.

apps/documentation/src/app/pages/components/data-layer-browser/index.md

@@ -8,16 +8,6 @@ A list of all data layers that have been retrieved and are available to add to t
 
 {{ NgDocActions.demo("DataLayerBrowserDemoComponent", { expanded: true, defaultTab: "HTML" }) }}
 
-```ts
-// app.module.ts
-import { DataLayerBrowserModule } from "@elimuinformatics/ngx-charts-on-fhir";
-
-@NgModule({
-  imports: [/* ... */ DataLayerBrowserModule],
-})
-export class AppModule {}
-```
-
 ## API Reference
 
 - `DataLayerBrowserComponent`

apps/documentation/src/app/pages/components/data-layer-list/index.md

@@ -8,16 +8,6 @@ A list of all data layers that have been added to the chart. The layers can be r
 
 {{ NgDocActions.demo("DataLayerListDemoComponent", { expanded: true, defaultTab: "HTML" }) }}
 
-```ts
-// app.module.ts
-import { DataLayerListModule } from "@elimuinformatics/ngx-charts-on-fhir";
-
-@NgModule({
-  imports: [/* ... */ DataLayerListModule],
-})
-export class AppModule {}
-```
-
 ## API Reference
 
 - `DataLayerListComponent`

apps/documentation/src/app/pages/components/data-layer-selector/index.md

@@ -8,16 +8,6 @@ A dropdown menu for switching between pre-defined sets of layers.
 
 {{ NgDocActions.demo("DataLayerSelectorDemoComponent", { expanded: true, defaultTab: "HTML" }) }}
 
-```ts
-// app.module.ts
-import { FhirChartModule, DataLayerSelectorModule } from "@elimuinformatics/ngx-charts-on-fhir";
-
-@NgModule({
-  imports: [/* ... */ FhirChartModule, DataLayerSelectorModule],
-})
-export class AppModule {}
-```
-
 ## API Reference
 
 - `DataLayerSelectorComponent`

apps/documentation/src/app/pages/components/patient-browser/index.md

@@ -8,16 +8,6 @@ A list of all patients that are available on the FHIR server. This can be used d
 
 {{ NgDocActions.demo("PatientBrowserDemoComponent", { expanded: true, defaultTab: "HTML" }) }}
 
-```ts
-// app.module.ts
-import { PatientBrowserModule } from "@elimuinformatics/ngx-charts-on-fhir";
-
-@NgModule({
-  imports: [/* ... */ PatientBrowserModule],
-})
-export class AppModule {}
-```
-
 ## API Reference
 
 - `PatientBrowserComponent`

apps/documentation/src/app/pages/components/summary-range-selector/index.md

@@ -8,20 +8,6 @@ A group of buttons for changing the timeframe used for statistical calculations
 
 {{ NgDocActions.demo("SummaryRangeSelectorDemoComponent", { expanded: true, defaultTab: "HTML" }) }}
 
-```ts
-// app.module.ts
-import {
-  FhirChartModule,
-  FhirChartSummaryModule,
-  SummaryRangeSelectorModule,
-} from "@elimuinformatics/ngx-charts-on-fhir";
-
-@NgModule({
-  imports: [/* ... */ FhirChartModule, FhirChartSummaryModule, SummaryRangeSelectorModule],
-})
-export class AppModule {}
-```
-
 ## API Reference
 
 - `SummaryRangeSelectorComponent`

apps/documentation/src/app/pages/components/timeline-range-selector/index.md

@@ -8,16 +8,6 @@ A group of buttons and date selectors for adjusting the zoom range of the chart.
 
 {{ NgDocActions.demo("TimelineRangeSelectorDemoComponent", { expanded: true, defaultTab: "HTML" }) }}
 
-```ts
-// app.module.ts
-import { FhirChartModule, TimelineRangeSelectorModule } from "@elimuinformatics/ngx-charts-on-fhir";
-
-@NgModule({
-  imports: [/* ... */ FhirChartModule, TimelineRangeSelectorModule],
-})
-export class AppModule {}
-```
-
 ## API Reference
 
 - `TimelineRangeSelectorComponent`