[dashboard/statistics] Reactification (#8476)

CCNA had loading issues of the dashboard because of the smarty widgets. Solved by getting the statistics data after the frontend is loaded.

Updates:

new panel component that handles multiple views.
Instead of smarty we'll use react for the statistics widgets.
Update the c3 & d3 graph generation to use the npm version.

.eslintrc.json

@@ -47,6 +47,8 @@
         "tabWidth": 2,
         "ignoreComments": true
     }],
+    "no-unexpected-multiline": "off",
+    "no-unused-vars": "warn",
     "no-useless-escape": "off",
     "no-dupe-keys": "off",
     "react/no-direct-mutation-state": "off",

modules/dashboard/php/widget.class.inc

@@ -33,6 +33,8 @@ class Widget implements \LORIS\GUI\Widget
     private WidgetContent $_content;
     private WidgetDisplayProps $_displayprops;
     private ?WidgetDependencies $_dependencies;
+    private $_template           = 'panel.tpl';
+    private $_template_variables = [];
 
     /**
      * Construct a dashboard widget with the specified properties.
@@ -54,6 +56,30 @@ class Widget implements \LORIS\GUI\Widget
         $this->_dependencies = $deps;
     }
 
+    /**
+     * The setTemplate - change default smarty template
+     *
+     * @param string $template_file The template file to use.
+     *
+     * @return void
+     */
+    public function setTemplate(string $template_file)
+    {
+        $this->_template = $template_file;
+    }
+
+    /**
+     * The setTemplateVariables - set additional smarty template variables
+     *
+     * @param array $template_variables The template variables to use.
+     *
+     * @return void
+     */
+    public function setTemplateVariables(array $template_variables)
+    {
+        $this->_template_variables = $template_variables;
+    }
+
     /**
      * Return the size of this widget.
      *
@@ -119,8 +145,9 @@ class Widget implements \LORIS\GUI\Widget
                 'body'   => $this->_content->getBody(),
                 'footer' => $this->_content->getFooter(),
                 'menus'  => $this->_displayprops->getMenus(),
+                ...$this->_template_variables,
             ]
         );
-        return $renderer->fetch("panel.tpl");
+        return $renderer->fetch($this->_template);
     }
 }

modules/dashboard/templates/div.tpl

@@ -0,0 +1 @@
+<div id='{$id}'>{$body}</div>

modules/dashboard/test/DashboardTest.php

@@ -356,27 +356,31 @@ public function testDashboardRecruitmentView()
     {
         $this->safeGet($this->url . '/dashboard/');
         $views = $this->safeFindElement(
-            WebDriverBy::Xpath(
-                "//*[@id='lorisworkspace']/div[1]".
-                    "/div[2]/div[1]/div/button"
+            WebDriverBy::cssSelector(
+                "#statistics_widgets .panel:nth-child(1) .views button"
             )
         );
         $views->click();
 
         $assertText1 = $this->safeFindElement(
-            WebDriverBy::XPath(
-                "//*[@id='lorisworkspace']/div[1]".
-                    "/div[2]/div[1]/div/ul/li[1]/a"
+            WebDriverBy::cssSelector(
+                "#statistics_widgets .panel:nth-child(1)".
+                " .dropdown-menu li:nth-child(1)"
             )
         )->getText();
+
         $assertText2 = $this->safeFindElement(
-            WebDriverBy::XPath(
-                "//*[@id='lorisworkspace']/div[1]".
-                    "/div[2]/div[1]/div/ul/li[2]/a"
+            WebDriverBy::cssSelector(
+                "#statistics_widgets .panel:nth-child(1)".
+                " .dropdown-menu li:nth-child(2)"
             )
         )->getText();
-        $this->assertStringContainsString("View overall recruitment", $assertText1);
-        $this->assertStringContainsString("View site breakdown", $assertText2);
+
+        $this->assertStringContainsString("Recruitment - overall", $assertText1);
+        $this->assertStringContainsString(
+            "Recruitment - site breakdown",
+            $assertText2
+        );
     }
 
     /**
@@ -667,8 +671,11 @@ private function _testPlan7And8()
     {
         $this->safeGet($this->url . '/dashboard/');
         $testText = $this->safeFindElement(
-            WebDriverBy::cssSelector("#scan-line-chart-panel")
+            WebDriverBy::cssSelector(
+                "#statistics_studyprogression .panel-body div:nth-child(1)"
+            )
         )->getText();
+
         $this->assertStringContainsString(
             "Scan sessions per site",
             $testText

modules/statistics/.gitignore

@@ -0,0 +1 @@
+js/WidgetIndex.js