你會得到

  • 不依賴其他套件的 React 熱力圖元件,props 有型別定義
  • 同款日曆的單一 HTML 檔,內含 JSON 資料區塊
  • 把 git log、CSV 或 JSON 彙整成每日計數的腳本
  • 總計、連續天數、鍵盤導覽與即時數值顯示
  • 可選:PopNow 製作的頁首或分享卡圖,會先報價

適合

  • 在個人頁面展示提交、寫作或讀書紀錄
  • 習慣、運動與連續打卡追蹤
  • 在報告中呈現每日銷售、註冊數或工單量

不適合

  • 在同一張圖比較多組數列
  • 一天內各時段的分布,或很短的紀錄
  • 需要查詢精確數值的場合,用表格更好讀

怎麼用

在 Claude 或 ChatGPT 裡

用 PopNow 的技能「日曆熱力圖」(activity-heatmap-calendar)幫我做這件事:在我作品集的「關於我」頁面,顯示這個 repo 過去一年的提交紀錄。

在程式 Agent 裡

/popnow-activity-heatmap-calendar 在我作品集的「關於我」頁面,顯示這個 repo 過去一年的提交紀錄。

接著試試

改用固定級距:1、3、6 次提交。

幫這個區塊做一張分享卡背景,先告訴我要多少點數。

需要準備

  • 你的紀錄,或匯出紀錄的指令
  • 一個單位代表什麼,例如一次提交或一筆訂單
  • 日期範圍,以及每週是否從星期一開始

類似技能

查看全部 →

常見問題

資料從哪裡來?

任何每筆都有日期的紀錄都可以。附帶的腳本能讀取 git log 輸出、含日期欄位的 CSV、JSON 陣列或純時間戳清單,並輸出每天一個計數。

需要圖表函式庫嗎?

不需要。React 版只需要 React,HTML 版什麼都不用。兩者都用一般元素畫出格子,支援淺色與深色模式。

顏色級距怎麼決定?

預設依有紀錄日子的四分位數計算,所以就算這一年比較清閒,也能用到完整的色階。如果數字有固定意義,你可以設定固定門檻。

為什麼不讓圖像模型直接畫出我的數據?

圖像模型可能把數字畫錯。技能會用 PopNow 生成不含文字的背景,再以 HTML 把你真實的總數和連續天數疊在上面。