show districts name, population & other relevant information on popup when hovered upon district #29
Conversation
feat: district border animation
Updated the live deployment URL!
Saving progress in localStorage, and allowing users to reset their progresses!
Implementation of Persistent Progress! aabishkaryal#3
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/aabishkaryal/nepal-districts/GXxV68sXrkb7NoRouan1p5c8fkxv |
|
@mrsudarshanrai please follow the naming convention for components |
|
do we really need the additional districtArea on data? It is possible to add km2 while rendering. |
|
Also, please PR into main, sorry for the trouble caused due to this. |
components/Modal/index.tsx
Outdated
| const Modal = (props: props) => { | ||
| const { data } = props || {} | ||
| const { pageY, pageX, target } = data || {} | ||
| const district = DistrictData[(target as any)?.id] |
There was a problem hiding this comment.
If you're using just pageX, pageY and target from the event, why don't you just pass them as props instead of passing the whole event?
There was a problem hiding this comment.
Also take a look at how other components are declared.
Let's keep it consistent.
components/Modal/index.tsx
Outdated
| import DistrictData from '../../data/districts.json'; | ||
|
|
||
| type props = { | ||
| data: React.MouseEvent<SVGPathElement> | null; |
There was a problem hiding this comment.
It is never null, you are checking that before rendering the modal component.
components/District.tsx
Outdated
| onMouseOver: (event: React.MouseEvent<SVGPathElement>) => void | ||
| onMouseOut: (event: React.MouseEvent<SVGPathElement>) => void |
components/DistrictMap.tsx
Outdated
| <svg viewBox="0 0 1026.077 519.136" className="w-full"> | ||
| <g transform="translate(-52.379 -15.971)"> | ||
| {visibleDistrictIndices.map((index) => ( | ||
| <District {...districts[index]} key={districts[index].zip} /> | ||
| <District id={index} {...districts[index]} key={districts[index].zip} onMouseOver={(event) => setModalState(event)} onMouseOut={() => setModalState(null)} /> |
There was a problem hiding this comment.
can be replaced with
onMouseOver={setModalState}
Oh my my, I didn't realize whole entire time that |
|
@aabishkaryal So I am using the existing area value now. For now, values are not comma-separated. |
You could use toLocaleString with "en-US". Read the documentation for more details. |
Added feature issued here.
Added some more data about district like district Area, Population & Elevation. This data will be visible upon mouse hover on districts.