Subversion Repositories SmartDukaan

Rev

Rev 33942 | Rev 33945 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
33944 ranu 1 
<!DOCTYPE html>
2 
<html lang="en">
3 
<head>
4 
    <meta charset="UTF-8">
5 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 
    <title>RBM ARR Table</title>
7 
    <style>
8 
        table th {
9 
            text-align: center;
10 
        }
33917 ranu 11 
 
33944 ranu 12 
        #rbm-arr-table td, #rbm-arr-table th {
13 
            padding: 0.35rem;
14 
            font-size: 20px;
15 
        }
33930 ranu 16 
 
33944 ranu 17 
        .rb-name {
18 
            font-size: 17px;
19 
            font-weight: bold;
20 
        }
33939 ranu 21 
 
33944 ranu 22 
        #rbm-arr-table td, #rbm-arr-table th {
23 
            text-align: center;
24 
            background-size: 100% 100%;
25 
            background-repeat: no-repeat;
26 
            font-weight: 400;
27 
            color: #000;
28 
        }
33939 ranu 29 
 
33944 ranu 30 
        .achieved-cell, .target-cell {
31 
            font-weight: bold;
32 
        }
33 
    </style>
34 
</head>
35 
<body>
33917 ranu 36 
<section class="wrapper">
37 
    <div class="row">
38 
        <div class="col-lg-12">
39 
            <table id="rbm-arr-table" class="table table-border table-condensed table-bordered" style="width:100%">
40 
                <thead>
41 
                <tr>
33939 ranu 42 
                    <th>RBM</th>
43 
                    <th>Total (ACH/TGT)</th>
44 
                    <th>%</th>
45 
                    <th>HID (ACH/TGT)</th>
46 
                    <th>%</th>
47 
                    <th>RUN (ACH/TGT)</th>
48 
                    <th>%</th>
49 
                    <th>SLOW (ACH/TGT)</th>
50 
                    <th>%</th>
51 
                    <th>EOL (ACH/TGT)</th>
52 
                    <th>%</th>
53 
                    <th>Other (ACH/TGT)</th>
54 
                    <th>%</th>
33917 ranu 55 
                </tr>
56 
                </thead>
33939 ranu 57 
                <tbody>
58 
                    #foreach($target in $rbmArrViewModels)
33917 ranu 59 
                    <tr>
33933 ranu 60 
                        <td>$target.getRbmName()- $target.getWarehouseName()</td>
33939 ranu 61 
                        <td><span class="achieved-cell">$target.getTotalAchievedTarget()</span> / <span
62 
                                class="target-cell">$target.getTodayTarget()</span></td>
63 
                        <td class="total-percent"></td>
64 
                        <td><span class="achieved-cell">$target.getTodayAchievedHidTarget()</span> / <span
65 
                                class="target-cell">$target.getTodayHidTarget()</span></td>
66 
                        <td class="hid-percent"></td>
67 
                        <td><span class="achieved-cell">$target.getTodayAchievedFastMovingTarget()</span> / <span
68 
                                class="target-cell">$target.getTodayFastMovingTarget()</span></td>
69 
                        <td class="run-percent"></td>
70 
                        <td><span class="achieved-cell">$target.getTodayAchievedSlowMovingTarget()</span> / <span
71 
                                class="target-cell">$target.getTodaySlowMovingTarget()</span></td>
72 
                        <td class="slow-percent"></td>
73 
                        <td><span class="achieved-cell">$target.getTodayAchievedEolTarget()</span> / <span
74 
                                class="target-cell">$target.getTodayEolTarget()</span></td>
75 
                        <td class="eol-percent"></td>
76 
                        <td><span class="achieved-cell">$target.getTodayAchievedOtherMovingTarget()</span> / <span
77 
                                class="target-cell">$target.getTodayOtherMovingTarget()</span></td>
78 
                        <td class="other-percent"></td>
33917 ranu 79 
                    </tr>
33939 ranu 80 
                    #end
81 
                </tbody>
33942 ranu 82 
                <tfoot>
83 
                <tr>
84 
                    <td><strong>Total</strong></td>
85 
                    <td><span id="total-achieved"></span> / <span id="total-target"></span></td>
86 
                    <td class="total-percent"></td>
87 
                    <td><span id="total-achieved-hid"></span> / <span id="total-target-hid"></span></td>
88 
                    <td class="hid-percent"></td>
89 
                    <td><span id="total-achieved-run"></span> / <span id="total-target-run"></span></td>
90 
                    <td class="run-percent"></td>
91 
                    <td><span id="total-achieved-slow"></span> / <span id="total-target-slow"></span></td>
92 
                    <td class="slow-percent"></td>
93 
                    <td><span id="total-achieved-eol"></span> / <span id="total-target-eol"></span></td>
94 
                    <td class="eol-percent"></td>
95 
                    <td><span id="total-achieved-other"></span> / <span id="total-target-other"></span></td>
96 
                    <td class="other-percent"></td>
97 
                </tr>
98 
                </tfoot>
33917 ranu 99 
            </table>
100 
        </div>
101 
    </div>
33930 ranu 102 
</section>
103 
<script>
33933 ranu 104 
    function formatValueInLakh(value) {
33939 ranu 105 
        return (value / 100000).toFixed(1) + 'L';
33930 ranu 106 
    }
107 
 
33944 ranu 108 
    function applyGradientColor(cell, percentage) {
109 
        let color;
110 
        if (percentage <= 40) {
111 
            color = '#F56983FF'; // Orange for <= 40%
112 
        } else if (percentage > 40 && percentage <= 75) {
113 
            color = '#f2c947e8'; // Yellow for 41% - 75%
114 
        } else {
115 
            color = '#82ef8299'; // Green for > 75%
116 
        }
117 
        cell.style.background = `linear-gradient(to right, ${color} ${percentage}%, transparent ${percentage}%)`;
118 
    }
119 
 
33930 ranu 120 
    function formatTargets() {
121 
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');
33944 ranu 122 
        const headerCells = document.querySelectorAll('#rbm-arr-table thead th');
123 
        const footerCells = document.querySelectorAll('#rbm-arr-table tfoot td');
124 
 
33942 ranu 125 
        let totalAchieved = 0, totalTarget = 0;
126 
        let totalAchievedHid = 0, totalTargetHid = 0;
127 
        let totalAchievedRun = 0, totalTargetRun = 0;
128 
        let totalAchievedSlow = 0, totalTargetSlow = 0;
129 
        let totalAchievedEol = 0, totalTargetEol = 0;
130 
        let totalAchievedOther = 0, totalTargetOther = 0;
33930 ranu 131 
 
132 
        rows.forEach(row => {
33931 ranu 133 
            const cells = row.querySelectorAll('td');
33942 ranu 134 
            cells.forEach((cell, index) => {
33939 ranu 135 
                const achievedSpan = cell.querySelector('.achieved-cell');
33933 ranu 136 
                const targetSpan = cell.querySelector('.target-cell');
33944 ranu 137 
 
33939 ranu 138 
                if (achievedSpan && targetSpan) {
139 
                    const achievedValue = parseFloat(achievedSpan.textContent.replace(/[^\d.-]/g, ''));
140 
                    const targetValue = parseFloat(targetSpan.textContent.replace(/[^\d.-]/g, ''));
33930 ranu 141 
 
33944 ranu 142 
                    switch (index) {
143 
                        case 1:
144 
                            totalAchieved += achievedValue || 0;
145 
                            totalTarget += targetValue || 0;
146 
                            break;
147 
                        case 3:
148 
                            totalAchievedHid += achievedValue || 0;
149 
                            totalTargetHid += targetValue || 0;
150 
                            break;
151 
                        case 5:
152 
                            totalAchievedRun += achievedValue || 0;
153 
                            totalTargetRun += targetValue || 0;
154 
                            break;
155 
                        case 7:
156 
                            totalAchievedSlow += achievedValue || 0;
157 
                            totalTargetSlow += targetValue || 0;
158 
                            break;
159 
                        case 9:
160 
                            totalAchievedEol += achievedValue || 0;
161 
                            totalTargetEol += targetValue || 0;
162 
                            break;
163 
                        case 11:
164 
                            totalAchievedOther += achievedValue || 0;
165 
                            totalTargetOther += targetValue || 0;
166 
                            break;
33942 ranu 167 
                    }
168 
 
33939 ranu 169 
                    if (!isNaN(achievedValue)) achievedSpan.textContent = formatValueInLakh(achievedValue);
33933 ranu 170 
                    if (!isNaN(targetValue)) targetSpan.textContent = formatValueInLakh(targetValue);
33931 ranu 171 
 
33939 ranu 172 
                    const percentCell = cell.nextElementSibling;
173 
                    if (percentCell && targetValue > 0) {
174 
                        const percentage = ((achievedValue / targetValue) * 100).toFixed(1);
175 
                        percentCell.textContent = percentage + '%';
33944 ranu 176 
                        applyGradientColor(percentCell, percentage);
33931 ranu 177 
                    }
33930 ranu 178 
                }
179 
            });
180 
        });
33942 ranu 181 
 
33944 ranu 182 
        footerCells[1].querySelector('#total-achieved').textContent = formatValueInLakh(totalAchieved);
183 
        footerCells[1].querySelector('#total-target').textContent = formatValueInLakh(totalTarget);
184 
 
185 
        const totalPercent = totalTarget > 0 ? ((totalAchieved / totalTarget) * 100).toFixed(1) : 'N/A';
186 
        footerCells[2].textContent = totalPercent + '%';
187 
        if (totalPercent !== 'N/A') applyGradientColor(footerCells[2], totalPercent);
33930 ranu 188 
    }
189 
 
33939 ranu 190 
    window.onload = formatTargets;
33930 ranu 191 
</script>
33944 ranu 192 
</body>
193 
</html>