script import HorizontalBar from vue-chartjs export default name Chart

<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>