<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <ModulePrefs title="Info Box"
                 author="WSO2 Gadget Server"
                 height="230"
                 scrolling="true" category="Templates"
                 tags="info box,visualization,template"
                 description="A info box gadget specifically developed for WSO2 AS HTTP Monitoring Dashboard.">
        <Require feature="pubsub-2">
            <Param name="topics">
                <![CDATA[
                <Topic title="" name="wso2.gadgets.charts.timeRangeChange"
                description="time range for filtering has been changed" type="object"
                subscribe="true"/>

                <Topic title="" name="wso2.gadgets.charts.ipChange"
                description="ip for filtering has been changed" type="string"
                subscribe="true"/>
                ]]>
            </Param>
        </Require>
    </ModulePrefs>
    <UserPref name="dataSource"
              display_name="Data Source"
              default_value="/publisher/config/defaults/gadgets/stacked-line-chart/datasource/dataFile1.jag">
    </UserPref>
    <UserPref name="startTime"
              display_name="Start time"
              default_value="">
    </UserPref>
    <UserPref name="endTime"
              display_name="End time"
              default_value="">
    </UserPref>
    <UserPref name="node"
              display_name="Node IP"
              default_value="">
    </UserPref>
    <UserPref name="appStatType"
              display_name="App Stat Type"
              default_value="request">
    </UserPref>
    <UserPref name="appname"
              display_name="Web App Name"
              default_value="">
    </UserPref>
    <Content type="html">
        <![CDATA[
 <html>
 <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Bar Chart</title>
	<link href="css/flot-graph.css" rel="stylesheet" type="text/css">
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="css/open_sans.css" rel="stylesheet" type="text/css">
	<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="css/custom.css" rel="stylesheet" type="text/css">
	<script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script>
	<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="js/bootstrap.js"></script>
	<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
	<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.selection.js"></script>
	<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.resize.js"></script>
	<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.tickrotor.js"></script>
	<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.axislabels.js"></script>
	<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.orderBars.js"></script>
	<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.time.js"></script>
	<script language="javascript" type="text/javascript" src="js/flot/flot-chart-core.js"></script>

</head>

<body>
        <div class="panel panel-one panel-stat">
            <div class="panel-heading">

                <div class="statistics info-box-i-one" style="display:none">
                    <div class="row">
                        <div class="col-xs-8">
                            <small class="statistics-main">Total Requests</small>
                            <h2 class="total-count">N/A</h2>
                            <i class="fa fa-clock-o fa-3x info-box-i-two" style="display:none"></i>
                        </div>
                        <div class="col-xs-4"  style="height:40%;">
                            <div id="placeholder" class="demo-placeholder" style="height:40%; width: 80%; "></div>
                        </div>
                    </div><!-- row -->
                    <div class="arrow-box"></div>
                    <div class="row">
                        <small class="measure-label">Per min</small>

                        <div class="col-xs-4 panel-bottom-box left-radius box-one-color">
                            <h4 id="min-count">N/A</h4>
                            <small class="stat-label">Min</small>
                        </div>

                        <div class="col-xs-4 line-seperator panel-bottom-box box-one-color">
                            <h4 class="avg-count">N/A</h4>
                            <small class="stat-label">Avg</small>
                        </div>

                        <div class="col-xs-4 line-seperator panel-bottom-box right-radius box-one-color">
                            <h4 id="max-count">N/A</h4>
                            <small class="stat-label">Max</small>
                        </div>
                    </div><!-- row -->
                </div><!-- statistics box one and two-->

                <div class="statistics info-box-i-three" style="display:none" >
                	<div class="row">
                  		<div class="col-xs-3">
                     		<small class="statistics-main">Sessions</small>
                    		<i class="fa fa-group fa-3x"></i>
                  		</div>
                  		<div class="col-xs-9">
                   			<span class="total-count"></span>
                  		</div>
                	</div><!-- row -->
                	<div class="arrow-box"></div>
                	<div class="row">

                  		<div class="col-xs-8 panel-bottom-box left-radius box-one-color">
                  			<div class="h4-stat-label">Avg per min.</div>
                    		<small class="stat-label">&nbsp;</small>
                  		</div>

                  		<div class="col-xs-4 panel-bottom-box  right-radius  box-one-color">
                  			<h4 class="avg-count">120</h4>
                    		<small class="stat-label">&nbsp;</small>
                  		</div>
                	</div><!-- row -->
              </div><!-- statistics box three -->

              <div class="statistics info-box-i-four" style="display:none" >
                	<div class="row">
                  		<div class="col-xs-3">
                     		<small class="statistics-main">Errors</small>
                    		<i class="fa fa-times-circle fa-3x"></i>

                  		</div>
                  		<div class="col-xs-9">
                   			<span class="total-count">123</span>
                  		</div>
                	</div><!-- row -->
                	<div class="arrow-box"></div>
                	<div class="row">

                  		<div class="col-xs-12 panel-bottom-box  right-radius left-radius  box-one-color">
                  			<h4 class="error-percentage">23%</h4>
                    		<small class="stat-label">&nbsp;</small>
                  		</div>
                	</div><!-- row -->
              </div><!-- statistics box four-->


            </div><!-- panel-heading -->
        </div><!-- panel -->
</body>
</html>

    ]]>
    </Content>
</Module>


