boussole-pluss/frontend/components/PolarAreaChart.vue

<script lang="ts" setup>
import {PolarArea} from 'vue-chartjs';
import type {PropType} from "vue";

const props = defineProps({
  data: {
    type: Object as PropType<number[]>
  }
});

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

const chartOptions = ref({
  responsive: true,
  maintainAspectRatio: true,
  scales: {
    r: {
      suggestedMin: 0,
      suggestedMax: 10,
      ticks: {
        display: false
      }
    }
  },
  plugins: {
    legend: {
      display: false
    }
  }
})
</script>
<template>
  <div class="chart-container">
    <polar-area
      :options="chartOptions"
      :data="chartData"
    />
  </div>
</template>
<style lang="scss" scoped>
.chart-container {
  position: relative;
  max-width: 60vh;
}
</style>