Skip to content
lab components / Data Visualization

DCI Gauge Simple

Allow users to see a numerical value as a percentage of a goal or target (100%) within a circular format.

ExamplesPropertiesGuidelines

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { DCIGaugeSimple } from "@siteimprove/fancylab";

#Examples

The Polar Gauge Simple component is a minimalist data visualization tool designed to clearly and efficiently communicate a single metric:

The component consists of:

  • Score: Displays the current score (e.g., "25.9").
  • Progress Indicator: Visually represents the score as a filled portion of the circle.

#Basic Usage, Small Size

Ideal for compact displays like table cells or within card or table components where space is limited.

33.5
<DCIGaugeSimple score={33.5} size="small" />

#Basic Usage, Medium Size

Suitable for more prominent display on dashboards, reports, or when the visual impact of the gauge is important.

33.5
<DCIGaugeSimple score={33.5} size="medium" />

#Properties

33
PropertyDescriptionDefinedValue
scoreRequired
| numberDCI score between 0-100
sizeOptional
"medium" | "small"Controls the size of the DCI - defaults to "small"
useQuestionMarkOptional
booleanShows question mark when score is zero or null
data-observe-keyOptional
stringUnique string, used by external script e.g. for event tracking
classNameOptional
stringCustom className that's applied to the outermost element (only intended for special cases)
styleOptional
objectStyle object to apply custom inline styles (only intended for special cases)

#Guidelines

#Best practices

#General

Use DCIGaugeSimple when

  • Space is limited, or a quick visual assessment is needed
  • A visual representation of progress or a target value is more impactful than just a number.
  • The target value (100) is understood by the user, either implicitly or through supporting context.

#Placement

DCIGaugeSimple is typically used in the following places:

  • Small Size:
    • Table: To quickly compare multiple metrics.
    • Card: To provide an overview of a specific KPI within a card.
    • Highlight: To offer a compact summary of progress.
  • Medium Size:
    • Dashboard Widgets: For a prominent display of key metrics.
    • Report Summaries: To visually emphasize a particular data point.

#Style

  • Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your DCIGaugeSimple to existing components for visual consistency.
  • Meaningful data: Ensure the displayed score or progress value is relevant and actionable for the user.
  • Prioritize clarity: The component should be instantly understandable. Avoid clutter and extraneous elements.
  • Use color to reinforce the meaning of the data (e.g., green for positive, red for negative).

#Do not use when

  • The data is highly volatile: A gauge isn't suitable for rapidly changing values. Use Chart or other data visualisation.
  • A trend over time is more important: Consider a Line Chart or SparkLine for trends.
  • Precise numerical values are critical: A gauge is an approximation; use a numerical display if exact figures are necessary. Use Highlight component instead.
  • The metric does not have a target of 100: A gauge requires a defined goal to measure against.

#Accessibility

#For designers

  • Provide sufficient color contrast between the gauge, indicator, and background.
  • Provide text alternatives for screen readers, describing the score and its meaning in context (e.g., "DCI score: 35 out of 100").

#For developers

This component comes with built-in accessibility, no extra work required.

Explore detailed guidelines for this component: Accessibility Specifications

#Writing

  • Use clear, concise labels for the gauge label or any accompanying text.
  • Explain the meaning of the score in context (e.g., "Your website's DCI score is 35, indicating room for improvement").
  • If applicable, offer guidance on how to interpret or improve the score.