README

Symfony UX ECharts est un bundle UX permettant d’intégrer facilement Apache ECharts dans vos templates Twig, en combinant PHP, Twig et Stimulus.

✅ Installation

composer require hecht-a/ux-echarts
npm install --force

🚀 Utilisation

Dans un contrôleur Symfony :

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;
use HechtA\UX\ECharts\Builder\EChartsBuilderInterface;
use HechtA\UX\ECharts\Model\ECharts;

final class HomeController extends AbstractController
{
    #[Route('/', name: 'home.index')]
    public function index(EChartsBuilderInterface $builder): Response
    {
        $chart = $builder->createECharts('weekly_chart')
            ->setOptions([
                'xAxis' => ['type' => 'category', 'data' => ['Mon', 'Tue', 'Wed']],
                'yAxis' => ['type' => 'value'],
            ])
            ->addSerie([
                'type' => ECharts::TYPE_LINE,
                'data' => [150, 230, 224],
            ]);

        return $this->render('chart/index.html.twig', [
            'chart' => $chart,
        ]);
    }
}

Dans un template Twig :

{{ render_echarts(chart) }}

Cela génère un <div> avec tous les attributs data-controller nécessaires pour que Stimulus initialise automatiquement le graphique.

🎨 Thèmes

Vous pouvez ajouter vos propres thèmes ECharts et choisir celui à utiliser :

$chart
    ->addTheme('dark', [...])
    ->addTheme('vintage', [...])
    ->useTheme('dark');

Ces thèmes seront automatiquement enregistrés via echarts.registerTheme.

⚡ Personnalisation HTML

Ajoutez des attributs personnalisés au conteneur HTML :

$chart->setAttributes([
    'id' => 'custom-chart',
    'class' => 'my-chart mb-4',
]);

Si vous utilisez d'autres controllers Stimulus :

$chart->setAttributes([
    'data-controller' => 'custom-controller',
]);

Le controller @hecht-a/ux-echarts/echarts est toujours injecté automatiquement.

🧩 API PHP

🧪 Exemple complet

$chart = $builder->createECharts()
    ->setOptions([
        'title' => ['text' => 'Example'],
        'xAxis' => ['type' => 'category', 'data' => ['A', 'B', 'C']],
        'yAxis' => ['type' => 'value'],
    ])
    ->setSeries([
        ['type' => ECharts::TYPE_BAR, 'data' => [10, 20, 30]],
        ['type' => ECharts::TYPE_LINE, 'data' => [15, 25, 35]],
    ])
    ->addTheme('dark', [...])
    ->useTheme('dark')
    ->setAttributes(['class' => 'chart-container']);