Feature/map tooltip #662
Feature/map tooltip #662
Conversation
|
@olavG91 is attempting to deploy a commit to the Klimatbyrån Team on Vercel. A member of the Team first needs to authorize it. |
components/Map/Map.tsx
Outdated
| @@ -264,11 +298,19 @@ function Map({ | |||
| if (!isMunicipalityData(mData) || onTouchDevice()) { | |||
| return null // tooltips on touch devices are handled separately | |||
| } | |||
| return { | |||
|
|
|||
| const dataPointColor = getColorFromDataPoint(mData.dataPoint); | |||
There was a problem hiding this comment.
I think it makes sense to inline this variable
components/Map/Map.tsx
Outdated
| <span style={{ textDecoration: 'underline' }}>{`${tInfo.mData.name}`}</span> | ||
| {`: ${tInfo.mData.formattedDataPoint}`} | ||
| <span style={{ textDecoration: 'underline' }}>{`${tInfo.mData.name}`}:</span> | ||
| <span style={{ color: dataPointColor, fontWeight: 'bold' }}>{`${tInfo.mData.formattedDataPoint}%`}</span> |
There was a problem hiding this comment.
Please run "npm run lint" to get a list of small nitpicks that will need to be addressed.
components/Map/Map.tsx
Outdated
| @@ -117,6 +149,8 @@ export function isMunicipalityData( | |||
| } | |||
|
|
|||
| function MobileTooltip({ tInfo }: { tInfo: MunicipalityTapInfo }) { | |||
| const dataPointColor = getColorFromDataPoint(tInfo.mData.dataPoint); | |||
There was a problem hiding this comment.
IMO this would be more readable inlined
components/Map/Map.tsx
Outdated
| @@ -98,6 +98,38 @@ const getColor = ( | |||
| return colors[5] | |||
| } | |||
|
|
|||
| const getColorFromDataPoint = (dataPoint: number | string): string => { | |||
There was a problem hiding this comment.
This gets the job done, but would mean we have two independent definitions of the boundaries. I see there's a "boundaries" array as well. Could that be something to use?
…r function instead for better code quality.
|
|
|
Good job on the code side of the changes! |
|
I don't know what's a good way to address the darker regions but we don't want to sacrifice readability for a nicer accent color. If you have any ideas I'm happy to discuss. Note it's midsummer weekend now so responses might be delayed. |
|
That will be a problem on the darker colors. Maby we can discuss a good solution for this on Discord after holidays. |
|
Sounds good! Glad midsummer! talk to you next week |
This fix adds colors to data in the map according to labels and improves the text.
Fixes #647