feat(analytics): 三个视图 Range 过滤器支持自定义日期范围 - #114
Conversation
Introduce AnalyticsRangeFilterControl with data-driven presets and a collapsible Custom range calendar, replacing the Select-based Range filter on the Caching, Cost and Logs dashboards. Range filter state now holds either a preset value or yyyy-MM-dd custom bounds. The analytics views still render mock metrics, so this is a UI-only change for now. Closes superduck-ai#110
|
Warning Review limit reached
Next review available in: 15 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (5)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![duckpr[bot]](https://avatars.githubusercontent.com/in/4166808?s=60&v=4){kind=small}
There was a problem hiding this comment.
DuckPR reviewer: opencode
Model: anthropic/glm-5.2
Caution
本 PR 引入的新依赖 date-fns 和 react-day-picker 未在 web/package.json 中声明，会导致安装或构建失败。
Reviewed changes — 为 Analytics 的 Caching / Cost / Logs 三个视图添加支持自定义日期范围的 Range 过滤器，并新增可复用的 Calendar 组件。
- 新增
AnalyticsRangeFilterControl，在 Popover 内提供预设单选和可折叠的 Custom range 日历选择。 - 将三个视图的 Range 过滤器从
FilterControl迁移到AnalyticsRangeFilterControl，并把 Range 状态类型改为判别式联合AnalyticsRangeFilter。 - 新增
web/src/shared/ui/calendar.tsx，基于react-day-pickerv9 实现 shadcn 风格的日期选择器。
⚠️ 新组件缺少测试覆盖
AnalyticsRangeFilterControl 是本次新增的核心交互组件，包含预设选择、自定义范围展开/收起、日期区间选择、Apply / Clear 等状态。当前 AnalyticsPages.test.tsx 未覆盖 Range 过滤器的交互，且没有为 AnalyticsRangeFilterControl 单独编写测试。建议在合并前补充至少覆盖以下路径的测试：
- 预设项点击后关闭 Popover 并更新已选值；
- 展开 Custom range、选择起止日期、点击 Apply 后状态变为
kind: 'custom'； - 选择不完整日期时 Apply 按钮禁用；
- 关闭 Popover 后重新打开时，草稿重置为已提交值。
anthropic/glm-5.2 ｜ 𝕏
Postroggy
changed the title
Postroggy
changed the title
1. web/package.json: 新增 date-fns 和 react-day-picker 依赖声明（代码已在用，但未声明导致构建报错）
2. web/bun.lock: bun install 后自动更新
3. AnalyticsRangeFilterControl.tsx: rangeLabel/rangeFilterLabel 中的用户可见日期格式从硬编码 format(date, 'MMM d, yyyy') 改为 useFormatters().date(date, {dateStyle:'medium'})；applyCustomRange 中机器可读的 yyyy-MM-dd 格式保留不变
There was a problem hiding this comment.
DuckPR reviewer: opencode
Model: anthropic/glm-5.2
Important
上一次 review 提出的依赖声明和日期国际化问题已修复，但新组件 AnalyticsRangeFilterControl 仍缺少测试覆盖，建议在合并前补充。
Reviewed changes — 针对上一次 review 的反馈补充了缺失依赖并统一了日期国际化格式。
- 在
web/package.json和web/bun.lock中声明并锁定date-fns与react-day-picker依赖。 AnalyticsRangeFilterControl的日期展示由硬编码date-fns英文格式改为useFormatters().date()，走项目统一国际化方案。- Caching / Cost / Logs 三个视图的 Range 状态仍使用
{ kind: 'preset'; value: string } | { kind: 'custom'; from: string; to: string }判别式联合。
⚠️ AnalyticsRangeFilterControl 仍缺少测试覆盖
AnalyticsRangeFilterControl 是本次新增的核心交互组件，包含预设选择、自定义范围展开/收起、日期区间选择、Apply / Clear 等状态。虽然新提交修复了依赖和国际化问题，但尚未针对该组件补充测试；当前 AnalyticsPages.test.tsx 也未覆盖 Range 过滤器的交互。
建议在合并前至少覆盖以下路径：
- 预设项点击后关闭 Popover 并更新已选值；
- 展开 Custom range、选择起止日期、点击 Apply 后状态变为
kind: 'custom'； - 选择不完整日期时 Apply 按钮禁用；
- 关闭 Popover 后重新打开时，草稿重置为已提交值。
anthropic/glm-5.2 ｜ 𝕏
There was a problem hiding this comment.
DuckPR reviewer: opencode
Model: anthropic/glm-5.2
✅ No new issues found.
Reviewed changes — 本次提交为 AnalyticsRangeFilterControl 补充了交互测试，回应了上一次 review 关于测试覆盖的反馈。
- 新增
AnalyticsRangeFilterControl.test.tsx，覆盖预设项点击、自定义范围选择与 Apply、Apply 禁用状态、Popover 关闭后草稿重置。 - 测试沿用了现有
AnalyticsPages.test.tsx的dynamic import+resetTestDom模式。
ℹ️ Nitpicks
AnalyticsRangeFilterControl.test.tsx可考虑补充初始值为kind: 'custom'的场景，验证重新打开 Popover 时草稿被正确初始化并展开 Custom range。
anthropic/glm-5.2 ｜ 𝕏
|
@coderabbitai review |
✅ Action performedReview finished.
|
1 participant
关联 #110。
背景
#110 提出 Analytics 的 Range 过滤器目前只有固定预设，缺少自定义日期范围。本 PR 为 Caching / Cost / Logs 三个视图的 Range 过滤器增加自定义日期范围选择。
改动
AnalyticsRangeFilterControl：基于 Popover，上方是各视图原有的预设项（单选），下方是可折叠的「Custom range」入口；展开后是日历区间选择（react-day-picker），需要同时选中起止日期并点击 Apply 才提交，避免半选状态被应用。预设项点击即生效并关闭弹层。FilterControl改为AnalyticsRangeFilterControl，预设列表沿用各视图原有的rangeOptions。{ kind: 'preset'; value: string } | { kind: 'custom'; from: string; to: string }，自定义范围起止用yyyy-MM-dd。web/src/shared/ui/calendar.tsx（shadcn 标准 Calendar 组件，基于 react-day-picker），供自定义范围选择使用。说明
bun run build、bun test（368 pass）、just web-format-check、ESLint naming / complexity、jscpd duplicates。实现方向和文案待维护者确认。