@if (isChartDataAvailable) {
    <ng-container
        *ngTemplateOutlet="
            legend;
            context: {
                config: legendData,
            }
        "
    ></ng-container>
    <div
        [ngStyle]="{
            height: _chartConfig?.height + 'px',
            width: _chartConfig?.width + '%',
        }"
    >
        <canvas #chartCanvas></canvas>
    </div>
} @else {
    <div
        class="d-flex justify-content-center align-items-center"
        [ngStyle]="{
            height: _chartConfig?.height + 'px',
            width: _chartConfig?.width + '%',
        }"
    >
        <svg-icon
            [src]="_chartConfig.noDataImage"
            alt="No data available"
            class="no-data-svg"
        ></svg-icon>
    </div>
}
<ng-template #legend let-config="config">
    @if (config?.data) {
        <div
            [ngClass]="config.hasHighlightedBackground && 'colored-background'"
        >
            @if (config.title) {
                <div class="legend-title font-size-14 ca-font-extra-bold">
                    {{ config.title }}
                </div>
            }
            <div class="legend-wrapper d-flex">
                @for (
                    item of config.data;
                    let index = $index;
                    track $index
                ) {
                    <div class="w-100">
                        <div
                            class="d-flex align-content-center text-size-11 ca-font-bold"
                        >
                            <span>{{ item?.name }}</span>
                            <span
                                [ngClass]="
                                    item?.isLineIndicator
                                        ? 'line-indicator'
                                        : 'circle-indicator'
                                "
                                [ngStyle]="{ background: item?.color }"
                            ></span>
                        </div>
                        <div class="text-size-18">
                            {{
                                (item?.value !== 0
                                    ? (item?.value | thousandSeparator)
                                    : 0
                                ) | unitPosition: item?.unit
                            }}
                        </div>
                    </div>
                }
            </div>
        </div>
    }
</ng-template>