->default(fn ($livewire) => $livewire->mountedFormComponentActionsData[0]['heading']['color']),

->default(fn ($livewire) => $livewire->mountedFormComponentActionsData[0]['heading']['color']),

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

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);