parser/healthcareio/server/templates/index.html

<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link rel="shortcut icon" href="{{context}}/static/img/logo.svg" type="image/icon type">
<link rel="stylesheet" href="{{context}}/static/css/default.css" type="text/css">
<script src="{{context}}/static/js/jx/rpc.js"></script>
<script src="{{context}}/static/js/jx/dom.js"></script>
<script src="{{context}}/static/js/jx/utils.js"></script>
<script src="{{context}}/static/js/jx/ext/modal.js"></script>

<script src="{{context}}/static/js/jquery.js"></script>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<link href="{{context}}/static/css/borders.css" type="text/css" rel="stylesheet">
<link href="{{context}}/static/css/fa/css/all.css" type="text/css" rel="stylesheet">
<script src="{{context}}/static/css/fa/js/all.js"></script>
<script src="{{context}}/static/js/io/dialog.js"></script>
<script src="{{context}}/static/js/io/io.js"></script>
<script src="{{context}}/static/js/io/healthcare.js"></script>
<style>
    body {
        font-size:16px;
        font-weight:lighter;
        font-family:sans-serif;
        padding-left:5%;
        padding-right:5%;
        
    }
    .pane {
        
        gap:2px;
        display:grid;
        grid-template-columns: 15% 85%;
        grid-template-rows:64px auto;
        height:90%;
        width:99%;
        margin-top:2%;
        padding:4px;
        
    }
    .header {
        height:64px;
        
        display:grid;
        grid-column: 1 / 3;
        grid-row:1;
        text-align: center;
        
        
    }
    .bold {font-weight:bold;}
    .caption {font-size:22px; font-weight: bold;}
    .small {font-size:12px; font-weight:lighter; font-family: sans-serif;}
    .footer {
        margin-top:8px;
        text-align:center;
        
    }
    .dashboard{        
        grid-column:2;
        grid-row:2;
        display:grid;
        grid-template-columns: 100%;
        overflow:hidden;
        
        scroll-behavior: smooth;
        gap:2px;
        padding:4px;
        height:95%;
        

    }
    .dashboard .chart-pane {
        display:grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows:repeat(2,50%);
        gap:4px;
        
        max-height:100%;
        min-height:100%;
        height:100%;
        
        
        

    }
    .dashboard .chart-pane .chart2 {
        max-height:99%;
        min-height:99%;
        height:99%;
    }
    .dashboard .chart-pane .chart2 .graph {
        
        
        max-height:100%;
        min-height: 100%;
        


    }
    .dashboard .chart-pane .chart2 .graph .apexcharts-svg {
        /*border-radius:8px;*/
        background-color:#f3f3f3;
        max-height:100%;
        min-height:100%;
        height:100%;
        max-width:100%;
        
    }
    .menu {
        
        align-items:top;
        grid-column:1;
        grid-row:2;       
        display:grid;
        grid-template-rows:auto 250px;
        text-transform: capitalize;
        padding:4px;
        
        
        
    }
    .menu .items {
        margin:4px;
        cursor:pointer;

    }
    /*.menu .items:hover .item-group {
        display:inline;
        
    }*/
    .menu .items .item-group {
        position:relative;
        margin-top:10px;
        
        
        
        
    }
    .menu .items .item-group .item { margin:4px; padding:4px;}
    .menu .items .item-group > .item:nth-child(odd) { background-color:#f3f3f3 }
    .apexcharts-xaxis-title,.apexcharts-yaxis-title, .apexcharts-title-text{text-transform:capitalize}
    
    .scalar-frame-2 , .scalar-frame-4 {
        
        display:grid;
        grid-template-columns: repeat(2,1fr);
        gap:2px;
        align-self: flex-end    ;
        
        
        

    }
    
    .scalar-frame-3  {
        align-self: center;
        display:grid;
        grid-template-columns: repeat(3,1fr);
        gap:2px;
        align-self: center;
        align-items: center;

    }
   

    .gradient {  background-image: linear-gradient(to top,#F3F3F3, #FFFFFF, #FFFFFF);}
    .white {color:#ffffff}
    .scalar {
        display:grid;
        gap:2px;
        padding:4px;
        grid-template-columns:auto 100px;
        align-items:center;
        
        
        
        
    }
    .shadow {
        box-shadow: 0px 4px 4px #d3d3d3;
    }
    .scalar-title { padding:8px; text-transform: capitalize; }
    .scalar .value {font-size:32px; margin:4%;}
    .scalar .label {font-size:12px; text-transform:capitalize; text-overflow: ellipsis; display:grid; align-items: flex-end; text-align:center ;}
    
   
    .monthly_patient_count, .taxonomy_code_distribution, .top_adjustment_codes, .adjustment_reasons {
        grid-row:1 / span 3 ;
        
        
    }


</style>
<script>
    sessionStorage.io_context  = "{{context}}"
    var plot = function(id,index){
        $('.system').slideUp(function(){
            $('.dashboard').slideDown()
        })
        
        var uri = ([sessionStorage.io_context,'format',id,index]).join('/')
        var httpclient = HttpClient.instance()
        //
        // @TODO: Let the user know something is going on .. spinner
        httpclient.post(uri,function(x){
            
            var r = JSON.parse(x.responseText)
            
            var pane = jx.dom.get.instance('DIV')
            var scalar_pane = jx.dom.get.instance('DIV')
            pane.id = r.id
            pane.className = 'chart-pane'
            scalar_pane.className = 'scalar-pane'
            
            $('.dashboard').empty()
            $('.dashboard').append(pane)                
            var count = 0
            
            var p = jx.utils.patterns.visitor(r.pipeline,function(item){
                var div = jx.dom.get.instance('DIV')
                var frame = jx.dom.get.instance('DIV')
                //div.className = 'chart2 border-round border'
                frame.className = 'chart2 border ' + item.label.toLowerCase().replace(/ /g,'_')
                div.className = 'graph '
                //frame.append(div)
                //pane.append(frame)
                
                //pane.append(div)
             if(item.apex != null){   item.apex.title = {text:item.label}
                    frame.append(div)
                    pane.append(frame)
                    if (item.apex.colors ){
                        delete item.apex.colors
                    }
                    
                    /*item.apex.theme= {
                        mode: 'material', 
                        palette: 'palette6', 
                        monochrome: {
                            enabled: false,
                            color: '#f3f3f3',
                            shadeTo: 'light',
                            shadeIntensity: 0.65
                        },
                    }*/
                    item.apex.chart.height = '100%'
                    delete item.apex.chart.width
                    
                    
                    return new ApexCharts(div,item.apex)
                }else{
                    //frame.className = ''
                    //pane.className = ''
                    var scalar_frame = jx.dom.get.instance('SPAN')
                    var title = jx.dom.get.instance('SPAN')
                    var scalar=jx.dom.get.instance('DIV')
                    scalar.innerHTML = item.html
                    title.innerHTML = item.label.replace('_',' ')
                    title.className = 'scalar-title bold border-bottom'
                    div.append(title)
                    div.append(scalar)
                    scalar_pane.append(div)                    
                    
                    div.className = 'border gradient'
                    
                    count += 1
                    
                }
            })
            jx.utils.patterns.visitor(p,function(_chart){
                
                _chart.render()}
            )
            
            if(scalar_pane.children.length > 0){
                scalar_pane.className = 'scalar-frame-' + count
                pane.append(scalar_pane)
                if( $('.graph').length ==0 || $('.graph').length > 4){
                    
                    scalar_pane.style.gridColumn = '1 / span 2'
                }

                
            }
            //var chart = new ApexCharts($("#chart")[0], r.pipeline[0].apex)
            //chart.render()

        })
    }

    var toggle = function(index){
        $('.item-group').slideUp()
        
        var p = $($('.items')[index]).find('.fa-angle-up').children().length > 0
        var q  =$($('.item-group')[index]).children().length > 0
        
        $('.items').find('.glyph').children().remove()
        $('.items').find('.glyph').append('<i class="fas fa-angle-down"></i>')
        if (!q ){
            return;
        }
        if (!p){
            $($('.items')[index]).find('.glyph').children().remove()
            $($('.items')[index]).find('.glyph').append('<i class="fas fa-angle-up"></i>')
            $($('.item-group')[index]).slideDown()
        }
    }
    $(document).ready(function(){
        $('.dashabord').hide()
        $('.item-group').slideUp()
        var index = 0;
        jx.utils.patterns.visitor($('.menu .items'), function(_item){
            var node = $(_item).children()[0]
            $(node).attr('index',index)
            node.onclick = function(){ toggle($(this).attr('index')) }
            index += 1;
            
        })
        var year = (new Date()).getFullYear()
        $('.year').text(year)
    })
</script>
<title>Healthcare/IO Analytics</title>
<body>
    <div class="pane">
        <div class="header border-bottom">
            <div class="caption">Healthcare/IO :: Parser</div>
            <div class="small">Dashboard</div>
        </div>
        
        <div class="menu">
            
           <div>
                <div class="items">
                    <div class="bold active" style="margin:4px; height:28px; display:grid; gap:2px; grid-template-columns:auto 32px;"> 
                        <div>Setup</div>
                        <div align="center" class="glyph" >
                            
                            <i class="fas fa-angle-down"></i>
                        </div>
                    </div>
                    <div class="item-group border border-round">
                        <div class="item small active" onclick="setup.open()">Configure Parser</div>
                        
                        <div class="item small active" onclick="healthcare.io.reset()">Reset Parser</div>

                    </div>
                </div>
            {% for key in sections %}
                <div class="items">
                    <div class="bold active" style="margin:4px; height:28px; display:grid; gap:2px; grid-template-columns:auto 32px;"> 
                        <div>{{key|safe}}</div>
                        <div align="center" class="glyph" >
                            
                            <i class="fas fa-angle-down"></i>
                        </div>
                    </div>                    
                    <div class="item-group border border-round">
                        
                        {% for item in sections[key] %}
                            <div class="item small active" onclick="plot('{{key}}',{{loop.index-1}})">{{item.id}}</div>
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
           </div>
            
            <div style="display:none; align-items:flex-end">
                <div class="logs chart" style=" align-items:center; display:grid" align="center"></div>

            </div>
            
        </div>
       <div>
            <div class="dashboard" style="display:none"></div>
            
            {%include 'setup.html' %}
            
       </div>
            
    </div>
    <div class="footer small">
        Healthcare/IO :: Parser &copy; <span class="year">    </span>
    </div>
</body>