Heatmap, color customisation and marker aggregation #7
Conversation
…ad and fixed query updating not affecting the chart.
| @@ -94,6 +132,10 @@ const Regions = () => { | |||
| location={location} | |||
| tooltipConfig={tooltipConfig} | |||
| defaultHeader={feature.properties.ADMIN} | |||
| heatMap={getGradientColor} | |||
| heatMapSteps={gradientSteps} | |||
There was a problem hiding this comment.
Theres probbaly a better way to do this. In order for the region color to update when the config changed i had to pass ll this information over to use in the useEffect trigger. I cant help but feel the gradient generator function should live within Region.tsx, but its here because it needs information form all the regions for the gradient bucketing to be derived.
| const isTooltip = key.includes("tooltip_"); | ||
| const isIconLabel = key === "icon_label" && !key.includes("_precision"); | ||
|
|
||
| if (isTooltip || isIconLabel) { | ||
| if (!isClusterData && (isTooltip || isIconLabel)) { |
There was a problem hiding this comment.
If you can think of a better way to derive the cluster icon settings from the individual marker settings. i wanted to avoid adding any more config options and so chose to derive the settings from the data itself.
| @@ -2,58 +2,66 @@ import { MARKER_COLOURS } from "../constants"; | |||
| import { sentenceCase } from "text-case"; | |||
|
|
|||
| // Utility function to get color attributes based on location status | |||
| const getColorAttributes = (status) => { | |||
| export const getColorAttributes = (status,customColors) => { | |||
There was a problem hiding this comment.
I think these two functions are ripe for refactoring ;)
| return null; | ||
| } | ||
|
|
||
| setHMSteps(heatMapSteps && heatMapSteps!="" ? parseInt(heatMapSteps) : 0); |
There was a problem hiding this comment.
This state setting was all to try and force a re-render whne config options changed. It seemed unnecessary to me but i couldnt find anbother way to trigger the re-render on prop change.
| @@ -34,7 +56,7 @@ const Region = ({ region, location, tooltipConfig, defaultHeader }) => { | |||
| }; | |||
|
|
|||
| return ( | |||
| <GeoJSON key={location.status} data={region} style={style} onClick={handleRegionClick}> | |||
| <GeoJSON key={key+"-"+location.value+"-"+style.fillColor} data={region} style={style} onClick={handleRegionClick}> | |||
There was a problem hiding this comment.
I changed this so that if the color changes it re-renders, is there a better way?
--------- Co-authored-by: matewilk <matewilk@gmail.com>
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
No description provided.