SpiceManagementSystem/app/Filament/User/Resources/SpiceResource/Widgets/SpiceChart.php

<?php

namespace App\Filament\User\Resources\SpiceResource\Widgets;

use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;
use Filament\Support\RawJs;
use App\Models\Spice;

class SpiceChart extends ApexChartWidget {
  protected static ?string $chartId = 'spiceChart';
  protected static ?string $heading = 'Rohstoffmengen im Lager';

  protected function getOptions(): array {
    $data = Spice::all();

    $data_array = [];
    $labels = [];
    foreach ($data as $label) {
      if ($label->unit == 'grams') {
        $data_array[] = round($label->quantity / 1000, 2);
        $labels[] = $label->name . ' (kg)';
      } else {
        $data_array[] = $label->quantity;
        if ($label->unit == 'pieces') {
          $labels[] = $label->name . ' (Stück)';
        } elseif ($label->unit == 'liter') {
          $labels[] = $label->name . ' (Liter)';
        } else {
          $labels[] = $label->name . ' (' . ucfirst($label->unit) . ')';
        }
      }
    }



    return [
      'chart' => [
        'type' => 'bar',
        'height' => 300,
      ],
      'series' => [
        [
          'name' => 'BasicBarChart',
          'data' => $data_array,
        ],
      ],
      'xaxis' => [
        'categories' => $labels,
        'labels' => [
          'style' => [
            'fontFamily' => 'inherit',
          ],
        ],
      ],
      'yaxis' => [
        'labels' => [
          'style' => [
            'fontFamily' => 'inherit',
          ],
        ],
      ],
      'colors' => ['#f59e0b'],
      'plotOptions' => [
        'bar' => [
          'borderRadius' => 3,
          'horizontal' => false,
        ],
      ],
    ];
  }

  protected function extraJsOptions(): ?RawJs {
    $urls = \App\Models\Spice::all()
        ->map(fn ($s) => \App\Filament\User\Resources\SpiceResource::getUrl('edit', ['record' => $s->id]))
        ->values()
        ->toJson();

    return RawJs::make(<<<JS
    {
        chart: {
            events: {
                dataPointSelection: function(event, chartContext, config) {
                    var urls = {$urls};
                    var url = urls[config.dataPointIndex];
                    if (url) window.location.href = url;
                }
            }
        },
        xaxis: {
            labels: {
                formatter: function (val) {
                    return val.replace('( ', '(')
                }
            }
        },
        dataLabels: {
            enabled: true,
            formatter: function (val, opt) {
                return val+''+opt.w.globals.labels[opt.dataPointIndex].match(/\((.*?)\)/)[1]
            },
            dropShadow: {
                enabled: true
            }
        }
    }
    JS);
  }
}