Discussion :

[merou19]

Bonjour à tous,

J'ai un projet sous Symfony 4 et bootstrap 4, mon chart s'affiche bien avec ux chart js.
Je migre vers bootstrap 5, je m'en suis sorti avec jquery, jqueryui, mon js sprécifique et tout le reste...
Il me reste un dernier problème : mon chart ne s'affiche plus.
Dans le source de ma page, j'ai bien les balises de chart js !

Code html :

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

<canvas data-controller="symfony--ux-chartjs--chart" data-view="..."></canvas>

Pour l'installation, j'ai suivi toute la procédure ici :
https://symfony.com/blog/new-in-symf...em-for-symfony

Une piste selon moi, mais peut être que c'est tout à fait autre chose : dans le code généré, j'ai

data-controller="symfony--ux-chartjs--chart"

Et dans tous les exemples que je trouve sur le web, je vois :

data-controller="@symfony/ux-chartjs/chart"

Mais je ne vois pas pourquoi j'ai ma valeur, et pas celle des exemples.

Voici les codes de mon projet :

assets/app.js

Code JavaScript :

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
import jquery from 'jquery';
 
const $ = require('jquery');
require('bootstrap');
 
import '/assets/styles/global.scss';
 
import 'bootstrap';
import '/vendor/components/jqueryui/themes/base/datepicker.css';
import '/vendor/components/jqueryui/themes/base/jquery-ui.min.css';
import '/vendor/components/jqueryui/themes/base/theme.css';
import '/public/Resources/css/monprojet.css';
 
import { startStimulusApp } from '@symfony/stimulus-bridge';
 
export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
    true,
    /\.(j|t)sx?$/
));
 
import chart from 'chart.js';
 
// start the Stimulus application
import './bootstrap';

assets/controllers.json

Code :

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

1
2
3
4
5
6
7
8
9
10
11
{
    "controllers": {
        "@symfony/ux-chartjs": {
            "chart": {
                "enabled": true,
                "fetch": "eager"
            }
        }
    },
    "entrypoints": []
}

package.json

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
{
    "devDependencies": {
        "@symfony/stimulus-bridge": "^2.0.0",
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets",
        "@symfony/webpack-encore": "^1.0.0",
        "bootstrap": "^5.0.1",
        "core-js": "^3.0.0",
        "jquery": "^3.6.0",
        "popper.js": "^1.16.1",
        "regenerator-runtime": "^0.13.2",
        "stimulus": "^2.0.0",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    },
    "dependencies": {
        "@popperjs/core": "^2.9.2",
        "chart.js": "^3.2.1",
        "sass": "^1.34.0",
        "sass-loader": "^11.0.0"
    }
}

webpack.config.js

Code JavaScript :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
const Encore = require('@symfony/webpack-encore');
 
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
 
Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/monprojet/public/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')
    .setManifestKeyPrefix('public/build/')
 
    /*
     * ENTRY CONFIG
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app', './assets/app.js')
    .addEntry('jquery-ui.min', '/vendor/components/jqueryui/jquery-ui.min.js')
    .addEntry('datepicker-fr', '/vendor/components/jqueryui/ui/i18n/datepicker-fr.js')
    .addEntry('jquery.nav', '/public/js/jquery.nav.js')
    .addEntry('me', '/public/Resources/js/monprojet.js')
 
    // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
    .enableStimulusBridge('./assets/controllers.json')
 
    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()
 
    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()
 
    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())
 
    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })
 
    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
 
    // enables Sass/SCSS support
    .enableSassLoader()
 
    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()
 
    // uncomment if you use React
    //.enableReactPreset()
 
    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())
 
    // uncomment if you're having problems with a jQuery plugin
    .autoProvidejQuery()
;
 
module.exports = Encore.getWebpackConfig();

Dans ma vue twig :

Code twig :

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

1
2
3
...
{{ render_chart(chart) }}
...

Dans mon controller :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
$datasets = ...;
 
$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' => $datasets,
]);
 
$chart->setOptions([/* ... */]);
 
return $this->render('Monprojet/vue.html.twig', array(
	'chart' => $chart,
));

Merci d'avance pour votre aide !

[merou19]

Bon, je m'autorépond puisque c'est résolu

Par yarn, j'avais installé les dernières versions de chaque package.
Pour chart.js, j'étais à la version 3.3.0.
Je suis redescendu à la 2.9.4, et mon chart s'affiche nickel

Voilà, en espérant que ça aide quelqu'un qui tombe sur mon sujet...