できること

  • 型付き props を持つ、依存ライブラリなしの React ヒートマップコンポーネント
  • 同じカレンダーを JSON データブロック付きの HTML ファイル 1 つで
  • git log、CSV、JSON を日ごとの件数に集計するスクリプト
  • 合計、連続記録、キーボード操作、ライブ表示
  • PopNow によるヘッダー画像やシェアカード画像(任意、先に見積もり)

向いている用途

  • プロフィールページでのコミット・執筆・学習の履歴
  • 習慣、筋トレ、連続記録のトラッカー
  • レポートでの日次売上、登録数、問い合わせ件数

向いていない用途

  • 複数の系列を 1 つのチャートで比較すること
  • 時間帯ごとの傾向や、ごく短期間の履歴
  • 正確な値の確認(表のほうが読みやすい)

使い方

Claude・ChatGPT で

PopNow のスキル「カレンダーヒートマップ」(activity-heatmap-calendar)を使って、次のことをしてください:このリポジトリの過去 1 年分のコミットを、ポートフォリオの About ページに表示して。

コーディングエージェントで

/popnow-activity-heatmap-calendar このリポジトリの過去 1 年分のコミットを、ポートフォリオの About ページに表示して。

次はこれ

段階を固定値にして:1、3、6 コミット。

このセクション用のシェアカード背景を作って。先に必要なクレジットを教えて。

用意しておくもの

  • 記録データ、またはそれを書き出すコマンド
  • 1 単位の意味(コミット 1 件、注文 1 件など)
  • 対象期間と、週を月曜始まりにするかどうか

似ているスキル

すべて見る →

よくある質問

データはどこから取りますか?

記録ごとに日付があれば何でも使えます。付属のスクリプトは git log の出力、日付列のある CSV ファイル、JSON 配列、タイムスタンプの単純なリストを読み込み、1 日ごとの件数を書き出します。

チャートライブラリは必要ですか?

不要です。React 版は React だけ、HTML 版は何も必要ありません。どちらも通常の要素でグリッドを描画し、ライトモードとダークモードの両方で動作します。

色の段階はどう決まりますか?

デフォルトでは、記録のある日の四分位数から決めるので、活動の少ない年でも濃淡を全段階使います。数値に決まった意味がある場合は、固定のしきい値を設定できます。

統計を画像モデルに描かせないのはなぜですか?

画像モデルは数字を間違えることがあるためです。スキルは PopNow で文字のない背景を生成し、実際の合計や連続記録はその上に HTML で配置します。