/extension-meter-component

Directus extension bundle to add progress meter components

Primary LanguageVue

Meter Component Bundle

Show completion percentage and progress inside the Directus Studio with these progress meter components.

This is a bundle extension that includes an interface and a display.

Interface

UI

Example view of the meter interface.

Settings

Settings screen for the meter interface.

Display

UI

Example view of the meter display.

Settings

Settings screen for the meter display.

Quick Overview Video

[Directus] Meter Component Extension - Watch Video

Configuration

This extension works with the following field types.

  • Integer
  • Decimal
  • Float

There are five configuration options.

  • Minimum Value - The minimum value used to calculate the meter percentage (default: 0).
  • Maximum Value - The maximum value used to calculate the meter percentage (default: 100).
  • Label - The label to display below the meter or on hover (for the display).
  • Indicator - Show an indicator with the current value. ie (50%)
  • Color - the color of the meter bar. Defaults to the primary theme color.

The components also respect conditional formatting so that you can configure custom percentages, labels, and colors based on a specific value.

Example view of the meter with conditional formatting.

Settings screen for the meter with conditional formatting.