{$layout}

{$var "header"}
<!-- world map -->
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
<script type="text/javascript" src="/js/world.js"></script>
<script type="text/javascript" src="/js/world-countries-map.js"></script>
{$end}

<first-menu>
    <menu-item href="/servers">服务列表</menu-item>
    <span class="item disabled">|</span>
    <menu-item :href="'/servers/server?serverId=' + server.id" active="true">"{{server.name}}"看板</menu-item>
    <span class="disabled item">|</span>
    <more-items-angle
            :v-data-url="'/servers/nearby?serverId=' + server.id"
            :v-url="'/servers/server/boards?serverId=${serverId}'"></more-items-angle>
</first-menu>

<!-- 加载中 -->
<div style="margin-top: 0.8em">
    <div class="ui message loading" v-if="isLoading">
        <div class="ui active inline loader small"></div>  &nbsp; 数据加载中...
    </div>
</div>

<!-- 流量地图 -->
<div v-if="!isLoading">
    <traffic-map-box :v-stats="topCountryStats"></traffic-map-box>
</div>
<div class="ui divider"></div>

<div class="ui menu tabular" v-show="!isLoading">
    <a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
    <a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>
</div>

<!-- 按小时统计流量 -->
<div class="chart-box" id="hourly-traffic-chart" v-show="trafficTab == 'hourly'"></div>

<!-- 按日统计流量 -->
<div class="chart-box" id="daily-traffic-chart" v-show="trafficTab == 'daily'"></div>

<div class="ui divider"></div>
<div class="ui menu tabular" v-show="!isLoading">
    <a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时访问量趋势</a>
    <a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天访问量趋势</a>
</div>

<!-- 按小时统计访问量 -->
<div class="chart-box" id="hourly-requests-chart" v-show="requestsTab == 'hourly'"></div>

<!-- 按日统计访问量 -->
<div class="chart-box" id="daily-requests-chart" v-show="requestsTab == 'daily'"></div>

<div class="ui divider"></div>

<!-- 域名排行 -->
<h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
<div class="chart-box" id="top-domains-chart"></div>

<div class="ui divider"></div>

<!-- 指标 -->
<div class="ui divider" v-if="metricCharts.length > 0"></div>
<metric-board>
    <metric-chart v-for="chart in metricCharts"
                  :key="chart.id"
                  :v-chart="chart.chart"
                  :v-stats="chart.stats"
                  :v-item="chart.item">
    </metric-chart>
</metric-board>