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

refactor: improve layout and styling in MembershipEvaluator component

Browse Source 
- Adjust padding in Step3FinalGraph for better alignment.
- Update styles in TermResult for consistent spacing and improved readability.
- Change labels from "Inferior" and "Superior" to "Mínimo" and "Máximo" for clarity.
This commit is contained in:
Alexis
2026-04-30 14:16:51 +02:00
parent 47905d15c2
commit 36da717836
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/editor/Step3FinalGraph.jsx
+1 -1
View File
@@ -86,7 +86,7 @@ const Step3FinalGraph = memo(({ data, criterionName }) => {
{/* Evaluador Manual */}
{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} />
</div>
)}
frontend/src/components/editor/finalGraph/MembershipEvaluator.jsx
+9 -9
View File
@@ -19,27 +19,27 @@ const filterActive = (results) =>
const TermResult = ({ result }) => {
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;
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">
<span className="uppercase font-black mb-1 tracking-wide leading-none" style={{ color: result.color }}>
<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.5" style={{ color: result.color }}>
{result.term}
</span>
{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>
</span>
) : (
<>
<span className="text-slate-600 flex justify-between gap-2">
Inferior: <b>{result.lower.toFixed(3)}</b>
<span className="text-slate-600 flex justify-between gap-4">
Mínimo: <b>{result.lower.toFixed(3)}</b>
</span>
<span className="text-slate-600 flex justify-between gap-2 mt-0.5">
Superior: <b>{result.upper.toFixed(3)}</b>
<span className="text-slate-600 flex justify-between gap-4 mt-0.5">
Máximo: <b>{result.upper.toFixed(3)}</b>
</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>
</span>
</>