Register chart controller

How can we register new chart controller on existing filament chart object?

import { ChoroplethController } from 'chartjs-chart-geo';

// Register the controller
Chart.register(ChoroplethController);

import { ChoroplethController } from 'chartjs-chart-geo';

// Register the controller
Chart.register(ChoroplethController);

6 Replies

JJSanders•10mo ago

What is your question? Looks like you have answered it yourself

SOIXOP•10mo ago

Well this doesnt work... It still says this one is not registered Alpine Expression Error: "choropleth" is not a registered controller. I added this into app.js:

import { Chart } from 'chart.js';
import { ChoroplethController } from 'chartjs-chart-geo';

// Register the controller
Chart.register(ChoroplethController);

import { Chart } from 'chart.js';
import { ChoroplethController } from 'chartjs-chart-geo';

// Register the controller
Chart.register(ChoroplethController);

In filament chart.js file custom chart function is exported, but when initing the chart itself it may doesnt come with registered plugin And this is my widget code:

protected function getData(): array
    {
        return $this->loadJsonData();
    }

    protected function getType(): string
    {
        return 'choropleth';
    }

    protected function getOptions(): RawJs
    {
        return RawJs::make(<<<JS
            {
                scales: {
                    projection: {
                        axis: 'x',
                        projection: 'albersUsa',
                    },
                    color: {
                        axis: 'x',
                        quantize: 5,
                        legend: {
                        position: 'bottom-right',
                        align: 'right',
                        },
                    },
                },
            }
        JS);
    }

    protected function loadJsonData()
    {
        $path = base_path('node_modules/world-atlas/countries-50m.json');
        $json = file_get_contents($path);
        $data = json_decode($json, true);
        $countries = collect($data['objects']['countries']['geometries']);
        return [
            'labels' => $countries->map(fn ($country) => $country['properties']['name'])->toArray(),
            'datasets' => [
                [
                    'label' => 'Geo data chart',
                    'data' => $countries->map(fn ($country) => [
                        'feature' => $country,
                        'value' => rand(1,1000)
                    ])->toArray(),
                    'backgroundColor' => '#36A2EB',
                    'borderColor' => '#9BD0F5',
                ],
            ],
        ];
    }

protected function getData(): array
    {
        return $this->loadJsonData();
    }

    protected function getType(): string
    {
        return 'choropleth';
    }

    protected function getOptions(): RawJs
    {
        return RawJs::make(<<<JS
            {
                scales: {
                    projection: {
                        axis: 'x',
                        projection: 'albersUsa',
                    },
                    color: {
                        axis: 'x',
                        quantize: 5,
                        legend: {
                        position: 'bottom-right',
                        align: 'right',
                        },
                    },
                },
            }
        JS);
    }

    protected function loadJsonData()
    {
        $path = base_path('node_modules/world-atlas/countries-50m.json');
        $json = file_get_contents($path);
        $data = json_decode($json, true);
        $countries = collect($data['objects']['countries']['geometries']);
        return [
            'labels' => $countries->map(fn ($country) => $country['properties']['name'])->toArray(),
            'datasets' => [
                [
                    'label' => 'Geo data chart',
                    'data' => $countries->map(fn ($country) => [
                        'feature' => $country,
                        'value' => rand(1,1000)
                    ])->toArray(),
                    'backgroundColor' => '#36A2EB',
                    'borderColor' => '#9BD0F5',
                ],
            ],
        ];
    }

JJSanders•10mo ago

Did you run npm again?

SOIXOP•10mo ago

npm run build? yes several times

SOIXOP•10mo ago

It could be time when it is done, before or after the filament chart init... But even if I render this script before any other script in filament, still doesnt work.

FilamentView::registerRenderHook(
    PanelsRenderHook::SCRIPTS_BEFORE,
    fn (): string => Blade::render('@vite(\'resources/js/mapChart.js\')'),
);

FilamentView::registerRenderHook(
    PanelsRenderHook::SCRIPTS_BEFORE,
    fn (): string => Blade::render('@vite(\'resources/js/mapChart.js\')'),
);

SOIXOP•10mo ago

Anyone? 😄

Gaming

Programming

Register chart controller