Improve "group by date" functionality in charts (#415)

* Removes time from parsed dates to allow accurate date grouping

* Daily bar chart now separates hours

Co-authored-by: Anthony Potdevin <31413433+apotdevin@users.noreply.github.com>
This commit is contained in:
Justin Litchfield 2022-04-03 16:58:46 -05:00 committed by GitHub
parent d119739c56
commit 48b868ae36
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 6 deletions

View file

@ -54,9 +54,17 @@ const amountOfXTicks = (width: number) => {
};
const parseDate = timeParse('%Y-%m-%d');
const parseDateAndHour = timeParse('%Y-%m-%dT%H');
const format = timeFormat('%b %d');
const hourFormat = timeFormat('%b %d: %H');
const formatDate = (date: string) => format(parseDate(date) as Date);
const formatDate = (date: string) => {
if (date.length === 10) {
return format(parseDate(date) as Date);
} else {
return hourFormat(parseDateAndHour(date) as Date);
}
};
const tooltipStyles = {
...defaultStyles,

View file

@ -12,6 +12,10 @@ import { widgetList, WidgetProps } from './widgetList';
import { GetInvoicesQuery } from '../../../graphql/queries/__generated__/getInvoices.generated';
import { GetPaymentsQuery } from '../../../graphql/queries/__generated__/getPayments.generated';
const removeTime = (date: Date) => {
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
};
const getColumns = (width: number): number => {
const { lg, md, sm, xs } = defaultGrid.breakpoints;
@ -94,7 +98,11 @@ export const getByTime = (array: ArrayType, time: number): any[] => {
const difference = isDay
? 24 - differenceInHours(today, new Date(transaction.confirmed_at))
: time - differenceInDays(today, new Date(transaction.confirmed_at));
: time -
differenceInDays(
today,
removeTime(new Date(transaction.confirmed_at))
);
transactions.push({
difference,
@ -106,7 +114,8 @@ export const getByTime = (array: ArrayType, time: number): any[] => {
const difference = isDay
? 24 - differenceInHours(today, new Date(transaction.created_at))
: time - differenceInDays(today, new Date(transaction.created_at));
: time -
differenceInDays(today, removeTime(new Date(transaction.created_at)));
transactions.push({
difference,
@ -116,7 +125,8 @@ export const getByTime = (array: ArrayType, time: number): any[] => {
} else if (transaction.__typename === 'Forward') {
const difference = isDay
? 24 - differenceInHours(today, new Date(transaction.created_at))
: time - differenceInDays(today, new Date(transaction.created_at));
: time -
differenceInDays(today, removeTime(new Date(transaction.created_at)));
transactions.push({
difference,
@ -147,7 +157,7 @@ export const getByTime = (array: ArrayType, time: number): any[] => {
date: isDay
? subHours(today, 24 - Number(key))
.toISOString()
.slice(0, 10)
.slice(0, 13)
: subDays(today, time - Number(key))
.toISOString()
.slice(0, 10),
@ -166,7 +176,7 @@ export const getByTime = (array: ArrayType, time: number): any[] => {
: isDay
? subHours(today, 24 - Number(key))
.toISOString()
.slice(0, 10)
.slice(0, 13)
: subDays(today, time - Number(key))
.toISOString()
.slice(0, 10),