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/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>
<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;
        

    }
    .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 .chart {
        max-height:99%;
        min-height:99%;
        height:99%;
    }
    .dashboard .chart-pane .chart .graph {
        
        
        max-height:100%;
        min-height: 100%;
        


    }
    .dashboard .chart-pane .chart .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, #D3D3D3, #F3F3F3);}
    .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; font-weight:bold; margin:4%;}
    .scalar .label {font-size:12px; text-transform:capitalize; text-overflow: ellipsis; display:grid; align-items: flex-end; text-align:center ;}
</style>
<script>
    sessionStorage.io_context  = "{{context}}"
    var plot = function(id,index){
        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 = 'chart border-round border'
                frame.className = 'chart border'
                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)
                    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%'
                    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(){
        $('.item-group').slideUp()
    })
</script>
<title>Healthcare/IO Analytics</title>
<body>
    <div class="pane border">
        <div class="header border-bottom">
            <div class="caption">Healthcare/IO</div>
            <div class="small">Analytics Dashboard</div>
        </div>
        
        <div class="menu border-right">
           <div>
            {% for key in sections %}
            <div class="items">
                <div class="bold active" onclick="toggle({{loop.index -1}})" 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">
                    
                    {% 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:grid; align-items:flex-end">
                <div class="logs border" style="height:250px"></div>

            </div>
            
        </div>
        <div class="dashboard"> 
            
        </div>
            
    </div>
    <div class="footer small">
        &copy; Vanderbilt University Medical Center
    </div>
</body>