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

fix: tick labels respond to width of the graph (#6741)

Browse Source 
* fix: tick labels respond to width of the graph

* fix: add description to new useeffect

Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

---------

Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>
This commit is contained in:
Brendan Wong 2023-06-14 12:30:22 -04:00 committed by GitHub
parent 2c5ea67ada
commit 45acf421b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -258,7 +258,24 @@ export function PriceChart({ width, height, prices: originalPrices, timePeriod }
setDisplayPrice(endingPrice)
}, [setCrosshair, setDisplayPrice, endingPrice])
// Resets the crosshair when the time period is changed, to avoid stale UI
useEffect(() => {
setCrosshair(null)
}, [timePeriod])
const [tickFormatter, crosshairDateFormatter, ticks] = tickFormat(timePeriod, locale)
//max ticks based on screen size
const maxTicks = Math.floor(width / 100)
function calculateTicks(ticks: NumberValue[]) {
const newTicks = []
const tickSpacing = Math.floor(ticks.length / maxTicks)
for (let i = 1; i < ticks.length; i += tickSpacing) {
newTicks.push(ticks[i])
}
return newTicks
}
const updatedTicks = maxTicks > 0 ? (ticks.length > maxTicks ? calculateTicks(ticks) : ticks) : []
const delta = calculateDelta(startingPrice.value, displayPrice.value)
const formattedDelta = formatDelta(delta)
const arrow = getDeltaArrow(delta)
@ -327,7 +344,7 @@ export function PriceChart({ width, height, prices: originalPrices, timePeriod }
tickLength={4}
hideTicks={true}
tickTransform="translate(0 -5)"
tickValues={ticks}
tickValues={updatedTicks}
top={graphHeight - 1}
tickLabelProps={() => ({
fill: theme.textSecondary,