Subversion Repositories SmartDukaan

Rev

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

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