SVG gauge for filament.
You can install the package via composer:
composer require kainiklas/filament-gaugeOptionally, you can publish the views using
php artisan vendor:publish --tag="filament-gauge-views"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) 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
}Please see CHANGELOG for more information on what has changed recently.
Please see CONTRIBUTING for details.
Please review our security policy on how to report security vulnerabilities.
The MIT License (MIT). Please see License File for more information.