Subversion Repositories SmartDukaan

Rev

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

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