animation rews update

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(() => {

web/src/components/charts/BusterChartJS/ChartJSTheme.ts

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

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,

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
+    mockMetric15,
-    // mockMetric16,
+    mockMetric16,
-    // mockMetric17,
+    mockMetric17,
-    // mockMetric18
+    mockMetric18,
-    // mockMetric19,
+    mockMetric19,
-    // mockMetric20,
+    mockMetric20,
-    // mockMetric21,
+    mockMetric21,
-    // mockMetric22,
+    mockMetric22,
-    // mockMetric23,
+    mockMetric23,
-    // mockMetric24,
+    mockMetric24,
-    // mockMetric25,
+    mockMetric25,
-    // mockMetric26,
+    mockMetric26,
-    // mockMetric27,
+    mockMetric27,
-    // mockMetric28,
+    mockMetric28,
-    // mockMetric29,
+    mockMetric29,
-    // mockMetric30
+    mockMetric30
   ],
   dashboard: MOCK_DASHBOARD,
   permission: ShareRole.EDITOR,

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: {

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<string, string | number | null>[] => {
-  return Array.from({ length: 100 }, (x, index) => ({
+  return Array.from({ length: faker.number.int({ min: 20, max: 150 }) }, (x, index) => ({
-    sales: faker.number.int({ min: index * 50, max: (index + 1) * 100 }),
+    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,