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 merge from 'deepmerge';
import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin.ts';
import { GraphCover } from 'component/insights/GraphCover.tsx';
const StyledContainer = styled('div')(({ theme }) => ({
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 {
return merge.all<T>(objects.filter((i) => i));
}
@ -113,11 +92,7 @@ const LineChartComponent: FC<{
)
}
elseShow={
<StyledCover>
<StyledCoverContent>
{cover !== true ? cover : ' '}
</StyledCoverContent>
</StyledCover>
<GraphCover>{cover !== true ? cover : ' '}</GraphCover>
}
/>
</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 { InstanceInsightsSchema } from 'openapi';
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 {
CategoryScale,
@ -26,6 +26,7 @@ import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlu
import { NotEnoughData } from 'component/insights/components/LineChart/LineChart.tsx';
import { placeholderData } from './placeholderData.ts';
import { Bar } from 'react-chartjs-2';
import { GraphCover } from 'component/insights/GraphCover.tsx';
ChartJS.register(
CategoryScale,
@ -46,28 +47,6 @@ interface ICreationArchiveChartProps {
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> = ({
creationArchiveTrends,
isLoading,
@ -231,7 +210,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
},
},
}),
[theme, locationSettings, setTooltip],
[theme, locationSettings, setTooltip, useGraphCover],
);
return (
@ -249,11 +228,9 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
/>
<CreationArchiveRatioTooltip tooltip={tooltip} />
{useGraphCover ? (
<StyledCover>
<StyledCoverContent>
{notEnoughData ? <NotEnoughData /> : isLoading}
</StyledCoverContent>
</StyledCover>
<GraphCover>
{notEnoughData ? <NotEnoughData /> : isLoading}
</GraphCover>
) : null}
</>
);