直近の精進具合を知るためにProgress ChartにLast 30 daysのような絞り込み機能がほしい

[erbowl]

背景

Progress Chartで進捗、精進具合を見ることができますが、 歴が長い人になるほどX軸が伸びるため、直近の実績値を確認するのが難しくなっていると思っています。 （Heatmapを見ればよいという説もあります）

提案

そこでLast 30 daysのような時間のフィルターを用意することで直近の実績を確認できてモチベーションアップになるのではないかと思っていますが、どうでしょう？

イメージを作ってみました。 イメージ内のフィルターの位置的にはDaily Effortのみが変わるのが筋ですが、Climibngが変わったときの印象も伝えるためにイメージのgifは両方変化しています。

ユーザーが各々のフィルターを変えるのが面倒な気がするのでイメージのように一括で変えればよいと思っていますが、そうするとボタンの位置が悩ましいです（Daily Effort, Climbingに関係あるが、Heatmapに関係ないため）

[kenkoooo]

良さそうです。本当はドロップダウンによる操作ではなくて、マウスで選択した範囲を拡大したりできるといいですね。

[erbowl]

良さそうです。本当はドロップダウンによる操作ではなくて、マウスで選択した範囲を拡大したりできるといいですね。

そうですね、ちょっと調べてみますー。

[southball]

たぶん recharts での <Brush /> を使うと何とかできると思います。（ここの例と似ているかな）

[erbowl]

@southball ありがとうございます。 Brushでもやりたいことはできそうでしたが、こんな感じで選択した箇所をzoomできないか見ています。 https://recharts.org/en-US/examples/HighlightAndZoomLineChart

素直に実装するとonMouseMoveのコストが高いためかカクついちゃうので工夫がいりそうです。

[erbowl]

gifだと重さは伝わりませんが、イメージこんな感じですー。

[kenkoooo]

オシャレ〜〜〜