ca-components 2.1.13 → 2.1.15

package/lib/components/ca-chart/ca-chart.component.ts

@@ -0,0 +1,912 @@
+import {
+    AfterViewInit,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    Input,
+    Output,
+    Optional,
+    ViewChild,
+    EventEmitter,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AnyObject } from 'chart.js/dist/types/basic';
+import { AngularSvgIconModule } from 'angular-svg-icon';
+import { Subject, takeUntil } from 'rxjs';
+
+// Charts
+import {
+    CategoryScale,
+    Chart,
+    ChartEvent,
+    LinearScale,
+    Plugin,
+} from 'chart.js/auto';
+import annotationPlugin from 'chartjs-plugin-annotation';
+import { ActiveDataPoint, ChartType } from 'chart.js';
+
+// Enums
+import {
+    ChartColorsStringEnum,
+    EChartEventProperties,
+    ChartPluginIdsStringEnum,
+    eChartTypesString,
+    CubicInterpolationStringEnum,
+    ChartEventTypesStringEnum,
+    ChartFontPropertiesStringEnum,
+    EChartAnnotation,
+} from './enums';
+
+// Helpers
+import { ChartHelper } from './utils/helpers';
+
+// Guards
+import { ChartTypeGuard } from './utils/guards';
+
+//Models
+import {
+    IChartData,
+    ILineDataset,
+    IChartConfiguration,
+    IBaseDataset,
+    IChartAnnotation,
+    IChartDatasetHover,
+    IChartCenterLabel,
+    IChartLegendConfig,
+} from './models';
+import { ActiveElement } from 'chart.js/dist/plugins/plugin.tooltip';
+
+//Services
+import { ChartManagerService } from '../ca-chart-manager/services';
+
+// Constants
+import { ChartConstants } from './utils/constants';
+import {
+    _DeepPartialArray,
+    _DeepPartialObject,
+} from 'chart.js/dist/types/utils';
+
+// Pipes
+import { ThousandSeparatorPipe, UnitPositionPipe } from '../../pipes';
+
+@Component({
+    selector: 'app-ca-chart',
+    templateUrl: './ca-chart.component.html',
+    styleUrls: ['./ca-chart.component.scss'],
+    imports: [
+        CommonModule,
+        AngularSvgIconModule,
+        UnitPositionPipe,
+        ThousandSeparatorPipe,
+    ],
+})
+export class CaChartComponent implements AfterViewInit {
+    @ViewChild('chartCanvas', { static: false }) chartCanvas!: ElementRef;
+
+    @Input() legendData!: IChartLegendConfig;
+    @Input() chartId!: string;
+    @Input()
+    set chartDatasetHover(value: IChartDatasetHover | null) {
+        if (value) this.updateDatasetBackgroundOnHover(value);
+    }
+    @Input() set chartConfig(value: IChartConfiguration) {
+        this._chartConfig = { ...value };
+
+        this.isChartDataAvailable =
+            (!!this._chartConfig?.chartData?.datasets?.length &&
+                this._chartConfig?.chartData?.datasets?.some(
+                    (item: IBaseDataset) =>
+                        item.data.some((value: number | number[]) =>
+                            Array.isArray(value)
+                                ? value[0] !== null || value[1] !== null
+                                : value !== null
+                        )
+                )) ??
+            false;
+        this.changeDetector.detectChanges();
+
+        if (this.isChartDataAvailable) this.updateChart();
+    }
+    @Input() set selectedIndex(value: number) {
+        if (!this.chart || !this.isChartDataAvailable) return;
+
+        if (value !== null) this.focusDoughnutArc(value);
+        else this.setOriginalDoughnutArcsColor();
+
+        this.chart.update();
+    }
+
+    @Output() hoveredIndex: EventEmitter<number | null> = new EventEmitter();
+
+    private destroy$ = new Subject<void>();
+
+    private chart!: Chart;
+    private chartContext!: CanvasRenderingContext2D;
+    private plugins?: Plugin<ChartType, AnyObject>[];
+    private areAnimationsCompleated: boolean = false;
+    private _hoveredIndex: number | null = null;
+    private lastHoveredIndex: number = -1;
+
+    public _chartConfig!: IChartConfiguration;
+    public isChartDataAvailable: boolean = false;
+
+    constructor(
+        private changeDetector: ChangeDetectorRef,
+        @Optional() private chartManagerService?: ChartManagerService
+    ) {}
+
+    ngAfterViewInit(): void {
+        if (this.isChartDataAvailable) {
+            this.initializeAnnotationPlugin();
+            this.createChart();
+        }
+    }
+
+    ngOnInit(): void {
+        this.initializeChartManagerService();
+    }
+
+    private initializeChartManagerService(): void {
+        if (!this.chartManagerService) return;
+
+        this.chartManagerService.hoverState$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(({ index, chartId }) => {
+                if (chartId !== this.chartId) {
+                    this._hoveredIndex = index;
+                    if (this.chart) this.chart.draw();
+                }
+            });
+    }
+
+    private initializeAnnotationPlugin(): void {
+        Chart.register(annotationPlugin);
+    }
+
+    public updateDatasetBackgroundOnHover(
+        chartDatasetHover: IChartDatasetHover
+    ): void {
+        if (!this.chart || !this.chart.data.datasets) return;
+
+        if (chartDatasetHover.isHoverd) {
+            const gradient = ChartHelper.createGradient(
+                this.chartContext,
+                this.chartCanvas,
+                chartDatasetHover.color,
+                chartDatasetHover.color,
+                0.6,
+                0.1,
+                true
+            );
+            this.chart.data.datasets = this.chart?.data?.datasets?.map(
+                (dataset) => {
+                    if (dataset.hidden) return dataset;
+
+                    if (
+                        dataset?.label?.toUpperCase() ===
+                        chartDatasetHover?.label?.toUpperCase()
+                    ) {
+                        const hoverdDataSet = {
+                            ...dataset,
+                            fill: true,
+                            backgroundColor: gradient,
+                            borderColor: chartDatasetHover.color,
+                            order: 1,
+                        };
+                        return hoverdDataSet;
+                    } else {
+                        const borderColorWithOpacity =
+                            ChartHelper.changeOpacityOfRgbOrRgba(
+                                dataset.borderColor as string,
+                                0.2
+                            );
+                        return {
+                            ...dataset,
+                            fill: false,
+                            borderColor: borderColorWithOpacity,
+                        };
+                    }
+                }
+            );
+        } else
+            this.chart.data.datasets = this.chart.data.datasets.map(
+                (dataset) => {
+                    if (!dataset.hidden) {
+                        const originalColor = dataset.borderColor
+                            ? ChartHelper.changeOpacityOfRgbOrRgba(
+                                  dataset.borderColor as string,
+                                  1
+                              )
+                            : ChartConstants.STRING_EMPTY;
+
+                        return {
+                            ...dataset,
+                            fill: false,
+                            borderColor: originalColor,
+                            backgroundColor: ChartConstants.STRING_EMPTY,
+                        };
+                    } else return dataset;
+                }
+            );
+        this.chart.update();
+    }
+
+    private createChart(): void {
+        this.chartContext = this.chartCanvas?.nativeElement?.getContext('2d');
+
+        this.setChartOptionsProperties();
+        this.setChartDataProperties();
+        this.setChartPluginsProperties();
+
+        if (this.chart) this.chart.destroy();
+
+        this.initializeAnnotationPlugin();
+        if (this._chartConfig.chartType === eChartTypesString.DOUGHNUT)
+            Chart.overrides.doughnut.cutout = '88%';
+
+        this.chart = new Chart(this.chartContext, {
+            type: this._chartConfig?.chartType,
+            data: this._chartConfig?.chartData,
+            options: this._chartConfig?.chartOptions,
+            plugins: this.plugins,
+        });
+
+        if (!this._chartConfig.isDashboardChart)
+            this.chart.config.data.datasets = [
+                ...this._chartConfig?.chartData?.datasets?.map(
+                    (item: IBaseDataset, indx: number) => {
+                        const pointConfig = {
+                            pointBackgroundColor: ChartColorsStringEnum.WHITE,
+                            pointBorderWidth: 2,
+                            pointRadius: 3,
+                        };
+
+                        this.updateChartAnnotations(item, indx);
+
+                        const yScale = this.chart.scales[
+                            EChartEventProperties.Y_AXIS_0
+                        ] as CategoryScale | LinearScale;
+
+                        const backgroundColor =
+                            item?.color && item?.color2
+                                ? ChartHelper.createGradient(
+                                      this.chartContext,
+                                      this.chartCanvas,
+                                      item?.color,
+                                      item?.color2
+                                  )
+                                : item?.color;
+
+                        const datasetConfig = {
+                            ...item,
+                            pointBorderColor: item.color,
+                            ...pointConfig,
+                            backgroundColor,
+                            fill: item?.fill,
+                        };
+
+                        if (
+                            this._chartConfig.chartType ===
+                            eChartTypesString.DOUGHNUT
+                        )
+                            return {
+                                ...datasetConfig,
+                                backgroundColor: item.backgroundColor,
+                            };
+
+                        if (!item.shiftValue)
+                            return {
+                                ...datasetConfig,
+                                backgroundColor:
+                                    item?.color &&
+                                    item?.color2 &&
+                                    item?.color !== item?.color2
+                                        ? ChartHelper.createGradient(
+                                              this.chartContext,
+                                              this.chartCanvas,
+                                              item?.color,
+                                              item?.color2
+                                          )
+                                        : item?.color,
+                            };
+
+                        const shiftValuePx: number = yScale.getPixelForValue(
+                            item.shiftValue || 0
+                        );
+                        const shiftValueAdjusted: number =
+                            shiftValuePx / yScale.maxHeight;
+
+                        const color1: string =
+                            item.color || ChartConstants.STRING_EMPTY;
+                        const color2: string =
+                            item.color2 || ChartConstants.STRING_EMPTY;
+
+                        const borderColor: CanvasGradient =
+                            ChartHelper.createGradientWithShiftValue(
+                                this.chartContext,
+                                yScale.maxHeight,
+                                color1,
+                                color2,
+                                shiftValueAdjusted
+                            );
+
+                        return {
+                            ...item,
+                            ...pointConfig,
+                            pointBorderColor: borderColor,
+                            backgroundColor:
+                                ChartHelper.createGradientWithShiftValue(
+                                    this.chartContext,
+                                    yScale.maxHeight,
+                                    color1,
+                                    color2,
+                                    shiftValueAdjusted,
+                                    true
+                                ),
+                            borderColor,
+                            fill: true,
+                        };
+                    }
+                ),
+            ];
+
+        this.chart.update();
+    }
+
+    private updateChart(): void {
+        if (this.chart) this.chart.update();
+        this.createChart();
+    }
+
+    private setChartOptionsProperties(): void {
+        const labels = this._chartConfig.chartData.labels;
+
+        this._chartConfig.chartOptions = {
+            responsive: true,
+            maintainAspectRatio: false,
+            clip: false,
+            animation: {
+                duration: 5,
+                onComplete: () => {
+                    this.areAnimationsCompleated = true;
+                    this.chart.draw();
+                },
+                onProgress: () => {
+                    this.areAnimationsCompleated = false;
+                    this.chart.draw();
+                },
+            },
+            layout: {
+                padding: {
+                    top:
+                        this._chartConfig.chartType ===
+                        eChartTypesString.DOUGHNUT
+                            ? 8
+                            : 0,
+                    bottom:
+                        this._chartConfig.chartType ===
+                        eChartTypesString.DOUGHNUT
+                            ? 8
+                            : 0,
+                    left:
+                        this._chartConfig.chartType === eChartTypesString.BAR &&
+                        this._chartConfig.verticalyAlignBarChartWithLineCart
+                            ? 6
+                            : 0,
+                    right:
+                        this._chartConfig.chartType === eChartTypesString.BAR &&
+                        this._chartConfig.verticalyAlignBarChartWithLineCart
+                            ? 6
+                            : 0,
+                },
+            },
+            plugins: {
+                legend: {
+                    display: false,
+                },
+                tooltip: {
+                    enabled: false,
+                },
+            },
+            scales: {
+                x: {
+                    title: {
+                        display: true,
+                    },
+                    position: 'bottom',
+                    grid: {
+                        display: false,
+                    },
+                    ticks: {
+                        display: true,
+                        padding: 0,
+                        color: ChartColorsStringEnum.X_AXIS_LABEL_COLOR,
+                        font: {
+                            size: 11,
+                            family: ChartFontPropertiesStringEnum.FONT_FAMILY_MONTSERRAT,
+                            weight: ChartFontPropertiesStringEnum.FONT_WEIGHT_BOLDER,
+                        },
+                        autoSkip: true,
+                        autoSkipPadding: 12,
+                        maxRotation: 0,
+                        minRotation: 0,
+                        //Label written in 2 lines, will be adjusted with new design
+                        callback: function (
+                            value: string | number,
+                            index: number
+                        ): string | string[] {
+                            const label = labels[index];
+                            const multiLineLabel = label
+                                ? label.split(' ')
+                                : [];
+                            return multiLineLabel;
+                        },
+                    },
+                    display: this._chartConfig.showXAxisLabels,
+                    beginAtZero: true,
+                    offset: true,
+                },
+                y: {
+                    display: false,
+                    beginAtZero: true,
+                    min: 0,
+                    max: ChartHelper.calculateDatasetMaxValue(
+                        this._chartConfig.chartData.datasets as any //leave this as any
+                    ),
+                    offset: false,
+                },
+            },
+            onHover: (event: ChartEvent, item: ActiveElement[]) => {
+                if (this._chartConfig.hasVerticalDashedAnnotation) {
+                    this.removeVerticalDashedLine();
+                    this.setVerticalDashedAnnotationLine(event);
+                }
+
+                this.setOriginalDoughnutArcsColor();
+
+                if (
+                    this._chartConfig.chartType === eChartTypesString.DOUGHNUT
+                ) {
+                    const index = item[0]?.index;
+                    index >= 0
+                        ? this.focusDoughnutArc(index)
+                        : this.setOriginalDoughnutArcsColor();
+                    this.hoveredIndex.emit(index ?? null);
+                }
+                this.chart.update();
+            },
+        };
+    }
+
+    private focusDoughnutArc(index: number | null): void {
+        if (
+            this._chartConfig.chartType !== eChartTypesString.DOUGHNUT ||
+            index === this.chart.data.datasets[0].data.length - 1
+        )
+            return;
+        const colors: string[] = this.chart?.data?.datasets[0]
+            ?.backgroundColor as string[];
+        const updatedColors: string[] = colors.map(
+            (color: string, indx: number) => {
+                if (indx === index) return color;
+                const convertedValue = ChartHelper.convertRgbToRgba(color, 0.2);
+                return convertedValue;
+            }
+        );
+
+        this.chart.data.datasets[0].backgroundColor = updatedColors;
+    }
+
+    private setOriginalDoughnutArcsColor(): void {
+        if (this._chartConfig.chartType !== eChartTypesString.DOUGHNUT) return;
+
+        const colors: string[] = this.chart.data.datasets[0]
+            .backgroundColor as string[];
+
+        this.chart.data.datasets[0].backgroundColor = [
+            ...colors.map((color: string) => {
+                return ChartHelper.rgbToRgba(color, 1);
+            }),
+        ];
+
+        this.chart.update();
+    }
+    private setChartDataProperties(): void {
+        if (this._chartConfig.chartType === eChartTypesString.LINE) {
+            this._chartConfig.chartData.datasets.forEach((dataset) => {
+                dataset.order = dataset.order;
+                if (ChartTypeGuard.isLineDataset(dataset)) {
+                    dataset.tension = dataset.tension ?? 0.5;
+                    dataset.cubicInterpolationMode =
+                        dataset.cubicInterpolationMode ??
+                        CubicInterpolationStringEnum.MONOTONE;
+                    dataset.pointBorderColor =
+                        dataset.pointBorderColor ??
+                        ChartColorsStringEnum.TRANSPARENT;
+                    dataset.pointBackgroundColor =
+                        dataset.pointBackgroundColor ??
+                        ChartColorsStringEnum.TRANSPARENT;
+                    dataset.pointHoverBackgroundColor =
+                        ChartColorsStringEnum.WHITE;
+                    dataset.pointHoverBorderColor = dataset.borderColor;
+                    dataset.pointBorderWidth = dataset.pointBorderWidth ?? 3;
+                    dataset.pointHoverRadius = 4;
+                    //dataset.pointHoverRadius = 8;
+                    dataset.pointHoverBorderWidth = 3;
+
+                    dataset.spanGaps = dataset.spanGaps ?? false;
+                    dataset.showLine = dataset.showLine ?? true;
+                }
+            });
+            this.setMultipleYAxis(this._chartConfig.chartData);
+        }
+    }
+
+    private setChartPluginsProperties(): void {
+        this.plugins = [
+            {
+                id: ChartPluginIdsStringEnum.HIGHLIGHT_SEGMENT_ON_HOVER,
+                afterEvent: (chart, event) => {
+                    const nativeEvent = event.event.native as MouseEvent;
+
+                    if (
+                        event.event.type === ChartEventTypesStringEnum.MOUSE_OUT
+                    ) {
+                        const boundingRect =
+                            this.chart.canvas.getBoundingClientRect();
+                        const isMouseOutsideChart =
+                            nativeEvent.clientX < boundingRect.left ||
+                            nativeEvent.clientX > boundingRect.right ||
+                            nativeEvent.clientY < boundingRect.top ||
+                            nativeEvent.clientY > boundingRect.bottom;
+
+                        if (isMouseOutsideChart) {
+                            this._hoveredIndex = null;
+                            this.chartManagerService?.setHoverState(
+                                null,
+                                this.chartId
+                            );
+                            this.removeVerticalDashedLineAndFocus();
+                            this.chart.draw();
+                        }
+                        return;
+                    }
+
+                    if (!this._chartConfig.showTooltipBackground) return;
+
+                    const boundingRect =
+                        this.chart.canvas.getBoundingClientRect();
+                    const mouseHorizontalCoordinate =
+                        nativeEvent.clientX - boundingRect.left;
+
+                    const { left, right } = this.chart.chartArea;
+
+                    if (
+                        mouseHorizontalCoordinate < left ||
+                        mouseHorizontalCoordinate > right
+                    ) {
+                        this._hoveredIndex = null;
+                        this.chartManagerService?.setHoverState(
+                            null,
+                            this.chartId
+                        );
+                        this.chart.draw();
+                        return;
+                    }
+
+                    const xScale = this.chart.scales[
+                        EChartEventProperties.X
+                    ] as CategoryScale | LinearScale;
+
+                    const tickPositions = xScale.ticks.map((tick) =>
+                        xScale.getPixelForValue(tick.value)
+                    );
+
+                    const segmentBoundaries = tickPositions.map(
+                        (tickPos, index) => {
+                            const leftBoundary =
+                                index === 0
+                                    ? left
+                                    : (tickPos + tickPositions[index - 1]) / 2;
+                            const rightBoundary =
+                                index === tickPositions.length - 1
+                                    ? right
+                                    : (tickPos + tickPositions[index + 1]) / 2;
+
+                            return { leftBoundary, rightBoundary };
+                        }
+                    );
+
+                    const newHoveredIndex = segmentBoundaries.findIndex(
+                        (boundary) =>
+                            mouseHorizontalCoordinate >=
+                                boundary.leftBoundary &&
+                            mouseHorizontalCoordinate < boundary.rightBoundary
+                    );
+
+                    if (newHoveredIndex !== this._hoveredIndex) {
+                        this._hoveredIndex =
+                            newHoveredIndex === -1 ? null : newHoveredIndex;
+                        this.chartManagerService?.setHoverState(
+                            this._hoveredIndex,
+                            this.chartId,
+                            segmentBoundaries[this._hoveredIndex as number]
+                        );
+                        this.chart.draw();
+                    }
+                },
+
+                beforeDraw: () => {
+                    if (this._hoveredIndex !== null) {
+                        const {
+                            chartArea,
+                            scales: { x: xScale },
+                        } = this.chart;
+
+                        ChartHelper.highlightSegment(
+                            this.chartContext,
+                            xScale as CategoryScale | LinearScale,
+                            chartArea,
+                            this._chartConfig.height,
+                            this._hoveredIndex
+                        );
+
+                        const activeData =
+                            this._chartConfig?.chartData?.datasets?.map(
+                                (data, index) => {
+                                    return {
+                                        datasetIndex: index,
+                                        index: this._hoveredIndex,
+                                    };
+                                }
+                            );
+
+                        if (activeData.length) {
+                            this.chart.setActiveElements(
+                                activeData as ActiveDataPoint[]
+                            );
+                        }
+                    }
+                },
+            },
+            {
+                id: ChartPluginIdsStringEnum.BORDER_BOTTOM_LINE_CHART,
+                beforeDraw: () => {
+                    if (this._chartConfig?.showBottomLineOnLineChart) {
+                        const {
+                            ctx,
+                            data,
+                            chartArea,
+                            scales: { x: xScale },
+                        } = this.chart;
+                        const dataset = data.datasets[0];
+
+                        const firstIndex = 0;
+                        const lastIndex = dataset.data.length - 1;
+
+                        const firstValue = dataset.data[firstIndex];
+                        const lastValue = dataset.data[lastIndex];
+
+                        if (
+                            firstValue !== undefined &&
+                            lastValue !== undefined
+                        ) {
+                            const xStart = xScale.getPixelForValue(firstIndex);
+
+                            const xEnd = xScale.getPixelForValue(lastIndex);
+                            const yBottom = chartArea.bottom;
+
+                            ctx.save();
+                            ctx.strokeStyle =
+                                ChartColorsStringEnum.BORDER_BOTTOM_LINE_CHART_COLOR;
+                            ctx.lineWidth = 1;
+                            ctx.beginPath();
+                            ctx.moveTo(xStart, yBottom);
+                            ctx.lineTo(xEnd, yBottom);
+                            ctx.stroke();
+                            ctx.restore();
+                        }
+                    }
+                },
+            },
+        ];
+
+        if (this._chartConfig.chartType === eChartTypesString.DOUGHNUT)
+            this.plugins = [
+                ...this.plugins,
+                {
+                    id: 'doughnut-label',
+                    beforeDatasetDraw: (chart: Chart) => {
+                        this._chartConfig.centerLabels?.map(
+                            (label: IChartCenterLabel, indx: number) => {
+                                ChartHelper.drawDoughnutLegend(
+                                    chart,
+                                    {
+                                        indx,
+                                        offsetTop: label.position?.top || 0,
+                                    },
+                                    label.value,
+                                    label.fontSize,
+                                    label.color
+                                );
+                            }
+                        );
+                    },
+                },
+            ];
+    }
+
+    private updateChartAnnotations(item: IBaseDataset, indx: number): void {
+        if (!this._chartConfig.annotations?.length) return;
+
+        this._chartConfig.annotations?.forEach(
+            (annotation: IChartAnnotation, key: number) => {
+                this._chartConfig.chartOptions.plugins = {
+                    ...this._chartConfig.chartOptions.plugins,
+                    annotation: {
+                        ...this._chartConfig.chartOptions?.plugins?.annotation,
+                        annotations: {
+                            ...this._chartConfig.chartOptions?.plugins
+                                ?.annotation?.annotations,
+                            [`${item.label}-${indx}-${key}`]: {
+                                id:
+                                    annotation.id ||
+                                    `annotation-${indx}-${key}`,
+                                type: annotation.type,
+                                scaleID: annotation.axis || item.yAxisID,
+                                value: annotation.value || item.shiftValue,
+                                borderColor:
+                                    annotation.color ||
+                                    ChartColorsStringEnum.BORDER_BOTTOM_LINE_CHART_COLOR,
+                                borderWidth: annotation.borderWidth || 2,
+                                borderDash: annotation.borderDash || [0, 0],
+                            },
+                        },
+                    },
+                };
+            }
+        );
+        this.chart.update();
+    }
+
+    private setMultipleYAxis(chartData: IChartData<ILineDataset>): void {
+        chartData.datasets.forEach((dataset, index) => {
+            if (
+                dataset.type === eChartTypesString.LINE ||
+                dataset.type === eChartTypesString.BAR
+            ) {
+                const yAxisID = this._chartConfig.isMultiYAxis
+                    ? `y-axis-${index}`
+                    : dataset.yAxisID || 'y-axis-0';
+
+                // Detect if the dataset is all 0
+                const isAllZeroDataset = (dataset.data as number[]).every(
+                    (val: number) => val === 0
+                );
+
+                let minValue = ChartHelper.calculateMinValue(
+                    dataset.data as number[]
+                );
+                let maxValue = ChartHelper.calculateMaxValue(
+                    dataset.data as number[]
+                );
+                const padding = maxValue * 0.03;
+
+                // Adjust scaling for all 0 datasets
+                if (isAllZeroDataset) {
+                    minValue = 0;
+                    maxValue = 1;
+                } else {
+                    minValue =
+                        maxValue === minValue ? minValue - 0.1 : minValue;
+                    maxValue =
+                        maxValue === minValue
+                            ? maxValue + 0.1
+                            : maxValue + padding;
+                }
+
+                this._chartConfig.chartOptions.scales = {
+                    ...this._chartConfig.chartOptions.scales,
+                    [yAxisID]: {
+                        display: false,
+                        beginAtZero: true,
+                        min: minValue,
+                        max: maxValue,
+                        stacked: this._chartConfig.isStacked,
+                    },
+                };
+
+                chartData.datasets[index] = {
+                    ...dataset,
+                    yAxisID,
+                };
+            }
+        });
+    }
+
+    private removeVerticalDashedLine(): void {
+        const annotations =
+            this._chartConfig?.chartOptions?.plugins?.annotation?.annotations;
+
+        const key: string = ChartPluginIdsStringEnum.X_DASHED;
+
+        if (annotations)
+            delete this._chartConfig?.chartOptions?.plugins?.annotation
+                ?.annotations?.[key as keyof typeof annotations];
+
+        this.chart.update();
+    }
+
+    private setVerticalDashedAnnotationLine(
+        event: ChartEvent,
+        color?: string
+    ): void {
+        const { left, right } = this.chart.chartArea;
+
+        const xScale = this.chart.scales[EChartEventProperties.X] as
+            | CategoryScale
+            | LinearScale;
+
+        const tickPositions = this._chartConfig?.chartData?.labels?.map(
+            (label: string, index: number) => {
+                return xScale.getPixelForValue(index);
+            }
+        );
+        const segmentBoundaries = tickPositions.map((tickPos, index) => {
+            const leftBoundary =
+                index === 0 ? left : (tickPos + tickPositions[index - 1]) / 2;
+            const rightBoundary =
+                index === tickPositions.length - 1
+                    ? right
+                    : (tickPos + tickPositions[index + 1]) / 2;
+
+            return { leftBoundary, rightBoundary };
+        });
+
+        const nativeEvent = event.native as MouseEvent;
+
+        const boundingRect = this.chart.canvas.getBoundingClientRect();
+        const mouseHorizontalCoordinate =
+            nativeEvent.clientX - boundingRect.left;
+
+        const newHoveredIndex = segmentBoundaries.findIndex(
+            (boundary) =>
+                mouseHorizontalCoordinate >= boundary.leftBoundary &&
+                mouseHorizontalCoordinate < boundary.rightBoundary
+        );
+
+        if (newHoveredIndex >= 0) {
+            this._chartConfig.chartOptions.plugins = {
+                ...this._chartConfig.chartOptions.plugins,
+                annotation: {
+                    ...this._chartConfig.chartOptions?.plugins?.annotation,
+                    annotations: {
+                        ...this._chartConfig.chartOptions?.plugins?.annotation
+                            ?.annotations,
+                        [ChartPluginIdsStringEnum.X_DASHED]: {
+                            ...EChartAnnotation.X_DASHED,
+                            value: newHoveredIndex,
+                            borderColor:
+                                color ||
+                                ChartColorsStringEnum.BORDER_BOTTOM_LINE_CHART_COLOR,
+                        },
+                    },
+                },
+            };
+        }
+
+        this.hoveredIndex.emit(newHoveredIndex);
+        this.chart.update();
+    }
+
+    public removeVerticalDashedLineAndFocus(): void {
+        this.hoveredIndex.emit(null);
+        if (this._chartConfig.hasVerticalDashedAnnotation)
+            this.removeVerticalDashedLine();
+    }
+
+    ngOnDestroy(): void {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}