<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
    data: {
        labels: string[]
        values: number[]
    }
}>()

// ApexCharts ожидает: series: number[]
const series = computed(() => props.data.values)

// options — объект, labels обязательно тут
const options = computed(() => ({
    chart: {
        type: 'polarArea',
    },
    labels: props.data.labels,
    stroke: {
        colors: ['#fff'],
    },
    fill: {
        opacity: 0.85,
    },
    legend: {
        position: 'bottom',
    },
    responsive: [
        {
            breakpoint: 480,
            options: {
                chart: { width: 300 },
                legend: { position: 'bottom' },
            },
        },
    ],
}))
</script>

<template>
    <apexchart
        type="polarArea"
        :options="options"
        :series="series"
        height="400"
        class="max-w-[420px] mx-auto"
    />
</template>
