Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixing total slow time tooltip label #723

Merged
merged 3 commits into from
Jul 7, 2023
Merged

Fixing total slow time tooltip label #723

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
75371c7
Fixing total slow time tooltip label
devinmatte Jul 7, 2023
94b5e51
Fixing dayjs extention
devinmatte Jul 7, 2023
276d27a
small change (#727)
PatrickCleary Jul 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 48 additions & 45 deletions modules/slowzones/charts/TotalSlowTime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,11 @@ import { enUS } from 'date-fns/locale';
import { Line } from 'react-chartjs-2';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import duration from 'dayjs/plugin/duration';
import ChartjsPluginWatermark from 'chartjs-plugin-watermark';
import { COLORS, LINE_COLORS } from '../../../common/constants/colors';
import type { DayDelayTotals } from '../../../common/types/dataPoints';
import type { LineShort, Line as TrainLine } from '../../../common/types/lines';

dayjs.extend(utc);
import { drawSimpleTitle } from '../../../common/components/charts/Title';
import { getTimeUnitSlowzones } from '../../../common/utils/slowZoneUtils';
import { useBreakpoint } from '../../../common/hooks/useBreakpoint';
Expand All @@ -19,6 +18,9 @@ import { ChartBorder } from '../../../common/components/charts/ChartBorder';
import { ChartDiv } from '../../../common/components/charts/ChartDiv';
import { getFormattedTimeString } from '../../../common/utils/time';

dayjs.extend(utc);
dayjs.extend(duration);

interface TotalSlowTimeProps {
// Data is always all data. We filter it by adjusting the X axis of the graph.
data: DayDelayTotals[];
Expand All @@ -41,45 +43,45 @@ export const TotalSlowTime: React.FC<TotalSlowTimeProps> = ({
const isMobile = !useBreakpoint('md');
const labels = data.map((item) => dayjs.utc(item.date).format('YYYY-MM-DD'));
const unit = getTimeUnitSlowzones(startDateUTC, endDateUTC);
const isLinePage = line !== undefined && lineShort !== undefined;

const datasets =
line !== undefined && lineShort !== undefined
? [
{
label: `${lineShort} Line`,
data: data?.map((d) => (d[lineShort] / 60).toFixed(2)),
borderColor: LINE_COLORS[line],
backgroundColor: LINE_COLORS[line],
pointRadius: 0,
tension: 0.1,
},
]
: [
{
label: `Red Line`,
data: data?.map((d) => (d['Red'] / 60).toFixed(2)),
borderColor: LINE_COLORS['line-red'],
backgroundColor: LINE_COLORS['line-red'],
pointRadius: 0,
tension: 0.1,
},
{
label: `Orange Line`,
data: data?.map((d) => (d['Orange'] / 60).toFixed(2)),
borderColor: LINE_COLORS['line-orange'],
backgroundColor: LINE_COLORS['line-orange'],
pointRadius: 0,
tension: 0.1,
},
{
label: `Blue Line`,
data: data?.map((d) => (d['Blue'] / 60).toFixed(2)),
borderColor: LINE_COLORS['line-blue'],
backgroundColor: LINE_COLORS['line-blue'],
pointRadius: 0,
tension: 0.1,
},
];
const datasets = isLinePage
? [
{
label: `${lineShort} Line`,
data: data?.map((d) => (d[lineShort] / 60).toFixed(2)),
borderColor: LINE_COLORS[line],
backgroundColor: LINE_COLORS[line],
pointRadius: 0,
tension: 0.1,
},
]
: [
{
label: `Red Line`,
data: data?.map((d) => (d['Red'] / 60).toFixed(2)),
borderColor: LINE_COLORS['line-red'],
backgroundColor: LINE_COLORS['line-red'],
pointRadius: 0,
tension: 0.1,
},
{
label: `Orange Line`,
data: data?.map((d) => (d['Orange'] / 60).toFixed(2)),
borderColor: LINE_COLORS['line-orange'],
backgroundColor: LINE_COLORS['line-orange'],
pointRadius: 0,
tension: 0.1,
},
{
label: `Blue Line`,
data: data?.map((d) => (d['Blue'] / 60).toFixed(2)),
borderColor: LINE_COLORS['line-blue'],
backgroundColor: LINE_COLORS['line-blue'],
pointRadius: 0,
tension: 0.1,
},
];
return (
<ChartBorder>
<ChartDiv isMobile={isMobile}>
Expand Down Expand Up @@ -132,7 +134,6 @@ export const TotalSlowTime: React.FC<TotalSlowTimeProps> = ({
month: 'MMM',
},
},

adapters: {
date: {
locale: enUS,
Expand All @@ -149,11 +150,13 @@ export const TotalSlowTime: React.FC<TotalSlowTimeProps> = ({
mode: 'index',
position: 'nearest',
callbacks: {
title: (tooltipItems) => {
return `${tooltipItems[0].label.split(',').slice(0, 2).join(',')}`;
},
label: (tooltipItem) => {
return `${tooltipItem.dataset.label}: ${getFormattedTimeString(
tooltipItem.parsed.y,
'minutes'
)}`;
return `${
!isLinePage ? `${tooltipItem.dataset.label} slow time:` : 'Total slow time: '
} ${getFormattedTimeString(tooltipItem.parsed.y, 'minutes')}`;
},
},
},
Expand Down
Loading