{$layout}
{$template "../item_menu"}
{$template "chart_menu"}
{$template "/echarts"}

<table class="ui table definition selectable">
    <tr>
        <td class="title">图表名称</td>
        <td>
            {{chart.name}}
        </td>
    </tr>
    <tr>
        <td>状态</td>
        <td>
            <label-on :v-is-on="chart.isOn"></label-on>
        </td>
    </tr>
    <tr>
        <td>图表类型</td>
        <td>
            {{chart.typeName}}
        </td>
    </tr>
    <tr>
        <td>宽度</td>
        <td>
            <span v-if="chart.widthDiv == 0">100%</span>
            <span v-else>1/{{chart.widthDiv}}</span>
        </td>
    </tr>
    <tr>
        <td>对象数限制</td>
        <td>
            <span v-if="chart.maxItems <= 0" class="disabled">没有限制</span>
            <span v-else>{{chart.maxItems}}</span>
        </td>
    </tr>
    <tr>
        <td>忽略空值对象</td>
        <td>
            <span v-if="chart.ignoreEmptyKeys" class="green">Y</span>
            <span v-else class="disabled">N</span>
        </td>
    </tr>
    <tr>
        <td>忽略其他对象</td>
        <td>
           <div v-if="chart.ignoredKeys.length > 0">
                <span v-for="key in chart.ignoredKeys" class="ui label basic small">{{key}}</span>
           </div>
            <span v-else class="disabled">没有要忽略的对象。</span>
        </td>
    </tr>
</table>

<h4>图表示例</h4>
<p class="comment"><span class="red">图中数据均为测试数据。</span></p>
<metric-board>
    <metric-chart :v-chart="chart" :v-stats="testingStats" :v-item="item"></metric-chart>
</metric-board>