Test and measurement

Octave Bands `<smart-octave-bands>`

OctaveBands displays the level in each octave or third-octave band as a bar, with the frequency-weighted overall level and a limit curve the bands are checked against: the display of a sound level meter and of a vibration survey.

Getting Started with React OctaveBands Component

The Smart.Industrial React components need React 18 or later, because they render through react-dom/client. The steps use Vite with its react-ts template.

The complete demo in React is on the demo page, file by file.

1 Create a Vite + React + TypeScript app

npm create vite@latest my-smart-app -- --template react-ts

```
cd my-smart-app
```
then
```
npm install
```

2 Install Smart.Industrial

npm install smart-industrial

3 Import styles and render the component

The sample replaces the content of src/App.tsx. It imports the stylesheets and the OctaveBands component, sets the properties the demo sets and handles the levelsChange event. It compiles under the template's strict TypeScript settings.

import 'smart-industrial/source/styles/smart.default.css';
import 'smart-industrial/source/styles/smart.industrial-elements.css';
import 'smart-industrial/source/styles/smart.industrial.css';
import { OctaveBands } from 'smart-industrial/react/octavebands';

function App() {
  // Raised after a pushed block has been analysed.
  const handleLevelsChange = (event: CustomEvent) => {
    const { levels, overall, invalidSamples } = event.detail;
    console.log('levelsChange', levels, overall, invalidSamples);
  };

  return (
    <OctaveBands
      theme="industrial"
      label="Compressor room, position 3"
      resolution="third"
      sampleRate={48000}
      weighting="A"
      reference={0.00002}
      unit="Pa"
      frequencyMin={25}
      frequencyMax={16000}
      levelMin={20}
      levelMax={110}
      onLevelsChange={handleLevelsChange}
    />
  );
}

export default App;

The template's src/main.tsx renders App and needs no change.

Each component has an entry point of its own, and the sample imports from it. The entry point with all the components, smart-industrial/react, puts every component into the bundle, about 2.5 MB minified. Built with Vite, the Faceplate sample has 390 kB of JavaScript, React included, with smart-industrial/react/faceplate.

4 Run the dev server

npm run dev

Vite prints the URL of the application, usually http://localhost:5173/.

TypeScript Support

The types ship with smart-industrial. A type-only import of the component and its props uses import type, which the template's verbatimModuleSyntax requires:

import type { OctaveBands, OctaveBandsProps } from 'smart-industrial/react/octavebands';

Each on* callback receives a CustomEvent whose detail is typed for that event, so the editor lists its fields. A handler typed (event: CustomEvent) => void, as in the sample, accepts it as well.

The keyboard interaction, roles and announcements of the component are on its accessibility page; they are the same in React.