ModificationChart.vue 1.06 KB
Newer Older
Lucas Détré's avatar
Lucas Détré committed
1
<script>
2 3 4
  import { Pie } from "vue-chartjs";
  import 'chartjs-plugin-colorschemes';
  import 'chartjs-plugin-datalabels';
Lucas Détré's avatar
Lucas Détré committed
5

6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
  export default {
    extends: Pie,
    props: ["values", 'labels'],
    watch: {
      values: {
        handler(){
          this.render();
        },
      }
    },
    methods: {
      render() {
        this.renderChart({
          labels: this.labels,
          datasets: this.values
        },{
          responsive: true,
Lucas Détré's avatar
Lucas Détré committed
23
          maintainAspectRatio:false,
24 25 26 27 28 29 30 31
          onClick:this.handle,
          plugins: {
            colorschemes: {
              scheme: 'tableau.Tableau10'
            },
            datalabels: {
              color: 'black'
            }
Lucas Détré's avatar
Lucas Détré committed
32
          },
33 34
          title: {
            text: "Répartition des modifications par fichiers"
Lucas Détré's avatar
Lucas Détré committed
35 36 37
          },
          legend: {
            position: 'right',
Lucas Détré's avatar
Lucas Détré committed
38
          }
39 40 41 42 43 44 45 46
        })
      },
      handle (point, event) {
        const item = event[0]
        this.$emit('on-receive', {
          value: this.labels[item._index].split('.')[0]
        })
      }
Lucas Détré's avatar
Lucas Détré committed
47
    },
48 49
  }
</script>