Skip to content

Instantly share code, notes, and snippets.

@leandrocfe

leandrocfe/1PostsPerMonthSeries.php

Last active January 11, 2025 12:43
Show Gist options
  • Save leandrocfe/3cb1730f7ef3740ed930c9657cc403eb to your computer and use it in GitHub Desktop.
Save leandrocfe/3cb1730f7ef3740ed930c9657cc403eb to your computer and use it in GitHub Desktop.
Download ZIP
ApexCharts
Raw
1PostsPerMonthSeries.php
<?php
namespace App\Traits;
trait PostsPerMonthSeries
{
protected function getChartData(): array
{
return [
'data' => [
10, 12, 20, 28,
35, 42, 50, 45,
37, 23, 15, 8,
],
'labels' => [
'2024-01', '2024-02', '2024-03', '2024-04',
'2024-05', '2024-06', '2024-07', '2024-08',
'2024-09', '2024-10', '2024-11', '2024-12',
],
];
}
}
Raw
2RatingSeries.php
<?php
namespace App\Traits;
trait RatingSeries
{
protected function getChartData(): array
{
return [
'data' => [50, 30, 18, 5, 13],
'labels' => ['⭐⭐⭐⭐⭐', '⭐⭐⭐⭐', '⭐⭐⭐', '⭐⭐', '⭐'],
];
}
}
Raw
3ApexPostsPerMonth.php
<?php
namespace App\Filament\Widgets;
use App\Traits\PostsPerMonthSeries;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;
class ApexPostsPerMonth extends ApexChartWidget
{
use PostsPerMonthSeries;
protected static ?string $chartId = 'postsPerMonth';
protected static ?string $heading = 'Posts per month (ApexCharts)';
protected static ?int $contentHeight = 293;
protected function getOptions(): array
{
$chartData = $this->getChartData();
return [
'chart' => [
'type' => 'bar',
'height' => 250,
'toolbar' => [
'show' => false,
],
],
'series' => [
[
'name' => 'Posts per month',
'data' => $chartData['data'],
],
],
'xaxis' => [
'categories' => $chartData['labels'],
'axisBorder' => [
'show' => false,
],
'axisTicks' => [
'show' => false,
],
'labels' => [
'style' => [
'fontWeight' => 400,
'fontFamily' => 'inherit',
],
],
],
'yaxis' => [
'labels' => [
'style' => [
'fontWeight' => 400,
'fontFamily' => 'inherit',
],
],
],
'colors' => ['#f59e0b'],
'fill' => [
'type' => 'gradient',
'gradient' => [
'shade' => 'dark',
'type' => 'vertical',
'shadeIntensity' => 0.5,
'gradientToColors' => ['#fbbf24'],
'inverseColors' => true,
'opacityFrom' => 1,
'opacityTo' => 1,
'stops' => [0, 100],
],
],
'plotOptions' => [
'bar' => [
'borderRadius' => 5,
'borderRadiusApplication' => 'end',
],
],
'dataLabels' => [
'enabled' => true,
],
'grid' => [
'show' => true,
'strokeDashArray' => 4,
'borderColor' => '#374151',
'xaxis' => [
'lines' => [
'show' => true,
],
],
'yaxis' => [
'lines' => [
'show' => true,
],
],
],
'markers' => [
'size' => 0,
],
'stroke' => [
'curve' => 'smooth',
'width' => 3,
],
'tooltip' => [
'enabled' => true,
],
];
}
}
Raw
4ApexPostsRating.php
<?php
namespace App\Filament\Widgets;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;
class ApexPostsRating extends ApexChartWidget
{
use \App\Traits\RatingSeries;
/**
* Chart Id
*/
protected static ?string $chartId = 'apexPostsRating';
protected static ?int $sort = 3;
/**
* Widget Title
*/
protected static ?string $heading = 'Posts rating (ApexCharts)';
protected static ?int $contentHeight = 293;
/**
* Chart options (series, labels, types, size, animations...)
* https://apexcharts.com/docs/options
*/
protected function getOptions(): array
{
$chartData = $this->getChartData();
return [
'chart' => [
'type' => 'bar',
'height' => 300,
'toolbar' => [
'show' => false,
],
],
'series' => [
[
'name' => 'Posts rating',
'data' => $chartData['data'],
],
],
'xaxis' => [
'categories' => $chartData['labels'],
'axisBorder' => [
'show' => false,
],
'axisTicks' => [
'show' => false,
],
'labels' => [
'show' => false,
'style' => [
'fontFamily' => 'inherit',
],
],
],
'yaxis' => [
'labels' => [
'style' => [
'fontFamily' => 'inherit',
'fontWeight' => 400,
'fontSize' => '18px',
],
],
],
'colors' => ['#f59e0b'],
'fill' => [
'type' => 'gradient',
'gradient' => [
'shade' => 'dark',
'type' => 'vertical',
'shadeIntensity' => 0.5,
'gradientToColors' => ['#fbbf24'],
'inverseColors' => true,
'opacityFrom' => 1,
'opacityTo' => 1,
'stops' => [0, 100],
],
],
'plotOptions' => [
'bar' => [
'borderRadius' => 10,
'horizontal' => true,
'barHeight' => '50%',
'borderRadiusApplication' => 'end',
],
],
'dataLabels' => [
'enabled' => true,
'style' => [
'fontSize' => '14px',
'fontWeight' => 'bold',
],
],
'grid' => [
'show' => true,
'strokeDashArray' => 4,
'borderColor' => '#374151',
'xaxis' => [
'lines' => [
'show' => false,
],
],
'yaxis' => [
'lines' => [
'show' => true,
],
],
],
'stroke' => [
'width' => 3,
],
'tooltip' => [
'enabled' => true,
],
];
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment