mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-01 00:08:27 +01:00
2e0ca3150a
Fills datasets that do not have all the datapoints with 0 so that every line in the graph starts at the beginning and ends at the end of graph. Closes # [1-2256](https://linear.app/unleash/issue/1-2256/fill-the-data-with-0s-so-that-all-x-axis-labels-have-values) --------- Signed-off-by: andreas-unleash <andreas@getunleash.ai> Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
import { useState, type VFC } from 'react';
|
|
import { Box, styled } from '@mui/material';
|
|
import { ArrayParam, withDefault } from 'use-query-params';
|
|
import { usePersistentTableState } from 'hooks/usePersistentTableState';
|
|
import {
|
|
allOption,
|
|
ProjectSelect,
|
|
} from 'component/common/ProjectSelect/ProjectSelect';
|
|
import { useInsights } from 'hooks/api/getters/useInsights/useInsights';
|
|
import { InsightsHeader } from './components/InsightsHeader/InsightsHeader';
|
|
import { useInsightsData } from './hooks/useInsightsData';
|
|
import { InsightsCharts } from './InsightsCharts';
|
|
|
|
const StickyWrapper = styled(Box, {
|
|
shouldForwardProp: (prop) => prop !== 'scrolled',
|
|
})<{ scrolled?: boolean }>(({ theme, scrolled }) => ({
|
|
position: 'sticky',
|
|
top: 0,
|
|
zIndex: theme.zIndex.sticky,
|
|
padding: scrolled ? theme.spacing(2, 0) : theme.spacing(0, 0, 2),
|
|
background: theme.palette.background.application,
|
|
transition: 'padding 0.3s ease',
|
|
}));
|
|
|
|
export const Insights: VFC = () => {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
const { insights, loading, error } = useInsights();
|
|
const stateConfig = {
|
|
projects: withDefault(ArrayParam, [allOption.id]),
|
|
};
|
|
const [state, setState] = usePersistentTableState('insights', stateConfig);
|
|
const setProjects = (projects: string[]) => {
|
|
setState({ projects });
|
|
};
|
|
const projects = state.projects
|
|
? (state.projects.filter(Boolean) as string[])
|
|
: [];
|
|
|
|
const insightsData = useInsightsData(insights, projects);
|
|
|
|
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 (
|
|
<>
|
|
<StickyWrapper scrolled={scrolled}>
|
|
<InsightsHeader
|
|
actions={
|
|
<ProjectSelect
|
|
selectedProjects={projects}
|
|
onChange={setProjects}
|
|
dataTestId={'DASHBOARD_PROJECT_SELECT'}
|
|
sx={{
|
|
flex: 1,
|
|
maxWidth: '360px',
|
|
width: '100%',
|
|
}}
|
|
/>
|
|
}
|
|
/>
|
|
</StickyWrapper>
|
|
<InsightsCharts
|
|
loading={loading}
|
|
projects={projects}
|
|
{...insightsData}
|
|
/>
|
|
</>
|
|
);
|
|
};
|