Control Chart <smart-control-chart>

1 NPM Install

The Angular modules are in the smart-industrial package:

npm install smart-industrial

2 Register styles

The stylesheets go into the styles of the build options in angular.json, next to the existing entries:

"styles": [
	"node_modules/smart-industrial/source/styles/smart.default.css",
	"node_modules/smart-industrial/source/styles/smart.industrial-elements.css",
	"node_modules/smart-industrial/source/styles/smart.industrial.css"
]

smart.default.css is the base theme and smart.industrial-elements.css styles the Industrial components. smart.industrial.css is the Industrial theme, which applies to components with theme="industrial". For theme="industrial-dark", the package also has smart.industrial-dark.css.

3 Import the Angular module

The application imports ControlChartModule from the component's entry point. ControlChartComponent reaches a template through this module. A standalone component that lists ControlChartComponent itself in its imports does not compile (NG2011).

import { ControlChartModule } from 'smart-industrial/angular/controlchart';

Each component has an entry point of its own, and an application imports from those. The entry point with all the components, smart-industrial/angular, puts every component into the bundle. In a production build of the Faceplate sample, the main bundle is 274 kB with FaceplateModule and 8.9 MB with SmartIndustrialModule.

4 Root component (standalone)

The sample has three files: the component, its template in step 5, and src/main.ts. They replace the files of the same name that the CLI generated.

src/app/app.ts

import { Component } from '@angular/core';
import { ControlChartModule } from 'smart-industrial/angular/controlchart';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ControlChartModule],
  templateUrl: './app.html'
})
export class App {
  // Raised when the set of offending points changes, after new data, new limits
  // or a different rule set, and not on every redraw.
  onViolation(event: CustomEvent): void {
    const { violations, count } = event.detail;
    console.log('violation', violations, count);
  }
}

src/main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app/app';

bootstrapApplication(App).catch((err) => console.error(err));

A project from Angular CLI 20 or later already has these files. Its src/main.ts also passes an appConfig, which can stay. An older project names its root component AppComponent, in app.component.ts, and the sample does not use it.

5 Template (standalone)

src/app/app.html holds the markup. Strings are plain attributes. Numbers and booleans are property bindings, such as [precisionDigits]="3", so that they reach the component with their type and strictTemplates checks them. Each event of the component is an output named after it, such as (onViolation), and $event is the CustomEvent.

<smart-control-chart
  theme="industrial"
  type="xbar-r"
  label="Shaft diameter"
  unit="mm"
  [precisionDigits]="3"
  (onViolation)="onViolation($event)"
></smart-control-chart>

6 NgModule application

An NgModule application uses the same package and styles. Its module lists ControlChartModule in imports and declares the component that uses the template from step 5. src/main.ts starts the module with bootstrapModule. This works on Angular 13 and later. From Angular 19, a component declared in a module needs standalone: false.