uiwjs / react-heat-map

A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.
https://uiwjs.github.io/react-heat-map
MIT License
212 stars 26 forks source link

Dynamic Color Scaling Based on Maximum Contribution Value #132

Open marcosagni98 opened 3 weeks ago

marcosagni98 commented 3 weeks ago

Hello!

It would be helpful if the library dynamically determined color ranges based on the maximum contribution count in the data provided. Currently, colors need to be manually set according to fixed ranges, but making the color scale adjust automatically would improve flexibility and reduce the need for manual configuration.

Suggested Enhancement:

Allow the color scale to automatically adjust based on the highest contribution count in the input data. For example, if the data includes values up to 50 contributions, the library would calculate color levels relative to this maximum (or any other detected maximum). This way, we wouldn’t need to adjust colors manually for different data ranges.

Benefits:

jaywcjlove commented 3 weeks ago

@marcosagni98 Not sure if the new implementation meets your requirements.

<HeatMap
  value={value}
  width={600}
  style={{ color: '#ad001d', '--rhm-rect-active': 'red' }}
  startDate={new Date('2016/01/01')}
+  panelColors={['#f4decd', '#e4b293', '#d48462', '#c2533a', '#ad001d', '#6c0012']}
 />