kernelci / kernelci/dashboard

refactor: chart colors

Open
#39 0 comments 0 reactions 0 assignees View on GitHub
Frontend technical debt
Dominant language
Python
Stars
9
Forks
31
Avg merge
3d 19h
Merged PRs (30d)
16

Description

## Problem

`StatusCharts.tsx` defines a `Colors` enum with hardcoded hex values that duplicate colors already in `tailwind.config.js`. Changing a brand color requires edits in two places.

```ts
// dashboard/src/components/StatusChart/StatusCharts.tsx
export enum Colors {
Red = '#E15739', // == theme.colors.red
Green = '#53D07C', // == theme.colors.green
Yellow = '#FFD27C', // == theme.colors.yellow
Gray = '#EAEAEA', // == theme.colors.mediumGray
Blue = '#11B3E6', // == theme.colors.blue
DimGray = '454545', // == theme.colors.dimGray (also missing `#`)
}
```

Legend already maps these to Tailwind classes via `getColorClassName()` (`bg-red`, `bg-green`, …). Chart slices (MUI `PieChart`) still need raw color strings, so we cannot use class names alone.

## Goal

Single source of truth: chart colors come from the Tailwind theme (or a shared theme module fed by it).

## Suggested approach

Import `theme.extend.colors` from `tailwind.config.js` (or extract shared color constants both Tailwind and charts consume). Keep the `Colors` enum API so call sites (`StatusCard`, `TestCards`, `CommitNavigationGraph`) need little/no change.

Reference: [Tailwind discussion on reading config colors in JS](https://github.com/tailwindlabs/tailwindcss/discussions/1910#discussioncomment-24821)

## Acceptance criteria

- [ ] No duplicated hex for status chart colors outside the Tailwind theme / shared module
- [ ] Pie chart, legend circles, and regression icons still render the same colors
- [ ] Fix `DimGray` missing `#`
- [ ] Existing `Colors.*` usages keep working (or are updated in the same PR)

## Out of scope

- Other hardcoded hexes elsewhere (e.g. `WrapperSheetContent`, `LogViewerCard`) — can be follow-ups
- Redesigning the chart palette

Contributor guide

Open the contributing guide

Research direction

Start with dashboard/src/components/StatusChart/StatusCharts.tsx and tailwind.config.js, then trace Colors usages in StatusCard, TestCards, and CommitNavigationGraph. Choose a shared source for the status colors while preserving the Colors API where possible. Done means no duplicated status-chart hex values, DimGray includes '#', and the PieChart, legend circles, and regression icons retain their colors.

Written by the indexing model from the issue text.

Assessment

Tech stack
tailwindcss, typescript
Domain
frontend
Issue type
Refactor
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.