final tweaks

weaverryan · weaverryan · commit 2fad4260cbe8 · 2023-03-13T13:52:46.000-04:00
diff --git a/src/Autocomplete/assets/src/controller.ts b/src/Autocomplete/assets/src/controller.ts
@@ -4,11 +4,11 @@ import { TPluginHash } from 'tom-select/dist/types/contrib/microplugin';
 import { RecursivePartial, TomSettings, TomTemplates } from 'tom-select/dist/types/types';
 
 export interface AutocompletePreConnectOptions {
-    options: any
+    options: any;
 }
 export interface AutocompleteConnectOptions {
-    tomSelect: TomSelect
-    options: any
+    tomSelect: TomSelect;
+    options: any;
 }
 
 export default class extends Controller {
@@ -393,7 +393,7 @@ export default class extends Controller {
         }
 
         if (changeDisabledState) {
-            this.changeTomSelectDisabledState((this.formElement.disabled));
+            this.changeTomSelectDisabledState(this.formElement.disabled);
         }
 
         if (changePlaceholder) {
diff --git a/src/Chartjs/assets/dist/controller.d.ts b/src/Chartjs/assets/dist/controller.d.ts
@@ -4,6 +4,8 @@ export default class extends Controller {
     static values: {
         view: ObjectConstructor;
     };
+    private chart;
     connect(): void;
+    viewValueChanged(): void;
     private dispatchEvent;
 }
diff --git a/src/Chartjs/assets/dist/controller.js b/src/Chartjs/assets/dist/controller.js
@@ -2,6 +2,10 @@ import { Controller } from '@hotwired/stimulus';
 import Chart from 'chart.js/auto';
 
 class default_1 extends Controller {
+    constructor() {
+        super(...arguments);
+        this.chart = null;
+    }
     connect() {
         if (!(this.element instanceof HTMLCanvasElement)) {
             throw new Error('Invalid element');
@@ -15,8 +19,23 @@ class default_1 extends Controller {
         if (!canvasContext) {
             throw new Error('Could not getContext() from Element');
         }
-        const chart = new Chart(canvasContext, payload);
-        this.dispatchEvent('connect', { chart });
+        this.chart = new Chart(canvasContext, payload);
+        this.dispatchEvent('connect', { chart: this.chart });
+    }
+    viewValueChanged() {
+        if (this.chart) {
+            this.chart.data = this.viewValue.data;
+            this.chart.options = this.viewValue.options;
+            this.chart.update();
+            const parentElement = this.element.parentElement;
+            if (parentElement && this.chart.options.responsive) {
+                const originalWidth = parentElement.style.width;
+                parentElement.style.width = (parentElement.offsetWidth + 1) + 'px';
+                setTimeout(() => {
+                    parentElement.style.width = originalWidth;
+                }, 0);
+            }
+        }
     }
     dispatchEvent(name, payload) {
         this.dispatch(name, { detail: payload, prefix: 'chartjs' });
diff --git a/src/Chartjs/assets/src/controller.ts b/src/Chartjs/assets/src/controller.ts
@@ -19,6 +19,8 @@ export default class extends Controller {
         view: Object,
     };
 
+    private chart: Chart | null = null;
+
     connect() {
         if (!(this.element instanceof HTMLCanvasElement)) {
             throw new Error('Invalid element');
@@ -35,9 +37,32 @@ export default class extends Controller {
         if (!canvasContext) {
             throw new Error('Could not getContext() from Element');
         }
-        const chart = new Chart(canvasContext, payload);
+        this.chart = new Chart(canvasContext, payload);
+
+        this.dispatchEvent('connect', { chart: this.chart });
+    }
 
-        this.dispatchEvent('connect', { chart });
+    /**
+     * If the underlying data or options change, let's update the chart!
+     */
+    viewValueChanged(): void {
+        if (this.chart) {
+            this.chart.data = this.viewValue.data;
+            this.chart.options = this.viewValue.options;
+            this.chart.update();
+
+            // Updating the chart seems to sometimes result in a chart that is
+            // much smaller than the canvas size. Resizing the parent element
+            // triggers a mechanism in Chart.js that fixes the size.
+            const parentElement = this.element.parentElement;
+            if (parentElement && this.chart.options.responsive) {
+                const originalWidth = parentElement.style.width;
+                parentElement.style.width = parentElement.offsetWidth + 1 + 'px';
+                setTimeout(() => {
+                    parentElement.style.width = originalWidth;
+                }, 0);
+            }
+        }
     }
 
     private dispatchEvent(name: string, payload: any) {
diff --git a/src/Chartjs/assets/test/controller.test.ts b/src/Chartjs/assets/test/controller.test.ts
@@ -76,4 +76,23 @@ describe('ChartjsController', () => {
 
         expect(chart.options.showLines).toBe(false);
     });
+
+    it('will update when the view data changes', async () => {
+        const { chart, canvas } = await startChartTest(`
+           <canvas
+               data-testid='canvas'
+               data-controller='check chartjs'
+               data-chartjs-view-value="&#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&#x20;First&#x20;dataset&quot;,&quot;backgroundColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;borderColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;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;showLines&quot;&#x3A;false&#x7D;&#x7D;"
+           ></canvas>
+       `);
+
+        expect(chart.options.showLines).toBe(false);
+        const currentViewValue = JSON.parse((canvas.dataset.chartjsViewValue as string));
+        currentViewValue.options.showLines = true;
+        canvas.dataset.chartjsViewValue = JSON.stringify(currentViewValue);
+
+        await waitFor(() => {
+            expect(chart.options.showLines).toBe(true);
+        });
+    });
 });
diff --git a/ux.symfony.com/src/Controller/LiveComponentDemoController.php b/ux.symfony.com/src/Controller/LiveComponentDemoController.php
@@ -7,7 +7,6 @@
 use App\Form\TodoListForm;
 use App\Repository\FoodRepository;
 use App\Repository\TodoListRepository;
-use App\Service\DinoStatsService;
 use App\Service\LiveDemoRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
diff --git a/ux.symfony.com/src/Service/DinoStatsService.php b/ux.symfony.com/src/Service/DinoStatsService.php
@@ -30,7 +30,7 @@ public function fetchData(int $start, int $end, array $types): array
         $step = round(($start - $end) / $steps);
 
         $labels = [];
-        for ($i = 0; $i < $steps; $i++) {
+        for ($i = 0; $i < $steps; ++$i) {
             $current = $start - ($i * $step);
             // generate a random rgb color
 
@@ -52,7 +52,7 @@ public function fetchData(int $start, int $end, array $types): array
 
         return [
             'labels' => $labels,
-            'datasets' => $datasets
+            'datasets' => $datasets,
         ];
     }
 
@@ -68,7 +68,7 @@ private function getRawData(): array
     private function getSpeciesCounts(int $start, int $steps, int $step, string $type): array
     {
         $counts = [];
-        for ($i = 0; $i < $steps; $i++) {
+        for ($i = 0; $i < $steps; ++$i) {
             $current = round($start - ($i * $step));
             $counts[] = $this->countSpeciesAt($current, $type);
         }
@@ -80,12 +80,12 @@ private function countSpeciesAt(int $currentYear, string $type): int
     {
         $count = 0;
         foreach ($this->getRawData() as $dino) {
-            if (($type !== self::ALL_DINOS) && $dino['type'] !== $type) {
+            if ((self::ALL_DINOS !== $type) && $dino['type'] !== $type) {
                 continue;
             }
 
             if ($dino['from'] >= $currentYear && $dino['to'] <= $currentYear) {
-                $count++;
+                ++$count;
             }
         }
 
diff --git a/ux.symfony.com/src/Twig/DinoChartComponent.php b/ux.symfony.com/src/Twig/DinoChartComponent.php
@@ -26,8 +26,7 @@ class DinoChartComponent
     public function __construct(
         private DinoStatsService $dinoStatsService,
         private ChartBuilderInterface $chartBuilder,
-    )
-    {
+    ) {
     }
 
     #[ExposeInTemplate]
@@ -52,6 +51,7 @@ public function getChart(): Chart
                     ),
                 ],
             ],
+            'maintainAspectRatio' => false,
         ]);
 
         return $chart;
diff --git a/ux.symfony.com/templates/components/dino_chart.html.twig b/ux.symfony.com/templates/components/dino_chart.html.twig
@@ -45,7 +45,9 @@
 
     <hr>
 
-    {{ render_chart(chart) }}
+    <div style="min-height: 400px;">
+        {{ render_chart(chart) }}
+    </div>
 
     <small>Source: <a href="https://www.nhm.ac.uk/">National History Museum</a> courtesy of https://github.com/kjanjua26/jurassic-park</small>
 </div>

Original file line number	Diff line number	Diff line change
`@@ -4,11 +4,11 @@ import { TPluginHash } from 'tom-select/dist/types/contrib/microplugin';`
`4`	`4`	`import { RecursivePartial, TomSettings, TomTemplates } from 'tom-select/dist/types/types';`
`5`	`5`
`6`	`6`	`export interface AutocompletePreConnectOptions {`
`7`		`- options: any`
	`7`	`+ options: any;`
`8`	`8`	`}`
`9`	`9`	`export interface AutocompleteConnectOptions {`
`10`		`- tomSelect: TomSelect`
`11`		`- options: any`
	`10`	`+ tomSelect: TomSelect;`
	`11`	`+ options: any;`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`export default class extends Controller {`
`@@ -393,7 +393,7 @@ export default class extends Controller {`
`393`	`393`	`}`
`394`	`394`
`395`	`395`	`if (changeDisabledState) {`
`396`		`- this.changeTomSelectDisabledState((this.formElement.disabled));`
	`396`	`+ this.changeTomSelectDisabledState(this.formElement.disabled);`
`397`	`397`	`}`
`398`	`398`
`399`	`399`	`if (changePlaceholder) {`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,8 @@ export default class extends Controller {`
`4`	`4`	`static values: {`
`5`	`5`	`view: ObjectConstructor;`
`6`	`6`	`};`
	`7`	`+ private chart;`
`7`	`8`	`connect(): void;`
	`9`	`+ viewValueChanged(): void;`
`8`	`10`	`private dispatchEvent;`
`9`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ public function fetchData(int $start, int $end, array $types): array`
`30`	`30`	`$step = round(($start - $end) / $steps);`
`31`	`31`
`32`	`32`	`$labels = [];`
`33`		`- for ($i = 0; $i < $steps; $i++) {`
	`33`	`+ for ($i = 0; $i < $steps; ++$i) {`
`34`	`34`	`$current = $start - ($i * $step);`
`35`	`35`	`// generate a random rgb color`
`36`	`36`
`@@ -52,7 +52,7 @@ public function fetchData(int $start, int $end, array $types): array`
`52`	`52`
`53`	`53`	`return [`
`54`	`54`	`'labels' => $labels,`
`55`		`- 'datasets' => $datasets`
	`55`	`+ 'datasets' => $datasets,`
`56`	`56`	`];`
`57`	`57`	`}`
`58`	`58`
`@@ -68,7 +68,7 @@ private function getRawData(): array`
`68`	`68`	`private function getSpeciesCounts(int $start, int $steps, int $step, string $type): array`
`69`	`69`	`{`
`70`	`70`	`$counts = [];`
`71`		`- for ($i = 0; $i < $steps; $i++) {`
	`71`	`+ for ($i = 0; $i < $steps; ++$i) {`
`72`	`72`	`$current = round($start - ($i * $step));`
`73`	`73`	`$counts[] = $this->countSpeciesAt($current, $type);`
`74`	`74`	`}`
`@@ -80,12 +80,12 @@ private function countSpeciesAt(int $currentYear, string $type): int`
`80`	`80`	`{`
`81`	`81`	`$count = 0;`
`82`	`82`	`foreach ($this->getRawData() as $dino) {`
`83`		`- if (($type !== self::ALL_DINOS) && $dino['type'] !== $type) {`
	`83`	`+ if ((self::ALL_DINOS !== $type) && $dino['type'] !== $type) {`
`84`	`84`	`continue;`
`85`	`85`	`}`
`86`	`86`
`87`	`87`	`if ($dino['from'] >= $currentYear && $dino['to'] <= $currentYear) {`
`88`		`- $count++;`
	`88`	`+ ++$count;`
`89`	`89`	`}`
`90`	`90`	`}`
`91`	`91`