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