refactor: componentizar la gráfica y sliders del modo avanzado

2026-03-25 13:56:53 +01:00
parent 3977e11ffb
commit 04a84e0f36
3 changed files with 150 additions and 218 deletions
@@ -0,0 +1,50 @@
+import React from 'react';
+import { ComposedChart, Line, XAxis, YAxis, CartesianGrid, ReferenceArea, ReferenceLine, ResponsiveContainer, Tooltip } from 'recharts';
+
+export default function MembershipFunctionChart({ baseScale, mfDefinitions, selectedTerm, colors }) {
+  const scaleKeys = Object.keys(baseScale);
+
+  return (
+    <div className="w-full bg-slate-50/50 rounded-2xl border border-slate-200 p-4 mb-10">
+      <ResponsiveContainer width="99%" height={450}>
+        <ComposedChart margin={{ top: 30, right: 30, left: 20, bottom: 20 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+          <XAxis type="number" dataKey="x" domain={[0, 1]} ticks={[0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]} tick={{ fill: '#475569', fontWeight: 600 }} />
+          <YAxis domain={[0, 1]} tick={{ fill: '#475569' }} />
+          <Tooltip formatter={(value) => typeof value === 'number' ? value.toFixed(2) : value} />
+
+          {scaleKeys.map((name, index) => {
+            const val = baseScale[name];
+            const mf = mfDefinitions[name];
+            if (!mf) return null;
+            
+            const color = colors[index % colors.length];
+            const isSelected = selectedTerm === name;
+            
+            const trapezeData = [
+              { x: mf.supportStart, y: 0 },
+              { x: mf.coreStart, y: 1 },
+              { x: mf.coreEnd, y: 1 },
+              { x: mf.supportEnd, y: 0 },
+            ];
+
+            return (
+              <React.Fragment key={`mf-${name}`}>
+                <ReferenceLine x={val} stroke={color} strokeDasharray="4 4" strokeWidth={isSelected ? 2 : 1} label={{ position: 'top', value: name, fill: color, fontWeight: isSelected ? '900' : 'normal' }} />
+                
+                <ReferenceArea x1={mf.supportStart} x2={mf.supportEnd} fill={color} fillOpacity={isSelected ? 0.3 : 0.05} />
+                <ReferenceArea x1={mf.coreStart} x2={mf.coreEnd} fill={color} fillOpacity={isSelected ? 0.6 : 0.15} />
+
+                <Line 
+                  data={trapezeData} dataKey="y" type="linear" stroke={color} strokeWidth={isSelected ? 4 : 2} 
+                  dot={isSelected ? { r: 6, fill: color, stroke: '#fff', strokeWidth: 2 } : false} 
+                  activeDot={false} isAnimationActive={false} 
+                />
+              </React.Fragment>
+            );
+          })}
+        </ComposedChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
@@ -0,0 +1,63 @@
+import React from 'react';
+
+export default function MembershipFunctionControls({ selectedTerm, currentMf, selectedColor, baseScale, updateCurrentMf }) {
+  if (!selectedTerm || !currentMf) return null;
+
+  const scaleKeys = Object.keys(baseScale);
+  const selectedIndex = scaleKeys.indexOf(selectedTerm);
+  
+  let minBound = 0;
+  let maxBound = 1;
+
+  if (selectedIndex > 0) {
+    minBound = baseScale[scaleKeys[selectedIndex - 1]];
+  }
+  if (selectedIndex >= 0 && selectedIndex < scaleKeys.length - 1) {
+    maxBound = baseScale[scaleKeys[selectedIndex + 1]];
+  }
+
+  return (
+    <div className="bg-white p-8 rounded-2xl border border-slate-200 shadow-lg relative overflow-hidden">
+      <div className="absolute top-0 left-0 w-full h-2" style={{ backgroundColor: selectedColor }}></div>
+      <h3 className="text-2xl font-bold text-slate-800 mb-6 flex items-center gap-3">
+        Ajustando franjas para: <span style={{ color: selectedColor }}>"{selectedTerm}"</span>
+      </h3>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+        
+        <div className="space-y-6">
+          <div>
+            <label className="flex justify-between text-sm font-bold text-slate-600 mb-2">
+              <span>Inicio del Núcleo</span><span style={{ color: selectedColor }}>{currentMf.coreStart.toFixed(3)}</span>
+            </label>
+            <input type="range" min={minBound} max={maxBound} step="0.001" value={currentMf.coreStart} onChange={(e) => updateCurrentMf('coreStart', e.target.value)} className="w-full cursor-pointer" style={{ accentColor: selectedColor }} />
+          </div>
+          
+          <div>
+            <label className="flex justify-between text-sm font-bold text-slate-600 mb-2">
+              <span>Inicio del Soporte (Límite: {minBound.toFixed(2)})</span><span style={{ color: selectedColor }}>{currentMf.supportStart.toFixed(3)}</span>
+            </label>
+            <input type="range" min={minBound} max={maxBound} step="0.001" value={currentMf.supportStart} onChange={(e) => updateCurrentMf('supportStart', e.target.value)} className="w-full cursor-pointer" style={{ accentColor: selectedColor, opacity: 0.7 }} />
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          <div>
+            <label className="flex justify-between text-sm font-bold text-slate-600 mb-2">
+              <span>Fin del Núcleo</span><span style={{ color: selectedColor }}>{currentMf.coreEnd.toFixed(3)}</span>
+            </label>
+            <input type="range" min={minBound} max={maxBound} step="0.001" value={currentMf.coreEnd} onChange={(e) => updateCurrentMf('coreEnd', e.target.value)} className="w-full cursor-pointer" style={{ accentColor: selectedColor }} />
+          </div>
+
+          <div>
+            <label className="flex justify-between text-sm font-bold text-slate-600 mb-2">
+              <span>Fin del Soporte (Límite: {maxBound.toFixed(2)})</span><span style={{ color: selectedColor }}>{currentMf.supportEnd.toFixed(3)}</span>
+            </label>
+            <input type="range" min={minBound} max={maxBound} step="0.001" value={currentMf.supportEnd} onChange={(e) => updateCurrentMf('supportEnd', e.target.value)} className="w-full cursor-pointer" style={{ accentColor: selectedColor, opacity: 0.7 }} />
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+}