feat: loans map added to lender profile #5438
Conversation
| import KvMap from '@/components/Kv/KvMap'; | ||
| import KvCheckbox from '~/@kiva/kv-components/vue/KvCheckbox'; | ||
|
|
||
| export const getIntervals = (min, max, nbIntervals) => { |
There was a problem hiding this comment.
It would be worth adding a ticket to the epic to extract this to a util and unit test it.
There was a problem hiding this comment.
Also, what specifically are the intervals here? It would probably be good to add a jsdoc comment to this method to explain what it's generating.
| return (this.lenderInfo?.statsPerCountry?.values ?? []).map(stat => ({ | ||
| label: stat.country?.name ?? '', | ||
| value: stat.loanCount ?? '', | ||
| lat: stat.country?.geocode?.latitude ?? 0, |
There was a problem hiding this comment.
Are we generally guaranteed that the stat data exists or should we be filtering the array before we map the data?
| @@ -12,6 +12,9 @@ | |||
| <script> | |||
| import { createIntersectionObserver } from '@/util/observerUtils'; | |||
| import testDelayedGlobalLibrary from '@/util/timeoutUtils'; | |||
| import countriesBorders from '@/assets/data/components/LenderProfile/countries-borders.json'; | |||
| import { getIntervals, mapColors } from '@/components/LenderProfile/LenderMap'; | |||
There was a problem hiding this comment.
It looks like these two methods might better exist here (or in a shared util file).
| @@ -12,6 +12,9 @@ | |||
| <script> | |||
| import { createIntersectionObserver } from '@/util/observerUtils'; | |||
| import testDelayedGlobalLibrary from '@/util/timeoutUtils'; | |||
| import countriesBorders from '@/assets/data/components/LenderProfile/countries-borders.json'; | |||
| import { getIntervals, mapColors } from '@/components/LenderProfile/LenderMap'; | |||
| import kvTokensPrimitives from '~/@kiva/kv-tokens/primitives.json'; | |||
There was a problem hiding this comment.
I think everything in this file (ie. KvMap.vue) should be in https://github.com/kiva/kv-ui-elements/blob/main/%40kiva/kv-components/vue/KvMap.vue instead of UI. Havint the country borders json file would be helpful at a global context roo.
There was a problem hiding this comment.
The related intervals util could be moved as well and unit tested in the library.
There was a problem hiding this comment.
In other words KvMap has been migrated to kv-ui-elements and all enhancements and additions should go there, then that file imported for use in the page instead of a UI only file.
There was a problem hiding this comment.
Agreed, but the suggestion in the ticket is to use this UI file: https://kiva.atlassian.net/browse/MP-415
| const loansString = feature.lenderLoans | ||
| ? `${feature.lenderLoans} loan${feature.lenderLoans > 1 ? 's' : ''}` | ||
| : '0 loans'; | ||
| const countryString = `${feature.properties.ADMIN} <br/> ${loansString}`; |
There was a problem hiding this comment.
What is feature.properties.ADMIN?
|
@roger-in-kiva @dyersituations I don't think we can use the country-borders json file in it's current state. I'm showing that file is 7.5 mb in size... Was there not a way to use the dynamic data from the map library to highlight countries as needed instead of requiring a file of this size? |
We need the polygons of every country for the case of leaflet usage, for that reason this file is huge... |
Some cases:
Mouse over country:
Mouse over fundraising loans dot:
Hidden fundraising loans dots:
