My current dataset is structured as follows:
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 }
]
},
]
I am currently working on rendering a chart based on this dataset and have specific objectives to achieve with it.
- I need to filter the points using minimum and maximum values (provided by the user in input fields)
- The user has the option to provide only the minimum value
- The user has the option to provide only the maximum value
- The user can provide both the minimum and maximum values
- If the user removes or clears both the minimum and maximum values, the data should revert back to its original form.
Considering the requirements above, it is possible for the max and min values to be null.
As I am utilizing Angular for this task, below is the code snippet of what I have implemented so far along with the challenges I am facing:
component.ts
const clonedData = data; // Keeping a clone for later reversion
const mainData = data; // Data used for rendering and filtering
// Utilizing Angular's reactive forms
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;
}
// Revert to original data if both values are empty
this.mainData = this.clonedData;
}).subscribe()
It is evident that there are some issues present in my code.
One major issue is that even when providing both minimum and maximum values or just one of them, the points array always returns empty.
On clearing or removing both values, the function appropriately reverts back to the default data (working as intended).