admin/DoC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: arreglar leyenda, utilizar colores importados desde config en step2 y step3

Browse Source
This commit is contained in:
Alexis
2026-03-27 13:47:55 +01:00
parent 89ebf99c7f
commit 46250af1eb
2 changed files with 114 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/editor/Step2FuzzyModeling.jsx
+26 -10
View File
@@ -1,11 +1,21 @@
import Chart from '../membershipFunction/Chart';
import Controls from '../membershipFunction/Controls';
import { CHART_COLORS } from '../../config';
const COLORS = ['#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#d946ef', '#06b6d4', '#8b5cf6', '#f43f5e', '#6366f1'];
export default function Step2FuzzyModeling({baseScale, mfDefinitions, selectedTerm, setSelectedTerm, updateCurrentMf, handleFinalSubmit, onBack, subscales, onOpenSubscale}) {
export default function Step2FuzzyModeling({
baseScale,
mfDefinitions,
selectedTerm,
setSelectedTerm,
updateCurrentMf,
handleFinalSubmit,
onBack,
subscales,
onOpenSubscale
}) {
const scaleKeys = Object.keys(baseScale);
const selectedColor = COLORS[scaleKeys.indexOf(selectedTerm) % COLORS.length] || '#2563eb';
const selectedColor = CHART_COLORS[scaleKeys.indexOf(selectedTerm) % CHART_COLORS.length] || '#2563eb';
return (
<div className="w-full bg-white p-6 rounded-2xl shadow-sm border border-slate-200 animate-fade-in relative overflow-visible">
@@ -17,11 +27,18 @@ export default function Step2FuzzyModeling({baseScale, mfDefinitions, selectedTe
<div className="flex flex-wrap justify-center gap-3 mb-6">
{scaleKeys.map((name, index) => {
const color = COLORS[index % COLORS.length];
const isSelected = selectedTerm === name;
const color = CHART_COLORS[index % CHART_COLORS.length];
return (
<button key={name} onClick={() => setSelectedTerm(name)} style={isSelected ? { backgroundColor: color, borderColor: color, color: '#fff' } : { borderColor: color, color: '#475569' }} className={`px-5 py-2 rounded-lg font-bold border-2 transition-all duration-300 flex flex-col items-center shadow-sm hover:shadow-md ${isSelected ? 'transform scale-105' : 'bg-white opacity-80 hover:opacity-100'}`}>
<span>{name}</span><span className="text-[10px] font-normal opacity-80">(X: {baseScale[name].toFixed(2)})</span>
<button
key={name}
onClick={() => setSelectedTerm(name)}
style={isSelected ? { backgroundColor: color, borderColor: color, color: '#fff' } : { borderColor: color, color: '#475569' }}
className={`px-5 py-2 rounded-lg font-bold border-2 transition-all duration-300 flex flex-col items-center shadow-sm hover:shadow-md ${isSelected ? 'transform scale-105' : 'bg-white opacity-80 hover:opacity-100'}`}
>
<span>{name}</span>
<span className="text-[10px] font-normal opacity-80">(X: {baseScale[name].toFixed(2)})</span>
</button>
);
})}
@@ -31,7 +48,7 @@ export default function Step2FuzzyModeling({baseScale, mfDefinitions, selectedTe
baseScale={baseScale}
mfDefinitions={mfDefinitions}
selectedTerm={selectedTerm}
colors={COLORS}
colors={CHART_COLORS}
/>
<Controls
@@ -46,11 +63,10 @@ export default function Step2FuzzyModeling({baseScale, mfDefinitions, selectedTe
/>
<div className="w-full mt-8 flex justify-center">
<button onClick={handleFinalSubmit} className="px-10 py-3 bg-slate-900 text-white text-lg font-bold rounded-xl shadow-md hover:bg-black hover:shadow-lg transition-all">
<button onClick={handleFinalSubmit} className="px-10 py-3 bg-slate-900 text-white text-lg font-bold rounded-xl shadow-md hover:bg-slate-800 transition-colors">
Guardar Todo el Espectro Difuso
</button>
</div>
</div>
);
}