Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Route table UX improvements #644

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Route table UX improvements #644

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bbf2510
fix config for on time rate row
hathix Apr 30, 2020
db80487
refactor color selection code
hathix Apr 30, 2020
942bf43
refactor less-than-1 rendering code
hathix Apr 30, 2020
9137069
add comment
hathix Apr 30, 2020
3a1c3b9
add comment and change cutoff
hathix May 7, 2020
1f90ad8
refactor and fix regression
hathix May 7, 2020
6e16cfa
improve logic for showing nothing
hathix May 7, 2020
00f9a6b
better variables
hathix May 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions frontend/src/components/RouteSummary.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,9 @@ function RouteSummary(props) {
scheduled=""
units="%"
precision={0}
positiveDiffDesc="higher"
negativeDiffDesc="lower"
goodDiffDirection={1}
infoContent={
<>
This is the percentage of scheduled departure times where a
Expand Down
46 changes: 30 additions & 16 deletions frontend/src/components/SummaryRow.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { makeStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import Popover from '@material-ui/core/Popover';
import InfoIcon from '@material-ui/icons/InfoOutlined';
import green from '@material-ui/core/colors/green';
import red from '@material-ui/core/colors/red';

/*
* Renders a row of a table that renders two columns of data
Expand Down Expand Up @@ -109,26 +111,38 @@ export default function SummaryRow(props) {
fontSize: 16,
};

let comparisonCellColor = 'green';
if (
goodDiffDirection != null &&
diff != null &&
firstColumnText !== secondColumnText &&
goodDiffDirection * diff < 0
) {
comparisonCellColor = '#f07d02';
}

// Determine what to write as the comparison (which one is better and by
// how much)
let comparisonText = null;
if (diff != null && firstColumnText !== secondColumnText) {
let comparisonCellColor = null;

if (diff === 0) {
// the two routes' stats are identical, so don't write anything
comparisonText = null;
} else if (diff != null) {
// write something like "X mph higher"

// Determine text
const absDiff = Math.abs(diff);
let diffStr = absDiff.toFixed(precision);
if (diffStr === '0') {
diffStr = '< 1';
}
// DESIGN DECISION:
// Not sure if this cutoff should be <1 or <0.5. A number like 0.6
// rounds to 1, but it's also less than 1, so both "1" and "<1" could apply.
const NEGLIGIBLE_CUTOFF = 0.5;
const diffStr =
absDiff < NEGLIGIBLE_CUTOFF ? '< 1' : absDiff.toFixed(precision);

comparisonText = `${diffStr}${unitsSuffix} ${
diff > 0 ? positiveDiffDesc : negativeDiffDesc
}`; // ${diffPercentStr}`;
}`;

// Determine color
const COMPARISON_GOOD_COLOR = green[700];
const COMPARISON_BAD_COLOR = red[700];
if (goodDiffDirection != null && goodDiffDirection * diff < 0) {
comparisonCellColor = COMPARISON_BAD_COLOR;
} else {
comparisonCellColor = COMPARISON_GOOD_COLOR;
}
}

return (
Expand Down