Date formatting

packages/web-console/src/scenes/Editor/Metrics/index.tsx

@@ -5,8 +5,6 @@ import { Text, Link } from "../../../components"
 import { useEditor } from "../../../providers"
 import { MetricDuration } from "./utils"
 import { Time } from "@styled-icons/boxicons-regular"
-import { fetchUserLocale, getLocaleFromLanguage } from "../../../utils"
-import { format } from "date-fns"
 import { AddMetricDialog } from "./add-metric-dialog"
 import type { Metric } from "../../../store/buffers"
 import { Metric as MetricComponent } from "./metric"
@@ -15,6 +13,7 @@ import { selectors } from "../../../store"
 import { ExternalLink } from "@styled-icons/remix-line"
 import merge from "lodash.merge"
 import { AddChart } from "@styled-icons/material"
+import { getLocalTimeZone } from "../../../utils/dateTime"
 
 const Root = styled.div`
   display: flex;
@@ -34,6 +33,7 @@ const Toolbar = styled(Box).attrs({
   padding: 0 2.5rem;
   border-bottom: 1px solid ${({ theme }) => theme.color.backgroundDarker};
   box-shadow: 0 2px 10px 0 rgba(23, 23, 23, 0.35);
+  white-space: nowrap;
 `
 
 const Header = styled(Text)`
@@ -80,7 +80,6 @@ export const Metrics = () => {
     (activeBuffer?.metricsViewState?.metricDuration as MetricDuration) ??
       MetricDuration.SEVEN_DAYS,
   )
-  const userLocale = useMemo(fetchUserLocale, [])
   const [dialogOpen, setDialogOpen] = useState(false)
   const [metrics, setMetrics] = useState<Metric[]>([])
   const telemetryConfig = useSelector(selectors.telemetry.getConfig)
@@ -194,11 +193,7 @@ export const Metrics = () => {
         {/* <Header>WAL metrics for {table.table_name}</Header> */}
         <AddMetricDialog open={dialogOpen} onOpenChange={setDialogOpen} />
         <Box align="center" gap="1rem">
-          <Text color="gray2">
-            {format(new Date(), "OOOO", {
-              locale: getLocaleFromLanguage(userLocale),
-            })}
-          </Text>
+          <Text color="gray2">{getLocalTimeZone()}</Text>
           <Select
             name="duration"
             value={metricDuration}

packages/web-console/src/scenes/Editor/Metrics/metric.tsx

@@ -42,21 +42,28 @@ const graphDataConfigs = {
       latency.map((l) => new Date(l.time).getTime()),
       latency.map((l) => parseFloat(l.avg_latency)),
     ],
-    yValue: (rawValue: number) => (+rawValue).toFixed(2) + "ms",
+    yValue: (rawValue: number) => (+rawValue).toFixed(2) + " ms",
   },
   [MetricType.ROWS_APPLIED]: {
     getData: (rowsApplied: RowsApplied[]): uPlot.AlignedData => [
       rowsApplied.map((l) => new Date(l.time).getTime()),
       rowsApplied.map((l) => parseFloat(l.numOfRowsWritten)),
     ],
-    yValue: (rawValue: number) => (+rawValue).toFixed(0),
+    yValue: (rawValue: number) => {
+      if (rawValue >= 1e6) {
+        return (rawValue / 1e6).toFixed(1).replace(/\.0$/, "") + " M"
+      } else if (rawValue >= 1e3) {
+        return (rawValue / 1e3).toFixed(1).replace(/\.0$/, "") + " k"
+      }
+      return rawValue.toString()
+    },
   },
   [MetricType.WRITE_AMPLIFICATION]: {
     getData: (rowsApplied: RowsApplied[]): uPlot.AlignedData => [
       rowsApplied.map((l) => new Date(l.time).getTime()),
       rowsApplied.map((l) => parseFloat(l.avgWalAmplification)),
     ],
-    yValue: (rawValue: number) => (+rawValue).toFixed(0) + "x",
+    yValue: (rawValue: number) => (+rawValue).toFixed(0) + " x",
   },
 }
 

packages/web-console/src/scenes/Editor/Metrics/useGraphOptions.ts

@@ -1,3 +1,4 @@
+import { uniq } from "./../../../utils/uniq"
 import { subMinutes } from "date-fns"
 import { useContext } from "react"
 import { ThemeContext } from "styled-components"
@@ -9,8 +10,8 @@ type Params = {
   colors: string[]
   duration: MetricDuration
   tickValue?: (rawValue: number) => string
-  xValue?: (rawValue: number, index: number, ticks: number[]) => string | null
-  yValue?: (rawValue: number) => string
+  xValue: (rawValue: number, index: number, ticks: number[]) => string | null
+  yValue: (rawValue: number) => string
   timeRef: React.RefObject<HTMLSpanElement>
   valueRef: React.RefObject<HTMLSpanElement>
 }
@@ -60,7 +61,7 @@ export const useGraphOptions = ({
   const end = now.getTime()
 
   const baseAxisConfig: uPlot.Axis = {
-    stroke: theme.color.graphLegend,
+    stroke: theme.color.gray2,
     labelFont: `600 12px ${theme.font}`,
     font: `12px ${theme.font}`,
     ticks: {
@@ -79,14 +80,19 @@ export const useGraphOptions = ({
     {
       ...baseAxisConfig,
       values: (_self, ticks) => {
-        return ticks.map((rawValue, index) =>
-          xValue
-            ? xValue(rawValue, index, ticks)
-            : new Date(rawValue).toLocaleTimeString(navigator.language, {
-                hour: "2-digit",
-                minute: "2-digit",
-              }),
-        )
+        let found: string[] = []
+        return ticks.map((rawValue, index) => {
+          const mapped = xValue(rawValue, index, ticks)
+          if (mapped === null) {
+            return null
+          }
+          if (found.includes(mapped)) {
+            return null
+          } else {
+            found.push(mapped)
+            return mapped
+          }
+        })
       },
     },
     {

packages/web-console/src/scenes/Editor/Metrics/utils.ts

@@ -1,3 +1,5 @@
+import { utcToLocal } from "../../../utils/dateTime"
+
 export enum MetricType {
   ROWS_APPLIED = "Rows applied",
   LATENCY = "Latency",
@@ -74,39 +76,19 @@ export const minutesToHours = (durationInMinutes: number) =>
 
 export const xAxisFormat = {
   [MetricDuration.TEN_MINUTES]: (rawValue: number) =>
-    new Date(rawValue).toLocaleTimeString(navigator.language, {
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-    }),
+    utcToLocal(rawValue, "HH:mm:ss"),
   [MetricDuration.THIRTY_MINUTES]: (rawValue: number) =>
-    new Date(rawValue).toLocaleTimeString(navigator.language, {
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-    }),
+    utcToLocal(rawValue, "HH:mm:ss"),
   [MetricDuration.ONE_HOUR]: (rawValue: number) =>
-    new Date(rawValue).toLocaleTimeString(navigator.language, {
-      hour: "2-digit",
-      minute: "2-digit",
-    }),
+    utcToLocal(rawValue, "HH:mm"),
   [MetricDuration.THREE_HOURS]: (rawValue: number) =>
-    new Date(rawValue).toLocaleTimeString(navigator.language, {
-      hour: "2-digit",
-      minute: "2-digit",
-    }),
+    utcToLocal(rawValue, "HH:mm"),
   [MetricDuration.SIX_HOURS]: (rawValue: number) =>
-    new Date(rawValue).toLocaleTimeString(navigator.language, {
-      hour: "2-digit",
-    }),
+    utcToLocal(rawValue, "HH:mm"),
   [MetricDuration.TWELVE_HOURS]: (rawValue: number) =>
-    new Date(rawValue).toLocaleTimeString(navigator.language, {
-      hour: "2-digit",
-    }),
+    utcToLocal(rawValue, "HH:mm"),
   [MetricDuration.TWENTY_FOUR_HOURS]: (rawValue: number) =>
-    new Date(rawValue).toLocaleTimeString(navigator.language, {
-      hour: "2-digit",
-    }),
+    utcToLocal(rawValue, "HH:mm"),
   [MetricDuration.THREE_DAYS]: (rawValue: number) =>
     new Date(rawValue).toLocaleDateString(navigator.language, {
       day: "2-digit",

packages/web-console/src/utils/dateTime.ts

@@ -0,0 +1,9 @@
+import { format } from "date-fns"
+import { TZDate } from "@date-fns/tz"
+
+export const getLocalTimeZone = () => {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone
+}
+
+export const utcToLocal = (utcDate: number, dateFormat: string) =>
+  format(new TZDate(utcDate, getLocalTimeZone()), dateFormat)

packages/web-console/src/utils/index.ts

@@ -24,6 +24,7 @@
 
 export * from "./copyToClipboard"
 export * from "./isServerError"
+export * from "./dateTime"
 export * from "./fetch"
 export * from "./fromFetch"
 export * from "./questdb"