fix-statistics #110

Merged
sebastian merged 6 commits from fix-statistics into master 2024-03-18 15:25:20 +01:00
4 changed files with 160 additions and 145 deletions
Showing only changes of commit 985aa5f83b - Show all commits

View File

@ -1,8 +1,11 @@
<div style="text-align:center">
<div style="text-align:center" *ngIf="selectedTaskgroupPath != undefined">
<apx-chart
[series]="chartOptions.series!"
[chart]="chartOptions.chart!"
[xaxis]="chartOptions.xaxis!"
[title]="chartOptions.title!"
[series]="chartOptions!.series!"
[chart]="chartOptions!.chart!"
[title]="chartOptions!.title!"
[plotOptions]="chartOptions!.plotOptions!"
[xaxis]="chartOptions!.xAxis!"
[yaxis]="chartOptions!.yAxis!"
[tooltip]="chartOptions!.tooltip!"
></apx-chart>
</div>

View File

@ -1,168 +1,180 @@
import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {ApexAxisChartSeries, ChartComponent, ChartType} from "ng-apexcharts";
import {ChartOptions} from "../taskgroup-activity.component";
import {Component, Input, OnChanges, ViewChild} from '@angular/core';
import {
ApexAxisChartSeries,
ApexTitleSubtitle,
ApexDataLabels,
ApexChart,
ApexPlotOptions, ChartComponent, ApexXAxis, ApexYAxis, ApexTooltip
} from "ng-apexcharts";
import {generate} from "rxjs";
import * as moment from "moment";
import {HistoryService, TaskgroupActivityInfo, TaskgroupPathInfo} from "../../../../api";
interface XYData {
x: any,
y: any
}
export type ChartOptions = {
series: ApexAxisChartSeries;
chart: ApexChart;
dataLabels: ApexDataLabels;
title: ApexTitleSubtitle;
plotOptions: ApexPlotOptions;
xAxis: ApexXAxis,
yAxis: ApexYAxis,
tooltip: ApexTooltip
};
@Component({
selector: 'app-heatmap-activity',
templateUrl: './heatmap-activity.component.html',
styleUrls: ['./heatmap-activity.component.css']
})
export class HeatmapActivityComponent implements OnInit{
export class HeatmapActivityComponent implements OnChanges{
@ViewChild("chart") chart?: ChartComponent;
public chartOptions: Partial<ChartOptions> = this.generateChartOptions()
@ViewChild("chart") chart: ChartComponent | undefined;
@Input() selectedTaskgroupPath: TaskgroupPathInfo | undefined
public chartOptions: Partial<ChartOptions> | undefined;
@Input() selectedTaskgroupPath?: TaskgroupPathInfo
maxValue = 120
constructor(private historyService: HistoryService) {
}
ngOnInit() {
this.chartOptions = this.generateChartOptions();
}
generateChartOptions(): Partial<ChartOptions> {
return {
series: this.generateSeries(),
chart: {
height: 350,
type: 'heatmap',
},
title: {
text: ""
},
dataLabels: {
enabled: false
},
colors: ["#008FFB"],
};
}
generateSeries() : ApexAxisChartSeries {
const series: ApexAxisChartSeries = []
ngOnChanges() {
if(this.selectedTaskgroupPath != undefined) {
const startingDate = new Date(2023, 4, 9);
const endDate = new Date(2023, 11, 20);
let activityInfos: TaskgroupActivityInfo[];
this.historyService.statisticsTaskgroupActivityTaskgroupIDStartingDateEndingDateIncludeSubTaskgroupsGet(
this.selectedTaskgroupPath.rootTasktroup.taskgroupID,
moment().subtract(6, "months").format("YYYY-MM-DD"),
moment().add(2, 'days').format("YYYY-MM-DD"),
true
this.selectedTaskgroupPath!.rootTasktroup.taskgroupID,
moment().startOf('year').format("YYYY-MM-DD"),
moment().endOf("year").format("YYYY-MM-DD"),
false
).subscribe({
next: resp => {
activityInfos = resp;
const data: XYData[][] = [];
let currentDate: moment.Moment = moment(activityInfos[0].date).subtract(moment(activityInfos[0].date).day(), 'days');
//Offset until data starts
let index = currentDate.day();
while(currentDate < moment(activityInfos[0].date)) {
if(data[currentDate.day()] == undefined) {
data[currentDate.day()] = [];
}
data[currentDate.day()][index] = {
x: moment(currentDate).toDate(),
y: 0
}
currentDate.add(1, 'days');
}
//inside data
activityInfos.forEach(activityInfo => {
const momentDate: moment.Moment = moment(activityInfo.date);
const seriesIndex = momentDate.day();
if(data[seriesIndex] == undefined) {
data[seriesIndex] = [];
}
data[seriesIndex][index] = {
x: activityInfo.date,
y: activityInfo.activeMinutes
}
if(seriesIndex == 6) {
index++;
}
})
currentDate = moment(activityInfos[activityInfos.length-1].date);
currentDate = currentDate.add(1, "days");
//offset outside data
for(let i=moment(activityInfos[activityInfos.length-1].date).day(); i<7; i++) {
data[i][index] = {
x: moment(currentDate).toDate(),
y: 0
}
console.log(currentDate)
currentDate = currentDate.add(1, "days");
}
series.push({
name: "Saturday",
data: data[6]
});
series.push({
name: "Friday",
data: data[5]
});
series.push({
name: "Thursday",
data: data[4]
});
series.push({
name: "Wednesday",
data: data[3]
});
series.push({
name: "Tuesday",
data: data[2]
});
series.push({
const taskgroupActivityInfo = resp;
console.log("Chat Options")
this.chartOptions = {
series: [
{
name: "Monday",
data: data[1]
});
series.push({
data: this.generateData(moment().startOf('year'),taskgroupActivityInfo)
},
{
name: "Tuesday",
data: this.generateData(moment().startOf('year').add(1, "days"),taskgroupActivityInfo)
},
{
name: "Wednesday",
data: this.generateData(moment().startOf('year').add(2, "days"), taskgroupActivityInfo)
},
{
name: "Thursday",
data: this.generateData(moment().startOf('year').add(3, "days"), taskgroupActivityInfo)
},
{
name: "Friday",
data: this.generateData(moment().startOf('year').add(4, "days"), taskgroupActivityInfo)
},
{
name: "Saturday",
data: this.generateData(moment().startOf('year').add(5, "days"), taskgroupActivityInfo)
},
{
name: "Sunday",
data: data[0]
});
data: this.generateData(moment().startOf('year').add(6, "days"), taskgroupActivityInfo)
}
],
chart: {
height: 350,
type: "heatmap"
},
xAxis: {
labels: {
show: false
}
},
yAxis: {
labels: {
show: true
}
},
plotOptions: {
heatmap: {
shadeIntensity: 0.5,
colorScale: {
ranges: [
{
from: 0,
to: 5,
name: "low",
color: "#00A100"
},
{
from: 6,
to: 20,
name: "medium",
color: "#128FD9"
},
{
from: 21,
to: 45,
name: "high",
color: "#FFB200"
},
{
from: 46,
to: this.maxValue,
name: "extreme",
color: "#FF0000"
}
]
}
}
},
dataLabels: {
enabled: true,
style: {
fontSize: "12px"
}
},
title: {
text: "HeatMap Chart with Color Range"
},
tooltip: {
enabled: true,
y: {
formatter: function (value, { seriesIndex, dataPointIndex, w }) {
return "<span style='font-weight: normal'>Spent </span>" + value + " <span style='font-weight: normal'>Minutes on <br>" + w.config.series[seriesIndex].data[dataPointIndex].extraInfo.format("dddd, MMMM D, YYYY") + "</span>"
},
title: {
formatter: seriesName => ""
}
}
}
};
}
})
return series;
} else {
}
}
private generateData(startingDate: moment.Moment, data: TaskgroupActivityInfo[]) {
let currentDate = startingDate;
let series = []
let endingDate = startingDate.clone().endOf('year');
while(currentDate.isBefore(endingDate)) {
let x = "w" + currentDate.isoWeek();
let y = this.findTaskgroupActivityInfoByDate(currentDate, data)
let extraInfo = currentDate.clone()
series.push({
x: x,
y: y,
extraInfo: extraInfo
})
currentDate = currentDate.add(7, "days");
}
return series;
}
}
generateData(start: moment.Moment, end: moment.Moment) {
const data: TaskgroupActivityInfo[] = [];
let currentDate: moment.Moment = moment(start);
while(currentDate <= end) {
data.push({
date: currentDate.format("YYYY-MM-DD"),
activeMinutes: Math.floor(Math.random() * (100 + 1))
})
currentDate = currentDate.add(1, 'days');
}
return data;
}
setSelectedTaskgroupPath(taskgroupPath: TaskgroupPathInfo) {
this.selectedTaskgroupPath = taskgroupPath;
this.chartOptions = this.generateChartOptions();
private findTaskgroupActivityInfoByDate(date: moment.Moment, data: TaskgroupActivityInfo[]) {
return data.find(taskActivity => moment(taskActivity.date).isSame(date))
}
}

View File

@ -14,5 +14,5 @@
</mat-form-field>
<app-simple-activity-diagram *ngIf="selectedChartype !== 'heatmap'" #simpleActivityDiagram [selectedChartype]="selectedChartype" [selectedTaskgroupPath]="selectedTaskgroupPath"></app-simple-activity-diagram>
<app-heatmap-activity *ngIf="selectedChartype === 'heatmap'" #heatMap></app-heatmap-activity>
<app-heatmap-activity *ngIf="selectedChartype === 'heatmap'" #heatMap [selectedTaskgroupPath]="selectedTaskgroupPath!"></app-heatmap-activity>
</div>

View File

@ -70,7 +70,7 @@ export class TaskgroupActivityComponent implements OnInit{
this.simpleActivityDiagram.setSelectedTaskgroupPath(this.selectedTaskgroupPath!);
}
this.heatMap?.setSelectedTaskgroupPath(this.selectedTaskgroupPath!);
//this.heatMap?.setSelectedTaskgroupPath(this.selectedTaskgroupPath!);
}
onSelectChartType() {