Show axis units on blur plot

src/App.jsx

@@ -52,17 +52,17 @@ const formatAperture = (value) => {
 const getAxisConfig = (plotType) => {
   switch (plotType) {
     case PlotTypes.DISTANCE:
-      return { label: 'Scene distance (m)', accessor: (point) => point.sceneDistance };
+      return { label: 'Scene distance (m)', accessor: (point) => point.sceneDistance, ticksuffix: ' m' };
     case PlotTypes.ZOOMED:
-      return { label: 'Scene distance (m)', accessor: (point) => point.sceneDistance };
+      return { label: 'Scene distance (m)', accessor: (point) => point.sceneDistance, ticksuffix: ' m' };
     case PlotTypes.NORMALIZED:
       return { label: 'Scene distance ÷ subject distance', accessor: (point) => point.normalizedDistance };
     case PlotTypes.SEPARATION:
-      return { label: 'Focus-relative distance (m)', accessor: (point) => point.focusOffset };
+      return { label: 'Focus-relative distance (m)', accessor: (point) => point.focusOffset, ticksuffix: ' m' };
     case PlotTypes.DIOPTER:
-      return { label: 'Diopter difference (1/m)', accessor: (point) => point.diopterDifference };
+      return { label: 'Diopter difference (1/m)', accessor: (point) => point.diopterDifference, ticksuffix: ' 1/m' };
     default:
-      return { label: 'Scene distance (m)', accessor: (point) => point.sceneDistance };
+      return { label: 'Scene distance (m)', accessor: (point) => point.sceneDistance, ticksuffix: ' m' };
   }
 };
 
@@ -144,6 +144,7 @@ const PlotSection = ({ lensCurves, plotType, setPlotType }) => {
                 title: axisConfig.label,
                 gridcolor: 'rgba(148, 163, 184, 0.2)',
                 zerolinecolor: 'rgba(148, 163, 184, 0.4)',
+                ...(axisConfig.ticksuffix ? { ticksuffix: axisConfig.ticksuffix } : {}),
               },
               yaxis: {
                 title: 'Blur radius (% of sensor diagonal)',
@@ -151,6 +152,7 @@ const PlotSection = ({ lensCurves, plotType, setPlotType }) => {
                 gridcolor: 'rgba(148, 163, 184, 0.2)',
                 zerolinecolor: 'rgba(148, 163, 184, 0.4)',
                 range: [0, maxY * 1.1],
+                ticksuffix: ' %',
               },
             }}
             useResizeHandler