Rev 33942 | Rev 33945 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>RBM ARR Table</title><style>table th {text-align: center;}#rbm-arr-table td, #rbm-arr-table th {padding: 0.35rem;font-size: 20px;}.rb-name {font-size: 17px;font-weight: bold;}#rbm-arr-table td, #rbm-arr-table th {text-align: center;background-size: 100% 100%;background-repeat: no-repeat;font-weight: 400;color: #000;}.achieved-cell, .target-cell {font-weight: bold;}</style></head><body><section class="wrapper"><div class="row"><div class="col-lg-12"><table id="rbm-arr-table" class="table table-border table-condensed table-bordered" style="width:100%"><thead><tr><th>RBM</th><th>Total (ACH/TGT)</th><th>%</th><th>HID (ACH/TGT)</th><th>%</th><th>RUN (ACH/TGT)</th><th>%</th><th>SLOW (ACH/TGT)</th><th>%</th><th>EOL (ACH/TGT)</th><th>%</th><th>Other (ACH/TGT)</th><th>%</th></tr></thead><tbody>#foreach($target in $rbmArrViewModels)<tr><td>$target.getRbmName()- $target.getWarehouseName()</td><td><span class="achieved-cell">$target.getTotalAchievedTarget()</span> / <spanclass="target-cell">$target.getTodayTarget()</span></td><td class="total-percent"></td><td><span class="achieved-cell">$target.getTodayAchievedHidTarget()</span> / <spanclass="target-cell">$target.getTodayHidTarget()</span></td><td class="hid-percent"></td><td><span class="achieved-cell">$target.getTodayAchievedFastMovingTarget()</span> / <spanclass="target-cell">$target.getTodayFastMovingTarget()</span></td><td class="run-percent"></td><td><span class="achieved-cell">$target.getTodayAchievedSlowMovingTarget()</span> / <spanclass="target-cell">$target.getTodaySlowMovingTarget()</span></td><td class="slow-percent"></td><td><span class="achieved-cell">$target.getTodayAchievedEolTarget()</span> / <spanclass="target-cell">$target.getTodayEolTarget()</span></td><td class="eol-percent"></td><td><span class="achieved-cell">$target.getTodayAchievedOtherMovingTarget()</span> / <spanclass="target-cell">$target.getTodayOtherMovingTarget()</span></td><td class="other-percent"></td></tr>#end</tbody><tfoot><tr><td><strong>Total</strong></td><td><span id="total-achieved"></span> / <span id="total-target"></span></td><td class="total-percent"></td><td><span id="total-achieved-hid"></span> / <span id="total-target-hid"></span></td><td class="hid-percent"></td><td><span id="total-achieved-run"></span> / <span id="total-target-run"></span></td><td class="run-percent"></td><td><span id="total-achieved-slow"></span> / <span id="total-target-slow"></span></td><td class="slow-percent"></td><td><span id="total-achieved-eol"></span> / <span id="total-target-eol"></span></td><td class="eol-percent"></td><td><span id="total-achieved-other"></span> / <span id="total-target-other"></span></td><td class="other-percent"></td></tr></tfoot></table></div></div></section><script>function formatValueInLakh(value) {return (value / 100000).toFixed(1) + 'L';}function applyGradientColor(cell, percentage) {let color;if (percentage <= 40) {color = '#F56983FF'; // Orange for <= 40%} else if (percentage > 40 && percentage <= 75) {color = '#f2c947e8'; // Yellow for 41% - 75%} else {color = '#82ef8299'; // Green for > 75%}cell.style.background = `linear-gradient(to right, ${color} ${percentage}%, transparent ${percentage}%)`;}function formatTargets() {const rows = document.querySelectorAll('#rbm-arr-table tbody tr');const headerCells = document.querySelectorAll('#rbm-arr-table thead th');const footerCells = document.querySelectorAll('#rbm-arr-table tfoot td');let totalAchieved = 0, totalTarget = 0;let totalAchievedHid = 0, totalTargetHid = 0;let totalAchievedRun = 0, totalTargetRun = 0;let totalAchievedSlow = 0, totalTargetSlow = 0;let totalAchievedEol = 0, totalTargetEol = 0;let totalAchievedOther = 0, totalTargetOther = 0;rows.forEach(row => {const cells = row.querySelectorAll('td');cells.forEach((cell, index) => {const achievedSpan = cell.querySelector('.achieved-cell');const targetSpan = cell.querySelector('.target-cell');if (achievedSpan && targetSpan) {const achievedValue = parseFloat(achievedSpan.textContent.replace(/[^\d.-]/g, ''));const targetValue = parseFloat(targetSpan.textContent.replace(/[^\d.-]/g, ''));switch (index) {case 1:totalAchieved += achievedValue || 0;totalTarget += targetValue || 0;break;case 3:totalAchievedHid += achievedValue || 0;totalTargetHid += targetValue || 0;break;case 5:totalAchievedRun += achievedValue || 0;totalTargetRun += targetValue || 0;break;case 7:totalAchievedSlow += achievedValue || 0;totalTargetSlow += targetValue || 0;break;case 9:totalAchievedEol += achievedValue || 0;totalTargetEol += targetValue || 0;break;case 11:totalAchievedOther += achievedValue || 0;totalTargetOther += targetValue || 0;break;}if (!isNaN(achievedValue)) achievedSpan.textContent = formatValueInLakh(achievedValue);if (!isNaN(targetValue)) targetSpan.textContent = formatValueInLakh(targetValue);const percentCell = cell.nextElementSibling;if (percentCell && targetValue > 0) {const percentage = ((achievedValue / targetValue) * 100).toFixed(1);percentCell.textContent = percentage + '%';applyGradientColor(percentCell, percentage);}}});});footerCells[1].querySelector('#total-achieved').textContent = formatValueInLakh(totalAchieved);footerCells[1].querySelector('#total-target').textContent = formatValueInLakh(totalTarget);const totalPercent = totalTarget > 0 ? ((totalAchieved / totalTarget) * 100).toFixed(1) : 'N/A';footerCells[2].textContent = totalPercent + '%';if (totalPercent !== 'N/A') applyGradientColor(footerCells[2], totalPercent);}window.onload = formatTargets;</script></body></html>