Open LemonPie22 opened 8 months ago
Using Filament v3.2.15 with the Apex charts plugin v3.1.2, my stacked bar chart is coming out squashed almost flat on a mobile phone.
My code:
<?php namespace App\Filament\Widgets; use App\Models\Quote; use Illuminate\Support\Carbon; use Filament\Forms\Components\DatePicker; use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget; use Flowframe\Trend\Trend; use Flowframe\Trend\TrendValue; class QuotesChart extends ApexChartWidget { /** * Chart Id * * @var string */ protected static ?string $chartId = 'quotesChart'; /** * Widget Title * * @var string|null */ protected static ?string $heading = 'Quotes'; // Set to full width protected int | string | array $columnSpan = 'full'; // Filter options protected function getFormSchema(): array { return [ DatePicker::make('date_start') ->default(now()->subRealMonths(6)), DatePicker::make('date_end') ->default(now()), ]; } /** * Chart options (series, labels, types, size, animations...) * https://apexcharts.com/docs/options * * @return array */ protected function getOptions(): array { $dateStart = Carbon::parse($this->filterFormData['date_start']); $dateEnd = Carbon::parse($this->filterFormData['date_end']); $yAxis = Trend::model(Quote::class) ->between( start: $dateStart, end: $dateEnd, ) ->perMonth() ->count(); //@TODO Sort out code repetition below. No need for separate block for each status $declined = Trend::query(Quote::query()->where('status', 'declined')) ->between( start: $dateStart, end: $dateEnd, ) ->perMonth() ->count(); $draft = Trend::query(Quote::query()->where('status', 'draft')) ->between( start: $dateStart, end: $dateEnd, ) ->perMonth() ->count(); $published = Trend::query(Quote::query()->where('status', 'published')) ->between( start: $dateStart, end: $dateEnd, ) ->perMonth() ->count(); $review = Trend::query(Quote::query()->where('status', 'review')) ->between( start: $dateStart, end: $dateEnd, ) ->perMonth() ->count(); $accepted = Trend::query(Quote::query()->where('status', 'accepted')) ->between( start: $dateStart, end: $dateEnd, ) ->perMonth() ->count(); return [ 'chart' => [ 'type' => 'bar', 'stacked' => true, 'responsive' => [ 'breakpoint' => '435px', 'options' => [ 'height' => '300px', ], ], ], //@TODO Sort out code repetition below. No need for separate block for each status 'series' => [ [ 'name' => 'draft', 'data' => $draft->map(fn (TrendValue $value) => $value->aggregate), ], [ 'name' => 'published', 'data' => $published->map(fn (TrendValue $value) => $value->aggregate), ], [ 'name' => 'review', 'data' => $review->map(fn (TrendValue $value) => $value->aggregate), ], [ 'name' => 'declined', 'data' => $declined->map(fn (TrendValue $value) => $value->aggregate), ], [ 'name' => 'accepted', 'data' => $accepted->map(fn (TrendValue $value) => $value->aggregate), ], ], 'xaxis' => [ 'categories' => $yAxis->map(fn (TrendValue $value) => date_format(date_create($value->date), 'M y')), 'labels' => [ 'style' => [ 'fontFamily' => 'inherit', ], ], ], 'yaxis' => [ 'labels' => [ 'style' => [ 'fontFamily' => 'inherit', ], ], ], 'dataLabels'=> [ 'enabled' => true, ], 'colors' => ['#d3d3d3', '#00bfff', '#ff7e00', '#ff0000', '#32cd32'], 'plotOptions' => [ 'column' => [ 'borderRadius' => 3, 'horizontal' => false, ], ], ]; } }
Using Filament v3.2.15 with the Apex charts plugin v3.1.2, my stacked bar chart is coming out squashed almost flat on a mobile phone.
My code: