From 5405232de99ee9ba1530fadc4780a3accbd8a5f9 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Wed, 5 Feb 2025 22:57:56 -0700 Subject: [PATCH] animation rews update --- .../DashboardMetricItem.tsx | 4 +- .../charts/BusterChartJS/ChartJSTheme.ts | 4 - .../hooks/useOptions/useOptions.tsx | 2 +- web/src/context/Dashboards/MOCK_DASHBOARD.ts | 102 +++++++++--------- .../MetricData/BusterMetricDataProvider.tsx | 2 +- web/src/context/MetricData/MOCK_DATA.ts | 9 +- 6 files changed, 58 insertions(+), 65 deletions(-) diff --git a/web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx b/web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx index 28eb00ff4..6206c9f15 100644 --- a/web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx +++ b/web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx @@ -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(() => { diff --git a/web/src/components/charts/BusterChartJS/ChartJSTheme.ts b/web/src/components/charts/BusterChartJS/ChartJSTheme.ts index 3a9564460..a54f0165d 100644 --- a/web/src/components/charts/BusterChartJS/ChartJSTheme.ts +++ b/web/src/components/charts/BusterChartJS/ChartJSTheme.ts @@ -106,10 +106,6 @@ ChartJS.defaults.plugins = { }, tooltipHoverBar: { isDarkMode: false - }, - deferred: { - ...ChartJS.defaults.plugins.deferred, - yOffset: '40%' } }; diff --git a/web/src/components/charts/BusterChartJS/hooks/useOptions/useOptions.tsx b/web/src/components/charts/BusterChartJS/hooks/useOptions/useOptions.tsx index d308e04f3..d6cc7a4f0 100644 --- a/web/src/components/charts/BusterChartJS/hooks/useOptions/useOptions.tsx +++ b/web/src/components/charts/BusterChartJS/hooks/useOptions/useOptions.tsx @@ -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, diff --git a/web/src/context/Dashboards/MOCK_DASHBOARD.ts b/web/src/context/Dashboards/MOCK_DASHBOARD.ts index 4d7554f43..157655a5c 100644 --- a/web/src/context/Dashboards/MOCK_DASHBOARD.ts +++ b/web/src/context/Dashboards/MOCK_DASHBOARD.ts @@ -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, diff --git a/web/src/context/MetricData/BusterMetricDataProvider.tsx b/web/src/context/MetricData/BusterMetricDataProvider.tsx index 7bef754f4..126468c3b 100644 --- a/web/src/context/MetricData/BusterMetricDataProvider.tsx +++ b/web/src/context/MetricData/BusterMetricDataProvider.tsx @@ -107,7 +107,7 @@ const useMetricData = () => { ...MOCK_DATA, metricId }); - }, Math.random() * 10800); + }, Math.random() * 5000); return await busterSocket.emitAndOnce({ emitEvent: { diff --git a/web/src/context/MetricData/MOCK_DATA.ts b/web/src/context/MetricData/MOCK_DATA.ts index 3639703fe..56c477437 100644 --- a/web/src/context/MetricData/MOCK_DATA.ts +++ b/web/src/context/MetricData/MOCK_DATA.ts @@ -3,19 +3,14 @@ import type { BusterMetricData } from '../Metrics'; import { faker } from '@faker-js/faker'; const mockData = (): Record[] => { - 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,