How to filter the echarts line chart per week in angular

Question

How to filter echarts line chart per week in angular. Currently it display all records example 2019-10-27 10:15:00, 2019-10-27 10:15:30, 2019-10-27 10:16:00, 2019-10-27 10:19:00 . It should be 2019-10-27 if there's 2019-28-10 00:00:15, 2019-28-10 00:10:00 the output should be 2019-10-27, 2019-10-28 .

here's the code list.component.html

<button nz-button nzType="default" (click)="dataFilter('prevWeek')">Previous week</button>
<button nz-button nzType="default" (click)="dataFilter('currWeek')">Current week</button>
<button nz-button nzType="default" (click)="dataFilter('all')">All</button>
<div echarts [options]="trendOption" id="trendChart" [autoResize]="true" style="height: 280px;"></div>

list.component.ts

dataFilter(event: any) {
    switch (event) {
      case 'prevWeek':
        console.log('diplay the previous/last week');
        break;
      case 'currWeek':
        console.log('display current week list')
        break;
      case 'all':
        console.log('display all records');
        break;
      default: break;
    }
  }
    getRoomTrend() {
        const _THIS = this;
        const dateTime: any = [];
        const tempY: any = [];
        const humidY: any = [];

        this.global
          .getData(`/conditions?length=100&sensor=${this.roomTitle}`)
          .pipe(take(1))
          .subscribe((res: any) => {
            const record = res['data'];

            for (let i = record.length - 1; i >= 0; i--) {
              const date = format(record[i].date, 'MM/DD/YYYY[\n]HH:mm');
              const temperature = parseFloat(record[i].temperature);
              const humidity = parseFloat(record[i].humidity);

              dateTime.push(date);
              tempY.push(temperature);
              humidY.push(humidity);
            }
            if (this.initialLoad.trendStatus) {
              this.trendOption = {
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    animation: false
                  }
                },
                legend: {
                  top: '10',
                  data: ['Temperature', 'Humidity']
                },
                grid: {
                  left: '3%',
                  bottom: '15%',
                  containLabel: true
                },
                dataZoom: [
                  {
                    minValueSpan: 4,
                    startValue: record.length - 3
                  },
                  {
                    type: 'inside'
                  }
                ],
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  splitLine: {
                    show: false
                  },
                  data: dateTime
                },
                yAxis: [
                  {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    axisLabel: {
                      formatter: '{value} °'
                    },
                    splitLine: {
                      show: false
                    }
                  },
                  {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    position: 'right',
                    axisLabel: {
                      formatter: '{value} °'
                    },
                    splitLine: {
                      show: false
                    }
                  }
                ],
                series: [
                  {
                    name: 'Temperature',
                    type: 'line',
                    color: '#006ec7',
                    data: tempY
                  },
                  {
                    name: 'Humidity',
                    type: 'line',
                    color: '#8c0000',
                    data: humidY
                  }
                ]
              };
            }
          });
      }

example I have 30,000 record and the date is same but different time. the output should be only ```2019-15-10, 2019-18-10, 2019-22-10. Thanks in advance.

Answer 1

let uniqueDates = new Set();

record.forEach(value => {
    let date = new Date(value.date.getFullYear(), value.date.getMonth(), value.date.getDate());
    uniqueDates.add(date);
});

Set by definition is a set of unique values. So you get the date without the time from the records and add them into the set. You will end up with a list of unique dates.