Add map legend #115

anaPerezGhiglia · 2020-06-18T15:22:19Z

Map legend 🗺️

All the data is now being clustered in 5 groups
values are rounded to the three-most-significant digit
values are only rounded in the legend
Rounded breaks are not used for clustering the data, since it can happen that the rounded upper limit < some regions cases. If this happens, it would end in those regions not being member of any cluster.
For example, if a region has 2,163,543 active cases, the rounded limit would be 2,160,000. Thus, if clustering with such upper-limit would end with such region out of the cluster

UI tweaks 🔩

For showing the legend alongside all the data that was already being displayed without having overlapping, some rearrangements where needed:

New wording latest totals
New wording actives
New layout for showing latestUpdate
Smaller status dot size 🔴
Add toLocaleString() to numbers (UI tweaks #100)
Rearrange of suggestions, latestUpdate and userStatus order

Mobile

Desktop

Bonus ➕

remove unnecessary docker-compose up db from dev-setup.sh

closes #94

map legend to fit without overlapping

upper limit < some regions cases. If this happens, it would end in those regions not being member of any cluster

pyritewolf

As usual I left some suggestions & educational comments, but if you think they'll take too long to implement feel free to just merge!

pyritewolf · 2020-06-18T16:02:50Z

backend/router/data.py

@@ -64,16 +65,21 @@ def cluster_data(confirmed, clusters_config=None):
        df["confirmed"], nb_class=clusters_config["clusters"]
    )

+    rounded_breaks = list(map(lambda limit: round(limit, sigfigs=3), breaks))


100% open to discussion, but, do you really think it's worth it to add another lib to the backend when the front can do this out of the box?

I add it in the back since

at first was considering this rounded limits for clustering the data, then realized that it was not a good solution for what i mentioned in the PR description

I like the fact that front doesn't make decisions about the data itself, it just formats it in the way it likes.

and I don't feel like rounding the data is just format ..

pyritewolf · 2020-06-18T16:03:30Z

dev-setup.sh

@@ -7,7 +7,6 @@ pre-commit install -f

 # lift & update containers
 docker-compose build
-docker-compose up db


pyritewolf · 2020-06-18T16:05:43Z

frontend/src/components/Map/index.js

+      clusters &&
+      clusters.map((range, i) => {
+        return {
+          label: `${range[0].toLocaleString()} - ${range[1].toLocaleString()}`,


See, here's were we could be doing the native rounding I was speaking about before with either this native JS thing I mentioned before, or actually, passing some options like maximumSignificantDigits to the toLocaleString() we're already using!

pyritewolf · 2020-06-18T16:12:05Z

frontend/src/components/Map/index.js

+      {legendRanges.map((range, i) => {
+        return (


JS Syntax Sugar Tip of the Day! This:

() => { return (whatever) }

is the same as this:

() => (whatever)

pyritewolf · 2020-06-18T16:13:08Z

frontend/src/components/Map/styles.module.css

+  border-radius: 3px;
+  bottom: 30px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;


There's way too many fonts in this project, and I'm pretty sure Helvetiva Neue isn't one of them. Can we use either Roboto or one of the other already existing fonts?

oh, I stole this config from an example promising I would review then what was really necessary, and I completely forgot about it. Will change

pyritewolf · 2020-06-18T16:23:21Z

frontend/src/routes/Dashboard/styles.module.css

+}
+
+.header h3{
+    margin-block-end: 0.5em;


I'd suggest using margin-bottom and lowering it to 0.2rem. Always prefer rem to em!

em vary depending their location on the dom tree & surrounding rules. rem vary according to the font-size given to html, which gives us more control.

pyritewolf · 2020-06-18T16:24:44Z

frontend/src/routes/Dashboard/index.js

+  );
+
+  const latestUpdate = () => (
+    <div>


This div isn't really necessary, I'd change it for an empty JSX parent <>

Didn't know the <>
It seemed to me unnecessary adding the div
Will change 🙂

pyritewolf · 2020-06-18T16:24:56Z

frontend/src/routes/Dashboard/index.js

+  );
+
+  const suggestions = () => (
+    <div>


Same as before here: this div isn't really necessary, I'd change it for an empty JSX parent <>

pyritewolf · 2020-06-18T16:28:35Z

frontend/src/routes/Dashboard/index.js

+  const suggestions = () => (
+    <div>
+      <h3>SUGGESTIONS</h3>
+      <div>Stay at home</div>


This div is only used to add a linebreak. Since we're tweaking this whole bit of code, I'd change it for a p: it's more semantic / describes better what the element is, and that's the whole point of HTML!

But bear in mind, p usually has a default margin / padding (I can never remember which!), so you'll probably have to clear that up in CSS with something that looks like

.root p { margin: 0; }

Sounds good

easpencer · 2020-06-19T20:58:39Z

Not seeing the legend update when cloropeth level changes

anaPerezGhiglia · 2020-06-19T23:35:19Z

@easpencer since #98 is not necessary since the data is clustered taking into account all the regions information - whether is country or state

anaPerezGhiglia · 2020-06-19T23:37:57Z

@easpencer for future comments: is more easy to track all the comments and interactions in the issue #94 itself than in the PR, even more so when the PR is closed 🙂

easpencer · 2020-06-19T23:39:08Z

Got it. Will move to issues once this is down. Thanks!!!! E

…

On Fri, Jun 19, 2020 at 4:38 PM Ana Perez Ghiglia ***@***.***> wrote: @easpencer <https://github.com/easpencer> for future comments: is more easy to track all the comments and interactions in the issue #94 <#94> itself than in the PR, even more so when the PR is closed 🙂 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#115 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEFMZIV75JZJR6Q67A4SKDRXPZGBANCNFSM4OB33DOA> .

anaPerezGhiglia added 9 commits June 16, 2020 20:59

Add legend to draggable map

bb98daa

round clusters limits to the 3-most-significant digits

2d53f3b

change legend to bottom-left

3342378

remove breadcrumbs and my story title from dashboard

cd0e864

Re-arrange dashboard status, suggestions and latestUpdates elements for

fe890c8

map legend to fit without overlapping

Total updates tweaks: labels in uppercase and with smaller font

9879edf

Do not cut df with rounded_breaks since it can happen that the rounded

3dbdb82

upper limit < some regions cases. If this happens, it would end in those regions not being member of any cluster

separate suggestions from informationHeader

10e261f

remove unnecessary line in dev-setup.sh

a77c461

anaPerezGhiglia requested a review from pyritewolf June 18, 2020 15:22

pyritewolf previously approved these changes Jun 18, 2020

View reviewed changes

pr improvements

bb5dc66

anaPerezGhiglia dismissed pyritewolf’s stale review via bb5dc66 June 18, 2020 18:10

pyritewolf approved these changes Jun 18, 2020

View reviewed changes

anaPerezGhiglia merged commit 4c19868 into master Jun 18, 2020

anaPerezGhiglia deleted the feature/94-map-legend branch June 18, 2020 21:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add map legend #115

Add map legend #115

anaPerezGhiglia commented Jun 18, 2020 •

edited

pyritewolf left a comment

pyritewolf Jun 18, 2020

anaPerezGhiglia Jun 18, 2020

anaPerezGhiglia Jun 18, 2020

pyritewolf Jun 18, 2020

pyritewolf Jun 18, 2020

pyritewolf Jun 18, 2020

pyritewolf Jun 18, 2020

anaPerezGhiglia Jun 18, 2020

pyritewolf Jun 18, 2020

pyritewolf Jun 18, 2020

anaPerezGhiglia Jun 18, 2020

pyritewolf Jun 18, 2020

pyritewolf Jun 18, 2020

anaPerezGhiglia Jun 18, 2020

easpencer commented Jun 19, 2020

anaPerezGhiglia commented Jun 19, 2020

anaPerezGhiglia commented Jun 19, 2020

easpencer commented Jun 19, 2020 via email

Add map legend #115

Add map legend #115

Conversation

anaPerezGhiglia commented Jun 18, 2020 • edited

Map legend 🗺️

UI tweaks 🔩

Mobile

Desktop

Bonus ➕

pyritewolf left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

easpencer commented Jun 19, 2020

anaPerezGhiglia commented Jun 19, 2020

anaPerezGhiglia commented Jun 19, 2020

easpencer commented Jun 19, 2020 via email

anaPerezGhiglia commented Jun 18, 2020 •

edited