Usage

The Gauge component is used to visually represent a value within a specified range, divided into colored segments. It’s useful for displaying metrics, progress, or indicators where visual representation of value relative to maximum is important.

Import

import { Gauge } from '@passfort/castle'
content_copy
Copy

Example

Provide data segments and a value to render the gauge.

<Row gap={5}>
  <Gauge
    data={[
      { name: 'Poor', value: 30, color: 'G50' },
      { name: 'Low', value: 15, color: 'O50' },
      { name: 'Medium', value: 15, color: 'O100' },
      { name: 'High', value: 30, color: 'R100' },
      { name: 'Extreme', value: 10, color: 'B100' },
    ]}
    value={80}
  />
  <Gauge
    data={[
      { name: 'Poor', value: 20, color: 'G50' },
      { name: 'Low', value: 20, color: 'G100' },
      { name: 'Medium', value: 20, color: 'O100' },
      { name: 'High', value: 40, color: 'R100' },
    ]}
    value={50}
  />
  <Gauge
    data={[
      { name: 'Poor', value: 20, color: 'R100' },
      { name: 'Low', value: 20, color: 'G100' },
      { name: 'Medium', value: 20, color: 'O100' },
      { name: 'High', value: 40, color: 'B100' },
    ]}
    value={10}
  />
</Row>
<Row gap={5}>
  <Gauge
    data={[
      { name: 'Poor', value: 30, color: 'G50' },
      { name: 'Low', value: 15, color: 'O50' },
      { name: 'Medium', value: 15, color: 'O100' },
      { name: 'High', value: 30, color: 'R100' },
      { name: 'Extreme', value: 10, color: 'B100' },
    ]}
    value={80}
  />
  <Gauge
    data={[
      { name: 'Poor', value: 20, color: 'G50' },
      { name: 'Low', value: 20, color: 'G100' },
      { name: 'Medium', value: 20, color: 'O100' },
      { name: 'High', value: 40, color: 'R100' },
    ]}
    value={50}
  />
  <Gauge
    data={[
      { name: 'Poor', value: 20, color: 'R100' },
      { name: 'Low', value: 20, color: 'G100' },
      { name: 'Medium', value: 20, color: 'O100' },
      { name: 'High', value: 40, color: 'B100' },
    ]}
    value={10}
  />
</Row>
content_copy
Copy
live example