add range select unlock

[ReynardoEW]

Summary by CodeRabbit

• New Features
  • Added Daily time period option to Upcoming Unlock Volume Chart, enabling daily-level data analysis alongside Weekly and Monthly views.
  • Restructured chart controls with separate time period selector (Daily/Weekly/Monthly) and view mode toggle (Total View/Breakdown View) for improved usability.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

This change adds Daily time period support to UpcomingUnlockVolumeChart, expanding the TIME_PERIODS configuration from two to three options. The grouping logic is updated to handle Daily, Weekly, and Monthly buckets across both view modes, with a new groupBy prop passed to BarChart. The UI control is refactored from a single selector to separate TimePeriod and ViewMode TagGroup components.

Changes

Cohort / File(s)

Summary

Chart Time Period Controls src/components/Charts/UpcomingUnlockVolumeChart.tsx

Added Daily time period option to TIME_PERIODS array. Updated grouping key calculation logic to support Daily, Weekly, and Monthly buckets in both Total View and Breakdown View paths. Introduced groupBy prop on BarChart reflecting the selected time period. Refactored customComponents UI from single time-period control to dual TagGroup layout (TimePeriod and ViewMode). Integrated TimePeriod state into data processing and chart configuration.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• hbar #2388: Adds orientation prop to BarChart API, related through shared BarChart component modifications.

Suggested reviewers

• slasher125
• mintdart

Poem

🐰 A chart that dances through the days,
From Daily's glow to Monthly's haze,
Three time periods now convey,
The volumes unlocking every way,
With grouped controls that cleanly play! 📊

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title 'add range select unlock' is vague and does not clearly describe the main changes, which involve adding Daily time period support and restructuring the time period/view mode controls in the UpcomingUnlockVolumeChart component.	Clarify the title to better reflect the actual changes, such as 'Add Daily time period to unlock volume chart' or 'Add time period selector to unlock volume chart'.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/components/Charts/UpcomingUnlockVolumeChart.tsx (2)

87-92: Consider extracting duplicated grouping key logic.

This ternary chain is duplicated at lines 114-119. Extract to a helper for maintainability:

♻️ Proposed refactor

Add a helper function before the component:

function getGroupingKey(date: dayjs.Dayjs, timePeriod: TimePeriod): number {
  if (timePeriod === 'Daily') return date.startOf('day').unix()
  if (timePeriod === 'Weekly') return date.startOf('week').unix()
  return date.startOf('month').unix()
}

Then replace both occurrences with:

-const key =
-  timePeriod === 'Daily'
-    ? date.startOf('day').unix()
-    : timePeriod === 'Weekly'
-      ? date.startOf('week').unix()
-      : date.startOf('month').unix()
+const key = getGroupingKey(date, timePeriod)

---

168-179: Prefer spread operator over double type casting.

The as unknown as string[] pattern is awkward. Use the spread operator for cleaner conversion:

♻️ Proposed refactor

 <TagGroup
   selectedValue={timePeriod}
   setValue={(value: TimePeriod) => setTimePeriod(value)}
-  values={TIME_PERIODS as unknown as string[]}
+  values={[...TIME_PERIODS]}
 />
 <TagGroup
   selectedValue={viewMode}
   setValue={(value: ViewMode) => setViewMode(value)}
-  values={VIEW_MODES as unknown as string[]}
+  values={[...VIEW_MODES]}
 />

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 465e674 and 9c5d71f.

📒 Files selected for processing (1)

• src/components/Charts/UpcomingUnlockVolumeChart.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/Charts/UpcomingUnlockVolumeChart.tsx (1)

src/components/TagGroup.tsx (1)

• TagGroup (16-63)

🔇 Additional comments (3)

src/components/Charts/UpcomingUnlockVolumeChart.tsx (3)

30-31: LGTM!

The expansion of TIME_PERIODS to include 'Daily' is correctly typed with as const, and the TimePeriod type is properly derived.

---

166-166: LGTM!

The lowercase conversion correctly maps TimePeriod values to the expected groupBy union type.

---

38-38: Verify: isFullView state has no toggle control.

The isFullView state is declared and used in the data filtering logic (line 56) but there's no UI to change it. Is this intentional for a future feature, or should a toggle be added alongside the new controls?