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

refactor: lazy-load the charting library (#1184)

Browse Source
This commit is contained in:
olav 2022-08-02 10:23:55 +02:00 committed by GitHub
parent 710ebe08b3
commit 0d5f55a706
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/FeatureMetricsChart.tsx
View File

@ -67,3 +67,6 @@ ChartJS.register(
Tooltip, Tooltip,
Title Title
); );
// Use a default export to lazy-load the charting library.
export default FeatureMetricsChart;

12
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx
View File

@ -1,10 +1,10 @@
import { FeatureMetricsTable } from '../FeatureMetricsTable/FeatureMetricsTable'; import { FeatureMetricsTable } from '../FeatureMetricsTable/FeatureMetricsTable';
import { IFeatureMetricsRaw } from 'interfaces/featureToggle'; import { IFeatureMetricsRaw } from 'interfaces/featureToggle';
import { FeatureMetricsStatsRaw } from '../FeatureMetricsStats/FeatureMetricsStatsRaw'; import { FeatureMetricsStatsRaw } from '../FeatureMetricsStats/FeatureMetricsStatsRaw';
import { FeatureMetricsChart } from '../FeatureMetricsChart/FeatureMetricsChart';
import { Box, Typography } from '@mui/material'; import { Box, Typography } from '@mui/material';
import theme from 'themes/theme'; import theme from 'themes/theme';
import { useId } from 'hooks/useId'; import { useId } from 'hooks/useId';
import React, { Suspense } from 'react';
interface IFeatureMetricsContentProps { interface IFeatureMetricsContentProps {
metrics: IFeatureMetricsRaw[]; metrics: IFeatureMetricsRaw[];
@ -34,14 +34,14 @@ export const FeatureMetricsContent = ({
} }
return ( return (
<> <Suspense fallback={null}>
<Box <Box
borderTop={1} borderTop={1}
pt={2} pt={2}
mt={3} mt={3}
borderColor={theme.palette.grey[200]} borderColor={theme.palette.grey[200]}
> >
<FeatureMetricsChart <LazyFeatureMetricsChart
metrics={metrics} metrics={metrics}
hoursBack={hoursBack} hoursBack={hoursBack}
statsSectionId={statsSectionId} statsSectionId={statsSectionId}
@ -61,6 +61,10 @@ export const FeatureMetricsContent = ({
tableSectionId={tableSectionId} tableSectionId={tableSectionId}
/> />
</Box> </Box>
</> </Suspense>
); );
}; };
const LazyFeatureMetricsChart = React.lazy(
() => import('../FeatureMetricsChart/FeatureMetricsChart')
);