|
|
@@ -0,0 +1,143 @@
|
|
|
+{{-- resolve --}}
|
|
|
+@if(!@$statTree)
|
|
|
+ @if(!@$slug)
|
|
|
+ <div class="alert alert-danger m-0">Slug missing!</div>
|
|
|
+ @endif
|
|
|
+ <?php $statTree = \App\Models\StatTree::where('slug', $slug)->first(); ?>
|
|
|
+ @if(!@$statTree)
|
|
|
+ <div class="alert alert-danger m-0">Stat tree no found!</div>
|
|
|
+ @endif
|
|
|
+@endif
|
|
|
+<link rel="stylesheet" href="/jstree/themes/default/style.min.css" />
|
|
|
+<script src="/jstree/jstree.min.js"></script>
|
|
|
+<div id="statTreeView-{{$statTree->id}}">
|
|
|
+ <div class="stat-tree-view stat-tree-user-view overflow-auto min-height-300px" id="stat-tree-view-{{$statTree->id}}"></div>
|
|
|
+</div>
|
|
|
+<script>
|
|
|
+ (function() {
|
|
|
+ function init() {
|
|
|
+
|
|
|
+ (function ($, undefined) {
|
|
|
+ "use strict";
|
|
|
+ $.jstree.plugins.noclose = function () {
|
|
|
+ this.close_node = $.noop;
|
|
|
+ };
|
|
|
+ })(jQuery);
|
|
|
+
|
|
|
+ // stat tree
|
|
|
+ let StatTree = {
|
|
|
+ el: $('#stat-tree-view-{{$statTree->id}}'),
|
|
|
+ changed: false,
|
|
|
+
|
|
|
+ onSelected: function(_e, _data) {
|
|
|
+ @if(!@$reportTarget)
|
|
|
+ openDynamicStagPopup('/practice-management/stat-tree-lines/view-data/' + _data.node.data.uid,
|
|
|
+ null,
|
|
|
+ _data.node.data.displayLabel,
|
|
|
+ false,
|
|
|
+ 'medium');
|
|
|
+ @else
|
|
|
+ $.get('/practice-management/stat-tree-lines/view-data/' + _data.node.data.uid, _data => {
|
|
|
+ $('{{$reportTarget}}').html(_data);
|
|
|
+ });
|
|
|
+ @endif
|
|
|
+ },
|
|
|
+
|
|
|
+ load: function() {
|
|
|
+
|
|
|
+ // destroy if existing
|
|
|
+ try {
|
|
|
+ this.el.jstree('destroy');
|
|
|
+ }
|
|
|
+ catch (e) {}
|
|
|
+
|
|
|
+ this.el = $('#stat-tree-view-{{$statTree->id}}');
|
|
|
+
|
|
|
+ // get data
|
|
|
+ showMask();
|
|
|
+ $.get('{{ route('practice-management.statTrees.view.linesJSON', $statTree) }}', _data => {
|
|
|
+
|
|
|
+ // init tree with data
|
|
|
+ this.el
|
|
|
+ .on('redraw.jstree', () => { StatTree.dropVisualize(); })
|
|
|
+ .on('select_node.jstree', (_e, _data) => { StatTree.onSelected(_e, _data); })
|
|
|
+ .jstree({
|
|
|
+ "core": {
|
|
|
+ "multiple": false,
|
|
|
+ "animation": 0,
|
|
|
+ 'data': _data
|
|
|
+ },
|
|
|
+ "contextmenu": {
|
|
|
+ show_at_node: false,
|
|
|
+ items: function (node) {
|
|
|
+ if(node.data.type === 'stat_tree_line') { // stat_tree_line
|
|
|
+ return {
|
|
|
+ "data": {
|
|
|
+ "label": "<span class='text-sm'>View Data</span>",
|
|
|
+ "action": function (obj) {
|
|
|
+ openDynamicStagPopup('/practice-management/stat-tree-lines/view-data/' + node.data.uid,
|
|
|
+ null,
|
|
|
+ node.data.displayLabel,
|
|
|
+ false,
|
|
|
+ 'medium');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ "plugins": [
|
|
|
+ "wholerow",
|
|
|
+ "contextmenu",
|
|
|
+ "noclose"
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ }, 'json').then(hideMask);
|
|
|
+ },
|
|
|
+
|
|
|
+ dropVisualize: function() {
|
|
|
+ console.log('redrawn')
|
|
|
+ function calculateDropPercent(node, parent = null) {
|
|
|
+ let realNode = StatTree.el.jstree(true).get_node(node.id);
|
|
|
+ if(!realNode.data) return;
|
|
|
+ if(parent && parent.data.lastRefreshCount !== null) {
|
|
|
+ if(node.data.lastRefreshCount !== null) {
|
|
|
+ realNode.data.dropPercent = (((parent.data.lastRefreshCount - 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) {
|
|
|
+ cssClass = 'drop-76-100';
|
|
|
+ }
|
|
|
+ else if(realNode.data.dropPercent > 50 && realNode.data.dropPercent <= 75) {
|
|
|
+ cssClass = 'drop-51-75';
|
|
|
+ }
|
|
|
+ else if(realNode.data.dropPercent > 25 && realNode.data.dropPercent <= 50) {
|
|
|
+ cssClass = 'drop-26-50';
|
|
|
+ }
|
|
|
+ else if(realNode.data.dropPercent > 0 && realNode.data.dropPercent <= 25) {
|
|
|
+ cssClass = 'drop-0-25';
|
|
|
+ }
|
|
|
+ element.find('>a.jstree-anchor')
|
|
|
+ .addClass('has-drop-visualization')
|
|
|
+ .addClass(cssClass)
|
|
|
+ .attr('data-drop-percent', (realNode.data.dropPercent.toFixed(1)) + '% ⤵');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (let i = 0; i < node.children.length; i++) {
|
|
|
+ calculateDropPercent(node.children[i], node);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let raw = this.el.jstree('get_json');
|
|
|
+ for (let i = 0; i < raw.length; i++) {
|
|
|
+ calculateDropPercent(raw[i]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ StatTree.load();
|
|
|
+
|
|
|
+ }
|
|
|
+ addMCInitializer('stat-tree-view-{{$statTree->id}}', init, '#statTreeView-{{$statTree->id}}');
|
|
|
+ }).call(window);
|
|
|
+</script>
|
