Remove hours from charts tooltip (#384)

* Remove hours from charts tooltip

* Reduce earnings chart days prediction points

* Remove formatDateTick util

* Reducte earning chart xNumTicks

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({

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,

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,

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 {