设置时间段出错

[zhangwei900808]

我设置下面时间段，可是显示的时候却显示了2019年的数据，以及开始时间和结束时间完全不正确。

startDate={new Date('2020/01/01')}
endDate={new Date('2020/12/31')}
rectRender={(props, data) => {
          // console.log('data=', data)
  return (
    <Tooltip mouseEnterDelay={0} mouseLeaveDelay={0} arrowPointAtCenter placement="top"
             title={`提交 ${data.count || 0} 次，${data.date}`}>
      <rect {...props} />
    </Tooltip>
  );
}}

[zhangwei900808]

好像跟rectSize有关，我设置成14之后结束时间没显示全，设置成12就好了，不过开始时间还是不对

rectSize={12}

[zhangwei900808]

还有个问题，设置space=4的时候图例显示遮挡了

space={4}

[zhangwei900808]

要不你告诉我在哪个分支和代码上面改我来提pr给你吧

[jaywcjlove]

@zhangwei900808 你可以把你的示例通过 codesandbox.io 重现。我有空看看。

开始时间是因为跟左边 星期 和月份对其，所以补了几天，你可以使用 rectRender，过滤不显示。

不清楚你怎么写的，为什么有遮挡。最好提供你的示例我看看。

这里有示例参考：https://codesandbox.io/s/react-heat-map-example-forked-60-kggm8?file=/src/index.js:0-762

import ReactDOM from "react-dom";
import HeatMap from "@uiw/react-heat-map";

const value = [
  { date: "2016/01/11", count: 2 },
  { date: "2016/01/12", count: 20 },
  { date: "2016/01/13", count: 10 },
  ...[...Array(17)].map((_, idx) => ({
    date: `2016/02/${idx + 10}`,
    count: idx,
    content: ""
  })),
  { date: "2016/04/11", count: 2 },
  { date: "2016/05/01", count: 5 },
  { date: "2016/05/02", count: 5 },
  { date: "2016/05/04", count: 11 }
];

const Demo = () => {
  return (
    <div>
      <HeatMap
        value={value}
        height={320}
        rectSize={21}
        startDate={new Date("2016/01/01")}
        endDate={new Date("2016/01/25")}
      />
    </div>
  );
};
ReactDOM.render(<Demo />, document.getElementById("container"));

如果你要最快解决问题，可以 PR， 分支只有一个 main 默认分支。

[zhangwei900808]

@jaywcjlove 我把遇到的问题列举一下吧，感觉问题还不少

• 设置space图例显示遮挡问题
• 设置rectSize结束时间遮挡问题
• 图例可以显示在不同位置，如左上，右上，左下，右下和不显示功能
• 开始时间不准确，不应该多补时间
• 宽度设置很大的时候，多显示了月份时间

[zhangwei900808]

我刚在本地设置space={4}就遮挡了，

[zhangwei900808]

还有weekLables和monthLables拼写错误，应该是monthLabels和monthLabels

[jaywcjlove]

还有weekLables和monthLables拼写错误，应该是monthLabels和monthLabels

这个没有明白什么意思 @zhangwei900808

[zhangwei900808]

@jaywcjlove 标签是使用Label而不是Lable，

[zhangwei900808]

我来改下吧

[zhangwei900808]

还有， const [selectaDate, setSelectaDate] = useState();，selectaDate应该是selectDate吧，我也改了吧

[zhangwei900808]

@jaywcjlove 我刚提了一个PR了，我接着往下改吧

[jaywcjlove]

@zhangwei900808 .idea 在 .gitignore中忽略掉吧。

[zhangwei900808]

@jaywcjlove 好的

[zhangwei900808]

@jaywcjlove 你的代码没有注释，我改的好痛苦啊，一直读码中，

[jaywcjlove]

@zhangwei900808 这个就是生成 svg，太简单，没有必要注释吧。

[zhangwei900808]

你当然简单，是你的思路啊，我要先了解你生成的逻辑，还要改代码，没有注释，无法了解当时你的想法，容易出错

[zhangwei900808]

@jaywcjlove 比如这里，我打印出月份只有10个，可是你显示不止这么多，我都不知道剩下的数据哪来的

[zhangwei900808]

我改我能改的吧，不能改的你来吧

[jaywcjlove]

@zhangwei900808

react-heat-map/src/SVG.tsx

Lines 95 to 102 in 58cfcdb

	<LabelsMonth
	monthLabels={monthLabels}
	rectSize={rectSize}
	space={space}
	leftPad={leftPad}
	colNum={gridNum}
	startDate={initStartDate}
	/>

月份不能自动控制，你可以设置 svg 宽度

[jaywcjlove]

通过设置宽度，计算有显示多少列(月份) @zhangwei900808 所以你可以设置宽度。这个目的是减少代码，之前封装了一个 heat-map 组件就是太复杂，重新搞了一下

react-heat-map/src/SVG.tsx

Lines 63 to 65 in 58cfcdb

	const width = svgRef.current.clientWidth - leftPad || 0;
	setGridNum(Math.floor(width / (rectSize + space)) || 0);
	}

react-heat-map/src/SVG.tsx

Line 100 in 58cfcdb

colNum={gridNum}

[zhangwei900808]

@jaywcjlove 我看错了，你demo上面有7个实例，我改的是第1个，打印的是最后一个，我知道怎么改了