timemanager/frontend/src/app/statistics/taskgroup-activity/simple-activity-diagram/simple-activity-diagram.component.ts

import {Component, Input, ViewChild} from '@angular/core';
import {FormControl} from "@angular/forms";
import {ChangeContext, LabelType, Options} from "ngx-slider-v2";
import {ApexAxisChartSeries, ChartComponent, ChartType} from "ng-apexcharts";
import {HistoryService, TaskgroupPathInfo, TaskgroupService} from "../../../../api";
import * as moment from "moment/moment";
import {ChartOptions} from "../taskgroup-activity.component";

@Component({
  selector: 'app-simple-activity-diagram',
  templateUrl: './simple-activity-diagram.component.html',
  styleUrls: ['./simple-activity-diagram.component.css']
})
export class SimpleActivityDiagramComponent {
  @Input('selectedChartype') selectedChartype: string = "bar";
  @Input() selectedTaskgroupPath: TaskgroupPathInfo | undefined;

  sliderControl: FormControl = new FormControl()
  dateRange: Date[] = this.createDateRange();
  selectedDateRange: Date[] = this.dateRange;
  value: number = this.dateRange[0].getTime();
  options: Options = {
    stepsArray: this.dateRange.map((date: Date) => {
      return { value: date.getTime() };
    }),
    translate: (value: number, label: LabelType): string => {
      return new Date(value).toDateString();
    },
    floor: 0,
    ceil: this.dateRange.length,
  };

  @ViewChild("chart") chart?: ChartComponent;
  public chartOptions: Partial<ChartOptions> = this.generateChartOptions()

  constructor(private taskgroupService: TaskgroupService,
              private historyService: HistoryService) {
  }

  createDateRange(): Date[] {
    const dates: Date[] = [];
    for (let i: number = 1; i <= 30; i++) {

      dates.push(moment().subtract(30-i, 'd').toDate());
    }
    this.sliderControl.setValue([dates[0], dates[dates.length-1]])
    return dates;
  }

  createDateRangeBetween(minValue: moment.Moment, maxValue: moment.Moment) {
    const dates: Date[] = [];
    let currentDate = moment(minValue);

    while(currentDate <= maxValue) {
      dates.push(currentDate.toDate());
      currentDate = currentDate.add(1, 'days');
    }

    return dates;
  }

  onUserChange(changeContext: ChangeContext) {
    console.log("min " + moment(changeContext.value).format("YYYY-MM-DD"));
    console.log("max " + moment(changeContext.highValue!).format("YYYY-MM-DD"))
    this.selectedDateRange = this.createDateRangeBetween(moment(changeContext.value), moment(changeContext.highValue!))
    this.chartOptions = this.generateChartOptions()
  }

  generateChartOptions(): Partial<ChartOptions> {
    return {
      series: this.generateSeries(),
      chart: {
        height: 350,
        type: this.selectedChartype as ChartType,
        stacked: true
      },
      title: {
        text: ""
      },
      xaxis: {
        categories: this.selectedDateRange.map(date => date.toDateString())
      }
    };
  }

  generateSeries() : ApexAxisChartSeries {
    const series: ApexAxisChartSeries = []

    if(this.selectedTaskgroupPath != undefined) {
      this.historyService.statisticsTaskgroupActivityTaskgroupIDStartingDateEndingDateIncludeSubTaskgroupsGet(
        this.selectedTaskgroupPath!.rootTasktroup.taskgroupID,
        moment(this.selectedDateRange[0]).format("YYYY-MM-DD"),
        moment(this.selectedDateRange[this.selectedDateRange.length-1]).format("YYYY-MM-DD"),
        false
      ).subscribe({
        next: resp => {
          series.push(
            {
              name: this.selectedTaskgroupPath!.rootTasktroup.taskgroupName,
              data: resp.map(dailyActivityInfo => dailyActivityInfo.activeMinutes)
            }
          );
        }
      })
    }




    this.selectedTaskgroupPath?.directChildren.forEach(taskgroup => {

      this.historyService.statisticsTaskgroupActivityTaskgroupIDStartingDateEndingDateIncludeSubTaskgroupsGet(
        taskgroup.taskgroupID,
        moment(this.selectedDateRange[0]).format("YYYY-MM-DD"),
        moment(this.selectedDateRange[this.selectedDateRange.length-1]).format("YYYY-MM-DD"), true
      ).subscribe({
        next: resp => {
          series.push(
            {
              name: taskgroup.taskgroupName,
              data: resp.map(dailyActivityInfo => dailyActivityInfo.activeMinutes)
            }
          )
        }
      })

    })
    console.log(series);
    return series;

  }

  updateSerieSelection() {
    this.chartOptions = this.generateChartOptions()
  }

  setSelectedChartType(selectedChartype: string) {
    this.selectedChartype = selectedChartype;
    this.updateSerieSelection();
  }

  setSelectedTaskgroupPath(selectedTaskgroupPath: TaskgroupPathInfo) {
    this.selectedTaskgroupPath = selectedTaskgroupPath;
    this.updateSerieSelection();
  }
}