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

animation rews update

This commit is contained in:
Nate Kelley 2025-02-05 22:57:56 -07:00
parent 279d903de2
commit 5405232de9
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
6 changed files with 58 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx
View File

@ -37,7 +37,9 @@ const _DashboardMetricItem: React.FC<{
const chartOptions = metric.chart_config;
const data = metricData.data || null;
const loading = loadingMetricData;
const animate = !initialAnimationEnded && !isDragOverlay && numberOfMetrics <= 12;
const dataLength = metricData?.data?.length || 1;
const animate =
!initialAnimationEnded && !isDragOverlay && dataLength < 125 && numberOfMetrics <= 30;
const isTable = metric.chart_config.selectedChartType === 'table';
const error = useMemo(() => {

4
web/src/components/charts/BusterChartJS/ChartJSTheme.ts
View File

@ -106,10 +106,6 @@ ChartJS.defaults.plugins = {
},
tooltipHoverBar: {
isDarkMode: false
},
deferred: {
...ChartJS.defaults.plugins.deferred,
yOffset: '40%'
}
};

2
web/src/components/charts/BusterChartJS/hooks/useOptions/useOptions.tsx
View File

@ -178,7 +178,7 @@ export const useOptions = ({
return {
indexAxis: isHorizontalBar ? 'y' : 'x',
animation: animate ? { duration: 1000 } : false,
animation: animate ? { duration: 1000 } : { duration: 0 },
responsive: true,
maintainAspectRatio: false,
backgroundColor: colors,

102
web/src/context/Dashboards/MOCK_DASHBOARD.ts
View File

@ -74,42 +74,42 @@ const MOCK_DASHBOARD: BusterDashboard = {
id: 'row-4',
columnSizes: [3, 3, 6],
items: [{ id: mockMetric10.id }, { id: mockMetric11.id }, { id: mockMetric12.id }]
},
{
id: 'row-5',
columnSizes: [6, 3, 3],
items: [{ id: mockMetric13.id }, { id: mockMetric14.id }, { id: mockMetric15.id }]
},
{
id: 'row-6',
columnSizes: [4, 4, 4],
items: [{ id: mockMetric16.id }, { id: mockMetric17.id }, { id: mockMetric18.id }]
},
{
id: 'row-6-5',
columnSizes: [12],
items: [{ id: mockMetric19.id }]
},
{
id: 'row-7',
columnSizes: [3, 3, 6],
items: [{ id: mockMetric20.id }, { id: mockMetric21.id }, { id: mockMetric22.id }]
},
{
id: 'row-8',
columnSizes: [6, 3, 3],
items: [{ id: mockMetric23.id }, { id: mockMetric24.id }, { id: mockMetric25.id }]
},
{
id: 'row-9',
columnSizes: [4, 4, 4],
items: [{ id: mockMetric26.id }, { id: mockMetric27.id }, { id: mockMetric28.id }]
},
{
id: 'row-10',
columnSizes: [6, 6],
items: [{ id: mockMetric29.id }, { id: mockMetric30.id }]
}
// {
// id: 'row-5',
// columnSizes: [6, 3, 3],
// items: [{ id: mockMetric13.id }, { id: mockMetric14.id }, { id: mockMetric15.id }]
// }
// {
// id: 'row-6',
// columnSizes: [4, 4, 4],
// items: [{ id: mockMetric16.id }, { id: mockMetric17.id }, { id: mockMetric18.id }]
// }
// {
// id: 'row-6-5',
// columnSizes: [12],
// items: [{ id: mockMetric19.id }]
// },
// {
// id: 'row-7',
// columnSizes: [3, 3, 6],
// items: [{ id: mockMetric20.id }, { id: mockMetric21.id }, { id: mockMetric22.id }]
// },
// {
// id: 'row-8',
// columnSizes: [6, 3, 3],
// items: [{ id: mockMetric23.id }, { id: mockMetric24.id }, { id: mockMetric25.id }]
// },
// {
// id: 'row-9',
// columnSizes: [4, 4, 4],
// items: [{ id: mockMetric26.id }, { id: mockMetric27.id }, { id: mockMetric28.id }]
// },
// {
// id: 'row-10',
// columnSizes: [6, 6],
// items: [{ id: mockMetric29.id }, { id: mockMetric30.id }]
// }
]
},
sharingKey: 'mock-sharing-key',
@ -137,22 +137,22 @@ export const MOCK_DASHBOARD_RESPONSE: BusterDashboardResponse = {
mockMetric12,
mockMetric13,
mockMetric14,
mockMetric15
// mockMetric16,
// mockMetric17,
// mockMetric18
// mockMetric19,
// mockMetric20,
// mockMetric21,
// mockMetric22,
// mockMetric23,
// mockMetric24,
// mockMetric25,
// mockMetric26,
// mockMetric27,
// mockMetric28,
// mockMetric29,
// mockMetric30
mockMetric15,
mockMetric16,
mockMetric17,
mockMetric18,
mockMetric19,
mockMetric20,
mockMetric21,
mockMetric22,
mockMetric23,
mockMetric24,
mockMetric25,
mockMetric26,
mockMetric27,
mockMetric28,
mockMetric29,
mockMetric30
],
dashboard: MOCK_DASHBOARD,
permission: ShareRole.EDITOR,

2
web/src/context/MetricData/BusterMetricDataProvider.tsx
View File

@ -107,7 +107,7 @@ const useMetricData = () => {
...MOCK_DATA,
metricId
});
}, Math.random() * 10800);
}, Math.random() * 5000);
return await busterSocket.emitAndOnce({
emitEvent: {

9
web/src/context/MetricData/MOCK_DATA.ts
View File

@ -3,19 +3,14 @@ import type { BusterMetricData } from '../Metrics';
import { faker } from '@faker-js/faker';
const mockData = (): Record<string, string | number | null>[] => {
return Array.from({ length: 100 }, (x, index) => ({
sales: faker.number.int({ min: index * 50, max: (index + 1) * 100 }),
return Array.from({ length: faker.number.int({ min: 20, max: 150 }) }, (x, index) => ({
sales: index + 1,
date: faker.date.past({ years: index + 1 }).toISOString(),
product: faker.commerce.productName()
}));
};
const data = mockData();
data.push({
sales: 1,
date: '2024-01-01',
product: 'NATE RULEZ'
});
const dataMetadata: DataMetadata = {
column_count: 3,