UX Live Component + Chart JS

L’objectif va être d’intégrer le code de Chart JS non plus dans un contrôleur comme dans le chapitre précédent, mais dans un composant Live.

Le composant

On commence par créer un composant live :

symfony console make:twig-component StatComponent

À l’intérieur du fichier src/Twig/Components/StatComponent.php, on ajoute un constructeur pour avoir le service ChartBuilderInterface et une fonction qui a pour objectif de créer le graphique.

public function __construct(
    private ChartBuilderInterface $chartBuilder
) {}

#[ExposeInTemplate]
public function showChartWeek() {
    $chart = $this->chartBuilder->createChart(Chart::TYPE_BAR);

    $chart->setData([
        'labels' => ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'],
        'datasets' => [
            [
                'label' => 'Ma semaine',
                'backgroundColor' => 'rgb(255, 99, 132)',
                'borderColor' => 'rgb(255, 99, 132)',
                'data' => [0, 10, 5, 2, 20, 30, 45],
            ],
        ],
    ]);

    $chart->setOptions([
        'scales' => [
            'y' => [
                'suggestedMin' => 0,
                'suggestedMax' => 100,
            ],
        ],
    ]);

    return $chart;
}

La fonction est similaire au code du contrôleur du chapitre précédent. Elle est précédée de l’attribut #[ExposeInTemplate], afin que cette fonction soit accessible dans le code Twig du composant et on retourne l’objet $chart.

Dans le fichier templates/components/StatComponent.html.twig, on appelle la fonction showChartWeek comme argument de la fonction render_chart.

<div{{ attributes }}>
    {{ render_chart(showChartWeek)}}
</div>

Il est alors possible d’ajouter le composant à un fichier twig standard.

Modification Live du graphique

Pour l’instant, il n’y a pas d’intérêt particulier à utiliser un composant live plutôt qu’un contrôleur. Nous allons voir comment changer sans chargement de la page le graphique.

Pour cela, on va commencer par ajouter un attribut liveProp pour indiquer le graphique à afficher.

Dans le fichiersrc/Twig/Components/StatComponent.php, ajoutons l’attribut :

#[LiveProp(writable: true)]
public ?string $currentPeriod = "1";

et modifions le code de la fonction showChartWeek pour modifier le graphique en fonction de la valeur de $currentPeriod.

$chart = $this->chartBuilder->createChart(Chart::TYPE_BAR);

if ($this->currentPeriod == "1") {
    $dataset = [
            'label' => 'Cette semaine',
            'backgroundColor' => 'rgb(255, 99, 132)',
            'borderColor' => 'rgb(255, 99, 132)',
            'data' => [0, 10, 5, 2, 20, 30, 45],
        ];
} else if ($this->currentPeriod == "-1") {
    $dataset = [
            'label' => 'La semaine dernière',
            'backgroundColor' => 'rgb(175, 184, 181)',
            'borderColor' => 'rgb(175, 184, 181)',
            'data' => [15, 20, 30, 17, 20, 30, 50],
        ];
}

$chart->setData([
    'labels' => ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'],
    'datasets' => [
        $dataset,
    ],
]);

Puis ajoutons une balise select dans le code Twig du composant, ce qui donnera le fichier templates/components/StatComponent.html.twig :

<div{{attributes}}>
	<div>
		<label for="period">Choisir la période</label>
		<select name="" id="period" data-model="currentPeriod">
			<option value="1">Cette semaine</option>
			<option value="-1">La semaine dernière</option>
		</select>
	</div>
    <div data-loading="addClass(opacity-50)">
        {{ render_chart(showChartWeek) }}
    </div>
</div>

L’attribut data-loading permet d’appliquer du css lors du chargement du graphique, afin d’indiquer que le chargement du nouveau graphique est en cours.