Skip to content

feat: table report view#362

Open
BelminH wants to merge 3 commits into
Openpanel-dev:mainfrom
BelminH:feature/table-report-view
Open

feat: table report view#362
BelminH wants to merge 3 commits into
Openpanel-dev:mainfrom
BelminH:feature/table-report-view

Conversation

@BelminH
Copy link
Copy Markdown

@BelminH BelminH commented May 8, 2026

  • Added "table" as an option when creating a report
  • Added the option to aggregate the total values into one column (eg. last 7 days becomes one column instead of 7)
  • Added the option to rename and hide certain columns from table view

Summary by CodeRabbit

  • New Features
    • Added a Table chart type for reports and dashboards (new icon shown where applicable).
    • Column management panel: rename columns, toggle visibility, and switch between per-date or aggregate date display (includes aggregate date totals).
    • Table reports support loading/empty/error states and respect saved table options (aliases, hidden columns, date mode).

@CLAassistant
Copy link
Copy Markdown

CLAassistant commented May 8, 2026

CLA assistant check
All committers have signed the CLA.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 8, 2026

Review Change Stack
No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 600f8607-78f1-4040-83c6-2e0fc31401f8

📥 Commits

Reviewing files that changed from the base of the PR and between ea5b724 and a5507b7.

📒 Files selected for processing (2)
  • apps/start/src/components/report-chart/common/report-table-utils.ts
  • apps/start/src/components/report-chart/common/report-table.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
  • apps/start/src/components/report-chart/common/report-table-utils.ts
  • apps/start/src/components/report-chart/common/report-table.tsx

📝 Walkthrough

Walkthrough

This PR adds comprehensive support for a new "table" chart type across schema, validation, data transformation, UI (table + toolbar), Redux state, and chart integration so reports can render as configurable, aliasable, and hideable tables with per-date or aggregated date modes.

Changes

Table Chart Type Support

Layer / File(s) Summary
Database Schema & Constants
packages/db/prisma/schema.prisma, packages/db/prisma/migrations/..., packages/constants/index.ts
ChartType enum gains table variant; database migration adds PostgreSQL enum value; chartTypes constant maps table to display label 'Table'.
Validation & Types
packages/validation/src/index.ts
New zTableOptions schema defines table-specific fields (columnAliases, hiddenColumns, dateMode); zReportOptions discriminated union includes table variant; ITableOptions type exported.
Data Transformation
apps/start/src/components/report-chart/common/report-table-utils.ts
New getBreakdownPropertyKeys helper computes breakdown keys from metadata or inferred breakdown-N strings; transformToTableData and transformToHierarchicalGroups now compute and return breakdownPropertyKeys alongside names, reordered consistently.
Toolbar Column Controls
apps/start/src/components/report-chart/common/report-table-toolbar.tsx
ReportTableToolbar accepts optional column configuration props; conditionally renders "Columns" popover with date-mode switch and per-column visibility/alias controls when handlers present.
Report Table with Aliasing & Visibility
apps/start/src/components/report-chart/common/report-table.tsx
ReportTable enhanced with column alias/visibility/date-mode props and callbacks; helper functions resolve aliases, check visibility, compute date totals; metric columns centralized; aggregate date mode adds date-total column with computed color range; per-date mode respects visibility filters.
Redux Table Configuration
apps/start/src/components/report/reportSlice.ts
changeChartType initializes table defaults; new reducers changeTableColumnAlias, changeTableColumnVisibility, changeTableDateMode manage column state with dirty marking and initialization.
Chart Integration
apps/start/src/components/report-chart/index.tsx, apps/start/src/components/report-chart/table/index.tsx, apps/start/src/components/chat/tool-results/chat-report-result.tsx
ReportChart renders new ReportTableChart on chartType === 'table'; ReportTableChart fetches data via tRPC, manages visible series, wires table interactions to Redux (edit mode only); humanizeChartType recognizes table.
Icon Support
apps/start/src/components/report/ReportChartType.tsx, apps/start/src/routes/_app.$organizationId.$projectId.dashboards.tsx
TableIcon from lucide-react added to chart-type icon lookups for chart selector and dashboard report listing.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

A table blooms in the report's display,
Columns that hide or show their way,
Aliases whisper, totals glow bright,
Redux tends settings deep in the night,
A rabbit cheers—rows aligned just right. 🐰📊

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title "feat: table report view" clearly and concisely summarizes the main change: adding a new table-based report view with associated configuration features.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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.

❤️ Share

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

@BelminH BelminH marked this pull request as ready for review May 8, 2026 14:24
@BelminH
Copy link
Copy Markdown
Author

BelminH commented May 8, 2026

Screenshot 2026-05-08 at 16 28 44

@BelminH
Copy link
Copy Markdown
Author

BelminH commented May 8, 2026

Screenshot 2026-05-08 at 16 29 43

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (3)
apps/start/src/components/report-chart/common/report-table.tsx (1)

540-662: 💤 Low value

Optional: skip dateTotalRange work in 'columns' mode.

dateTotalRange is computed unconditionally inside the metricRanges memo, but it’s only consumed by the date-total column rendered in aggregate mode. For tables with many series and many dates, the per-row getDateTotal(row) reduce in the multi-series branch is wasted work when dateMode === 'columns'. You can early-return on dateMode when computing it, and add dateMode to this memo’s deps. Skip if you’d rather keep the branches uniform.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/start/src/components/report-chart/common/report-table.tsx` around lines
540 - 662, The memo currently computes dateTotalRange (used by the "date-total"
column) even when dateMode === 'columns' where that column is not rendered;
update the useMemo that returns metricRanges, dateRanges, dateTotalRange to
accept dateMode in its dependency array and early-return or skip the per-row
getDateTotal work when dateMode === 'columns' (e.g., avoid calling
getDateTotal(row) and updating dateTotalRange in both the single-series and
multi-series branches); keep metricRanges/dateRanges logic intact but
short-circuit only the dateTotal-related calculations to reduce work when
dateMode is 'columns'.
packages/db/prisma/migrations/20260508120000_add_table_chart_type/migration.sql (1)

1-2: 💤 Low value

LGTM — optional: add IF NOT EXISTS.

The enum addition is correct. If you want defensive idempotency in case the migration gets partially re-applied or run on a DB where 'table' already exists in ChartType, consider ALTER TYPE "ChartType" ADD VALUE IF NOT EXISTS 'table'; (PG ≥ 9.6).

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@packages/db/prisma/migrations/20260508120000_add_table_chart_type/migration.sql`
around lines 1 - 2, Update the enum alteration to be idempotent by adding the IF
NOT EXISTS guard to the ALTER TYPE statement that adds the 'table' value to
ChartType (i.e., change the ALTER TYPE "ChartType" ADD VALUE 'table' operation
in migration.sql to use ADD VALUE IF NOT EXISTS 'table'), so reapplying the
migration or running it against a DB that already has the value won't error
(requires PostgreSQL ≥ 9.6).
apps/start/src/components/report-chart/common/report-table-utils.ts (1)

689-693: 💤 Low value

Unreachable fallback — minor.

originalBreakdownPropertyKeys[oldIndex] is always populated by getBreakdownPropertyKeys (either from breakdowns[].name or the synthetic breakdown-${i+1}), so the ?? \breakdown-${oldIndex + 1}`branch never runs. Either drop the fallback or assert non-null with!to make the intent explicit. Same comment applies to lines 750–752 intransformToHierarchicalGroups`.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/start/src/components/report-chart/common/report-table-utils.ts` around
lines 689 - 693, The fallback in the mapping for breakdownPropertyKeys is
unreachable because getBreakdownPropertyKeys always returns a value, so replace
the nullish-coalescing fallback with a non-null assertion to make the intent
explicit: update the mapping that uses originalBreakdownPropertyKeys[oldIndex]
to assert it is non-null (use `!`) instead of `?? \`breakdown-${oldIndex +
1}\``; apply the same change to the analogous mapping in
transformToHierarchicalGroups (the lines around the previous 750–752) so both
places consistently use non-null assertions for originalBreakdownPropertyKeys.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/start/src/components/report-chart/common/report-table-utils.ts`:
- Around line 410-422: getBreakdownPropertyKeys currently returns raw breakdown
names which can collide; change it so returned keys incorporate the index (e.g.,
`${b.name}-${index}` or `${b.name}#${index}`) while preserving the original name
content for readability, so that downstream code in report-table.tsx (where
aliasableColumns builds keys like `breakdown:${breakdownPropertyKeys[index] ??
propertyName}`) receives unique identifiers and alias/visibility state no longer
collides across duplicate breakdown names; update any consumers that expect just
a name to strip the index suffix when showing labels but keep the indexed key
for storage and comparison (reference: getBreakdownPropertyKeys and
aliasableColumns usage in report-table.tsx).

In `@apps/start/src/components/report-chart/common/report-table.tsx`:
- Around line 300-318: aliasableColumns can emit non-unique keys when
breakdownPropertyKeys contains duplicates; update the key generation in the
aliasableColumns useMemo (the entry that currently builds
`breakdown:${breakdownPropertyKeys[index] ?? propertyName}`) to guarantee
uniqueness by incorporating the index or another stable unique token (e.g.,
`breakdown:${breakdownPropertyKeys[index] ?? propertyName}:${index}`) so each
breakdown column gets a distinct key and alias/visibility state; also note the
upstream getBreakdownPropertyKeys in report-table-utils.ts should be fixed, but
make this change here to prevent duplicate React keys and shared state
immediately.

---

Nitpick comments:
In `@apps/start/src/components/report-chart/common/report-table-utils.ts`:
- Around line 689-693: The fallback in the mapping for breakdownPropertyKeys is
unreachable because getBreakdownPropertyKeys always returns a value, so replace
the nullish-coalescing fallback with a non-null assertion to make the intent
explicit: update the mapping that uses originalBreakdownPropertyKeys[oldIndex]
to assert it is non-null (use `!`) instead of `?? \`breakdown-${oldIndex +
1}\``; apply the same change to the analogous mapping in
transformToHierarchicalGroups (the lines around the previous 750–752) so both
places consistently use non-null assertions for originalBreakdownPropertyKeys.

In `@apps/start/src/components/report-chart/common/report-table.tsx`:
- Around line 540-662: The memo currently computes dateTotalRange (used by the
"date-total" column) even when dateMode === 'columns' where that column is not
rendered; update the useMemo that returns metricRanges, dateRanges,
dateTotalRange to accept dateMode in its dependency array and early-return or
skip the per-row getDateTotal work when dateMode === 'columns' (e.g., avoid
calling getDateTotal(row) and updating dateTotalRange in both the single-series
and multi-series branches); keep metricRanges/dateRanges logic intact but
short-circuit only the dateTotal-related calculations to reduce work when
dateMode is 'columns'.

In
`@packages/db/prisma/migrations/20260508120000_add_table_chart_type/migration.sql`:
- Around line 1-2: Update the enum alteration to be idempotent by adding the IF
NOT EXISTS guard to the ALTER TYPE statement that adds the 'table' value to
ChartType (i.e., change the ALTER TYPE "ChartType" ADD VALUE 'table' operation
in migration.sql to use ADD VALUE IF NOT EXISTS 'table'), so reapplying the
migration or running it against a DB that already has the value won't error
(requires PostgreSQL ≥ 9.6).
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5cf397d5-c24b-4e93-b9e5-9eee2ff60f48

📥 Commits

Reviewing files that changed from the base of the PR and between 0d122cd and ea5b724.

📒 Files selected for processing (13)
  • apps/start/src/components/chat/tool-results/chat-report-result.tsx
  • apps/start/src/components/report-chart/common/report-table-toolbar.tsx
  • apps/start/src/components/report-chart/common/report-table-utils.ts
  • apps/start/src/components/report-chart/common/report-table.tsx
  • apps/start/src/components/report-chart/index.tsx
  • apps/start/src/components/report-chart/table/index.tsx
  • apps/start/src/components/report/ReportChartType.tsx
  • apps/start/src/components/report/reportSlice.ts
  • apps/start/src/routes/_app.$organizationId.$projectId.dashboards.tsx
  • packages/constants/index.ts
  • packages/db/prisma/migrations/20260508120000_add_table_chart_type/migration.sql
  • packages/db/prisma/schema.prisma
  • packages/validation/src/index.ts

Comment thread apps/start/src/components/report-chart/common/report-table-utils.ts
Comment thread apps/start/src/components/report-chart/common/report-table.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants