F
Filamentβ€’5mo 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);
6 Replies
JJSanders
JJSandersβ€’5mo ago
What is your question? Looks like you have answered it yourself
SOIX
SOIXβ€’5mo 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β€’5mo ago
Did you run npm again?
SOIX
SOIXβ€’5mo ago
npm run build? yes several times
SOIX
SOIXβ€’5mo 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
SOIXβ€’5mo ago
Anyone? πŸ˜„