feat: Feature Analytics label grouping (#6067) by talissoncosta · Pull Request #7215 · Flagsmith/flagsmith

talissoncosta · 2026-04-10T18:12:37Z

I have read the Contributing Guide.
I have added information to docs/ if required so people know about the feature.
I have filled in the "Changes" section below.
I have filled in the "How did you test this code" section below.

Changes

Feature Analytics label grouping

When the API returns labelled evaluation buckets (e.g. different SDKs), the chart now stacks bars by label value with different colours, and shows a MultiSelect filter to show/hide specific labels. Falls back to environment-based grouping when no labels are present.

New infrastructure

Component	What it does
BarChart (`web/components/charts/BarChart.tsx`)	Reusable bar chart wrapping Recharts. Stacked/non-stacked modes, staggered entrance animation, zero custom CSS.
ChartTooltip (`web/components/charts/ChartTooltip.tsx`)	Custom tooltip with per-series breakdown and total. Uses Bootstrap utilities + ColorSwatch.
ColorSwatch (`web/components/ColorSwatch.tsx`)	Reusable colour indicator (sm 8px, md 12px, lg 16px).
getCSSVar (`common/utils/getCSSVar.ts`)	Reads resolved CSS custom property values at runtime for JS chart libraries. Respects dark mode.
Chart color tokens	`--color-chart-1` through `--color-chart-10` with light/dark variants. `CHART_COLOURS` array export.
analyticsUtils.ts	Extracted data utilities (`hasLabelledData`, `aggregateByLabels`, `buildEnvColorMap`).

Storybook stories

Components/BarChart — WithLabelledBuckets (interactive filter), WithoutLabels, SingleSeries
Components/MultiSelect — Default, WithLabel, WithColors, PreSelected, Disabled, Inline, Small

How did you test this code?

In Storybook

npm run storybook
Components/BarChart — all 3 stories render with fake data, filter works
Components/MultiSelect — all 7 variants render in light + dark mode

In the app

ENV=local npm run dev
Navigate to a feature flag → Usage tab → chart renders with environment colours
If labelled data exists, bars stack by SDK with filter dropdown

Automated

npx eslint — 0 errors
npm run typecheck — 0 new errors

Stack: 2/3 — depends on PR #7209 (Storybook fixes). PR #7214 (react-select tokens) is independent.

🤖 Generated with Claude Code

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Zero custom CSS — tooltip uses Bootstrap utilities + semantic tokens. ChartTooltip extracted to own file for single responsibility. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Data utilities extracted to analyticsUtils.ts for testability. Closes #6067 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

vercel · 2026-04-10T18:12:41Z

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

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	Apr 10, 2026 6:46pm
flagsmith-frontend-staging	Ready	Preview, Comment	Apr 10, 2026 6:46pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	Apr 10, 2026 6:46pm

Chart tokens were sorted alphabetically (1, 10, 2, 3...) instead of numerically (1, 2, 3...10). Use localeCompare with numeric option. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Update featureAnalytics service queryFn to return rawEntries alongside chartData, so FeatureAnalytics doesn't need to call hooks in a loop - Remove useGetEnvironmentAnalyticsQuery calls inside .map() (React rules-of-hooks violation) - Rename analyticsUtils.ts to utils.ts - Add 14 unit tests for hasLabelledData, aggregateByLabels, buildEnvColorMap - Fix natural sort order in token generator Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Add useChartColors() and useChartColorMap() hooks (common/hooks/) - Remove getCSSVars/CHART_COLOURS imports from utils.ts — colors are now passed as a parameter from the hook - Remove buildEnvColorMap — replaced by useChartColorMap hook - Update tests to pass mock colors directly (no jest.mock needed) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Replace getCSSVars/CHART_COLOURS with useChartColorMap hook - Replace inline color/fontSize/margin styles with Bootstrap utilities Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Remove common/utils/getCSSVar.ts — only had one consumer - Inline resolveColors() into useChartColors hook with JSDoc explaining why we read from DOM (Recharts needs hex strings, not var() refs) - Add comment on rawEntries in service queryFn explaining the dual return (chartData for environments, rawEntries for labels) - Add comment on label priority in utils.ts - Regenerate tokens.ts with updated comment Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

claude

⚠️ 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.

github-actions · 2026-04-10T18:51:12Z

Docker builds report

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

github-actions · 2026-04-10T18:56:23Z

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

11 passed

Details

11 tests across 8 suites
0.9 seconds
aaa56af
🔄 Run: #15983 (attempt 1)

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

11 passed

Details

11 tests across 8 suites
51.5 seconds
aaa56af
🔄 Run: #15983 (attempt 1)

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

17 passed

Details

17 tests across 14 suites
1 minute, 2 seconds
aaa56af
🔄 Run: #15983 (attempt 1)

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

1 passed

Details

1 test across 1 suite
56.2 seconds
aaa56af
🔄 Run: #15983 (attempt 1)

github-actions · 2026-04-10T18:58:26Z

Visual Regression

16 screenshots compared. See report for details.
View full report

talissoncosta

talissoncosta · 2026-04-11T02:12:46Z

frontend/common/hooks/useChartColors.ts

+
+/**
+ * Reads the computed value of CSS custom properties from the document root.
+ *


Recharts' fill prop needs hex strings, not CSS var refs. getComputedStyle resolves to the current theme value automatically (dark mode respected).

talissoncosta · 2026-04-11T02:12:46Z

frontend/common/services/useFeatureAnalytics.ts

          }

+          // Collect raw entries with labels intact for label-based grouping.
+          // chartData aggregates by environment (existing behaviour),


chartData = existing environment aggregation. rawEntries = new, preserves per-entry labels so FeatureAnalytics can group by SDK without calling hooks inside a loop (was a rules-of-hooks violation).

talissoncosta · 2026-04-11T02:12:46Z

frontend/web/components/charts/BarChart.tsx

+import React, { FC } from 'react'
+import {
+  Bar,
+  BarChart as RawBarChart,


Alias to avoid shadowing — our component is named BarChart which would collide with the Recharts import.

talissoncosta · 2026-04-11T02:12:46Z

frontend/web/components/charts/BarChart.tsx

+          height={80}
+          angle={-90}
+          textAnchor='end'
+          tick={{ dx: -4, fill: '#656D7B', fontSize: 11 }}


#656D7B is --slate-500. Recharts tick/axis props need hex strings (same limitation as fill). Consistent with existing Recharts usage. Could use axis colour tokens in a follow-up.

talissoncosta · 2026-04-11T02:12:46Z

frontend/web/components/charts/BarChart.tsx

+            dataKey={label}
+            stackId={stacked ? 'series' : undefined}
+            fill={colorMap.get(label) || '#656D7B'}
+            animationBegin={index * 80}


Staggered bar entrance — each series starts 80ms after the previous. Uses Recharts built-in animation, not the motion library.

talissoncosta · 2026-04-11T02:12:46Z

frontend/web/components/ColorSwatch.tsx

+    className={classNames('d-inline-block flex-shrink-0 rounded-xs', className)}
+    style={{
+      backgroundColor: color,
+      height: SIZE_MAP[size],


backgroundColor is dynamic (per instance). height/width have no Bootstrap utility for 8/12/16px. borderRadius uses the rounded-xs token class.

talissoncosta · 2026-04-11T02:12:46Z

frontend/web/components/feature-page/FeatureNavTab/utils.ts

+  rawData.forEach((entry) => {
+    const date = entry.day
+    // Priority: user_agent (SDK name) > client_application_name > 'Unknown'
+    const labelValue =


Priority from backend: user_agent (SDK name, most useful) > client_application_name (fallback) > Unknown (empty/missing labels).

talissoncosta · 2026-04-11T02:12:46Z

frontend/web/styles/_tokens.scss

  --red-200: #f9cbc9;
  --red-300: #f5a5a2;
  --red-400: #f57c78;
-  --red-50: #fef2f1;


Not duplication — first block is :root (light, 500/600 shades), this block is .dark (lighter 300/400 shades for contrast on dark backgrounds). Same pattern as all other semantic tokens.

talissoncosta and others added 5 commits April 10, 2026 15:10

feat: Add chart color tokens and getCSSVar utility

ab7d3bc

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: Add ColorSwatch component

42b6e48

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: Add reusable BarChart and ChartTooltip components

3650dc1

Zero custom CSS — tooltip uses Bootstrap utilities + semantic tokens. ChartTooltip extracted to own file for single responsibility. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: Add label-based grouping to Feature Analytics charts

9a98bdf

Data utilities extracted to analyticsUtils.ts for testability. Closes #6067 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: Add BarChart and MultiSelect Storybook stories

1ed2108

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

vercel bot deployed to Preview – flagsmith-frontend-preview April 10, 2026 18:13 View deployment

vercel bot deployed to Preview – flagsmith-frontend-staging April 10, 2026 18:13 View deployment

github-actions bot added the front-end Issue related to the React Front End Dashboard label Apr 10, 2026

fix: Use natural sort order for token generation

5da399e

Chart tokens were sorted alphabetically (1, 10, 2, 3...) instead of numerically (1, 2, 3...10). Use localeCompare with numeric option. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

github-actions bot added the feature New feature or request label Apr 10, 2026

vercel bot deployed to Preview – flagsmith-frontend-staging April 10, 2026 18:17 View deployment

vercel bot deployed to Preview – flagsmith-frontend-preview April 10, 2026 18:17 View deployment

github-actions bot added feature New feature or request and removed feature New feature or request labels Apr 10, 2026

vercel bot deployed to Preview – flagsmith-frontend-staging April 10, 2026 18:21 View deployment

vercel bot deployed to Preview – flagsmith-frontend-preview April 10, 2026 18:22 View deployment

github-actions bot added feature New feature or request and removed feature New feature or request labels Apr 10, 2026

vercel bot deployed to Preview – flagsmith-frontend-staging April 10, 2026 18:33 View deployment

vercel bot deployed to Preview – flagsmith-frontend-preview April 10, 2026 18:33 View deployment

github-actions bot added feature New feature or request and removed feature New feature or request labels Apr 10, 2026

fix: Use useChartColorMap hook in stories, replace inline styles

9ccaf9d

- Replace getCSSVars/CHART_COLOURS with useChartColorMap hook - Replace inline color/fontSize/margin styles with Bootstrap utilities Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

vercel bot deployed to Preview – flagsmith-frontend-staging April 10, 2026 18:40 View deployment

github-actions bot added feature New feature or request and removed feature New feature or request labels Apr 10, 2026

vercel bot deployed to Preview – flagsmith-frontend-preview April 10, 2026 18:40 View deployment

github-actions bot added feature New feature or request and removed feature New feature or request labels Apr 10, 2026

vercel bot deployed to Preview – flagsmith-frontend-staging April 10, 2026 18:45 View deployment

vercel bot deployed to Preview – flagsmith-frontend-preview April 10, 2026 18:46 View deployment

talissoncosta marked this pull request as ready for review April 10, 2026 18:49

talissoncosta requested a review from a team as a code owner April 10, 2026 18:49

talissoncosta requested review from kyle-ssg and removed request for a team April 10, 2026 18:49

claude bot reviewed Apr 10, 2026

View reviewed changes

github-actions bot added feature New feature or request and removed feature New feature or request labels Apr 10, 2026

talissoncosta linked an issue Apr 10, 2026 that may be closed by this pull request

Implement dashboard functionality for displaying SDK metrics in Feature Analytics charts #6067

Open

talissoncosta commented Apr 11, 2026

View reviewed changes

Conversation

talissoncosta commented Apr 10, 2026

Changes

Feature Analytics label grouping

New infrastructure

Storybook stories

How did you test this code?

In Storybook

In the app

Automated

Uh oh!

vercel bot commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

claude bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Docker builds report

Uh oh!

github-actions bot commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Details

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

Details

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

Details

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

Details

Uh oh!

github-actions bot commented Apr 10, 2026

Visual Regression

Uh oh!

talissoncosta left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel bot commented Apr 10, 2026 •

edited

Loading

github-actions bot commented Apr 10, 2026 •

edited

Loading

github-actions bot commented Apr 10, 2026 •

edited

Loading

talissoncosta left a comment •

edited

Loading