diff --git a/src/Chartjs/DependencyInjection/ChartjsExtension.php b/src/Chartjs/DependencyInjection/ChartjsExtension.php
index 3bb67ced6fe..27eb10bea6b 100644
--- a/src/Chartjs/DependencyInjection/ChartjsExtension.php
+++ b/src/Chartjs/DependencyInjection/ChartjsExtension.php
@@ -13,10 +13,12 @@
use Symfony\Component\DependencyInjection\ContainerBuilder;
use Symfony\Component\DependencyInjection\Definition;
+use Symfony\Component\DependencyInjection\Reference;
use Symfony\Component\HttpKernel\DependencyInjection\Extension;
use Symfony\UX\Chartjs\Builder\ChartBuilder;
use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
use Symfony\UX\Chartjs\Twig\ChartExtension;
+use Symfony\WebpackEncoreBundle\Twig\StimulusTwigExtension;
use Twig\Environment;
/**
@@ -38,9 +40,10 @@ public function load(array $configs, ContainerBuilder $container)
->setPublic(false)
;
- if (class_exists(Environment::class)) {
+ if (class_exists(Environment::class) && class_exists(StimulusTwigExtension::class)) {
$container
->setDefinition('chartjs.twig_extension', new Definition(ChartExtension::class))
+ ->addArgument(new Reference('webpack_encore.twig_stimulus_extension'))
->addTag('twig.extension')
->setPublic(false)
;
diff --git a/src/Chartjs/README.md b/src/Chartjs/README.md
index 5cfb730b2c8..d720b142307 100644
--- a/src/Chartjs/README.md
+++ b/src/Chartjs/README.md
@@ -68,7 +68,8 @@ class HomeController extends AbstractController
All options and data are provided as-is to Chart.js. You can read
[Chart.js documentation](https://www.chartjs.org/docs/latest/) to discover them all.
-Once created in PHP, a chart can be displayed using Twig:
+Once created in PHP, a chart can be displayed using Twig if installed
+(requires [Symfony Webpack Encore](https://symfony.com/doc/current/frontend/encore/installation.html)):
```twig
{{ render_chart(chart) }}
diff --git a/src/Chartjs/Resources/assets/src/controller.ts b/src/Chartjs/Resources/assets/src/controller.ts
index 08032494023..f2286dfb30c 100644
--- a/src/Chartjs/Resources/assets/src/controller.ts
+++ b/src/Chartjs/Resources/assets/src/controller.ts
@@ -13,17 +13,16 @@ import { Controller } from '@hotwired/stimulus';
import { Chart } from 'chart.js';
export default class extends Controller {
+ static values = {
+ view: Object,
+ };
+
connect() {
if (!(this.element instanceof HTMLCanvasElement)) {
throw new Error('Invalid element');
}
- const viewData = this.element.getAttribute('data-view');
- if (!viewData) {
- throw new Error('Missing data-view attribute.');
- }
-
- const payload = JSON.parse(viewData);
+ const payload = this.viewValue;
if (Array.isArray(payload.options) && 0 === payload.options.length) {
payload.options = {};
}
diff --git a/src/Chartjs/Resources/assets/test/controller.test.ts b/src/Chartjs/Resources/assets/test/controller.test.ts
index 604c4c99787..b58545f1a60 100644
--- a/src/Chartjs/Resources/assets/test/controller.test.ts
+++ b/src/Chartjs/Resources/assets/test/controller.test.ts
@@ -46,7 +46,7 @@ describe('ChartjsController', () => {
`);
@@ -68,7 +68,7 @@ describe('ChartjsController', () => {
`);
diff --git a/src/Chartjs/Tests/Kernel/TwigAppKernel.php b/src/Chartjs/Tests/Kernel/TwigAppKernel.php
index 5ecd466be86..8287121fd20 100644
--- a/src/Chartjs/Tests/Kernel/TwigAppKernel.php
+++ b/src/Chartjs/Tests/Kernel/TwigAppKernel.php
@@ -17,6 +17,7 @@
use Symfony\Component\DependencyInjection\ContainerBuilder;
use Symfony\Component\HttpKernel\Kernel;
use Symfony\UX\Chartjs\ChartjsBundle;
+use Symfony\WebpackEncoreBundle\WebpackEncoreBundle;
/**
* @author Titouan Galopin
@@ -29,7 +30,7 @@ class TwigAppKernel extends Kernel
public function registerBundles(): iterable
{
- return [new FrameworkBundle(), new TwigBundle(), new ChartjsBundle()];
+ return [new FrameworkBundle(), new TwigBundle(), new WebpackEncoreBundle(), new ChartjsBundle()];
}
public function registerContainerConfiguration(LoaderInterface $loader)
@@ -37,6 +38,7 @@ public function registerContainerConfiguration(LoaderInterface $loader)
$loader->load(function (ContainerBuilder $container) {
$container->loadFromExtension('framework', ['secret' => '$ecret', 'test' => true]);
$container->loadFromExtension('twig', ['default_path' => __DIR__.'/templates', 'strict_variables' => true, 'exception_controller' => null]);
+ $container->loadFromExtension('webpack_encore', ['output_path' => '%kernel.project_dir%/public/build']);
$container->setAlias('test.chartjs.builder', 'chartjs.builder')->setPublic(true);
$container->setAlias('test.chartjs.twig_extension', 'chartjs.twig_extension')->setPublic(true);
diff --git a/src/Chartjs/Tests/Twig/ChartExtensionTest.php b/src/Chartjs/Tests/Twig/ChartExtensionTest.php
index 60e84837158..f2e51ade09d 100644
--- a/src/Chartjs/Tests/Twig/ChartExtensionTest.php
+++ b/src/Chartjs/Tests/Twig/ChartExtensionTest.php
@@ -58,10 +58,7 @@ public function testRenderChart()
);
$this->assertSame(
- '',
+ '',
$rendered
);
}
diff --git a/src/Chartjs/Twig/ChartExtension.php b/src/Chartjs/Twig/ChartExtension.php
index f9e336e4716..13928cb81b4 100644
--- a/src/Chartjs/Twig/ChartExtension.php
+++ b/src/Chartjs/Twig/ChartExtension.php
@@ -12,6 +12,7 @@
namespace Symfony\UX\Chartjs\Twig;
use Symfony\UX\Chartjs\Model\Chart;
+use Symfony\WebpackEncoreBundle\Twig\StimulusTwigExtension;
use Twig\Environment;
use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;
@@ -24,6 +25,13 @@
*/
class ChartExtension extends AbstractExtension
{
+ private $stimulus;
+
+ public function __construct(StimulusTwigExtension $stimulus)
+ {
+ $this->stimulus = $stimulus;
+ }
+
public function getFunctions(): array
{
return [
@@ -35,11 +43,13 @@ public function renderChart(Environment $env, Chart $chart, array $attributes =
{
$chart->setAttributes(array_merge($chart->getAttributes(), $attributes));
- $html = '
-