directus-extension-meter-panel v1.0.3

Directus Meter Panel Extension

A customizable meter/gauge panel extension for Directus dashboards that provides a visual representation of metrics in a semi-circular gauge format.

Features

• Dynamic semi-circular gauge visualization
• Smooth color transitions based on value ranges
• Animated needle movement
• Supports both static and dynamic maximum values
• Customizable data aggregation methods
• Responsive design that adapts to panel size
• Support for filtering data
• Real-time updates
• Dark/Light theme compatibility

Installation

1. Copy the contents of the dist folder to your Directus extensions directory:

   cp -r dist/* /path/to/directus/extensions/panels/meter-panel/

2. Restart your Directus instance:

   docker-compose restart directus

Configuration Options

Basic Settings

• Collection: Select the data collection to measure
• Value Field: Choose the field to measure
• Aggregation: Select how to aggregate the data (count, sum, avg, max, min)

Maximum Value Settings

• Maximum Value Type: Choose between static number or dynamic from collection
• Static Maximum Value: Set a fixed maximum value
• Dynamic Maximum Value: Configure maximum value from another collection

Advanced Settings

• Filter: Apply filters to the data collection
• Max Value Filter: Apply filters to the maximum value collection (when using dynamic maximum)

Usage Examples

Basic Usage

1. Create a new Dashboard
2. Add a Panel
3. Select "Meter Panel"
4. Configure the data source and maximum value
5. Save and view your gauge