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

Feat: sticky insights header and widget tooltip icon (#6537)

Browse Source 
What it says on the tin

Closes #
[1-2182](https://linear.app/unleash/issue/1-2182/sticky-header-on-scroll)

<img width="1442" alt="Screenshot 2024-03-14 at 10 47 32"
src="https://github.com/Unleash/unleash/assets/104830839/5b57cd95-3c40-48e7-b25b-823df025e68c">


https://github.com/Unleash/unleash/assets/104830839/f5249fd6-a4cc-4e52-9b01-89ef3cbeb47c

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
This commit is contained in:
andreas-unleash 2024-03-14 11:33:30 +02:00 committed by GitHub
parent d6482ab07d
commit 513d60c14d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 42 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { VFC } from 'react';
import { useState, VFC } from 'react';
import { Box, styled } from '@mui/material';
import { ArrayParam, withDefault } from 'use-query-params';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@ -45,7 +45,19 @@ const ChartWidget = styled(Widget)(({ theme }) => ({
},
}));
const StickyWrapper = styled(Box)<{ scrolled?: boolean }>(
({ theme, scrolled }) => ({
position: 'sticky',
top: 0,
zIndex: 1000,
padding: scrolled ? theme.spacing(2, 0) : theme.spacing(0, 0, 2),
background: theme.palette.background.application,
transition: 'padding 0.3s ease',
}),
);
export const ExecutiveDashboard: VFC = () => {
const [scrolled, setScrolled] = useState(false);
const { executiveDashboardData, loading, error } = useExecutiveDashboard();
const stateConfig = {
projects: withDefault(ArrayParam, [allOption.id]),
@ -72,9 +84,21 @@ export const ExecutiveDashboard: VFC = () => {
const summary = useFilteredFlagsSummary(projectsData);
const isOneProjectSelected = projects.length === 1;
const handleScroll = () => {
if (!scrolled && window.scrollY > 0) {
setScrolled(true);
} else if (scrolled && window.scrollY === 0) {
setScrolled(false);
}
};
if (typeof window !== 'undefined') {
window.addEventListener('scroll', handleScroll);
}
return (
<>
<Box sx={(theme) => ({ paddingBottom: theme.spacing(4) })}>
<StickyWrapper scrolled={scrolled}>
<DashboardHeader
actions={
<ProjectSelect
@ -85,7 +109,7 @@ export const ExecutiveDashboard: VFC = () => {
/>
}
/>
</Box>
</StickyWrapper>
<StyledGrid>
<ConditionallyRender
condition={showAllProjects}

3
frontend/src/component/executiveDashboard/components/DashboardHeader/DashboardHeader.tsx
View File

@ -1,4 +1,4 @@
import { ReactNode, VFC } from 'react';
import { ReactNode, VFC, useState } from 'react';
import { useUiFlag } from 'hooks/useUiFlag';
import { useFeedback } from 'component/feedbackNew/useFeedback';
import ReviewsOutlined from '@mui/icons-material/ReviewsOutlined';
@ -8,6 +8,7 @@ import {
styled,
useMediaQuery,
useTheme,
Box,
} from '@mui/material';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { Badge } from 'component/common/Badge/Badge';

4
frontend/src/component/executiveDashboard/components/LineChart/createChartOptions.ts
View File

@ -27,13 +27,15 @@ export const createOptions = (
},
tooltip: {
enabled: false,
position: 'nearest',
external: createTooltip(setTooltip),
},
},
locale: locationSettings.locale,
interaction: {
intersect: localTooltip || false,
intersect: false,
axis: 'x',
mode: 'index',
},
elements: {
point: {

7
frontend/src/component/executiveDashboard/components/Widget/Widget.tsx
View File

@ -3,6 +3,7 @@ import { Paper, Typography, styled, SxProps } from '@mui/material';
import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Theme } from '@mui/material/styles/createTheme';
import InfoOutlined from '@mui/icons-material/InfoOutlined';
const StyledPaper = styled(Paper)(({ theme }) => ({
padding: theme.spacing(3),
@ -29,7 +30,11 @@ export const Widget: FC<{
{title}
<ConditionallyRender
condition={Boolean(tooltip)}
show={<HelpIcon htmlTooltip tooltip={tooltip} />}
show={
<HelpIcon htmlTooltip tooltip={tooltip}>
<InfoOutlined />
</HelpIcon>
}
/>
</Typography>
{children}

6
frontend/src/component/executiveDashboard/componentsStat/HealthStats/HealthStats.tsx
View File

@ -73,7 +73,7 @@ export const HealthStats: VFC<IHealthStatsProps> = ({
x={206}
y={72}
fill={theme.palette.charts.health.text}
fontSize={12}
fontSize={13}
textAnchor='middle'
>
Healthy
@ -100,7 +100,7 @@ export const HealthStats: VFC<IHealthStatsProps> = ({
x={53}
y={81}
fill={theme.palette.charts.health.text}
fontSize={12}
fontSize={13}
textAnchor='middle'
>
Stale
@ -127,7 +127,7 @@ export const HealthStats: VFC<IHealthStatsProps> = ({
x={144}
y={232}
fill={theme.palette.charts.health.text}
fontSize={12}
fontSize={13}
textAnchor='middle'
>
<tspan x={144} dy='0'>

2
frontend/src/themes/theme.ts
View File

@ -283,7 +283,7 @@ export const theme = {
title: colors.grey[50],
healthy: colors.purple[800],
stale: colors.red[800],
potentiallyStale: colors.orange[800],
potentiallyStale: colors.orange[900],
gradientStale: colors.red[300],
gradientPotentiallyStale: colors.orange[500],
},