Merge pull request #229 from ArtemKolodko/refactor_chart_filter

Refactor chart filter

src/pages/ChartsPage/DailyChartPage.tsx

@@ -7,7 +7,6 @@ import {MetricsDailyItem} from "../../types";
 import {
     getDetailedChartOptions,
     getChartData,
-    getLimitByFilterOption,
     downloadMetricsCSV
 } from './utils'
 import {ChartFilter, ChartOption} from "./ChartFilter";
@@ -64,6 +63,19 @@ export interface DailyChartPageProps {
     renderMinValue: (value: string, date: string) => string
 }
 
+const chartItemFilter = (item: MetricsDailyItem, option: ChartOption) => {
+    const date = dayjs(item.date)
+    const current = dayjs()
+    switch(option) {
+        case ChartOption.month: return current.diff(date, 'month') <= 1
+        case ChartOption.month3: return current.diff(date, 'month') <= 3
+        case ChartOption.year: return current.diff(date, 'month') <= 12
+        case ChartOption.ytd: return current.year() === date.year()
+        default:
+            return true
+    }
+}
+
 export const DailyChartPage = (props: DailyChartPageProps) => {
     const themeMode = useThemeMode();
 
@@ -76,10 +88,9 @@ export const DailyChartPage = (props: DailyChartPageProps) => {
     const [maxValue, setMaxValue] = useState<MetricsDailyItem>({value: '0', date: ''})
 
     const applyFilter = (cachedData: MetricsDailyItem[]) => {
-        const limit = getLimitByFilterOption(filterOption)
-        const data = cachedData.slice(-limit)
+        const data = cachedData.filter((item) => chartItemFilter(item, filterOption))
         const sortedData = [...data].sort((a, b) => +a.value - +b.value)
-        setItems(cachedData.slice(-limit))
+        setItems(data)
         setMinValue(sortedData[0])
         setMaxValue(sortedData[sortedData.length - 1])
     }

src/pages/ChartsPage/utils.ts

@@ -161,24 +161,6 @@ export const enrichResponse = (items: MetricsDailyItem[]) => {
     }))
 }
 
-export const getLimitByFilterOption = (option: ChartOption) => {
-    switch(option) {
-        case ChartOption.month: return 30
-        case ChartOption.month3: return 30 * 3
-        case ChartOption.year: {
-            return 365
-        }
-        case ChartOption.ytd: {
-            const date1 = dayjs()
-            const date2 = dayjs().startOf('year')
-            return date1.diff(date2, 'day')
-        }
-        case ChartOption.all: return 2000
-        default:
-            return 1000
-    }
-}
-
 const downloadBlob = (content: any, filename: string) => {
     const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
     const url = URL.createObjectURL(blob);

src/pages/TopStatsPage/Transaction.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react'
-import {Box, Spinner, Tip, Text} from "grommet";
+import {Box, Spinner, Text, Tip} from "grommet";
 import {TopTable} from "./CommonTopTable";
 import {getTopMetricsByType} from "../../api/client";
 import {MetricsTopItem, MetricsTopPeriod, MetricsTopType} from "../../types";
@@ -73,7 +73,7 @@ export const TransactionTopStats = () => {
     }, [period])
 
     const dateFrom = oneSenders.length > 0 ? dayjs(oneSenders[0].updatedAt).subtract(period, 'day') : ''
-    const dateTo = oneSenders.length > 0 ? dayjs(oneSenders[0].updatedAt): ''
+    const dateTo = oneSenders.length > 0 ? dayjs(oneSenders[0].updatedAt).subtract(1, 'day'): ''
 
     return <Box gap={'16px'}>
         <Box direction={'row'} align={'center'} pad={'8px'} justify={'between'}>
@@ -93,7 +93,14 @@ export const TransactionTopStats = () => {
                         dropProps={{ align: { bottom: "top" }}}
                         content={<TipContent showArrow={true} message={`Last update: ${dateTo.format('DD MMM HH:mm:ss')}`} />}
                     >
+                        <Box>
+                            {period === MetricsTopPeriod.d1 &&
+                                <Text size={'small'}>{dateTo.format('DD MMM')}</Text>
+                            }
+                            {period !== MetricsTopPeriod.d1 &&
                                 <Text size={'small'}>{dateFrom.format('DD MMM')} - {dateTo.format('DD MMM')}</Text>
+                            }
+                        </Box>
                     </Tip>
                 </Box>
             }