boussole-pluss/frontend/components/PolarAreaChart.vue

137 lines
2.4 KiB
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: [
"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: 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>