Subversion Repositories SmartDukaan

Rev

Rev 33942 | Rev 33945 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 33942 Rev 33944
Line -... Line 1...
- 
 
 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>
1 
<style>
 7 
    <style>
2 
    table th {
 8 
        table th {
3 
        text-align: center;
 9 
            text-align: center;
4 
    }
 10 
        }
5 
 
 11 
 
6 
    #rbm-arr-table td, #rbm-arr-table th {
 12 
        #rbm-arr-table td, #rbm-arr-table th {
7 
        padding: 0.35rem;
 13 
            padding: 0.35rem;
8 
        font-size: 20px;
 14 
            font-size: 20px;
9 
    }
 15 
        }
10 
 
 16 
 
11 
    .rb-name {
 17 
        .rb-name {
12 
        font-size: 17px;
 18 
            font-size: 17px;
13 
        font-weight: bold;
 19 
            font-weight: bold;
14 
    }
 20 
        }
15 
 
 21 
 
16 
    #rbm-arr-table td {
 22 
        #rbm-arr-table td, #rbm-arr-table th {
17 
        text-align: center;
 23 
            text-align: center;
18 
        background-size: 100% 100%;
 24 
            background-size: 100% 100%;
19 
        background-repeat: no-repeat;
 25 
            background-repeat: no-repeat;
20 
        color: #000; /* Ensure text remains visible */
 26 
            font-weight: 400;
21 
        font-weight: 400;
 27 
            color: #000;
22 
    }
 28 
        }
23 
 
 29 
 
- 
 
 30 
        .achieved-cell, .target-cell {
- 
 
 31 
            font-weight: bold;
- 
 
 32 
        }
24 
</style>
 33 
    </style>
- 
 
 34 
</head>
25 
 
 35 
<body>
26 
<section class="wrapper">
 36 
<section class="wrapper">
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 
 
 - 
 
37 
    <div class="row">
 37 
    <div class="row">
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>
 - 
 
48 
        <div class="col-lg-12">
 38 
        <div class="col-lg-12">
49 
            <table id="rbm-arr-table" class="table table-border table-condensed table-bordered" style="width:100%">
 39 
            <table id="rbm-arr-table" class="table table-border table-condensed table-bordered" style="width:100%">
50 
                <thead>
 40 
                <thead>
51 
                <tr>
 41 
                <tr>
52 
                    <th>RBM</th>
 42 
                    <th>RBM</th>
Line 108... Line 98...
108 
                </tfoot>
 98 
                </tfoot>
109 
            </table>
 99 
            </table>
110 
        </div>
 100 
        </div>
111 
    </div>
 101 
    </div>
112 
</section>
 102 
</section>
113 
 
 - 
 
114 
<script>
 103 
<script>
115 
    function formatValueInLakh(value) {
 104 
    function formatValueInLakh(value) {
116 
        return (value / 100000).toFixed(1) + 'L';
 105 
        return (value / 100000).toFixed(1) + 'L';
117 
    }
 106 
    }
118 
 
 107 
 
- 
 
 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 
 
119 
    function formatTargets() {
 120 
    function formatTargets() {
120 
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');
 121 
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');
- 
 
 122 
        const headerCells = document.querySelectorAll('#rbm-arr-table thead th');
- 
 
 123 
        const footerCells = document.querySelectorAll('#rbm-arr-table tfoot td');
- 
 
 124 
 
121 
        let totalAchieved = 0, totalTarget = 0;
 125 
        let totalAchieved = 0, totalTarget = 0;
122 
        let totalAchievedHid = 0, totalTargetHid = 0;
 126 
        let totalAchievedHid = 0, totalTargetHid = 0;
123 
        let totalAchievedRun = 0, totalTargetRun = 0;
 127 
        let totalAchievedRun = 0, totalTargetRun = 0;
124 
        let totalAchievedSlow = 0, totalTargetSlow = 0;
 128 
        let totalAchievedSlow = 0, totalTargetSlow = 0;
125 
        let totalAchievedEol = 0, totalTargetEol = 0;
 129 
        let totalAchievedEol = 0, totalTargetEol = 0;
Line 128... Line 132...
128 
        rows.forEach(row => {
 132 
        rows.forEach(row => {
129 
            const cells = row.querySelectorAll('td');
 133 
            const cells = row.querySelectorAll('td');
130 
            cells.forEach((cell, index) => {
 134 
            cells.forEach((cell, index) => {
131 
                const achievedSpan = cell.querySelector('.achieved-cell');
 135 
                const achievedSpan = cell.querySelector('.achieved-cell');
132 
                const targetSpan = cell.querySelector('.target-cell');
 136 
                const targetSpan = cell.querySelector('.target-cell');
- 
 
 137 
 
133 
                if (achievedSpan && targetSpan) {
 138 
                if (achievedSpan && targetSpan) {
134 
                    const achievedValue = parseFloat(achievedSpan.textContent.replace(/[^\d.-]/g, ''));
 139 
                    const achievedValue = parseFloat(achievedSpan.textContent.replace(/[^\d.-]/g, ''));
135 
                    const targetValue = parseFloat(targetSpan.textContent.replace(/[^\d.-]/g, ''));
 140 
                    const targetValue = parseFloat(targetSpan.textContent.replace(/[^\d.-]/g, ''));
136 
 
 141 
 
137 
                    // Add to totals
 142 
                    switch (index) {
138 
                    if (index === 1) {
 143 
                        case 1:
139 
                        totalAchieved += achievedValue || 0;
 144 
                            totalAchieved += achievedValue || 0;
140 
                        totalTarget += targetValue || 0;
 145 
                            totalTarget += targetValue || 0;
- 
 
 146 
                            break;
141 
                    } else if (index === 3) {
 147 
                        case 3:
142 
                        totalAchievedHid += achievedValue || 0;
 148 
                            totalAchievedHid += achievedValue || 0;
143 
                        totalTargetHid += targetValue || 0;
 149 
                            totalTargetHid += targetValue || 0;
- 
 
 150 
                            break;
144 
                    } else if (index === 5) {
 151 
                        case 5:
145 
                        totalAchievedRun += achievedValue || 0;
 152 
                            totalAchievedRun += achievedValue || 0;
146 
                        totalTargetRun += targetValue || 0;
 153 
                            totalTargetRun += targetValue || 0;
- 
 
 154 
                            break;
147 
                    } else if (index === 7) {
 155 
                        case 7:
148 
                        totalAchievedSlow += achievedValue || 0;
 156 
                            totalAchievedSlow += achievedValue || 0;
149 
                        totalTargetSlow += targetValue || 0;
 157 
                            totalTargetSlow += targetValue || 0;
- 
 
 158 
                            break;
150 
                    } else if (index === 9) {
 159 
                        case 9:
151 
                        totalAchievedEol += achievedValue || 0;
 160 
                            totalAchievedEol += achievedValue || 0;
152 
                        totalTargetEol += targetValue || 0;
 161 
                            totalTargetEol += targetValue || 0;
- 
 
 162 
                            break;
153 
                    } else if (index === 11) {
 163 
                        case 11:
154 
                        totalAchievedOther += achievedValue || 0;
 164 
                            totalAchievedOther += achievedValue || 0;
155 
                        totalTargetOther += targetValue || 0;
 165 
                            totalTargetOther += targetValue || 0;
- 
 
 166 
                            break;
156 
                    }
 167 
                    }
157 
 
 168 
 
158 
                    // Format values in lakh
 - 
 
159 
                    if (!isNaN(achievedValue)) achievedSpan.textContent = formatValueInLakh(achievedValue);
 169 
                    if (!isNaN(achievedValue)) achievedSpan.textContent = formatValueInLakh(achievedValue);
160 
                    if (!isNaN(targetValue)) targetSpan.textContent = formatValueInLakh(targetValue);
 170 
                    if (!isNaN(targetValue)) targetSpan.textContent = formatValueInLakh(targetValue);
161 
 
 171 
 
162 
                    const percentCell = cell.nextElementSibling;
 172 
                    const percentCell = cell.nextElementSibling;
163 
                    if (percentCell && targetValue > 0) {
 173 
                    if (percentCell && targetValue > 0) {
164 
                        const percentage = ((achievedValue / targetValue) * 100).toFixed(1);
 174 
                        const percentage = ((achievedValue / targetValue) * 100).toFixed(1);
165 
                        percentCell.textContent = percentage + '%';
 175 
                        percentCell.textContent = percentage + '%';
166 
 
 - 
 
167 
                        // Determine background color based on percentage
 - 
 
168 
                        let color;
 - 
 
169 
                        if (percentage <= 40) {
 - 
 
170 
                            color = '#F56983FF'; // Orange for <= 40%
 - 
 
171 
                        } else if (percentage > 40 && percentage <= 75) {
 176 
                        applyGradientColor(percentCell, percentage);
172 
                            color = '#f2c947e8'; // Yellow for 41% - 75%
 - 
 
173 
                        } else {
 - 
 
174 
                            color = '#82ef8299'; // Green for > 75%
 - 
 
175 
                        }
 - 
 
176 
 
 - 
 
177 
                        // Apply gradient background with the color
 - 
 
178 
                        percentCell.style.background = `linear-gradient(to right, ${color} ${percentage}%, transparent ${percentage}%)`;
 - 
 
179 
                    } else if (percentCell) {
 - 
 
180 
                        percentCell.textContent = 'N/A';
 - 
 
181 
                        percentCell.style.background = 'none';
 - 
 
182 
                    }
 177 
                    }
183 
                }
 178 
                }
184 
            });
 179 
            });
185 
        });
 180 
        });
186 
 
 181 
 
187 
        // Update total row with calculated totals
 - 
 
188 
        document.getElementById('total-achieved').textContent = formatValueInLakh(totalAchieved);
 182 
        footerCells[1].querySelector('#total-achieved').textContent = formatValueInLakh(totalAchieved);
189 
        document.getElementById('total-target').textContent = formatValueInLakh(totalTarget);
 183 
        footerCells[1].querySelector('#total-target').textContent = formatValueInLakh(totalTarget);
190 
        document.getElementById('total-achieved-hid').textContent = formatValueInLakh(totalAchievedHid);
 - 
 
191 
        document.getElementById('total-target-hid').textContent = formatValueInLakh(totalTargetHid);
 - 
 
192 
        document.getElementById('total-achieved-run').textContent = formatValueInLakh(totalAchievedRun);
 - 
 
193 
        document.getElementById('total-target-run').textContent = formatValueInLakh(totalTargetRun);
 - 
 
194 
        document.getElementById('total-achieved-slow').textContent = formatValueInLakh(totalAchievedSlow);
 - 
 
- 
 
 184 
 
195 
        document.getElementById('total-target-slow').textContent = formatValueInLakh(totalTargetSlow);
 185 
        const totalPercent = totalTarget > 0 ? ((totalAchieved / totalTarget) * 100).toFixed(1) : 'N/A';
196 
        document.getElementById('total-achieved-eol').textContent = formatValueInLakh(totalAchievedEol);
 - 
 
197 
        document.getElementById('total-target-eol').textContent = formatValueInLakh(totalTargetEol);
 186 
        footerCells[2].textContent = totalPercent + '%';
198 
        document.getElementById('total-achieved-other').textContent = formatValueInLakh(totalAchievedOther);
 - 
 
199 
        document.getElementById('total-target-other').textContent = formatValueInLakh(totalTargetOther);
 187 
        if (totalPercent !== 'N/A') applyGradientColor(footerCells[2], totalPercent);
200 
    }
 188 
    }
201 
 
 189 
 
202 
    window.onload = formatTargets;
 190 
    window.onload = formatTargets;
203 
</script>
 191 
</script>
204 
 
 192 
</body>
205 
 
 193 
</html>