ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: modify chart axis to to match crosshairs in year view (#4547)

Browse Source 
* fix

* simplify

* refactor

* move logic to monthTickFormatter

* time to date string
This commit is contained in:
lynn 2022-08-31 11:31:33 -04:00 committed by GitHub
parent 272b030b89
commit e733113963
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Tokens/TokenDetails/PriceChart.tsx
View File

@ -18,7 +18,7 @@ import {
dayHourFormatter,
hourFormatter,
monthDayFormatter,
monthFormatter,
monthTickFormatter,
monthYearDayFormatter,
monthYearFormatter,
weekFormatter,
@ -140,7 +140,7 @@ function tickFormat(
case TimePeriod.MONTH:
return [monthDayFormatter(locale), dayHourFormatter(locale), getTicks(startTimestamp, endTimestamp)]
case TimePeriod.YEAR:
return [monthFormatter(locale), monthYearDayFormatter(locale), getTicks(startTimestamp, endTimestamp)]
return [monthTickFormatter(locale), monthYearDayFormatter(locale), getTicks(startTimestamp, endTimestamp)]
case TimePeriod.ALL:
return [monthYearFormatter(locale), monthYearDayFormatter(locale), getTicks(startTimestamp, endTimestamp)]
}

15
src/utils/formatChartTimes.ts
View File

@ -41,8 +41,19 @@ export const monthYearDayFormatter = (locale: string) => (timestamp: NumberValue
day: 'numeric',
})
export const monthFormatter = (locale: string) => (timestamp: NumberValue) =>
createDateFormatter(timestamp, locale, { month: 'long' })
export const monthTickFormatter = (locale: string) => (timestamp: NumberValue) => {
let date = new Date(timestamp.valueOf() * 1000)
// when a tick maps to a date not on the first of the month, modify the tick to the closest
// first of month date. For example, Dec 31 becomes Jan 1, and Dec 5 becomes Dec 1.
if (date.getDate() !== 1) {
date =
date.getDate() >= 15
? new Date(date.getFullYear(), date.getMonth() + 1, 1)
: new Date(date.getFullYear(), date.getMonth(), 1)
}
return date.toLocaleDateString(locale, { month: 'long' })
}
export const weekFormatter = (locale: string) => (timestamp: NumberValue) =>
createDateFormatter(timestamp, locale, { weekday: 'long' })