Allow showing Y axis

packages/share/pages/share/[result].tsx

@@ -162,6 +162,7 @@ const Result = ({ ogData }: { ogData?: string }) => {
 
             <ResultChart
               chartDownSampleThreshold={1000}
+              showYAxis={true}
               item={item}
               className="mt-4"
             />

packages/ui/src/Settings/Settings.tsx

@@ -31,6 +31,7 @@ import ThemeToggle from 'Settings/ThemeToggle/ThemeToggle';
 import StickySearchToggle from 'Settings/StickySearchToggle/StickySearchToggle';
 import TrendlineToggle from 'Settings/TrendlineToggle/TrendlineToggle';
 import BarChartToggle from 'Settings/BarChartToggle/BarChartToggle';
+import YAxisToggle from 'Settings/YAxisToggle/YAxisToggle';
 import CollectResponseDataToggle from 'Settings/CollectResponseDataToggle/CollectResponseDataToggle';
 import CollectResponseErrorsToggle from 'Settings/CollectResponseErrorsToggle/CollectResponseErrorsToggle';
 import { useToastStore } from 'toasts/state/toastStore';
@@ -205,6 +206,7 @@ export const Settings = ({ dismissModal }: { dismissModal: () => void }) => {
                 Chart visualization settings
               </Typography>
 
+              <YAxisToggle />
               <TrendlineToggle />
               <BarChartToggle />
             </FormControl>

packages/ui/src/Settings/YAxisToggle/YAxisToggle.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useContext, useState } from 'react';
+
+import { FormControlLabel, FormGroup } from '@mui/material';
+
+import { GlobalStore } from 'app/globalContext';
+import { EDbStores } from 'storage/EDbStores';
+import { SK } from 'storage/storageKeys';
+import { getDb } from 'storage/storage';
+import { useStoredPreferences } from 'shared/hooks/useStoredPreferences';
+
+import AppleSwitch from 'shared/components/AppleSwitch/AppleSwitch';
+
+const YAxisToggle = () => {
+  const globalStore = useContext(GlobalStore);
+
+  const [preferencesApplied, setPreferencesApplied] = useState(false);
+  const { preferences, preferencesLoaded } = useStoredPreferences();
+
+  useEffect(() => {
+    const resultDb = getDb(EDbStores.MAIN_STORE_NAME);
+    resultDb.setItem(
+      SK.PREFERENCES.SHOW_Y_AXIS,
+      globalStore.appSettings.showYAxis
+    );
+  }, [globalStore.appSettings.showYAxis]);
+
+  useEffect(() => {
+    if (preferencesApplied || !preferencesLoaded) {
+      return;
+    }
+
+    if (preferences) {
+      if (preferences.showYAxis) {
+        globalStore.appSettings.setShowYAxis(preferences.showYAxis);
+      }
+    }
+
+    setPreferencesApplied(true);
+  }, [preferences, preferencesApplied, preferencesLoaded, globalStore]);
+
+  return (
+    <GlobalStore.Consumer>
+      {({ appSettings }) => (
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <AppleSwitch
+                onChange={appSettings.toggleShowYAxis}
+                checked={appSettings.showYAxis}
+              />
+            }
+            label="Show chart labels (Y-Axis)"
+          />
+        </FormGroup>
+      )}
+    </GlobalStore.Consumer>
+  );
+};
+
+export default YAxisToggle;

packages/ui/src/app/globalContext.ts

@@ -103,6 +103,10 @@ export const DEFAULT_GLOBAL_STORE = {
     setShowBarCharts: (showBarCharts: boolean) => {},
     toggleShowBarCharts() {},
 
+    showYAxis: false,
+    setShowYAxis: (showYAxis: boolean) => {},
+    toggleShowYAxis() {},
+
     chartDownSampleThreshold: 500,
     setChartDownSampleThreshold: (chartDownSampleThreshold: number) => {},
 

packages/ui/src/results/Result/ResultContent/ResultContent.tsx

@@ -45,6 +45,7 @@ const ResultContent = ({
 
   const showTrendline = globalStore.appSettings.showTrendline;
   const showBarCharts = globalStore.appSettings.showBarCharts;
+  const showYAxis = globalStore.appSettings.showYAxis;
   const chartDownSampleThreshold =
     globalStore.appSettings.chartDownSampleThreshold;
 
@@ -189,6 +190,7 @@ const ResultContent = ({
                     item={item}
                     showTrendline={showTrendline}
                     showBarCharts={showBarCharts}
+                    showYAxis={showYAxis}
                     chartDownSampleThreshold={chartDownSampleThreshold}
                     className="mt-4"
                   />

packages/ui/src/results/ResultChart/ResultChart.tsx

@@ -8,12 +8,14 @@ export const ResultChart = ({
   item,
   showTrendline,
   showBarCharts,
+  showYAxis = false,
   chartDownSampleThreshold,
   className
 }: {
   item: ClobbrUIListItem;
   showTrendline?: boolean;
   showBarCharts?: boolean;
+  showYAxis?: boolean;
   chartDownSampleThreshold: number;
   className?: string;
 }) => {
@@ -106,7 +108,7 @@ export const ResultChart = ({
           downsampleThreshold={chartDownSampleThreshold}
           suggestedYMax={paddedDuration}
           responsive={true}
-          hideYAxis={true}
+          hideYAxis={!showYAxis}
           hideXAxis={true}
         />
       )}

packages/ui/src/results/ResultHistory/ResultHistoryChart/GenericChart.tsx

@@ -116,7 +116,8 @@ export const GenericChart = ({
   downsampleThreshold = 1000,
   numberOfDownSamplePoints = 1000,
   colorMap,
-  bgColorMap
+  bgColorMap,
+  xAxisType
 }: {
   data: ChartData<'line' | 'bar'>;
   width?: number | string;
@@ -129,14 +130,15 @@ export const GenericChart = ({
   numberOfDownSamplePoints?: number;
   colorMap?: { [key: number]: string };
   bgColorMap?: { [key: number]: string };
+  xAxisType?: 'category' | 'linear';
 }) => {
-  console.log({ downsampleThreshold, numberOfDownSamplePoints });
   const chartWidth = width || 300;
   const chartHeight = height || 100;
   const gradientColorMap = colorMap || DEFAULT_COLOR_MAP;
   const gradientBgColorMap = bgColorMap || DEFAULT_BG_COLOR_MAP;
   const threshold = downsampleThreshold;
   const samples = numberOfDownSamplePoints;
+  const scaleXType = xAxisType || 'linear';
 
   const chartRef = useRef<ChartJS>(null);
   const [chartData, setChartData] = useState<ChartData<'line' | 'bar'>>({
@@ -207,19 +209,47 @@ export const GenericChart = ({
                         size: 1
                       }
                     },
-                    type: 'linear'
+                    type: scaleXType
                   }
                 }
-              : {}),
+              : {
+                  x: {
+                    type: scaleXType
+                  }
+                }),
             ...(hideYAxis
               ? {
                   y: {
-                    display: false,
+                    display: false
+                  }
+                }
+              : {
+                  y: {
+                    display: true,
+                    position: 'right',
+                    ticks: {
+                      color: 'rgba(160,160,160,0.5)', // Color of the tick labels
+                      font: {
+                        size: 12, // Font size of the tick labels
+                        weight: 'normal'
+                      },
+                      stepSize: 100
+                    },
+
+                    grid: {
+                      // display: false,
+                      color: 'rgba(160,160,160,0.2)', // Color of the tick labels
+                      drawBorder: false,
+                      drawOnChartArea: true,
+                      borderDash: [3, 3]
+                    },
+                    title: {
+                      display: false
+                    },
                     suggestedMin: 50,
                     ...(suggestedYMax ? { suggestedMax: suggestedYMax } : {})
                   }
-                }
-              : {})
+                })
           },
           indexAxis: 'x',
           plugins: {

packages/ui/src/shared/components/PreferenceLoader/PreferenceLoader.tsx

@@ -41,6 +41,10 @@ const PreferenceLoader = () => {
       if (isBoolean(preferences.showBarCharts)) {
         globalStore.appSettings.setShowBarCharts(preferences.showBarCharts);
       }
+
+      if (isBoolean(preferences.showYAxis)) {
+        globalStore.appSettings.setShowYAxis(preferences.showYAxis);
+      }
     }
 
     setPreferencesApplied(true);

packages/ui/src/shared/hooks/useStoredPreferences.ts

@@ -11,6 +11,7 @@ export type Preferences = {
   maxIterations?: number;
   showTrendline?: boolean;
   showBarCharts?: boolean;
+  showYAxis?: boolean;
   collectResponseData?: boolean;
   collectResponseErrors?: boolean;
 };
@@ -28,6 +29,7 @@ export const useStoredPreferences = () => {
     const showBarCharts = await resultDb.getItem(
       SK.PREFERENCES.SHOW_BAR_CHARTS
     );
+    const showYAxis = await resultDb.getItem(SK.PREFERENCES.SHOW_Y_AXIS);
     const collectResponseData = await resultDb.getItem(
       SK.PREFERENCES.COLLECT_RESPONSE_DATA
     );
@@ -41,6 +43,7 @@ export const useStoredPreferences = () => {
       maxIterations,
       showTrendline,
       showBarCharts,
+      showYAxis,
       collectResponseData,
       collectResponseErrors
     };
@@ -58,6 +61,7 @@ export const useStoredPreferences = () => {
         maxIterations: storedPreferences.value.maxIterations,
         showTrendline: storedPreferences.value.showTrendline,
         showBarCharts: storedPreferences.value.showBarCharts,
+        showYAxis: storedPreferences.value.showYAxis,
         collectResponseData: storedPreferences.value.collectResponseData,
         collectResponseErrors: storedPreferences.value.collectResponseErrors
       });

packages/ui/src/state/useAppSettingsState.ts

@@ -15,6 +15,9 @@ export const useAppSettingsState = ({
   const [showBarCharts, setShowBarCharts] = useState(
     initialState.appSettings.showBarCharts
   );
+  const [showYAxis, setShowYAxis] = useState(
+    initialState.appSettings.showYAxis
+  );
   const [chartDownSampleThreshold, setChartDownSampleThreshold] = useState(
     initialState.appSettings.chartDownSampleThreshold
   );
@@ -37,6 +40,10 @@ export const useAppSettingsState = ({
     setShowBarCharts(!showBarCharts);
   };
 
+  const toggleShowYAxis = () => {
+    setShowYAxis(!showYAxis);
+  };
+
   const toggleCollectResponseData = () => {
     setCollectResponseData(!collectResponseData);
   };
@@ -61,6 +68,10 @@ export const useAppSettingsState = ({
     setShowBarCharts,
     toggleShowBarCharts,
 
+    showYAxis,
+    setShowYAxis,
+    toggleShowYAxis,
+
     chartDownSampleThreshold,
     setChartDownSampleThreshold,
 

packages/ui/src/storage/storageKeys.ts

@@ -11,6 +11,7 @@ export const SK = {
     MAX_ITERATIONS: 'preferences.maxIterations',
     SHOW_TRENDLINE: 'preferences.showTrendline',
     SHOW_BAR_CHARTS: 'preferences.showBarCharts',
+    SHOW_Y_AXIS: 'preferences.showYAxis',
     CHART_DOWNSAMPLE_THRESHOLD: 'preferences.chartDownSampleThreshold',
     COLLECT_RESPONSE_DATA: 'preferences.collectResponseData',
     COLLECT_RESPONSE_ERRORS: 'preferences.collectResponseErrors',