Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Optimize dragging animation

This commit is contained in:
Nate Kelley 2025-05-09 14:24:27 -06:00
parent 6b46d218b8
commit e66f26f7a2
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
1 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx
View File

@ -3,7 +3,7 @@ import { Card, CardHeader } from '@/components/ui/card/CardBase';
import { useDashboardMetric } from './useDashboardMetric'; import { useDashboardMetric } from './useDashboardMetric';
import { MetricTitle } from './MetricTitle'; import { MetricTitle } from './MetricTitle';
import { createBusterRoute, BusterRoutes } from '@/routes'; import { createBusterRoute, BusterRoutes } from '@/routes';
import { useMemoizedFn, useMount } from '@/hooks'; import { useMemoizedFn } from '@/hooks';
import { cn } from '@/lib/classMerge'; import { cn } from '@/lib/classMerge';
import { BusterChart } from '@/components/ui/charts/BusterChart'; import { BusterChart } from '@/components/ui/charts/BusterChart';
@ -70,6 +70,10 @@ const DashboardMetricItemBase: React.FC<{
setInitialAnimationEnded(metricId); setInitialAnimationEnded(metricId);
}); });
const hideChart = useMemo(() => {
return isDragOverlay && data && data.length > 50;
}, [isDragOverlay, data?.length]);
return ( return (
<Card <Card
ref={conatinerRef} ref={conatinerRef}
@ -96,19 +100,23 @@ const DashboardMetricItemBase: React.FC<{
isTable ? '' : 'p-3', isTable ? '' : 'p-3',
isDragOverlay ? 'pointer-events-none' : 'pointer-events-auto' isDragOverlay ? 'pointer-events-none' : 'pointer-events-auto'
)}> )}>
{renderChart && chartOptions && ( {renderChart &&
<BusterChart chartOptions &&
data={data} (!hideChart ? (
loading={loading} <BusterChart
error={error} data={data}
onInitialAnimationEnd={onInitialAnimationEndPreflight} loading={loading}
animate={!isDragOverlay && animate} error={error}
animateLegend={false} onInitialAnimationEnd={onInitialAnimationEndPreflight}
columnMetadata={metricData?.data_metadata?.column_metadata} animate={!isDragOverlay && animate}
readOnly={true} animateLegend={false}
{...chartOptions} columnMetadata={metricData?.data_metadata?.column_metadata}
/> readOnly={true}
)} {...chartOptions}
/>
) : (
<div className="bg-gray-light/10 h-full w-full rounded" />
))}
</div> </div>
</Card> </Card>
); );