digital-creative / chartjs-widget
A Laravel Nova asset.
Installs: 9 939
Dependents: 1
Suggesters: 0
Security: 0
Stars: 1
Watchers: 4
Forks: 5
Open Issues: 6
Language:Vue
Requires
- php: >=7.1.0
This package is auto-updated.
Last update: 2023-09-05 22:43:28 UTC
README
Documentation
WIP
Basic sample meanwhile docs is not ready:
<?php declare(strict_types = 1); namespace App\Nova\Dashboards\Widgets; use DigitalCreative\ChartJsWidget\Color; use DigitalCreative\ChartJsWidget\DataSet; use DigitalCreative\ChartJsWidget\Gradient; use DigitalCreative\ChartJsWidget\LineChartWidget; use DigitalCreative\ChartJsWidget\Style; use DigitalCreative\ChartJsWidget\ValueResult; use DigitalCreative\NovaDashboard\Filters; use Illuminate\Support\Collection; use Laravel\Nova\Fields\Select; class SampleLineChart extends LineChartWidget { public const SOURCE = 'source'; public const SOURCE_SAMPLE1 = 'sample1'; public const SOURCE_SAMPLE2 = 'sample2'; public function getRandomData($min = 1, $max = 100): array { return [ random_int($min, $max), random_int($min, $max), random_int($min, $max), random_int($min, $max), random_int($min, $max), random_int($min, $max), random_int($min, $max), random_int($min, $max), random_int($min, $max), ]; } public function resolveValue(Collection $options, Filters $filters): ValueResult { /** * Some basic stylish settings */ $baseConfiguration = Style::make() ->fill('origin') ->pointBorderWidth(2) ->pointHitRadius(10) ->pointRadius(4) ->pointHoverRadius(4) ->borderWidth(2) ->pointHoverBorderWidth(4) ->pointHoverRadius(8); if ($options->get(self::SOURCE) === self::SOURCE_SAMPLE1) { /** * Customize some options based on the dataset */ $set1Configuration = $baseConfiguration->clone() ->color('#00c6fb') ->pointBorderColor(new Color('white')) ->backgroundColor( new Gradient([ 'rgba(0, 198, 251, .8)', 'rgba(255,255,255,0)' ], Gradient::VERTICAL) ); $set2Configuration = $baseConfiguration->clone() ->color('#005bea') ->fill('origin') ->pointBorderColor('white') ->backgroundColor([ 'rgba(0, 91, 234,.8)', 'rgba(255,255,255,0)', Gradient::VERTICAL ]); $dataset1 = DataSet::make('Sample 1', $this->getRandomData(), $set1Configuration); $dataset2 = DataSet::make('Sample 2', $this->getRandomData(), $set2Configuration); return ValueResult::make() ->labels($this->getRandomData()) ->addDataset( $dataset1, $dataset2 ); } return ValueResult::make() ->labels($this->getRandomData()) ->addDataset( DataSet::make('Hello', $this->getRandomData(), $baseConfiguration->color([ '#FAD961', '#F76B1C' ]) ->pointBorderColor('white') )); } public function fields(): array { return array_merge([ Select::make('Data Source', self::SOURCE) ->options([ self::SOURCE_SAMPLE1 => 'Data source 1', self::SOURCE_SAMPLE2 => 'Data source 2', ]), /** * You could let the user choose the color style by creating something like this: */ Select::make('Color Preset', 'colorsPreset') ->options([ 'orange' => 'Orange', 'red' => 'Red', ]), ], parent::fields()); } }