fix: Token chart - inconsistent x-axis time intervals (#4579)

* Use timeScale for x-axis

* Use d3 time intervals for ticks

* Drop slice for now, will handle differently

* scaleTime turned out to be unnecessary

* Use .nice() to help with tick spacing at start/end
Co-authored-by: gbugyis <greg@bugyis.com>

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -5,7 +5,7 @@ import { EventType } from '@visx/event/lib/types'
 import { GlyphCircle } from '@visx/glyph'
 import { Line } from '@visx/shape'
 import { filterTimeAtom } from 'components/Tokens/state'
-import { bisect, curveCardinal, NumberValue, scaleLinear } from 'd3'
+import { bisect, curveCardinal, NumberValue, scaleLinear, timeDay, timeHour, timeMinute, timeMonth } from 'd3'
 import { useTokenPriceQuery } from 'graphql/data/TokenPriceQuery'
 import { TimePeriod } from 'graphql/data/TopTokenQuery'
 import { useActiveLocale } from 'hooks/useActiveLocale'
@@ -117,35 +117,6 @@ const TimeButton = styled.button<{ active: boolean }>`
   }
 `
 
-function getTicks(startTimestamp: number, endTimestamp: number, numTicks = 5) {
-  return Array.from(
-    { length: numTicks },
-    (v, i) => endTimestamp - ((endTimestamp - startTimestamp) / (numTicks + 1)) * (i + 1)
-  )
-}
-
-function tickFormat(
-  startTimestamp: number,
-  endTimestamp: number,
-  timePeriod: TimePeriod,
-  locale: string
-): [TickFormatter<NumberValue>, (v: number) => string, number[]] {
-  switch (timePeriod) {
-    case TimePeriod.HOUR:
-      return [hourFormatter(locale), dayHourFormatter(locale), getTicks(startTimestamp, endTimestamp)]
-    case TimePeriod.DAY:
-      return [hourFormatter(locale), dayHourFormatter(locale), getTicks(startTimestamp, endTimestamp)]
-    case TimePeriod.WEEK:
-      return [weekFormatter(locale), dayHourFormatter(locale), getTicks(startTimestamp, endTimestamp, 6)]
-    case TimePeriod.MONTH:
-      return [monthDayFormatter(locale), dayHourFormatter(locale), getTicks(startTimestamp, endTimestamp)]
-    case TimePeriod.YEAR:
-      return [monthTickFormatter(locale), monthYearDayFormatter(locale), getTicks(startTimestamp, endTimestamp)]
-    case TimePeriod.ALL:
-      return [monthYearFormatter(locale), monthYearDayFormatter(locale), getTicks(startTimestamp, endTimestamp)]
-  }
-}
-
 const margin = { top: 100, bottom: 48, crosshair: 72 }
 const timeOptionsHeight = 44
 const crosshairDateOverhang = 80
@@ -181,10 +152,58 @@ export function PriceChart({ width, height, token }: PriceChartProps) {
 
   // Defining scales
   // x scale
-  const timeScale = scaleLinear().domain([startingPrice.timestamp, endingPrice.timestamp]).range([0, width])
+  const timeScale = scaleLinear().domain([startingPrice.timestamp, endingPrice.timestamp]).range([0, width]).nice()
   // y scale
   const rdScale = scaleLinear().domain(getPriceBounds(pricePoints)).range([graphInnerHeight, 0])
 
+  function tickFormat(
+    startTimestamp: number,
+    endTimestamp: number,
+    timePeriod: TimePeriod,
+    locale: string
+  ): [TickFormatter<NumberValue>, (v: number) => string, NumberValue[]] {
+    const startDate = new Date(startingPrice.timestamp.valueOf() * 1000)
+    const endDate = new Date(endingPrice.timestamp.valueOf() * 1000)
+    switch (timePeriod) {
+      case TimePeriod.HOUR:
+        return [
+          hourFormatter(locale),
+          dayHourFormatter(locale),
+          timeMinute.range(startDate, endDate, 10).map((x) => x.valueOf() / 1000),
+        ]
+      case TimePeriod.DAY:
+        return [
+          hourFormatter(locale),
+          dayHourFormatter(locale),
+          timeHour.range(startDate, endDate, 4).map((x) => x.valueOf() / 1000),
+        ]
+      case TimePeriod.WEEK:
+        return [
+          weekFormatter(locale),
+          dayHourFormatter(locale),
+          timeDay.range(startDate, endDate, 1).map((x) => x.valueOf() / 1000),
+        ]
+      case TimePeriod.MONTH:
+        return [
+          monthDayFormatter(locale),
+          dayHourFormatter(locale),
+          timeDay.range(startDate, endDate, 7).map((x) => x.valueOf() / 1000),
+        ]
+      case TimePeriod.YEAR:
+        return [
+          monthTickFormatter(locale),
+          monthYearDayFormatter(locale),
+          timeMonth.range(startDate, endDate, 2).map((x) => x.valueOf() / 1000),
+        ]
+      case TimePeriod.ALL:
+        return [
+          monthYearFormatter(locale),
+          monthYearDayFormatter(locale),
+          timeMonth.range(startDate, endDate, 3).map((x) => x.valueOf() / 1000),
+        ]
+    }
+  }
+
   const handleHover = useCallback(
     (event: Element | EventType) => {
       const { x } = localPoint(event) || { x: 0 }