replot / replot-treemap

replot-treemap: Intelligent and customizable treemap components for react.
http://replot.io/treemap/
MIT License
1 stars 0 forks source link

Assigning colors using colorKey is not working #35

Open AlmahaAlmalki opened 6 years ago

AlmahaAlmalki commented 6 years ago

Hi @sanjaypojo

So in one of my treemaps I want to assign a color based on the location of the institution, I already created a function to do so, but when I tried to pass colorKey to the treemap, it seems like it always uses the default palette.

this's the code

 <TreeMap dataset={this.state.dataset} 
      weightKey='size' 
      titleKey='name' 
      colorKey='color'
      titleScale={2.8} 
      displayPercentages={true} 
      otherThreshold={0.002} 
      maxOtherSize={0.005}
      keyOrder={['name']} />

the dataset:

[{"name":"MIT","size":3,"color":"#3071B8"},{"name":"Northeastern
University","size":2,"color":"#3071B8"},{"name":"Universidad de Playa
Ancha","size":1,"color":"#57B28D"},{"name":"Google","size":1,"color":"#3071B8"},
{"name":"Universidad del Desarrollo","size":1,"color":"#57B28D"},{"name":"Université catholique de
Louvain","size":2,"color":"#9F1F62"},{"name":"UC Berkeley","size":2,"color":"#3071B8"},
{"name":"Harvard University","size":4,"color":"#3071B8"},{"name":"New York 
University","size":1,"color":"#3071B8"},{"name":"Institute for Employment 
Research","size":1,"color":"#9F1F62"},{"name":"Yale University","size":1,"color":"#3071B8"},
{"name":"University of Toronto","size":2,"color":"#3071B8"},{"name":"Simon Fraser 
University","size":1,"color":"#3071B8"},{"name":"University of British Columbia","size":1,"color":"#3071B8"},{"name":"Asian Development Bank","size":1,"color":"#D1202E"},
{"name":"UCSF","size":1,"color":"#3071B8"},{"name":"Technical University of 
Denmark","size":1,"color":"#9F1F62"},{"name":"IIT Delhi","size":1,"color":"#D1202E"},{"name":"Virginia
Tech","size":1,"color":"#3071B8"},{"name":"Universidad Técnica Federico Santa
María","size":1,"color":"#57B28D"},{"name":"University of Massachusetts Medical
School","size":1,"color":"#3071B8"},{"name":"Universidad Politécnica de
Madrid","size":1,"color":"#9F1F62"}]

it passes everything correctly to the react component, but it just doesn't use the colorKey

screenshot 2018-01-15 10 37 06
sanjaypojo commented 6 years ago

Bring back colorKey. Just have 3 separate props. colorKey, colorPalette and colorFunction.