kernelci / kernelci/dashboard

Improve tooltip graph

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

Description

At any details screen there's a graph with tooltip that could be improved:

![Image](https://github.com/user-attachments/assets/67509779-63f9-46dd-8c3e-3b220bc24ed9)

The idea is to insert a line break between the commit name/hash and date, and until now this was tried with no avail.

Solutions tried:
- insertion of `\n` and `
`
- creation of a custom tooltip using this base idea:

```
const CustomItemTooltipContent = props => {
const { itemData, series } = props;
console.log(series);
return (
<>

{series.label}


{series.data[itemData.dataIndex]}



);
};

export const LineChart = ({
labels,
series,
xAxis,
slots,
slotProps,
sx,
onMarkClick,
}: TLineChartProps): JSX.Element => {
return (


{labels && (
{labels}

)}


);
};

```

Contributor guide

Open the contributing guide

Research direction

Start at the LineChart component shown in the issue and inspect how its tooltip receives the commit name/hash and date. Implement the requested separation in the details-screen graph tooltip, then verify the rendered tooltip on a details screen matches the requested layout.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.