So I have the following data set

const data = [
  {
    id: '11se23-213',
    name: 'Data1',
    points: [
      { x: 5, y: 1.1 },
      { x: 6, y: 2.1 },
      { x: 7, y: 3.1 },
      { x: 8, y: 1.5 },
      { x: 9, y: 2.9 },
      { x: 10, y: 1.1 }
    ]
  },
  {
    id: 'fdsf-213',
    name: 'Data2',
    points: [
      { x: 5, y: 3.1 },
      { x: 6, y: 4.1 },
      { x: 7, y: 2.1 },
      { x: 8, y: 0.5 },
      { x: 9, y: 1.9 },
      { x: 10, y: 1.4 }
    ]
  },
]

On this data set I am rendering the chart. I am trying to achieve the following things with data set.

• Filter points using min and max value (user gives it in the input field)
  • User have the option to only give min value
  • User have the option to only give max value
  • User can give both min and max value
• Revert to original data if a user remove/clear both min and max value/input

Looking at the above requirement its possible that max and min value can be null.

Since I am working in Angular I will paste the code what I have done so far and I will write the problems I am facing below that.

component.ts

 const clonedData = data; // Keeping a clone so that I can revert later
 const mainData = data; // This is the data I am using for rendering chart and filtering

 // Using reactive forms of angular

 this.form.valueChanges.pipe(
   debounceTime(500),
   distinctUntilChanged(),
   tap(values => {
     if (values.min || values.max) {
       this.mainData = this.mainData.map(item => {
         return {
            ...item,
            points: items.points.filter(point => point.y >= values.min && point.y <= values.max)
         });
        return;
     }
     
     // If both null revert to original data;
     this.mainData = this.clonedData;

   }).subscribe()

I understand there is some issues in my code.

One of the main issue is even if I provide both min and max value or one of them the points array always return empty.

When I clear or remove both value then it goes in the else condition and revert to default data (which is working).

CodePudding user response：

Try this:

const data = [
  {
    id: '11se23-213',
    name: 'Data1',
    points: [ { x: 5, y: 1.1 }, { x: 6, y: 2.1 }, { x: 7, y: 3.1 }, { x: 8, y: 1.5 }, { x: 9, y: 2.9 }, { x: 10, y: 1.1 } ]
  },
  {
    id: 'fdsf-213',
    name: 'Data2',
    points: [ { x: 5, y: 3.1 }, { x: 6, y: 4.1 }, { x: 7, y: 2.1 }, { x: 8, y: 0.5 }, { x: 9, y: 1.9 }, { x: 10, y: 1.4 } ]
  }
];

const filter = (arr, min, max) => 
  arr.map(e => ({
    ...e,
    points: e.points.filter(({ y }) => (min === null || y >= min) && (max === null || y <= max))
  }));

console.log('min=1, max=2', filter(data, 1, 2));
console.log('min=null, max=2', filter(data, null, 2));
console.log('min=1, max=null', filter(data, 1, null));
console.log('min=null, max=null', filter(data, null, null));