private async getReportsByTime()

in src/components/reports/ko/runtime/reports.ts [368:529]


    private async getReportsByTime(): Promise<void> {
        const startTime = this.startTime();
        const endTime = this.endTime();
        const differenceTime = endTime.getTime() - startTime.getTime();
        const differenceMinutes = Math.floor(differenceTime / (1000 * 60));
        const differenceHours = Math.floor(differenceTime / (1000 * 60 * 60));
        const differenceDays = Math.floor(differenceTime / (1000 * 3600 * 24));

        const maxRecordsToDisplay = 50;
        const intervalMultiplier = 15;
        const intervalInMin = (Math.floor(differenceMinutes / intervalMultiplier / maxRecordsToDisplay) * intervalMultiplier) || intervalMultiplier;

        let dateFormattingFunc: (timestamp: Date) => string;
        let dateFormattingDetailedFunc: (timestamp: Date) => string;

        if (differenceDays > 30) {
            dateFormattingFunc = (date: Date) => moment(date).format("MMM");
            dateFormattingDetailedFunc = dateFormattingFunc;
        }
        else if (differenceDays > 7) {
            dateFormattingFunc = (date: Date) => moment(date).format("M/D");
            dateFormattingDetailedFunc = dateFormattingFunc;
        }
        else if (differenceHours > 24) {
            dateFormattingFunc = (date: Date) => moment(date).format("M/D");
            dateFormattingDetailedFunc = (date: Date) => moment(date).format("M/D LT");
        }
        else {
            dateFormattingFunc = (date: Date) => moment(date).format("HH:mm");
        }

        const reportsByTime = await this.analyticsService.getReportsByTime(startTime, endTime, intervalInMin);
        const reportsByGeo = await this.analyticsService.getReportsByGeo(startTime, endTime);

        /* API calls */
        const recordsApiCalls: BarChartRecord[] = reportsByTime.value.map(x => {
            return {
                timestamp: new Date(x.timestamp),
                value: {
                    callCountTotal: x.callCountTotal,
                    callCountSuccess: x.callCountSuccess,
                    callCountFailed: x.callCountFailed,
                    callCountBlocked: x.callCountBlocked,
                }
            };
        });

        const chartConfigApiCalls: BarChartConfig = {
            startTime: startTime,
            endTime: endTime,
            records: recordsApiCalls,
            formatX: dateFormattingFunc,
            formatXDetailed: dateFormattingDetailedFunc,
            dimensions: [{
                displayName: "Total requests",
                key: "callCountTotal",
                color: "#a0cef5"
            },
            {
                displayName: "Successful requests",
                key: "callCountSuccess",
                color: "#7fba00"
            },
            {
                displayName: "Failed requests",
                key: "callCountFailed",
                color: "#e81123"
            },
            {
                displayName: "Blocked requests",
                key: "callCountBlocked",
                color: "#ff9800"
            }]
        };

        this.reportByCalls(chartConfigApiCalls);

        const chartConfigCallsGeo: MapChartConfig = {
            formatHeat: (calls: number) => Utils.formatNumber(calls),
            records: reportsByGeo.value.map(x => {
                return {
                    countryCode: x.country,
                    heat: x.callCountTotal
                };
            })
        };

        this.reportByCallsGeo(chartConfigCallsGeo);


        /* Bandwidth */
        const recordsBandwidth: BarChartRecord[] = reportsByTime.value.map(x => {
            return {
                timestamp: new Date(x.timestamp),
                value: {
                    bandwidth: x.bandwidth
                }
            };
        });

        const chartConfigBandiwidth: BarChartConfig = {
            startTime: startTime,
            endTime: endTime,
            records: recordsBandwidth,
            formatX: dateFormattingFunc,
            formatXDetailed: dateFormattingDetailedFunc,
            formatY: (bytes: number) => Utils.formatBytes(bytes),
            dimensions: [{
                displayName: "Bandwidth",
                key: "bandwidth",
                color: "#a0cef5"
            }]
        };

        this.reportByBandwidth(chartConfigBandiwidth);

        const chartConfigBandwidthGeo: MapChartConfig = {
            formatHeat: (bytes: number) => Utils.formatBytes(bytes),
            records: reportsByGeo.value.map(x => {
                return {
                    countryCode: x.country,
                    heat: x.bandwidth
                };
            })
        };

        this.reportByBandwidthGeo(chartConfigBandwidthGeo);


        /* Latency */
        const recordsLatency: MinMaxAvgChartRecord[] = reportsByTime.value.map(x => {
            return {
                timestamp: new Date(x.timestamp),
                min: x.apiTimeMin,
                avg: x.apiTimeAvg,
                max: x.apiTimeMax,
            };
        });

        const chartConfigLatency: MinMaxAvgChartConfig = {
            startTime: startTime,
            endTime: endTime,
            records: recordsLatency,
            formatX: dateFormattingFunc,
            formatXDetailed: dateFormattingDetailedFunc,
            formatY: (milliseconds: number) => Utils.formatTimespan(milliseconds)
        };

        this.reportByLatency(chartConfigLatency);

        const chartConfigLatencyGeo: MapChartConfig = {
            formatHeat: (milliseconds: number) => Utils.formatTimespan(milliseconds),
            records: reportsByGeo.value.map(x => {
                return {
                    countryCode: x.country,
                    heat: x.apiTimeAvg
                };
            })
        };

        this.reportByLatencyGeo(chartConfigLatencyGeo);
    }