Stattree - goal percent - visualization

app/Http/Controllers/StatTreeController.php

@@ -606,7 +606,8 @@ class StatTreeController extends Controller
                 "treeOrderPositionIndex" => $line->tree_order_position_index,
                 "columns" => $columns,
                 "clause" => $clause,
-                "goalPercent" => (is_null($line->goal_percent) ? -1 : $line->goal_percent)
+                "goalPercent" => (is_null($line->goal_percent) ? -1 : $line->goal_percent),
+                "goalCondition" => (is_null($line->goal_condition) ? '' : $line->goal_condition)
             ],
             "a_attr" => [
                 "title" => $line->displayLineClause()->clause->clause_text
@@ -654,6 +655,7 @@ class StatTreeController extends Controller
         $statTreeLine->tree_order_position_index = $position;
         $statTreeLine->last_refresh_count = null;
         $statTreeLine->tsv_text_for_report_columns = null;
+        $statTreeLine->goal_condition = (!$line->goalCondition ? null : $line->goalCondition);
         $statTreeLine->goal_percent = ($line->goalPercent === -1 ? null : $line->goalPercent);
         $statTreeLine->parent_stat_tree_line_id = $parentLine ? $parentLine->id : null;
         $statTreeLine->save();

config/app.php

@@ -65,7 +65,7 @@ return [
 
     'hrm2_url' => env('HRM2_URL'),
 
-    'asset_version' => 52,
+    'asset_version' => 53,
 
     'temp_dir' => env('TEMP_DIR'),
 

public/css/style.css

@@ -2830,6 +2830,15 @@ table.stag-compact-grid>tbody>tr>td [if-grid-view] {
 .stat-tree-view .jstree-anchor.has-drop-visualization.drop-76-100::after {
     color: red;
 }
+.stat-tree-view .jstree-anchor.has-goal-label::before {
+    content: attr(data-goal-label);
+    margin-left: auto;
+    font-size: 80%;
+    color: orangered;
+    position: absolute;
+    left: calc(100% + 0.75rem);
+    font-weight: bold;
+}
 .mv-drop-0-25 {
     color: grey;
 }

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

@@ -930,10 +930,10 @@
                                         if(!realNode.data) return;
                                         if(parent && parent.data.lastRefreshCount !== null && parent.data.lastRefreshCount !== -1) {
                                             if(node.data.lastRefreshCount !== null && node.data.lastRefreshCount !== -1) {
-                                                realNode.data.dropPercent = 100 - ((node.data.lastRefreshCount / parent.data.lastRefreshCount) * 100);
+                                                realNode.data.dropPercent = ((node.data.lastRefreshCount / parent.data.lastRefreshCount) * 100);
                                                 if(realNode.data.dropPercent) {
                                                     let element = StatTree.el.jstree(true).get_node(node.id, true), cssClass = '';
-                                                    if(realNode.data.dropPercent > 75) {
+                                                    /*if(realNode.data.dropPercent > 75) {
                                                         cssClass = 'drop-76-100';
                                                     }
                                                     else if(realNode.data.dropPercent > 50 && realNode.data.dropPercent <= 75) {
@@ -944,11 +944,48 @@
                                                     }
                                                     else if(realNode.data.dropPercent > 0 && realNode.data.dropPercent <= 25) {
                                                         cssClass = 'drop-0-25';
-                                                    }
+                                                    }*/
+                                                    cssClass = 'drop-0-25';
                                                     element.find('>a.jstree-anchor')
                                                         .addClass('has-drop-visualization')
                                                         .addClass(cssClass)
                                                         .attr('data-drop-percent', (realNode.data.dropPercent.toFixed(3)) + '% ⤵');
+
+                                                    if(!!realNode.data.goalCondition && realNode.data.goalPercent !== -1) {
+                                                        let goalLabel = '';
+                                                        switch(realNode.data.goalCondition) {
+                                                            case '=':
+                                                                if(realNode.data.dropPercent !== realNode.data.goalPercent) {
+                                                                    goalLabel = 'Should be = ' + realNode.data.goalPercent + '%';
+                                                                }
+                                                                break;
+                                                            case '>':
+                                                                if(realNode.data.dropPercent <= realNode.data.goalPercent) {
+                                                                    goalLabel = 'Should be > ' + realNode.data.goalPercent + '%';
+                                                                }
+                                                                break;
+                                                            case '<':
+                                                                if(realNode.data.dropPercent >= realNode.data.goalPercent) {
+                                                                    goalLabel = 'Should be < ' + realNode.data.goalPercent + '%';
+                                                                }
+                                                                break;
+                                                            case '>=':
+                                                                if(realNode.data.dropPercent < realNode.data.goalPercent) {
+                                                                    goalLabel = 'Should be >= ' + realNode.data.goalPercent + '%';
+                                                                }
+                                                                break;
+                                                            case '<=':
+                                                                if(realNode.data.dropPercent > realNode.data.goalPercent) {
+                                                                    goalLabel = 'Should be <= ' + realNode.data.goalPercent + '%';
+                                                                }
+                                                                break;
+                                                        }
+                                                        if(!!goalLabel) {
+                                                            element.find('>a.jstree-anchor')
+                                                                .addClass('has-goal-label')
+                                                                .attr('data-goal-label', '⚠ ' + goalLabel);
+                                                        }
+                                                    }
                                                 }
                                             }
                                         }
@@ -1088,6 +1125,7 @@
                                             clause: node.data.clause,
                                             columns: node.data.columns,
                                             goalPercent: node.data.goalPercent,
+                                            goalCondition: node.data.goalCondition,
                                         };
                                         let children = [];
                                         for (let i = 0; i < node.children.length; i++) {
@@ -1151,7 +1189,10 @@
 
                                     linePropsColumn.removeClass('d-none');
                                     linePropsColumn.find('[line-label]').text(selected.data.displayLabel);
-                                    linePropsColumn.find('[line-goal]').text(selected.data.goalPercent === -1 ? '-' : selected.data.goalPercent + '%');
+                                    linePropsColumn.find('[line-goal]').text(
+                                        selected.data.goalCondition + ' ' +
+                                        (selected.data.goalPercent === -1 ? '-' : selected.data.goalPercent + '%')
+                                    );
 
                                     // fill args
                                     let tbody = linePropsColumn.find('[line-args]');
@@ -1334,17 +1375,21 @@
                                 .off('click', '.btn-edit-goal')
                                 .on('click', '.btn-edit-goal', function() {
                                     let selected = StatTree.selectedNode();
-                                    let value = window.prompt('New goal (%):', (selected.data.goalPercent !== -1 ? selected.data.goalPercent : ''));
-                                    if(value !== null) {
-                                        if($.trim(value) === '') {
-                                            value = -1;
-                                        }
-                                        else {
-                                            value = +value;
+                                    let condition = window.prompt('Condition (=, <, >, <=, ):', selected.data.goalCondition);
+                                    if(condition !== null) {
+                                        let value = window.prompt('New goal (%):', (selected.data.goalPercent !== -1 ? selected.data.goalPercent : ''));
+                                        if(value !== null) {
+                                            if($.trim(value) === '') {
+                                                value = -1;
+                                            }
+                                            else {
+                                                value = +value;
+                                            }
+                                            selected.data.goalCondition = condition;
+                                            selected.data.goalPercent = value;
+                                            StatTree.onSelected();
+                                            StatTree.setDirty();
                                         }
-                                        selected.data.goalPercent = value;
-                                        StatTree.onSelected();
-                                        StatTree.setDirty();
                                     }
                                     return false;
                                 });