From bdebc69fefb47d9a5100b5db80b27fff24231efc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emil=20Ma=C5=82a=C5=84czak?= <53233583+EmilMalanczak@users.noreply.github.com> Date: Fri, 25 Oct 2024 11:51:06 +0200 Subject: [PATCH] Remove hours from charts tooltip (#384) * Remove hours from charts tooltip * Reduce earnings chart days prediction points * Remove formatDateTick util * Reducte earning chart xNumTicks --- .../useMyEarningsInfo/calculatePredictions.ts | 9 +++++++-- .../savings-charts/components/MyEarningsChart.tsx | 5 ++--- .../savings-rate-chart/SavingsRateChart.tsx | 8 +------- packages/app/src/ui/charts/utils.ts | 14 +------------- 4 files changed, 11 insertions(+), 25 deletions(-) diff --git a/packages/app/src/domain/savings-charts/useMyEarningsInfo/calculatePredictions.ts b/packages/app/src/domain/savings-charts/useMyEarningsInfo/calculatePredictions.ts index 129b05b28..c87bd98ef 100644 --- a/packages/app/src/domain/savings-charts/useMyEarningsInfo/calculatePredictions.ts +++ b/packages/app/src/domain/savings-charts/useMyEarningsInfo/calculatePredictions.ts @@ -31,6 +31,7 @@ export function calculatePredictions({ shares, timestamp, savingsInfo, + step: 1, }) case '1M': @@ -39,16 +40,18 @@ export function calculatePredictions({ shares, timestamp, savingsInfo, + step: 1, }) case '1Y': case 'All': return calculatePredictionsIncomeByDays({ // setting upper bounds due to visible performance problems - days: Math.max(Math.min(optimalPredictionsLength, 270), 90), + days: Math.max(Math.min(optimalPredictionsLength, 360), 90), shares, timestamp, savingsInfo, + step: 3, }) default: @@ -61,14 +64,16 @@ function calculatePredictionsIncomeByDays({ savingsInfo, shares, timestamp, + step, }: { days: number savingsInfo: SavingsInfo shares: NormalizedUnitNumber timestamp: number + step: number }): MyEarningsInfoItem[] { // @note For today we have only current balance (with slight delay) but we need also balance for next data-point - return range(0, days).map((day) => { + return range(0, days, step).map((day) => { const dayTimestamp = timestamp + day * SECONDS_PER_DAY const dayIncomePrediction = savingsInfo.predictAssetsAmount({ diff --git a/packages/app/src/features/savings/components/savings-charts/components/MyEarningsChart.tsx b/packages/app/src/features/savings/components/savings-charts/components/MyEarningsChart.tsx index 09a85fd30..bb8c5b029 100644 --- a/packages/app/src/features/savings/components/savings-charts/components/MyEarningsChart.tsx +++ b/packages/app/src/features/savings/components/savings-charts/components/MyEarningsChart.tsx @@ -16,7 +16,7 @@ import { USD_MOCK_TOKEN } from '@/domain/types/Token' import { ChartTooltipContent } from '@/ui/charts/ChartTooltipContent' import { colors as colorsPreset } from '@/ui/charts/colors' import { Margins, POINT_RADIUS, defaultMargins } from '@/ui/charts/defaults' -import { formatDateTick, formatTooltipDate, formatUSDTicks, getVerticalDomainWithPadding } from '@/ui/charts/utils' +import { formatTooltipDate, formatUSDTicks, getVerticalDomainWithPadding } from '@/ui/charts/utils' export interface ChartDataPoint { balance: NormalizedUnitNumber @@ -42,7 +42,7 @@ function MyEarningsChart({ height, width, margins = defaultMargins, - xAxisNumTicks = 5, + xAxisNumTicks = 3, yAxisNumTicks = 5, showTooltip, hideTooltip, @@ -152,7 +152,6 @@ function MyEarningsChart({ top={innerHeight - margins.bottom / 4} scale={xValueScale} strokeWidth={0} - tickFormat={formatDateTick} numTicks={xAxisNumTicks} tickLabelProps={() => ({ fill: colors.axisTickLabel, diff --git a/packages/app/src/features/savings/components/savings-charts/components/savings-rate-chart/SavingsRateChart.tsx b/packages/app/src/features/savings/components/savings-charts/components/savings-rate-chart/SavingsRateChart.tsx index 28e3da09c..8d24ce68e 100644 --- a/packages/app/src/features/savings/components/savings-charts/components/savings-rate-chart/SavingsRateChart.tsx +++ b/packages/app/src/features/savings/components/savings-charts/components/savings-rate-chart/SavingsRateChart.tsx @@ -16,12 +16,7 @@ import { Percentage } from '@/domain/types/NumericValues' import { ChartTooltipContent } from '@/ui/charts/ChartTooltipContent' import { colors as colorsPreset } from '@/ui/charts/colors' import { Margins, POINT_RADIUS, defaultMargins } from '@/ui/charts/defaults' -import { - formatDateTick, - formatPercentageTick, - formatTooltipDate, - getVerticalDomainWithPadding, -} from '@/ui/charts/utils' +import { formatPercentageTick, formatTooltipDate, getVerticalDomainWithPadding } from '@/ui/charts/utils' export interface ChartDataPoint { date: Date @@ -139,7 +134,6 @@ function SavingsRateChart({ top={innerHeight - margins.bottom / 4} scale={xValueScale} strokeWidth={0} - tickFormat={formatDateTick} numTicks={xAxisNumTicks} tickLabelProps={() => ({ fill: colors.axisTickLabel, diff --git a/packages/app/src/ui/charts/utils.ts b/packages/app/src/ui/charts/utils.ts index 753c3808d..78037f56e 100644 --- a/packages/app/src/ui/charts/utils.ts +++ b/packages/app/src/ui/charts/utils.ts @@ -7,19 +7,7 @@ export function formatTooltipDate(date: Date): string { const month = String(date.getMonth() + 1).padStart(2, '0') // Months are zero-based const year = date.getFullYear() - let hours = date.getHours() - const minutes = String(date.getMinutes()).padStart(2, '0') - - const ampm = hours >= 12 ? 'PM' : 'AM' - hours = hours % 12 - hours = hours ? hours : 12 // the hour '0' should be '12' - const hoursString = String(hours).padStart(2, '0') - - return `${day}.${month}.${year} ${hoursString}:${minutes} ${ampm}` -} - -export function formatDateTick(date: any): string { - return date.toLocaleDateString('en-US', { day: '2-digit', month: 'short' }) + return `${day}.${month}.${year}` } export function formatPercentageTick(value: { valueOf(): number }): string {