Hdm 27 (#2641)

* feat(dashboard/ui-2024): number formatting changed for custom chart tooltips

* fix(dashboard/ui-2024): box shadow and border radius changed for graph containers

* feat(dashboard/ui-2024): new moonbeam icon added and all icons aligned in leaderboard and search select inputs

* feat(dashboard/ui-2024): custom tooltip component created and implemented to work on mobile

* feat(dashboard/ui-2024): date pickers range changes

* feat(dashboard/ui-2024): mobile design adjusted for SelectNetwork component

* feat(dashboard/ui-2024): copied tooltip proper display

* fix(dashboard/ui-2024): help icons color for TransactionsTableHead component changed

* fix(dashboard/ui-2024): code cleanup for area chart

* fix(dashboard/ui-2024): build problem resolved

* fix(dashboard/ui-2024): remove fixed columns width in Leaderboard

* feat(dashboard-ui-2024): decrease min column width

* fix(dashboard/ui-2024/leaderboard): fix table width on desktop

* fix(dashboard/ui-2024): separate charts data queries

---------

Co-authored-by: michal rozek <[email protected]>

Author: KacperKoza343

packages/apps/dashboard/ui-2024/src/components/Home/GraphSwiper.tsx

@@ -4,9 +4,18 @@ import SmallGraph from '@components/Home/SmallGraph';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import { useGraphPageChartData } from '@services/api/use-graph-page-chart-data';
+import { useGraphPageChartParams } from '@utils/hooks/use-graph-page-chart-params';
+import { useEffect } from 'react';
 
 const GraphSwiper = () => {
 	const { data } = useGraphPageChartData();
+	const { revertToInitialParams } = useGraphPageChartParams();
+
+	useEffect(() => {
+		revertToInitialParams();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	const transactionHistoryData = (data || []).map(
 		({ totalTransactionCount, date }) => ({
 			value: totalTransactionCount,

packages/apps/dashboard/ui-2024/src/pages/Graph/Graph.tsx

@@ -2,11 +2,12 @@ import { AreaChart } from '@components/Charts';
 import Tabs from '@mui/material/Tabs';
 import TabPanel from '@mui/lab/TabPanel';
 import Tab from '@mui/material/Tab';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import TabContext from '@mui/lab/TabContext';
 import Typography from '@mui/material/Typography';
 import PageWrapper from '@components/PageWrapper';
 import Breadcrumbs from '@components/Breadcrumbs';
+import { useGraphPageChartParams } from '@utils/hooks/use-graph-page-chart-params';
 
 type graphType = 'bucketed';
 
@@ -15,6 +16,12 @@ const Graph = () => {
 	const handleGraphTypeChange = (_: unknown, newValue: graphType) => {
 		setGraphType(newValue);
 	};
+	const { revertToInitialParams } = useGraphPageChartParams();
+
+	useEffect(() => {
+		revertToInitialParams();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
 
 	return (
 		<PageWrapper displaySearchBar className="standard-background">

packages/apps/dashboard/ui-2024/src/utils/hooks/use-graph-page-chart-params.tsx

@@ -50,13 +50,16 @@ export interface GraphPageChartParams {
 	setFromDate: (fromDate: Dayjs | null) => void;
 	setToDate: (toDate: Dayjs | null) => void;
 	setEffectiveFromAllTimeDate: (date: Dayjs) => void;
+	revertToInitialParams: () => void;
 }
 
+const INITIAL_RANGE_PARAMS = {
+	from: oneWeekAgo,
+	to: dayjs(),
+};
+
 export const useGraphPageChartParams = create<GraphPageChartParams>((set) => ({
-	dateRangeParams: {
-		from: oneWeekAgo,
-		to: dayjs(),
-	},
+	dateRangeParams: INITIAL_RANGE_PARAMS,
 	selectedTimePeriod: '1W',
 	setFromDate: (fromDate: Dayjs | null) => {
 		if (!fromDate) {
@@ -105,4 +108,10 @@ export const useGraphPageChartParams = create<GraphPageChartParams>((set) => ({
 			effectiveFromAllTimeDate: date,
 		}));
 	},
+	revertToInitialParams: () => {
+		set((state) => ({
+			...state,
+			dateRangeParams: INITIAL_RANGE_PARAMS,
+		}));
+	},
 }));