fix: make token detail chart full width and x axis fixes (#4669)

* full chart width

* add offsets to x axis start and end times so they dont get cut off

* hide ticks

* reduce offsets

* undo

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -4,7 +4,17 @@ 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, timeDay, timeHour, timeMinute, timeMonth } from 'd3'
+import {
+  bisect,
+  curveCardinal,
+  NumberValue,
+  scaleLinear,
+  timeDay,
+  timeHour,
+  timeMinute,
+  timeMonth,
+  timeTicks,
+} from 'd3'
 import { TokenPrices$key } from 'graphql/data/__generated__/TokenPrices.graphql'
 import { useTokenPricesCached } from 'graphql/data/Token'
 import { PricePoint, TimePeriod } from 'graphql/data/Token'
@@ -116,7 +126,6 @@ const TimeButton = styled.button<{ active: boolean }>`
 
 const margin = { top: 100, bottom: 48, crosshair: 72 }
 const timeOptionsHeight = 44
-const crosshairDateOverhang = 80
 
 interface PriceChartProps {
   width: number
@@ -147,14 +156,13 @@ export function PriceChart({ width, height, tokenAddress, priceData }: PriceChar
   }, [prices, endingPrice])
   const [crosshair, setCrosshair] = useState<number | null>(null)
 
-  const graphWidth = width + crosshairDateOverhang
   const graphHeight = height - timeOptionsHeight > 0 ? height - timeOptionsHeight : 0
   const graphInnerHeight = graphHeight - margin.top - margin.bottom > 0 ? graphHeight - margin.top - margin.bottom : 0
 
   // Defining scales
   // x scale
   const timeScale = useMemo(
-    () => scaleLinear().domain([startingPrice.timestamp, endingPrice.timestamp]).range([0, width]).nice(),
+    () => scaleLinear().domain([startingPrice.timestamp, endingPrice.timestamp]).range([0, width]),
     [startingPrice, endingPrice, width]
   )
   // y scale
@@ -172,44 +180,47 @@ export function PriceChart({ width, height, tokenAddress, priceData }: PriceChar
     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)
+    const offsetTime = (endingPrice.timestamp.valueOf() - startingPrice.timestamp.valueOf()) / 24
+    const startDateWithOffset = new Date((startingPrice.timestamp.valueOf() + offsetTime) * 1000)
+    const endDateWithOffset = new Date((endingPrice.timestamp.valueOf() - offsetTime) * 1000)
     switch (timePeriod) {
       case TimePeriod.HOUR:
         return [
           hourFormatter(locale),
           dayHourFormatter(locale),
-          timeMinute.range(startDate, endDate, 10).map((x) => x.valueOf() / 1000),
+          (timeMinute.every(5) ?? timeMinute)
+            .range(startDateWithOffset, endDateWithOffset, 2)
+            .map((x) => x.valueOf() / 1000),
         ]
       case TimePeriod.DAY:
         return [
           hourFormatter(locale),
           dayHourFormatter(locale),
-          timeHour.range(startDate, endDate, 4).map((x) => x.valueOf() / 1000),
+          timeHour.range(startDateWithOffset, endDateWithOffset, 4).map((x) => x.valueOf() / 1000),
         ]
       case TimePeriod.WEEK:
         return [
           weekFormatter(locale),
           dayHourFormatter(locale),
-          timeDay.range(startDate, endDate, 1).map((x) => x.valueOf() / 1000),
+          timeDay.range(startDateWithOffset, endDateWithOffset, 1).map((x) => x.valueOf() / 1000),
         ]
       case TimePeriod.MONTH:
         return [
           monthDayFormatter(locale),
           dayHourFormatter(locale),
-          timeDay.range(startDate, endDate, 7).map((x) => x.valueOf() / 1000),
+          timeDay.range(startDateWithOffset, endDateWithOffset, 7).map((x) => x.valueOf() / 1000),
         ]
       case TimePeriod.YEAR:
         return [
           monthTickFormatter(locale),
           monthYearDayFormatter(locale),
-          timeMonth.range(startDate, endDate, 2).map((x) => x.valueOf() / 1000),
+          timeMonth.range(startDateWithOffset, endDateWithOffset, 2).map((x) => x.valueOf() / 1000),
         ]
       case TimePeriod.ALL:
         return [
           monthYearFormatter(locale),
           monthYearDayFormatter(locale),
-          timeMonth.range(startDate, endDate, 6).map((x) => x.valueOf() / 1000),
+          timeTicks(startDateWithOffset, endDateWithOffset, 6).map((x) => x.valueOf() / 1000),
         ]
     }
   }
@@ -282,7 +293,7 @@ export function PriceChart({ width, height, tokenAddress, priceData }: PriceChar
         marginTop={margin.top}
         curve={curveCardinal.tension(curveTension)}
         strokeWidth={2}
-        width={graphWidth}
+        width={width}
         height={graphHeight}
       >
         {crosshair !== null ? (
@@ -293,6 +304,7 @@ export function PriceChart({ width, height, tokenAddress, priceData }: PriceChar
               tickFormat={tickFormatter}
               tickStroke={theme.backgroundOutline}
               tickLength={4}
+              hideTicks={true}
               tickTransform={'translate(0 -5)'}
               tickValues={ticks}
               top={graphHeight - 1}