fix: ballot & resutls bugs

components/MeritProfile.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { GradeResultInterface, MeritProfileInterface } from '@services/type';
-import { getMajorityGrade } from '@services/majorityJudgment';
+import {useEffect, useLayoutEffect, useRef, useState} from 'react';
+import {GradeResultInterface, MeritProfileInterface} from '@services/type';
+import {getMajorityGrade} from '@services/majorityJudgment';
 
 interface ParamsInterface {
   numVotes: number;
@@ -14,7 +14,7 @@ interface GradeBarInterface {
   params: ParamsInterface;
 }
 
-const GradeBar = ({ index, grade, size, params }: GradeBarInterface) => {
+const GradeBar = ({index, grade, size, params}: GradeBarInterface) => {
   const width = `${size * 100}%`;
   const textWidth = Math.floor(100 * size);
 
@@ -59,14 +59,14 @@ const DashedMedian = () => {
   return (
     <div
       className="position-relative d-flex justify-content-center"
-      style={{ top: '60px', height: '50px' }}
+      style={{top: '60px', height: '50px'}}
     >
       <div className="border h-100 border-1 border-dark border-opacity-75 border-dashed"></div>
     </div>
   );
 };
 
-const MajorityGrade = ({ grade, left }) => {
+const MajorityGrade = ({grade, left}) => {
   // const spanRef = useRef<HTMLDivElement>();
   const spanRef = useRef<HTMLDivElement>();
 
@@ -81,7 +81,7 @@ const MajorityGrade = ({ grade, left }) => {
 
   return (
     <div
-      style={{ left: `calc(${left * 100}% - ${width / 2}px)` }}
+      style={{left: `calc(${left * 100}% - ${width / 2}px)`}}
       className="position-relative"
     >
       <div
@@ -121,8 +121,8 @@ interface MeritProfileBarInterface {
   grades: Array<GradeResultInterface>;
 }
 
-const MeritProfileBar = ({ profile, grades }: MeritProfileBarInterface) => {
-  const gradesByValue: { [key: number]: GradeResultInterface } = {};
+const MeritProfileBar = ({profile, grades}: MeritProfileBarInterface) => {
+  const gradesByValue: {[key: number]: GradeResultInterface} = {};
   grades.forEach((g) => (gradesByValue[g.value] = g));
 
   const numVotes = Object.values(profile).reduce((a, b) => a + b, 0);
@@ -167,32 +167,37 @@ const MeritProfileBar = ({ profile, grades }: MeritProfileBarInterface) => {
         left={proponentWidth + normalized[majorityValue] / 2}
       />
       <div className="d-flex">
-        <div
-          className={`d-flex border border-${
-            proponentMajority ? 2 : 1
-          } border-success`}
-          style={{ flexBasis: `${proponentWidth * 100}%` }}
-        >
-          {values
-            .filter((v) => v > majorityGrade.value)
-            .map((v) => {
-              const index = values.indexOf(v);
-              const size =
-                proponentWidth < 1e-3 ? 0 : normalized[index] / proponentWidth;
-              return (
-                <GradeBar
-                  index={index}
-                  params={params}
-                  grade={gradesByValue[v]}
-                  key={index}
-                  size={size}
-                />
-              );
-            })}
-        </div>
+        {proponentWidth > 1e-5 ? (
+          <div
+            className={`d-flex border border-${proponentMajority ? 2 : 1
+              } border-success`}
+            style={{flexBasis: `${proponentWidth * 100}%`}}
+          >
+            {values
+              .filter((v) => v > majorityGrade.value)
+              .map((v) => {
+                const index = values.indexOf(v);
+                const size =
+                  proponentWidth < 1e-3 ? 0 : normalized[index] / proponentWidth;
+                return (
+                  <GradeBar
+                    index={index}
+                    params={params}
+                    grade={gradesByValue[v]}
+                    key={index}
+                    size={size}
+                  />
+                );
+              })}
+          </div>) : (
+          <div
+            className="d-flex"
+            style={{flexBasis: `${proponentWidth * 100}%`}}
+          >
+          </div>)}
         <div
           className="border border-2 border-primary"
-          style={{ flexBasis: `${normalized[majorityValue] * 100}%` }}
+          style={{flexBasis: `${normalized[majorityValue] * 100}%`}}
         >
           {values
             .filter((v) => v === majorityGrade.value)
@@ -209,29 +214,32 @@ const MeritProfileBar = ({ profile, grades }: MeritProfileBarInterface) => {
               );
             })}
         </div>
-        <div
-          className={`d-flex border border-${
-            proponentMajority ? 1 : 2
-          } border-danger`}
-          style={{ flexBasis: `${opponentWidth * 100}%` }}
-        >
-          {values
-            .filter((v) => v < majorityGrade.value)
-            .map((v) => {
-              const index = values.indexOf(v);
-              const size =
-                opponentWidth < 1e-3 ? 0 : normalized[index] / opponentWidth;
-              return (
-                <GradeBar
-                  index={index}
-                  params={params}
-                  grade={gradesByValue[v]}
-                  key={index}
-                  size={size}
-                />
-              );
-            })}
-        </div>
+        {opponentWidth > 1e-5 ? (
+          <div
+            className={`d-flex border border-${proponentMajority ? 1 : 2
+              } border-danger`}
+            style={{flexBasis: `${opponentWidth * 100}%`}}
+          >
+            {values
+              .filter((v) => v < majorityGrade.value)
+              .map((v) => {
+                const index = values.indexOf(v);
+                const size =
+                  opponentWidth < 1e-3 ? 0 : normalized[index] / opponentWidth;
+                return (
+                  <GradeBar
+                    index={index}
+                    params={params}
+                    grade={gradesByValue[v]}
+                    key={index}
+                    size={size}
+                  />
+                );
+              })}
+          </div>) : (
+          <div className="d-flex" style={{flexBasis: `${opponentWidth * 100}%`}} >
+          </div>
+        )}
       </div>
       {/* <div className='median dash'> </div> */}
     </>

components/ballot/BallotDesktop.tsx

@@ -1,10 +1,10 @@
-import { useState } from 'react';
-import { Container } from 'reactstrap';
-import { useBallot } from '@services/BallotContext';
+import {useState} from 'react';
+import {Container} from 'reactstrap';
+import {useBallot} from '@services/BallotContext';
 import CandidateCard from '@components/ballot/CandidateCard';
 import TitleBar from '@components/ballot/TitleBar';
 import GradeInput from '@components/ballot/GradeInput';
-import { CandidatePayload } from '@services/api';
+import {CandidatePayload} from '@services/api';
 import CandidateModal from '@components/CandidateModalGet';
 
 const BallotDesktop = () => {
@@ -19,7 +19,7 @@ const BallotDesktop = () => {
       <TitleBar election={ballot.election} />
       <Container
         className="w-100 h-100 d-flex flex-column justify-content-center align-items-center"
-        style={{ maxWidth: '1050px' }}
+        style={{maxWidth: '1050px'}}
       >
         <h1 className="mb-5">{ballot.election.name}</h1>
         {ballot.election.candidates.map((candidate, candidateId) => {
@@ -33,7 +33,9 @@ const BallotDesktop = () => {
                 candidate={candidate}
               />
               <div className="d-flex">
-                {ballot.election.grades.map((_, gradeId) => {
+                {ballot.election.grades.sort(
+                  (a, b) => b.value - a.value
+                ).map((_, gradeId) => {
                   console.assert(gradeId < numGrades);
                   return (
                     <GradeInput

components/ballot/BallotMobile.tsx

@@ -56,7 +56,7 @@ const BallotMobile = () => {
                   <div className="ms-2" onClick={() => moveRight(true)}><FontAwesomeIcon color="#0A004C" icon={faChevronRight} /></div> : null}
               </div>
               <div className="d-flex mt-2 flex-column">
-                {ballot.election.grades.map((_, gradeId) => {
+                {ballot.election.grades.sort((a, b) => b.value - a.value).map((_, gradeId) => {
                   console.assert(gradeId < numGrades);
                   return (
                     <GradeInput

components/ballot/CandidateCard.tsx

@@ -23,7 +23,8 @@ const CandidateCard = ({candidate, onClick}: CandidateCardInterface) => {
     <div className="d-flex lh-sm flex-column justify-content-center ps-3">
       <span className="text-black fs-5 m-0 ">{candidate.name}</span>
       <br />
-      <span className="text-muted fs-6 m-0 fw-normal">{t("vote.more-details")}</span>
+      { //      <span className="text-muted fs-6 m-0 fw-normal">{t("vote.more-details")}</span>
+      }
     </div>
   </div>)
 }

components/ballot/GradeInput.tsx

@@ -32,7 +32,7 @@ const GradeInput = ({gradeId, candidateId}: GradeInputInterface) => {
   };
 
   const active = ballot.votes.some(b => b.gradeId === gradeId && b.candidateId === candidateId)
-  const color = active ? getGradeColor(gradeId, numGrades) : '#C3BFD8';
+  const color = active ? getGradeColor(grade.value, numGrades) : '#C3BFD8';
 
   return (<>
     <div