Merge pull request #51 from uja-dev-practices/feature/manual-evaluator

refactor: improve layout and styling in MembershipEvaluator component
This commit is contained in:
Alexis López
2026-04-30 14:17:46 +02:00
committed by GitHub
2 changed files with 10 additions and 10 deletions
@@ -86,7 +86,7 @@ const Step3FinalGraph = memo(({ data, criterionName }) => {
{/* Evaluador Manual */} {/* Evaluador Manual */}
{isReady && sortedResults.length > 0 && ( {isReady && sortedResults.length > 0 && (
<div className="mt-4 pt-4 border-t border-slate-100 relative z-10"> <div className="mt-4 pt-4 border-t border-slate-100 relative z-10 pl-[60px]">
<MembershipEvaluator sortedResults={sortedResults} /> <MembershipEvaluator sortedResults={sortedResults} />
</div> </div>
)} )}
@@ -19,27 +19,27 @@ const filterActive = (results) =>
const TermResult = ({ result }) => { const TermResult = ({ result }) => {
const uncertainty = result.isType2 ? Math.abs(result.upper - result.lower) : 0; const uncertainty = result.isType2 ? Math.abs(result.upper - result.lower) : 0;
const isSimple = !result.isType2 || uncertainty < 0.001; const isSimple = !result.isType2 || uncertainty <= 0.001;
const displayY = result.isType2 ? result.upper : result.y; const displayY = result.isType2 ? result.upper : result.y;
return ( return (
<div className="flex flex-col text-xs font-medium bg-slate-50 px-3 py-2 rounded-xl border border-slate-100 shrink-0"> <div className="flex flex-col text-xs font-medium bg-slate-50 p-2.5 rounded-xl border border-slate-100">
<span className="uppercase font-black mb-1 tracking-wide leading-none" style={{ color: result.color }}> <span className="uppercase font-black mb-1.5" style={{ color: result.color }}>
{result.term} {result.term}
</span> </span>
{isSimple ? ( {isSimple ? (
<span className="text-slate-700 flex justify-between gap-2"> <span className="text-slate-600 flex justify-between gap-4">
Pertenencia: <b>{displayY.toFixed(3)}</b> Pertenencia: <b>{displayY.toFixed(3)}</b>
</span> </span>
) : ( ) : (
<> <>
<span className="text-slate-600 flex justify-between gap-2"> <span className="text-slate-600 flex justify-between gap-4">
Inferior: <b>{result.lower.toFixed(3)}</b> Mínimo: <b>{result.lower.toFixed(3)}</b>
</span> </span>
<span className="text-slate-600 flex justify-between gap-2 mt-0.5"> <span className="text-slate-600 flex justify-between gap-4 mt-0.5">
Superior: <b>{result.upper.toFixed(3)}</b> Máximo: <b>{result.upper.toFixed(3)}</b>
</span> </span>
<span className="text-slate-500 font-bold mt-1 pt-1 border-t border-slate-200 flex justify-between gap-2"> <span className="text-slate-500 font-bold mt-1.5 pt-1.5 border-t border-slate-200 flex justify-between gap-4">
Incertidumbre: <span>{uncertainty.toFixed(3)}</span> Incertidumbre: <span>{uncertainty.toFixed(3)}</span>
</span> </span>
</> </>