-
Notifications
You must be signed in to change notification settings - Fork 415
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add price axis to charts (#3304)
* feat: ✨ improve chart rendering * feat: ✨ add chart right price scale * feat: 💄 improve char tooltip format * feat: ✨ improve price axis formatting * feat: ✨ add horizontal line for crosshair * feat: ✨ remove crosshair labels from chart * feat: ✨ add hover date belove chart header price * feat: ✨ display hover date only on actual hover * fix: 🐛 fix utc date formatting
- Loading branch information
1 parent
f8461a1
commit 2ca9996
Showing
7 changed files
with
159 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 41 additions & 0 deletions
41
packages/web/components/chart/light-weight-charts/utils.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import { Dec } from "@keplr-wallet/unit"; | ||
import { isBusinessDay, Time } from "lightweight-charts"; | ||
|
||
import { formatPretty, getPriceExtendedFormatOptions } from "~/utils/formatter"; | ||
import { getDecimalCount } from "~/utils/number"; | ||
|
||
export const priceFormatter = (price: number) => { | ||
const minimumDecimals = 2; | ||
const maxDecimals = Math.max(getDecimalCount(price), minimumDecimals); | ||
|
||
const priceDec = new Dec(price); | ||
|
||
const formatOpts = getPriceExtendedFormatOptions(priceDec); | ||
|
||
return formatPretty(priceDec, { | ||
maxDecimals, | ||
currency: "USD", | ||
style: "currency", | ||
...formatOpts, | ||
}); | ||
}; | ||
|
||
export const timepointToString = ( | ||
timePoint: Time, | ||
formatOptions: Intl.DateTimeFormatOptions, | ||
locale?: string | ||
) => { | ||
let date = new Date(); | ||
|
||
if (typeof timePoint === "string") { | ||
date = new Date(timePoint); | ||
} else if (!isBusinessDay(timePoint)) { | ||
date = new Date((timePoint as number) * 1000); | ||
} else { | ||
date = new Date( | ||
Date.UTC(timePoint.year, timePoint.month - 1, timePoint.day) | ||
); | ||
} | ||
|
||
return date.toLocaleString(locale, formatOptions); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters