flatroy/nova-treemap-chart-card

A Laravel Nova card to show Treemap charts

0.0.2 2022-07-20 17:22 UTC

Requires

• php: ^7.4|^8.0

MIT

• George Daneke

• nova
• chart
• laravel
• card
• treemap
• apexcharts

README

This package allows you to add three-map fields to your resource details page and dashboards in Nova.

DISCLAIMER:

This package is still work in progress. Feel free to help improve it.

• Requirements
• Installation
• Basic Usage
• Advanced Options

Requirements

• Laravel v9.0.*
• Laravel Nova v4.*

Installation

Just run:

composer require flatroy/nova-treemap-chart-card

After installation, you can use the components listed here.

Basic Usage

// in App\Nova\User
...
use Flatroy\NovaTreemapChartCard\NovaTreemapChartCard;
...

/**
 * Get the fields displayed by the resource.
 *
 * @param \Laravel\Nova\Http\Requests\NovaRequest $request
 * @return array
 */
public function fields(NovaRequest $request)
{
    $data = [
        ['x' => 'Design', 'y' => 0.051],
        ['x' => 'Accounting', 'y' => 0.050],
        ['x' => 'Data Science', 'y' => 0.048],
        ['x' => 'Marketing', 'y' => 0.046],
        ['x' => 'Quality Assurance', 'y' => 0.046],
        ['x' => 'R&D', 'y' => 0.046],
    ];
    
    return [
        ...
        (new NovaTreemapChartCard())
            ->title('Some custom title')
            ->series($data)
            ->onlyOnDetail(),
        // or you can use like that:
        (new NovaTreemapChartCard())
            ->title('Some other custom title')
            ->series($this->model()?->find($request->resourceId)?->chartData)
            ->onlyOnDetail(),
        // or you can suggest how to do it better?
        ...
    ];
}


// if you want to put logic inside model - add this inside model:

namespace App\Models;
...
class User extends Model
{
...
    protected function getChartDataAttribute()
    {
        return [
            ['x' => 'Design', 'y' => 0.051],
            ['x' => 'Accounting', 'y' => 0.050],
            ['x' => 'Data Science', 'y' => 0.048],
            ['x' => 'Marketing', 'y' => 0.046],
            ['x' => 'Quality Assurance', 'y' => 0.046],
            ['x' => 'R&D', 'y' => 0.046],
        ];
    }
...
}

Feel free to come with suggestions for improvements.