Update app main layout, diagram improvements

src/components/Settings.js

@@ -11,7 +11,7 @@ const Settings = ({
   onReset,
   t
 }) => {
-  const { showDayTimeXAxis, yAxisMin, yAxisMax, simulationDays, displayedDays } = uiSettings;
+  const { showDayTimeOnXAxis, yAxisMin, yAxisMax, simulationDays, displayedDays } = uiSettings;
 
   return (
     <div className="bg-white p-5 rounded-lg shadow-sm border">
@@ -20,12 +20,12 @@ const Settings = ({
         <div className="flex items-center">
           <input
             type="checkbox"
-            id="showDayTimeXAxis"
-            checked={showDayTimeXAxis}
-            onChange={e => onUpdateUiSetting('showDayTimeXAxis', e.target.checked)}
+            id="showDayTimeOnXAxis"
+            checked={showDayTimeOnXAxis}
+            onChange={e => onUpdateUiSetting('showDayTimeOnXAxis', e.target.checked)}
             className="h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-500"
           />
-          <label htmlFor="showDayTimeXAxis" className="ml-3 block font-medium text-gray-600">
+          <label htmlFor="showDayTimeOnXAxis" className="ml-3 block font-medium text-gray-600">
             {t.show24hTimeAxis}
           </label>
         </div>

src/components/SimulationChart.js

@@ -6,7 +6,7 @@ const SimulationChart = ({
   deviatedProfile,
   correctedProfile,
   chartView,
-  showDayTimeXAxis,
+  showDayTimeOnXAxis,
   therapeuticRange,
   simulationDays,
   displayedDays,
@@ -16,7 +16,17 @@ const SimulationChart = ({
 }) => {
   const totalHours = (parseInt(simulationDays, 10) || 3) * 24;
   const chartTicks = Array.from({length: Math.floor(totalHours / 6) + 1}, (_, i) => i * 6);
-  const chartWidthPercentage = Math.max(100, (totalHours / ( (parseInt(displayedDays, 10) || 2) * 24)) * 100);
+
+  // Generate ticks for 24h repeating axis (every 6 hours across all days)
+  const dayTimeTicks = React.useMemo(() => {
+    const ticks = [];
+    for (let i = 0; i <= totalHours; i += 6) {
+      ticks.push(i);
+    }
+    return ticks;
+  }, [totalHours]);
+
+  const chartWidthPercentage = Math.max(100, (totalHours / ( (parseInt(displayedDays, 10) || 2) * 25)) * 100);
 
   const chartDomain = React.useMemo(() => {
     const numMin = parseFloat(yAxisMin);
@@ -36,21 +46,10 @@ const SimulationChart = ({
               dataKey="timeHours"
               type="number"
               domain={[0, totalHours]}
-              ticks={chartTicks}
-              tickFormatter={(h) => `${h}${t.hour}`}
-              xAxisId="continuous"
+              ticks={showDayTimeOnXAxis ? dayTimeTicks : chartTicks}
+              tickFormatter={(h) => `${showDayTimeOnXAxis ? h % 24 : h}${t.hour}`}
+              xAxisId="hours"
             />
-            {showDayTimeXAxis && (
-              <XAxis
-                dataKey="timeHours"
-                type="number"
-                domain={[0, totalHours]}
-                ticks={chartTicks}
-                tickFormatter={(h) => `${h % 24}${t.hour}`}
-                xAxisId="daytime"
-                orientation="top"
-              />
-            )}
             <YAxis
               label={{ value: t.concentration, angle: -90, position: 'insideLeft', offset: -10 }}
               domain={chartDomain}
@@ -68,7 +67,7 @@ const SimulationChart = ({
                 label={{ value: t.min, position: 'insideTopLeft' }}
                 stroke="green"
                 strokeDasharray="3 3"
-                xAxisId="continuous"
+                xAxisId="hours"
               />
             )}
             {(chartView === 'damph' || chartView === 'both') && (
@@ -77,7 +76,7 @@ const SimulationChart = ({
                 label={{ value: t.max, position: 'insideTopLeft' }}
                 stroke="red"
                 strokeDasharray="3 3"
-                xAxisId="continuous"
+                xAxisId="hours"
               />
             )}
 
@@ -88,7 +87,7 @@ const SimulationChart = ({
                   x={day * 24}
                   stroke="#999"
                   strokeDasharray="5 5"
-                  xAxisId="continuous"
+                  xAxisId="hours"
                 />
               )
             ))}
@@ -102,7 +101,7 @@ const SimulationChart = ({
                 stroke="#3b82f6"
                 strokeWidth={2.5}
                 dot={false}
-                xAxisId="continuous"
+                xAxisId="hours"
               />
             )}
             {(chartView === 'ldx' || chartView === 'both') && (
@@ -115,7 +114,7 @@ const SimulationChart = ({
                 strokeWidth={2}
                 dot={false}
                 strokeDasharray="3 3"
-                xAxisId="continuous"
+                xAxisId="hours"
               />
             )}
 
@@ -129,7 +128,7 @@ const SimulationChart = ({
                 strokeWidth={2}
                 strokeDasharray="5 5"
                 dot={false}
-                xAxisId="continuous"
+                xAxisId="hours"
               />
             )}
             {deviatedProfile && (chartView === 'ldx' || chartView === 'both') && (
@@ -142,7 +141,7 @@ const SimulationChart = ({
                 strokeWidth={1.5}
                 strokeDasharray="5 5"
                 dot={false}
-                xAxisId="continuous"
+                xAxisId="hours"
               />
             )}
 
@@ -156,7 +155,7 @@ const SimulationChart = ({
                 strokeWidth={2.5}
                 strokeDasharray="3 7"
                 dot={false}
-                xAxisId="continuous"
+                xAxisId="hours"
               />
             )}
             {correctedProfile && (chartView === 'ldx' || chartView === 'both') && (
@@ -169,7 +168,7 @@ const SimulationChart = ({
                 strokeWidth={2}
                 strokeDasharray="3 7"
                 dot={false}
-                xAxisId="continuous"
+                xAxisId="hours"
               />
             )}
           </LineChart>