fidum / laravel-dashboard-chart-tile Goto Github PK

View Code? Open in Web Editor NEW

160.0 5.0 9.0 503 KB

Create all the charts you want for your laravel dashboard

Home Page: https://github.com/spatie/laravel-dashboard

License: MIT License

PHP 90.79% Blade 9.21%

chart tile dashboard laravel spatie laravel-framework

laravel-dashboard-chart-tile's Introduction

Laravel Dashboard Charting Tile

Show off your charting skills with this easy to use tile. Supports line, bar, pie, doughnut and many more!

Installation

You can install the package via composer:

composer require fidum/laravel-dashboard-chart-tile

Usage

In the dashboard config file, you can optionally add this configuration in the tiles key.

// in config/dashboard.php
return [
    // ...
    'tiles' => [
        'charts' => [     
            'refresh_interval_in_seconds' => 300, // Default: 300 seconds (5 minutes)
        ],
    ],
];

This tile uses chart.js to render the charts with the help of Laravel Charts package see links to documentation for both below:

So that you can easily add your datasets and configure your charts exactly how you want them you need to create a chart class that implements the Fidum\ChartTile\Contracts\ChartFactory interface.

See chart example below:

namespace App\Charts;

use Carbon\Carbon;
use Fidum\ChartTile\Charts\Chart;
use Fidum\ChartTile\Contracts\ChartFactory;

class ExampleBarChart implements ChartFactory
{
    public static function make(array $settings): ChartFactory
    {
        return new static;
    }

    public function chart(): Chart
    {
        $date = Carbon::now()->subMonth()->startOfDay();

        $data = collect(range(0, 12))->map(function ($days) use ($date) {
            return [
                'x' => $date->clone()->addDays($days)->toDateString(),
                'y' => rand(100, 500),
            ];
        });

        $chart = (new Chart)
            ->labels($data->pluck('x')->toArray())
            ->options([
                  'responsive' => true,
                  'maintainAspectRatio' => false,
                  // etc...
             ], true);

        $chart->dataset('Example Data', 'bar', $data->toArray())
            ->backgroundColor('#848584');

        return $chart;
    }
}

In your dashboard view you can use the below component as many times as needed. Pass your chart class reference to the component and that will be used to generate the chart.

<x-dashboard>
    <livewire:chart-tile chartFactory="{{App\Charts\DailyUsersChart::class}}" position="a1:a3" />
</x-dashboard>

Optional properties:

chartFilters optional key value array of settings that is passed to your chart static::make method. Only use this for passing simple values strings, integers, arrays etc. To use this you will have to use @livewire syntax over the component syntax in order set the array value.

@livewire('chart-tile', [
    'chartFactory' => App\Charts\DailyUsersChart::class, 
    'chartFilters' => ['type' => 'customer'],
])

height sets the height of the chart, depending on your dashboard layout you may need to adjust this (defaults to 100%).
refreshIntervalInSeconds use this to override the refresh rate of an individual tile (defaults to 300 seconds)

Examples

We have provided some chart factory examples to help get you started here. You can use the below dashboard layout to have an instant showcase of these examples:

<x-dashboard>
    <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExamplePieChart::class}}" position="a1:a2" height="140%"/>
    <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleDoughnutChart::class}}" position="b1:b2" height="140%"/>
    <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExamplePieChart::class}}" position="c1:c2" height="140%" />
    <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleDoughnutChart::class}}" position="d1:d2" height="140%" />
    <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleBarChart::class}}" position="a3:b4" />
    <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleLineChart::class}}" position="c3:d4" />
    <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleLineChart::class}}" position="a5:b6" />
    <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleBarChart::class}}" position="c5:d6" />
    <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleBarChart::class}}" position="a7:b8" />
    <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleLineChart::class}}" position="c7:d8" />
</x-dashboard>

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email :author_email instead of using the issue tracker.

Credits

All Contributors

License

The MIT License (MIT). Please see License File for more information.

laravel-dashboard-chart-tile's People

Contributors

Stargazers

Watchers

Forkers

devdavido manojkirana consoletvs skdevelopers belezalab-develop acappel01 leonelngande aiv-t-shark karimalik

laravel-dashboard-chart-tile's Issues

Failure in loading chartisan from Unpkg

Yesterday, there was an update in the chartisan script, resulting in a 2.1.0 version (see npmjs.com).

In your package, you are using the path https://unpkg.com/@chartisan/chartjs@^2.0/dist/chartisan_chartjs.js. This path will always use the latest V2. The result is as follows:

When I add a tagged version (for example: https://unpkg.com/@chartisan/[email protected]/dist/chartisan_chartjs.js) to the dashboard-config file (dashboard.tiles.charts.scripts) the script still works.

Adding Plugins to Chart.js

CONGRATS on a great package!!!

I am trying to install and use the chartjs-plugin-datalabels plugin.

The docs say chartjs-plugin-datalabel must be loaded after the Chart.js library!

I have this in app/config/dashboard.php but the labels are not appearing.

'tiles' => [
    'charts' => [
        'refresh_interval_in_seconds' => 300,
        'scripts' => [
            'chart' => 'https://unpkg.com/[email protected]/dist/Chart.min.js',
            'chartisan' => 'https://unpkg.com/@chartisan/[email protected].*/dist/chartisan_chartjs.umd.js',
            'moment' => 'https://unpkg.com/[email protected]/min/moment-with-locales.min.js',
            'ChartDataLabels' => 'https://cdn.jsdelivr.net/npm/[email protected]'
        ],
 ],

And in the chart class I have

public function options(): array
    {
        return [
            'responsive' => true,
            'maintainAspectRatio' => false,
            'legend' => [ 'display' => false ],
            'barWidth' => 0.8,
            'scales' => [
                'xAxes' => [
                    [
                        'gridLines' => [
                            'display' => true,
                            'color' => '#39393A'
                        ],
                        'ticks' => [
                            'fontColor' => "#FFFFFF",
                            'fontSize' => 16
                        ]
                    ],
                ],
                'yAxes' => [
                    [
                        'gridLines' => [
                            'display' => true,
                            'color' => '#989898',
                            'zeroLineColor' => 'red',
                            'zeroLineWidth' => 4
                        ],
                        'ticks' => [
                            'fontColor' => "#FFFFFF",
                            'fontSize' => 12,
                            'beginAtZero' => true
                        ]
                    ],
                ],
            ],
            'plugins' => "{
                datalabels: {
                    color: 'white',
                    font: {
                        size: 16,
                        weight: 'bold'
                    },
                    formatter: (value) => `\\$\${value.toLocaleString()}`
                }
            }"
        ];
    } // end function

area chart example

could you please add an example for area chart?
i am using chart.js (out of the box), that should support area charts by setting filling mode (https://www.chartjs.org/docs/latest/charts/area.html#filling-modes)... but i am struggling with setting that.

Add support for v2 of laravel-dashboard

Hi,

we've released v2 our dashboard. The only change are the updated requirements: we now require Laravel v8 and Livewire v2.

Could you please tag a new release of your tile?

In most cases these are the things you need to do:

update the requirement in the composer.json of your tile to "spatie/laravel-dashboard": "^2.0"
tag a new release. Personally, I would opt for a major release, so you can still do bug fixes on the v1 of your tile.

Thanks!

Parallel init

Hi
How can I init all my charts in dashboard in parallel?
Now I have 7 charts which init one by one

consoletvs/charts not available anymore

First of all, thanks for making this package!

When try to install I get the error
Failed to download consoletvs/charts from dist
Looks like https://github.com/ConsoleTVs/Charts doesn't support version 7.2

Consider other front-ends

Have you considered echarts as a chart.js alternative? Chartisan supports it out of the box and have much more features. It is also from the apache foundation.

They can be customized to points where chart.js can't even reach. Check out their example pages!

Perhaps this library could allow to switch between both with ease?

Nice work btw!

<livewire:chart-tile 
chartFactory="{{\Fidum\ChartTile\Examples\ExampleDoughnutChart::class}}" 
position="b1:b2" 
height="100%"
refreshIntervalInSeconds="300"/>

Requesting

In blade

<livewire:chart-tile 
chartFactory="{{\Fidum\ChartTile\Examples\ExampleDoughnutChart::class}}" 
position="b1:b2" 
height="100%"
:refreshIntervalInSeconds="\Carbon\CarbonInterval::minute(5)"/>

and then in components.

<?php
if(! is_null($refreshIntervalInSeconds) && $refreshIntervalInSeconds instanceof CarbonInterval){
$refreshIntervalInSeconds = $refreshIntervalInSeconds->totalSeconds;
}