chore: fix hover heatmap

web/src/components/UsageHeatMap.tsx

@@ -37,10 +37,8 @@ const UsageHeatMap: React.FC<Props> = () => {
 
   const { memos } = useAppSelector((state) => state.memo);
   const [allStat, setAllStat] = useState<DailyUsageStat[]>(getInitialUsageStat(usedDaysAmount, beginDayTimestemp));
-  const [popupStat, setPopupStat] = useState<DailyUsageStat | null>(null);
   const [currentStat, setCurrentStat] = useState<DailyUsageStat | null>(null);
   const containerElRef = useRef<HTMLDivElement>(null);
-  const popupRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const newStat: DailyUsageStat[] = getInitialUsageStat(usedDaysAmount, beginDayTimestemp);
@@ -54,18 +52,17 @@ const UsageHeatMap: React.FC<Props> = () => {
   }, [memos]);
 
   const handleUsageStatItemMouseEnter = useCallback((event: React.MouseEvent, item: DailyUsageStat) => {
-    setPopupStat(item);
+    const tempDiv = document.createElement("div");
-    if (!popupRef.current) {
+    tempDiv.className = "usage-detail-container pop-up";
-      return;
-    }
-
     const bounding = utils.getElementBounding(event.target as HTMLElement);
-    popupRef.current.style.left = bounding.left + "px";
+    tempDiv.style.left = bounding.left + "px";
-    popupRef.current.style.top = bounding.top - 4 + "px";
+    tempDiv.style.top = bounding.top - 2 + "px";
+    tempDiv.innerHTML = `${item.count} memos on <span className="date-text">${new Date(item.timestamp as number).toDateString()}</span>`;
+    document.body.appendChild(tempDiv);
   }, []);
 
   const handleUsageStatItemMouseLeave = useCallback(() => {
-    setPopupStat(null);
+    document.body.querySelectorAll("div.usage-detail-container.pop-up").forEach((node) => node.remove());
   }, []);
 
   const handleUsageStatItemClick = useCallback((item: DailyUsageStat) => {
@@ -89,11 +86,6 @@ const UsageHeatMap: React.FC<Props> = () => {
         <span className="tip-text"></span>
         <span className="tip-text">Sat</span>
       </div>
-
-      <div ref={popupRef} className={"usage-detail-container pop-up " + (popupStat ? "" : "hidden")}>
-        {popupStat?.count} memos on <span className="date-text">{new Date(popupStat?.timestamp as number).toDateString()}</span>
-      </div>
-
       <div className="usage-heat-map">
         {allStat.map((v, i) => {
           const count = v.count;

web/src/helpers/consts.ts

@@ -11,7 +11,7 @@ export const TOAST_ANIMATION_DURATION = 400;
 export const DAILY_TIMESTAMP = 3600 * 24 * 1000;
 
 // tag regex
-export const TAG_REG = /#(.+?) /g;
+export const TAG_REG = /#(\S+?) /g;
 
 // markdown image regex
 export const IMAGE_URL_REG = /!\[.*?\]\((.+?)\)/g;

web/src/less/usage-heat-map.less

@@ -55,23 +55,23 @@
       }
     }
   }
+}
 
-  > .usage-detail-container {
+.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;
+  @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;
-    background-color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(0, 0, 0, 0.8);
 
-    > .date-text {
+  > .date-text {
-      @apply text-gray-300;
+    @apply text-gray-300;
-    }
+  }
 
-    &::before {
+  &::before {
-      content: "";
+    content: "";
-      position: absolute;
+    position: absolute;
-      bottom: -4px;
+    bottom: -4px;
-      left: calc(50% - 5px);
+    left: calc(50% - 5px);
-      border-left: 4px solid transparent;
+    border-left: 4px solid transparent;
-      border-right: 4px solid transparent;
+    border-right: 4px solid transparent;
-      border-top: 4px solid rgba(0, 0, 0, 0.8);
+    border-top: 4px solid rgba(0, 0, 0, 0.8);
-    }
   }
 }