Symfony UX & Chart.js

Hey @julien_bonnier!

That opinion makes sense to me :). For registering plugins, this part must be done in js. It is possible and not too bad though I wish it were even easier. We have a spot in the docs about this, hopefully it clears things up. But let me know one way or another https://symfony.com/bundles/ux-chartjs/current/index.html#using-plugins

Cheers!

Hey @escobarcampos ,

That's OK that you have a link, that points to the chart JS version from the "symfony/ux-chartjs" PHP package, it's done this way to do not have mismatch version between the ChartJS lib and symfony/ux-chartjs PHP package, so don't worry to much about that internal symlink, as soon as the chart works for you - everything is great :)

What about yarn install --force - yeah, seems the new version of Yarn does not have that option. Not sure what exactly you should use, probably yarn install should work well there even without --force... so you can keep using Yarn by simply running yarn install... and if something is not working as expected - try to rm -rf node_modules and then yarn install again, it should do the trick :)

Cheers!

Hey Richard!

Nah, it's a pretty reasonable questions ;).

First, nice job setting up the JavaScript to hook into the chart!

How do I listen to an input tag in the twig and update the chart when the value changes?

Here is what I would do:

A) Add a stimulus_action() to the input element - make it call, for example, some updateChart() method on your controller.

B) Inside of _onConnect(event) (for reference for others, you correctly got that from the documentation - https://symfony.com/bundles/ux-chartjs/current/index.html#extend-the-default-behavior - set the Chart object on a property on your Stimulus controller:

_onConnect(event) {
    // set the Chart object on a property so you can use it later
    this.chart = event.detail.chart;
}

C) Finally, inside of the updateChart() method, you can use the this.chart object and any other info you need to update the chart:

updateChart(event) {
    const input = event.target;
    const inputValue = input.value;

    // to update the chart, follow the chart.js docs
    // e.g. https://www.chartjs.org/docs/latest/developers/updates.html
    this.chart.data.datasets...
}

I'm assuming that you want to update the Chart object in JavaScript by hand. Another thing you could do is make an Ajax call to some Symfony controller that returns a new, fully-rendered Chart, which you could then put onto the page to render a brand new chart.

Cheers!

Hey danresmejia!

Hmm, well that's no fun! So, if you're using Version 3 of Stimulus (the one where the package name is "@hotwired/stimulus" and not "stimulus"), then you need version 2.0 (or greater) of symfony/ux-chartjs. Really, the only difference between the 1.x and 2.x of the UX packages is that 2.x starts importing @hotwired/stimulus (instead of stimulus).

Hope that clarifies!

Cheers!

Hey @Hainovsky,

Thanks for sharing detailed explanation. BTW exact this installation string is mentioned in course code and also there is video note ;)

Cheers!

Hey Emilio,

Sure, it should work! With EasyAdminBundle v3 you can add Webpack Encore entries, that's exactly what you need instead of static addJsFile() method calls. You just need to import the ChartJS code in the Webpack Encore entry and write the implementation of it.

Cheers!

Sorry, I was referring to symfony / ux-chartjs. Can it be integrated into the EasyAdmin 3v dashboard?

Yes, i was integrate it yesterday

1) need rewrite layout.html.twig
1.1) create folder templates/bundles/Easyadmin/
1.2) create in this folder layout.html.twig
1.3) copy intire code from vendor/...../views/layout.html.twig yo your 1.2)
1.4) add stymulus to css and to js like a encore_entry_link_tags('app')
1.5) yarn watch
1.6) create own controller in admin/Dashboard with php code from symfony/ux and render 1.7
1.7) add your page with chart to template like in body {{ render_chart(chart) }}
1.8) enjoy your work

I do not know if it is allowed by symfonycasts rules, but i can create tutorial and make repository and put here link.

RYAN should allow me to do it.

Thanks,
What I did was add a new JS (called dashboard.js inside import './bootstrap';) in webpack.config.js and then in DashboardController.php (EasyAdmin) add the assets with -> addWebpackEncoreEntry ('dashboard'). [in configureAssets() method]
It worked!.
Not override easyadmin's layout.html, but I tried that method and it worked too.

Thanks! Also worked for me!

1) I've created <b>dashboard.js</b> in <b>/assets/scripts/</b> with content:
import '../bootstrap';

Used ".." cause of my folder structure.

2) Injected <b>dashboard.js</b> into <b>webpack.config.js</b> file:
.addEntry('dashboard', './assets/scripts/dashboard.js')

3) Overrided <b>configureAssets</b> method in DashboardController class:

public function configureAssets(): Assets {
        return parent::configureAssets()->addWebpackEncoreEntry('dashboard');
}

Hey Dmitriy,

Thank you for sharing your solution and confirming it works for you too!

Cheers!

Hey Emilio,

Great! I'm happy it worked for you. Thanks for sharing your solution with others!

Cheers!

Solved - 'backgroundColor' => 'rgba(255, 255, 255, 0)', Last parameter is transparency. Thanks to all

Hey Maxim,

You're right, good catch! I'm glad you were able to solve this by yourself

Cheers!