Update app main layout, diagram improvements

2025-11-24 19:09:51 +00:00
parent 84c88ea6d3
commit b215188a39
4 changed files with 63 additions and 62 deletions
--- a/src/App.js
+++ b/src/App.js
@@ -34,7 +34,7 @@ const MedPlanAssistant = () => {
  } = appState;

  const {
-    showDayTimeXAxis,
+    showDayTimeOnXAxis,
    chartView,
    yAxisMin,
    yAxisMax,
@@ -67,35 +67,10 @@ const MedPlanAssistant = () => {
          </div>
        </header>

-        <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
-          {/* Left Column - Controls */}
-          <div className="xl:col-span-1 space-y-6">
-            <DoseSchedule
-              doses={doses}
-              doseIncrement={doseIncrement}
-              onUpdateDoses={(newDoses) => updateState('doses', newDoses)}
-              t={t}
-            />
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">

-            <DeviationList
-              deviations={deviations}
-              doseIncrement={doseIncrement}
-              simulationDays={simulationDays}
-              onAddDeviation={addDeviation}
-              onRemoveDeviation={removeDeviation}
-              onDeviationChange={handleDeviationChange}
-              t={t}
-            />
-
-            <SuggestionPanel
-              suggestion={suggestion}
-              onApplySuggestion={applySuggestion}
-              t={t}
-            />
-          </div>
-
-          {/* Center Column - Chart */}
-          <div className="xl:col-span-1 bg-white p-5 rounded-lg shadow-sm border min-h-[600px] flex flex-col">
+          {/* Both Columns - Chart */}
+          <div className="xl:col-span-2 bg-white p-5 rounded-lg shadow-sm border min-h-[600px] flex flex-col">
            <div className="flex justify-center space-x-2 mb-4">
              <button
                onClick={() => updateUiSetting('chartView', 'damph')}
@@ -122,7 +97,7 @@ const MedPlanAssistant = () => {
              deviatedProfile={deviatedProfile}
              correctedProfile={correctedProfile}
              chartView={chartView}
-              showDayTimeXAxis={showDayTimeXAxis}
+              showDayTimeOnXAxis={showDayTimeOnXAxis}
              therapeuticRange={therapeuticRange}
              simulationDays={simulationDays}
              displayedDays={displayedDays}
@@ -132,6 +107,32 @@ const MedPlanAssistant = () => {
            />
          </div>

+          {/* Left Column - Controls */}
+          <div className="xl:col-span-1 space-y-6">
+            <DoseSchedule
+              doses={doses}
+              doseIncrement={doseIncrement}
+              onUpdateDoses={(newDoses) => updateState('doses', newDoses)}
+              t={t}
+            />
+
+            <DeviationList
+              deviations={deviations}
+              doseIncrement={doseIncrement}
+              simulationDays={simulationDays}
+              onAddDeviation={addDeviation}
+              onRemoveDeviation={removeDeviation}
+              onDeviationChange={handleDeviationChange}
+              t={t}
+            />
+
+            <SuggestionPanel
+              suggestion={suggestion}
+              onApplySuggestion={applySuggestion}
+              t={t}
+            />
+          </div>
+
         {/* Right Column - Settings */}
          <div className="xl:col-span-1 space-y-6">
            <Settings
@@ -145,6 +146,7 @@ const MedPlanAssistant = () => {
              t={t}
            />
          </div>
+
        </div>

        <footer className="mt-8 p-4 bg-gray-100 rounded-lg text-sm text-gray-700 border">
--- a/src/components/Settings.js
+++ b/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>
--- a/src/components/SimulationChart.js
+++ b/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>
--- a/src/constants/defaults.js
+++ b/src/constants/defaults.js
@@ -19,7 +19,7 @@ export const getDefaultState = () => ({
  therapeuticRange: { min: '10.5', max: '11.5' },
  doseIncrement: '2.5',
  uiSettings: {
-    showDayTimeXAxis: true,
+    showDayTimeOnXAxis: true,
    chartView: 'damph',
    yAxisMin: '',
    yAxisMax: '',