diff --git a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/content/content.component.html b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/content/content.component.html index a8ae2af7634806a9f930db749cc23fbba521d014..a6bc4a015c7426fa1426fea2a9d1340e67c4a94d 100644 --- a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/content/content.component.html +++ b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/content/content.component.html @@ -1 +1,8 @@ -<p>content works!</p> +<mat-tab-group class="height-full"> + <!-- Plots tab --> + <mat-tab label="Plots"> + <ng-template matTabContent> + <app-plots /> + </ng-template> + </mat-tab> +</mat-tab-group> diff --git a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/content/content.component.ts b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/content/content.component.ts index fabcd4f7d4fa70bf35f9b4dcf74c093cfbea5931..4f73685ba1c4a710e012061a0e6e389a2e172694 100644 --- a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/content/content.component.ts +++ b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/content/content.component.ts @@ -1,7 +1,10 @@ import {Component} from '@angular/core'; +import {MatTabsModule} from '@angular/material/tabs'; + +import {PlotsComponent} from '../plots/plots.component'; @Component({ - imports: [], + imports: [MatTabsModule, PlotsComponent], selector: 'app-content', standalone: true, styleUrl: './content.component.scss', diff --git a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plots/plots.component.ts b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plots/plots.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..c2dd71924f75680c41a96d9faf97b50280a71c01 --- /dev/null +++ b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plots/plots.component.ts @@ -0,0 +1,36 @@ +import {Component, computed} from '@angular/core'; +import {MatDivider} from '@angular/material/divider'; +import {MatExpansionModule} from '@angular/material/expansion'; +import {NshmpLibNgAppMetadataComponent} from '@ghsc/nshmp-lib-ng/nshmp'; +import { + NshmpLibNgPlotComponent, + NshmpLibNgPlotsContainerComponent, + NshmpPlot, +} from '@ghsc/nshmp-lib-ng/plot'; + +import {AppService} from '../../services/app.service'; + +@Component({ + imports: [ + NshmpLibNgPlotsContainerComponent, + NshmpLibNgPlotComponent, + NshmpLibNgAppMetadataComponent, + MatExpansionModule, + MatDivider, + ], + selector: 'app-plots', + standalone: true, + styleUrl: './plots.component.scss', + templateUrl: './plots.component.html', +}) +export class PlotsComponent { + plots = computed<NshmpPlot[]>(() => [ + this.service.plots().temperature, + this.service.plots().porosity, + this.service.plots().vs, + this.service.plots().vp, + this.service.plots().density, + ]); + + constructor(private service: AppService) {} +}