[TikiWiki-commits] [Git][tikiwiki/tiki][master] [ENH] Replace Raphael graph with Mermaid in contributions dashboard plugin

Alvin Bauma pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
3f2b380f by Alvin Bauma at 2026-02-16T10:24:53+01:00
[ENH] Replace Raphael graph with Mermaid in contributions dashboard plugin
---
* [ENH] Replace Raphael graph with Mermaid in contributions dashboard plugin

See merge request tikiwiki/tiki!9546

- - - - -


1 changed file:

- lib/wiki-plugins/wikiplugin_contributionsdashboard.php


Changes:

=====================================
lib/wiki-plugins/wikiplugin_contributionsdashboard.php
=====================================
@@ -73,50 +73,18 @@ function wikiplugin_contributionsdashboard($data, $params)
 
     extract($params, EXTR_SKIP);
 
-    $start = (! empty($_REQUEST["raphaelStart$i"]) ? ($_REQUEST["raphaelStart$i"]) : $start);
-    $end = (! empty($_REQUEST["raphaelEnd$i"]) ? ($_REQUEST["raphaelEnd$i"]) : $end);
+    $start = (! empty($_REQUEST["startDate$i"]) ? ($_REQUEST["startDate$i"]) : $start);
+    $end = (! empty($_REQUEST["endDate$i"]) ? ($_REQUEST["endDate$i"]) : $end);
 
     $types = explode(',', $types);
 
-    $headerlib->add_jsfile("vendor_bundled/vendor/jquery/jquery-sheet/plugins/raphael-min.js", true);
-    $headerlib->add_jsfile("vendor_bundled/vendor/jquery/jquery-sheet/plugins/g.raphael-min.js", true);
+    $headerlib->add_js_module("import handleMermaid from '@mermaidPack'; handleMermaid();");
 
     $usersTrackerItems = [];
-    foreach ($tikilib->fetchAll("SELECT itemId FROM tiki_tracker_items WHERE createdBy = ?", ["simon"]) as $item) {
+    foreach ($tikilib->fetchAll("SELECT itemId FROM tiki_tracker_items") as $item) {
         $usersTrackerItems[] = $item['itemId'];
     }
 
-    $headerlib->add_jq_onready(
-        "$.fn.chart = function(s) {
-            s = $.extend({
-                labels: [],
-                data: []
-            }, s);
-
-            var me = $(this);
-            var r = Raphael(me[0]);
-
-            r.g.barchart(10,10, me.width(), me.height(), [s.data])
-                .on('mouseenter',function () {
-                    this.flag = r.g.popup(
-                        this.bar.x,
-                        this.bar.y,
-                        s.labels[$(this.bar.node).index() - 2] + ' - ' + this.bar.value || '0'
-                    ).insertBefore(this);
-                }).on('mouseleave',function () {
-                    this.flag.animate({
-                        opacity: 0
-                    },
-                    300,
-                    function () {
-                        this.remove();
-                    });
-                });
-
-            if (s.label) r.g.label($(this).width() / 2,30, s.label);
-        };"
-    );
-
     $result = "";
     foreach ($types as $type) {
         if ($type == "trackeritems") {
@@ -128,15 +96,24 @@ function wikiplugin_contributionsdashboard($data, $params)
                 $dates[] = $date;
             }
 
-            $headerlib->add_jq_onready(
-                "$('#raphaelTrackeritems$i').chart({
-                    labels:     " . json_encode($dates) . ",
-                    data:        " . json_encode($data) . ",
-                    label:        'Tracker Item Activity Grouped By Date'
-                });"
-            );
+            // Format data for Mermaid xychart
+            $xAxisLabels = array_map(function ($date) {
+                return '"' . $date . '"';
+            }, $dates);
+
+            $maxValue = ! empty($data) ? max($data) : 10;
+            $yAxisMax = ceil($maxValue * 1.2); // 20% marge au-dessus
+
+            $mermaidDataTrackeritems = 'xychart-beta
+                title "Tracker Item Activity Grouped By Date"
+                x-axis [' . implode(', ', $xAxisLabels) . ']
+                y-axis "Count" 0 --> ' . $yAxisMax . '
+                bar [' . implode(', ', $data) . ']';
 
-            $result .= "<div id='raphaelTrackeritems$i' style='width: 100%; height: 400px; display: block;'></div>";
+            $result .= "<div id='mermaid-diagram-trackeritems$i' class='mb-3'>
+                <textarea class='code d-none'>" . htmlspecialchars($mermaidDataTrackeritems) . "</textarea>
+                <div class='mermaid w-100'></div>
+            </div>";
         }
 
         if ($type == "toptrackeritemsusers") {
@@ -145,18 +122,27 @@ function wikiplugin_contributionsdashboard($data, $params)
 
             foreach (LogsQueryLib::trackerItem()->start($start)->end($end)->countUsersFilterId($usersTrackerItems) as $user => $count) {
                 $hits[] = $count;
-                $users[] = $user;
+                $users[] = empty($user) ? 'Anonymous' : $user;
             }
 
-            $headerlib->add_jq_onready(
-                "$('#raphaelTrackeritemsUsers$i').chart({
-                    labels:     " . json_encode($users) . ",
-                    data:        " . json_encode($hits) . ",
-                    label:        'Tracker Item Activity Grouped By Users'
-                });"
-            );
+            // Format data for Mermaid xychart
+            $xAxisLabels = array_map(function ($user) {
+                return '"' . addslashes($user) . '"';
+            }, $users);
+
+            $maxValue = ! empty($hits) ? max($hits) : 10;
+            $yAxisMax = ceil($maxValue * 1.2); // 20% marge au-dessus
+
+            $mermaidDataToptrackeritemsusers = 'xychart-beta
+                title "Tracker Item Activity Grouped By Users"
+                x-axis [' . implode(', ', $xAxisLabels) . ']
+                y-axis "Count" 0 --> ' . $yAxisMax . '
+                bar [' . implode(', ', $hits) . ']';
 
-            $result .= "<div id='raphaelTrackeritemsUsers$i' style='width: 100%; height: 400px; display: block;'></div>";
+            $result .= "<div id='mermaid-diagram-users$i' class='mb-3'>
+                <textarea class='code d-none'>" . htmlspecialchars($mermaidDataToptrackeritemsusers) . "</textarea>
+                <div class='mermaid w-100'></div>
+            </div>";
         }
 
         if ($type == "toptrackeritemsusersip") {
@@ -167,18 +153,31 @@ function wikiplugin_contributionsdashboard($data, $params)
                 $data = json_decode($data);
 
                 $hits[] = $count;
-                $users[] = $data->user . ' ' . $data->ip;
+                $userLabel = trim($data->user);
+                if (empty($userLabel)) {
+                    $userLabel = 'Anonymous';
+                }
+                $users[] = $userLabel . ' (' . $data->ip . ')';
             }
 
-            $headerlib->add_jq_onready(
-                "$('#raphaelTrackeritemsUsersIP$i').chart({
-                    labels:     " . json_encode($users) . ",
-                    data:        " . json_encode($hits) . ",
-                    label:        'Tracker Item Activity Grouped By Users & IP Address'
-                });"
-            );
+            // Format data for Mermaid xychart
+            $xAxisLabels = array_map(function ($user) {
+                return '"' . addslashes($user) . '"';
+            }, $users);
+
+            $maxValue = ! empty($hits) ? max($hits) : 10;
+            $yAxisMax = ceil($maxValue * 1.2); // 20% marge au-dessus
 
-            $result .= "<div id='raphaelTrackeritemsUsersIP$i' style='width: 100%; height: 400px; display: block;'></div>";
+            $mermaidDataToptrackeritemsusersip = 'xychart-beta
+                title "Tracker Item Activity Grouped By Users & IP Address"
+                x-axis [' . implode(', ', $xAxisLabels) . ']
+                y-axis "Count" 0 --> ' . $yAxisMax . '
+                bar [' . implode(', ', $hits) . ']';
+
+            $result .= "<div id='mermaid-diagram-usersip$i' class='mb-3'>
+                <textarea class='code d-none'>" . htmlspecialchars($mermaidDataToptrackeritemsusersip) . "</textarea>
+                <div class='mermaid w-100'></div>
+            </div>";
         }
     }
 
@@ -189,8 +188,8 @@ function wikiplugin_contributionsdashboard($data, $params)
     $timezone = $tikilib->get_display_timezone();
 
     $fields = [
-        "fieldname" => "raphaelStart{$i}",
-        "endfieldname" => "raphaelEnd{$i}",
+        "fieldname" => "startDate{$i}",
+        "endfieldname" => "endDate{$i}",
         "date" => $start,
         "enddate" => $end,
         "timezone" => $timezone,
@@ -229,7 +228,7 @@ function wikiplugin_contributionsdashboard($data, $params)
                         <span>" . tr("Date Range") . "</span>
                         <span>" . smarty_function_jscalendar($fields, $smarty->getEmptyInternalTemplate()) . "</span>
                         <input type='hidden' name='refresh' value='1' />
-                        <input type='submit' id='raphaelUpdate$i' class='headerAction' value='" . tr("Update") . "' />
+                        <input type='submit' id='updateData$i' class='headerAction' value='" . tr("Update") . "' />
                     </form>
                 </h3>
                 $result



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

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/3f2b380fb585ff114be72352527c37a717c63c99
You're receiving this email because of your account on gitlab.com.

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