Subversion Repositories SmartDukaan

Rev

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

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