Динамическое разделение пончика на ломтики

Question

Я работаю над приложением Nuxt.js (v.2.15.0). У меня есть компонент, похожий на пончик, с 3 секторами, разделенными на 4 других подсектора (здесь ). Я динамически меняю цвета секторов в зависимости от значений, которые получаю через веб-сокеты. Мой код для компонента:

      <template>
    <div class="lap is-flex is-flex-direction-column">
        <div class="live-label is-flex is-justify-content-center" v-text="title" />
        <div class="lap-content">
            <div class="circle">
                <ul class="circle__wrapper">
                    <li v-for="index in count" :key="index" class="circle__section" />
                </ul>
                <div
                    class="
                        circle__center
                        is-flex is-align-items-center is-justify-content-center
                    "
                >
                    <div class="live-label--large" v-text="speedValue" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { msToLapTime } from '@/utils'

export default {
    props: {
        title: {
            type: String,
            default: 'Lap',
        },
        value: {
            type: Number,
            default: 0,
        },
        currentSector: {
            type: Number,
            default: 0,
        },
        sectors: {
            type: Object,
            default: () => {},
        },
        count: {
            type: Number,
            default: 12,
        },
    },
    computed: {
        speedValue() {
            return this.value > 0
                ? msToLapTime(this.value, this.$dateFns).slice(0, 7)
                : '00:00.0'
        },
    },
    watch: {
        currentSector() {
            this.setSegmentColour()
        },
    },
    mounted() {
        this.setSegmentColour()
    },
    methods: {
        setSegmentColour() {
            const sectionArr = document.querySelectorAll('.circle__section')
            if (this.currentSector === 1) {
                for (let i = 0; i < this.count; i++) {
                    if (i < 4) {
                        sectionArr[i].classList = 'circle__section filled'
                    } else {
                        sectionArr[i].className = 'circle__section'
                    }
                }
            } else if (this.currentSector === 2) {
                for (let i = 0; i < 12; i++) {
                    if (i < 4) {
                        sectionArr[i].classList.add(this.sectors.s1Colour)
                    } else if (i >= 4 && i < 8) {
                        sectionArr[i].classList = 'circle__section filled'
                    } else {
                        sectionArr[i].className = 'circle__section'
                    }
                }
            } else if (this.currentSector === 3) {
                for (let i = 0; i < 12; i++) {
                    if (i < 4) {
                        sectionArr[i].classList.add(this.sectors.s1Colour)
                    } else if (i >= 4 && i < 8) {
                        sectionArr[i].classList.add(this.sectors.s2Colour)
                    } else {
                        sectionArr[i].classList = 'circle__section filled'
                    }
                }
            }
        },
    },
}
</script>

А стиль этого пончика здесь:

      .circle {
    position: relative;

    &__wrapper {
        border-radius: 50%;
        position: relative;
        padding: 0;
        margin: 1em auto;
        list-style: none;
        overflow: hidden;

        &::before {
            content: '';
            position: absolute;
            z-index: 2;
            width: calc(100% + 2px);
            height: calc(100% + 2px);
            top: -1px;
            left: -1px;
            border-radius: 50%;
            mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff 100%);
            transform: rotate(1deg);
        }

        @include grid-elem-size('height', 2.5);
        @include grid-elem-size('width', 2.5);
    }

    &__section {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 50%;
        background-color: #656565;
        transform-origin: 0% 100%;
        @include circle-fraction(12);

        &.filled {
            background-color: #d0cfcf;
            animation-name: color;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
    }

    &__center {
        position: absolute;
        top: calc(50% - #{$grid-size} * 1.1);
        left: calc(50% - #{$grid-size} * 1.1);
        border-radius: 50%;
        background-color: var(--background-color);
        @include grid-elem-size('height', 2.2);
        @include grid-elem-size('width', 2.2);

        &::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            mask-image: radial-gradient(farthest-side, transparent calc(100% - 1px), #fff 100%);
            transform: rotate(1.5deg);
        }
    }
}

Чтобы разделить диаграмму на 12 элементов, я использую миксин (и добавляю ниже миксин, который я использую в приведенном выше коде, на случай, если кто-то захочет его воспроизвести):

      $grid-size: #{'(100vh - 185px) / 8'}

@mixin grid-elem-size($property, $size){
    #{$property}: calc(#{$grid-size} * #{$size})!important;
}

@mixin circle-fraction($size) {
    @for $i from 1 through $size {
        &:nth-child(#{$i}) {
            transform: rotate(calc((#{$i} - 1) * (calc(360deg / #{$size})))) skewY(calc(-360deg / #{$size / 2})) translate(4px,-4px);
        }
    }
}

Для меня это работает достаточно хорошо. А теперь требования изменились.

Мне нужно разделить элемент динамически, потому что теперь мы работаем с большим количеством дорожек и некоторые из них могут иметь более 3 секторов, поэтому я должен получить переменную (которая может быть 3~10) и разделить пончик на это количество секторов и каждый сектор делится на 4 подсектора. Кроме того, в каждом подсекторе необходимо сохранять пространство, как сейчас (возможно, уменьшить пространство). Буду признателен за любую помощь, даже какая-нибудь библиотека будет очень полезна. Заранее спасибо!