fix: heatmap popover blink (#195)

This commit is contained in:
winwin2011 2022-09-04 22:34:24 +08:00 committed by GitHub
parent b884327a53
commit 987bb80770
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 29 deletions

View file

@ -99,19 +99,25 @@ const UsageHeatMap = () => {
: "stat-day-L4-bg";
return (
<span
className={`stat-container ${colorLevel} ${currentStat === v ? "current" : ""} ${
todayTimeStamp === v.timestamp ? "today" : ""
}`}
<div
className="stat-wrapper"
key={i}
onMouseEnter={(e) => handleUsageStatItemMouseEnter(e, v)}
onMouseLeave={handleUsageStatItemMouseLeave}
onClick={() => handleUsageStatItemClick(v)}
>
<span
className={`stat-container ${colorLevel} ${currentStat === v ? "current" : ""} ${
todayTimeStamp === v.timestamp ? "today" : ""
}`}
></span>
</div>
);
})}
{nullCell.map((_, i) => (
<span className="stat-container null" key={i}></span>
<div className="stat-wrapper" key={i}>
<span className="stat-container null"></span>
</div>
))}
</div>
</div>

View file

@ -23,12 +23,12 @@
grid-template-columns: repeat(12, 1fr);
grid-auto-flow: column;
> .stat-wrapper {
> .stat-container {
@apply block rounded-sm;
width: 14px;
height: 14px;
background-color: @bg-lightgray;
margin-bottom: 2px;
&.null {
@apply bg-transparent;
@ -56,6 +56,7 @@
}
}
}
}
.usage-detail-container {
@apply fixed left-0 top-0 ml-2 -mt-9 p-2 z-100 -translate-x-1/2 select-none text-white text-xs rounded whitespace-nowrap;