Plot Library

Home - NSHMP Angular Library User Guide

Common components and interfaces for creating and dealing with Plotly using angular-plotly.

Contents

• Components
• Code Scaffolding
• Running Unit Tests
• Further Help

Example

Adding plots to an application.

<!-- Plots container -->
<nshmp-lib-ng-plots-container>
  <!-- Angular material accordion -->
  <mat-accordion multi>
    <!-- Angular material expansion panel with plot -->
    <mat-expansion-panel expanded>
      <mat-expansion-panel-header>
        <mat-panel-title>Plot</mat-panel-title>
      </mat-expansion-panel-header>

      <mat-divider></mat-divider>

      <!-- Plotly plot -->
      <nshmp-lib-ng-plot [plot]="plotData"> </nshmp-lib-ng-plot>
    </mat-expansion-panel>
  </mat-accordion>
</nshmp-lib-ng-plots-container>

Components

Component Module

import {NshmpPlotModule} from '@ghsc/nshmp-lib-ng/plot';

@NgModule({
  declarations: [],
  imports: [NshmpPlotModule],
})
export class MyApplicationModule {}

Plot

Wrapper around a Plotly plot using angular-plotly.

See PlotComponent for input parameters.

To use import NshmpPlotModule.

<nshmp-lib-ng-plot></nshmp-lib-ng-plot>

Plot Settings

Form fields for changing the plot settings.

See PlotSettingsComponent for input settings.

To use import NshmpPlotModule.

<nshmp-lib-ng-plot-settings></nshmp-lib-ng-plot-settings>

Plot Axis Settings

Form fields for changing plot axis settings.

See PlotSettingsAxisComponent for input parameters.

To use import NshmpPlotModule.

<nshmp-lib-ng-plot-settings-axis></nshmp-lib-ng-plot-settings-axis>

Plots Container

Container for an application's plots.

To use import NshmpPlotModule.

<nshmp-lib-ng-plots-container></nshmp-lib-ng-plots-container>

Reset Plot Settings

Button to reset plot settings.

See ResetPlotSettingsComponent for input parameters.

To use import NshmpPlotModule.

<nshmp-lib-ng-plot-reset-plot-settings></nshmp-lib-ng-plot-reset-plot-settings>

Code scaffolding

Run npm run ng -- generate component component-name --project=nshmp-lib-ng-plot to generate a new component.

Can also use npm run ng -- generate directive|pipe|service|class|guard|interface|enum|module --project=nshmp-lib-ng-plot.

Note: Don't forget to add --project=nshmp-lib-ng-plot or else it will be added to the default project in the angular.json file.

Running unit tests

Run npm run test -- projects/nshmp-lib-ng/plot to execute the unit tests.

Further help

To get more help on the Angular CLI use npm run ng -- help or go check out the Angular CLI Overview and Command Reference page.