Subversion Repositories SmartDukaan

Rev

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

Rev Author Line No. Line
33917 ranu 1 
<style>
33930 ranu 2 
    table th {
3 
        text-align: center;
33917 ranu 4 
    }
5 
 
33930 ranu 6 
    #rbm-arr-table td, #rbm-arr-table th {
7 
        padding: 0.35rem;
8 
        font-size: 20px;
33917 ranu 9 
    }
33930 ranu 10 
 
11 
    .rb-name {
12 
        font-size: 17px;
13 
        font-weight: bold;
14 
    }
33939 ranu 15 
 
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 
    }
23 
 
33917 ranu 24 
</style>
25 
 
26 
<section class="wrapper">
33925 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>
33917 ranu 36 
 
37 
    <div class="row">
33925 ranu 38 
        ##        <div class="col-lg-4">
33939 ranu 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>
33925 ranu 45 
        ##        </div>
33939 ranu 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>
33917 ranu 92 
            </table>
93 
        </div>
94 
    </div>
33930 ranu 95 
</section>
96 
 
97 
<script>
33933 ranu 98 
    function formatValueInLakh(value) {
33939 ranu 99 
        return (value / 100000).toFixed(1) + 'L';
33930 ranu 100 
    }
101 
 
102 
    function formatTargets() {
103 
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');
104 
 
105 
        rows.forEach(row => {
33931 ranu 106 
            const cells = row.querySelectorAll('td');
33930 ranu 107 
 
33931 ranu 108 
            cells.forEach(cell => {
33939 ranu 109 
                const achievedSpan = cell.querySelector('.achieved-cell');
33933 ranu 110 
                const targetSpan = cell.querySelector('.target-cell');
33930 ranu 111 
 
33939 ranu 112 
                if (achievedSpan && targetSpan) {
113 
                    const achievedValue = parseFloat(achievedSpan.textContent.replace(/[^\d.-]/g, ''));
114 
                    const targetValue = parseFloat(targetSpan.textContent.replace(/[^\d.-]/g, ''));
33930 ranu 115 
 
33939 ranu 116 
                    // Format values in lakh
117 
                    if (!isNaN(achievedValue)) achievedSpan.textContent = formatValueInLakh(achievedValue);
33933 ranu 118 
                    if (!isNaN(targetValue)) targetSpan.textContent = formatValueInLakh(targetValue);
33931 ranu 119 
 
33939 ranu 120 
                    const percentCell = cell.nextElementSibling;
121 
                    if (percentCell && targetValue > 0) {
122 
                        const percentage = ((achievedValue / targetValue) * 100).toFixed(1);
123 
                        percentCell.textContent = percentage + '%';
124 
 
125 
                        // Determine background color based on percentage
126 
                        let color;
127 
                        if (percentage <= 40) {
128 
                            color = '#F56983FF'; // Orange for <= 40%
129 
                        } else if (percentage > 40 && percentage <= 75) {
130 
                            color = '#f2c947e8'; // Yellow for 41% - 75%
131 
                        } else {
132 
                            color = '#82ef8299'; // Green for > 75%
133 
                        }
134 
 
135 
                        // Apply gradient background with the color
136 
                        percentCell.style.background = `linear-gradient(to right, ${color} ${percentage}%, transparent ${percentage}%)`;
137 
                    } else if (percentCell) {
138 
                        percentCell.textContent = 'N/A';
139 
                        percentCell.style.background = 'none';
33931 ranu 140 
                    }
33930 ranu 141 
                }
142 
            });
143 
        });
144 
    }
145 
 
33939 ranu 146 
    window.onload = formatTargets;
33930 ranu 147 
</script>
148 
 
149