将弹出窗口添加到 React 热图网格

Question

我使用的 react-heatmap-grid in order to create a table with data and I want that when I click on a rectangle from the table to open a popup. I'm using Semantic UI in my project so I would like to use the Pinned Popup 仅在点击时出现。

目前的代码：

const xLabels = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
const yLabels =['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00'];
const data = [[7, 1, 2, 1, 7, 3, 6],
              [7, 1, 2, 3, 4, 5, 6],
              [0, 1, 2, 3, 4, 5, 6],
              [7, 1, 2, 3, 4, 5, 6],
              [7, 1, 2, 3, 4, 5, 6],
              [0, 1, 7, 7, 4, 5, 6],
              [0, 1, 2, 7, 4, 5, 6],
              [7, 1, 2, 7, 7, 5, 6],
              [7, 1, 2, 3, 4, 7, 7],
              [0, 1, 2, 3, 4, 5, 7],
              [0, 1, 7, 0, 1, 2, 3],
              [7, 1, 2, 3, 4, 5, 6]];

                <HeatMap
                  xLabels={xLabels}
                  yLabels={yLabels}
                  xLabelWidth={60}
                  data={data}
                  squares
                  height={45}
                  width={50}
                  cellStyle={(background, value, min, max, x, y) => ({
                    background: value === 7 ? '#27414E' : '#F5F7FA',
                    fontSize: '10px',
                    color: '#444',
                    width: '14%',
                    height: '30px',
                  })}
                  cellRender={value => value && <div>{value}</div>}
                />

它工作正常，它呈现数据并将其显示在该热图中 table。但是不知道可不可以给table.

中的每个方块添加一个Popup组件

我添加了点击方块时激活的提醒：

        <HeatMap
          xLabels={xLabels}
          yLabels={yLabels}
          xLabelWidth={60}
          data={this.state.tableData}
          squares
          height={45}
          width={50}
          onClick={(x, y) => alert(`Clicked ${x}, ${y}`)} //here is the onClick added
          cellStyle={(background, value, min, max, x, y) => ({
            background: value === 7 ? '#27414E' : '#F5F7FA',
            fontSize: '10px',
            color: '#444',
            width: '14%',
            height: '30px',
          })}
          cellRender={value => value && <div>{value}</div>}
        />

这是弹出窗口的结构：

<Popup
    content='show some data'
    on='click'
    pinned
    trigger={<Button content='Button' />}
  />

有没有办法将其添加到热图中？

Answer 1

是否尝试过将其放入 cellRenderer？

...
cellRender={value => <Popup
    content='show some data'
    on='click'
    pinned
    trigger={<div style={{height: 50, width: 50}} />}/>}
...

将弹出窗口添加到 React 热图网格

Add Popup to React Heatmap Grid

javascript

reactjs

popup

heatmap

semantic-ui