Update Bundle

# Update Readme.md # New ContentElement # add unique cssID for multiuse of Charts # add Defaults for jsonInputOptions based on chart.js
NewHorizonDesign · Nov 11, 2022 · 4af7a73 · 4af7a73
1 parent 98b1811
commit 4af7a73
Show file tree

Hide file tree

Showing 13 changed files with 221 additions and 99 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,26 @@
 ![Alt text](docs/logo.jpg?raw=true "logo")
 
+# Contao ChartJS Diagramm
 
-# Welcome to Contao ChartJS Diagramms
-This bundle is still under construction.
+The perfect solution to integrate Chart.js diagrams in Contao. With this solution a chart is already on your website in a few steps. Open source and free of charge!
+
+## Examples
+
+!["ChartJS examples in Contao"](docs/chart_beispiele.jpg?raw=true)
+***
+
+Chart diagrams that can be currently displayed:
+
+!["ChartJS Chart examples in Contao Backend"](docs/diagramm_typen.jpg?raw=true)
+***
+
+## Installation
+
+```bash
+composer require newhorizondesign/contao-chartjs-diagramms
+```
+
+## System requirements
+
+- PHP: `^8.0`
+- Contao: `^4.13 || ^5.0`
diff --git a/docs/chart_beispiele.jpg b/docs/chart_beispiele.jpg
diff --git a/docs/diagramm_typen.jpg b/docs/diagramm_typen.jpg
diff --git a/docs/logo.jpg b/docs/logo.jpg
diff --git a/src/Controller/ContentElement/ModDiagramElementController.php b/src/Controller/ContentElement/ModDiagramElementController.php
@@ -4,7 +4,7 @@
 
 /*
  * This file is part of Contao ChartJS Diagramms.
- * 
+ *
  * (c) NewHorizonDesign 2022 <service@newhorizon-design.de>
  * @license GPL-3.0-or-later
  * For the full copyright and license information,
@@ -17,19 +17,51 @@
 use Contao\ContentModel;
 use Contao\CoreBundle\Controller\ContentElement\AbstractContentElementController;
 use Contao\CoreBundle\DependencyInjection\Attribute\AsContentElement;
+use Contao\StringUtil;
 use Contao\Template;
+use Newhorizondesign\ContaoChartjsDiagramms\Model\NhdChartjsModel;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Twig\Environment as TwigEnvironment;
 
 #[AsContentElement(category: 'diagram_element')]
 class ModDiagramElementController extends AbstractContentElementController
 {
     public const TYPE = 'mod_diagram_element';
 
+    private TwigEnvironment $twig;
+
+    public function __construct(TwigEnvironment $twig)
+    {
+        $this->twig = $twig;
+    }
     protected function getResponse(Template $template, ContentModel $model, Request $request): Response
     {
-        $template->text = $model->text;
+        $chartID = $template->configSelect;
+        $chartNumber = $template->configSelect.$template->tstamp;
+
+        ${'chartModel'.$chartNumber} = NhdChartjsModel::findByID($chartID);
+
+        $size = StringUtil::deserialize(${'chartModel'.$chartNumber}->size);
+        $canvasWidth = $size[0];
+        $canvasHeight = $size[1];
 
-        return $template->getResponse();
+        return new Response($this->twig->render(
+            '@NewhorizondesignContaoChartjsDiagramms/diagramms/dynamicChart.twig',
+            [
+                'chartID'           => $chartNumber,
+                'title'             => ${'chartModel'.$chartNumber}->title,
+                'cssID'             => ${'chartModel'.$chartNumber}->cssID."-".$chartNumber,
+                'cssClass'          => ${'chartModel'.$chartNumber}->cssClass,
+                'chartWidth'        => $canvasWidth,
+                'chartHeight'       => $canvasHeight,
+                'chartType'         => ${'chartModel'.$chartNumber}->chartType,
+                'chartData'         => StringUtil::decodeEntities(${'chartModel'.$chartNumber}->jsonInput),
+                'chartLabel'        => StringUtil::decodeEntities(${'chartModel'.$chartNumber}->jsonInputLabels),
+                'chartOptions'      => StringUtil::decodeEntities(${'chartModel'.$chartNumber}->jsonInputOptions),
+                'chartAnimation'    => (${'chartModel'.$chartNumber}->activeAnimation) ? true: false,
+                'responsiveWidth'   => (${'chartModel'.$chartNumber}->responsiveWidth) ? true: false,
+            ]
+        ));
     }
 }
diff --git a/src/Controller/FrontendModule/ListenChartjsModulesController.php b/src/Controller/FrontendModule/ListenChartjsModulesController.php
@@ -47,23 +47,6 @@ public function __construct(TwigEnvironment $twig)
         $this->twig = $twig;
     }
 
-   /**
-     * This method extends the parent __invoke method,
-     * its usage is usually not necessary
-     */
-    public function __invoke(Request $request, ModuleModel $model, string $section, array $classes = null, PageModel $page = null): Response
-    {
-        // Get the page model
-        $this->page = $page;
-
-        if ($this->page instanceof PageModel && $this->get('contao.routing.scope_matcher')->isFrontendRequest($request)) {
-            // If TL_MODE === 'FE'
-            $this->page->loadDetails();
-        }
-
-        return parent::__invoke($request, $model, $section, $classes);
-    }
-
     /**
      * Lazyload services
      */
@@ -82,8 +65,9 @@ public static function getSubscribedServices(): array
 
     protected function getResponse(Template $template, ModuleModel $model, Request $request): Response
     {
-        $chartNumber = $template->configSelect;
-        ${'chartModel'.$chartNumber} = NhdChartjsModel::findByID($chartNumber);
+        $chartID = $template->configSelect;
+        $chartNumber = $template->configSelect.$template->tstamp;
+        ${'chartModel'.$chartNumber} = NhdChartjsModel::findByID($chartID );
 
         $size = StringUtil::deserialize(${'chartModel'.$chartNumber}->size);
         $canvasWidth = $size[0];
@@ -94,7 +78,7 @@ protected function getResponse(Template $template, ModuleModel $model, Request $
             [
                 'chartID'           => $chartNumber,
                 'title'             => ${'chartModel'.$chartNumber}->title,
-                'cssID'             => ${'chartModel'.$chartNumber}->cssID,
+                'cssID'             => ${'chartModel'.$chartNumber}->cssID."-".$chartNumber,
                 'cssClass'          => ${'chartModel'.$chartNumber}->cssClass,
                 'chartWidth'        => $canvasWidth,
                 'chartHeight'       => $canvasHeight,

diff --git a/src/Resources/contao/dca/tl_content.php b/src/Resources/contao/dca/tl_content.php
@@ -19,13 +19,13 @@
 /**
  * Content elements
  */
-$GLOBALS['TL_DCA']['tl_content']['palettes'][ModDiagramElementController::TYPE] = '{type_legend},type,headline;{text_legend_custom},configSelect;{template_legend:hide},customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID;{invisible_legend:hide},invisible,start,stop';
+$GLOBALS['TL_DCA']['tl_content']['palettes'][ModDiagramElementController::TYPE] = '{type_legend},type,configSelect;{template_legend:hide},customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID;{invisible_legend:hide},invisible,start,stop';
 
 /**
  * Palette Manipulator
  */
 PaletteManipulator::create()
-    ->addLegend('configSelect', 'text_legend_custom', PaletteManipulator::POSITION_APPEND)
+    ->addLegend('configSelect', 'type_legend', PaletteManipulator::POSITION_APPEND)
     ->applyToPalette('default', 'tl_content')
 ;
 
@@ -34,11 +34,12 @@
  * Add additional Fields
  */
 $GLOBALS['TL_DCA']['tl_content']['fields']['configSelect'] = [
+    'label'                   => &$GLOBALS['TL_LANG']['tl_content']['fields']['configSelect'],
     'exclude'                 => true,
     'filter'                  => true,
     'inputType'               => 'select',
     'foreignKey'              => 'tl_nhd_chartjs.title',
-    'eval'                    => array('mandatory'=>true, 'submitOnChange'=>true, 'includeBlankOption'=>true, 'tl_class'=>'long clr'),
+    'eval'                    => array('mandatory'=>true, 'submitOnChange'=>true, 'includeBlankOption'=>true, 'tl_class'=>'w50'),
     'sql'                     => "int(10) unsigned NOT NULL default '0'",
     'relation'                => array('type'=>'hasOne', 'load'=>'lazy'),
     'options_callback'        => function() {

diff --git a/src/Resources/contao/dca/tl_module.php b/src/Resources/contao/dca/tl_module.php
@@ -19,7 +19,7 @@
 /**
  * Frontend modules
  */
-$GLOBALS['TL_DCA']['tl_module']['palettes'][ListenChartjsModulesController::TYPE] = '{title_legend},name,headline,configSelect,type;{template_legend:hide},customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
+$GLOBALS['TL_DCA']['tl_module']['palettes'][ListenChartjsModulesController::TYPE] = '{title_legend},name,headline,type,configSelect;{template_legend:hide},customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 
 /**
  * Palette Manipulator
@@ -33,11 +33,12 @@
  * Add additional Fields
  */
 $GLOBALS['TL_DCA']['tl_module']['fields']['configSelect'] = [
+    'label'                   => &$GLOBALS['TL_LANG']['tl_content']['fields']['configSelect'],
     'exclude'                 => true,
     'filter'                  => true,
     'inputType'               => 'select',
     'foreignKey'              => 'tl_nhd_chartjs.title',
-    'eval'                    => array('mandatory'=>true, 'submitOnChange'=>true, 'includeBlankOption'=>true, 'tl_class'=>'long clr'),
+    'eval'                    => array('mandatory'=>true, 'submitOnChange'=>true, 'includeBlankOption'=>true, 'tl_class'=>'w50'),
     'sql'                     => "int(10) unsigned NOT NULL default '0'",
     'relation'                => array('type'=>'hasOne', 'load'=>'lazy'),
     'options_callback'        => function() {

diff --git a/src/Resources/contao/dca/tl_nhd_chartjs.php b/src/Resources/contao/dca/tl_nhd_chartjs.php
@@ -110,11 +110,8 @@
             'filter'    => true,
             'sorting'   => true,
             'options'   => &$GLOBALS['TL_LANG']['tl_nhd_chartjs']['chartTypes']['options'],
-            //'foreignKey'            => 'tl_user.name',
-            //'options_callback'      => array('CLASS', 'METHOD'),
-            'eval'      => array('submitOnChange' => true, 'includeBlankOption' => true, 'tl_class' => 'w50'),
+            'eval'      => array('submitOnChange' => true, 'includeBlankOption' => false, 'tl_class' => 'w50'),
             'sql'       => "varchar(255) NOT NULL default ''",
-            //'relation'  => array('type' => 'hasOne', 'load' => 'lazy'),
         ),
         'size' => array(
             'inputType' => 'text',
@@ -143,37 +140,39 @@
             'eval'      => array('mandatory' => false, 'maxlength' => 255, 'tl_class' => 'w50'),
             'sql'       => "varchar(255) NOT NULL default ''"
         ),
-        'singleSRC' => [
-            'exclude'   => true,
-            'inputType' => 'fileTree',
-            'eval'      => [
-                'filesOnly'  => true,
-                'fieldType'  => 'radio',
-                'extensions' => 'json',
-            ],
-            'sql'       => "binary(16) NULL"
-        ],
-        'activeAnimation' => [
-            'inputType' => 'checkbox',
+        // 'singleSRC' => [
+        //     'exclude'   => true,
+        //     'inputType' => 'fileTree',
+        //     'eval'      => [
+        //         'filesOnly'  => true,
+        //         'fieldType'  => 'radio',
+        //         'extensions' => 'json',
+        //     ],
+        //     'sql'       => "binary(16) NULL"
+        // ],
+        'activeAnimation'  => [
+            'inputType'  => 'checkbox',
             'sql' => [
-                'type' => 'boolean',
-                'default' => false,
+                'type'  => 'boolean',
+                'default'  => false,
             ],
+            'eval'  => array('tl_class' => 'w50 m12'),
         ],
         'responsiveWidth' => [
             'inputType' => 'checkbox',
             'sql' => [
                 'type' => 'boolean',
                 'default' => false,
             ],
+            'eval'  => array('tl_class' => 'w50 m12'),
         ],
         'jsonInput'  => array(
             'inputType' => 'textarea',
             'exclude'   => true,
             'search'    => true,
             'filter'    => true,
             'sorting'   => true,
-            'eval'      => array('mandatory' => false, 'tl_class' => 'w50'),
+            'eval'      => array('mandatory' => true, 'tl_class' => 'long clr m12'),
             'sql'       => "text NOT NULL default ''",
             'load_callback' => array(
                 array('tl_nhd_chartjs', 'jsonInputCallback')
@@ -185,7 +184,7 @@
             'search'    => true,
             'filter'    => true,
             'sorting'   => true,
-            'eval'      => array('mandatory' => false, 'tl_class' => 'w50'),
+            'eval'      => array('mandatory' => true, 'tl_class' => 'long clr m12'),
             'sql'       => "text NOT NULL default ''",
             'load_callback' => array(
                 array('tl_nhd_chartjs', 'jsonInputLabelsCallback')
@@ -197,7 +196,7 @@
             'search'    => true,
             'filter'    => true,
             'sorting'   => true,
-            'eval'      => array('mandatory' => false, 'tl_class' => 'w50'),
+            'eval'      => array('mandatory' => true, 'tl_class' => 'long clr m12'),
             'sql'       => "text NOT NULL default ''",
             'load_callback' => array(
                 array('tl_nhd_chartjs', 'jsonInputOptionsCallback')
@@ -208,7 +207,6 @@
 
 class tl_nhd_chartjs extends Backend
 {
-
     public function jsonInputOptionsCallback($varValue, DataContainer $dc)
     {
         if(!empty($varValue)) {
@@ -229,12 +227,12 @@ public function jsonInputLabelsCallback($varValue, DataContainer $dc)
 
     public function jsonInputCallback($varValue, DataContainer $dc)
     {
-        if(!empty($varValue)) {
+        if($dc->activeRecord->chartType == $varValue) {
             return $varValue;
         } else {
             switch($dc->activeRecord->chartType) {
                 case 'bar':
-                    return json_decode($GLOBALS['TL_LANG']['tl_nhd_chartjs']['fields']['jsonInput']['default']['var']);
+                    return json_decode($GLOBALS['TL_LANG']['tl_nhd_chartjs']['fields']['jsonInput']['default']['bar']);
                     break;
                 case 'bubble':
                     return json_decode($GLOBALS['TL_LANG']['tl_nhd_chartjs']['fields']['jsonInput']['default']['bubble']);

diff --git a/src/Resources/contao/languages/en/default.php b/src/Resources/contao/languages/en/default.php
@@ -25,5 +25,5 @@
 /**
  * Content
  */
-$GLOBALS['TL_DCA']['tl_content']['fields']['text_legend_custom'] = ["Diagrammauswahl","Wähle hier dein Diagramm aus, welches du anzeigen lassen willst."];
-$GLOBALS['TL_DCA']['tl_content']['fields']['configSelect'] = ["Diagrammauswahl","Wähle hier dein Diagramm aus, welches du anzeigen lassen willst."];
+$GLOBALS['TL_LANG']['tl_content']['fields']['text_legend_custom'] = ["Diagrammauswahl","Wähle hier dein Diagramm aus, welches du anzeigen lassen willst."];
+$GLOBALS['TL_LANG']['tl_content']['fields']['configSelect'] = ["Diagrammauswahl","Wähle hier dein Diagramm aus, welches du anzeigen lassen willst."];
diff --git a/src/Resources/contao/languages/en/modules.php b/src/Resources/contao/languages/en/modules.php
@@ -23,4 +23,8 @@
  * Frontend modules
  */
 $GLOBALS['TL_LANG']['FMD'][ListenChartjsModulesController::TYPE] = ['ChartJS Diagramme', 'Fügt ein beliebiges Chart Diagramm ein.'];
-$GLOBALS['TL_DCA']['tl_module']['fields']['configSelect'] = ["Diagrammauswahl","Wähle hier dein Diagramm aus, welches du anzeigen lassen willst."];
+
+/**
+ * Content Module
+ */
+$GLOBALS['TL_LANG']['tl_module']['fields']['configSelect'] = ["Diagrammauswahl","Wähle hier dein Diagramm aus, welches du anzeigen lassen willst."];
diff --git a/src/Resources/contao/languages/en/tl_content.php b/src/Resources/contao/languages/en/tl_content.php
@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+use Newhorizondesign\ContaoChartjsDiagramms\Controller\ContentElement\ModDiagramElementController;
+
+/*
+ * This file is part of Contao ChartJS Diagramms.
+ *
+ * (c) NewHorizonDesign 2022 <service@newhorizon-design.de>
+ * @license GPL-3.0-or-later
+ * For the full copyright and license information,
+ * please view the LICENSE file that was distributed with this source code.
+ * @link https://github.com/newhorizondesign/contao-chartjs-diagramms
+ */
+
+$GLOBALS['TL_LANG']['CTE']['diagram_element'] = "ChartJS";
+$GLOBALS['TL_LANG']['CTE'][ModDiagramElementController::TYPE] = ['ChartJS Diagramme', 'Fügt ein beliebiges ChartJS Diagramm ein.'];