From ab7d3bc9c28ea0ba8e81cba85763922655f04cd9 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 10 Apr 2026 14:44:08 -0300
Subject: [PATCH 01/10] feat: Add chart color tokens and getCSSVar utility

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/common/theme/tokens.json             |  12 +++
 frontend/common/theme/tokens.ts               |  14 +++
 frontend/common/utils/getCSSVar.ts            |  26 +++++
 .../TokenReference.generated.stories.tsx      | 102 ++++++++++++++++++
 frontend/scripts/generate-tokens.mjs          |  37 +++++++
 frontend/web/styles/_tokens.scss              |  22 ++++
 6 files changed, 213 insertions(+)
 create mode 100644 frontend/common/utils/getCSSVar.ts

diff --git a/frontend/common/theme/tokens.json b/frontend/common/theme/tokens.json
index 672535b68241..acd40cad8317 100644
--- a/frontend/common/theme/tokens.json
+++ b/frontend/common/theme/tokens.json
@@ -131,6 +131,18 @@
       "info": { "cssVar": "--color-icon-info", "light": "#0aaddf", "dark": "#0aaddf" }
     }
   },
+  "chart": {
+    "1": { "cssVar": "--color-chart-1", "light": "#0aaddf", "dark": "#45bce0", "description": "First series in charts. Blue." },
+    "2": { "cssVar": "--color-chart-2", "light": "#ef4d56", "dark": "#f57c78", "description": "Second series. Red." },
+    "3": { "cssVar": "--color-chart-3", "light": "#27ab95", "dark": "#56ccad", "description": "Third series. Green." },
+    "4": { "cssVar": "--color-chart-4", "light": "#ff9f43", "dark": "#ffc08a", "description": "Fourth series. Orange." },
+    "5": { "cssVar": "--color-chart-5", "light": "#7a4dfc", "dark": "#906af6", "description": "Fifth series. Purple." },
+    "6": { "cssVar": "--color-chart-6", "light": "#0b8bb2", "dark": "#7ecde2", "description": "Sixth series. Blue dark." },
+    "7": { "cssVar": "--color-chart-7", "light": "#e61b26", "dark": "#f5a5a2", "description": "Seventh series. Red dark." },
+    "8": { "cssVar": "--color-chart-8", "light": "#13787b", "dark": "#87d4c4", "description": "Eighth series. Green dark." },
+    "9": { "cssVar": "--color-chart-9", "light": "#fa810c", "dark": "#ffd7b5", "description": "Ninth series. Orange dark." },
+    "10": { "cssVar": "--color-chart-10", "light": "#6837fc", "dark": "#b794ff", "description": "Tenth series. Purple dark." }
+  },
   "radius": {
     "none": { "cssVar": "--radius-none", "value": "0px", "description": "Sharp corners. Tables, dividers." },
     "xs": { "cssVar": "--radius-xs", "value": "2px", "description": "Barely rounded. Badges, tags." },
diff --git a/frontend/common/theme/tokens.ts b/frontend/common/theme/tokens.ts
index eb361c183eaf..2d154a7e355e 100644
--- a/frontend/common/theme/tokens.ts
+++ b/frontend/common/theme/tokens.ts
@@ -157,6 +157,20 @@ export const easing: Record<string, TokenEntry> = {
   },
 }
 
+// Chart colours — use with getCSSVar() for runtime resolution
+export const CHART_COLOURS = [
+  '--color-chart-1',
+  '--color-chart-10',
+  '--color-chart-2',
+  '--color-chart-3',
+  '--color-chart-4',
+  '--color-chart-5',
+  '--color-chart-6',
+  '--color-chart-7',
+  '--color-chart-8',
+  '--color-chart-9',
+] as const
+
 export type TokenCategory = keyof typeof tokens
 export type TokenName<C extends TokenCategory> = keyof (typeof tokens)[C]
 export type RadiusScale = keyof typeof radius
diff --git a/frontend/common/utils/getCSSVar.ts b/frontend/common/utils/getCSSVar.ts
new file mode 100644
index 000000000000..23daea6e3ab9
--- /dev/null
+++ b/frontend/common/utils/getCSSVar.ts
@@ -0,0 +1,26 @@
+/**
+ * Read the computed value of a CSS custom property from the document root.
+ * Use this when JS code needs actual colour strings (e.g. Recharts fills)
+ * rather than var() references.
+ *
+ * Respects dark mode — returns the currently resolved value.
+ *
+ * @example
+ *   import { getCSSVar } from 'common/utils/getCSSVar'
+ *   const fill = getCSSVar('--color-chart-1') // '#0aaddf' in light, '#45bce0' in dark
+ */
+export function getCSSVar(name: string): string {
+  if (typeof document === 'undefined') return ''
+  return getComputedStyle(document.documentElement)
+    .getPropertyValue(name)
+    .trim()
+}
+
+/**
+ * Read multiple CSS custom properties at once.
+ */
+export function getCSSVars(names: readonly string[]): string[] {
+  if (typeof document === 'undefined') return names.map(() => '')
+  const style = getComputedStyle(document.documentElement)
+  return names.map((name) => style.getPropertyValue(name).trim())
+}
diff --git a/frontend/documentation/TokenReference.generated.stories.tsx b/frontend/documentation/TokenReference.generated.stories.tsx
index f85d80ec4671..6c5809bb7dc3 100644
--- a/frontend/documentation/TokenReference.generated.stories.tsx
+++ b/frontend/documentation/TokenReference.generated.stories.tsx
@@ -384,6 +384,108 @@ export const AllTokens: StoryObj = {
           </tr>
         </tbody>
       </table>
+      <h3>Chart colours</h3>
+      <table className='docs-table'>
+        <thead>
+          <tr>
+            <th>Token</th>
+            <th>Value</th>
+            <th>Usage</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <code>--color-chart-1</code>
+            </td>
+            <td>
+              <code>#0aaddf</code>
+            </td>
+            <td>First series in charts. Blue.</td>
+          </tr>
+          <tr>
+            <td>
+              <code>--color-chart-2</code>
+            </td>
+            <td>
+              <code>#ef4d56</code>
+            </td>
+            <td>Second series. Red.</td>
+          </tr>
+          <tr>
+            <td>
+              <code>--color-chart-3</code>
+            </td>
+            <td>
+              <code>#27ab95</code>
+            </td>
+            <td>Third series. Green.</td>
+          </tr>
+          <tr>
+            <td>
+              <code>--color-chart-4</code>
+            </td>
+            <td>
+              <code>#ff9f43</code>
+            </td>
+            <td>Fourth series. Orange.</td>
+          </tr>
+          <tr>
+            <td>
+              <code>--color-chart-5</code>
+            </td>
+            <td>
+              <code>#7a4dfc</code>
+            </td>
+            <td>Fifth series. Purple.</td>
+          </tr>
+          <tr>
+            <td>
+              <code>--color-chart-6</code>
+            </td>
+            <td>
+              <code>#0b8bb2</code>
+            </td>
+            <td>Sixth series. Blue dark.</td>
+          </tr>
+          <tr>
+            <td>
+              <code>--color-chart-7</code>
+            </td>
+            <td>
+              <code>#e61b26</code>
+            </td>
+            <td>Seventh series. Red dark.</td>
+          </tr>
+          <tr>
+            <td>
+              <code>--color-chart-8</code>
+            </td>
+            <td>
+              <code>#13787b</code>
+            </td>
+            <td>Eighth series. Green dark.</td>
+          </tr>
+          <tr>
+            <td>
+              <code>--color-chart-9</code>
+            </td>
+            <td>
+              <code>#fa810c</code>
+            </td>
+            <td>Ninth series. Orange dark.</td>
+          </tr>
+          <tr>
+            <td>
+              <code>--color-chart-10</code>
+            </td>
+            <td>
+              <code>#6837fc</code>
+            </td>
+            <td>Tenth series. Purple dark.</td>
+          </tr>
+        </tbody>
+      </table>
       <h3>Radius</h3>
       <table className='docs-table'>
         <thead>
diff --git a/frontend/scripts/generate-tokens.mjs b/frontend/scripts/generate-tokens.mjs
index b45be36ad549..f845dfcfce4a 100644
--- a/frontend/scripts/generate-tokens.mjs
+++ b/frontend/scripts/generate-tokens.mjs
@@ -39,6 +39,8 @@ const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1)
 
 const NON_COLOUR = ['radius', 'shadow', 'duration', 'easing']
 const DESCRIBED = ['radius', 'shadow', 'duration', 'easing']
+// Chart colours are like colour tokens (light/dark) but not under "color"
+const CHART_CATEGORY = 'chart'
 
 // Build reverse lookups for primitives
 const hexToPrimitive = new Map()
@@ -133,6 +135,18 @@ function buildScssLines() {
     rootLines.push('')
   }
 
+  // Chart colour tokens
+  if (json[CHART_CATEGORY]) {
+    rootLines.push('  // Chart')
+    for (const [, e] of sorted(json[CHART_CATEGORY])) {
+      rootLines.push(`  ${e.cssVar}: ${toPrimitiveRef(e.light)};`)
+      if (e.dark && e.dark !== e.light) {
+        darkLines.push(`  ${e.cssVar}: ${toPrimitiveRef(e.dark)};`)
+      }
+    }
+    rootLines.push('')
+  }
+
   // Non-colour tokens
   for (const cat of NON_COLOUR) {
     if (!json[cat]) continue
@@ -239,6 +253,18 @@ function generateTs() {
   const colourLines = buildTsColourLines()
   const describedBlocks = buildTsDescribedLines()
 
+  // Chart tokens as a flat array for JS chart libraries
+  const chartLines = []
+  if (json[CHART_CATEGORY]) {
+    chartLines.push('// Chart colours — use with getCSSVar() for runtime resolution')
+    chartLines.push(`export const CHART_COLOURS = [`)
+    for (const [, e] of sorted(json[CHART_CATEGORY])) {
+      chartLines.push(`  '${e.cssVar}',`)
+    }
+    chartLines.push('] as const')
+    chartLines.push('')
+  }
+
   const output = [
     '// =============================================================================',
     '// Design Tokens — AUTO-GENERATED from common/theme/tokens.json',
@@ -256,6 +282,7 @@ function generateTs() {
     '',
     ...describedBlocks,
     '',
+    ...chartLines,
     'export type TokenCategory = keyof typeof tokens',
     'export type TokenName<C extends TokenCategory> = keyof (typeof tokens)[C]',
     'export type RadiusScale = keyof typeof radius',
@@ -278,6 +305,16 @@ function generateMcpStory() {
     tables.push(...buildTableRows(`Colour: ${cat}`, data))
   }
 
+  // Chart colours
+  if (json[CHART_CATEGORY]) {
+    const chartData = Object.values(json[CHART_CATEGORY]).map((e) => ({
+      cssVar: e.cssVar,
+      value: e.light,
+      description: e.description || '',
+    }))
+    tables.push(...buildTableRows('Chart colours', chartData, { showDescription: true }))
+  }
+
   for (const cat of DESCRIBED) {
     if (!json[cat]) continue
     const data = Object.values(json[cat]).map((e) => ({
diff --git a/frontend/web/styles/_tokens.scss b/frontend/web/styles/_tokens.scss
index 68db7cadb0f4..554c043af100 100644
--- a/frontend/web/styles/_tokens.scss
+++ b/frontend/web/styles/_tokens.scss
@@ -134,6 +134,18 @@
   --color-icon-success: var(--green-500);
   --color-icon-warning: var(--orange-500);
 
+  // Chart
+  --color-chart-1: var(--blue-500);
+  --color-chart-10: var(--purple-600);
+  --color-chart-2: var(--red-500);
+  --color-chart-3: var(--green-500);
+  --color-chart-4: var(--orange-500);
+  --color-chart-5: var(--purple-500);
+  --color-chart-6: var(--blue-600);
+  --color-chart-7: var(--red-600);
+  --color-chart-8: var(--green-600);
+  --color-chart-9: var(--orange-600);
+
   // Radius
   --radius-2xl: 18px;
   --radius-full: 9999px;
@@ -191,6 +203,16 @@
   --color-icon-default: var(--slate-0);
   --color-icon-disabled: oklch(from var(--slate-0) l c h / 0.32);
   --color-icon-secondary: var(--slate-300);
+  --color-chart-1: var(--blue-400);
+  --color-chart-10: var(--purple-300);
+  --color-chart-2: var(--red-400);
+  --color-chart-3: var(--green-400);
+  --color-chart-4: var(--orange-300);
+  --color-chart-5: var(--purple-400);
+  --color-chart-6: var(--blue-300);
+  --color-chart-7: var(--red-300);
+  --color-chart-8: var(--green-300);
+  --color-chart-9: var(--orange-200);
   --shadow-lg: 0px 8px 16px oklch(from var(--slate-1000) l c h / 0.35);
   --shadow-md: 0px 4px 8px oklch(from var(--slate-1000) l c h / 0.30);
   --shadow-sm: 0px 1px 2px oklch(from var(--slate-1000) l c h / 0.20);

From 42b6e481f1f2083f04da2d73fdf0db54f33fca70 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 10 Apr 2026 14:44:12 -0300
Subject: [PATCH 02/10] feat: Add ColorSwatch component

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/web/components/ColorSwatch.tsx | 35 +++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 frontend/web/components/ColorSwatch.tsx

diff --git a/frontend/web/components/ColorSwatch.tsx b/frontend/web/components/ColorSwatch.tsx
new file mode 100644
index 000000000000..9e4ece554ce0
--- /dev/null
+++ b/frontend/web/components/ColorSwatch.tsx
@@ -0,0 +1,35 @@
+import React, { FC } from 'react'
+import classNames from 'classnames'
+
+type ColorSwatchSize = 'sm' | 'md' | 'lg'
+
+type ColorSwatchProps = {
+  color: string
+  size?: ColorSwatchSize
+  className?: string
+}
+
+const SIZE_MAP: Record<ColorSwatchSize, number> = {
+  lg: 16,
+  md: 12,
+  sm: 8,
+}
+
+const ColorSwatch: FC<ColorSwatchProps> = ({
+  className,
+  color,
+  size = 'md',
+}) => (
+  <span
+    aria-hidden='true'
+    className={classNames('d-inline-block flex-shrink-0 rounded-xs', className)}
+    style={{
+      backgroundColor: color,
+      height: SIZE_MAP[size],
+      width: SIZE_MAP[size],
+    }}
+  />
+)
+
+ColorSwatch.displayName = 'ColorSwatch'
+export default ColorSwatch

From 3650dc106cca7d793afbde8e4a4f51195fbfb87d Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 10 Apr 2026 14:44:18 -0300
Subject: [PATCH 03/10] feat: Add reusable BarChart and ChartTooltip components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/web/components/charts/BarChart.tsx   | 74 +++++++++++++++++++
 .../web/components/charts/ChartTooltip.tsx    | 44 +++++++++++
 2 files changed, 118 insertions(+)
 create mode 100644 frontend/web/components/charts/BarChart.tsx
 create mode 100644 frontend/web/components/charts/ChartTooltip.tsx

diff --git a/frontend/web/components/charts/BarChart.tsx b/frontend/web/components/charts/BarChart.tsx
new file mode 100644
index 000000000000..5273ab801802
--- /dev/null
+++ b/frontend/web/components/charts/BarChart.tsx
@@ -0,0 +1,74 @@
+import React, { FC } from 'react'
+import {
+  Bar,
+  BarChart as RawBarChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts'
+import ChartTooltip from './ChartTooltip'
+
+export type ChartDataPoint = {
+  day: string
+} & Record<string, number>
+
+type BarChartProps = {
+  data: ChartDataPoint[]
+  series: string[]
+  colorMap: Map<string, string>
+  height?: number
+  xAxisInterval?: number
+  stacked?: boolean
+}
+
+const BarChart: FC<BarChartProps> = ({
+  colorMap,
+  data,
+  height = 400,
+  series,
+  stacked = true,
+  xAxisInterval = 0,
+}) => {
+  return (
+    <ResponsiveContainer height={height} width='100%'>
+      <RawBarChart data={data}>
+        <CartesianGrid strokeDasharray='3 5' strokeOpacity={0.4} />
+        <XAxis
+          dataKey='day'
+          padding='gap'
+          interval={xAxisInterval}
+          height={80}
+          angle={-90}
+          textAnchor='end'
+          tick={{ dx: -4, fill: '#656D7B', fontSize: 11 }}
+          tickLine={false}
+          axisLine={{ stroke: '#656D7B' }}
+        />
+        <YAxis
+          tick={{ fill: '#656D7B', fontSize: 11 }}
+          axisLine={{ stroke: '#656D7B' }}
+          tickFormatter={(v) => (v >= 1000 ? `${(v / 1000).toFixed(0)}k` : v)}
+        />
+        <Tooltip cursor={{ fill: 'transparent' }} content={<ChartTooltip />} />
+        <Legend wrapperStyle={{ paddingTop: 16 }} />
+        {series.map((label, index) => (
+          <Bar
+            key={label}
+            dataKey={label}
+            stackId={stacked ? 'series' : undefined}
+            fill={colorMap.get(label) || '#656D7B'}
+            animationBegin={index * 80}
+            animationDuration={600}
+            animationEasing='ease-out'
+          />
+        ))}
+      </RawBarChart>
+    </ResponsiveContainer>
+  )
+}
+
+BarChart.displayName = 'BarChart'
+export default BarChart
diff --git a/frontend/web/components/charts/ChartTooltip.tsx b/frontend/web/components/charts/ChartTooltip.tsx
new file mode 100644
index 000000000000..bee4a2225857
--- /dev/null
+++ b/frontend/web/components/charts/ChartTooltip.tsx
@@ -0,0 +1,44 @@
+import React, { FC } from 'react'
+import { TooltipProps } from 'recharts'
+import {
+  NameType,
+  ValueType,
+} from 'recharts/types/component/DefaultTooltipContent'
+import ColorSwatch from 'components/ColorSwatch'
+
+const formatNumber = (n: number): string =>
+  typeof n === 'number' ? n.toLocaleString() : ''
+
+const ChartTooltip: FC<TooltipProps<ValueType, NameType>> = ({
+  active,
+  label,
+  payload,
+}) => {
+  if (!active || !payload || payload.length === 0) return null
+  const total = payload.reduce(
+    (sum: number, el: any) => sum + (el.value || 0),
+    0,
+  )
+
+  return (
+    <div className='bg-surface-default border-default rounded-md shadow-md py-2'>
+      <div className='px-3 py-1 fs-small fw-semibold text-default'>{label}</div>
+      <hr className='border-default my-0 mb-2' />
+      {payload.map((el: any) => (
+        <div
+          key={el.dataKey}
+          className='d-flex align-items-center gap-2 px-3 py-1 fs-small'
+        >
+          <ColorSwatch color={el.fill} size='sm' />
+          <span className='text-secondary'>{el.dataKey}:</span>
+          <span className='fw-medium'>{formatNumber(el.value)}</span>
+        </div>
+      ))}
+      <div className='border-top border-default mt-2 pt-2 px-3 fs-small fw-semibold'>
+        Total: {formatNumber(total)}
+      </div>
+    </div>
+  )
+}
+
+export default ChartTooltip

From 9a98bdfb364e2dfa0a7f26c4151cfd41da2947fe Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 10 Apr 2026 14:44:24 -0300
Subject: [PATCH 04/10] feat: Add label-based grouping to Feature Analytics
 charts

Data utilities extracted to analyticsUtils.ts for testability.

Closes #6067

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/common/types/responses.ts            |   5 +
 .../FeatureNavTab/FeatureAnalytics.tsx        | 186 ++++++++++--------
 .../FeatureNavTab/analyticsUtils.ts           |  74 +++++++
 3 files changed, 186 insertions(+), 79 deletions(-)
 create mode 100644 frontend/web/components/feature-page/FeatureNavTab/analyticsUtils.ts

diff --git a/frontend/common/types/responses.ts b/frontend/common/types/responses.ts
index 85d05a85e86b..9209f8814fbd 100644
--- a/frontend/common/types/responses.ts
+++ b/frontend/common/types/responses.ts
@@ -1219,6 +1219,11 @@ export type Res = {
   environmentAnalytics: {
     day: string
     count: number
+    labels?: {
+      user_agent?: string | null
+      client_application_name?: string | null
+      client_application_version?: string | null
+    } | null
   }[]
   featureList: {
     results: ProjectFlag[]
diff --git a/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics.tsx b/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics.tsx
index 24a97f9b3cdc..87ce2354014d 100644
--- a/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics.tsx
+++ b/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics.tsx
@@ -1,20 +1,18 @@
-import React, { FC, useState } from 'react'
-import { sortBy } from 'lodash'
-import Color from 'color'
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts'
+import React, { FC, useMemo, useState } from 'react'
 import InfoMessage from 'components/InfoMessage'
 import EnvironmentTagSelect from 'components/EnvironmentTagSelect'
-import { useGetFeatureAnalyticsQuery } from 'common/services/useFeatureAnalytics'
-import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
-import Utils from 'common/utils/utils'
+import BarChart from 'components/charts/BarChart'
+import { MultiSelect } from 'components/base/select/multi-select'
+import {
+  useGetEnvironmentAnalyticsQuery,
+  useGetFeatureAnalyticsQuery,
+} from 'common/services/useFeatureAnalytics'
+import { Res } from 'common/types/responses'
+import {
+  aggregateByLabels,
+  buildEnvColorMap,
+  hasLabelledData,
+} from './analyticsUtils'
 
 type FlagAnalyticsType = {
   projectId: string
@@ -28,6 +26,8 @@ const FlagAnalytics: FC<FlagAnalyticsType> = ({
   projectId,
 }) => {
   const [environmentIds, setEnvironmentIds] = useState(defaultEnvironmentIds)
+  const [selectedLabels, setSelectedLabels] = useState<string[]>([])
+
   const { data, isLoading } = useGetFeatureAnalyticsQuery(
     {
       environment_ids: environmentIds,
@@ -39,45 +39,111 @@ const FlagAnalytics: FC<FlagAnalyticsType> = ({
       skip: !environmentIds?.length || !featureId || !projectId,
     },
   )
-  const { data: environments } = useGetEnvironmentsQuery({
-    projectId: `${projectId}`,
+
+  const rawResponses = environmentIds.map((envId) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { data: envData } = useGetEnvironmentAnalyticsQuery(
+      {
+        environment_id: envId,
+        feature_id: featureId,
+        period: 30,
+        project_id: projectId,
+      },
+      {
+        skip: !envId || !featureId || !projectId,
+      },
+    )
+    return envData
   })
 
+  const allRawData = useMemo(
+    (): Res['environmentAnalytics'] => rawResponses.filter(Boolean).flat(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(rawResponses)],
+  )
+
+  const isLabelled = hasLabelledData(allRawData)
+
+  const {
+    chartData: labelledChartData,
+    colorMap,
+    labelValues,
+  } = useMemo(
+    () =>
+      isLabelled
+        ? aggregateByLabels(allRawData)
+        : {
+            chartData: [],
+            colorMap: new Map<string, string>(),
+            labelValues: [],
+          },
+    [isLabelled, allRawData],
+  )
+
+  const envColorMap = useMemo(
+    () => buildEnvColorMap(environmentIds),
+    [environmentIds],
+  )
+
+  const labelOptions = useMemo(
+    () => labelValues.map((v) => ({ label: v, value: v })),
+    [labelValues],
+  )
+
+  const filteredLabels =
+    selectedLabels.length > 0
+      ? labelValues.filter((v) => selectedLabels.includes(v))
+      : labelValues
+
   const handleEnvironmentChange = (value: string[] | string | undefined) => {
-    // If cleared (empty array or undefined), revert to default environment IDs
     if (!value || (Array.isArray(value) && value.length === 0)) {
       setEnvironmentIds(defaultEnvironmentIds)
     } else {
-      setEnvironmentIds(value as string[])
+      setEnvironmentIds(Array.isArray(value) ? value : [value])
     }
   }
 
-  // Check if there's any actual data (non-zero counts) across all days and environments
-  const hasData =
-    data &&
-    Array.isArray(data) &&
-    data.length > 0 &&
-    data.some((dayData) =>
-      environmentIds.some((envId) => (dayData[envId] as number) > 0),
-    )
+  const hasData = isLabelled
+    ? labelledChartData.length > 0
+    : data &&
+      Array.isArray(data) &&
+      data.length > 0 &&
+      data.some((dayData) =>
+        environmentIds.some((envId) => Number(dayData[envId] || 0) > 0),
+      )
 
   return (
     <>
       <FormGroup className='mb-4'>
         <h5 className='mb-2'>Flag events for last 30 days</h5>
-        <EnvironmentTagSelect
-          projectId={projectId}
-          idField='id'
-          value={environmentIds}
-          multiple
-          onChange={handleEnvironmentChange}
-        />
+        <div className='d-flex gap-3 mb-3 flex-wrap'>
+          <div className='flex-fill'>
+            <EnvironmentTagSelect
+              projectId={projectId}
+              idField='id'
+              value={environmentIds}
+              multiple
+              onChange={handleEnvironmentChange}
+            />
+          </div>
+          {isLabelled && labelValues.length > 1 && (
+            <div className='flex-fill' style={{ maxWidth: 400 }}>
+              <MultiSelect
+                label='Filter by SDK'
+                options={labelOptions}
+                selectedValues={selectedLabels}
+                onSelectionChange={setSelectedLabels}
+                colorMap={colorMap}
+              />
+            </div>
+          )}
+        </div>
         {isLoading && (
           <div className='text-center'>
             <Loader />
           </div>
         )}
-        {!isLoading && data && !hasData && (
+        {!isLoading && !hasData && (
           <div
             style={{ height: 200 }}
             className='text-center justify-content-center align-items-center text-muted mt-4 d-flex'
@@ -87,50 +153,12 @@ const FlagAnalytics: FC<FlagAnalyticsType> = ({
           </div>
         )}
         {hasData && (
-          <div>
-            <ResponsiveContainer height={400} width='100%' className='mt-4'>
-              <BarChart data={data}>
-                <CartesianGrid strokeDasharray='3 5' strokeOpacity={0.4} />
-                <XAxis
-                  dataKey='day'
-                  padding='gap'
-                  interval={0}
-                  height={100}
-                  angle={-90}
-                  textAnchor='end'
-                  tick={{ dx: -4, fill: '#656D7B' }}
-                  tickLine={false}
-                  axisLine={{ stroke: '#656D7B' }}
-                />
-                <YAxis
-                  tick={{ fill: '#656D7B' }}
-                  axisLine={{ stroke: '#656D7B' }}
-                />
-                <Tooltip
-                  cursor={{ fill: 'transparent' }}
-                  labelStyle={{ color: '#1a1a1a' }}
-                />
-                {sortBy(environmentIds, (id) =>
-                  environments?.results?.findIndex((env) => `${env.id}` === id),
-                ).map((id) => {
-                  let index = environments?.results.findIndex(
-                    (env) => `${env.id}` === id,
-                  )
-                  if (index === -1) index = 0
-                  return (
-                    <Bar
-                      key={id}
-                      dataKey={id}
-                      stackId='1'
-                      fill={`${Color(Utils.getTagColour(index))
-                        .alpha(0.75)
-                        .rgb()}`}
-                    />
-                  )
-                })}
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
+          <BarChart
+            data={isLabelled ? labelledChartData : data || []}
+            series={isLabelled ? filteredLabels : environmentIds}
+            colorMap={isLabelled ? colorMap : envColorMap}
+            xAxisInterval={2}
+          />
         )}
       </FormGroup>
       <InfoMessage>
diff --git a/frontend/web/components/feature-page/FeatureNavTab/analyticsUtils.ts b/frontend/web/components/feature-page/FeatureNavTab/analyticsUtils.ts
new file mode 100644
index 000000000000..30bb522300c0
--- /dev/null
+++ b/frontend/web/components/feature-page/FeatureNavTab/analyticsUtils.ts
@@ -0,0 +1,74 @@
+import { ChartDataPoint } from 'components/charts/BarChart'
+import { Res } from 'common/types/responses'
+import { CHART_COLOURS } from 'common/theme/tokens'
+import { getCSSVars } from 'common/utils/getCSSVar'
+
+/**
+ * Check if the analytics data contains labelled buckets.
+ */
+export function hasLabelledData(
+  rawData: Res['environmentAnalytics'] | undefined,
+): boolean {
+  if (!rawData) return false
+  return rawData.some(
+    (entry) => entry.labels && Object.keys(entry.labels).length > 0,
+  )
+}
+
+/**
+ * Aggregate raw environment analytics into label-grouped chart data.
+ * Each unique label value becomes a series in the stacked chart.
+ */
+export function aggregateByLabels(rawData: Res['environmentAnalytics']): {
+  chartData: ChartDataPoint[]
+  colorMap: Map<string, string>
+  labelValues: string[]
+} {
+  const grouped: Record<string, ChartDataPoint> = {}
+  const labelSet = new Set<string>()
+  const labelList: string[] = []
+
+  rawData.forEach((entry) => {
+    const date = entry.day
+    const labelValue =
+      entry.labels?.user_agent ||
+      entry.labels?.client_application_name ||
+      'Unknown'
+
+    if (!labelSet.has(labelValue)) {
+      labelSet.add(labelValue)
+      labelList.push(labelValue)
+    }
+
+    if (!grouped[date]) {
+      grouped[date] = { day: date }
+    }
+    grouped[date][labelValue] = (grouped[date][labelValue] || 0) + entry.count
+  })
+
+  const resolvedColors = getCSSVars(CHART_COLOURS)
+  const colorMap = new Map<string, string>()
+  labelList.forEach((label, index) => {
+    colorMap.set(label, resolvedColors[index % resolvedColors.length])
+  })
+
+  return {
+    chartData: Object.values(grouped),
+    colorMap,
+    labelValues: labelList,
+  }
+}
+
+/**
+ * Build a color map for environment-based (non-labelled) chart mode.
+ */
+export function buildEnvColorMap(
+  environmentIds: string[],
+): Map<string, string> {
+  const resolvedColors = getCSSVars(CHART_COLOURS)
+  const map = new Map<string, string>()
+  environmentIds.forEach((id, index) => {
+    map.set(id, resolvedColors[index % resolvedColors.length])
+  })
+  return map
+}

From 1ed21088339d219fc8c9dabe3bb04c5628a28781 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 10 Apr 2026 14:44:28 -0300
Subject: [PATCH 05/10] feat: Add BarChart and MultiSelect Storybook stories

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/BarChart.stories.tsx           | 181 ++++++++++++++++++
 .../components/MultiSelect.stories.tsx        | 153 +++++++++++++++
 2 files changed, 334 insertions(+)
 create mode 100644 frontend/documentation/components/BarChart.stories.tsx
 create mode 100644 frontend/documentation/components/MultiSelect.stories.tsx

diff --git a/frontend/documentation/components/BarChart.stories.tsx b/frontend/documentation/components/BarChart.stories.tsx
new file mode 100644
index 000000000000..edfff7bd1b59
--- /dev/null
+++ b/frontend/documentation/components/BarChart.stories.tsx
@@ -0,0 +1,181 @@
+import React, { useMemo, useState } from 'react'
+import type { Meta, StoryObj } from 'storybook'
+import BarChart, { ChartDataPoint } from 'components/charts/BarChart'
+import { MultiSelect } from 'components/base/select/multi-select'
+import { CHART_COLOURS } from 'common/theme/tokens'
+import { getCSSVars } from 'common/utils/getCSSVar'
+
+// ============================================================================
+// Fake data
+// ============================================================================
+
+const SDKS = [
+  'flagsmith-js-sdk',
+  'flagsmith-python-sdk',
+  'flagsmith-java-sdk',
+  'flagsmith-go-sdk',
+  'flagsmith-ruby-sdk',
+]
+
+function generateFakeData(days: number, labels: string[]): ChartDataPoint[] {
+  const data: ChartDataPoint[] = []
+  const now = new Date()
+
+  const baseMap: Record<string, number> = {
+    Development: 1200,
+    Production: 5000,
+    Staging: 2400,
+    'flagsmith-js-sdk': 4500,
+    'flagsmith-python-sdk': 2200,
+  }
+
+  for (let i = days - 1; i >= 0; i--) {
+    const date = new Date(now)
+    date.setDate(date.getDate() - i)
+    const dayStr = date.toLocaleDateString('en-GB', {
+      day: 'numeric',
+      month: 'short',
+    })
+
+    const point: ChartDataPoint = { day: dayStr }
+    labels.forEach((label) => {
+      const base = baseMap[label] || 800
+      const variance = Math.floor(Math.random() * base * 0.4)
+      const weekday = (now.getDay() - i + 7) % 7
+      const weekendDip = weekday === 0 || weekday === 6 ? 0.4 : 1
+      point[label] = Math.floor((base + variance) * weekendDip)
+    })
+    data.push(point)
+  }
+  return data
+}
+
+function buildColorMap(labels: string[]): Map<string, string> {
+  const resolved = getCSSVars(CHART_COLOURS)
+  const map = new Map<string, string>()
+  labels.forEach((label, i) => {
+    map.set(label, resolved[i % resolved.length])
+  })
+  return map
+}
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+const meta: Meta<typeof BarChart> = {
+  component: BarChart,
+  tags: ['autodocs'],
+  title: 'Components/BarChart',
+}
+export default meta
+
+type Story = StoryObj<typeof BarChart>
+
+export const WithLabelledBuckets: Story = {
+  decorators: [
+    () => {
+      const labels = useMemo(() => SDKS.slice(0, 5), [])
+      const data = useMemo(() => generateFakeData(30, labels), [labels])
+      const colorMap = useMemo(() => buildColorMap(labels), [labels])
+      const [selectedLabels, setSelectedLabels] = useState<string[]>([])
+
+      const filteredLabels =
+        selectedLabels.length > 0
+          ? labels.filter((l) => selectedLabels.includes(l))
+          : labels
+
+      const labelOptions = labels.map((l) => ({ label: l, value: l }))
+
+      return (
+        <div style={{ maxWidth: 900 }}>
+          <p
+            style={{
+              color: 'var(--color-text-secondary)',
+              fontSize: 13,
+              marginBottom: 16,
+            }}
+          >
+            Stacked by SDK label — each color represents a different SDK sending
+            evaluations.
+          </p>
+          <div style={{ marginBottom: 16, maxWidth: 400 }}>
+            <MultiSelect
+              label='Filter by SDK'
+              options={labelOptions}
+              selectedValues={selectedLabels}
+              onSelectionChange={setSelectedLabels}
+              colorMap={colorMap}
+            />
+          </div>
+          <BarChart
+            data={data}
+            series={filteredLabels}
+            colorMap={colorMap}
+            xAxisInterval={2}
+          />
+        </div>
+      )
+    },
+  ],
+}
+
+export const WithoutLabels: Story = {
+  decorators: [
+    () => {
+      const labels = useMemo(() => ['Production', 'Staging', 'Development'], [])
+      const data = useMemo(() => generateFakeData(30, labels), [labels])
+      const colorMap = useMemo(() => buildColorMap(labels), [labels])
+
+      return (
+        <div style={{ maxWidth: 900 }}>
+          <p
+            style={{
+              color: 'var(--color-text-secondary)',
+              fontSize: 13,
+              marginBottom: 16,
+            }}
+          >
+            No labels — grouped by environment (current behaviour).
+          </p>
+          <BarChart
+            data={data}
+            series={labels}
+            colorMap={colorMap}
+            xAxisInterval={2}
+          />
+        </div>
+      )
+    },
+  ],
+}
+
+export const SingleSeries: Story = {
+  decorators: [
+    () => {
+      const labels = useMemo(() => ['flagsmith-js-sdk'], [])
+      const data = useMemo(() => generateFakeData(30, labels), [labels])
+      const colorMap = useMemo(() => buildColorMap(labels), [labels])
+
+      return (
+        <div style={{ maxWidth: 900 }}>
+          <p
+            style={{
+              color: 'var(--color-text-secondary)',
+              fontSize: 13,
+              marginBottom: 16,
+            }}
+          >
+            Single SDK — no filter needed when there's only one series.
+          </p>
+          <BarChart
+            data={data}
+            series={labels}
+            colorMap={colorMap}
+            xAxisInterval={2}
+          />
+        </div>
+      )
+    },
+  ],
+}
diff --git a/frontend/documentation/components/MultiSelect.stories.tsx b/frontend/documentation/components/MultiSelect.stories.tsx
new file mode 100644
index 000000000000..545461ace37a
--- /dev/null
+++ b/frontend/documentation/components/MultiSelect.stories.tsx
@@ -0,0 +1,153 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from 'storybook'
+import { MultiSelect } from 'components/base/select/multi-select'
+
+const SDK_OPTIONS = [
+  { label: 'flagsmith-js-sdk', value: 'js' },
+  { label: 'flagsmith-python-sdk', value: 'python' },
+  { label: 'flagsmith-java-sdk', value: 'java' },
+  { label: 'flagsmith-go-sdk', value: 'go' },
+  { label: 'flagsmith-ruby-sdk', value: 'ruby' },
+]
+
+const COLOUR_MAP = new Map([
+  ['js', '#0aaddf'],
+  ['python', '#7a4dfc'],
+  ['java', '#ef4d56'],
+  ['go', '#27ab95'],
+  ['ruby', '#ff9f43'],
+])
+
+const meta: Meta<typeof MultiSelect> = {
+  component: MultiSelect,
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 400, minHeight: 350 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ['autodocs'],
+  title: 'Components/MultiSelect',
+}
+export default meta
+
+type Story = StoryObj<typeof MultiSelect>
+
+export const Default: Story = {
+  decorators: [
+    () => {
+      const [selected, setSelected] = useState<string[]>([])
+      return (
+        <MultiSelect
+          options={SDK_OPTIONS}
+          selectedValues={selected}
+          onSelectionChange={setSelected}
+          placeholder='Select SDKs...'
+        />
+      )
+    },
+  ],
+}
+
+export const WithLabel: Story = {
+  decorators: [
+    () => {
+      const [selected, setSelected] = useState<string[]>([])
+      return (
+        <MultiSelect
+          label='Filter by SDK'
+          options={SDK_OPTIONS}
+          selectedValues={selected}
+          onSelectionChange={setSelected}
+        />
+      )
+    },
+  ],
+}
+
+export const WithColors: Story = {
+  decorators: [
+    () => {
+      const [selected, setSelected] = useState<string[]>(['js', 'python'])
+      return (
+        <MultiSelect
+          label='Filter by SDK'
+          options={SDK_OPTIONS}
+          selectedValues={selected}
+          onSelectionChange={setSelected}
+          colorMap={COLOUR_MAP}
+        />
+      )
+    },
+  ],
+}
+
+export const PreSelected: Story = {
+  decorators: [
+    () => {
+      const [selected, setSelected] = useState<string[]>([
+        'js',
+        'python',
+        'java',
+      ])
+      return (
+        <MultiSelect
+          label='Selected SDKs'
+          options={SDK_OPTIONS}
+          selectedValues={selected}
+          onSelectionChange={setSelected}
+          colorMap={COLOUR_MAP}
+        />
+      )
+    },
+  ],
+}
+
+export const Disabled: Story = {
+  decorators: [
+    () => (
+      <MultiSelect
+        label='Disabled'
+        options={SDK_OPTIONS}
+        selectedValues={['js']}
+        onSelectionChange={() => {}}
+        disabled
+      />
+    ),
+  ],
+}
+
+export const Inline: Story = {
+  decorators: [
+    () => {
+      const [selected, setSelected] = useState<string[]>(['js', 'python'])
+      return (
+        <MultiSelect
+          label='Inline mode'
+          options={SDK_OPTIONS}
+          selectedValues={selected}
+          onSelectionChange={setSelected}
+          inline
+        />
+      )
+    },
+  ],
+}
+
+export const Small: Story = {
+  decorators: [
+    () => {
+      const [selected, setSelected] = useState<string[]>([])
+      return (
+        <MultiSelect
+          label='Small size'
+          options={SDK_OPTIONS}
+          selectedValues={selected}
+          onSelectionChange={setSelected}
+          size='small'
+        />
+      )
+    },
+  ],
+}

From 5da399ebed99499e6bd403afea49be9c64595e87 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 10 Apr 2026 15:15:59 -0300
Subject: [PATCH 06/10] fix: Use natural sort order for token generation

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>
---
 frontend/common/theme/tokens.ts      |  2 +-
 frontend/scripts/generate-tokens.mjs |  2 +-
 frontend/web/styles/_tokens.scss     | 20 ++++++++++----------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/common/theme/tokens.ts b/frontend/common/theme/tokens.ts
index 2d154a7e355e..ee340135b8c6 100644
--- a/frontend/common/theme/tokens.ts
+++ b/frontend/common/theme/tokens.ts
@@ -160,7 +160,6 @@ export const easing: Record<string, TokenEntry> = {
 // Chart colours — use with getCSSVar() for runtime resolution
 export const CHART_COLOURS = [
   '--color-chart-1',
-  '--color-chart-10',
   '--color-chart-2',
   '--color-chart-3',
   '--color-chart-4',
@@ -169,6 +168,7 @@ export const CHART_COLOURS = [
   '--color-chart-7',
   '--color-chart-8',
   '--color-chart-9',
+  '--color-chart-10',
 ] as const
 
 export type TokenCategory = keyof typeof tokens
diff --git a/frontend/scripts/generate-tokens.mjs b/frontend/scripts/generate-tokens.mjs
index f845dfcfce4a..202e41717839 100644
--- a/frontend/scripts/generate-tokens.mjs
+++ b/frontend/scripts/generate-tokens.mjs
@@ -31,7 +31,7 @@ const kebabToCamel = (s) =>
   s.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase())
 
 const sorted = (obj) =>
-  Object.entries(obj).sort(([a], [b]) => a.localeCompare(b))
+  Object.entries(obj).sort(([a], [b]) => a.localeCompare(b, undefined, { numeric: true }))
 
 const esc = (s) => s.replace(/\\/g, '\\\\').replace(/'/g, "\\'")
 const lightVal = (e) => e.light ?? e.value
diff --git a/frontend/web/styles/_tokens.scss b/frontend/web/styles/_tokens.scss
index 554c043af100..3148f8a84415 100644
--- a/frontend/web/styles/_tokens.scss
+++ b/frontend/web/styles/_tokens.scss
@@ -5,66 +5,66 @@
 
 :root {
   // Primitives
+  --blue-50: #eef8fb;
   --blue-100: #d6eef5;
   --blue-200: #b3e0ed;
   --blue-300: #7ecde2;
   --blue-400: #45bce0;
-  --blue-50: #eef8fb;
   --blue-500: #0aaddf;
   --blue-600: #0b8bb2;
   --blue-700: #0b7190;
   --blue-800: #0b576e;
   --blue-900: #094456;
   --blue-950: #07313e;
+  --gold-50: #fefbf0;
   --gold-100: #fdf6e0;
   --gold-200: #faeec5;
   --gold-300: #fae392;
   --gold-400: #f9dc80;
-  --gold-50: #fefbf0;
   --gold-500: #f7d56e;
   --gold-600: #e5c55f;
   --gold-700: #d4b050;
   --gold-800: #b38f30;
   --gold-900: #8b7027;
   --gold-950: #64511e;
+  --green-50: #eef9f6;
   --green-100: #d6f1eb;
   --green-200: #b5e5da;
   --green-300: #87d4c4;
   --green-400: #56ccad;
-  --green-50: #eef9f6;
   --green-500: #27ab95;
   --green-600: #13787b;
   --green-700: #116163;
   --green-800: #0e4a4c;
   --green-900: #0c3a3b;
   --green-950: #09292a;
+  --orange-50: #fff5ec;
   --orange-100: #ffe9d4;
   --orange-200: #ffd7b5;
   --orange-300: #ffc08a;
   --orange-400: #efb47c;
-  --orange-50: #fff5ec;
   --orange-500: #ff9f43;
   --orange-600: #fa810c;
   --orange-700: #d06907;
   --orange-800: #9f5208;
   --orange-900: #7b4008;
   --orange-950: #592f07;
+  --purple-50: #f5f0ff;
   --purple-100: #e8dbff;
   --purple-200: #d4bcff;
   --purple-300: #b794ff;
   --purple-400: #906af6;
-  --purple-50: #f5f0ff;
   --purple-500: #7a4dfc;
   --purple-600: #6837fc;
   --purple-700: #4e25db;
   --purple-800: #3919b7;
   --purple-900: #2a2054;
   --purple-950: #1e163e;
+  --red-50: #fef2f1;
   --red-100: #fce5e4;
   --red-200: #f9cbc9;
   --red-300: #f5a5a2;
   --red-400: #f57c78;
-  --red-50: #fef2f1;
   --red-500: #ef4d56;
   --red-600: #e61b26;
   --red-700: #bb1720;
@@ -72,12 +72,11 @@
   --red-900: #701116;
   --red-950: #500d11;
   --slate-0: #ffffff;
+  --slate-50: #fafafb;
   --slate-100: #eff1f4;
-  --slate-1000: #000000;
   --slate-200: #e0e3e9;
   --slate-300: #9da4ae;
   --slate-400: #767d85;
-  --slate-50: #fafafb;
   --slate-500: #656d7b;
   --slate-600: #1a2634;
   --slate-700: #2d3443;
@@ -85,6 +84,7 @@
   --slate-850: #161d30;
   --slate-900: #15192b;
   --slate-950: #101628;
+  --slate-1000: #000000;
 
   // Surface
   --color-surface-action: var(--purple-600);
@@ -136,7 +136,6 @@
 
   // Chart
   --color-chart-1: var(--blue-500);
-  --color-chart-10: var(--purple-600);
   --color-chart-2: var(--red-500);
   --color-chart-3: var(--green-500);
   --color-chart-4: var(--orange-500);
@@ -145,6 +144,7 @@
   --color-chart-7: var(--red-600);
   --color-chart-8: var(--green-600);
   --color-chart-9: var(--orange-600);
+  --color-chart-10: var(--purple-600);
 
   // Radius
   --radius-2xl: 18px;
@@ -204,7 +204,6 @@
   --color-icon-disabled: oklch(from var(--slate-0) l c h / 0.32);
   --color-icon-secondary: var(--slate-300);
   --color-chart-1: var(--blue-400);
-  --color-chart-10: var(--purple-300);
   --color-chart-2: var(--red-400);
   --color-chart-3: var(--green-400);
   --color-chart-4: var(--orange-300);
@@ -213,6 +212,7 @@
   --color-chart-7: var(--red-300);
   --color-chart-8: var(--green-300);
   --color-chart-9: var(--orange-200);
+  --color-chart-10: var(--purple-300);
   --shadow-lg: 0px 8px 16px oklch(from var(--slate-1000) l c h / 0.35);
   --shadow-md: 0px 4px 8px oklch(from var(--slate-1000) l c h / 0.30);
   --shadow-sm: 0px 1px 2px oklch(from var(--slate-1000) l c h / 0.20);

From bfee56a099f8af8edca4917d06f8e45e02655092 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 10 Apr 2026 15:20:52 -0300
Subject: [PATCH 07/10] fix: Remove hooks-in-loop violation, add unit tests

- 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>
---
 .../common/services/useFeatureAnalytics.ts    |   9 +-
 frontend/common/types/responses.ts            |  13 +-
 .../FeatureNavTab/FeatureAnalytics.tsx        |  51 ++----
 .../FeatureNavTab/__tests__/utils.test.ts     | 160 ++++++++++++++++++
 .../{analyticsUtils.ts => utils.ts}           |   0
 5 files changed, 185 insertions(+), 48 deletions(-)
 create mode 100644 frontend/web/components/feature-page/FeatureNavTab/__tests__/utils.test.ts
 rename frontend/web/components/feature-page/FeatureNavTab/{analyticsUtils.ts => utils.ts} (100%)

diff --git a/frontend/common/services/useFeatureAnalytics.ts b/frontend/common/services/useFeatureAnalytics.ts
index 3f192eff56fa..beafe8daafb8 100644
--- a/frontend/common/services/useFeatureAnalytics.ts
+++ b/frontend/common/services/useFeatureAnalytics.ts
@@ -60,19 +60,24 @@ export const featureAnalyticsService = service
             preBuiltData.push(dayObj)
           }
 
+          const rawEntries: Res['environmentAnalytics'] = []
+
           responses.forEach((response, i) => {
             const environment_id = query.environment_ids[i]
 
             response.data?.forEach((entry) => {
+              rawEntries.push(entry)
               const date = moment(entry.day).format('Do MMM')
               const dayEntry = preBuiltData.find((d) => d.day === date)
               if (dayEntry) {
-                dayEntry[environment_id] = entry.count // Set count for specific environment ID
+                dayEntry[environment_id] = entry.count
               }
             })
           })
           return {
-            data: error ? [] : preBuiltData,
+            data: error
+              ? { chartData: [], rawEntries: [] }
+              : { chartData: preBuiltData, rawEntries },
             error,
           }
         },
diff --git a/frontend/common/types/responses.ts b/frontend/common/types/responses.ts
index 9209f8814fbd..3bf44f8e93d0 100644
--- a/frontend/common/types/responses.ts
+++ b/frontend/common/types/responses.ts
@@ -1211,11 +1211,14 @@ export type Res = {
   releasePipeline: SingleReleasePipeline
   pipelineStages: PagedResponse<PipelineStage>
   featureCodeReferences: FeatureCodeReferences[]
-  featureAnalytics: ({
-    day: string
-  } & {
-    [environmentId: string]: number
-  })[]
+  featureAnalytics: {
+    chartData: ({
+      day: string
+    } & {
+      [environmentId: string]: number
+    })[]
+    rawEntries: Res['environmentAnalytics']
+  }
   environmentAnalytics: {
     day: string
     count: number
diff --git a/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics.tsx b/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics.tsx
index 87ce2354014d..e4e0fa9a11cd 100644
--- a/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics.tsx
+++ b/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics.tsx
@@ -3,16 +3,8 @@ import InfoMessage from 'components/InfoMessage'
 import EnvironmentTagSelect from 'components/EnvironmentTagSelect'
 import BarChart from 'components/charts/BarChart'
 import { MultiSelect } from 'components/base/select/multi-select'
-import {
-  useGetEnvironmentAnalyticsQuery,
-  useGetFeatureAnalyticsQuery,
-} from 'common/services/useFeatureAnalytics'
-import { Res } from 'common/types/responses'
-import {
-  aggregateByLabels,
-  buildEnvColorMap,
-  hasLabelledData,
-} from './analyticsUtils'
+import { useGetFeatureAnalyticsQuery } from 'common/services/useFeatureAnalytics'
+import { aggregateByLabels, buildEnvColorMap, hasLabelledData } from './utils'
 
 type FlagAnalyticsType = {
   projectId: string
@@ -40,29 +32,7 @@ const FlagAnalytics: FC<FlagAnalyticsType> = ({
     },
   )
 
-  const rawResponses = environmentIds.map((envId) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const { data: envData } = useGetEnvironmentAnalyticsQuery(
-      {
-        environment_id: envId,
-        feature_id: featureId,
-        period: 30,
-        project_id: projectId,
-      },
-      {
-        skip: !envId || !featureId || !projectId,
-      },
-    )
-    return envData
-  })
-
-  const allRawData = useMemo(
-    (): Res['environmentAnalytics'] => rawResponses.filter(Boolean).flat(),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(rawResponses)],
-  )
-
-  const isLabelled = hasLabelledData(allRawData)
+  const isLabelled = hasLabelledData(data?.rawEntries)
 
   const {
     chartData: labelledChartData,
@@ -70,14 +40,14 @@ const FlagAnalytics: FC<FlagAnalyticsType> = ({
     labelValues,
   } = useMemo(
     () =>
-      isLabelled
-        ? aggregateByLabels(allRawData)
+      isLabelled && data?.rawEntries
+        ? aggregateByLabels(data.rawEntries)
         : {
             chartData: [],
             colorMap: new Map<string, string>(),
             labelValues: [],
           },
-    [isLabelled, allRawData],
+    [isLabelled, data?.rawEntries],
   )
 
   const envColorMap = useMemo(
@@ -105,10 +75,9 @@ const FlagAnalytics: FC<FlagAnalyticsType> = ({
 
   const hasData = isLabelled
     ? labelledChartData.length > 0
-    : data &&
-      Array.isArray(data) &&
-      data.length > 0 &&
-      data.some((dayData) =>
+    : data?.chartData &&
+      data.chartData.length > 0 &&
+      data.chartData.some((dayData) =>
         environmentIds.some((envId) => Number(dayData[envId] || 0) > 0),
       )
 
@@ -154,7 +123,7 @@ const FlagAnalytics: FC<FlagAnalyticsType> = ({
         )}
         {hasData && (
           <BarChart
-            data={isLabelled ? labelledChartData : data || []}
+            data={isLabelled ? labelledChartData : data?.chartData || []}
             series={isLabelled ? filteredLabels : environmentIds}
             colorMap={isLabelled ? colorMap : envColorMap}
             xAxisInterval={2}
diff --git a/frontend/web/components/feature-page/FeatureNavTab/__tests__/utils.test.ts b/frontend/web/components/feature-page/FeatureNavTab/__tests__/utils.test.ts
new file mode 100644
index 000000000000..8145667c14ff
--- /dev/null
+++ b/frontend/web/components/feature-page/FeatureNavTab/__tests__/utils.test.ts
@@ -0,0 +1,160 @@
+import {
+  hasLabelledData,
+  aggregateByLabels,
+  buildEnvColorMap,
+} from 'components/feature-page/FeatureNavTab/utils'
+import { Res } from 'common/types/responses'
+
+// Mock getCSSVars since it reads from DOM
+jest.mock('common/utils/getCSSVar', () => ({
+  getCSSVars: (names: string[]) => names.map((_, i) => `#color-${i}`),
+}))
+
+describe('hasLabelledData', () => {
+  it('returns false for undefined data', () => {
+    expect(hasLabelledData(undefined)).toBe(false)
+  })
+
+  it('returns false for empty array', () => {
+    expect(hasLabelledData([])).toBe(false)
+  })
+
+  it('returns false when no entries have labels', () => {
+    const data: Res['environmentAnalytics'] = [
+      { count: 10, day: '2026-04-01' },
+      { count: 20, day: '2026-04-02' },
+    ]
+    expect(hasLabelledData(data)).toBe(false)
+  })
+
+  it('returns false when labels are null', () => {
+    const data: Res['environmentAnalytics'] = [
+      { count: 10, day: '2026-04-01', labels: null },
+    ]
+    expect(hasLabelledData(data)).toBe(false)
+  })
+
+  it('returns false when labels are empty object', () => {
+    const data: Res['environmentAnalytics'] = [
+      { count: 10, day: '2026-04-01', labels: {} },
+    ]
+    expect(hasLabelledData(data)).toBe(false)
+  })
+
+  it('returns true when at least one entry has labels', () => {
+    const data: Res['environmentAnalytics'] = [
+      { count: 10, day: '2026-04-01' },
+      {
+        count: 20,
+        day: '2026-04-02',
+        labels: { user_agent: 'flagsmith-js-sdk' },
+      },
+    ]
+    expect(hasLabelledData(data)).toBe(true)
+  })
+})
+
+describe('aggregateByLabels', () => {
+  it('groups entries by day and label value', () => {
+    const data: Res['environmentAnalytics'] = [
+      { count: 100, day: '2026-04-01', labels: { user_agent: 'js-sdk' } },
+      { count: 200, day: '2026-04-01', labels: { user_agent: 'python-sdk' } },
+      { count: 150, day: '2026-04-02', labels: { user_agent: 'js-sdk' } },
+    ]
+
+    const result = aggregateByLabels(data)
+
+    expect(result.chartData).toHaveLength(2)
+    expect(result.chartData[0]).toEqual({
+      day: '2026-04-01',
+      'js-sdk': 100,
+      'python-sdk': 200,
+    })
+    expect(result.chartData[1]).toEqual({
+      day: '2026-04-02',
+      'js-sdk': 150,
+    })
+  })
+
+  it('accumulates counts for same day + label', () => {
+    const data: Res['environmentAnalytics'] = [
+      { count: 50, day: '2026-04-01', labels: { user_agent: 'js-sdk' } },
+      { count: 75, day: '2026-04-01', labels: { user_agent: 'js-sdk' } },
+    ]
+
+    const result = aggregateByLabels(data)
+
+    expect(result.chartData[0]['js-sdk']).toBe(125)
+  })
+
+  it('returns unique label values', () => {
+    const data: Res['environmentAnalytics'] = [
+      { count: 10, day: '2026-04-01', labels: { user_agent: 'js-sdk' } },
+      { count: 20, day: '2026-04-01', labels: { user_agent: 'python-sdk' } },
+      { count: 30, day: '2026-04-02', labels: { user_agent: 'js-sdk' } },
+    ]
+
+    const result = aggregateByLabels(data)
+
+    expect(result.labelValues).toEqual(['js-sdk', 'python-sdk'])
+  })
+
+  it('builds a color map for each label', () => {
+    const data: Res['environmentAnalytics'] = [
+      { count: 10, day: '2026-04-01', labels: { user_agent: 'js-sdk' } },
+      { count: 20, day: '2026-04-01', labels: { user_agent: 'python-sdk' } },
+    ]
+
+    const result = aggregateByLabels(data)
+
+    expect(result.colorMap.size).toBe(2)
+    expect(result.colorMap.has('js-sdk')).toBe(true)
+    expect(result.colorMap.has('python-sdk')).toBe(true)
+  })
+
+  it('falls back to Unknown when no label value', () => {
+    const data: Res['environmentAnalytics'] = [
+      { count: 10, day: '2026-04-01', labels: {} },
+      { count: 20, day: '2026-04-01' },
+    ]
+
+    const result = aggregateByLabels(data)
+
+    expect(result.labelValues).toEqual(['Unknown'])
+    expect(result.chartData[0].Unknown).toBe(30)
+  })
+
+  it('prefers user_agent over client_application_name', () => {
+    const data: Res['environmentAnalytics'] = [
+      {
+        count: 10,
+        day: '2026-04-01',
+        labels: { client_application_name: 'my-app', user_agent: 'js-sdk' },
+      },
+    ]
+
+    const result = aggregateByLabels(data)
+
+    expect(result.labelValues).toEqual(['js-sdk'])
+  })
+})
+
+describe('buildEnvColorMap', () => {
+  it('assigns a color to each environment ID', () => {
+    const result = buildEnvColorMap(['env-1', 'env-2', 'env-3'])
+
+    expect(result.size).toBe(3)
+    expect(result.get('env-1')).toBe('#color-0')
+    expect(result.get('env-2')).toBe('#color-1')
+    expect(result.get('env-3')).toBe('#color-2')
+  })
+
+  it('wraps colors when more environments than colors', () => {
+    const envIds = Array.from({ length: 15 }, (_, i) => `env-${i}`)
+    const result = buildEnvColorMap(envIds)
+
+    expect(result.size).toBe(15)
+    // Colors wrap around after 10 (mocked CHART_COLOURS has 10 entries)
+    expect(result.get('env-0')).toBe(result.get('env-10'))
+  })
+})
diff --git a/frontend/web/components/feature-page/FeatureNavTab/analyticsUtils.ts b/frontend/web/components/feature-page/FeatureNavTab/utils.ts
similarity index 100%
rename from frontend/web/components/feature-page/FeatureNavTab/analyticsUtils.ts
rename to frontend/web/components/feature-page/FeatureNavTab/utils.ts

From e6c3da8c0622113b2fefea9f586d4e1194097e38 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 10 Apr 2026 15:32:07 -0300
Subject: [PATCH 08/10] refactor: Add useChartColors hook, remove direct
 getCSSVars calls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 frontend/common/hooks/useChartColors.ts       | 36 +++++++++++
 .../FeatureNavTab/FeatureAnalytics.tsx        | 13 ++--
 .../FeatureNavTab/__tests__/utils.test.ts     | 60 ++++++++-----------
 .../feature-page/FeatureNavTab/utils.ts       | 24 ++------
 4 files changed, 72 insertions(+), 61 deletions(-)
 create mode 100644 frontend/common/hooks/useChartColors.ts

diff --git a/frontend/common/hooks/useChartColors.ts b/frontend/common/hooks/useChartColors.ts
new file mode 100644
index 000000000000..ab81fbd4ec6d
--- /dev/null
+++ b/frontend/common/hooks/useChartColors.ts
@@ -0,0 +1,36 @@
+import { useMemo } from 'react'
+import { CHART_COLOURS } from 'common/theme/tokens'
+import { getCSSVars } from 'common/utils/getCSSVar'
+
+/**
+ * Returns the resolved chart color palette for the current theme.
+ *
+ * Recharts needs actual color strings (not CSS var references),
+ * so this hook reads the computed values of --color-chart-1 through
+ * --color-chart-10 from the document root.
+ *
+ * @example
+ *   const colors = useChartColors()
+ *   colors[0] // '#0aaddf' in light, '#45bce0' in dark
+ */
+export function useChartColors(): string[] {
+  return useMemo(() => getCSSVars(CHART_COLOURS), [])
+}
+
+/**
+ * Builds a color map from a list of series names to chart colors.
+ *
+ * @example
+ *   const colorMap = useChartColorMap(['js-sdk', 'python-sdk'])
+ *   colorMap.get('js-sdk') // '#0aaddf'
+ */
+export function useChartColorMap(series: string[]): Map<string, string> {
+  const colors = useChartColors()
+  return useMemo(() => {
+    const map = new Map<string, string>()
+    series.forEach((name, index) => {
+      map.set(name, colors[index % colors.length])
+    })
+    return map
+  }, [series, colors])
+}
diff --git a/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics.tsx b/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics.tsx
index e4e0fa9a11cd..bda250298171 100644
--- a/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics.tsx
+++ b/frontend/web/components/feature-page/FeatureNavTab/FeatureAnalytics.tsx
@@ -4,7 +4,8 @@ import EnvironmentTagSelect from 'components/EnvironmentTagSelect'
 import BarChart from 'components/charts/BarChart'
 import { MultiSelect } from 'components/base/select/multi-select'
 import { useGetFeatureAnalyticsQuery } from 'common/services/useFeatureAnalytics'
-import { aggregateByLabels, buildEnvColorMap, hasLabelledData } from './utils'
+import { useChartColorMap, useChartColors } from 'common/hooks/useChartColors'
+import { aggregateByLabels, hasLabelledData } from './utils'
 
 type FlagAnalyticsType = {
   projectId: string
@@ -19,6 +20,7 @@ const FlagAnalytics: FC<FlagAnalyticsType> = ({
 }) => {
   const [environmentIds, setEnvironmentIds] = useState(defaultEnvironmentIds)
   const [selectedLabels, setSelectedLabels] = useState<string[]>([])
+  const chartColors = useChartColors()
 
   const { data, isLoading } = useGetFeatureAnalyticsQuery(
     {
@@ -41,19 +43,16 @@ const FlagAnalytics: FC<FlagAnalyticsType> = ({
   } = useMemo(
     () =>
       isLabelled && data?.rawEntries
-        ? aggregateByLabels(data.rawEntries)
+        ? aggregateByLabels(data.rawEntries, chartColors)
         : {
             chartData: [],
             colorMap: new Map<string, string>(),
             labelValues: [],
           },
-    [isLabelled, data?.rawEntries],
+    [isLabelled, data?.rawEntries, chartColors],
   )
 
-  const envColorMap = useMemo(
-    () => buildEnvColorMap(environmentIds),
-    [environmentIds],
-  )
+  const envColorMap = useChartColorMap(environmentIds)
 
   const labelOptions = useMemo(
     () => labelValues.map((v) => ({ label: v, value: v })),
diff --git a/frontend/web/components/feature-page/FeatureNavTab/__tests__/utils.test.ts b/frontend/web/components/feature-page/FeatureNavTab/__tests__/utils.test.ts
index 8145667c14ff..b6c1803a8227 100644
--- a/frontend/web/components/feature-page/FeatureNavTab/__tests__/utils.test.ts
+++ b/frontend/web/components/feature-page/FeatureNavTab/__tests__/utils.test.ts
@@ -1,14 +1,10 @@
 import {
   hasLabelledData,
   aggregateByLabels,
-  buildEnvColorMap,
 } from 'components/feature-page/FeatureNavTab/utils'
 import { Res } from 'common/types/responses'
 
-// Mock getCSSVars since it reads from DOM
-jest.mock('common/utils/getCSSVar', () => ({
-  getCSSVars: (names: string[]) => names.map((_, i) => `#color-${i}`),
-}))
+const MOCK_COLORS = ['#blue', '#red', '#green', '#orange', '#purple']
 
 describe('hasLabelledData', () => {
   it('returns false for undefined data', () => {
@@ -62,7 +58,7 @@ describe('aggregateByLabels', () => {
       { count: 150, day: '2026-04-02', labels: { user_agent: 'js-sdk' } },
     ]
 
-    const result = aggregateByLabels(data)
+    const result = aggregateByLabels(data, MOCK_COLORS)
 
     expect(result.chartData).toHaveLength(2)
     expect(result.chartData[0]).toEqual({
@@ -82,7 +78,7 @@ describe('aggregateByLabels', () => {
       { count: 75, day: '2026-04-01', labels: { user_agent: 'js-sdk' } },
     ]
 
-    const result = aggregateByLabels(data)
+    const result = aggregateByLabels(data, MOCK_COLORS)
 
     expect(result.chartData[0]['js-sdk']).toBe(125)
   })
@@ -94,22 +90,36 @@ describe('aggregateByLabels', () => {
       { count: 30, day: '2026-04-02', labels: { user_agent: 'js-sdk' } },
     ]
 
-    const result = aggregateByLabels(data)
+    const result = aggregateByLabels(data, MOCK_COLORS)
 
     expect(result.labelValues).toEqual(['js-sdk', 'python-sdk'])
   })
 
-  it('builds a color map for each label', () => {
+  it('builds a color map from provided colors', () => {
     const data: Res['environmentAnalytics'] = [
       { count: 10, day: '2026-04-01', labels: { user_agent: 'js-sdk' } },
       { count: 20, day: '2026-04-01', labels: { user_agent: 'python-sdk' } },
     ]
 
-    const result = aggregateByLabels(data)
+    const result = aggregateByLabels(data, MOCK_COLORS)
 
-    expect(result.colorMap.size).toBe(2)
-    expect(result.colorMap.has('js-sdk')).toBe(true)
-    expect(result.colorMap.has('python-sdk')).toBe(true)
+    expect(result.colorMap.get('js-sdk')).toBe('#blue')
+    expect(result.colorMap.get('python-sdk')).toBe('#red')
+  })
+
+  it('wraps colors when more labels than colors', () => {
+    const data: Res['environmentAnalytics'] = [
+      { count: 1, day: '2026-04-01', labels: { user_agent: 'a' } },
+      { count: 1, day: '2026-04-01', labels: { user_agent: 'b' } },
+      { count: 1, day: '2026-04-01', labels: { user_agent: 'c' } },
+      { count: 1, day: '2026-04-01', labels: { user_agent: 'd' } },
+      { count: 1, day: '2026-04-01', labels: { user_agent: 'e' } },
+      { count: 1, day: '2026-04-01', labels: { user_agent: 'f' } },
+    ]
+
+    const result = aggregateByLabels(data, MOCK_COLORS)
+
+    expect(result.colorMap.get('f')).toBe('#blue') // wraps to index 0
   })
 
   it('falls back to Unknown when no label value', () => {
@@ -118,7 +128,7 @@ describe('aggregateByLabels', () => {
       { count: 20, day: '2026-04-01' },
     ]
 
-    const result = aggregateByLabels(data)
+    const result = aggregateByLabels(data, MOCK_COLORS)
 
     expect(result.labelValues).toEqual(['Unknown'])
     expect(result.chartData[0].Unknown).toBe(30)
@@ -133,28 +143,8 @@ describe('aggregateByLabels', () => {
       },
     ]
 
-    const result = aggregateByLabels(data)
+    const result = aggregateByLabels(data, MOCK_COLORS)
 
     expect(result.labelValues).toEqual(['js-sdk'])
   })
 })
-
-describe('buildEnvColorMap', () => {
-  it('assigns a color to each environment ID', () => {
-    const result = buildEnvColorMap(['env-1', 'env-2', 'env-3'])
-
-    expect(result.size).toBe(3)
-    expect(result.get('env-1')).toBe('#color-0')
-    expect(result.get('env-2')).toBe('#color-1')
-    expect(result.get('env-3')).toBe('#color-2')
-  })
-
-  it('wraps colors when more environments than colors', () => {
-    const envIds = Array.from({ length: 15 }, (_, i) => `env-${i}`)
-    const result = buildEnvColorMap(envIds)
-
-    expect(result.size).toBe(15)
-    // Colors wrap around after 10 (mocked CHART_COLOURS has 10 entries)
-    expect(result.get('env-0')).toBe(result.get('env-10'))
-  })
-})
diff --git a/frontend/web/components/feature-page/FeatureNavTab/utils.ts b/frontend/web/components/feature-page/FeatureNavTab/utils.ts
index 30bb522300c0..9338fbb993f3 100644
--- a/frontend/web/components/feature-page/FeatureNavTab/utils.ts
+++ b/frontend/web/components/feature-page/FeatureNavTab/utils.ts
@@ -1,7 +1,5 @@
 import { ChartDataPoint } from 'components/charts/BarChart'
 import { Res } from 'common/types/responses'
-import { CHART_COLOURS } from 'common/theme/tokens'
-import { getCSSVars } from 'common/utils/getCSSVar'
 
 /**
  * Check if the analytics data contains labelled buckets.
@@ -19,7 +17,10 @@ export function hasLabelledData(
  * Aggregate raw environment analytics into label-grouped chart data.
  * Each unique label value becomes a series in the stacked chart.
  */
-export function aggregateByLabels(rawData: Res['environmentAnalytics']): {
+export function aggregateByLabels(
+  rawData: Res['environmentAnalytics'],
+  colors: string[],
+): {
   chartData: ChartDataPoint[]
   colorMap: Map<string, string>
   labelValues: string[]
@@ -46,10 +47,9 @@ export function aggregateByLabels(rawData: Res['environmentAnalytics']): {
     grouped[date][labelValue] = (grouped[date][labelValue] || 0) + entry.count
   })
 
-  const resolvedColors = getCSSVars(CHART_COLOURS)
   const colorMap = new Map<string, string>()
   labelList.forEach((label, index) => {
-    colorMap.set(label, resolvedColors[index % resolvedColors.length])
+    colorMap.set(label, colors[index % colors.length])
   })
 
   return {
@@ -58,17 +58,3 @@ export function aggregateByLabels(rawData: Res['environmentAnalytics']): {
     labelValues: labelList,
   }
 }
-
-/**
- * Build a color map for environment-based (non-labelled) chart mode.
- */
-export function buildEnvColorMap(
-  environmentIds: string[],
-): Map<string, string> {
-  const resolvedColors = getCSSVars(CHART_COLOURS)
-  const map = new Map<string, string>()
-  environmentIds.forEach((id, index) => {
-    map.set(id, resolvedColors[index % resolvedColors.length])
-  })
-  return map
-}

From 9ccaf9db049e5638f734cd1cbe244ad3c2ec9921 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 10 Apr 2026 15:39:20 -0300
Subject: [PATCH 09/10] fix: Use useChartColorMap hook in stories, replace
 inline styles

- 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>
---
 .../components/BarChart.stories.tsx           | 50 ++++---------------
 1 file changed, 11 insertions(+), 39 deletions(-)

diff --git a/frontend/documentation/components/BarChart.stories.tsx b/frontend/documentation/components/BarChart.stories.tsx
index edfff7bd1b59..3ced549abc23 100644
--- a/frontend/documentation/components/BarChart.stories.tsx
+++ b/frontend/documentation/components/BarChart.stories.tsx
@@ -2,8 +2,7 @@ import React, { useMemo, useState } from 'react'
 import type { Meta, StoryObj } from 'storybook'
 import BarChart, { ChartDataPoint } from 'components/charts/BarChart'
 import { MultiSelect } from 'components/base/select/multi-select'
-import { CHART_COLOURS } from 'common/theme/tokens'
-import { getCSSVars } from 'common/utils/getCSSVar'
+import { useChartColorMap } from 'common/hooks/useChartColors'
 
 // ============================================================================
 // Fake data
@@ -50,15 +49,6 @@ function generateFakeData(days: number, labels: string[]): ChartDataPoint[] {
   return data
 }
 
-function buildColorMap(labels: string[]): Map<string, string> {
-  const resolved = getCSSVars(CHART_COLOURS)
-  const map = new Map<string, string>()
-  labels.forEach((label, i) => {
-    map.set(label, resolved[i % resolved.length])
-  })
-  return map
-}
-
 // ============================================================================
 // Stories
 // ============================================================================
@@ -77,7 +67,7 @@ export const WithLabelledBuckets: Story = {
     () => {
       const labels = useMemo(() => SDKS.slice(0, 5), [])
       const data = useMemo(() => generateFakeData(30, labels), [labels])
-      const colorMap = useMemo(() => buildColorMap(labels), [labels])
+      const colorMap = useChartColorMap(labels)
       const [selectedLabels, setSelectedLabels] = useState<string[]>([])
 
       const filteredLabels =
@@ -88,18 +78,12 @@ export const WithLabelledBuckets: Story = {
       const labelOptions = labels.map((l) => ({ label: l, value: l }))
 
       return (
-        <div style={{ maxWidth: 900 }}>
-          <p
-            style={{
-              color: 'var(--color-text-secondary)',
-              fontSize: 13,
-              marginBottom: 16,
-            }}
-          >
+        <div className='mx-auto' style={{ maxWidth: 900 }}>
+          <p className='text-secondary fs-small mb-3'>
             Stacked by SDK label — each color represents a different SDK sending
             evaluations.
           </p>
-          <div style={{ marginBottom: 16, maxWidth: 400 }}>
+          <div className='mb-3' style={{ maxWidth: 400 }}>
             <MultiSelect
               label='Filter by SDK'
               options={labelOptions}
@@ -125,17 +109,11 @@ export const WithoutLabels: Story = {
     () => {
       const labels = useMemo(() => ['Production', 'Staging', 'Development'], [])
       const data = useMemo(() => generateFakeData(30, labels), [labels])
-      const colorMap = useMemo(() => buildColorMap(labels), [labels])
+      const colorMap = useChartColorMap(labels)
 
       return (
-        <div style={{ maxWidth: 900 }}>
-          <p
-            style={{
-              color: 'var(--color-text-secondary)',
-              fontSize: 13,
-              marginBottom: 16,
-            }}
-          >
+        <div className='mx-auto' style={{ maxWidth: 900 }}>
+          <p className='text-secondary fs-small mb-3'>
             No labels — grouped by environment (current behaviour).
           </p>
           <BarChart
@@ -155,17 +133,11 @@ export const SingleSeries: Story = {
     () => {
       const labels = useMemo(() => ['flagsmith-js-sdk'], [])
       const data = useMemo(() => generateFakeData(30, labels), [labels])
-      const colorMap = useMemo(() => buildColorMap(labels), [labels])
+      const colorMap = useChartColorMap(labels)
 
       return (
-        <div style={{ maxWidth: 900 }}>
-          <p
-            style={{
-              color: 'var(--color-text-secondary)',
-              fontSize: 13,
-              marginBottom: 16,
-            }}
-          >
+        <div className='mx-auto' style={{ maxWidth: 900 }}>
+          <p className='text-secondary fs-small mb-3'>
             Single SDK — no filter needed when there's only one series.
           </p>
           <BarChart

From aaa56af6f0a47d8aa8176498b61df86b7e069318 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 10 Apr 2026 15:44:55 -0300
Subject: [PATCH 10/10] refactor: Inline getCSSVar into useChartColors, add
 explanatory comments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 frontend/common/hooks/useChartColors.ts       | 24 ++++++++++++-----
 .../common/services/useFeatureAnalytics.ts    |  3 +++
 frontend/common/theme/tokens.ts               |  2 +-
 frontend/common/utils/getCSSVar.ts            | 26 -------------------
 frontend/scripts/generate-tokens.mjs          |  2 +-
 .../feature-page/FeatureNavTab/utils.ts       |  1 +
 6 files changed, 24 insertions(+), 34 deletions(-)
 delete mode 100644 frontend/common/utils/getCSSVar.ts

diff --git a/frontend/common/hooks/useChartColors.ts b/frontend/common/hooks/useChartColors.ts
index ab81fbd4ec6d..6a96a9250444 100644
--- a/frontend/common/hooks/useChartColors.ts
+++ b/frontend/common/hooks/useChartColors.ts
@@ -1,24 +1,36 @@
 import { useMemo } from 'react'
 import { CHART_COLOURS } from 'common/theme/tokens'
-import { getCSSVars } from 'common/utils/getCSSVar'
 
 /**
- * Returns the resolved chart color palette for the current theme.
+ * Reads the computed value of CSS custom properties from the document root.
  *
- * Recharts needs actual color strings (not CSS var references),
- * so this hook reads the computed values of --color-chart-1 through
- * --color-chart-10 from the document root.
+ * Why not import values directly from tokens.ts?
+ * tokens.ts exports CSS var() references (e.g. 'var(--color-chart-1, #0aaddf)'),
+ * not raw hex strings. Recharts' `fill` prop needs actual colour values like
+ * '#0aaddf', not var() references. getComputedStyle resolves the var to its
+ * current value, which also means dark mode is respected automatically —
+ * the same token resolves to a different hex in light vs dark.
+ */
+function resolveColors(varNames: readonly string[]): string[] {
+  if (typeof document === 'undefined') return varNames.map(() => '')
+  const style = getComputedStyle(document.documentElement)
+  return varNames.map((name) => style.getPropertyValue(name).trim())
+}
+
+/**
+ * Returns the resolved chart color palette for the current theme.
  *
  * @example
  *   const colors = useChartColors()
  *   colors[0] // '#0aaddf' in light, '#45bce0' in dark
  */
 export function useChartColors(): string[] {
-  return useMemo(() => getCSSVars(CHART_COLOURS), [])
+  return useMemo(() => resolveColors(CHART_COLOURS), [])
 }
 
 /**
  * Builds a color map from a list of series names to chart colors.
+ * Wraps around when there are more series than available colors.
  *
  * @example
  *   const colorMap = useChartColorMap(['js-sdk', 'python-sdk'])
diff --git a/frontend/common/services/useFeatureAnalytics.ts b/frontend/common/services/useFeatureAnalytics.ts
index beafe8daafb8..cab1eb34f015 100644
--- a/frontend/common/services/useFeatureAnalytics.ts
+++ b/frontend/common/services/useFeatureAnalytics.ts
@@ -60,6 +60,9 @@ export const featureAnalyticsService = service
             preBuiltData.push(dayObj)
           }
 
+          // Collect raw entries with labels intact for label-based grouping.
+          // chartData aggregates by environment (existing behaviour),
+          // rawEntries preserves per-SDK labels for stacked charts (#6067).
           const rawEntries: Res['environmentAnalytics'] = []
 
           responses.forEach((response, i) => {
diff --git a/frontend/common/theme/tokens.ts b/frontend/common/theme/tokens.ts
index ee340135b8c6..932b948e790a 100644
--- a/frontend/common/theme/tokens.ts
+++ b/frontend/common/theme/tokens.ts
@@ -157,7 +157,7 @@ export const easing: Record<string, TokenEntry> = {
   },
 }
 
-// Chart colours — use with getCSSVar() for runtime resolution
+// Chart colours — use with useChartColors() hook for runtime resolution
 export const CHART_COLOURS = [
   '--color-chart-1',
   '--color-chart-2',
diff --git a/frontend/common/utils/getCSSVar.ts b/frontend/common/utils/getCSSVar.ts
deleted file mode 100644
index 23daea6e3ab9..000000000000
--- a/frontend/common/utils/getCSSVar.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Read the computed value of a CSS custom property from the document root.
- * Use this when JS code needs actual colour strings (e.g. Recharts fills)
- * rather than var() references.
- *
- * Respects dark mode — returns the currently resolved value.
- *
- * @example
- *   import { getCSSVar } from 'common/utils/getCSSVar'
- *   const fill = getCSSVar('--color-chart-1') // '#0aaddf' in light, '#45bce0' in dark
- */
-export function getCSSVar(name: string): string {
-  if (typeof document === 'undefined') return ''
-  return getComputedStyle(document.documentElement)
-    .getPropertyValue(name)
-    .trim()
-}
-
-/**
- * Read multiple CSS custom properties at once.
- */
-export function getCSSVars(names: readonly string[]): string[] {
-  if (typeof document === 'undefined') return names.map(() => '')
-  const style = getComputedStyle(document.documentElement)
-  return names.map((name) => style.getPropertyValue(name).trim())
-}
diff --git a/frontend/scripts/generate-tokens.mjs b/frontend/scripts/generate-tokens.mjs
index 202e41717839..6b7ab4b625d4 100644
--- a/frontend/scripts/generate-tokens.mjs
+++ b/frontend/scripts/generate-tokens.mjs
@@ -256,7 +256,7 @@ function generateTs() {
   // Chart tokens as a flat array for JS chart libraries
   const chartLines = []
   if (json[CHART_CATEGORY]) {
-    chartLines.push('// Chart colours — use with getCSSVar() for runtime resolution')
+    chartLines.push('// Chart colours — use with useChartColors() hook for runtime resolution')
     chartLines.push(`export const CHART_COLOURS = [`)
     for (const [, e] of sorted(json[CHART_CATEGORY])) {
       chartLines.push(`  '${e.cssVar}',`)
diff --git a/frontend/web/components/feature-page/FeatureNavTab/utils.ts b/frontend/web/components/feature-page/FeatureNavTab/utils.ts
index 9338fbb993f3..39dca6c6b152 100644
--- a/frontend/web/components/feature-page/FeatureNavTab/utils.ts
+++ b/frontend/web/components/feature-page/FeatureNavTab/utils.ts
@@ -31,6 +31,7 @@ export function aggregateByLabels(
 
   rawData.forEach((entry) => {
     const date = entry.day
+    // Priority: user_agent (SDK name) > client_application_name > 'Unknown'
     const labelValue =
       entry.labels?.user_agent ||
       entry.labels?.client_application_name ||