<script>
import { HorizontalBar } from "vue-chartjs";
export default {
name: "Chart",
extends: HorizontalBar,
props: {
data: {
type: Array,
required: true,
default: null
},
labels: {
type: Array,
required: true,
default: null
},
tooltip: {
type: Array,
required: false
},
colors: {
type: Array,
required: false
},
withTooltips: {
type: Boolean,
required: false,
default: true
},
autoTicks: {
required: false,
type: Number,
default: 100
}
},
data() {
return {
gradient: null,
defaultColors: ["#ED1E79", "#662D8C"],
chartdata: {
labels: this.labels,
datasets: [
{
data: this.data,
// borderColor: '#0070ba',
backgroundColor: null,
pointBackgroundColor: "white",
borderWidth: 1,
pointBorderColor: "white"
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
offset: true,
layout: {
padding: {
// left: 10,
// top: 25,
// bottom: 50
}
},
legend: {
display: false
},
scales: {
xAxes: [
{
// categorySpacing: 1,
gridLines: {
drawBorder: false,
display: true
},
ticks: {
display: true,
beginAtZero: true,
}
}
],
yAxes: [
{
barLength: 1,
barPercentage: 0.5,
// categoryPercentage: 0.3,
gridLines: {
drawBorder: false,
display: false
},
ticks: {}
}
]
},
tooltips: {
enabled: this.withTooltips,
custom: function (tooltip) {
if (!tooltip) return;
// disable displaying the color box;
tooltip.displayColors = false;
},
callbacks: {
title: function (tooltipItem, data) {
return;
},
label: (item, d) => {
if (this.withTooltips) {
let tooltipStack = [];
if (this.data[item.index]?.tooltip?.score) {
tooltipStack.push(`Score: ${item.value}%`);
}
if (this.tooltip) {
if (this.tooltip[item.index]?.score) {
tooltipStack.push(`Score: ${this.tooltip[item.index]?.score}%`);
}
}
if (this.data[item.index]?.tooltip?.count) {
tooltipStack.push(`Eval.No.: ${this.data[item.index]?.tooltip?.count}`);
}
if (this.data[item.index]?.tooltip?.rank) {
tooltipStack.push(`Rank: ${this.data[item.index]?.tooltip?.rank}`);
}
if (this.data[item.index]?.tooltip?.type) {
tooltipStack.push(`Type: ${this.data[item.index].tooltip.type}`);
}
if (tooltipStack.length) {
return tooltipStack;
}
}
}
}
}
}
};
},
computed: {
getColors() {
return this.colors ? this.colors : this.defaultColors;
}
},
methods: {
setGradient() {
this.gradient = this.$refs.canvas
.getContext("2d")
.createLinearGradient(0, 0, 300, 0);
this.gradient.addColorStop(0, this.getColors[0]);
this.gradient.addColorStop(1, this.getColors[1]);
this.$set(this.chartdata.datasets[0], "backgroundColor", this.gradient);
}
},
created() {
if (!this.autoTicks) {
this.options.scales.xAxes[0].ticks.max = 100;
this.options.scales.xAxes[0].ticks.callback = (value, index, values) => {
return value + "%";
};
} else {
this.options.scales.xAxes[0].ticks.max = this.autoTicks;
this.options.scales.xAxes[0].ticks.precision = 0
}
},
mounted() {
this.setGradient();
this.renderChart(this.chartdata, this.options);
}
};
</script>