F
Filament•13mo ago
SOIX

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);
7 Replies
JJSanders
JJSanders•13mo ago
What is your question? Looks like you have answered it yourself
SOIX
SOIXOP•13mo 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
JJSanders•13mo ago
Did you run npm again?
SOIX
SOIXOP•13mo ago
npm run build? yes several times
SOIX
SOIXOP•13mo 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\')'),
);
No description
SOIX
SOIXOP•13mo ago
Anyone? 😄
Shavik
Shavik•2w ago
Did you ever figure this out? I'm in need of this chart as well 🙂

Did you find this page helpful?