README

SVG gauge for filament.

Installation

You can install the package via composer:

composer require kainiklas/filament-gauge

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-gauge-views"

Usage

You can render any numeric value between 0 and 100. The value is rounded. If the value is outside these ranges, you can normalize it with the upperBound() method, e.g., values between 0 and 1 need to be bounded by upperBound(1) and values between 0 and 50 need to be bounded by upperBound(50).

use Kainiklas\FilamentGauge\Enums\GaugeSize;
use Kainiklas\FilamentGauge\Tables\Columns\Gauge;

InlineGauge::make('number')
    // circle size (SM, MD, XL)
    // default: SM
    ->size(Size::MD) 

    // hides the number in the middle of the circle
    ->valueHidden() 

    // set an upper bound to calculate correct percentages
    // this should be the highest possible value
    // default: 100, which means values between 0 and 100
    // example: values between 0 and 1 -> set it to 1
    ->upperBound(1)

Customize Style

You can customize the style of the component with the following css hook classes:

/* arc, representing the value */
.fi-inline-gauge-section-color {
    @apply text-primary-600
}

/* full circle (the background) */
.fi-inline-gauge-shape-color {
    @apply text-gray-300 dark:text-gray-700
}

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

The MIT License (MIT). Please see License File for more information.

kainiklas / filament-gauge

Maintainers

Details