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.

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

Add DistanceUnitFormatter and DurationUnitFormatter, two react compon… #777

Merged
merged 4 commits into from
Nov 29, 2023

Conversation

davidmurray
Copy link
Collaborator

…ents to automatically choose the best unit for a value

They also allow clicking on the values to cycle between the different possible units. Example usage is shown in transit routing output for the walking mode. If code and UX seems satisfactory to you, I will use these components in many other parts of transition.

Demo:

Screen.Recording.2023-11-22.at.11.20.26.mov

Fixes #775

@davidmurray
Copy link
Collaborator Author

I could also add one for speeds : m/s, km/h, mph, etc

Copy link
Collaborator

@kaligrafy kaligrafy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verify code lint though

@kaligrafy
Copy link
Collaborator

Very nice!

@davidmurray
Copy link
Collaborator Author

Verify code lint though

fixed!

@davidmurray davidmurray force-pushed the fix-775 branch 2 times, most recently from 83c3a2c to 5a52ba0 Compare November 22, 2023 18:29
@davidmurray
Copy link
Collaborator Author

added SpeedUnitFormatter too

Copy link
Collaborator

@tahini tahini left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! You can further type the states though, to limit to the possible values.

const DistanceUnitFormatter: React.FunctionComponent<DistanceUnitFormatterProps> = (
props: DistanceUnitFormatterProps
) => {
const [destinationUnit, setDestinationUnit] = useState<string | undefined>(props.destinationUnit);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of string, you can use your destinationUnitOptionType

const DurationUnitFormatter: React.FunctionComponent<DurationUnitFormatterProps> = (
props: DurationUnitFormatterProps
) => {
const [destinationUnit, setDestinationUnit] = useState<string | undefined>(props.destinationUnit);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here, use destiantionUnitOptionsType

…matically choose the best unit for a value

They also allow clicking on the values to cycle between the different possible units. Example usage is shown in transit routing output for the walking mode, and route statistics for speed.

Fixes chairemobilite#775
@davidmurray
Copy link
Collaborator Author

@tahini fixed :)

Copy link
Collaborator

@tahini tahini left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@tahini tahini merged commit 886038a into chairemobilite:main Nov 29, 2023
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add unit conversion react components
3 participants