Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-24 17:51:14 +02:00
Code Issues Projects Releases Wiki Activity

Extract Graph Cover

Browse Source
This commit is contained in:
Thomas Heartman 2025-09-02 16:19:16 +02:00
parent b921b729ba
commit 24ad83a61c
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
3 changed files with 40 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/component/insights/GraphCover.tsx Normal file
View File

@ -0,0 +1,32 @@
import { styled } from '@mui/material';
import type { FC, PropsWithChildren } from 'react';
const StyledCover = styled('div')(({ theme }) => ({
position: 'absolute',
inset: 0,
display: 'flex',
zIndex: theme.zIndex.appBar,
'&::before': {
zIndex: theme.zIndex.fab,
content: '""',
position: 'absolute',
inset: 0,
backgroundColor: theme.palette.background.paper,
opacity: 0.8,
},
}));
const StyledCoverContent = styled('div')(({ theme }) => ({
zIndex: theme.zIndex.modal,
margin: 'auto',
color: theme.palette.text.secondary,
textAlign: 'center',
}));
export const GraphCover: FC<PropsWithChildren> = ({ children }) => {
return (
<StyledCover>
<StyledCoverContent>{children}</StyledCoverContent>
</StyledCover>
);
};

29
frontend/src/component/insights/components/LineChart/LineChartComponent.tsx
View File

@ -26,33 +26,12 @@ import { styled } from '@mui/material';
import { createOptions } from './createChartOptions.ts'; import { createOptions } from './createChartOptions.ts';
import merge from 'deepmerge'; import merge from 'deepmerge';
import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin.ts'; import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin.ts';
import { GraphCover } from 'component/insights/GraphCover.tsx';
const StyledContainer = styled('div')(({ theme }) => ({ const StyledContainer = styled('div')(({ theme }) => ({
position: 'relative', position: 'relative',
})); }));
const StyledCover = styled('div')(({ theme }) => ({
position: 'absolute',
inset: 0,
display: 'flex',
zIndex: theme.zIndex.appBar,
'&::before': {
zIndex: theme.zIndex.fab,
content: '""',
position: 'absolute',
inset: 0,
backgroundColor: theme.palette.background.paper,
opacity: 0.8,
},
}));
const StyledCoverContent = styled('div')(({ theme }) => ({
zIndex: theme.zIndex.modal,
margin: 'auto',
color: theme.palette.text.secondary,
textAlign: 'center',
}));
function mergeAll<T>(objects: Partial<T>[]): T { function mergeAll<T>(objects: Partial<T>[]): T {
return merge.all<T>(objects.filter((i) => i)); return merge.all<T>(objects.filter((i) => i));
} }
@ -113,11 +92,7 @@ const LineChartComponent: FC<{
) )
} }
elseShow={ elseShow={
<StyledCover> <GraphCover>{cover !== true ? cover : ' '}</GraphCover>
<StyledCoverContent>
{cover !== true ? cover : ' '}
</StyledCoverContent>
</StyledCover>
} }
/> />
</StyledContainer> </StyledContainer>

35
frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx
View File

@ -2,7 +2,7 @@ import 'chartjs-adapter-date-fns';
import { type FC, useMemo, useState } from 'react'; import { type FC, useMemo, useState } from 'react';
import type { InstanceInsightsSchema } from 'openapi'; import type { InstanceInsightsSchema } from 'openapi';
import { useProjectChartData } from 'component/insights/hooks/useProjectChartData'; import { useProjectChartData } from 'component/insights/hooks/useProjectChartData';
import { styled, useTheme } from '@mui/material'; import { useTheme } from '@mui/material';
import type { GroupedDataByProject } from 'component/insights/hooks/useGroupedProjectTrends'; import type { GroupedDataByProject } from 'component/insights/hooks/useGroupedProjectTrends';
import { import {
CategoryScale, CategoryScale,
@ -26,6 +26,7 @@ import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlu
import { NotEnoughData } from 'component/insights/components/LineChart/LineChart.tsx'; import { NotEnoughData } from 'component/insights/components/LineChart/LineChart.tsx';
import { placeholderData } from './placeholderData.ts'; import { placeholderData } from './placeholderData.ts';
import { Bar } from 'react-chartjs-2'; import { Bar } from 'react-chartjs-2';
import { GraphCover } from 'component/insights/GraphCover.tsx';
ChartJS.register( ChartJS.register(
CategoryScale, CategoryScale,
@ -46,28 +47,6 @@ interface ICreationArchiveChartProps {
isLoading?: boolean; isLoading?: boolean;
} }
const StyledCover = styled('div')(({ theme }) => ({
position: 'absolute',
inset: 0,
display: 'flex',
zIndex: theme.zIndex.appBar,
'&::before': {
zIndex: theme.zIndex.fab,
content: '""',
position: 'absolute',
inset: 0,
backgroundColor: theme.palette.background.paper,
opacity: 0.8,
},
}));
const StyledCoverContent = styled('div')(({ theme }) => ({
zIndex: theme.zIndex.modal,
margin: 'auto',
color: theme.palette.text.secondary,
textAlign: 'center',
}));
export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
creationArchiveTrends, creationArchiveTrends,
isLoading, isLoading,
@ -231,7 +210,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
}, },
}, },
}), }),
[theme, locationSettings, setTooltip], [theme, locationSettings, setTooltip, useGraphCover],
); );
return ( return (
@ -249,11 +228,9 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
/> />
<CreationArchiveRatioTooltip tooltip={tooltip} /> <CreationArchiveRatioTooltip tooltip={tooltip} />
{useGraphCover ? ( {useGraphCover ? (
<StyledCover> <GraphCover>
<StyledCoverContent> {notEnoughData ? <NotEnoughData /> : isLoading}
{notEnoughData ? <NotEnoughData /> : isLoading} </GraphCover>
</StyledCoverContent>
</StyledCover>
) : null} ) : null}
</> </>
); );