[TASK] Initialise graphs in Dashboard Widgets based on graphConfig

No additional classes are needed anymore to initialise
the graphs in Dashboard Widgets. If a graphConfig is given
the chart will be initialised.

Resolves: #91100
Releases: master
Change-Id: Id25d272e4287a0248d982b600f792e5e32e76445
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/64220


Reviewed-by: Markus Klein <markus.klein@typo3.org>
Reviewed-by: Oliver Hader <oliver.hader@typo3.org>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Jonas Eberle <flightvision@googlemail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>

Build/Sources/TypeScript/dashboard/Resources/Public/TypeScript/ChartInitializer.ts

@@ -16,7 +16,7 @@ import RegularEvent = require('TYPO3/CMS/Core/Event/RegularEvent');
 
 class ChartInitializer {
 
-  private readonly selector: string = '.dashboard-item--chart';
+  private readonly selector: string = '.dashboard-item';
 
   constructor() {
     this.initialize();
@@ -27,7 +27,7 @@ class ChartInitializer {
       e.preventDefault();
       const config: any = e.detail;
 
-      if (typeof undefined === config.graphConfig) {
+      if (undefined === config || undefined === config.graphConfig) {
         return;
       }
 
@@ -38,7 +38,7 @@ class ChartInitializer {
         context = _canvas.getContext('2d');
       }
 
-      if (typeof undefined === context) {
+      if (undefined === context) {
         return;
       }
 

typo3/sysext/dashboard/Configuration/Backend/DashboardWidgets.yaml

@@ -91,7 +91,6 @@ services:
         title: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.sysLogErrors.title'
         description: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.sysLogErrors.description'
         iconIdentifier: 'content-widget-chart-bar'
-        additionalCssClasses: 'dashboard-item--chart'
         height: 'medium'
         width: 'medium'
 
@@ -169,7 +168,6 @@ services:
         title: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.typeOfUsers.title'
         description: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.typeOfUsers.description'
         iconIdentifier: 'content-widget-chart-pie'
-        additionalCssClasses: 'dashboard-item--chart'
         height: 'medium'
 
   dashboard.widget.t3securityAdvisories:

typo3/sysext/dashboard/Documentation/Developer/GraphWidgetImplementation.rst

@@ -94,7 +94,6 @@ Together with :file:`Services.yaml`:
          # …
        tags:
          - name: dashboard.widget
-            additionalCssClasses: 'dashboard-item--chart'
 
 The configuration adds necessary CSS classes, as well as the ``dataProvider`` to use.
 The provider implements :php:class:`ChartDataProviderInterface` and could look like the following.

typo3/sysext/dashboard/Documentation/Widgets/BarChartWidget.rst

@@ -37,7 +37,6 @@ Example
            title: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.sysLogErrors.title'
            description: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.sysLogErrors.description'
            iconIdentifier: 'content-widget-chart-bar'
-           additionalCssClasses: 'dashboard-item--chart'
            height: 'medium'
            width: 'medium'
 

typo3/sysext/dashboard/Documentation/Widgets/DoughnutChartWidget.rst

@@ -33,7 +33,6 @@ Example
            title: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.typeOfUsers.title'
            description: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widgets.typeOfUsers.description'
            iconIdentifier: 'content-widget-chart-pie'
-           additionalCssClasses: 'dashboard-item--chart'
            height: 'medium'
 
 Options

typo3/sysext/dashboard/Resources/Public/JavaScript/ChartInitializer.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-define(["require","exports","TYPO3/CMS/Dashboard/Contrib/chartjs","TYPO3/CMS/Core/Event/RegularEvent"],(function(e,t,n,i){"use strict";return new class{constructor(){this.selector=".dashboard-item--chart",this.initialize()}initialize(){new i("widgetContentRendered",(function(e){e.preventDefault();const t=e.detail;if("undefined"===t.graphConfig)return;let i,r=this.querySelector("canvas");null!==r&&(i=r.getContext("2d")),"undefined"!==i&&new n(i,t.graphConfig)})).delegateTo(document,this.selector)}}}));
\ No newline at end of file
+define(["require","exports","TYPO3/CMS/Dashboard/Contrib/chartjs","TYPO3/CMS/Core/Event/RegularEvent"],(function(e,t,i,n){"use strict";return new class{constructor(){this.selector=".dashboard-item",this.initialize()}initialize(){new n("widgetContentRendered",(function(e){e.preventDefault();const t=e.detail;if(void 0===t||void 0===t.graphConfig)return;let n,r=this.querySelector("canvas");null!==r&&(n=r.getContext("2d")),void 0!==n&&new i(n,t.graphConfig)})).delegateTo(document,this.selector)}}}));
\ No newline at end of file