Laravel Nova field, for showing multiple statuses or activity history by colorful row of squares (e.g. last 52 weeks activity).
jankapusta/nova-color-multi-status-field is a Laravel package for laravel nova field, for showing multiple statuses or activity history by colorful row of squares (e.g. last 52 weeks activity)..
It currently has 2 GitHub stars and 5.570 downloads on Packagist (latest version v0.9.9).
Install it with composer require jankapusta/nova-color-multi-status-field.
Discover more Laravel packages by jankapusta
or browse all Laravel packages to compare alternatives.
Last updated
This field allows to display (and store/edit) multiple values within 1 field as array or object. It will show values based on color map - as colorful square icons. Usually it is stored as json (but that depends purely on an Eloquent model implementation).
Field accepts both array and object values. If the data is an object, keys will be editable and will be displayed as tooltips (on hover)
Possibility to edit values with string keys:
Display colorful squares based on value-to-color mapping. Showing keys on hover:
You can install the package in to a Laravel app that uses Nova via composer:
composer require jankapusta/nova-color-multi-status-field
Laravel migration example:
$table->json('guests_per_week');
Laravel model example
class Hotel extends Model {
protected $casts = [
'guests_per_week' => 'array',
];
// ....
}
Hotel::create([
'guests_per_week' => [
'Feb 10' => 5,
'Feb 17' => 1,
'Feb 24' => 12,
'Mar 3' => 4,
'Mar 10' => 0,
'Mar 17' => 8,
'Mar 24' => 14,
'Mar 31' => 2,
'Apr 7' => 9,
],
]);
Then add a field into Nova Resource
ColorMultiStatus::make('Events per week', 'guests_per_week')
->colorMap([
0 => 'white',
2 => 'lightgrey',
5 => '#d3dc83',
8 => '#a7c742',
13 => '#7dbd41',
34 => '#6cda05',
])
// optional configuration
->iconSize(5) // in pixels - default is 4
->iconSpacing(2) // in pixels - default is 1
->showTooltips(false) // to hide tooltips
->width(80), // in pixels
The MIT License (MIT). Please see License File for more information.
