81 lines
1.4 KiB
Vue
81 lines
1.4 KiB
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>
|
|
|