arunghosh / react-heatmap-grid Goto Github PK

How to get xLabels with title
xLabels=[first,second,third,four,five]

title={(value) => ${value}°C}

The title is shows values . 23°C

How to show xLabel with title. first - 23°C

Whenever the cursor point the cell i want to show this toolip : first - 23°C

CellRender is not working for me. Kindly suggest any specific settings and criteria needed for this.

Hey, couple of suggestions/enhancements - want to know your thoughts before raising any PRs...

1. Custom Cell Render

It would be ncie to render something other than   within cells, e.g. the value with unit.

<HeatMap render={value => `${value}%`} />

2. Background Opacity

Currently setting the background & opacity means any textual value (e.g. above) inherits the opacity - instead it would be nice to use rgba - this means converting from hex to rgba to maintain backwards compatibility.

3. Retention Chart Support

The current gradient implementation works on a min/max across the whole dataset, whereas, for a retention chart the first value of each row is the "base" and the subsequent row values have a gradient compared to this value.

<HeatMap type="retention" />

Hi,
great work with this heatmap grid component. But I have run into small issue caused by my specific case.

Let's say, I have data grid like:
[[2,30000,0][0,900000,9]]

Zero value, small value, and very big value. Problem is, that when rendered the 0 and 2 are both rendered as the same (empty) as the 2 is soo small in compare to 900000. What I would like is another color step for all non-zero values that are small and are currently rendered as zero.

This is very specific to my use-case. I can overcome this by processing the values before passing to your component so they always have values 0-10 (or so).

When it is scrolled

I have the following props set:
From reading the source xLabelWidth of my xLabels (if using squares prop) should be equal to that of the cell height, however, it is consistently 41px. Additonally, the cellStyle margin messes with the xLabels and they are no longer centered. It would be really nice if there was xLabelStyle & yLabelStyle props (or just an easier way to target the labels through an el className or something).

To get around this I have tried adding the xLabelWidth prop, but this has no effect on the label regardless of what I set it to.

xLabels={xLabels}
yLabels={yLabels}
displayYLabels={false}
yLabelWidth={0}
data={calendarData}
squares
height={40}
onClick={(x, y) => alert(`Clicked ${x}, ${y}`)}
cellStyle={(background, value, min, max, data, x, y) => ({
	background: `${value === null ? '#F6F6F6' : value === 0 ? '#E2E2E2' : `rgb(255, 28, 28, ${1 - (max - value) / (max - min)})`}`,
	fontSize: '11.5px',
	color: '#444',
	borderRadius: '8px',
	margin: '2px'
})}
cellRender={(value, x, y) => <div></div>}

As you can see, I created a box with bootstrap col-auto col-md-8 m-auto, however when I reduced the screen size to test responsiveness, they went outside. @arunghosh

For some reason, the white dividers between rows are randomly not appearing sometimes:

My code to render the heatmap looks like

<HeatMap
    xLabels={xLabels}
    xLabelWidth={80}
    yLabelWidth={65}
    yLabels = {yLabels}
    data = {data}
    height = {30}
    width={10}
     xLabelsLocation={"top"}
     cellStyle={(background, value, min, max, data, x, y) => ({
      background: `rgb(40, 167, 59, ${1 - (max - value) / (max)})`,
   })}
   title={(value, unit) => `${value}/${actors.size}`}
/>

Any idea what could be causing this?

Is there any way we can give custom styles to x and y Labels?

If you include react-heatmap-grid inside a div with long height that is overflow-y-scroll, the ylabels follow scroll.
I tried changing the css inside chrome developer mode from

style="position: absolute; text-align: right; padding-right: 5px; padding-top: 13.5135px; width: 200px;"

to

style="position: static; text-align: right; padding-right: 5px; padding-top: 13.5135px; width: 200px;"

and it seemed to work. Is there any reason you guys set it to position: absolute for the ylabels' div?

Hi :)

I may have found a bug. When the 'height' parameter is small (e.g. 5) cell rows with y label are displayed separated by a white space (see the figure below)

I tried to fix this with other parameters but I didn't succeed.

However there is a small change in the code which seems to fix this. I have not deep checked if this modification has side effects, but it may be useful.

In the 'DataGrid.jsx' script:

I am new in GitHub, so I apologize if this is not the correct way to suggest changes. If there is a 'suggest commit' protocol please point me how to do it and I will.

Cheers

Have you defined Typedefinitions?

Hi there, we are currently leveraging react-heatmap-grid to display a custom component with separate swim lane "heat maps." Is there a way to implement tooltips in cellRender? I wonder if there's an issue with static conversion for HTML. Is something like this possible?

<HeatMap
    background="#0598dc"
    xLabels={authenticationXLabels}
    yLabels={authenticationYLabels}
    xLabelsVisibility={authenticationXLabelsVisibility}
    yLabelWidth={120}
    data={authenticationData}
    cellStyle={this.getCellStyle}
    cellRender={() => {
        return <p className="w3-tooltip">YO<span className="w3-text w3-tag w3-small">YO!</span></p>
    }}
/>

Hello!
is it possible to rotate the x axes to a certain degree? it would be very helpful!
thanks!

Hello,

Thank you for creating this tool! I'm wondering whether one can apply the heatmap only to selected columns. For example in a table with 6 columns, no heatmap applied for the first 2 columns (ie maybe a white background, regardless of the value in the column), and the heatmap colors applied to the next 4 columns.

Thanks in advance!

X axis scoll is not working, when the data is notably more than the page could display.

Hi , I am trying to put different colors on the basis of value. I tried following but having errors. Could you please tell me how I can use conditional cell styling formatting ?

<HeatMap
        xLabels={xLabels}
        yLabels={yLabels}
        xLabelsLocation={"bottom"}
        xLabelsVisibility={xLabelsVisibility}
        xLabelWidth={60}
        data={data}
        squares
        height={45}
        onClick={(x, y) => alert(`Clicked ${x}, ${y}`)}
        **cellStyle={(background, value, min, max, data, x, y) => ({
          if(value '> 53){
        background: "rgba(0, 151, 230, 0.3)",
        fontSize: "11.5px",
        color: "#444"
        }**
        })}
        cellRender={value => value && <div>{value}</div>}
      />

This component is great thank you. Working perfectly so far. Just wondering whether it would be possible to change the hover text, perhaps using a function like cellRender. I am using an object as a value so I can use it for the click event but this means the hover text shows as [object, object].

Is there a workaround for getting this control to work in Internet Explorer?

Only getting this error message, nothing else:

I found problem when try to custom cellstyle for adjust margin becausein the bundle, my cellstyle replaced by exsiting style. And I have problem with adjust background color each column.
{ cursor: "" + cursor, margin: "1px 1px 0 0", height: height, width: squares ? height + "px" : undefined, flex: squares ? "none" : 1, textAlign: "center" }

When Heatmap Data has all 0, it show NaN in opacity. Please Change the opacity to 0 if we get NaN

Hi ,
Is there a possibility to add legends as in d3 charts . I am looking for one shown in the image

I see that DataGrids have an onClick callback which is really useful.
But I need to select multiple DataGrids that are adjacent either horizontally or vertically as you would do in a spreadsheet. Mouse down on the first DataGrid and slide all the way to the ending DataGrid and then release the mouse.

Is this possible ?

Took me a while to figure out what was happening here :)

Change this in the readme:

background: `rgb(66, 86, 244, ${1 - (max - value) / (max - min)})`,

to

background: `rgba(66, 86, 244, ${1 - (max - value) / (max - min)})`,

otherwise it won't render in safari which is strict about this

How to show cell contents text on hover, with delayed fade-out:

<HeatMap
  // [...]
  cellRender={value =>
    value > 0 && (
      <div
        sx={{
          color: 'transparent',
          transition: 'all .5s linear 3s',
          '&:hover': { color: '#222', transition: 'none' },
        }}
      >
        {value}
      </div>
    )
  }
  // [...]
/>

Please update to be able to use with React 17