feat(Analysis): add scroll position save for analysis view

src/components/Analysis/AnalysisView.tsx

@@ -40,6 +40,45 @@ const AnalysisView: React.FC = () => {
   const query = new URLSearchParams(search)
   const paramToken = query.get('token')
 
+  // Scroll handling
+  const app = document.querySelector('.app-content')
+  const [scrollPosition, setScrollPosition] = useState(0)
+  /**
+   * Handle Desktop scroll
+   */
+  const handleWindowScroll = () => {
+    const position = window.pageYOffset
+    setScrollPosition(position)
+  }
+  /**
+   * Handle Mobile scroll
+   */
+  const handleScroll = () => {
+    if (app) {
+      const position = app.scrollTop
+      setScrollPosition(position)
+    }
+  }
+
+  /**
+   * Set view according to saved positon
+   */
+  const setView = () => {
+    app && app.scrollTo(0, scrollPosition)
+    window.scrollTo(0, scrollPosition)
+  }
+
+  // Set listners for scroll
+  useEffect(() => {
+    window.addEventListener('scroll', handleWindowScroll, { passive: true })
+    app && app.addEventListener('scroll', handleScroll, { passive: true })
+
+    return () => {
+      window.removeEventListener('scroll', handleWindowScroll)
+      app && app.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
   useEffect(() => {
     const updateAnalysisNotification = () => {
       if (analysisNotification) {
@@ -106,7 +145,7 @@ const AnalysisView: React.FC = () => {
         />
       </Header>
       <Content height={headerHeight}>
-        <MonthlyAnalysis analysisDate={currentAnalysisDate} />
+        <MonthlyAnalysis analysisDate={currentAnalysisDate} setView={setView} />
       </Content>
     </>
   )

src/components/Analysis/MonthlyAnalysis.tsx

@@ -26,10 +26,12 @@ import TotalAnalysisChart from './TotalAnalysisChart'
 
 interface MonthlyAnalysisProps {
   analysisDate: DateTime
+  setView?: Function
 }
 
 const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
   analysisDate,
+  setView,
 }: MonthlyAnalysisProps) => {
   const { t } = useI18n()
   const client = useClient()
@@ -99,6 +101,8 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
           )
         }
         setIsLoaded(true)
+        // Set view to saved scroll position
+        setView && setView()
       }
     }
     populateData()

src/components/Analysis/TotalAnalysisChart.tsx

@@ -60,7 +60,12 @@ const TotalAnalysisChart: React.FC<TotalAnalysisChartProps> = ({
     }
   }, [analysisDate, client, fluidTypes])
   return (
-    <div className="totalAnalysis-container">
+    <div
+      className="totalAnalysis-container"
+      style={{
+        minHeight: radius + 100,
+      }}
+    >
       {fluidTypes.length >= 2 && (
         <div className="text-24-normal title">{t('analysis_pie.total')}</div>
       )}