Subversion Repositories SmartDukaan

Rev

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

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