ngx chart data with pipe

Question

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>

score 1 · Accepted Answer · answered Jan 19 '18 at 11:11

1

`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.

answered Jan 19 '18 at 11:11

Max R.

1,574
2
12
27

score 0 · Answer 2 · answered Jan 15 '18 at 14:18

0

Pure pipes don't recalculate its value if inputs don't change... so even if params change it will NOT recalculate.

There is a StackOverflow question that reflects that. The most common solution is to change pipe pureness to false and set the host component to ChangeDetectionStrategy.OnPush. But there are more solutions. Check out this link: pipes change detection

Hope this helps.

answered Jan 15 '18 at 14:18

Llorenç Pujol Ferriol

2,329
12
22

The inputs of the pipe are 2 date arguments, they do change and the pipe is called as well, it does work properly when making the date range smaller, but when making it bigger afterwards, the changes dont take effect. – Max R. Jan 17 '18 at 11:04
from and to are not inputs, they are params. Are you sure that when the params from and to change the transform function of the pipe is called? @MaxR. – Llorenç Pujol Ferriol Jan 17 '18 at 11:07
Yes, the do. I have 2 Datepickers to set the daterange, on Submit I put the datepicker dates into my date arguments for the pipe, then the array gets filtered by the daterange. However, this does only work when making the array smaller, on increasing the daterange again, it has no effect. – Max R. Jan 19 '18 at 09:01

ngx chart data with pipe

2 Answers2