


<html>
    <br><br>

    <style type="text/css">
    select {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 100;
    }
    #ab6a408f-ab6a-408f-4a8b-831f4a8b831f {
      min-width:100px;
      min-height:100px;
      left:0;
      right:30%;
      top: 0;
      bottom: 20%;      
      position: absolute;
    }
    #ab6a408f-ab6a-408f-4a8b-831f4a8b831f>img{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      filter:invert(100%);
      border-radius: 50%;
      opacity:0.5;
      border: 5px solid white;
      overflow:hidden;
      background: white;
    }
  </style>
  <select id="categoryFilter">
    <option value="null" selected>all categories</option>p
    <option value="0">NSAID</option>p
    <option value="1">Steroid</option>p
    <option value="2">Sedative</option>p
    <option value="3">Opiod</option>p
    <option value="4">DMARD</option>p
    <option value="5">Immuno</option>p
  </select>
<div id="ab6a408f-ab6a-408f-4a8b-831f4a8b831f"><img src="https://demo-test.streamscape.com/images/loader.gif"></div>
<script async defer src="https://demo-test.streamscape.com/ext/sys/recharts.min.js" 
  onload="(window['chartInit-ab6a408f-ab6a-408f-4a8b-831f4a8b831f'])();"></script>
<script>
  window["chartInit-ab6a408f-ab6a-408f-4a8b-831f4a8b831f"]=function(){
    rechartEmbedded.expose("_");
    rechartEmbedded({cid:"ab6a408f-ab6a-408f-4a8b-831f4a8b831f",
                 element:document.getElementById("ab6a408f-ab6a-408f-4a8b-831f4a8b831f"),
                     url:"https://demo-test.streamscape.com",
                   token:"tkn1clvms49qdjdaqldnb794kdki93jerib74r",
                   reset:true})
    .then(function(i){
      window.drugPie = i;
      window.addEventListener("resize", function(){ i.chart.resize();});
      i.chart.on("pieselectchanged",function(evt){
        var val = _.find(i.getData(),['name',evt.name]);
        // alert(JSON.stringify(val,null,2));
        if(evt.selected[evt.name]){
          drugGauge.showDetail(val);
          fatalGauge.showDetail(val);
        }
        else{
          fatalGauge.hideDetail();
        }
      });
      document.getElementById('categoryFilter').addEventListener("change", function(){
        var p = {"categoryId":event.target.value=="null"?null:parseInt(event.target.value)};
        i.reload(p);
      });
     });
  };
</script>
<style type="text/css">
  #baa04403-baa0-4403-650e-6668650e6668{
    top:0;
    left:70%;
    min-width:100px;
    min-height:100px;
    right:0;
    bottom:50%;    
    position: absolute;
  }
  #baa04403-baa0-4403-650e-6668650e6668>img{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    filter:invert(100%);
    border-radius: 50%;
    opacity:0.5;
    border: 5px solid white;
    overflow:hidden;
    background: white;
  }
</style>
<div id="baa04403-baa0-4403-650e-6668650e6668"><img src="https://demo-test.streamscape.com/images/loader.gif"></div>
<script async defer src="https://demo-test.streamscape.com/ext/sys/recharts.min.js" 
  onload="(window['chartInit-baa04403-baa0-4403-650e-6668650e6668'])();"></script>
<script>
  window["chartInit-baa04403-baa0-4403-650e-6668650e6668"]=function(){
    rechartEmbedded({cid:"baa04403-baa0-4403-650e-6668650e6668",
                 element:document.getElementById("baa04403-baa0-4403-650e-6668650e6668"),
                     url:"https://demo-test.streamscape.com",
                   token:"tkn1clvms49qdjdaqldnb794kdki93jerib74r",
                   reset:true})
    .then(function(i){
      window.drugGauge = i;
      drugGauge.showDetail = function(val){
        var gaugeData = drugGauge.getData("Adverse");
        gaugeData[0].value = val.value;
        drugGauge.setData(gaugeData,"Adverse");
        drugGauge.chart.setOption({title:{text:val.name}});
      };
      drugGauge.hideDetail = function(){
        drugGauge.reload(p);
      };
      window.addEventListener("resize", function(){ drugGauge.chart.resize();});
      var p={"categoryId":null};
      document.getElementById('categoryFilter').addEventListener("change", function(){
        p = {"categoryId":event.target.value=="null"?null:parseInt(event.target.value)};
        drugGauge.reload(p);

        //i.chart.setOption({title:{subtext:this.options[this.selectedIndex].text}});
      });
     });
  };
</script>

<style type="text/css">
  #cec34064-cec3-4064-3779-302637793026{
    top:50%;
    left:70%;
    min-width:100px;
    min-height:100px;
    right:0;
    bottom:0;
    position: absolute;
  }
  #cec34064-cec3-4064-3779-302637793026>img{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    filter:invert(100%);
    border-radius: 50%;
    opacity:0.5;
    border: 5px solid white;
    overflow:hidden;
    background: white;
  }
</style>
<div id="cec34064-cec3-4064-3779-302637793026"><img src="https://demo-test.streamscape.com/images/loader.gif"></div>
<script async defer src="https://demo-test.streamscape.com/ext/sys/recharts.min.js" 
  onload="(window['chartInit-cec34064-cec3-4064-3779-302637793026'])();"></script>
<script>
  window["chartInit-cec34064-cec3-4064-3779-302637793026"]=function(){
    rechartEmbedded({cid:"cec34064-cec3-4064-3779-302637793026",
                 element:document.getElementById("cec34064-cec3-4064-3779-302637793026"),
                     url:"https://demo-test.streamscape.com",
                   token:"tkn1clvms49qdjdaqldnb794kdki93jerib74r",
                   reset:true})
    .then(function(i){
      window.fatalGauge = i;
      fatalGauge.showDetail = function(val){
        var gaugeData = fatalGauge.getData("Adverse");
        gaugeData[0].value = val.fatal;
        fatalGauge.setData(gaugeData,"Adverse");
      };
      fatalGauge.hideDetail = function(){
        fatalGauge.reload(p);
      };
      window.addEventListener("resize", function(){ fatalGauge.chart.resize();});
      var p={"categoryId":null};
      document.getElementById('categoryFilter').addEventListener("change", function(){
        p = {"categoryId":event.target.value=="null"?null:parseInt(event.target.value)};
        console.log("categoryFilter change fatal",p);
        fatalGauge.reload(p);

        //i.chart.setOption({title:{subtext:this.options[this.selectedIndex].text}});
      });
     });
  };
</script>

<div id="7c824840-7c82-4840-dc50-09b7dc5009b7" 
  style="min-width:100px;min-height:100px;position: absolute; top:65%;bottom: 0;left: 0;right: 30%;"><img src="https://demo-test.streamscape.com/images/loader.gif" style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);filter:invert(100%);border-radius: 50%;opacity:0.5;border: 5px solid white;overflow:hidden;background: white;"></div>
<script async defer src="https://demo-test.streamscape.com/ext/sys/recharts.min.js" 
  onload="(window['chartInit-7c824840-7c82-4840-dc50-09b7dc5009b7'])();"></script>
<script>
  window["chartInit-7c824840-7c82-4840-dc50-09b7dc5009b7"]=function(){
    rechartEmbedded({cid:"7c824840-7c82-4840-dc50-09b7dc5009b7",
                 element:document.getElementById("7c824840-7c82-4840-dc50-09b7dc5009b7"),
                     url:"https://demo-test.streamscape.com",
                   token:"tkn1clvms49qdjdaqldnb794kdki93jerib74r",
                   autoreload:{
                    mode:"polling",
                    period:5000
                   },
                   reset:true})
    .then(function(i){
      window.addEventListener("resize", function(){ i.chart.resize();});
     });
  };
</script>

</html>