Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apex chart squashed in mobile view #62

Open
LemonPie22 opened this issue Feb 5, 2024 · 2 comments
Open

Apex chart squashed in mobile view #62

LemonPie22 opened this issue Feb 5, 2024 · 2 comments

Comments

@LemonPie22
Copy link

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.

Screenshot_20240205_105220_Chrome

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,
                ],
            ],
        ];
    }
}
@Nathan269
Copy link

Any update on this? I'm having the same issue with the line graph.

@LemonPie22
Copy link
Author

I semi-resolved it by forcing the chart height to 600px (with 'height' => 600). It's a compromise because, although it looks okay on a desktop, it looks vertically stretched on a mobile. As you can see, I tried using responsive to change the height on smaller screens, but that made no difference.

'chart' => [
    'type' => 'bar',
    'stacked' => true,
    'height' => 600,
    'responsive' => [
        'breakpoint' => 640,
        'options' => [
            'height' => 300,
        ],
    ],
],

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants