142 lines
2.5 KiB
Vue
142 lines
2.5 KiB
Vue
<template>
|
|
<div v-if="values" :style="cssProps" class="trendChart">
|
|
<div class="data">
|
|
<div class="data-info">
|
|
<header>
|
|
<strong class="title">{{ name }}</strong>
|
|
</header>
|
|
<div class="period">
|
|
<span class="period-text">{{ info.month }}</span>
|
|
</div>
|
|
<strong class="value">{{ info.value }}</strong>
|
|
</div>
|
|
<div class="chart">
|
|
<ClientOnly>
|
|
<TrendChart
|
|
:datasets="[dataset]"
|
|
padding="5 0 0 5"
|
|
:min="0"
|
|
:interactive="true"
|
|
@mouse-move="onMouseMove"
|
|
/>
|
|
</ClientOnly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
name: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
values: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: 'inherit',
|
|
required: false,
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
currentInfo: null,
|
|
months: [
|
|
'Enero',
|
|
'Febrero',
|
|
'Marzo',
|
|
'Abril',
|
|
'Mayo',
|
|
'Junio',
|
|
'Julio',
|
|
'Agosto',
|
|
'Septiembre',
|
|
'Octubre',
|
|
'Noviembre',
|
|
'Diciembre',
|
|
],
|
|
}
|
|
},
|
|
computed: {
|
|
dataset() {
|
|
return {
|
|
data: this.values,
|
|
showPoints: true,
|
|
fill: true,
|
|
smooth: true,
|
|
}
|
|
},
|
|
cssProps() {
|
|
return {
|
|
'--color': this.color,
|
|
}
|
|
},
|
|
info() {
|
|
return {
|
|
month: this.currentInfo ? this.currentInfo.month : 'Este mes',
|
|
value: this.currentInfo
|
|
? this.currentInfo.value
|
|
: this.values[11].value,
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
onMouseMove(params) {
|
|
if (params) {
|
|
this.currentInfo = {
|
|
month: this.months[params.data[0].month - 1],
|
|
value: params.data[0].value,
|
|
}
|
|
} else {
|
|
this.currentInfo = null
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.trendChart {
|
|
border-bottom: 2px solid rgba(var(--color), 0.2);
|
|
.title {
|
|
color: var(--color);
|
|
}
|
|
.data {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
.value {
|
|
font-size: 30px;
|
|
}
|
|
.chart {
|
|
width: 40%;
|
|
}
|
|
}
|
|
.stroke {
|
|
stroke-width: 2;
|
|
stroke: var(--color);
|
|
}
|
|
.fill {
|
|
opacity: 0.2;
|
|
fill: var(--color);
|
|
}
|
|
.active-line {
|
|
stroke: rgba(0, 0, 0, 0.2);
|
|
}
|
|
.point {
|
|
display: none;
|
|
fill: var(--color);
|
|
stroke: var(--color);
|
|
}
|
|
.point.is-active {
|
|
display: block;
|
|
}
|
|
}
|
|
</style>
|