feat: dashboard v2, esm, upgrades (#211)

* esm

* wip

* wip

* wip

* wip

* wip

* wip

* subscription notice

* wip

* wip

* wip

* fix envs

* fix: update docker build

* fix

* esm/types

* delete dashboard :D

* add patches to dockerfiles

* update packages + catalogs + ts

* wip

* remove native libs

* ts

* improvements

* fix redirects and fetching session

* try fix favicon

* fixes

* fix

* order and resize reportds within a dashboard

* improvements

* wip

* added userjot to dashboard

* fix

* add op

* wip

* different cache key

* improve date picker

* fix table

* event details loading

* redo onboarding completely

* fix login

* fix

* fix

* extend session, billing and improve bars

* fix

* reduce price on 10M

apps/start/src/components/realtime/map/markers.ts

@@ -0,0 +1,43 @@
+import { useCallback, useState } from 'react';
+
+import type { Coordinate } from './coordinates';
+
+const useActiveMarkers = (initialMarkers: Coordinate[]) => {
+  const [activeMarkers, setActiveMarkers] = useState(initialMarkers);
+
+  const toggleActiveMarkers = useCallback(() => {
+    // Shuffle array function
+    const shuffled = [...initialMarkers].sort(() => 0.5 - Math.random());
+    // Cut the array in half randomly to simulate changes in active markers
+    const selected = shuffled.slice(
+      0,
+      Math.floor(Math.random() * shuffled.length) + 1,
+    );
+    setActiveMarkers(selected);
+  }, [activeMarkers]);
+
+  return { markers: activeMarkers, toggle: toggleActiveMarkers };
+};
+
+export default useActiveMarkers;
+
+export function calculateMarkerSize(count: number) {
+  const minSize = 3; // Minimum size for single visitor (reduced from 4)
+  const maxSize = 14; // Maximum size for very large clusters (reduced from 20)
+
+  if (count <= 1) return minSize;
+
+  // Use square root scaling for better visual differentiation
+  // This creates more noticeable size differences for common visitor counts
+  // Examples:
+  // 1 visitor: 3px
+  // 2 visitors: ~5px
+  // 5 visitors: ~7px
+  // 10 visitors: ~9px
+  // 25 visitors: ~12px
+  // 50+ visitors: ~14px (max)
+  const scaledSize = minSize + Math.sqrt(count - 1) * 1.8;
+
+  // Ensure size does not exceed maxSize or fall below minSize
+  return Math.max(minSize, Math.min(scaledSize, maxSize));
+}