<div [class]="'container flex ' + direction">
    <svg [attr.height]="size" [attr.width]="size" [style.min-width]="size" attr.viewBox="0 0 {{ size }} {{ size }}" class="donut-chart">
        <g *ngFor="let value of config; let i = index">
            <circle
                *ngIf="!!chartData[i]"
                [attr.cx]="cx"
                [attr.cy]="cy"
                [attr.r]="radius"
                [attr.stroke-dasharray]="circumference"
                [attr.stroke-dashoffset]="calculateStrokeDashOffset(value.value)"
                [attr.stroke-width]="strokeWidth"
                [attr.stroke]="value.color.includes('#') ? value.color : ''"
                [attr.transform]="returnCircleTransformValue(i)"
                [class]="value.color"
                fill="transparent"
            />
        </g>
    </svg>

    <div [style]="'height: ' + size + 'px; width: ' + size + 'px; padding: ' + (strokeWidth + 5) + 'px;'" class="text-container">
        <div class="heading-xl">{{ getFormattedValue(displayedDataTotal) }}</div>
        <div *ngIf="subtitles.length === 1" class="mt-5">{{ subtitles[0] }}</div>

        <div *ngIf="subtitleTemplate as t" class="mt-5">
            <ng-container *ngTemplateOutlet="t"></ng-container>
        </div>

        <mat-select
            (selectionChange)="subtitleChanged.emit(subtitles.indexOf($event.value))"
            *ngIf="subtitles.length > 1"
            [value]="subtitles[0]"
            class="mt-5 ml-10"
        >
            <mat-option *ngFor="let subtitle of subtitles" [value]="subtitle"> {{ subtitle }} </mat-option>
        </mat-select>
    </div>

    <div [attr.help-mode-key]="helpModeKey" class="breakdown-container">
        <div
            (click)="val.key && selectValue(val.key)"
            *ngFor="let val of config"
            [class.active]="filterChecked$(val.key) | async"
            [class.filter-disabled]="!val.key || !(filters$ | async).length"
            [id]="val.id"
        >
            <iqser-status-bar
                [configs]="[
                    {
                        length: val.value,
                        color: val.color,
                        label: getLabel(val),
                        cssClass: val.color === 'PROCESSING' || val.color === 'OCR_PROCESSING' ? 'loading' : ''
                    }
                ]"
                [small]="true"
            ></iqser-status-bar>
        </div>
    </div>
</div>
