dashboard updates

web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx

@@ -67,7 +67,7 @@ const _DashboardMetricItem: React.FC<{
   const cardClassNamesMemoized = useMemo(() => {
     return {
       body: `h-full w-full overflow-hidden ${isTable ? '!p-0' : '!px-2 !pt-2 !pb-0.5'} relative`,
-      header: cx(`!p-0 !min-h-[52px]`, styles.cardTitle)
+      header: cx(`!p-0 !min-h-[52px] !mb-0`, styles.cardTitle)
     };
   }, [isTable]);
 

web/src/app/app/_controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricTitle.tsx

@@ -51,7 +51,7 @@ export const MetricTitle: React.FC<{
             <Title
               {...titleConfig}
               level={4}
-              className="max-w-[calc(100%_-_24px)] !text-md"
+              className="max-w-[calc(100%_-_22px)] !text-md"
               style={{ fontSize: '14px' }}>
               {`${title}`}
             </Title>

web/src/components/charts/BusterChartJS/hooks/useOptions/useTooltipOptions.ts/BusterChartJSTooltip.tsx

@@ -31,6 +31,7 @@ export const BusterChartJSTooltip: React.FC<{
   const isScatter = selectedChartType === ChartType.Scatter;
   const isLine = selectedChartType === ChartType.Line;
   const isBar = selectedChartType === ChartType.Bar;
+  const isPie = selectedChartType === ChartType.Pie;
   const isComboChart = selectedChartType === ChartType.Combo;
   const datasets = chart.data.datasets;
   const dataPoints = dataPointsProp.filter((item) => !item.dataset.isTrendline);
@@ -38,7 +39,6 @@ export const BusterChartJSTooltip: React.FC<{
   const title = useMemo(() => {
     if (isScatter) return undefined;
 
-    const isTimeAxis = chart.scales.x.type === 'time';
     const dataIndex = dataPoints[0].dataIndex;
     const value = chart.data.labels?.[dataIndex!];
     if (typeof value === 'string') return String(value);
@@ -50,16 +50,8 @@ export const BusterChartJSTooltip: React.FC<{
     const key = xAxisKeys.at(0)!;
     const columnLabelFormat = columnLabelFormats[key!];
 
-    // if (columnLabelFormat.dateFormat === 'auto') {
-    //   const parsedXValue = dataPoints[0]?.parsed?.x;
-    //   const assosciatedTick = chart.scales.x.ticks.find((tick) => tick.value === parsedXValue);
-    //   if (assosciatedTick) {
-    //     return assosciatedTick.label as string;
-    //   }
-    // }
-
     return formatLabel(value as number | Date, columnLabelFormat);
-  }, [dataPoints, chart]);
+  }, [dataPoints, isPie, isScatter, chart]);
 
   const tooltipItems: ITooltipItem[] = useMemo(() => {
     if (isBar || isLine || isComboChart) {

web/src/components/charts/LoadingComponents/ChartLoadingComponents.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Text } from '@/components/text';
+import { ShimmerText, Text } from '@/components/text';
 import { busterChartsTwMerge } from '@/styles/busterChartsTwMerge';
 import React from 'react';
 
@@ -8,17 +8,22 @@ export const PreparingYourRequestLoader: React.FC<{
   className?: string;
   text?: string;
   error?: string | null;
-}> = ({ className = '', text = 'Processing your request...', error }) => {
+  useShimmer?: boolean;
+}> = ({ className = '', text = 'Processing your request...', error, useShimmer = true }) => {
   return (
     <div
       className={busterChartsTwMerge(
         'flex h-full w-full items-center justify-center space-x-1.5',
         className
       )}>
+      {error || useShimmer === false ? (
         <Text type="tertiary" className="flex items-center text-center">
           {/* {!!error && <AppMaterialIcons icon="error" className="mr-1" />} */}
           {error || text}
         </Text>
+      ) : (
+        <ShimmerText text={text} />
+      )}
     </div>
   );
 };

web/src/context/MetricData/BusterMetricDataProvider.tsx

@@ -8,8 +8,8 @@ import { useMemoizedFn, useMount } from 'ahooks';
 import { useBusterWebSocket } from '../BusterWebSocket';
 import type { BusterMetricData } from '../Metrics';
 import { MetricEvent_fetchingData } from '@/api/buster_socket/metrics/eventsInterfaces';
-import { MOCK_DATA } from './MOCK_DATA';
 import { DEFAULT_MESSAGE_DATA } from './config';
+import { createMockData } from './MOCK_DATA';
 
 const useMetricData = () => {
   const busterSocket = useBusterWebSocket();
@@ -103,10 +103,7 @@ const useMetricData = () => {
     setTimeout(() => {
       //TODO: remove mock data
       // _setMetricData(metricId, { ...MOCK_DATA, fetched: true });
-      onSetDataForMetric({
-        ...MOCK_DATA,
-        metricId
-      });
+      onSetDataForMetric(createMockData(metricId));
     }, Math.random() * 5000);
 
     return await busterSocket.emitAndOnce({

web/src/context/MetricData/MOCK_DATA.ts

@@ -3,15 +3,13 @@ import type { BusterMetricData } from '../Metrics';
 import { faker } from '@faker-js/faker';
 
 const mockData = (): Record<string, string | number | null>[] => {
-  return Array.from({ length: faker.number.int({ min: 20, max: 150 }) }, (x, index) => ({
+  return Array.from({ length: faker.number.int({ min: 5, max: 150 }) }, (x, index) => ({
     sales: index + 1,
     date: faker.date.past({ years: index + 1 }).toISOString(),
     product: faker.commerce.productName()
   }));
 };
 
-const data = mockData();
-
 const dataMetadata: DataMetadata = {
   column_count: 3,
   column_metadata: [
@@ -40,15 +38,15 @@ const dataMetadata: DataMetadata = {
       type: 'text'
     }
   ],
-  row_count: data.length
+  row_count: 1
 };
 
-export const MOCK_DATA: Required<BusterMetricData> = {
+const MOCK_DATA: Required<BusterMetricData> = {
   fetched: true,
   fetching: false,
   error: null,
   fetchedAt: Date.now(),
-  data: data,
+  data: mockData(),
   metricId: faker.string.uuid(),
   data_metadata: dataMetadata,
   dataFromRerun: null,
@@ -62,9 +60,14 @@ ORDER BY date ASC`
 };
 
 export const createMockData = (metricId: string): Required<BusterMetricData> => {
+  const data = mockData();
   return {
     ...MOCK_DATA,
     metricId,
-    data: mockData()
+    data: data,
+    data_metadata: {
+      ...dataMetadata,
+      row_count: data.length
+    }
   };
 };

web/src/context/Metrics/MOCK_METRIC.ts

@@ -9,9 +9,19 @@ import { IBusterMetric } from './interfaces';
 import { faker } from '@faker-js/faker';
 import { ChartType } from '@/components/charts';
 
-const MOCK_CHART_CONFIG: IBusterMetricChartConfig = {
+const createMockChartConfig = (): IBusterMetricChartConfig => {
+  const chartType = faker.helpers.arrayElement([
+    ChartType.Bar,
+    ChartType.Table,
+    ChartType.Line,
+    ChartType.Pie,
+    ChartType.Scatter,
+    ChartType.Metric
+  ]);
+
+  return {
     ...DEFAULT_CHART_CONFIG,
-  selectedChartType: ChartType.Bar,
+    selectedChartType: chartType,
     barAndLineAxis: {
       x: ['date'],
       y: ['sales'],
@@ -24,7 +34,13 @@ const MOCK_CHART_CONFIG: IBusterMetricChartConfig = {
     scatterAxis: {
       x: ['date'],
       y: ['sales']
+    },
+    metricColumnId: 'sales',
+    metricHeader: {
+      columnId: 'sales',
+      useValue: false
     }
+  };
 };
 
 const dataMetadata: DataMetadata = {
@@ -58,8 +74,8 @@ const dataMetadata: DataMetadata = {
   row_count: 10
 };
 
-export const MOCK_METRIC = (id = ''): IBusterMetric => ({
-  id: id || '123',
+export const createMockMetric = (id: string): IBusterMetric => {
+  return {
     title: id + ' - ' + faker.lorem.words({ min: 2, max: 6 }),
     version_number: 1,
     file_name: `${faker.lorem.words({ min: 1, max: 3 })}.yml`,
@@ -67,7 +83,7 @@ export const MOCK_METRIC = (id = ''): IBusterMetric => ({
     data_source_id: '6840fa04-c0d7-4e0e-8d3d-ea9190d93874',
     time_frame: '1d',
     type: 'metric',
-  chart_config: MOCK_CHART_CONFIG,
+    chart_config: createMockChartConfig(),
     fetched: true,
     fetching: false,
     fetchedAt: 0,
@@ -79,13 +95,13 @@ export const MOCK_METRIC = (id = ''): IBusterMetric => ({
     evaluation_score: 'Moderate',
     evaluation_summary: faker.lorem.sentence(33),
     file: `
-metric:
+  metric:
     name: sales_performance
     description: Monthly sales performance by product
     source: sales_database
     refresh_interval: daily
     
-dimensions:
+  dimensions:
     - name: date
       type: date
       format: YYYY-MM-DD
@@ -94,7 +110,7 @@ dimensions:
     - name: region 
       type: string
       
-measures:
+  measures:
     - name: sales_amount
       type: decimal
       aggregation: sum
@@ -102,7 +118,7 @@ measures:
       type: integer
       aggregation: sum
       
-filters:
+  filters:
     - field: date
       operator: between
       value: [2024-01-01, 2024-12-31]
@@ -110,16 +126,16 @@ filters:
       operator: in
       value: [North, South, East, West]
       
-joins:
+  joins:
     - name: product_details
       type: left
       on: product_id
       
-sorting:
+  sorting:
     - field: sales_amount
       direction: desc
       
-limit: 1000`,
+  limit: 1000`,
     created_at: '',
     updated_at: '',
     sent_by_id: '',
@@ -136,8 +152,8 @@ limit: 1000`,
     FROM demo.response_times
     ORDER BY date ASC
     LIMIT 100
-)
-SELECT * FROM records;`,
+  )
+  SELECT * FROM records;`,
     feedback: null,
     draft_session_id: null,
     collections: [],
@@ -151,12 +167,7 @@ SELECT * FROM records;`,
     public_enabled_by: '',
     publicly_accessible: false,
     public_password: '',
-  permission: ShareRole.OWNER
-});
-
-export const createMockMetric = (id: string): IBusterMetric => {
-  return {
-    ...MOCK_METRIC(id),
+    permission: ShareRole.OWNER,
     id
   };
 };