Discussion :

[bndd24]

Bonjour, je ne trouve aucun tuto sur le nouveau ecosystem UX Symfony

https://symfony.com/blog/new-in-symf...em-for-symfony
https://github.com/symfony/ux

par exemple :
pour : https://github.com/symfony/ux-dropzone
- Comment uploader plusieurs fichiers ?

pour : https://github.com/symfony/ux-cropperjs
- Comment récupérer (uploader) le portrait (le crop quoi..) de la personne ? la partie traitement du crop !

pour : https://github.com/symfony/ux-chartjs
- Comment générer des data dans son controller ou encore comment faire 12 mois glissants plutôt qu'une année civile ?

Pour le moment l'ecosystem est trop récent donc je ne trouve rien ou seulement une ou deux vidéos sur YouTube mais je suis sur ma faim..

merci.

[Viduc]

Salut,

perso c'est le genre de truc dans lequel je ne vais pas me lancer de suite... déjà l'intégration simple des fichiers js ou css avec webpack me parait êtr eune usine à gaz pour faire de simple asset...

Vue le nombre de module disponibles je pense que ce n'est pas encore mure donc pas illogique de ne rien trouver la dessus,

bon courage pour tes recherches !

[_Thomas]

Salut,

Il y a des tutoriels en préparation du côté de SymfonyCasts :

• https://symfonycasts.com/screencast/stimulus
• https://symfonycasts.com/screencast/turbo

[merou19]

Bonjour,

Merci pour ce sujet, je ne connaissais pas ces bundles, et je commence à tester le UX Chart.

Pour l'instant, je prends l'exemple ici, pour voir si un chart s'affiche sur ma page :
https://symfony.com/blog/new-in-symf...em-for-symfony

J'ai suivi toute la procédure d'installation, ça me semble ok chez moi.
Mais au lancement de ma page contenant le chart, j'ai le message :

Return value of App\Controller\AdminController::admin_test_chart() must be an instance of App\Controller\Response, instance of Symfony\Component\HttpFoundation\Response returned

Mon controleur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
use Symfony\UX\Chartjs\Model\Chart;
 
...
 
public function admin_test_chart(ChartBuilderInterface $chartBuilder): Response
{
	$chart = $chartBuilder->createChart(Chart::TYPE_LINE);
	$chart->setData([
		'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
		'datasets' => [
			[
				'label' => 'My First dataset',
				'backgroundColor' => 'rgb(255, 99, 132)',
				'borderColor' => 'rgb(255, 99, 132)',
				'data' => [0, 10, 5, 2, 20, 30, 45],
			],
		],
	]);
 
	$chart->setOptions([/* ... */]);
 
	return $this->render('Admin/admin_test_chart.html.twig', array(
		'chart' => $chart,
	));
}

Ma route :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
admin_test_chart:
    path:      /admin_test_chart
    defaults: { _controller: App\Controller\AdminController::admin_test_chart }

Je ne vois vraiment pas comment corriger ce problème, vous avez des idées svp ?

Merci d'avance !

[merou19]

Rebonjour,

J'ai eu un peu de temps pour me repencher sur le bundle chartjs.
Je n'arrive pas encore à le faire marcher, mais avec la modif suivante, ma vue s'affiche : dans ma définition de ma fonction admin_test_chart, j'ai enlevé le ': response' à la fin.

Ma page n'affiche pas le chart, mais juste un espace vide.
Et à cet endroit, j'ai le code suivant dans la source de ma page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<canvas
data-controller="symfony--ux-chartjs--chart"
data-view="&#x7B;&quot;type&quot;&#x3A;&quot;line&quot;,&quot;data&quot;&#x3A;&#x7B;&quot;labels&quot;&#x3A;&#x5B;&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;&#x5D;,&quot;datasets&quot;&#x3A;&#x5B;&#x7B;&quot;label&quot;&#x3A;&quot;My First dataset&quot;,&quot;backgroundColor&quot;&#x3A;&quot;rgb&#x28;255, 99, 132&#x29;&quot;,&quot;borderColor&quot;&#x3A;&quot;rgb&#x28;255, 99, 132&#x29;&quot;,&quot;data&quot;&#x3A;&#x5B;0,10,5,2,20,30,45&#x5D;&#x7D;&#x5D;&#x7D;,&quot;options&quot;&#x3A;&#x7B;&quot;scales&quot;&#x3A;&#x7B;&quot;yAxes&quot;&#x3A;&#x5B;&#x7B;&quot;ticks&quot;&#x3A;&#x7B;&quot;min&quot;&#x3A;0,&quot;max&quot;&#x3A;100&#x7D;&#x7D;&#x5D;&#x7D;&#x7D;&#x7D;"></canvas>

Donc mon controleur a bien généré quelque chose.
Je suis en php 7.4 et SF 4.4.19, donc je pense avoir ces prérequis.

Et pour être sur d'avoir les bibliothèques de charjs, j'ai ajouté dans mon base.html.twig :
La feuille de style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css">

Et le script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>

Quelqu'un a une idée svp ?
Merci d'avance.

[merou19]

Pour moi, problème résolu, et j'ai un bôôôôôôô graphique qui s'affiche

C'était un problème de config de Webpack Encore sur ce projet, qui ne trouvait pas les css et js de chartjs. Et j'ai viré les 2 bibliothèques que j'avais codé en dur.

Bon, je vais essayer avec mes vraies données, je vous dirais ce que ça donne...

[merou19]

Pour la question suivante dans le mail initial de ce sujet :

Comment générer des data dans son controller

Réponse rapide, là je n'ai pas beaucoup de temps, je développe à la demande si besoin, je pense que mon exemple est suffisant...

Voici un exemple de ce que j'ai fait.
Je crée mon tableau $dataset dans mon contrôleur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$tablo[$annee][$mois] = ...; // plein de code pour récupérer les valeurs dans ma base de données
 
$dataset = [];
$dataset['label'] = $annee;
$dataset['borderColor'] = 'rgb(200, 100, 150)';
 
// boucler sur les mois
$data = [];
 
for ($mois = 1; $mois <= 12; $mois++) {
	// traiter le mois $mois
	array_push($data, $tablo[$annee][$mois]);
}
 
$dataset['data'] = $data;
 
$chart = $chartBuilder->createChart(Chart::TYPE_LINE);
 
$chart->setData([
	'labels' => ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
	'datasets' => $dataset,
]);
 
$chart->setOptions([/* ... */]);
 
return $this->render('Visit/compteurs.html.twig', array(
	'chart' => $chart,
));

En espérant que ça aide...