I am using a filter pipe with the ngx-charts data array. The data is filtered by 2 dates: fromDate and toDate. The pipe is working fine when filtering with dates that make the array smaller, but when I filter first with a smaller date-range and then make the range bigger again, the pipe does not work with the original array but with the already filtered array.
I have already done other pips and never came across this problem, I am not sure what is going wrong here. Maybe someone of you can help me out.
pipe:
export class DateInRangePipe implements PipeTransform {
transform(obj: any[], from: Date, to: Date): any[] {
if (obj && from && to) {
obj.forEach(data => {
data.series = data.series.filter((item: any) => {
return this.inRange(item.name, from, to);
});
});
}
return [...obj];
}
inRange(date: Date, from: Date, to: Date): boolean {
return date.getTime() >= from.getTime() &&
date.getTime() <= to.getTime() ? true : false;
}
}
Chart.component.html part
<ngx-charts-line-chart
[view]="view"
[scheme]="colorScheme"
[results]="multi | dateinrangePipe: from: to"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[autoScale]="autoScale"
(select)="onSelect($event)">
</ngx-charts-line-chart>
`data.series = data.series.filter...`
is a reference to the original object. To break the reference a clone of the obj Array has to be made at the beginning.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With