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);
-    if (!popupRef.current) {
-      return;
-    }
-
+    const tempDiv = document.createElement("div");
+    tempDiv.className = "usage-detail-container pop-up";
     const bounding = utils.getElementBounding(event.target as HTMLElement);
-    popupRef.current.style.left = bounding.left + "px";
-    popupRef.current.style.top = bounding.top - 4 + "px";
+    tempDiv.style.left = bounding.left + "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,8 +55,9 @@
       }
     }
   }
+}
 
-  > .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;
   background-color: rgba(0, 0, 0, 0.8);
 
@@ -73,5 +74,4 @@
     border-right: 4px solid transparent;
     border-top: 4px solid rgba(0, 0, 0, 0.8);
   }
-  }
 }