Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

Improve formatting of route distance/duration #359

Merged
merged 1 commit into from
Sep 2, 2019

Conversation

bbecquet
Copy link
Contributor

@bbecquet bbecquet commented Aug 28, 2019

Description

  • Extract itinerary distance and duration format utilities to a shared file
  • Add unit tests to cover these functions
  • Add some non-breaking spaces before units and pad minutes

Why

Improve legibility with respect to common typographic rules.
We should actually do that depending on the locale, but let's improve it later, this fixes most cases.

Before After
localhost_3000_routes__origin=latlon_48 89360_2 45293 destination=latlon_48 83291_2 31665 mode=cycling (1) localhost_3000_routes__origin=latlon_48 89360_2 45293 destination=latlon_48 83291_2 31665 mode=cycling

Test suite

 PASS  tests/units/route_utils.js
  route_utils
    formatDuration
      ✓ Formats 0 seconds as '1 min' (4ms)
      ✓ Formats 37 seconds as '1 min'
      ✓ Formats 125 seconds as '2 min'
      ✓ Formats 3600 seconds as '1 h' (1ms)
      ✓ Formats 5100 seconds as '1 h 25 min'
      ✓ Formats 36000 seconds as '10 h'
    formatDistance
      ✓ Formats 0 meters as '' (1ms)
      ✓ Formats 15 meters as '15 m'
      ✓ Formats 500 meters as '500 m'
      ✓ Formats 1234 meters as '1,2 km' (1ms)
      ✓ Formats 9999 meters as '10,0 km'
      ✓ Formats 123456 meters as '123 km'

@bbecquet bbecquet force-pushed the route-data-formatting branch 3 times, most recently from af70eb9 to 9a3b13d Compare September 2, 2019 14:25

export function formatDuration(sec) {
sec = Math.max(60, sec); // For duration < 60s, return '1 min'
let min = Math.round(sec / 60);
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm surprised eslint didn't say that it should be const.

Copy link
Contributor

Choose a reason for hiding this comment

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

Oh nevermind. Didn't see below. :)

if (m > 99000) {
return `${Math.round(m / 1000)}&nbsp;km`;
}
if (m > 1000) {
Copy link
Contributor

Choose a reason for hiding this comment

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

We had a debate about this but I still prefer using else if in such cases. But you can completely ignore this comment.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Seriously, this pyramid was ridiculous…

if (m > 5) {
  if (m > 1000) {
    if (m > 99000) {

Copy link
Contributor

Choose a reason for hiding this comment

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

That wasn't my point. I didn't like that pyramid either.

Copy link
Contributor

@GuillaumeGomez GuillaumeGomez left a comment

Choose a reason for hiding this comment

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

👍

@bbecquet bbecquet merged commit 109e34e into Qwant:master Sep 2, 2019
@bbecquet bbecquet deleted the route-data-formatting branch September 2, 2019 15:09
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants