fix: custom adaptive time formatter for echart (#7493)

Author: mskorokhodov

packages/web/app/src/components/target/insights/Stats.tsx

@@ -18,6 +18,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { CHART_PRIMARY_COLOR } from '@/constants';
 import { FragmentType, graphql, useFragment } from '@/gql';
+import { createAdaptiveTimeFormatter } from '@/lib/date-time';
 import {
   formatDuration,
   formatNumber,
@@ -317,6 +318,13 @@ function OverTimeStats({
                 {
                   type: 'time',
                   boundaryGap: false,
+                  axisLabel: {
+                    formatter: (value: number) =>
+                      createAdaptiveTimeFormatter(
+                        requests[0][0],
+                        requests[requests.length - 1][0],
+                      )(value),
+                  },
                 },
               ],
               yAxis: [
@@ -889,6 +897,10 @@ function LatencyOverTimeStats({
                       type: 'dashed',
                     },
                   },
+                  axisLabel: {
+                    formatter: (value: number) =>
+                      createAdaptiveTimeFormatter(p75[0][0], p75[p75.length - 1][0])(value),
+                  },
                 },
               ],
               yAxis: [
@@ -983,6 +995,13 @@ function RpmOverTimeStats({
                       type: 'dashed',
                     },
                   },
+                  axisLabel: {
+                    formatter: (value: number) =>
+                      createAdaptiveTimeFormatter(
+                        rpmOverTime[0][0],
+                        rpmOverTime[rpmOverTime.length - 1][0],
+                      )(value),
+                  },
                 },
               ],
               yAxis: [

packages/web/app/src/lib/date-time.ts

@@ -5,3 +5,45 @@ import { subHours } from 'date-fns';
 export function subDays(date: Date | number, days: number) {
   return subHours(date, days * 24);
 }
+
+export function createAdaptiveTimeFormatter(from?: string, to?: string) {
+  let options: Intl.DateTimeFormatOptions = {
+    hour: '2-digit',
+    minute: '2-digit',
+  };
+
+  if (from && to) {
+    const range = new Date(to).getTime() - new Date(from).getTime();
+    const hour = 60 * 60 * 1000;
+    const day = 24 * hour;
+    const month = 30 * day;
+
+    if (range < 13 * hour) {
+      options = {
+        hour: '2-digit',
+        minute: '2-digit',
+      };
+    } else if (range < 2 * day) {
+      options = {
+        day: '2-digit',
+        month: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+      };
+    } else if (range < 2 * month) {
+      options = {
+        day: '2-digit',
+        month: '2-digit',
+      };
+    } else {
+      options = {
+        month: '2-digit',
+        year: 'numeric',
+      };
+    }
+  }
+
+  const formatter = new Intl.DateTimeFormat('en-GB', options);
+
+  return (value: number) => formatter.format(value);
+}