server side events and ui improvemnt

apps/web/src/components/report/chart/ChartEmpty.tsx

@@ -0,0 +1,31 @@
+import { FullPageEmptyState } from '@/components/FullPageEmptyState';
+import { cn } from '@/utils/cn';
+
+import { useChartContext } from './ChartProvider';
+import { MetricCardEmpty } from './MetricCard';
+
+export function ChartEmpty() {
+  const { editMode, chartType } = useChartContext();
+
+  if (editMode) {
+    return (
+      <FullPageEmptyState title="No data">
+        We could not find any data for selected events and filter.
+      </FullPageEmptyState>
+    );
+  }
+
+  if (chartType === 'metric') {
+    return <MetricCardEmpty />;
+  }
+
+  return (
+    <div
+      className={
+        'aspect-video w-full max-h-[400px] flex justify-center items-center'
+      }
+    >
+      No data
+    </div>
+  );
+}