Stats: format dates using UTC time instead of local time by default (#3103)

* Stats: format dates using UTC time instead of local time by default

* hide chart tooltip whenever new data comes in

Author: tom2drum

toolkit/components/charts/parts/ChartTooltip.tsx

@@ -151,6 +151,15 @@ export const ChartTooltip = React.memo(({
     };
   }, [ anchorEl, createPointerTracker, draw, hideContent, showContent ]);
 
+  const lastItemDateString = data[0].items[data[0].items.length - 1]?.date?.toISOString();
+
+  React.useEffect(() => {
+    if (trackerId.current) {
+      trackerId.current = undefined;
+      hideContent();
+    }
+  }, [ hideContent, lastItemDateString ]);
+
   return (
     <g
       ref={ ref }

toolkit/components/charts/parts/tooltip/ChartTooltipRow.tsx

@@ -70,7 +70,7 @@ export function useRenderRows(ref: React.RefObject<SVGGElement | null>, { data,
         if (index === 0) {
           const date = xScale.invert(x);
           const dateValue = data[0].items.find((item) => item.date.getTime() === date.getTime())?.dateLabel;
-          const dateValueFallback = d3.timeFormat('%e %b %Y')(xScale.invert(x));
+          const dateValueFallback = d3.utcFormat('%e %b %Y')(xScale.invert(x));
           return dateValue || dateValueFallback;
         }
 

toolkit/components/charts/utils/getDateLabel.ts

@@ -5,12 +5,12 @@ import { Resolution } from '../types';
 export function getDateLabel(date: Date, dateTo?: Date, resolution?: Resolution): string {
   switch (resolution) {
     case Resolution.WEEK:
-      return d3.timeFormat('%e %b %Y')(date) + (dateTo ? ` – ${ d3.timeFormat('%e %b %Y')(dateTo) }` : '');
+      return d3.utcFormat('%e %b %Y')(date) + (dateTo ? ` – ${ d3.utcFormat('%e %b %Y')(dateTo) }` : '');
     case Resolution.MONTH:
-      return d3.timeFormat('%b %Y')(date);
+      return d3.utcFormat('%b %Y')(date);
     case Resolution.YEAR:
-      return d3.timeFormat('%Y')(date);
+      return d3.utcFormat('%Y')(date);
     default:
-      return d3.timeFormat('%e %b %Y')(date);
+      return d3.utcFormat('%e %b %Y')(date);
   }
 }

toolkit/components/charts/utils/timeChartAxis.ts

@@ -22,12 +22,12 @@ export function getAxesParams(data: Data, axesConfig?: AxesConfig) {
   return {
     x: {
       scale: getAxisParamsX(data).scale,
-      tickFormatter: tickFormatterX,
+      tickFormatter: axesConfig?.x?.tickFormatter ?? tickFormatterX,
     },
     y: {
       scale: yScale,
       labelFormatParams: labelFormatParamsY,
-      tickFormatter: getTickFormatterY(labelFormatParamsY),
+      tickFormatter: axesConfig?.y?.tickFormatter ?? getTickFormatterY(labelFormatParamsY),
     },
   };
 }
@@ -48,13 +48,13 @@ const tickFormatterX = (axis: d3.Axis<d3.NumberValue>) => (d: d3.AxisDomain) =>
   const span = Number(extent[1]) - Number(extent[0]);
 
   if (span > 2 * YEAR) {
-    format = d3.timeFormat('%Y');
+    format = d3.utcFormat('%Y');
   } else if (span > 4 * MONTH) {
-    format = d3.timeFormat('%b \'%y');
+    format = d3.utcFormat('%b \'%y');
   } else if (span > 2 * DAY) {
-    format = d3.timeFormat('%d %b');
+    format = d3.utcFormat('%d %b');
   } else {
-    format = d3.timeFormat('%H:%M');
+    format = d3.utcFormat('%H:%M');
   }
 
   return format(d as Date);

ui/megaEth/uptime/UptimeCharts.tsx

@@ -27,6 +27,9 @@ const AXES_CONFIG_BASE: AxesConfigFn = ({ isEnlarged, isMobile }) => ({
   },
   x: {
     ticks: isEnlarged && !isMobile ? 8 : 5,
+    tickFormatter: () => (d: d3.AxisDomain) => {
+      return d3.timeFormat('%H:%M')(d as Date);
+    },
   },
 });
 
@@ -108,6 +111,10 @@ const UptimeCharts = ({ historyData }: Props) => {
     const items = smoothedData
       .map(({ value, timestamp }) => {
         const date = new Date(timestamp * SECOND);
+        // Here and below,
+        // despite the other charts in the stats page, this one should display dates & time in the local timezone, not UTC.
+        // This is because it is a "time-based" chart not a "date-based" one.
+        // That is why we use d3.timeFormat() instead of dayjs.utcFormat() here.
         return { date, value: Number(value.toFixed(0)), dateLabel: d3.timeFormat(TIME_FORMAT)(date) };
       })
       .filter(filterByInterval(interval, now));