;
}
-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}
/>
-
- {values
- .filter((v) => v > majorityGrade.value)
- .map((v) => {
- const index = values.indexOf(v);
- const size =
- proponentWidth < 1e-3 ? 0 : normalized[index] / proponentWidth;
- return (
-
- );
- })}
-
+ {proponentWidth > 1e-5 ? (
+
+ {values
+ .filter((v) => v > majorityGrade.value)
+ .map((v) => {
+ const index = values.indexOf(v);
+ const size =
+ proponentWidth < 1e-3 ? 0 : normalized[index] / proponentWidth;
+ return (
+
+ );
+ })}
+
) : (
+
+
)}
{values
.filter((v) => v === majorityGrade.value)
@@ -209,29 +214,32 @@ const MeritProfileBar = ({ profile, grades }: MeritProfileBarInterface) => {
);
})}
-
- {values
- .filter((v) => v < majorityGrade.value)
- .map((v) => {
- const index = values.indexOf(v);
- const size =
- opponentWidth < 1e-3 ? 0 : normalized[index] / opponentWidth;
- return (
-
- );
- })}
-
+ {opponentWidth > 1e-5 ? (
+
+ {values
+ .filter((v) => v < majorityGrade.value)
+ .map((v) => {
+ const index = values.indexOf(v);
+ const size =
+ opponentWidth < 1e-3 ? 0 : normalized[index] / opponentWidth;
+ return (
+
+ );
+ })}
+
) : (
+
+
+ )}
{/*
*/}
>
diff --git a/components/ballot/BallotDesktop.tsx b/components/ballot/BallotDesktop.tsx
index 33de545..64b6f32 100644
--- a/components/ballot/BallotDesktop.tsx
+++ b/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 = () => {
{ballot.election.name}
{ballot.election.candidates.map((candidate, candidateId) => {
@@ -33,7 +33,9 @@ const BallotDesktop = () => {
candidate={candidate}
/>
- {ballot.election.grades.map((_, gradeId) => {
+ {ballot.election.grades.sort(
+ (a, b) => b.value - a.value
+ ).map((_, gradeId) => {
console.assert(gradeId < numGrades);
return (
{
moveRight(true)}>
: null}
- {ballot.election.grades.map((_, gradeId) => {
+ {ballot.election.grades.sort((a, b) => b.value - a.value).map((_, gradeId) => {
console.assert(gradeId < numGrades);
return (
{
{candidate.name}
- {t("vote.more-details")}
+ { // {t("vote.more-details")}
+ }
)
}
diff --git a/components/ballot/GradeInput.tsx b/components/ballot/GradeInput.tsx
index d160125..d8d81f0 100644
--- a/components/ballot/GradeInput.tsx
+++ b/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 (<>