Default Gray Amethyst

Linear Gauge

<mo-linear-gauge> | MOLinearGauge
Since 2.9 stable

The linear gauge component is used to display a single value within a range.

<mo-linear-gauge title="Linear gauge (Meter)" subtitle="Chart.js variant" horizontal value="47.9"></mo-linear-gauge>

import { MOLinearGauge } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOLinearGauge title="Linear gauge (Meter)" subtitle="Chart.js variant" value={47.9} horizontal></MOLinearGauge>
);

Examples

Thresholds

Use the thresholds attribute to define an object of minimum and maximum alert and warning thresholds that will be shown on the gauge and indicate the status in the bar colors. 

<mo-linear-gauge
  title="Cavity level"
  subtitle="54.6% a day ago"
  horizontal
  value="86.7"
  showLabels
  unit="%"
  id="threshold-example"
></mo-linear-gauge>

<script>
  const chart = document.querySelector('#threshold-example');
  const thresholds = {
    maxWarning: 65,
    maxAlert: 75
  };
  chart.thresholds = thresholds;
</script>

import { MOLinearGauge } from '@metsooutotec/modes-web-components/dist/react';

const thresholds = {
  maxWarning: 65,
  maxAlert: 75
};

const App = () => (
  <MOLinearGauge
    title="Cavity level"
    subtitle="54.6% a day ago"
    horizontal
    value={86.7}
    unit="%"
    thresholds={thresholds}
  ></MOLinearGauge>
);

Inline

Sometimes you may want to render the linear gauge e.g., inside a table, in that case use the inline attribute to trim out the current value and ensure it fits vertically.

Tag Status Current value BF234239 86.7 BF234239 54.2 BF234239 38.7 
<mo-table>
  <mo-table-head>
    <mo-table-head-cell>Tag</mo-table-head-cell>
    <mo-table-head-cell style="flex-basis: 30%;">Status</mo-table-head-cell>
    <mo-table-head-cell>Current value</mo-table-head-cell>
  </mo-table-head>
  <mo-table-body>
    <mo-table-row>
      <mo-table-cell>BF234239</mo-table-cell>
      <mo-table-cell style="padding: 0; padding-bottom: 4px; flex-basis: 30%;"
        ><span style="display: block; height: 32px;">
          <mo-linear-gauge
            horizontal
            value="86.7"
            inline
            showLabels
            unit="%"
            id="inline-example"
          ></mo-linear-gauge> </span
      ></mo-table-cell>
      <mo-table-cell>86.7</mo-table-cell>
    </mo-table-row>
    <mo-table-row>
      <mo-table-cell>BF234239</mo-table-cell>
      <mo-table-cell style="padding: 0; padding-bottom: 4px; flex-basis: 30%;"
        ><span style="display: block; height: 32px;">
          <mo-linear-gauge
            horizontal
            value="54.2"
            inline
            showLabels
            unit="%"
            id="inline-example-2"
          ></mo-linear-gauge> </span
      ></mo-table-cell>
      <mo-table-cell>54.2</mo-table-cell>
    </mo-table-row>
    <mo-table-row>
      <mo-table-cell>BF234239</mo-table-cell>
      <mo-table-cell style="padding: 0; padding-bottom: 4px; flex-basis: 30%;"
        ><span style="display: block; height: 32px;">
          <mo-linear-gauge horizontal value="38.7" inline showLabels></mo-linear-gauge> </span
      ></mo-table-cell>
      <mo-table-cell>38.7</mo-table-cell>
    </mo-table-row>
  </mo-table-body>
</mo-table>

<script>
  const chart = document.querySelector('#inline-example');
  const chartTwo = document.querySelector('#inline-example-2');
  const thresholds = {
    maxWarning: 65,
    maxAlert: 75
  };
  const allThresholds = {
    minAlert: 15,
    minWarning: 30,
    maxWarning: 65,
    maxAlert: 75
  };
  chart.thresholds = thresholds;
  chartTwo.thresholds = allThresholds;
</script>

import { MOLinearGauge } from '@metsooutotec/modes-web-components/dist/react';

const thresholds = {
  maxWarning: 65,
  maxAlert: 75
};

const App = () => (
  <>
    <MOTable>
      <MOTableHead>
        <MOTableHeadCell>Tag</MOTableHeadCell>
        <MOTableHeadCell>Status</MOTableHeadCell>
        <MOTableHeadCell>Current value</MOTableHeadCell>
      </MOTableHead>
      <MOTableBody>
        <MOTableRow>
          <MOTableCell>BF23472398</MOTableCell>
          <MOTableCell>
            <MOLinearGauge
              title="Cavity level"
              subtitle="54.6% a day ago"
              horizontal
              inline
              value={86.7}
              unit="%"
              thresholds={thresholds}
            ></MOLinearGauge>
          </MOTableCell>
          <MOTableCell>86.7</MOTableCell>
        </MOTableRow>
      </MOTableBody>
    </MOTable>
  </>
);

Minimum and maximum

The thresholds attribute can have both minimum and maximum thresholds set at once.

<mo-linear-gauge
  title="Cavity level"
  subtitle="54.6% a day ago"
  horizontal
  value="86.7"
  unit="%"
  id="min-max-example"
></mo-linear-gauge>

<script>
  const chart = document.querySelector('#min-max-example');
  const thresholds = {
    minAlert: 15,
    minWarning: 30,
    maxWarning: 65,
    maxAlert: 75
  };
  chart.thresholds = thresholds;
</script>

import { MOLinearGauge } from '@metsooutotec/modes-web-components/dist/react';

const thresholds = {
  minAlert: 15,
  minWarning: 30,
  maxWarning: 65,
  maxAlert: 75
};

const App = () => (
  <MOLinearGauge
    title="Cavity level"
    subtitle="54.6% a day ago"
    horizontal
    value={86.7}
    thresholds={thresholds}
    unit="%"
  ></MOLinearGauge>
);

Showing labels

Adding the showLabels attribute will render the labels for the min, max, and threshold values. 

<mo-linear-gauge
  showLabels
  horizontal
  title="Cavity level"
  subtitle="24.2mm an hour ago"
  value="39.7"
  min="-50"
  max="50"
  delta="+24.2"
  unit="mm"
  id="label-example"
></mo-linear-gauge>

<script>
  const chart = document.querySelector('#label-example');
  const thresholds = {
    maxWarning: 20,
    maxAlert: 30
  };
  chart.thresholds = thresholds;
</script>

import { MOLinearGauge } from '@metsooutotec/modes-web-components/dist/react';

const thresholds = {
  maxWarning: 20,
  maxAlert: 30
};

const App = () => (
  <MOLinearGauge
    title="Cavity level"
    subtitle="24.2mm an hour ago"
    horizontal
    value={39.7}
    unit="%"
    thresholds={thresholds}
    showLabels
  ></MOLinearGauge>
);

Vertical gauge

Omitting the horizontal attribute will render the gauge vertically.

<div style="height: 500px">
  <mo-linear-gauge
    showLabels
    title="Cavity level"
    subtitle="54.6% a day ago"
    value="86.7"
    unit="%"
    id="vertical-example"
  ></mo-linear-gauge>
</div>

<script>
  const chart = document.querySelector('#vertical-example');
  const thresholds = {
    maxWarning: 65,
    maxAlert: 75
  };
  chart.thresholds = thresholds;
</script>

import { MOLinearGauge } from '@metsooutotec/modes-web-components/dist/react';

const thresholds = {
  maxWarning: 65,
  maxAlert: 75
};

const App = () => (
  <div style={{ height: '500px' }}>
    <MOLinearGauge
      title="Cavity level"
      subtitle="54.6% a day ago"
      value={86.7}
      unit="%"
      thresholds={thresholds}
    ></MOLinearGauge>
  </div>
);

Status gauge

Adding the statusGauge attribute will render the entire gauge in the color of the current status. 

<mo-linear-gauge
  showLabels
  horizontal
  statusGauge
  title="Cavity level"
  subtitle="54.6% a day ago"
  value="86.7"
  unit="%"
  id="status-example"
></mo-linear-gauge>

<script>
  const chart = document.querySelector('#status-example');
  const thresholds = {
    maxWarning: 65,
    maxAlert: 75
  };
  chart.thresholds = thresholds;
</script>

import { MOLinearGauge } from '@metsooutotec/modes-web-components/dist/react';

const thresholds = {
  maxWarning: 65,
  maxAlert: 75
};

const App = () => (
  <div style={{ height: '500px' }}>
    <MOLinearGauge
      title="Cavity level"
      subtitle="54.6% a day ago"
      value={86.7}
      unit="%"
      thresholds={thresholds}
    ></MOLinearGauge>
  </div>
);

Interactive example

The gauge will automatically update if the value or the thresholds change.

Status gauge 
<mo-switch class="example">
  <mo-icon name="ok" slot="suffix"></mo-icon>
  Status gauge
</mo-switch>
<mo-linear-gauge
  title="Interactive Linear gauge example"
  subtitle="Try changing the controls"
  horizontal
  value="47.9"
  showLabels
  clamp
  unit="%"
  id="all-example"
></mo-linear-gauge>
<mo-divider></mo-divider>

<div class="controls">
  <mo-range label="value" value="47.9" step="0.1"></mo-range>
  <div class="inputs">
    <mo-input value="0" label="min"></mo-input>
    <mo-input value="100" label="max"></mo-input>
    <mo-input value="%" label="unit"></mo-input>
  </div>
  <div class="inputs">
    <mo-input id="threshold-min-alert" value="15" label="minAlert"></mo-input>
    <mo-input id="threshold-min-warning" value="30" label="minWarning"></mo-input>
    <mo-input id="threshold-max-warning" value="65" label="maxWarning"></mo-input>
    <mo-input id="threshold-max-alert" value="75" label="maxAlert"></mo-input>
  </div>
</div>

<script>
  const chart = document.querySelector('#all-example');
  const range = document.querySelector('mo-range');
  const toggle = document.querySelector('mo-switch');
  const inputs = document.querySelectorAll('mo-input');
  const thresholds = {
    minAlert: 15,
    minWarning: 30,
    maxWarning: 65,
    maxAlert: 75
  };
  inputs.forEach(input => {
    input.addEventListener('mo-input', e => {
      if (!input.id.includes('threshold')) {
        const attribute = input.label;
        chart.setAttribute(attribute, input.value);
        range.setAttribute(attribute, parseFloat(input.value));
      } else {
        const newThresholds = { ...chart.thresholds };
        newThresholds[input.label] = parseFloat(input.value);
        chart.thresholds = newThresholds;
      }
    });
  });
  range.addEventListener('mo-change', () => {
    chart.value = range.value;
  });
  toggle.addEventListener('mo-change', () => {
    if (toggle.checked) chart.setAttribute('statusGauge', toggle.checked);
    else chart.removeAttribute('statusGauge');
  });

  const options = {
    animation: false
  };
  chart.options = options;
  chart.thresholds = thresholds;
</script>

<style>
  .controls mo-input::part(input) {
    width: 100%;
  }
  .controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .inputs {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
  }
  mo-switch.example {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
</style>

import { MOLinearGauge, MODivider, MORange } from '@metsooutotec/modes-web-components/dist/react';

const thresholds = {
  minAlert: 15,
  minWarning: 30,
  maxWarning: 65,
  maxAlert: 75
};

const gauge = useRef(null);

const updateGauge = (e: Event) => {
  gauge.value = event.target.value;
};

const App = () => (
  <>
    <MORange onMoChange={e => updateGauge(e)} min={0} max={100} value={47.9}></MORange>
    <MODivider></MODivider>
    <MOLinearGauge
      ref={gauge}
      title="Cavity level"
      subtitle="54.6% a day ago"
      horizontal
      value={86.7}
      unit="%"
      thresholds={thresholds}
    ></MOLinearGauge>
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/linear-gauge/linear-gauge.js';

To import this component as a React component:

import MOLinearGauge from '@metsooutotec/modes-web-components/dist/react/linear-gauge/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/linear-gauge/linear-gauge.js"></script>

Properties

Name Description Reflects Type Default
canvas Query for the canvas element instantiated in the html template. HTMLCanvasElement -
type Type of chart. ChartType 'bar'
chart Reference to the chart itself. Chart -
unit Measurement unit associated with the data. string ''
delta Delta associated with the data. string ''
horizontal Whether the chart should be in horizontal view. boolean false
showLabels Shows labels for min, max and the thresholds. boolean false
inline Renders the gauge inline, i.e. without labels for current value and title. boolean false
clamp Clamps value to min/max value. boolean false
statusGauge Renders the entire gauge in the current status color. boolean false
title Title to be shown above the chart. string ''
subtitle Subtitle to be shown above the chart, but below title. string ''
min The minimum value on the linear gauge axis. number 0
max The maximum value on the linear gauge axis. number 100
value The current value on the linear gauge axis. number 0
thresholds Thresholds for the chart. Threshold | undefined undefined
builtDatasets Store the datasets that were built based on min, max, value and thresholds. StatusDataset[] | undefined undefined
statusColor The current status color. string | undefined undefined
options Additional options for the chart. ChartOptions {}
customPlugins
custom-plugins 		Use this property to add custom plugins to the created chart.js instance Plugin[] []
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Methods

Name Description Arguments
buildDatasets() Builds the datasets for the linear gauge chart based on the component’s properties. -
updateColors() Updates the colors of the datasets and chart options based on the current theme. -
rebuildDatasets() Rebuilds the datasets for the linear gauge component by calling the buildDatasets method when thresholds are added. -

Learn more about methods.

Parts

Name Description
base The div containing the canvas element.
canvas The canvas element the chart is rendered in.

Learn more about customizing CSS parts.