igniteui-angular icon indicating copy to clipboard operation
igniteui-angular copied to clipboard

WindowRect property for igx-data-chart not showing proper window when used with igx-time-x-axis

Open Vighneshaa opened this issue 6 months ago • 1 comments

Description

The axis does not show proper date when the combobox is used to alter the windowRect property for igx-data-chart. I am using the igx-time-x-axis for plotting the x-axis. The same codes work fine when the axis is changed to igx-category-x-axis.

  • igniteui-angular version: 16.0.27

Steps to reproduce

HTML:-

<igx-data-chart [crosshairVisibility]="crosshairVisibility" #chart height="100%" width="100%" [legend]="legend" [defaultInteraction]="defaultInteraction" [brushes]="brushColor" [windowRect]="windowRect" [isHorizontalZoomEnabled]="false" [isVerticalZoomEnabled]="false" [dataSource]="chartData">

            <igx-time-x-axis useClusteringMode="true" #xAxis overlap="0" gap="0.1" [dateTimeMemberPath]="DateKey" [label]="xAxisLabel">
            </igx-time-x-axis>

            <igx-line-series [unknownValuePlotting]="unknownValuePlotting" #lineSeries
                *ngFor="let axis of lineSeries" [xAxis]="xAxis" [yAxis]="yAxisMap[axis.template]" hitTestMode="ColorEncoded"
                [tooltipTemplate]="tooltipTemplate" [markerType]="'None'" [valueMemberPath]="axis.title"
                [title]="axis.title">
            </igx-line-series>

            <igx-crosshair-layer brush="gray"></igx-crosshair-layer>

            <igx-final-value-layer></igx-final-value-layer>

TS:-

getWindowRect(startDate: Date): IgRect { if (this.chartData && this.chartData.length === 0) { return { top: 0, left: 0, width: 1, height: 1 } }

    const startDateIndex = this.chartData.findIndex((d: any) => d[this.DateKey] > startDate);
    console.log("startDateIndex:", startDateIndex, this.chartData);
    this.setYAxisMaxMinValue(startDateIndex);

    if (this.selectedRange === 'ALL') {
        return { top: 0, left: 0, width: 1, height: 1 }
    }
    console.log("startDateIndex / this.chartData.length:", 1 - startDateIndex / this.chartData.length);
    return {
        top: 0,
        left: startDateIndex / this.chartData.length,
        width: 1 - startDateIndex / this.chartData.length,
        height: 1
    };
}

Result

Whenever the combox value is selected to any year it shows 2-3 months more data As you can see in below screenshot '1Y' is selected and the data That I am getting is from May 2023

image

Expected result

The chart should start from appropriate date.

Vighneshaa avatar Jul 31 '24 12:07 Vighneshaa