Skip to content

refactor: consolidate charts with BarChart component#7223

Open
talissoncosta wants to merge 4 commits intomainfrom
refactor/consolidate-charts-with-barchart
Open

refactor: consolidate charts with BarChart component#7223
talissoncosta wants to merge 4 commits intomainfrom
refactor/consolidate-charts-with-barchart

Conversation

@talissoncosta
Copy link
Copy Markdown
Contributor

@talissoncosta talissoncosta commented Apr 13, 2026

  • I have read the Contributing Guide.
  • I have filled in the "Changes" section below.
  • I have filled in the "How did you test this code" section below.

Changes

Follow-up to #7215 — migrates the two remaining raw-recharts consumers to the shared <BarChart /> component.

Migrated

Component What changed
OrganisationUsage Replaced ~200 lines of inline recharts JSX + custom tooltip with a single <BarChart> call. Uses seriesLabels for display names, MetricDataKey typed Record for compile-time key completeness. Null metric values coalesced to 0.
SingleSDKLabelsChart Collapsed from 120 lines to 30. Uses <BarChart> with showLegend.
OrganisationUsageMetrics Pre-formats day to 'D MMM', switches MapRecord<string, string>, removes unused props.

BarChart API additions

  • barSize?: number — fixed bar width (OrganisationUsage uses 14px)
  • verticalGrid?: boolean — toggles vertical grid lines (default true)

Empty states

Both charts now use the EmptyState component instead of bare text or empty axes — consistent with the Feature Analytics pattern from #7215.

Cleanup

  • Deleted web/styles/3rdParty/_recharts.scss — legacy tooltip rules + .dark {} block no longer needed
  • Removed @import "recharts" from _index.scss

Visual comparison

Expected: no visual changes on the chart itself. Empty states are improved.

How did you test this code?

  • App: Organisation → Usage → By Endpoint + By SDK
  • Dark mode: bar + axis + tooltip colours update via CSS cascade
  • Empty states: verified on orgs with no usage data
  • Automated: lint clean, no new type errors

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 13, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Apr 16, 2026 4:17pm
flagsmith-frontend-staging Ready Ready Preview, Comment Apr 16, 2026 4:17pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Apr 16, 2026 4:17pm

Request Review

@github-actions github-actions bot added front-end Issue related to the React Front End Dashboard refactor labels Apr 13, 2026
@talissoncosta talissoncosta force-pushed the feat/feature-analytics-6067 branch 2 times, most recently from 8ce136f to 0ec66cd Compare April 15, 2026 12:12
Base automatically changed from feat/feature-analytics-6067 to main April 16, 2026 14:03
…rts SCSS

Replaces the two raw-recharts consumers with the shared <BarChart />
component introduced in #7215. Both pages keep their behaviour and
visual contract; the JSX collapses substantially.

BarChart API additions to support these consumers:
- `barSize?: number` — fixed bar width in pixels (OrganisationUsage
  uses 14px to fit four series per day comfortably)
- `verticalGrid?: boolean` (default true) — toggles CartesianGrid's
  vertical lines (legacy charts hide them)

Migrations:
- OrganisationUsage.container.tsx (4 metric series stacked, custom
  display labels via seriesLabels, selection-driven series filter,
  pre-formatted day axis)
- SingleSDKLabelsChart.tsx (per-SDK stacked, palette colour map
  passed in from parent, MultiSelect-driven SDK filter)
- OrganisationUsageMetrics.container.tsx — pre-formats day to
  'D MMM' (matches the new chart-side day-as-display-string contract),
  switches userAgentColorMap from Map to Record (consistent with
  BarChart's prop after #7215)

Cleanup:
- Delete web/styles/3rdParty/_recharts.scss entirely — its rules
  existed solely to style the two legacy charts' tooltips. With both
  consumers migrated, no consumer of recharts global classNames
  remains; the new BarChart's ChartTooltip uses Bootstrap utilities +
  semantic token classes directly. Drop the @import too.
- SingleSDKLabelsChart loses unused props (`metricKey`, `colours`)
  that the migration made redundant.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@talissoncosta talissoncosta force-pushed the refactor/consolidate-charts-with-barchart branch from 1444d90 to 27debb5 Compare April 16, 2026 15:14
AggregateUsageDataItem has `number | null` fields; ChartDataPoint
expects `number`. Explicitly coalesce nulls to 0 in the mapping
instead of bypassing with a type assertion.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replaces the bare "No usage recorded." text with the reusable
EmptyState component (icon + title + description) — consistent with
the Feature Analytics chart empty state pattern.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Show the EmptyState component instead of rendering an empty chart
with bare axes when there's no SDK data.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copy link
Copy Markdown

@claude claude bot left a comment

Choose a reason for hiding this comment

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

⚠️ Code review skipped — your organization's overage spend limit has been reached.

Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit at claude.ai/admin-settings/claude-code.

Once credits are available, reopen this pull request to trigger a review.

@talissoncosta talissoncosta requested a review from Zaimwa9 April 16, 2026 16:35
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 16, 2026

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-api-test:pr-7223 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-e2e:pr-7223 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-7223 Finished ✅ Results
ghcr.io/flagsmith/flagsmith:pr-7223 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-private-cloud:pr-7223 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-frontend:pr-7223 Finished ✅ Results

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 16, 2026

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  11 passed

Details

stats  11 tests across 8 suites
duration  44.1 seconds
commit  f49c227
info  🔄 Run: #16126 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  11 passed

Details

stats  11 tests across 8 suites
duration  58.2 seconds
commit  f49c227
info  🔄 Run: #16126 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  17 passed

Details

stats  17 tests across 14 suites
duration  1 minute
commit  f49c227
info  🔄 Run: #16126 (attempt 1)

@talissoncosta talissoncosta changed the title refactor: Consolidate charts with BarChart component refactor: consolidate charts with BarChart component Apr 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

front-end Issue related to the React Front End Dashboard refactor

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant