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

chore: fix react errors (#6637)

Browse Source 
Fix hook usage react error (console)

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
This commit is contained in:
andreas-unleash 2024-03-20 17:11:50 +02:00 committed by GitHub
parent b7232d0397
commit 33ec7e1894
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 40 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx
View File

@ -11,16 +11,16 @@ import { DashboardHeader } from './components/DashboardHeader/DashboardHeader';
import { useDashboardData } from './hooks/useDashboardData'; import { useDashboardData } from './hooks/useDashboardData';
import { Charts } from './Charts'; import { Charts } from './Charts';
const StickyWrapper = styled(Box)<{ scrolled?: boolean }>( const StickyWrapper = styled(Box, {
({ theme, scrolled }) => ({ shouldForwardProp: (prop) => prop !== 'scrolled',
position: 'sticky', })<{ scrolled?: boolean }>(({ theme, scrolled }) => ({
top: 0, position: 'sticky',
zIndex: 1000, top: 0,
padding: scrolled ? theme.spacing(2, 0) : theme.spacing(0, 0, 2), zIndex: 1000,
background: theme.palette.background.application, padding: scrolled ? theme.spacing(2, 0) : theme.spacing(0, 0, 2),
transition: 'padding 0.3s ease', background: theme.palette.background.application,
}), transition: 'padding 0.3s ease',
); }));
export const ExecutiveDashboard: VFC = () => { export const ExecutiveDashboard: VFC = () => {
const [scrolled, setScrolled] = useState(false); const [scrolled, setScrolled] = useState(false);

51
frontend/src/component/executiveDashboard/hooks/useDashboardData.ts
View File

@ -8,36 +8,45 @@ import { useAvgTimeToProduction } from './useAvgTimeToProduction';
export const useDashboardData = ( export const useDashboardData = (
executiveDashboardData: ExecutiveSummarySchema, executiveDashboardData: ExecutiveSummarySchema,
projects: string[], projects: string[],
) => ) => {
useMemo(() => { const projectsData = useFilteredTrends(
const projectsData = useFilteredTrends( executiveDashboardData.projectFlagTrends,
executiveDashboardData.projectFlagTrends, projects,
projects, );
);
const groupedProjectsData = useGroupedProjectTrends(projectsData); const groupedProjectsData = useGroupedProjectTrends(projectsData);
const metricsData = useFilteredTrends( const metricsData = useFilteredTrends(
executiveDashboardData.metricsSummaryTrends, executiveDashboardData.metricsSummaryTrends,
projects, projects,
); );
const groupedMetricsData = useGroupedProjectTrends(metricsData); const groupedMetricsData = useGroupedProjectTrends(metricsData);
const { users, environmentTypeTrends } = executiveDashboardData; const summary = useFilteredFlagsSummary(projectsData);
const summary = useFilteredFlagsSummary(projectsData); const avgDaysToProduction = useAvgTimeToProduction(groupedProjectsData);
const avgDaysToProduction = useAvgTimeToProduction(groupedProjectsData); return useMemo(
() => ({
return {
...executiveDashboardData, ...executiveDashboardData,
projectsData, projectsData,
groupedProjectsData, groupedProjectsData,
metricsData, metricsData,
groupedMetricsData, groupedMetricsData,
users, users: executiveDashboardData.users,
environmentTypeTrends, environmentTypeTrends: executiveDashboardData.environmentTypeTrends,
summary, summary,
avgDaysToProduction, avgDaysToProduction,
}; }),
}, [executiveDashboardData, projects]); [
executiveDashboardData,
projects,
projectsData,
groupedProjectsData,
metricsData,
groupedMetricsData,
summary,
avgDaysToProduction,
],
);
};