frontend: persist chart timeframe

persisting chart's timeframe using the AppContext so the
timeframe doesn't reset when we navigate through the app.

Author: shonsirsha

frontends/web/src/contexts/AppContext.tsx

@@ -17,6 +17,7 @@
 import { Dispatch, SetStateAction, createContext } from 'react';
 
 export type TSidebarStatus = '' | 'forceHidden'
+export type TChartDisplay = 'week' | 'month' | 'year' | 'all';
 
 type AppContextProps = {
     activeSidebar: boolean;
@@ -25,11 +26,13 @@ type AppContextProps = {
     hideAmounts: boolean;
     nativeLocale: string;
     sidebarStatus: string;
+    chartDisplay: TChartDisplay;
     setActiveSidebar: Dispatch<SetStateAction<boolean>>;
     setGuideExists: Dispatch<SetStateAction<boolean>>;
     setGuideShown: Dispatch<SetStateAction<boolean>>;
     setSidebarStatus: Dispatch<SetStateAction<TSidebarStatus>>;
     setHideAmounts: Dispatch<SetStateAction<boolean>>;
+    setChartDisplay: Dispatch<SetStateAction<TChartDisplay>>;
     toggleGuide: () => void;
     toggleHideAmounts: () => void;
     toggleSidebar: () => void;

frontends/web/src/contexts/AppProvider.tsx

@@ -16,11 +16,12 @@
 
 import { ReactNode, useEffect, useState } from 'react';
 import { getConfig, setConfig } from '../utils/config';
-import { AppContext, TSidebarStatus } from './AppContext';
+import { AppContext } from './AppContext';
 import { useLoad } from '../hooks/api';
 import { useDefault } from '../hooks/default';
 import { getNativeLocale } from '../api/nativelocale';
 import { i18nextFormat } from '../i18n/utils';
+import type { TChartDisplay, TSidebarStatus } from './AppContext';
 
 type TProps = {
     children: ReactNode;
@@ -33,6 +34,7 @@ export const AppProvider = ({ children }: TProps) => {
   const [hideAmounts, setHideAmounts] = useState(false);
   const [activeSidebar, setActiveSidebar] = useState(false);
   const [sidebarStatus, setSidebarStatus] = useState<TSidebarStatus>('');
+  const [chartDisplay, setChartDisplay] = useState<TChartDisplay>('all');
 
   const toggleGuide = () => {
     setConfig({ frontend: { guideShown: !guideShown } });
@@ -73,13 +75,15 @@ export const AppProvider = ({ children }: TProps) => {
         hideAmounts,
         nativeLocale,
         sidebarStatus,
+        chartDisplay,
         setActiveSidebar,
         setGuideShown,
         setGuideExists,
         setSidebarStatus,
         setHideAmounts,
+        setChartDisplay,
         toggleHideAmounts,
-        toggleSidebar
+        toggleSidebar,
       }}>
       {children}
     </AppContext.Provider>

frontends/web/src/routes/account/summary/chart.tsx

@@ -23,8 +23,9 @@ import { Amount } from '../../../components/amount/amount';
 import { PercentageDiff } from './percentage-diff';
 import { Filters } from './filters';
 import { getDarkmode } from '../../../components/darkmode/darkmode';
-import { TChartDisplay, TChartFiltersProps } from './types';
+import { TChartFiltersProps } from './types';
 import { DefaultCurrencyRotator } from '../../../components/rates/rates';
+import { AppContext } from '../../../contexts/AppContext';
 import styles from './chart.module.css';
 
 export interface FormattedLineData extends LineData {
@@ -40,7 +41,6 @@ type ChartProps = {
 };
 
 type State = {
-  display: TChartDisplay;
   source: 'daily' | 'hourly';
   difference?: number;
   diffSince?: string;
@@ -58,6 +58,8 @@ type FormattedData = {
   [key: number]: string;
 }
 class Chart extends Component<Props, State> {
+  static contextType = AppContext;
+  context!: React.ContextType<typeof AppContext>;
   private ref = createRef<HTMLDivElement>();
   private refToolTip = createRef<HTMLSpanElement>();
   private chart?: IChartApi;
@@ -81,7 +83,6 @@ class Chart extends Component<Props, State> {
   };
 
   public readonly state: State = {
-    display: 'all',
     source: 'daily',
     toolTipVisible: false,
     toolTipValue: undefined,
@@ -230,7 +231,7 @@ class Chart extends Component<Props, State> {
         lineColor: 'rgba(94, 148, 192, 1)',
         crosshairMarkerRadius: 6,
       });
-      switch (this.state.display) {
+      switch (this.context.chartDisplay) {
       case 'week':
         this.displayWeek();
         break;
@@ -241,8 +242,17 @@ class Chart extends Component<Props, State> {
         this.displayYear();
         break;
       }
-      this.lineSeries.setData(this.props.data.chartDataDaily as ChartData);
-      this.setFormattedData(this.props.data.chartDataDaily as ChartData);
+      const isChartDisplayWeekly = this.context.chartDisplay === 'week';
+      this.lineSeries.setData(
+        (isChartDisplayWeekly ?
+          this.props.data.chartDataHourly :
+          this.props.data.chartDataDaily) as ChartData
+      );
+      this.setFormattedData(
+        (isChartDisplayWeekly ?
+          this.props.data.chartDataHourly :
+          this.props.data.chartDataDaily) as ChartData
+      );
       this.chart.timeScale().subscribeVisibleLogicalRangeChange(this.calculateChange);
       this.chart.subscribeCrosshairMove(this.handleCrosshair);
       this.chart.timeScale().fitContent();
@@ -312,8 +322,9 @@ class Chart extends Component<Props, State> {
       this.setFormattedData(this.props.data.chartDataHourly || []);
       this.chart.applyOptions({ timeScale: { timeVisible: true } });
     }
+    this.context.setChartDisplay('week');
     this.setState(
-      { display: 'week', source: 'hourly' },
+      { source: 'hourly' },
       () => {
         if (!this.chart) {
           return;
@@ -334,8 +345,9 @@ class Chart extends Component<Props, State> {
       this.setFormattedData(this.props.data.chartDataDaily || []);
       this.chart.applyOptions({ timeScale: { timeVisible: false } });
     }
+    this.context.setChartDisplay('month');
     this.setState(
-      { display: 'month', source: 'daily' },
+      { source: 'daily' },
       () => {
         if (!this.chart) {
           return;
@@ -356,8 +368,9 @@ class Chart extends Component<Props, State> {
       this.setFormattedData(this.props.data.chartDataDaily);
       this.chart.applyOptions({ timeScale: { timeVisible: false } });
     }
+    this.context.setChartDisplay('year');
     this.setState(
-      { display: 'year', source: 'daily' },
+      { source: 'daily' },
       () => {
         if (!this.chart) {
           return;
@@ -378,8 +391,9 @@ class Chart extends Component<Props, State> {
       this.setFormattedData(this.props.data.chartDataDaily);
       this.chart.applyOptions({ timeScale: { timeVisible: false } });
     }
+    this.context.setChartDisplay('all');
     this.setState(
-      { display: 'all', source: 'daily' },
+      { source: 'daily' },
       () => {
         if (!this.chart) {
           return;
@@ -498,7 +512,6 @@ class Chart extends Component<Props, State> {
     const {
       difference,
       diffSince,
-      display,
       toolTipVisible,
       toolTipValue,
       toolTipTop,
@@ -513,7 +526,7 @@ class Chart extends Component<Props, State> {
     const disableWeeklyFilters = !hasHourlyData || chartDataMissing;
     const showMobileTotalValue = toolTipVisible && !!toolTipValue && isMobile;
     const chartFiltersProps = {
-      display,
+      display: this.context.chartDisplay,
       disableFilters,
       disableWeeklyFilters,
       onDisplayWeek: this.displayWeek,

frontends/web/src/routes/account/summary/types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-export type TChartDisplay = 'week' | 'month' | 'year' | 'all';
+import type { TChartDisplay } from '../../../contexts/AppContext';
 
 export type TChartFiltersProps = {
   display: TChartDisplay