feat: standardize chart legend lists by djdembeck · Pull Request #1141 · looplj/axonhub

djdembeck · 2026-03-23T23:03:13Z

Summary

Standardize chart legend lists across the dashboard by introducing a reusable ChartLegend component and refactoring all charts to use consistent legend styling.

Purpose

Unify how chart legends are displayed across all dashboard charts by creating a shared component and standardizing legend layouts, while fixing related bugs.

Changes

New Components

ChartLegend: Reusable legend component with configurable columns, index display, and color indicators

Refactoring

Updated 6 chart components to use the shared ChartLegend component
Standardized legend layouts, content formatting, and visual patterns

Bug Fixes

Fixed TypeScript compilation error in fastest-performers-card.tsx (missing LegendItem interface)
Fixed color array inconsistency in token charts (duplicate color definition)

gemini-code-assist · 2026-03-23T23:04:45Z

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on standardizing and enhancing the chart displays within the application. It introduces a new TimePeriodSelector component to allow users to filter chart data by different timeframes, improves error handling and loading states, and enhances accessibility features. The changes aim to provide a more consistent, user-friendly, and accessible experience across the dashboard.

Highlights

Standardized Chart Displays: The pull request standardizes chart display components across the application, ensuring consistent styling and behavior.
Time Period Selection: Introduces a reusable TimePeriodSelector component for filtering data displayed in charts by different timeframes (day, week, month, all time).
Enhanced Error Handling: Improves error handling and loading states for chart components, providing a better user experience.
Accessibility Improvements: Enhances accessibility features for chart displays, making them more usable for all users.

Ignored Files

Ignored by pattern: .github/workflows/** (1)
- .github/workflows/sync-model-developers.yml

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces a standardized ChartLegend component to improve UI consistency, and refactors several existing chart components to use it. The changes are a good step towards a more maintainable frontend. My review focuses on a few areas: an incomplete refactoring in one of the components, potential UI layout changes due to default props, and security and reliability improvements for the new test script.

gemini-code-assist · 2026-03-23T23:06:00Z

frontend/src/features/dashboard/components/fastest-performers-card.tsx

+interface LegendItem {
+  index: number;
+  name: string;
+  color: string;
+  throughput: number;
+  requestCount: number;
+}


While this PR aims to standardize chart legends, this component (FastestPerformersCard) seems to have been missed in the refactoring. It still defines its own ChartLegend component internally. To complete the standardization, this component should be updated to use the new shared ChartLegend component from chart-legend.tsx. This would make this LegendItem interface and the local ChartLegend component obsolete.

gemini-code-assist · 2026-03-23T23:06:00Z

scripts/capture-dashboard.js

+  await page.fill('[data-testid="sign-in-email"]', '[email protected]');
+  await page.fill('[data-testid="sign-in-password"]', 'pwd123456');


Hardcoding credentials is a security risk. These values should be loaded from environment variables to avoid exposing them in the source code.

Suggested change

await page.fill('[data-testid="sign-in-email"]', '[email protected]');

await page.fill('[data-testid="sign-in-password"]', 'pwd123456');

await page.fill('[data-testid="sign-in-email"]', process.env.TEST_USER_EMAIL || '[email protected]');

await page.fill('[data-testid="sign-in-password"]', process.env.TEST_USER_PASSWORD || 'pwd123456');

frontend/src/features/dashboard/components/tokens-by-api-key-chart.tsx

frontend/src/features/dashboard/components/tokens-by-channel-chart.tsx

frontend/src/features/dashboard/components/tokens-by-model-chart.tsx

gemini-code-assist · 2026-03-23T23:06:00Z

scripts/capture-dashboard.js

+
+  await page.click('button[type="submit"]');
+
+  await page.waitForTimeout(8000);


Using a fixed timeout with waitForTimeout can lead to flaky tests. If the page loads slower, the test might fail. If it loads faster, the test waits unnecessarily long. It's better to wait for a specific element to be visible or for network activity to be idle.

Suggested change

await page.waitForTimeout(8000);

await page.waitForLoadState('networkidle');

djdembeck · 2026-03-23T23:13:34Z

/gemini review

gemini-code-assist

Code Review

This pull request does a great job of standardizing the chart legends by introducing a reusable ChartLegend component. The refactoring across multiple chart components will improve maintainability and ensure a consistent user experience.

I've left a few comments on potential improvements:

Using a more robust key for list rendering in the new ChartLegend component.
Correcting some duplicated color definitions in chart constants.
Improving the new Playwright test script by removing hardcoded credentials and brittle waits.

Additionally, while the PR aims to standardize legends, the fastest-performers-card.tsx component still uses its own local legend implementation. To fully achieve the goal of this PR, it would be beneficial to refactor this component to use the new shared ChartLegend as well.

Overall, this is a solid improvement to the dashboard's codebase.

scripts/capture-dashboard.js

gemini-code-assist · 2026-03-23T23:14:51Z

frontend/src/features/dashboard/components/chart-legend.tsx

+      }}
+    >
+      {items.map((item) => (
+        <div key={item.name} className='grid w-full grid-cols-[auto_auto_1fr_auto] items-start gap-3'>


Using item.name as the key for mapped elements can lead to issues if names are not unique, which can cause incorrect rendering behavior in React. A more robust key would combine the name with another unique attribute like the index.

Suggested change

<div key={item.name} className='grid w-full grid-cols-[auto_auto_1fr_auto] items-start gap-3'>

<div key={item.index !== undefined ? `${item.name}-${item.index}` : item.name} className='grid w-full grid-cols-[auto_auto_1fr_auto] items-start gap-3'>

gemini-code-assist · 2026-03-23T23:14:51Z

frontend/src/features/dashboard/components/requests-by-channel-chart.tsx

 import type { TimePeriod } from '@/components/time-period-selector';
+import { ChartLegend } from './chart-legend';

 const COLORS = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)', 'var(--chart-1)'];


The COLORS array contains a duplicate value (var(--chart-1)). This will cause the sixth item in the chart to have the same color as the first, which might be confusing for users. It should likely be var(--chart-6) to maintain color uniqueness.

Suggested change

const COLORS = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)', 'var(--chart-1)'];

const COLORS = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)', 'var(--chart-6)'];

frontend/src/features/dashboard/components/requests-by-model-chart.tsx

frontend/src/features/dashboard/components/tokens-by-api-key-chart.tsx

frontend/src/features/dashboard/components/tokens-by-model-chart.tsx

…ase/v0.9.x * 'release/v0.9.x' of github.com:NekoNuo/axonhub: doc: add request processing (looplj#1155) chore(codex): upgrade codex ua version (looplj#1151) chore: update VERSION to v0.9.22 [skip ci] fix: anthropic adaptive thinking effort did not pass to other outbound (looplj#1150) feat: add cli + skill, close looplj#1085 (looplj#1149) chore: add freebsd support to releases (looplj#1146) feat: standardize chart legend lists (looplj#1141)

djdembeck added 2 commits March 23, 2026 17:44

feat: add reusable ChartLegend component for dashboard charts

0c713bc

feat: add legend interface, fix chart colors

c6216d1

djdembeck changed the base branch from unstable to release/v0.9.x March 23, 2026 23:04

gemini-code-assist bot reviewed Mar 23, 2026

View reviewed changes

djdembeck changed the title ~~feat: standardize chart displays~~ feat: standardize chart legend lists Mar 23, 2026

gemini-code-assist bot reviewed Mar 23, 2026

View reviewed changes

djdembeck added 2 commits March 23, 2026 18:17

chore: remove capture-dashboard.js script

ef3ff64

feat: standardize chart displays

9e746c3

djdembeck marked this pull request as draft March 23, 2026 23:29

feat: make chart legend responsive with mobile detection

73ff4b2

djdembeck marked this pull request as ready for review March 23, 2026 23:33

looplj merged commit 55f9aef into looplj:release/v0.9.x Mar 24, 2026
2 checks passed

djdembeck deleted the feature/standardize-chart-displays branch April 3, 2026 03:58

		await page.fill('[data-testid="sign-in-email"]', '[email protected]');
		await page.fill('[data-testid="sign-in-password"]', 'pwd123456');


		await page.click('button[type="submit"]');

		await page.waitForTimeout(8000);

	await page.waitForTimeout(8000);
	await page.waitForLoadState('networkidle');

	<div key={item.name} className='grid w-full grid-cols-[auto_auto_1fr_auto] items-start gap-3'>
	<div key={item.index !== undefined ? `${item.name}-${item.index}` : item.name} className='grid w-full grid-cols-[auto_auto_1fr_auto] items-start gap-3'>

	const COLORS = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)', 'var(--chart-1)'];
	const COLORS = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)', 'var(--chart-6)'];

Conversation

djdembeck commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Purpose

Changes

New Components

Refactoring

Bug Fixes

Uh oh!

gemini-code-assist bot commented Mar 23, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gemini-code-assist bot Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

djdembeck commented Mar 23, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

gemini-code-assist bot Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

djdembeck commented Mar 23, 2026 •

edited

Loading