digital-creative/chartjs-widget

A Laravel Nova asset.

v0.0.1 2020-07-31 15:29 UTC

Requires

• php: >=7.1.0

MIT

• nova
• laravel

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());

    }
}