From 78dac44874e4d51e9c1faeb8d506330eb4daa522 Mon Sep 17 00:00:00 2001 From: Mcat12 Date: Sun, 5 May 2019 20:25:49 -0700 Subject: [PATCH] Use moment in the ClientsGraph tooltip title to fix negative date error If a data point fell in the first 4 minutes of the hour, the "from" date would be shown as negative, as it is supposed to be 5 minutes before the data point's date (and "to" is 5 minutes after). Moment will correctly handle this and other possible issues. Signed-off-by: Mcat12 --- src/components/dashboard/ClientsGraph.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/dashboard/ClientsGraph.tsx b/src/components/dashboard/ClientsGraph.tsx index b746f13..186c199 100644 --- a/src/components/dashboard/ClientsGraph.tsx +++ b/src/components/dashboard/ClientsGraph.tsx @@ -12,7 +12,8 @@ import React, { Component, RefObject } from "react"; import ReactDOM from "react-dom"; import { Line } from "react-chartjs-2"; import { WithTranslation, withTranslation } from "react-i18next"; -import { getIntervalForRange, padNumber } from "../../util/graphUtils"; +import moment from "moment"; +import { getIntervalForRange } from "../../util/graphUtils"; import api from "../../util/api"; import ChartTooltip from "./ChartTooltip"; import { WithAPIData } from "../common/WithAPIData"; @@ -47,12 +48,16 @@ class ClientsGraph extends Component { mode: "x-axis", callbacks: { title: tooltipItem => { - const timeStr = tooltipItem[0].xLabel! as string; - const time = timeStr.match(/(\d?\d):?(\d?\d?)/); - const hour = parseInt(time![1], 10); - const minute = parseInt(time![2], 10) || 0; - const from = padNumber(hour) + ":" + padNumber(minute - 5) + ":00"; - const to = padNumber(hour) + ":" + padNumber(minute + 4) + ":59"; + const time = moment(tooltipItem[0].xLabel!, "HH:mm"); + + const fromTime = time.clone().subtract(5, "minutes"); + const toTime = time + .clone() + .add(4, "minutes") + .add(59, "seconds"); + + const from = fromTime.format("HH:mm:ss"); + const to = toTime.format("HH:mm:ss"); return t("Client activity from {{from}} to {{to}}", { from, to }); },