feat: add framework to render json on orderhisotry and added graph tooltips

BolverBlitz · BolverBlitz · commit 2b024e970ed5 · 2026-06-24T04:32:35.000+02:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simplestrichliste",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/views/admin/stats.ejs b/views/admin/stats.ejs
@@ -23,6 +23,11 @@
         border-color: #2563eb;
         color: #ffffff;
       }
+
+      .stats-tooltip {
+        pointer-events: none;
+        transform: translate(-50%, calc(-100% - 12px));
+      }
     </style>
   </head>
 
@@ -187,6 +192,76 @@
         `).join("");
       }
 
+      function getChartX(labels, margins, plotWidth, index) {
+        return labels.length === 1
+          ? margins.left + plotWidth / 2
+          : margins.left + (plotWidth * index / (labels.length - 1));
+      }
+
+      function getOrCreateTooltip(canvas) {
+        const parent = canvas.parentElement;
+        let tooltip = parent.querySelector(".stats-tooltip");
+        if (!tooltip) {
+          tooltip = document.createElement("div");
+          tooltip.className = "stats-tooltip hidden absolute z-20 max-w-xs rounded-lg bg-gray-900 px-3 py-2 text-xs text-white shadow-lg";
+          parent.appendChild(tooltip);
+        }
+        return tooltip;
+      }
+
+      function bindChartTooltip(canvas, labels, datasets, revenueDataset, margins, plotWidth, plotHeight) {
+        const tooltip = getOrCreateTooltip(canvas);
+        const allDatasets = revenueDataset ? [...datasets, revenueDataset] : datasets;
+        const formatValue = (dataset, value) => dataset === revenueDataset
+          ? moneyFormatter.format(value)
+          : numberFormatter.format(value);
+
+        canvas.onmousemove = (event) => {
+          const rect = canvas.getBoundingClientRect();
+          const x = event.clientX - rect.left;
+          const y = event.clientY - rect.top;
+
+          if (
+            x < margins.left ||
+            x > margins.left + plotWidth ||
+            y < margins.top ||
+            y > margins.top + plotHeight ||
+            labels.length === 0
+          ) {
+            tooltip.classList.add("hidden");
+            return;
+          }
+
+          const rawIndex = labels.length === 1
+            ? 0
+            : Math.round(((x - margins.left) / plotWidth) * (labels.length - 1));
+          const index = Math.min(Math.max(rawIndex, 0), labels.length - 1);
+          const tooltipX = getChartX(labels, margins, plotWidth, index);
+
+          tooltip.innerHTML = `
+            <div class="mb-1 font-semibold text-gray-100">${labels[index]}</div>
+            <div class="space-y-1">
+              ${allDatasets.map((dataset) => `
+                <div class="flex min-w-0 items-center justify-between gap-4">
+                  <span class="flex min-w-0 items-center gap-2">
+                    <span class="inline-block h-2.5 w-2.5 flex-shrink-0 rounded-full" style="background:${dataset.color}"></span>
+                    <span class="truncate">${dataset.name}</span>
+                  </span>
+                  <span class="font-mono">${formatValue(dataset, dataset.values[index] || 0)}</span>
+                </div>
+              `).join("")}
+            </div>
+          `;
+          tooltip.style.left = `${tooltipX}px`;
+          tooltip.style.top = `${margins.top + 8}px`;
+          tooltip.classList.remove("hidden");
+        };
+
+        canvas.onmouseleave = () => {
+          tooltip.classList.add("hidden");
+        };
+      }
+
       function drawLineChart(canvasId, legendId, labels, datasets, options = {}) {
         const canvas = document.getElementById(canvasId);
         const ctx = canvas.getContext("2d");
@@ -250,7 +325,7 @@
         ctx.textBaseline = "top";
         labels.forEach((label, index) => {
           if (index % labelStep !== 0 && index !== labels.length - 1) return;
-          const x = labels.length === 1 ? margins.left + plotWidth / 2 : margins.left + (plotWidth * index / (labels.length - 1));
+          const x = getChartX(labels, margins, plotWidth, index);
           ctx.fillText(label, x, margins.top + plotHeight + 14);
         });
 
@@ -260,7 +335,7 @@
           ctx.setLineDash(dashed ? [6, 5] : []);
           ctx.beginPath();
           dataset.values.forEach((value, index) => {
-            const x = labels.length === 1 ? margins.left + plotWidth / 2 : margins.left + (plotWidth * index / (labels.length - 1));
+            const x = getChartX(labels, margins, plotWidth, index);
             const y = margins.top + plotHeight - (plotHeight * value / Math.max(maxValue, 1));
             if (index === 0) ctx.moveTo(x, y);
             else ctx.lineTo(x, y);
@@ -273,6 +348,7 @@
         if (revenueDataset) drawDataset(revenueDataset, rightMax, true);
 
         drawLegend(legendId, datasets, revenueDataset);
+        bindChartTooltip(canvas, labels, datasets, revenueDataset, margins, plotWidth, plotHeight);
       }
 
       function seriesFromRows(rows, labels, keyField, nameField, valueField, knownItems = []) {
diff --git a/views/admin/transaction_history.ejs b/views/admin/transaction_history.ejs
@@ -8,6 +8,9 @@
     <script>
       const lang = <%- JSON.stringify(language) %>;
       const features = <%- JSON.stringify(features) %>;
+      const transactionHistoryFormatters = <%- JSON.stringify(Object.fromEntries(Object.entries(features || {})
+        .map(([featureName, feature]) => [featureName, feature?.transactionHistory?.customItemText])
+        .filter(([, formatter]) => formatter?.template && typeof formatter.template === "string"))) %>;
     </script>
     <script src="<%= domain %>/libjs/i18next.js?<%= curentUnixTime %>"></script>
     <script src="<%= domain %>/libjs/tailwind.js?<%= curentUnixTime %>"></script>
@@ -117,6 +120,33 @@
           };
         };
 
+        const escapeHTML = (value) => String(value ?? "")
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;")
+          .replace(/"/g, "&quot;")
+          .replace(/'/g, "&#039;");
+
+        const formatCustomItemText = (value) => {
+          if (!value) return "";
+          try {
+            const payload = JSON.parse(value);
+            const formatter = payload?.feature ? transactionHistoryFormatters[payload.feature] : null;
+            if (formatter?.template) {
+              const formatted = formatter.template.replace(/\{([^}]+)\}/g, (match, expression) => {
+                const keys = expression.split("|").map((key) => key.trim()).filter(Boolean);
+                const replacement = keys.map((key) => payload[key]).find((candidate) => candidate !== undefined && candidate !== null && candidate !== "");
+                return replacement === undefined ? "" : String(replacement);
+              }).replace(/\s+/g, " ").trim();
+
+              if (formatted) return escapeHTML(formatted);
+            }
+          } catch (error) {
+            // Old custom text was stored as plain text.
+          }
+          return escapeHTML(value);
+        };
+
         const createTransactionHTML = (tx) => {
           const { time } = formatTimestamp(tx.transaction_timestamp);
           let totalAmount = tx.price_at_transaction * tx.quantity;
@@ -129,7 +159,7 @@
               transaction_type = "purchase";
               if (tx.custom_item_text) {
                 totalAmount = totalAmount * -1;
-                title = tx.custom_item_text;
+                title = formatCustomItemText(tx.custom_item_text);
               } else {
                 title = i18next.t("Items.SystemTransaction");
               }
@@ -147,8 +177,8 @@
             default:
               transaction_type = "purchase";
               totalAmount = totalAmount * -1; // Invert amount for purchases
-              title = i18next.t("Items.PurchaseTitle", { count: tx.quantity, name: tx.item_name });
-              iconOrImage = `<img src="/i/items/${tx.item_uuid}" alt="${tx.item_name}" class="w-12 h-12 object-cover rounded-full">`;
+              title = escapeHTML(i18next.t("Items.PurchaseTitle", { count: tx.quantity, name: tx.item_name }));
+              iconOrImage = `<img src="/i/items/${encodeURIComponent(tx.item_uuid)}" alt="${escapeHTML(tx.item_name)}" class="w-12 h-12 object-cover rounded-full">`;
           }
 
           const sign = totalAmount > 0 ? "+" : totalAmount < 0 ? "-" : "";
diff --git a/views/transaction_history.ejs b/views/transaction_history.ejs
@@ -8,6 +8,9 @@
     <script>
       const lang = <%- JSON.stringify(language) %>;
       const features = <%- JSON.stringify(features) %>;
+      const transactionHistoryFormatters = <%- JSON.stringify(Object.fromEntries(Object.entries(features || {})
+        .map(([featureName, feature]) => [featureName, feature?.transactionHistory?.customItemText])
+        .filter(([, formatter]) => formatter?.template && typeof formatter.template === "string"))) %>;
     </script>
     <script src="<%= domain %>/libjs/i18next.js?<%= curentUnixTime %>"></script>
     <script src="<%= domain %>/libjs/tailwind.js?<%= curentUnixTime %>"></script>
@@ -113,6 +116,33 @@
           };
         };
 
+        const escapeHTML = (value) => String(value ?? "")
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;")
+          .replace(/"/g, "&quot;")
+          .replace(/'/g, "&#039;");
+
+        const formatCustomItemText = (value) => {
+          if (!value) return "";
+          try {
+            const payload = JSON.parse(value);
+            const formatter = payload?.feature ? transactionHistoryFormatters[payload.feature] : null;
+            if (formatter?.template) {
+              const formatted = formatter.template.replace(/\{([^}]+)\}/g, (match, expression) => {
+                const keys = expression.split("|").map((key) => key.trim()).filter(Boolean);
+                const replacement = keys.map((key) => payload[key]).find((candidate) => candidate !== undefined && candidate !== null && candidate !== "");
+                return replacement === undefined ? "" : String(replacement);
+              }).replace(/\s+/g, " ").trim();
+
+              if (formatted) return escapeHTML(formatted);
+            }
+          } catch (error) {
+            // Old custom text was stored as plain text.
+          }
+          return escapeHTML(value);
+        };
+
         const createTransactionHTML = (tx) => {
           const { time } = formatTimestamp(tx.transaction_timestamp);
           let totalAmount = tx.price_at_transaction * tx.quantity;
@@ -125,7 +155,7 @@
               transaction_type = "purchase";
               if (tx.custom_item_text) {
                 totalAmount = totalAmount * -1;
-                title = tx.custom_item_text;
+                title = formatCustomItemText(tx.custom_item_text);
               } else {
                 title = i18next.t("Items.SystemTransaction");
               }
@@ -143,8 +173,8 @@
             default:
               transaction_type = "purchase";
               totalAmount = totalAmount * -1; // Invert amount for purchases
-              title = i18next.t("Items.PurchaseTitle", { count: tx.quantity, name: tx.item_name });
-              iconOrImage = `<img src="/i/items/${tx.item_uuid}" alt="${tx.item_name}" class="w-12 h-12 object-cover rounded-full">`;
+              title = escapeHTML(i18next.t("Items.PurchaseTitle", { count: tx.quantity, name: tx.item_name }));
+              iconOrImage = `<img src="/i/items/${encodeURIComponent(tx.item_uuid)}" alt="${escapeHTML(tx.item_name)}" class="w-12 h-12 object-cover rounded-full">`;
           }
 
           const sign = totalAmount > 0 ? "+" : totalAmount < 0 ? "-" : "";

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "simplestrichliste",`
`3`		`- "version": "0.4.0",`
	`3`	`+ "version": "0.5.0",`
`4`	`4`	`"description": "",`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"scripts": {`