Giter VIP home page Giter VIP logo

filament-apex-charts's Introduction

Filament Apex Charts

Apex Charts integration for Filament

dashboard image demo

Filament demo with ApexCharts

Installation

You can install the package via composer:

composer require leandrocfe/filament-apex-charts:"^3.1"

Register the plugin for the Filament Panels you want to use:

use Leandrocfe\FilamentApexCharts\FilamentApexChartsPlugin;
public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            FilamentApexChartsPlugin::make()
        ]);
}

Filament V2 - if you are using Filament v2.x, you can use this section

Usage

Start by creating a widget with the command:

php artisan make:filament-apex-charts BlogPostsChart

Available chart samples

You may choose:

  • Area
  • Bar
  • Boxplot
  • Bubble
  • Candlestick
  • Column
  • Donut
  • Heatmap
  • Line
  • Mixed-LineAndColumn
  • Pie
  • PolarArea
  • Radar
  • Radialbar
  • RangeArea
  • Scatter
  • TimelineRangeBars
  • Treemap
  • Funnel

You may also create an empty chart by selecting the Empty option.

This command will create the BlogPostsChart.php file in app\Filament\Widgets. Ex:

namespace App\Filament\Widgets;

use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class BlogPostsChart extends ApexChartWidget
{
    /**
     * Chart Id
     *
     * @var string
     */
    protected static ?string $chartId = 'blogPostsChart';

    /**
     * Widget Title
     *
     * @var string|null
     */
    protected static ?string $heading = 'BlogPostsChart';

    /**
     * Chart options (series, labels, types, size, animations...)
     * https://apexcharts.com/docs/options
     *
     * @return array
     */
    protected function getOptions(): array
    {
        return [
            'chart' => [
                'type' => 'bar',
                'height' => 300,
            ],
            'series' => [
                [
                    'name' => 'BlogPostsChart',
                    'data' => [7, 4, 6, 10, 14, 7, 5, 9, 10, 15, 13, 18],
                ],
            ],
            'xaxis' => [
                'categories' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                'labels' => [
                    'style' => [
                        'fontFamily' => 'inherit',
                        'fontWeight' => 600,
                    ],
                ],
            ],
            'yaxis' => [
                'labels' => [
                    'style' => [
                        'fontFamily' => 'inherit',
                    ],
                ],
            ],
            'colors' => ['#f59e0b'],
        ];
    }
}

Now, check out your new widget in the dashboard.

Available options

The getOptions() method is used to return an array of options based on Apex Charts Options. This structure is identical with the Apex Chart library, which Filament Apex Charts uses to render charts. You may use the Apex Chart documentation to fully understand the possibilities to return from getOptions().

Examples

Setting a widget title

You may set a widget title:

protected static ?string $heading = 'Blog Posts Chart';

Optionally, you can use the getHeading() method.

Hiding header content

You can hide header content by NOT providing these

  • $heading
  • getHeading()
  • getFormSchema()
  • getOptions()

Setting a chart id

You may set a chart id:

protected static string $chartId = 'blogPostsChart';

Setting a widget height

You may set a widget height:

protected static ?int $contentHeight = 300; //px

Optionally, you can use the getContentHeight() method.

protected function getContentHeight(): ?int
{
    return 300;
}

Setting a widget footer

You may set a widget footer:

protected static ?string $footer = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';

You can also use the getFooter() method:

Custom view:

use Illuminate\Contracts\View\View;
protected function getFooter(): string|View
{
    return view('custom-footer', ['text' => 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.']);
}
<!--resources/views/custom-footer.blade.php-->
<div>
    <p class="text-danger-500">{{ $text }}</p>
</div>

Html string:

use Illuminate\Support\HtmlString;
protected function getFooter(): string|View
{
    return new HtmlString('<p class="text-danger-500">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>');
}

Filtering chart data

You can set up chart filters to change the data shown on chart. Commonly, this is used to change the time period that chart data is rendered for.

Filter forms

You may use components from the Form Builder to create custom filter forms:

use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\TextInput;

protected function getFormSchema(): array
{
    return [

        TextInput::make('title')
            ->default('My Chart'),

        DatePicker::make('date_start')
            ->default('2023-01-01'),

        DatePicker::make('date_end')
            ->default('2023-12-31')

    ];
}

The data from the custom filter form is available in the $this->filterFormData array. You can use the active filter form values within your getOptions() method:

protected function getOptions(): array
{
    $title = $this->filterFormData['title'];
    $dateStart = $this->filterFormData['date_start'];
    $dateEnd = $this->filterFormData['date_end'];

    return [
        //chart options
    ];
}

Also, if you want your chart data to update when the value of a filter changes, you have to combine reactive() with afterStateUpdated() :

use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\TextInput;

protected function getFormSchema(): array
{
    return [
        TextInput::make('title')
            ->default('My Chart')
            ->live()
            ->afterStateUpdated(function () {
                $this->updateChartOptions();
            }),
        ...
    ];
}

Single select

To set a default filter value, set the $filter property:

public ?string $filter = 'today';

Then, define the getFilters() method to return an array of values and labels for your filter:

protected function getFilters(): ?array
{
    return [
        'today' => 'Today',
        'week' => 'Last week',
        'month' => 'Last month',
        'year' => 'This year',
    ];
}

You can use the active filter value within your getOptions() method:

protected function getOptions(): array
{
    $activeFilter = $this->filter;

    return [
        //chart options
    ];
}

Live updating (polling)

By default, chart widgets refresh their data every 5 seconds.

To customize this, you may override the $pollingInterval property on the class to a new interval:

protected static ?string $pollingInterval = '10s';

Alternatively, you may disable polling altogether:

protected static ?string $pollingInterval = null;

Defer loading

This can be helpful when you have slow queries and you don't want to hold up the entire page load:

protected static bool $deferLoading = true;

protected function getOptions(): array
{
    //showing a loading indicator immediately after the page load
    if (!$this->readyToLoad) {
        return [];
    }

    //slow query
    sleep(2);

    return [
        //chart options
    ];
}

Loading indicator

You can change the loading indicator:

protected static ?string $loadingIndicator = 'Loading...';

You can also use the getLoadingIndicator() method:

use Illuminate\Contracts\View\View;
protected function getLoadingIndicator(): null|string|View
{
    return view('custom-loading-indicator');
}
<!--resources/views/custom-loading-indicator.blade.php-->
<div>
    <p class="text-danger-500">Loading...</p>
</div>

Dark mode

The dark mode is supported and enabled by default now.

Optionally, you can disable it:

protected static bool $darkMode = false;

You can also set the theme in the getOptions method:

protected function getOptions(): array
{
    return [
        'theme' => [
            'mode' => 'light' //dark
        ],
        'chart' => [
            'type' => 'bar',
            ...
        ],
        ...
    ];
}

Extra options and Formatters

You can use the extraJsOptions method to add additional options to the chart:

protected function extraJsOptions(): ?RawJs
{
    return RawJs::make(<<<'JS'
    {
        xaxis: {
            labels: {
                formatter: function (val, timestamp, opts) {
                    return val + '/24'
                }
            }
        },
        yaxis: {
            labels: {
                formatter: function (val, index) {
                    return '$' + val
                }
            }
        },
        tooltip: {
            x: {
                formatter: function (val) {
                    return val + '/24'
                }
            }
        },
        dataLabels: {
            enabled: true,
            formatter: function (val, opt) {
                return opt.w.globals.labels[opt.dataPointIndex] + ': $' + val
            },
            dropShadow: {
                enabled: true
            },
        }
    }
    JS);
}

Publishing views

Optionally, you can publish the views using:

php artisan vendor:publish --tag="filament-apex-charts-views"

Testing

composer test

Changelog

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

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

If you discover a security vulnerability within this package, please send an e-mail to [email protected].

Credits

License

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

filament-apex-charts's People

Contributors

adam-code-labx avatar anivon avatar billmn avatar cheesegrits avatar dependabot[bot] avatar github-actions[bot] avatar howdu avatar leandrocfe avatar stephanus-tantiono avatar valpuia avatar wilfredchen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

filament-apex-charts's Issues

Label not visible in light theme

Screenshot from 2023-06-03 09-14-36

Label is not visible in light mode, but in dark it's correct

"version": "1.0.3",

Updated: Label can visible if you change your theme to dark and change again.. otherwise it's like image

Problem in light mode

When I change from dark to light mode, the colors are set correctly.
image

However, when I refresh the page, this problem occurs.
image

ApexCharts is not defined after update

Hi,

I updated the filament a few weeks ago and i got an error in chrome console

Uncaught ReferenceError: ApexCharts is not defined at Proxy.init (eval at safeAsyncFunction (livewire.js?id=e2b302e9:1249:21), <anonymous>:16:38) at livewire.js?id=e2b302e9:1235:25 at tryCatch (livewire.js?id=e2b302e9:1191:14) at evaluate (livewire.js?id=e2b302e9:1215:34) at Function.<anonymous> (livewire.js?id=e2b302e9:3479:29) at flushHandlers (livewire.js?id=e2b302e9:1353:48) at stopDeferring (livewire.js?id=e2b302e9:1358:7) at deferHandlingDirectives (livewire.js?id=e2b302e9:1361:5) at initTree (livewire.js?id=e2b302e9:876:5) at livewire.js?id=e2b302e9:824:23

and the charts do not appear. the updated versions:

  • filament/filament v3.1.24
  • leandrocfe/filament-apex-charts 3.0.2

I was waiting for a newer version, I just updated to these:

  • filament/filament v3.2.10
  • leandrocfe/filament-apex-charts 3.1.2

but the error is the same.

can you help me to find the error?

thanks

Cannot install this package

Hey, do you have any idea why I always try to install this package in my Filament php 2.x project and get this message

image

Laravel can't locate Component

Hi,

I've been upgraded package from v1 to v2. But after i publish the views and try to run in filament it send me this error
image

Am i missing something?

Fix stub path for non-Windows environments

Problem

The following exception occurs:

file_get_contents(/app/vendor/leandrocfe/filament-apex-charts/src/CommandsLine.stub): Failed to open stream: No such file or directory

Steps to reproduce

Within a Linux container, run php artisan make:filament-apex-charts BlogPostsChart.

Proposed resolution

It is my understanding that Windows supports forward slashes.

Update getStubPath to use forward slashes:

        $path = Str::of(__DIR__)
            ->replace('src/Commands', 'stubs/')

If this does not work on Windows, then this works too:

        $path = Str::of(__DIR__.DIRECTORY_SEPARATOR.'..'.DIRECTORY_SEPARATOR.'..'.DIRECTORY_SEPARATOR.'stubs'.DIRECTORY_SEPARATOR)

Though, judging by FortifyServiceProvider.php, this seems like the way to go:

        $path = Str::of(__DIR__.'../../stubs/')

Component namespacing?

Hi,

I was wondering if it would be possible to namespace the used components since it is conflicting with components we use in our own project?

We use <x-header> ourselves but since installing your package, this now throws an exception. Therefore, I was wondering whether maybe it would be possible to namespace the components so it would be something like <x-filament-apex-charts::header>?

Widget Register Issue

I've create a widget and I used the on an Edit or View page, however the Filament still showing that to the dashboard even if the widget is not registered on the filament config.

Not sure if this issues is on the plug-in or on the filament it self.

Lazy Load Widgets

Would you be open to integrating this project with Livewire's deferred loading feature?

If so, would you like me to create a pull request for the changes?

I'm using a 3rd party API to populate the APEX Charts, which makes the page extremely slow to load on the first time when the data is not cached, but the deferred loading feature is a nice fix.

extraJsOptions

Filament-Apex-Charts is a wonderful package, thank you for that!

I don't know whether it is a bug or I don't understand how to use it, but I can't get the extraJsOptions to work.

I tried to replicate the Revenue bar chart from your Demo application in a simplified form.
What I want is to format the labels on the Y-axis, where the values should be prefixed with a '$'.

However, it does not show up. I tried several other parameters like the y-axis title, but nothing seems to work.

Do I miss something?

The code is as follows:

namespace App\Filament\Widgets;

use Filament\Support\RawJs;
use Illuminate\Support\Facades\Log;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class RevenueOverview extends ApexChartWidget
{
    /**
     * Chart Id
     *
     * @var string
     */
    protected static ?string $chartId = 'RevenueOverview';

    /**
     * Widget Title
     *
     * @var string|null
     */
    protected static ?string $heading = 'Revenue';

    /**
     * Chart options (series, labels, types, size, animations...)
     * https://apexcharts.com/docs/options
     *
     * @return array
     */
    protected function getOptions(): array
    {
        return [
            'chart' => [
                'type' => 'bar',
                'height' => 300,
                'stacked' => true,
                'toolbar' => [
                    'show' => false,
                ],
            ],
            'dataLabels' => [
                'enabled' => false,
            ],
            'series' => [
                [
                    'name' => 'Earnings',
                    'data' => [70, 43, 68, 103, 141, 73, 57, 92, 102, 159, 130, 184],
                ],
                [
                    'name' => 'Expenses',
                    'data' => [-7, -4, -6, -10, -14, -7, -5, -9, -10, -15, -13, -18],
                ],
            ],
        ];
    }

    protected function extraJsOptions(): ?RawJs
    {
        return RawJs::make(<<<'JS'
        {
            yaxis: {
                labels: {
                    formatter: function (val, index) {
                        return '$' + val
                    }
                }
            }
        }
        JS);
    }
}

Make chart title div empty if null is passed in header

Note: This is not an issue, it more like feature suggesstion..

I want to display pie chart, but I don't want Title and other related headings data..

If I passed protected static ?string $heading = null; or 'getHeading(return null)` It display empty div content..

I published vendor file and change according to my need like below (return header content if not null)

<div>
    @if ($heading != null)
        ... // original code

        <x-filament::hr class="py-2" />
    @endif
</div>

Will it be great to return like this (or maybe improvement) if the heading == null or other flag like noHeading

or is there any other way to display chart without header or header content (title, div content, filter etc)

Zoom buttons in toolbar doesn't work

Hi!

chart.toolbar.tools (selection, zoom, pan) and chart.zoom from docs doesn't work. Only download button works.

Docs: https://apexcharts.com/docs/interactivity/

<?php

namespace App\Filament\Widgets;

use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class ParkingMeterPaymentChart extends ApexChartWidget
{
    protected static string $chartId = 'parkingMeterPaymentChart';
    protected static ?string $heading = 'ParkingMeterPaymentChart';
    protected int | string | array $columnSpan = 'full';
    protected static ?string $pollingInterval = null;

    protected function getOptions(): array
    {
        return [
            'chart' => [
                'type' => 'bar',
                'height' => 480,
                'toolbar' => [
                    'show' => true,
                    'tools' => [
                        'download' => true,
                        'selection' => true,
                        'zoom' => true,
                        'zoomin' => true,
                        'zoomout' => true,
                        'pan' => true,
                    ],
                ],
                'zoom' => [
                    'enabled' => true
                ],
            ],
            'series' => [
                [
                    'name' => 'BasicColumnChart',
                    'data' => [7, 4, 6, 10, 14, 7, 5, 9, 10, 15, 13, 18,],
                ],
            ],
            'xaxis' => [
                'categories' => [
                    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
                ],
                'labels' => [
                    'rotate' => -90,
                    'style' => [
                        'colors' => '#9ca3af',
                    ],
                ],
            ],
            'yaxis' => [
                'labels' => [
                    'style' => [
                        'colors' => '#9ca3af',
                        'fontWeight' => 600,
                    ],
                ],
            ],
            'colors' => ['#f59e0b'],
        ];
    }
}

Xnip2023-12-08_18-28-15

Datalabel formatter

Hi,

How can I make use of the datalabel formatter?

I have the following array I return;

return [
            'chart' => [
                'type' => 'bar',
                'height' => 300,
                'animations' => [
                    'enabled' => false
                ],
            ],
            'series' => [
                [
                    'name' => 'Sales',
                    'data' => $totalSoldByProduct->pluck('total_revenue')->toArray(),
                ],
            ],
            'xaxis' => [
                'categories' => $totalSoldByProduct->pluck('name')->toArray(),
                'labels' => [
                    'style' => [
                        'colors' => '#9ca3af',
                        'fontWeight' => 600,
                    ],
                ],
            ],
            'yaxis' => [
                'labels' => [
                    'style' => [
                        'colors' => '#9ca3af',
                        'fontWeight' => 600,
                    ],
                ],
            ],
            'dataLabels' => [
                'enabled' => true,
                'formatter' => 'function(val, opts) {
                    return "Sold " + val;
                }',
                'style' => [
                    'colors' => ['#fff'],
                ],
            ],
            'colors' => ['#1da6e7'],
        ];

As you see, there is a formatter;

 'formatter' => 'function(val, opts) {
                    return "Sold " + val;
                }',

But this does not work? How can I achieve this to work?

Apex chart squashed in mobile view

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,
                ],
            ],
        ];
    }
}

Graph hidden

When I add the mount function to the widget, the graph does not appear. (Laravel 11 Filamet 3.2.88)

class PostTL extends ApexChartWidget
{
...
public function mount(Post $record=null): void
{
...
}
...
}

When I deactivate it it appears without problems

Updating chart data not working

Hey, I have problems with updating the chart data. I change the data outside of my chart component and use Livewire's Reactive attribute to trigger the update. However, nothing happens. This is my setup:

<?php

namespace App\Livewire;

use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;
use Livewire\Attributes\Reactive;

class FooChart extends ApexChartWidget
{
    #[Reactive]
    public array $data = [];

    protected function getOptions(): array
    {
        return [
            'chart' => [
                'type' => 'line',
                'height' => 300,
            ],
            'series' => [
                [
                    'name' => 'BasicLineChart',
                    'data' => $this->data,
                ],
            ],
        ];
    }
}

I've checked the source code of Filaments ChartWidget and noticed a rendering() method that is missing in ApexChartWidget. If we add that, updating works as expected:

# vendor/leandrocfe/filament-apex-charts/src/Widgets/ApexChartWidget.php

/**
 * Updates the options of the class and emits an event if the options have changed.
 */
public function updateOptions(): void
{
    if ($this->options !== $this->getOptions()) {

        $this->options = $this->getOptions();

        if (!$this->dropdownOpen) {
            $this
                ->dispatch('updateOptions', options: $this->options)
                ->self();
        }
    }
}

public function rendering(): void
{
    $this->updateOptions();
}

dropdownOpen not defined

Hello,
Every time I add a chart I get an error where "dropdownOpen" is not defined. This causes charts not to load properly and filters not to work at all.

Version:
"leandrocfe/filament-apex-charts": "^3.0",

image

Chart id is not unique when rendering component in a loop.

If I try to render a Chart Widget in a loop, all of the charts get appended to the first component.

I guess it is due to protected static string $chartId = 'apexChart' being assigned a default value. Hence

/**
* Retrieves the chart id.
*
* @return string|null The chart id.
*/
protected function getChartId(): ?string
{
    return static::$chartId ?? 'apexChart_'.Str::random(10);
}

will never append a random string.

Changing the property to protected static ?string $chartId will do the trick but I'm not sure if this leads to unwanted side effects.

image

If you think making the property nullable will do the trick, I'm happy to submit a PR.

Change on single filter doesnt update

Hi,

I copied a working graph from v2 in filament v2 to current version 3.0.1 in Filament 3.027

Upon selecting single filter, there is no update request.

public ?string $filter = '2023';

/**
 * Filter Options
 */
protected function getFilters(): ?array
{
    $years = range(now()->year, 2015);

    foreach ($years as $year) {
        $newYears[$year] = $year;
    }

    return $newYears;
}

/**
 * Chart options (series, labels, types, size, animations...)
 * https://apexcharts.com/docs/options
 *
 * @return array
 */
protected function getOptions(): array
{
    $activeFilter = $this->filter;

    $data = Trend::query(Stat::where('type', 'sales')->where('system', 'MY'))
        ->between(
            start: Carbon::create($activeFilter)->startOfYear(),
            end: Carbon::create($activeFilter)->endOfYear(),
        )
        ->perMonth()
        ->sum('data');

    return [

        'chart' => [
            'type' => 'line',
            'height' => 300,
            'toolbar' => [
                'show' => false,
            ],
        ],
        'series' => [
            [
                'name' => 'RM',
                'data' => $data->map(fn (TrendValue $value) => $value->aggregate),
                'type' => 'column',
            ],
        ],
        'stroke' => [
            'width' => [0, 4],
            'curve' => 'smooth',
        ],
        'xaxis' => [
            'categories' => $data->map(fn (TrendValue $value) => Carbon::parse($value->date)->format('M')),
            'labels' => [
                'style' => [
                    'colors' => '#9ca3af',
                    'fontWeight' => 600,
                ],
            ],
        ],
        'yaxis' => [
            'labels' => [
                'style' => [
                    'colors' => '#9ca3af',
                    'fontWeight' => 600,
                ],
            ],
        ],
        'legend' => [
            'labels' => [
                'colors' => '#9ca3af',
                'fontWeight' => 600,
            ],
        ],
        'colors' => ['#6366f1', '#38bdf8'],
        'fill' => [
            'type' => 'gradient',
            'gradient' => [
                'shade' => 'dark',
                'type' => 'vertical',
                'shadeIntensity' => 0.5,
                'gradientToColors' => ['#d946ef'],
                'inverseColors' => true,
                'opacityFrom' => 1,
                'opacityTo' => 1,
                'stops' => [0, 100],
            ],
        ],
        'plotOptions' => [
            'bar' => [
                'borderRadius' => 10,
            ],
        ],
    ];
}

public function data($i)
{
    $stat = new stat;

    return $stat->select('data')
        ->whereBetween('created_at', [now()->firstOfYear()->addMonths($i - 1)->toDateString(), now()->firstOfYear()->addMonths($i - 1)->endOfMonth()->toDateString()])
        ->sum('data');
}

The documentation were just being updated with adding reactive if using getFormSchema().

Is this a bug or something i am missing when using getFilters()

Circle chart

Hi, thanks for this awesome package,
As I checked, I think the circle type is missing, how can I add it? thanks

Rendering problem using single select filter

There is some rendering problem on single select filter change, this is the result:

Registrazione.schermo.2023-05-26.alle.15.56.01.mov

With filters form all works fine.

I have used this example code:

class TestApexTicketsChart extends ApexChartWidget
{
    protected static string $chartId = 'testApexChart';

    protected static ?string $heading = 'Test Apex Chart';

    protected int | string | array $columnSpan = 'full';

    public ?string $filter = '6_months';

    protected function getFilters(): ?array
    {
        return [
            '6_months' => 'Last 6 months',
            '12_months' => 'Last 12 months',
            '24_months' => 'Last 24 months',
        ];
    }

    protected function getOptions(): array
    {
        return [
            'chart' => [
                'type' => 'line',
                'height' => 300,
            ],
            'series' => [
                [
                    'name' => 'Test Apex Chart',
                    'data' => [2, 4, 6, 10, 14, 7, 2, 9, 10, 15, 13, 18],
                ],
            ],
            'xaxis' => [
                'categories' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            ],
        ];
    }
}

Graphs in darkmode

Hi
using the graphs in dark mode, makes labels unreadable
see screenshots
Screenshot 2023-02-02 at 10 34 25
Screenshot 2023-02-02 at 10 34 18
vs
Screenshot 2023-02-02 at 10 34 08

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.