Pedigree Stats

<template>
    <div class="table-scroll-wrap pr-3 height400">
        <table
            v-if="Object.keys(pedstats).length !== 0"
            class="table table-siblings table-pedstats"
        >
            <thead>
                <tr>
                    <th>Name</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(ped, pid) in getSorted(level[50])" :key="`1${pid}`">
                    <td>{{ level[50][ped]["name"] }}</td>
                    <td>
                        <div class="">
                            <div class="progress">
                                <div
                                    class="bar"
                                    :style="`width:${level[50][ped]['value']}%`"
                                >
                                    <p class="percent"></p>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <span class="pl-2">{{ level[50][ped]["value"] }}%</span>
                    </td>
                </tr>
                <tr v-for="(ped, pid) in getSorted(level[25])" :key="`2${pid}`">
                    <td>{{ level[25][ped]["name"] }}</td>
                    <td>
                        <div class="">
                            <div class="progress">
                                <div
                                    class="bar"
                                    :style="`width:${level[25][ped]['value']}%`"
                                >
                                    <p class="percent"></p>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <span class="pl-2">{{ level[25][ped]["value"] }}%</span>
                    </td>
                </tr>
                <tr v-for="(ped, pid) in getSorted(level[12])" :key="`3${pid}`">
                    <td>{{ level[12][ped]["name"] }}</td>
                    <td>
                        <div class="">
                            <div class="progress">
                                <div
                                    class="bar"
                                    :style="`width:${level[12][ped]['value']}%`"
                                >
                                    <p class="percent"></p>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <span class="pl-2">{{ level[12][ped]["value"] }}%</span>
                    </td>
                </tr>
                <tr v-for="(ped, pid) in getSorted(level[6])" :key="`4${pid}`">
                    <td>{{ level[6][ped]["name"] }}</td>
                    <td>
                        <div class="">
                            <div class="progress">
                                <div
                                    class="bar"
                                    :style="`width:${level[6][ped]['value']}%`"
                                >
                                    <p class="percent"></p>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <span class="pl-2">{{ level[6][ped]["value"] }}%</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<style>
.bl-0 {
    border-left: 0px;
}
.br-0 {
    border-right: 0px;
}
.bt-0 {
    border-top: 0px;
}
.bb-0 {
    border-bottom: 0px;
}
.progress {
    padding: 0;
    width: 90%;
    height: 30px;
    overflow: hidden;
    background: #e5e5e5;
    color: #fff;
    border-radius: 0px;
}
.progress p {
    color: #fff;
}
.bar {
    position: relative;
    float: left;
    min-width: 1%;
    height: 100%;
    background: black;
}

.percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-family: tahoma, arial, helvetica;
    font-size: 12px;
    color: white;
}
</style>
<script>
export default {
    props: ["pedstats"],
    components: {},
    data() {
        return {
            level: undefined
        };
    },
    mounted() {
        this.getPedStats(50);
        this.getPedStats(25, 50);
        this.getPedStats(12, 25);
        this.getPedStats(6, 12);
    },
    computed: {},
    methods: {
        getSorted(list) {
            let keysorted = Object.keys(list).sort(function(a, b) {
                return list[b].value - list[a].value;
            });

            return keysorted;
        },
        getPedStats(upper, lower = 0) {
            if (!this.level) this.level = {};

            this.level[upper] = Object.values(this.pedstats).filter(item => {
                if (item.name) {
                    if (lower !== 0)
                        return item.value >= upper && item.value < lower;

                    return item.value >= upper;
                }
            });
        }
    },
    watch: {}
};
</script>