|
"afterRender" : "let currentHighTxSortField = 'txCount';\r\nlet currentHighTxOrder = 'desc';\r\n\r\n\r\nconst highTxHeaders = [\r\n { text: 'UDID', field: 'Key', type: 'text' },\r\n { text: 'Transactions', field: 'DocCount', type: 'number' },\r\n { text: 'Merchants', field: 'MerchantCount', type: 'number' },\r\n { text: 'Distinct Payment Cards Use', field: 'AcctNumberCount', type: 'number' },\r\n { text: 'Failed Authorization transactions', field: 'AuthResultNDocCount', type: 'number' },\r\n { text: 'High-Risk', field: 'HighDocCount', type: 'number' },\r\n { text: 'Mid-Risk', field: 'MidDocCount', type: 'number' },\r\n { text: 'Countries/Regions', field: 'CountryCount', type: 'number' },\r\n { text: 'Source IP Counts', field: 'IpCount', type: 'number' },\r\n];\r\n\r\n// 加總欄位\r\nconst highTxTotals = {\r\n DocCount: 0,\r\n MerchantCount: 0,\r\n AcctNumberCount: 0,\r\n AuthResultNDocCount: 0,\r\n AuthResultNDocCount: 0,\r\n HighDocCount: 0,\r\n MidDocCount: 0,\r\n CountryCount: 0,\r\n IpCount: 0,\r\n};\r\n\r\n\r\nfunction setupHighTxTableHeader(data) {\r\n const tableHeader = document.getElementById('udid-hightx-table-header');\r\n tableHeader.innerHTML = '';\r\n\r\n const headerRow = document.createElement('tr');\r\n\r\n highTxHeaders.forEach(header => {\r\n const th = document.createElement('th');\r\n th.textContent = header.text;\r\n th.dataset.field = header.field;\r\n\r\n if (header.field !== 'countryName') {\r\n th.addEventListener('click', () => {\r\n if (currentHighTxSortField === header.field) {\r\n currentHighTxOrder = currentHighTxOrder === 'asc' ? 'desc' : 'asc';\r\n } else {\r\n currentHighTxSortField = header.field;\r\n currentHighTxOrder = 'asc';\r\n }\r\n generateHighTxItems(data, currentHighTxSortField, currentHighTxOrder);\r\n updateTableHeaderSortIndicator(headers);\r\n });\r\n }\r\n\r\n headerRow.appendChild(th);\r\n });\r\n\r\n tableHeader.appendChild(headerRow);\r\n}\r\n\r\nfunction generateHighTxItems(data, sortField = '', sortOrder = 'desc') {\r\n\r\n const tableBody = document.getElementById('udid-hightx-table-body');\r\n const tableFooter = document.getElementById('udid-hightx-table-footer');\r\n tableBody.innerHTML = '';\r\n tableFooter.innerHTML = '';\r\n\r\n // 排序\r\n data.sort((a, b) => {\r\n const valA = a[sortField];\r\n const valB = b[sortField];\r\n\r\n const numA = Number(String(valA).replace(/,/g, ''));\r\n const numB = Number(String(valB).replace(/,/g, ''));\r\n\r\n if (!isNaN(numA) && !isNaN(numB)) {\r\n return sortOrder === 'asc' ? numA - numB : numB - numA;\r\n } else {\r\n return sortOrder === 'asc'\r\n ? String(valA).localeCompare(String(valB))\r\n : String(valB).localeCompare(String(valA));\r\n }\r\n });\r\n\r\n resetHighTxTotals();\r\n\r\n data.forEach(item => {\r\n\r\n if (item == null || item['Key'] === '') return;\r\n\r\n const row = document.createElement('tr');\r\n\r\n highTxHeaders.forEach(header => {\r\n\r\n let value = item[header.field];\r\n\r\n if (header.type === 'text') {\r\n //value = value;\r\n } else if (header.type === 'number') {\r\n const numericValue = Number(String(value).replace(/,/g, '')) || 0;\r\n value = numericValue.toLocaleString();\r\n\r\n if (highTxTotals.hasOwnProperty(header.field)) {\r\n highTxTotals[header.field] += numericValue;\r\n }\r\n }\r\n row.appendChild(createCell(value));\r\n });\r\n\r\n tableBody.appendChild(row);\r\n\r\n });\r\n\r\n // // 表尾加總列\r\n const footerRow = document.createElement('tr');\r\n // footerRow.appendChild(createCell('總計', true));\r\n // footerRow.appendChild(createCell(highTxTotals.txCount.toLocaleString(), true));\r\n // footerRow.appendChild(createCell(highTxTotals.txRealAmount.toLocaleString(), true));\r\n // footerRow.appendChild(createCell(highTxTotals.authResultY.toLocaleString(), true));\r\n // footerRow.appendChild(createCell(highTxTotals.txCountUniDevice.toLocaleString(), true));\r\n highTxHeaders.forEach(header => {\r\n\r\n if (highTxTotals.hasOwnProperty(header.field)) {\r\n footerRow.appendChild(createCell(highTxTotals[header.field].toLocaleString(), true));\r\n } else if (header.field === 'Key') {\r\n footerRow.appendChild(createCell('Total', true));\r\n }\r\n else {\r\n footerRow.appendChild(createCell('', true));\r\n }\r\n\r\n });\r\n\r\n tableFooter.appendChild(footerRow);\r\n}\r\n\r\nfunction createCell(text, isFooter = false) {\r\n const cell = document.createElement('td');\r\n cell.textContent = text;\r\n if (isFooter) cell.style.fontWeight = 'bold';\r\n return cell;\r\n}\r\n\r\nfunction updateTableHeaderSortIndicator(headers) {\r\n const ths = document.querySelectorAll('#udid-hightx-table-header th');\r\n ths.forEach(th => {\r\n const field = th.dataset.field;\r\n const header = headers.find(h => h.field === field);\r\n if (!header) return;\r\n\r\n if (field === currentHighTxSortField) {\r\n th.textContent = `${header.text} ${currentHighTxOrder === 'asc' ? '▲' : '▼'}`;\r\n } else {\r\n th.textContent = header.text;\r\n }\r\n });\r\n}\r\n\r\nfunction resetHighTxTotals() {\r\n for (const key in highTxTotals) {\r\n if (Object.hasOwn(highTxTotals, key)) highTxTotals[key] = 0;\r\n }\r\n}\r\n\r\n// 初始化\r\nif (Array.isArray(context.data) && context.data.length > 0 && Array.isArray(context.data[0])) {\r\n const tableData = context.data[0];\r\n setupHighTxTableHeader(tableData);\r\n generateHighTxItems(tableData);\r\n}\r\n\r\n",
|
|
"styles" : "<style>\r\nudid-hightx-table-container {\r\n width: 98%;\r\n margin: 0 auto;\r\n max-height: 180px; /* 必須設定 */\r\n overflow-y: auto; /* 讓內容可滾動 */\r\n position: relative; \r\n}\r\n\r\n/* 表格本體 */\r\n.udid-hightx-table {\r\n border-collapse: collapse;\r\n width: 100%;\r\n table-layout: fixed;\r\n}\r\n\r\n.udid-hightx-table-footer {\r\n position: sticky;\r\n bottom: 0;\r\n z-index: 3;\r\n pointer-events: none; /* 若不需互動 */\r\n backdrop-filter: blur(15px);\r\n}\r\n\r\n/* 固定 header 和 footer */\r\n.udid-hightx-table thead th, .udid-hightx-table tfoot td {\r\n position: sticky;\r\n z-index: 2;\r\n}\r\n\r\n/* 表頭固定在頂部 */\r\n.udid-hightx-table thead th {\r\n top: 0;\r\n text-align: center;\r\n}\r\n\r\n/* 表尾固定在底部 */\r\n.udid-hightx-table tfoot td {\r\n bottom: 0;\r\n}\r\n\r\n.udid-hightx-table td:first-child,\r\n.udid-hightx-table th:first-child {\r\n width: 18%;\r\n}\r\n\r\n/* 表格內容欄位 */\r\n.udid-hightx-table tbody td {\r\n padding: 8px;\r\n}\r\n\r\n/* 筆數與百分比靠右 */\r\n.udid-hightx-table tbody td, .udid-hightx-table-footer tbody td, {\r\n text-align: right;\r\n font-variant-numeric: tabular-nums;\r\n}\r\n\r\n.udid-hightx-table tbody td:first-child,\r\n.udid-hightx-table tfoot td:first-child {\r\n text-align: center;\r\n}\r\n\r\n.udid-hightx-table-footer, .udid-hightx-table-footer td {\r\n border: none;\r\n}\r\n.udid-hightx-table-footer {\r\n border-top: 1px solid rgba(204, 204, 220, 0.2);;\r\n}\r\n\r\n/* 滑鼠提示效果 */\r\n.udid-hightx-table thead th {\r\n cursor: pointer;\r\n}\r\n\r\n.udid-hightx-table td {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n</style>",
|