Stat tree edit - multi-pro view drop visualization

public/css/style.css

@@ -2817,6 +2817,18 @@ table.stag-compact-grid>tbody>tr>td [if-grid-view] {
 .stat-tree-view .jstree-anchor.has-drop-visualization.drop-76-100::after {
     color: red;
 }
+.mv-drop-0-25 {
+    color: grey;
+}
+.mv-drop-26-50 {
+    color: saddlebrown;
+}
+.mv-drop-51-75 {
+    color: #dc7024;
+}
+.mv-drop-76-100 {
+    color: red;
+}
 .multi-pro-view .line-count-label {
     display: none;
 }
@@ -2832,10 +2844,11 @@ table.stag-compact-grid>tbody>tr>td [if-grid-view] {
     color: #777;
     border: 0;
     border-left: 1px solid #e1e1e1;
-    width: 100px;
+    width: 120px;
 }
 .multi-pro-view .multi-pro-stats-table tr th .pro-label {
-    max-width: 100px;
+    min-width: 120px;
+    max-width: 120px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -2844,7 +2857,7 @@ table.stag-compact-grid>tbody>tr>td [if-grid-view] {
     border-top: 0;
     padding: 0 5px;
     border-left: 1px solid #f1f1f1;
-    width: 100px;
+    width: 120px;
 }
 .multi-pro-view .multi-pro-stats-table tr th:last-child,
 .multi-pro-view .multi-pro-stats-table tr td:last-child {
@@ -2860,15 +2873,16 @@ table.stag-compact-grid>tbody>tr>td [if-grid-view] {
     padding-left: 4px;
 }
 .multi-pro-view .count-label .count {
-    min-width: 30px;
-    /*text-align: right;*/
-    margin-right: 5px;
+    white-space: nowrap;
+    width: 50%;
+    border-right: 1px solid #e7e7e7;
+    text-align: right;
+    padding-right: 5px;
 }
 .multi-pro-view .count-label .drop-percent {
-    width: 41px;
-    font-size: 80%;
+    font-size: 78%;
     opacity: 0.8;
-    text-align: right;
+    margin-left: 5px;
 }
 .multi-pro-view .multi-pro-view-stat-label {
     height: 22px;

resources/views/app/stat-tree/stat-trees/sub/edit.blade.php

@@ -302,12 +302,12 @@
                                             <div class="stat-tree-view overflow-auto min-height-300px" id="stat-tree-edit-{{$statTree->id}}"></div>
                                         @else
                                             <div class="d-flex align-items-start">
-                                                <div class="">
+                                                <div class="mv-tree">
                                                     <div class="multi-pro-view-stat-label">Stat</div>
                                                     <div class="stat-tree-view overflow-auto" id="stat-tree-edit-{{$statTree->id}}"></div>
                                                 </div>
-                                                <div class="flex-grow-1">
-                                                    <table class="table table-sm multi-pro-stats-table">
+                                                <div class="overflow-auto mv-table">
+                                                    <table class="table table-sm multi-pro-stats-table w-auto m-0">
                                                         <thead>
                                                         <tr>
                                                             <th {{$statTree->pro ? 'data-pro-uid="' . $statTree->pro->uid . '"' : ''}}>
@@ -318,27 +318,25 @@
                                                                     <div class="pro-label" title="{{$multiPro->name_display}}">{{$multiPro->name_display}}</div>
                                                                 </th>
                                                             @endforeach
-                                                            <th></th>
                                                         </tr>
                                                         </thead>
                                                         <tbody>
                                                         @foreach($linesFlat as $line)
-                                                            <tr data-line-uid="{{$line->uid}}">
+                                                            <tr data-line-uid="{{$line->uid}}" {!! $line->parent ? 'data-parent-line-uid="' . $line->parent->uid . '"' : '' !!}>
                                                                 <td class="p-0">
                                                                     <div class="count-label">
                                                                         <div class="count">{{$line->last_refresh_count}}</div>
-                                                                        <div class="drop-percent">50%  ⤵</div>
+                                                                        <div class="drop-percent"></div>
                                                                     </div>
                                                                 </td>
                                                                 @foreach($multiPros as $multiPro)
                                                                     <td class="p-0" data-pro-uid="{{$multiPro->uid}}">
                                                                         <div class="count-label">
-                                                                            <div class="count">0</div>
-                                                                            <div class="drop-percent">0%  ⤵</div>
+                                                                            <div class="count"></div>
+                                                                            <div class="drop-percent"></div>
                                                                         </div>
                                                                     </td>
                                                                 @endforeach
-                                                                <td></td>
                                                             </tr>
                                                         @endforeach
                                                         </tbody>
@@ -1139,6 +1137,34 @@
                                     for(let x in _data) {
                                         $('.multi-pro-stats-table tr[data-line-uid="' + x + '"] td[data-pro-uid="' + $(this).attr('data-pro-uid') + '"] .count').text(_data[x]);
                                     }
+
+                                    // calculate drop %
+                                    $('.multi-pro-stats-table tr[data-line-uid][data-parent-line-uid]').each(function() {
+                                        for (let i = 0; i < $(this).find('>td').length; i++) {
+                                            let parentCount = $('.multi-pro-stats-table tr[data-line-uid="' + $(this).attr('data-parent-line-uid') + '"]>td:eq(' + i + ') .count').first().text(),
+                                                myCount = $(this).find('>td:eq(' + i + ') .count').first().text();
+                                            if(parentCount && myCount && !Number.isNaN(+parentCount) && !Number.isNaN(+myCount) && +parentCount > 0) {
+                                                parentCount = +parentCount;
+                                                myCount = +myCount;
+                                                let element = $(this).find('>td:eq(' + i + ') .drop-percent').first(), cssClass = '';
+                                                let dropPercent = ((parentCount - myCount) / parentCount) * 100;
+                                                if(dropPercent > 75) {
+                                                    cssClass = 'mv-drop-76-100';
+                                                }
+                                                else if(dropPercent > 50 && dropPercent <= 75) {
+                                                    cssClass = 'mv-drop-51-75';
+                                                }
+                                                else if(dropPercent > 25 && dropPercent <= 50) {
+                                                    cssClass = 'mv-drop-26-50';
+                                                }
+                                                else if(dropPercent > 0 && dropPercent <= 25) {
+                                                    cssClass = 'mv-drop-0-25';
+                                                }
+                                                element.removeClass().addClass('drop-percent').addClass(cssClass).text(dropPercent.toFixed(1) + '% ⤵');
+                                            }
+                                        }
+                                    });
+
                                 }, 'json');
                             });
                             @endif
@@ -1154,6 +1180,8 @@
                             initVSplitter('stat-tree-edit-1', $('.clauses-column'), $('.tree-column'));
                             @if(!$multiProView)
                                 initVSplitter('stat-tree-edit-2', $('.tree-lhs-column'), $('.tree-rhs-column'));
+                            @else
+                                initVSplitter('stat-tree-edit-3', $('.mv-tree'), $('.mv-table'));
                             @endif
 
                         }