Before you go, check out these stories!

0
Hackernoon logoHow To Create Charts Using Laravel Nova Metrics by@arslan

How To Create Charts Using Laravel Nova Metrics

Author profile picture

@arslanArslan

Full Stack developer /Lead Developer/Project Manager/Software Engineer

In this article, I will create a simple charts using metrics in Laravel Nova. Nova makes it easy for us to create charts with metrics feature for our admin panel. Let’s create it!

In this article i assumed that I already installed a Laravel Nova project and I have some data with resources like below:

For quick example we use Book resources with three relations table: category,publisher and language and we also already have three data.

Metrics

Back with metrics, Nova made three types of built-in metrics there are: value, trend, and partition. We also can get more type with use Nova packages for metrics.

1. Value Metrics
Value metrics display a single value,and its change compared with previous time interval. We could also have built-in

 average
sum
max
, or 
min
 functions. We can generate with artisan command :

php artisan nova value: BooksCount

By default, the generated metrics will be placed in the 

app/Nova/Metrics
 directory. Then we can define a query like we want inside
calculate
 method.

<?php
namespace App\Nova\Metrics;
use Illuminate\Http\Request;
use Laravel\Nova\Metrics\Value;
use App\Models\Book;
class BooksCount extends Value
{
    /**
     * Calculate the value of the metric.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return mixed
     */
    public function calculate(Request $request)
    {
        return $this->count($request, Book::class);
    }
    /**
     * Get the ranges available for the metric.
     *
     * @return array
     */
    public function ranges()
    {
        return [
            30 => '30 Days',
            60 => '60 Days',
            365 => '365 Days',
            'MTD' => 'Month To Date',
            'QTD' => 'Quarter To Date',
            'YTD' => 'Year To Date',
        ];
    }
    /**
     * Get the URI key for the metric.
     *
     * @return string
     */
    public function uriKey()
    {
        return 'books';
    }
}

We can showing the metrics inside resources by register it in 

card
 method in Book resources. In this example we will showing in dashboard page. So, go to App\Providers\NovaServiceProvider.php and register it inside
card
 method:

protected function cards()
{
  return [
    new Metrics\BooksCount()
  ];
}

And it will show like below :

2. Trend Metrics
Trend metrics will showing values over time with a line charts.For example, will showing count book in case by days. We can generate with artisan command :

 Php artisan nova:trend BooksTrend

By default, it will generated

inapp/Nova/Metrics
 directory. In this example, we are using the 
countByDays
 helper inside 
calculate
 method.

<?php
namespace App\Nova\Metrics;
use Illuminate\Http\Request;
use Laravel\Nova\Metrics\Trend;
use App\Models\Book;
class BooksTrend extends Trend
{
    /**
     * Calculate the value of the metric.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return mixed
     */
    public function calculate(Request $request)
    {
        return $this->countByDays($request, Book::class);
    }
    /**
     * Get the ranges available for the metric.
     *
     * @return array
     */
    public function ranges()
    {
        return [
            30 => '30 Days',
            60 => '60 Days',
            90 => '90 Days',
        ];
    }
    
    /**
     * Get the URI key for the metric.
     *
     * @return string
     */
    public function uriKey()
    {
        return 'books-trend';
    }
}

Then register it like before, we can also modify the width of card :

protected function cards()
{
return [
    new Metrics\BooksCount()
    (new Metrics\BooksTrend)->width('2/3'),
];
}

In dashboard page it will show like below:

3. Partition Metrics
Partition metrics will showing values with a pie charts. For example we use to show a comparism between category and publisher. Generate with artisan command :

php artisan nova:trend BooksCategoryComparism
php artisan nova:trend BooksPublisherComparism


By default, it will generated
inapp/Nova/Metrics/
 directory. In this example, we can define query inside
calculate
 method. We can modify like below:

<?php
namespace App\Nova\Metrics;
use Illuminate\Http\Request;
use Laravel\Nova\Metrics\Partition;
use App\Models\Book;
use Illuminate\Database\Eloquent\Model;
class BooksCategoryComparison extends Partition
{
    /**
     * Calculate the value of the metric.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return mixed
     */
    public function calculate(Request $request)
    {
        return $this->count($request, Book::join('categories','books.category_id','=','categories.id'), 'categories.name');
    }
    /**
     * Get the URI key for the metric.
     *
     * @return string
     */
    public function uriKey()
    {
        return 'books-compare-category';
    }
}
<?php
namespace App\Nova\Metrics;
use Illuminate\Http\Request;
use Laravel\Nova\Metrics\Partition;
use App\Models\Book;
use Illuminate\Database\Eloquent\Model;
class BooksPublisherComparison extends Partition
{
    /**
     * Calculate the value of the metric.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return mixed
     */
    public function calculate(Request $request)
    {
        return $this->count($request, Book::join('publishers','books.publishers_id','=','publishers.id'), 'publishers.name');
    }
    /**
     * Get the URI key for the metric.
     *
     * @return string
     */
    public function uriKey()
    {
        return 'books-compare-publisher';
    }
}

Then register it like before, we can also modify the width of card :

protected function cards()
{
return [
    new Metrics\BooksCount()
   (new Metrics\BooksTrend)->width('2/3'),
   (new Metrics\BooksCategoryComparison)->width('1/2'),
   (new Metrics\BooksPublisherComparison)->width('1/2')
];
}

Then in dashboard page, it will show like below :

Well, there you have it folks! We’ve used Nova to build a quick charts with metrics feature. It’s make it simply as we want. See ya next time!

If you need help in any kind of development project & I can also provide you consultancy about your project. I am top rated freelancer. You can hire me directly on UpworkYou can also hire me on Freelancer.

If you have any comment, question, or recommendation, feel free to post them in the comment section below!

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!