{% include '_var_header.html' %}
<div class="col-md-6">
    <div class="row">
        <div class="col-sm-6">
            <table class="stats ">
                <tr>
                    <th>去重后个数</th>
                    <td>{{ values['unique'] }}</td>
                </tr>
                <tr>
                    <th>Unique (%)</th>
                    <td>{{ values['unique_percentage'] }}</td>
                </tr>
                <tr>
                    <th>缺失率 (%)</th>
                    <td>{{ values['null_count_percentage'] }}</td>
                </tr>
                <tr>
                    <th>缺失个数 (n)</th>
                    <td>{{ values['null_count'] }}</td>
                </tr>
            </table>
        </div>
        <div class="col-sm-6">
            <table class="stats ">
                <tr>
                    <th>均值</th>
                    <td>{{ values['mean'] }}</td>
                </tr>
                <tr>
                    <th>最小值</th>
                    <td>{{ values['min'] }}</td>
                </tr>
                <tr>
                    <th>最大值</th>
                    <td>{{ values['max'] }}</td>
                </tr>
                <tr>
                    <th>Zeros (%)</th>
                    <td>{{ values['zero_count_percentage'] }}</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div class="col-md-3 collapse in" id="minihistogram{{ values['var_id'] }}">
    <img src="{{ values['mini_histogram'] }}">

</div>
<div class="col-md-12 text-right">
    <a role="button" data-toggle="collapse" data-target="#descriptives{{ values['var_id'] }},#minihistogram{{ values['var_id'] }}"
       aria-expanded="false" aria-controls="collapseExample">
        扩展信息
    </a>
</div>
<div class="row collapse col-md-12" id="descriptives{{ values['var_id'] }}">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#quantiles{{ values['var_id'] }}"
                                                  aria-controls="quantiles{{ values['var_id'] }}" role="tab"
                                                  data-toggle="tab">统计值</a></li>
        <li role="presentation"><a href="#histogram{{ values['var_id'] }}" aria-controls="histogram{{ values['var_id'] }}"
                                   role="tab" data-toggle="tab">直方图</a></li>
        <li role="presentation"><a href="#common{{ values['var_id'] }}" aria-controls="common{{ values['var_id'] }}"
                                   role="tab" data-toggle="tab">频率统计</a></li>
        <li role="presentation"><a href="#extreme{{ values['var_id'] }}" aria-controls="extreme{{ values['var_id'] }}"
                                   role="tab" data-toggle="tab">极值</a></li>

    </ul>

    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active row" id="quantiles{{ values['var_id'] }}">
            <div class="col-md-4 col-md-offset-1">
                <p class="h4">分位数统计</p>
                <table class="stats indent">
                    <tr>
                        <th>最小值</th>
                        <td>{{ values['min'] }}</td>
                    </tr>
                    <tr>
                        <th>5-th 分位数</th>
                        <td>{{ values['quantile_5'] }}</td>
                    </tr>
                    <tr>
                        <th>Q1</th>
                        <td>{{ values['quantile_25'] }}</td>
                    </tr>
                    <tr>
                        <th>中位数</th>
                        <td>{{ values['quantile_50'] }}</td>
                    </tr>
                    <tr>
                        <th>Q3</th>
                        <td>{{ values['quantile_75'] }}</td>
                    </tr>
                    <tr>
                        <th>95-th 分位数</th>
                        <td>{{ values['quantile_95'] }}</td>
                    </tr>
                    <tr>
                        <th>最大值</th>
                        <td>{{ values['max'] }}</td>
                    </tr>
                    <tr>
                        <th>IQR 四分位距</th>
                        <td>{{ values['iqr'] }}</td>
                    </tr>
                </table>
            </div>
            <div class="col-md-4 col-md-offset-2">
                <p class="h4">描述性统计</p>
                <table class="stats indent">
                    <tr>
                        <th>标准差</th>
                        <td>{{ values['std'] }}</td>
                    </tr>
                    <tr>
                        <th>协方差</th>
                        <td>{{ values['cv'] }}</td>
                    </tr>
                    <tr>
                        <th>求和</th>
                        <td>{{ values['sum'] }}</td>
                    </tr>
                    <tr>
                        <th>均值</th>
                        <td>{{ values['mean'] }}</td>
                    </tr>
                    <tr>
                        <th>MAD 绝对中位值</th>
                        <td>{{ values['mad'] }}</td>
                    </tr>
                    <tr>
                        <th>Kurtosis 峰度</th>
                        <td>{{ values['kurtosis'] }}</td>
                    </tr>
                    <tr class="{{ row_classes['skewness'] }}">
                        <th>Skewness 偏度</th>
                        <td>{{ values['skewness'] }}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane col-md-8 col-md-offset-2" id="histogram{{ values['var_id'] }}">
            <img src="{{ values['histogram'] }}"/>
        </div>
        <div role="tabpanel" class="tab-pane col-md-12" id="common{{ values['var_id'] }}">
            {{ values['freqtable'] }}
        </div>
        <div role="tabpanel" class="tab-pane col-md-12"  id="extreme{{ values['var_id'] }}">
            <p class="h4">Minimum5 值</p>
            {{ values['firstn_expanded'] }}
            <p class="h4">Maximum5 值</p>
            {{ values['lastn_expanded'] }}
        </div>
    </div>
</div>
{% include '_var_footer.html' %}