Merge pull request #1647 from vinu-deriv/Vinu/DTRA-2367/trackjs-error

fix: fixed trackJs error while setting chart-layout in localStorage

package.json

@@ -155,6 +155,7 @@
         "html2canvas": "^1.4.1",
         "lodash.debounce": "^4.0.8",
         "lodash.set": "^4.3.2",
+        "lz-string": "^1.5.0",
         "mobx": "^6.5.0",
         "mobx-react-lite": "^3.4.0",
         "moment": "^2.24.0",

src/store/ChartState.ts

@@ -11,6 +11,7 @@ import {
 import debounce from 'lodash.debounce';
 import { AuditDetailsForExpiredContract, ProposalOpenContract } from '@deriv/api-types';
 import { isDeepEqual } from 'src/utils/object';
+import LZString from 'lz-string';
 import MainStore from '.';
 import Theme from '../../sass/_themes.scss';
 import { STATE } from '../Constant';
@@ -461,16 +462,26 @@ class ChartState {
         const layoutData: TLayout = this.mainStore.view.getLayout();
         const id = this.mainStore.chart.chartId;
 
-        saveToLocalStorage(`chart-layout-${id}`, {
-            studyItems: layoutData.studyItems,
-            crosshair: layoutData.crosshair,
-            msPerPx: layoutData.msPerPx,
-        });
+        const layoutCompressedData = LZString.compress(
+            JSON.stringify({
+                studyItems: layoutData.studyItems,
+                crosshair: layoutData.crosshair,
+                msPerPx: layoutData.msPerPx,
+            })
+        );
+
+        saveToLocalStorage(`chart-layout-${id}`, layoutCompressedData);
     }
     // returns false if restoring layout fails
     restoreLayout() {
         const id = this.mainStore.chart.chartId;
-        const layout: TLayout = createObjectFromLocalStorage(`chart-layout-${id}`);
+        const compressedLayout = createObjectFromLocalStorage(`chart-layout-${id}`);
+        let layout: TLayout | null = null;
+        try {
+            layout = JSON.parse(LZString.decompress(compressedLayout ?? ''));
+        } catch (e) {
+            layout = compressedLayout;
+        }
 
         if (!layout) {
             this.clearLayout();
@@ -491,12 +502,15 @@ class ChartState {
         if (!this.chartStore.chartId) return;
         const layoutData: TLayout = this.mainStore.view.getLayout();
         const id = this.mainStore.chart.chartId;
+        const layoutCompressedData = LZString.compress(
+            JSON.stringify({
+                crosshair: layoutData.crosshair,
+                studyItems: layoutData.studyItems,
+                msPerPx: layoutData.msPerPx,
+            })
+        );
 
-        saveToLocalStorage(`chart-layout-${id}`, {
-            crosshair: layoutData.crosshair,
-            studyItems: layoutData.studyItems,
-            msPerPx: layoutData.msPerPx,
-        });
+        saveToLocalStorage(`chart-layout-${id}`, layoutCompressedData);
     }
 
     cleanChart() {