Speedometer

Speedometers are used to display a value within a range.

<div>
  <mo-input id="gauge-value" label="Set gauge value" help-text="From range 0 - 1800"></mo-input>
  <br />
  <mo-range label="Set indicator angle" max="315" min="45"></mo-range>
  <mo-divider></mo-divider>
  <mo-speedometer max="1800"></mo-speedometer>
</div>

<script>
  const range = document.querySelector('mo-range');
  const gauge = document.querySelector('mo-speedometer');
  const input = document.querySelector('#gauge-value');
  range.addEventListener('mo-change', () => {
    const newValue = parseFloat((((range.value - 45) * gauge.max) / 270).toFixed(2));
    gauge.value = newValue;
    input.value = newValue;
  });
  input.addEventListener('mo-input', () => {
    const newValue = parseFloat(parseFloat(input.value).toFixed(2));
    gauge.value = newValue;
    range.value = (newValue / gauge.max) * 270 + 45;
  });
</script>

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

// input handling logic

const App = () => (
  <>
    <MOInput label="Set gauge value" helpText="From range 0 - 1800"></MOInput>
    <br />
    <MORange label="Set indicator angle" max="315" min="45"></MORange>
    <MODivider></MODivider>
    <MOSpeedometer max="1800"></MOSpeedometer>
  </>
);

Examples

Min and max value

You can set the minimum and maximum value for the gauge to display using the min and max attributes, respectively. If the value is larger than the maximum, the needle will point toward the maximum value.

<mo-speedometer min="500" max="2000" value="1400"></mo-speedometer>

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

const App = () => <MOSpeedometer min="500" max="2000" value="1400"></MOSpeedometer>;

Indicator and value placement

The indicator attribute can be either a needle or a triangle, with triangle being the default value. The label and tick placement can be customized with labelPlacement and tickPlacement, respectively. The options for this are inside (default) and outside.

<mo-speedometer
  id="indicator-gauge"
  indicator="needle"
  valuePlacement="outside"
  max="1800"
  value="880"
></mo-speedometer>

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

const App = () => <MOSpeedometer indicator="needle" valuePlacement="outside" max="1800" value="880"></MOSpeedometer>;

Status colors and extra information

The statusColors attribute will add a status color to the text and indicator depending on the current value in relation to the gradient wheel. The extraInformation attribute allows users to add any additional information they would like to showcase alongside the value. This could be a unit, or a change in value, etc.

<mo-speedometer max="1800" extraInformation="+5.6%" value="1200" statusColors></mo-speedometer>

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

const App = () => <MOSpeedometer extraInformation="+5.6%" max="1800" value="1200" statusColors></MOSpeedometer>;

Major and minor ticks

The amount of ticks can be customized using the minorTicks and majorTicks attributes. minorTicks will decide how many ticks there are between each major tick.

<mo-speedometer
  max="1800"
  extraInformation="+5.6%"
  value="480"
  statusColors
  indicator="needle"
  majorTicks="10"
  minorTicks="5"
></mo-speedometer>

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

const App = () => (
  <MOSpeedometer
    extraInformation="+5.6%"
    indicator="needle"
    statusColors
    minorTicks="5"
    majorTicks="10"
    max="1800"
    value="480"
  ></MOSpeedometer>
);

Start and end angle

By default the speedometer starts from 45 degrees (counting clockwise from the bottom), and ends at 315 degrees. This can however be customized using the startAngle and endAngle properties.

<mo-speedometer value="720" max="900" startAngle="0" endAngle="270"></mo-speedometer>

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

const App = () => <MOSpeedometer value="720" max="900" startAngle="0" endAngle="270"></MOSpeedometer>;

Customized status gradient

The status gradient can use custom colors and steps, configured using the gradientColors and gradientSteps attributes.

<mo-speedometer id="custom-gradient" value="880" statusColors max="1800"></mo-speedometer>

<script>
  const gauge = document.querySelector('#custom-gradient');
  gauge.gradientColors = ['#ffdad7', '#ff5356', '#930018', '#410006'];
  gauge.gradientSteps = [0, 45, 315, 360];
</script>

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

const App = () => (
  <MOSpeedometer
    statusColors
    max="1800"
    value="480"
    gradientColors={['#ffdad7', '#ff5356', '#930018', '#410006']}
    gradientSteps={[0, 45, 315, 360]}
  ></MOSpeedometer>
);

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.

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

import MOSpeedometer from '@metsooutotec/modes-web-components/dist/react/speedometer/';

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

Properties

Learn more about attributes and properties.

Methods

Learn more about methods.

Parts

Learn more about customizing CSS parts.