feat: add frontend

frontend/components/PolarAreaChart.vue

@@ -0,0 +1,136 @@
+<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>