199 lines
4.2 KiB
Vue
Executable File
199 lines
4.2 KiB
Vue
Executable File
<template>
|
|
<loading-card :loading="loading" class="px-6 py-4">
|
|
<h3 class="flex mb-3 text-base text-80 font-bold">
|
|
{{ title }}
|
|
|
|
<span class="ml-auto font-semibold text-70 text-sm"
|
|
>({{ formattedTotal }} {{ __('total') }})</span
|
|
>
|
|
</h3>
|
|
|
|
<div v-if="helpText" class="absolute pin-r pin-b p-2">
|
|
<tooltip trigger="hover" placement="top-start">
|
|
<icon
|
|
type="help"
|
|
viewBox="0 0 17 17"
|
|
height="16"
|
|
width="16"
|
|
class="cursor-pointer text-60 -mb-1"
|
|
/>
|
|
|
|
<tooltip-content
|
|
slot="content"
|
|
v-html="helpText"
|
|
:max-width="helpWidth"
|
|
/>
|
|
</tooltip>
|
|
</div>
|
|
|
|
<div class="min-h-90px">
|
|
<div class="overflow-hidden overflow-y-auto max-h-90px">
|
|
<ul class="list-reset">
|
|
<li
|
|
v-for="item in formattedItems"
|
|
class="text-xs text-80 leading-normal"
|
|
>
|
|
<span
|
|
class="inline-block rounded-full w-2 h-2 mr-2"
|
|
:style="{
|
|
backgroundColor: item.color,
|
|
}"
|
|
/>{{ item.label }} ({{ item.value }} - {{ item.percentage }}%)
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div
|
|
ref="chart"
|
|
:class="chartClasses"
|
|
style="
|
|
width: 90px;
|
|
height: 90px;
|
|
right: 20px;
|
|
bottom: 30px;
|
|
top: calc(50% + 15px);
|
|
"
|
|
/>
|
|
</div>
|
|
</loading-card>
|
|
</template>
|
|
|
|
<script>
|
|
import Chartist from 'chartist'
|
|
import 'chartist/dist/chartist.min.css'
|
|
|
|
const colorForIndex = index =>
|
|
[
|
|
'#F5573B',
|
|
'#F99037',
|
|
'#F2CB22',
|
|
'#8FC15D',
|
|
'#098F56',
|
|
'#47C1BF',
|
|
'#1693EB',
|
|
'#6474D7',
|
|
'#9C6ADE',
|
|
'#E471DE',
|
|
][index]
|
|
|
|
export default {
|
|
name: 'PartitionMetric',
|
|
|
|
props: {
|
|
loading: Boolean,
|
|
title: String,
|
|
helpText: {},
|
|
helpWidth: {},
|
|
chartData: Array,
|
|
},
|
|
|
|
data: () => ({ chartist: null }),
|
|
|
|
watch: {
|
|
chartData: function (newData, oldData) {
|
|
this.renderChart()
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
this.chartist = new Chartist.Pie(
|
|
this.$refs.chart,
|
|
this.formattedChartData,
|
|
{
|
|
donut: true,
|
|
donutWidth: 10,
|
|
donutSolid: true,
|
|
startAngle: 270,
|
|
showLabel: false,
|
|
}
|
|
)
|
|
|
|
this.chartist.on('draw', context => {
|
|
if (context.type === 'slice') {
|
|
context.element.attr({
|
|
style: `fill: ${context.meta.color} !important`,
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
methods: {
|
|
renderChart() {
|
|
this.chartist.update(this.formattedChartData)
|
|
},
|
|
|
|
getItemColor(item, index) {
|
|
return typeof item.color === 'string' ? item.color : colorForIndex(index)
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
chartClasses() {
|
|
return [
|
|
'vertical-center',
|
|
'rounded-b-lg',
|
|
'ct-chart',
|
|
'mr-4',
|
|
this.currentTotal <= 0 ? 'invisible' : '',
|
|
]
|
|
},
|
|
|
|
formattedChartData() {
|
|
return { labels: this.formattedLabels, series: this.formattedData }
|
|
},
|
|
|
|
formattedItems() {
|
|
return _(this.chartData)
|
|
.map((item, index) => {
|
|
return {
|
|
label: item.label,
|
|
value: item.value,
|
|
color: this.getItemColor(item, index),
|
|
percentage:
|
|
this.currentTotal > 0
|
|
? Nova.formatNumber(
|
|
new String(
|
|
((item.value * 100) / this.currentTotal).toFixed(2)
|
|
)
|
|
)
|
|
: '0',
|
|
}
|
|
})
|
|
.value()
|
|
},
|
|
|
|
formattedLabels() {
|
|
return _(this.chartData)
|
|
.map(item => item.label)
|
|
.value()
|
|
},
|
|
|
|
formattedData() {
|
|
return _(this.chartData)
|
|
.map((item, index) => {
|
|
return {
|
|
value: item.value,
|
|
meta: { color: this.getItemColor(item, index) },
|
|
}
|
|
})
|
|
.value()
|
|
},
|
|
|
|
formattedTotal() {
|
|
let total = this.currentTotal.toFixed(2)
|
|
let roundedTotal = Math.round(total)
|
|
|
|
if (roundedTotal.toFixed(2) == total) {
|
|
return Nova.formatNumber(new String(roundedTotal))
|
|
}
|
|
|
|
return Nova.formatNumber(new String(total))
|
|
},
|
|
|
|
currentTotal() {
|
|
return _.sumBy(this.chartData, 'value')
|
|
},
|
|
},
|
|
}
|
|
</script>
|