boussole-pluss/frontend/components/PolarAreaChart.vue

<template>
  <PolarArea
    :chart-options="chartOptions"
    :chart-data="chartData"
    :chart-id="chartId"
    :dataset-id-key="datasetIdKey"
    :plugins="plugins"
    :css-classes="cssClasses"
    :styles="styles"
    :width="width"
    :height="height"
  />
</template>

<script lang="ts">
import {PolarArea} from 'vue-chartjs/legacy'

import {ArcElement, Chart as ChartJS, Legend, RadialLinearScale, Title, Tooltip} from 'chart.js'
import {Component, Prop, Vue, Watch} from "nuxt-property-decorator";

ChartJS.register(Title, Tooltip, Legend, ArcElement, RadialLinearScale);

@Component({
  components: {
    PolarArea
  }
})
export default class PolarAreaChart extends Vue {

  @Prop({
    default: 'polar-chart',
    type: String
  })
  public chartId!: string;

  @Prop({
    default: 'label',
    type: String
  })
  public datasetIdKey!: string;

  @Prop({
    default: 400,
    type: Number
  })
  public width!: number;

  @Prop({
    default: 400,
    type: Number
  })
  public height!: number;

  @Prop({
    default: '',
    type: String
  })
  public cssClasses!: string;

  @Prop({
    type: Object
  })
  public styles!: Object;

  @Prop({
    default: () => [],
    type: Array
  })
  public plugins!: [];

  @Prop({
    default: () => [],
    type: Array<number>
  })
  public data!: number[];

  readonly chartData = {
    labels: [
      "Pouvoir d'agir",
      "Multi-secteur",
      "Local global",
      "Utilité (sociale et écologique)",
      "Communs",
      "Démocratie",
      "Coopération",
      "Finances",
      "Moyens de production",
      "Travail"
    ],
    datasets: [
      {
        backgroundColor: [
          "#CA8AE8",
          "#22B9A6",
          "#E7E145",
          "#F39345",
          "#9FCC8B",
          "#FDA6C5",
          "#7E91F1",
          "#F37665",
          "#E9D280",
          "#7BD1F5"
        ],
        data: this.data,
        borderWidth: 1,
        borderColor: "#666666"
      }
    ]
  };

  readonly chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    // animation: false,
    scales: {
      r: {
        suggestedMin: 0,
        suggestedMax: 10,
        ticks: {
          display: false
        }
      }
    },
    plugins: {
      legend: {
        display: false
      }
    }
  };

  @Watch("data", {})
  private renderChart() {
    this.chartData.datasets[0].data = this.data;
  }
}
</script>