Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00
Code Issues Projects Releases Wiki Activity

fix: Use a proper dark theme for the activity graph (#8865)

Browse Source 
This PR adds a proper dark theme for the activity graph. We previously
used the exact same theme for both light and dark modes.

Before:

![image](https://github.com/user-attachments/assets/1f119dca-4a87-49e3-9f3e-13163bd060c2)


After (different chart):

![image](https://github.com/user-attachments/assets/798c320c-a1b4-4634-b72e-cdb0d7a2c4a4)


I'm also passing in the theme explicitly as the `colorScheme` property.
Without that prop, the graph uses your system color scheme (according to
the docs), which may not be the same as your Unleash theme color scheme.

To avoid getting visible borders for the activity squares, I've added a `svg rect` override on the containing element that sets the svg rect strokes to be invisible.
This commit is contained in:
Thomas Heartman 2024-11-27 11:26:05 +01:00 committed by GitHub
parent 0e8365e47d
commit 41fb95dd56
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/component/project/Project/ProjectStatus/ProjectActivity.tsx
View File

@ -3,11 +3,16 @@ import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectS
import ActivityCalendar, { type ThemeInput } from 'react-activity-calendar'; import ActivityCalendar, { type ThemeInput } from 'react-activity-calendar';
import type { ProjectActivitySchema } from '../../../../openapi'; import type { ProjectActivitySchema } from '../../../../openapi';
import { styled, Tooltip } from '@mui/material'; import { styled, Tooltip } from '@mui/material';
import theme from 'themes/theme';
import { useThemeMode } from 'hooks/useThemeMode';
const StyledContainer = styled('div')(({ theme }) => ({ const StyledContainer = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
'svg rect': {
stroke: '#0000 !important',
},
})); }));
type Output = { date: string; count: number; level: number }; type Output = { date: string; count: number; level: number };
@ -73,10 +78,11 @@ const transformData = (inputData: ProjectActivitySchema): Output[] => {
export const ProjectActivity = () => { export const ProjectActivity = () => {
const projectId = useRequiredPathParam('projectId'); const projectId = useRequiredPathParam('projectId');
const { data } = useProjectStatus(projectId); const { data } = useProjectStatus(projectId);
const { themeMode } = useThemeMode();
const explicitTheme: ThemeInput = { const explicitTheme: ThemeInput = {
light: ['#f1f0fc', '#ceccfd', '#8982ff', '#6c65e5', '#615bc2'], light: ['#f1f0fc', '#ceccfd', '#8982ff', '#6c65e5', '#615bc2'],
dark: ['#f1f0fc', '#ceccfd', '#8982ff', '#6c65e5', '#615bc2'], dark: ['#302E42', theme.palette.background.alternative],
}; };
const levelledData = transformData(data.activityCountByDate); const levelledData = transformData(data.activityCountByDate);
@ -87,6 +93,7 @@ export const ProjectActivity = () => {
{data.activityCountByDate.length > 0 ? ( {data.activityCountByDate.length > 0 ? (
<StyledContainer> <StyledContainer>
<ActivityCalendar <ActivityCalendar
colorScheme={themeMode}
theme={explicitTheme} theme={explicitTheme}
data={fullData} data={fullData}
maxLevel={4} maxLevel={4}