houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lazy load Nivo (#14454)

Browse Source 
oops :p
This commit is contained in:
nitin
2025-09-13 18:52:43 +05:30
committed by GitHub
parent da5ecf35fa
commit b5809096f8
5 changed files with 135 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/page-layout/widgets/graph/components/ChartSkeletonLoader.tsx
+17
View File
@@ -0,0 +1,17 @@
import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
import { useTheme } from '@emotion/react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
export const ChartSkeletonLoader = () => {
const theme = useTheme();
return (
<SkeletonTheme
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.lighter}
borderRadius={4}
>
<Skeleton width={120} height={SKELETON_LOADER_HEIGHT_SIZES.standard.m} />
</SkeletonTheme>
);
};
packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetRenderer.tsx
+88 -50
View File
@@ -1,11 +1,41 @@
import { GraphType } from '@/page-layout/mocks/mockWidgets';
import { getDefaultWidgetData } from '@/page-layout/utils/getDefaultWidgetData';
import { GraphWidgetBarChart } from '@/page-layout/widgets/graph/components/GraphWidgetBarChart';
import { GraphWidgetGaugeChart } from '@/page-layout/widgets/graph/components/GraphWidgetGaugeChart';
import { GraphWidgetLineChart } from '@/page-layout/widgets/graph/components/GraphWidgetLineChart';
import { ChartSkeletonLoader } from '@/page-layout/widgets/graph/components/ChartSkeletonLoader';
import { GraphWidgetNumberChart } from '@/page-layout/widgets/graph/components/GraphWidgetNumberChart';
import { GraphWidgetPieChart } from '@/page-layout/widgets/graph/components/GraphWidgetPieChart';
import { type GraphWidget } from '@/page-layout/widgets/graph/types/GraphWidget';
import { lazy, Suspense } from 'react';
const GraphWidgetBarChart = lazy(() =>
import('@/page-layout/widgets/graph/components/GraphWidgetBarChart').then(
(module) => ({
default: module.GraphWidgetBarChart,
}),
),
);
const GraphWidgetLineChart = lazy(() =>
import('@/page-layout/widgets/graph/components/GraphWidgetLineChart').then(
(module) => ({
default: module.GraphWidgetLineChart,
}),
),
);
const GraphWidgetPieChart = lazy(() =>
import('@/page-layout/widgets/graph/components/GraphWidgetPieChart').then(
(module) => ({
default: module.GraphWidgetPieChart,
}),
),
);
const GraphWidgetGaugeChart = lazy(() =>
import('@/page-layout/widgets/graph/components/GraphWidgetGaugeChart').then(
(module) => ({
default: module.GraphWidgetGaugeChart,
}),
),
);
type GraphWidgetRendererProps = {
widget: GraphWidget;
@@ -35,64 +65,72 @@ export const GraphWidgetRenderer = ({ widget }: GraphWidgetRendererProps) => {
case GraphType.GAUGE:
return (
<GraphWidgetGaugeChart
data={{
value: data.value,
min: data.min,
max: data.max,
label: data.label,
}}
displayType="percentage"
showValue
id={`gauge-chart-${widget.id}`}
/>
<Suspense fallback={<ChartSkeletonLoader />}>
<GraphWidgetGaugeChart
data={{
value: data.value,
min: data.min,
max: data.max,
label: data.label,
}}
displayType="percentage"
showValue
id={`gauge-chart-${widget.id}`}
/>
</Suspense>
);
case GraphType.PIE:
return (
<GraphWidgetPieChart
data={data.items}
showLegend
displayType="percentage"
id={`pie-chart-${widget.id}`}
/>
<Suspense fallback={<ChartSkeletonLoader />}>
<GraphWidgetPieChart
data={data.items}
showLegend
displayType="percentage"
id={`pie-chart-${widget.id}`}
/>
</Suspense>
);
case GraphType.BAR:
return (
<GraphWidgetBarChart
data={data.items}
indexBy={data.indexBy}
keys={data.keys}
seriesLabels={data.seriesLabels}
layout={data.layout}
showLegend
showGrid
displayType="number"
id={`bar-chart-${widget.id}`}
/>
<Suspense fallback={<ChartSkeletonLoader />}>
<GraphWidgetBarChart
data={data.items}
indexBy={data.indexBy}
keys={data.keys}
seriesLabels={data.seriesLabels}
layout={data.layout}
showLegend
showGrid
displayType="number"
id={`bar-chart-${widget.id}`}
/>
</Suspense>
);
case GraphType.LINE:
return (
<GraphWidgetLineChart
id={`line-chart-${widget.id}`}
data={data.series}
enableArea={data.enableArea}
showLegend={data.showLegend}
showGrid={data.showGrid}
enablePoints={data.enablePoints}
xAxisLabel={data.xAxisLabel}
yAxisLabel={data.yAxisLabel}
displayType={data.displayType}
prefix={data.prefix}
suffix={data.suffix}
xScale={data.xScale}
yScale={data.yScale}
curve={data.curve}
stackedArea={data.stackedArea}
enableSlices={data.enableSlices}
/>
<Suspense fallback={<ChartSkeletonLoader />}>
<GraphWidgetLineChart
id={`line-chart-${widget.id}`}
data={data.series}
enableArea={data.enableArea}
showLegend={data.showLegend}
showGrid={data.showGrid}
enablePoints={data.enablePoints}
xAxisLabel={data.xAxisLabel}
yAxisLabel={data.yAxisLabel}
displayType={data.displayType}
prefix={data.prefix}
suffix={data.suffix}
xScale={data.xScale}
yScale={data.yScale}
curve={data.curve}
stackedArea={data.stackedArea}
enableSlices={data.enableSlices}
/>
</Suspense>
);
default: