[TikiWiki-commits] [Git][tikiwiki/tiki][master] [ENH][FIX] Headless chrome: make sync load of chartJS bundle to fix chart pdf generation

Victor Emanouilov pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
f37aeb72 by Josaphat Imani at 2026-06-12T09:46:35+00:00
[ENH][FIX] Headless chrome: make sync load of chartJS bundle to fix chart pdf generation
---
* Install chartJS v2 to get rid of cdn

* Use script module only if chartjs path has changed

* [ENH][FIX] Headless chrome: make sync load of chartJS bundle to fix chart pdf generation

See merge request tikiwiki/tiki!9366

- - - - -


7 changed files:

- lib/core/HeadlessBrowser/Chrome.php
- lib/prefs/headlessbrowser.php
- lib/wiki-plugins/wikiplugin_chartjs.php
- package-lock.json
- src/js/common-externals/package.json
- src/js/vite.config.mjs
- templates/admin/include_general.tpl


Changes:

=====================================
lib/core/HeadlessBrowser/Chrome.php
=====================================
@@ -45,6 +45,8 @@ class Chrome implements HeadlessBrowserInterface
 
     public function getUrlAsHtml($url, $cssSelector = null)
     {
+        global $prefs;
+
         $html = '';
         $browser = null;
 
@@ -52,7 +54,8 @@ class Chrome implements HeadlessBrowserInterface
             $browserFactory = new BrowserFactory($this->getChromeBinaryPath());
             $browser = $browserFactory->createBrowser([
                 'headless' => true,
-                'noSandbox' => true
+                'noSandbox' => true,
+                'ignoreCertificateErrors' => $prefs['headlessbrowser_chrome_ignore_certificate_errors'] == 'y',
             ]);
             $page = $browser->createPage();
             $page->navigate($url)->waitForNavigation();
@@ -75,6 +78,8 @@ class Chrome implements HeadlessBrowserInterface
 
     public function getUrlAsImage($url, $outputPath = null, $cssSelector = null, $timeout = null)
     {
+        global $prefs;
+
         $content = '';
         $browser = null;
 
@@ -82,7 +87,8 @@ class Chrome implements HeadlessBrowserInterface
             $browserFactory = new BrowserFactory($this->getChromeBinaryPath());
             $browser = $browserFactory->createBrowser([
                 'headless' => true,
-                'noSandbox' => true
+                'noSandbox' => true,
+                'ignoreCertificateErrors' => $prefs['headlessbrowser_chrome_ignore_certificate_errors'] == 'y',
             ]);
             $page = $browser->createPage();
             $page->navigate($url)->waitForNavigation('networkIdle', $timeout ?? 10000);


=====================================
lib/prefs/headlessbrowser.php
=====================================
@@ -37,5 +37,19 @@ function prefs_headlessbrowser_list()
             'tags' => ['experimental'],
             'default' => '',
         ],
+        'headlessbrowser_chrome_ignore_certificate_errors' => [
+            'name' => tra('Headless chrome ignore certificate errors'),
+            'description' => tra('Ignore SSL certificate errors when requesting external URLs while generating the pdf content.'),
+            'type' => 'flag',
+            'tags' => ['experimental'],
+            'default' => 'n',
+        ],
+        'headlessbrowser_chartjs_module' => [
+            'name' => tra('Headless chrome with ChartJS ES Module'),
+            'description' => tra('Use chartJS >= 3.0  which exposes ES modules. Set this to n in case you want to use version 2.9.4 which is the last version supporting non-module usage.'),
+            'type' => 'flag',
+            'tags' => ['experimental'],
+            'default' => 'y',
+        ],
     ];
 }


=====================================
lib/wiki-plugins/wikiplugin_chartjs.php
=====================================
@@ -98,7 +98,7 @@ function wikiplugin_chartjs_info()
 
 function wikiplugin_chartjs($data, $params)
 {
-    global $base_url, $jitRequest;
+    global $base_url, $jitRequest, $prefs;
 
     static $instance = 0;
     $instance++;
@@ -181,14 +181,8 @@ function wikiplugin_chartjs($data, $params)
         return '<div class="tiki-chartjs">' . $canvas . '</div>';
     }
 
-    // PDF export related logic
-    if (HeadlessBrowserFactory::getHeadlessBrowserType() === HeadlessBrowserFactory::CASPERJS) {
-        // casperJS uses PhantomJS that does not support ES6, so no support for modules.
-        // We are going to hardcode a reference to the latest version of chart.js 2.x to allow running
-        // the PDF export of the chart without using JS modules.
-        // @tiki-external-link-ok: Chart.js 2.x via CDN for CasperJS/PhantomJS PDF export
-        $html_content = <<<HTML
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
+    $non_module_html_content = '<script src="' . NODE_PUBLIC_DIST_PATH . '/chartjs-v2/dist/Chart.bundle.min.js"></script>';
+    $non_module_html_content .= <<<HTML
 <div>
     $canvas
 </div>
@@ -196,9 +190,19 @@ function wikiplugin_chartjs($data, $params)
     $script
 </script>
 HTML;
+
+    // PDF export related logic
+    if (HeadlessBrowserFactory::getHeadlessBrowserType() === HeadlessBrowserFactory::CASPERJS) {
+        // casperJS uses PhantomJS that does not support ES6, so no support for modules.
+        // We are going to hardcode a reference to the latest version of chart.js 2.x to allow running
+        // the PDF export of the chart without using JS modules.
+        // @tiki-external-link-ok: Chart.js 2.x via CDN for CasperJS/PhantomJS PDF export
+        $html_content = $non_module_html_content;
     } else {
-        $html_content = generateJsImportmapScripts(true); // generate imports with full URL since we load the html file as file://
-        $html_content .= <<<HTML
+        // If the user is using the default ChartJS path, we can use importmap to load the module
+        if ($prefs['headlessbrowser_chartjs_module'] === 'y') {
+            $html_content = generateJsImportmapScripts(true); // generate imports with full URL since we load the html file as file://
+            $html_content .= <<<HTML
 <div>
     $canvas
 </div>
@@ -209,6 +213,9 @@ HTML;
     $script
 </script>
 HTML;
+        } else {
+            $html_content = $non_module_html_content;
+        }
     }
     $scriptHash = md5($script);
     $cacheKey = 'chart_';


=====================================
package-lock.json
=====================================
@@ -6021,6 +6021,56 @@
                 "pnpm": ">=8"
             }
         },
+        "node_modules/chartjs-color": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+            "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "chartjs-color-string": "^0.6.0",
+                "color-convert": "^1.9.3"
+            }
+        },
+        "node_modules/chartjs-color-string": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+            "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "color-name": "^1.0.0"
+            }
+        },
+        "node_modules/chartjs-color/node_modules/color-convert": {
+            "version": "1.9.3",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+            "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "color-name": "1.1.3"
+            }
+        },
+        "node_modules/chartjs-color/node_modules/color-name": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+            "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/chartjs-v2": {
+            "name": "chart.js",
+            "version": "2.9.4",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
+            "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "chartjs-color": "^2.1.0",
+                "moment": "^2.10.2"
+            }
+        },
         "node_modules/check-engine": {
             "version": "1.14.0",
             "resolved": "https://registry.npmjs.org/check-engine/-/check-engine-1.14.0.tgz",
@@ -16692,6 +16742,7 @@
                 "bootstrap": "^5.3.8",
                 "bootstrap-icons": "^1.13.1",
                 "chart.js": "^4.4.2",
+                "chartjs-v2": "npm:[email protected]",
                 "clipboard": "^2.0.11",
                 "codemirror": "^5.65.17",
                 "converse.js": "^12.0.0",
@@ -16715,7 +16766,7 @@
                 "moment": "^2.30.1",
                 "ol": "^10.3.1",
                 "ol-layerswitcher": ">=3.3.0",
-                "plotly.js": "^3.0.3",
+                "plotly.js": "^3.5.1",
                 "recordrtc": "^5.6.2",
                 "reveal.js": "5.1.0",
                 "sass-svg-uri": "^2.0.0",


=====================================
src/js/common-externals/package.json
=====================================
@@ -21,6 +21,7 @@
     "bootstrap": "^5.3.8",
     "bootstrap-icons": "^1.13.1",
     "chart.js": "^4.4.2",
+    "chartjs-v2": "npm:[email protected]",
     "clipboard": "^2.0.11",
     "codemirror": "^5.65.17",
     "converse.js": "^12.0.0",


=====================================
src/js/vite.config.mjs
=====================================
@@ -353,6 +353,10 @@ export default defineConfig(({ command, mode }) => {
                         src: "node_modules/chart.js/dist/chunks/helpers.dataset.js",
                         dest: "vendor_dist/chart.js/dist/chunks",
                     },
+                    {
+                        src: "node_modules/chartjs-v2/dist/Chart.bundle.min.js",
+                        dest: "vendor_dist/chartjs-v2/dist",
+                    },
                     {
                         src: "node_modules/clipboard/dist/*",
                         dest: "vendor_dist/clipboard/dist",


=====================================
templates/admin/include_general.tpl
=====================================
@@ -188,6 +188,8 @@
                 {preference name=headlessbrowser_integration_type}
                 <div class="adminoptionbox headlessbrowser_integration_type_childcontainer chrome">
                     {preference name=headlessbrowser_chrome_path}
+                    {preference name=headlessbrowser_chrome_ignore_certificate_errors}
+                    {preference name=headlessbrowser_chartjs_module}
                 </div>
             </fieldset>
             <fieldset id="QueuedTasks">



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/f37aeb72bba224dc3709cdf015f94e380ed923ea

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/f37aeb72bba224dc3709cdf015f94e380ed923ea
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs