Drag-and-Drop statistics

assets/css/app.css

@@ -5,6 +5,8 @@
 @import './tooltip.css';
 @import './flatpickr-colors.css';
 @import './chartjs.css';
+@import 'react-grid-layout/css/styles.css';
+@import 'react-resizable/css/styles.css';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
@@ -50,7 +52,8 @@ html {
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  width: 100vw; /* Prevents content from jumping when scrollbar is added/removed due to vertical overflow */
+  width: 100vw;
+  /* Prevents content from jumping when scrollbar is added/removed due to vertical overflow */
   overflow-x: hidden;
 }
 
@@ -284,20 +287,23 @@ iframe[hidden] {
 .active-prop-heading {
   /* Properties related to text-decoration are all here in one place. TailwindCSS does support underline but that's about it. */
   text-decoration-line: underline;
-  text-decoration-color: #4338ca; /* tailwind's indigo-700 */
+  text-decoration-color: #4338ca;
+  /* tailwind's indigo-700 */
   text-decoration-thickness: 2px;
 }
 
 @media (prefers-color-scheme: dark) {
   .active-prop-heading {
-    text-decoration-color: #6366f1; /* tailwind's indigo-500 */
+    text-decoration-color: #6366f1;
+    /* tailwind's indigo-500 */
   }
 }
 
 /* This class is used for styling embedded dashboards. Do not remove. */
 /* stylelint-disable */
 /* prettier-ignore */
-.date-option-group { }
+.date-option-group {}
+
 /* stylelint-enable */
 
 .popper-tooltip {
@@ -320,4 +326,4 @@ iframe[hidden] {
   visibility: visible;
   content: '';
   transform: rotate(45deg) translateY(1px);
-}
+}

assets/js/dashboard/index.tsx

@@ -8,6 +8,82 @@ import { TopBar } from './nav-menu/top-bar'
 import Behaviours from './stats/behaviours'
 import { useQueryContext } from './query-context'
 import { isRealTimeDashboard } from './util/filters'
+import { Layout, Responsive, WidthProvider, ResizeHandle } from 'react-grid-layout'
+
+const ResponsiveGridLayout = WidthProvider(Responsive);
+
+type Layouts = {
+  lg: Layout[];
+  md: Layout[];
+  sm: Layout[];
+  xs: Layout[];
+  xxs: Layout[];
+};
+
+//NOTE: Here can be problem as ResizeHandle is not exported from react-grid-layout by default, create own type or export it from react-grid-layout
+//type ResizeHandle = "se" | "sw" | "ne" | "nw" | "e" | "w" | "n" | "s";
+const availableResizers: ResizeHandle[] = ["se"];
+
+const breakpointsConfig: { [key in keyof Layouts]: { columns: number; width: number; height: number } } = {
+  lg: { columns: 2, width: 15, height: 13 },
+  md: { columns: 2, width: 8, height: 13 },
+  sm: { columns: 1, width: 16, height: 13 },
+  xs: { columns: 1, width: 12, height: 13 },
+  xxs: { columns: 1, width: 8, height: 13 },
+};
+
+interface ItemConfig {
+  id: string;
+  minW?: number;
+  minH?: number;
+}
+
+const items: ItemConfig[] = [
+  { id: "sources", minW: 5, minH: 12 },
+  { id: "pages", minW: 5, minH: 12 },
+  { id: "locations", minW: 5, minH: 12 },
+  { id: "devices", minW: 5, minH: 12 },
+];
+
+const generateLayouts = (): Layouts => {
+  const layouts = {} as Layouts;
+
+  for (const bp in breakpointsConfig) {
+    const config = breakpointsConfig[bp as keyof Layouts];
+    layouts[bp as keyof Layouts] = items.map((item, index) => {
+      // For single-column layouts, x is always 0, and y increases by the height of each item.
+      // For multi-column layouts, x depends on the column position and y on the row.
+      const x = config.columns === 1 ? 0 : (index % config.columns) * config.width;
+      const y = config.columns === 1 ? index * config.height : Math.floor(index / config.columns) * config.height;
+      return {
+        i: item.id,
+        x,
+        y,
+        w: config.width,
+        h: config.height,
+        minW: item.minW,
+        minH: item.minH,
+        resizeHandles: availableResizers,
+      };
+    });
+  }
+  return layouts;
+};
+
+function getFromLS() {
+  if (typeof window === 'undefined') return null;
+  try {
+    return JSON.parse(window.localStorage.getItem("dashboard-layout") || "null");
+  } catch (_error) {
+    return null;
+  }
+}
+
+function saveToLS(layouts: Layouts) {
+  if (typeof window !== 'undefined') {
+    window.localStorage.setItem("dashboard-layout", JSON.stringify(layouts));
+  }
+}
 
 function DashboardStats({
   importedDataInView,
@@ -16,30 +92,56 @@ function DashboardStats({
   importedDataInView?: boolean
   updateImportedDataInView?: (v: boolean) => void
 }) {
+  const initialLayouts = getFromLS() || generateLayouts();
+  const [layouts, setLayouts] = useState<Layouts>(initialLayouts);
+
+  const onLayoutChange = (_currentLayout: Layout[], allLayouts: Layouts) => {
+    setLayouts(allLayouts);
+    saveToLS(allLayouts);
+    if (typeof updateImportedDataInView === 'function') {
+      updateImportedDataInView(true);
+    }
+  };
+
   const statsBoxClass =
-    'stats-item relative w-full mt-6 p-4 flex flex-col bg-white dark:bg-gray-825 shadow-xl rounded'
+    'relative p-4 flex flex-col bg-white dark:bg-gray-825 shadow-xl rounded'
+
+  const dragHandleClass =
+    'drag-handle absolute top-0 left-0 right-0 h-5 rounded-t'
 
   return (
     <>
       <VisitorGraph updateImportedDataInView={updateImportedDataInView} />
-      <div className="w-full md:flex">
-        <div className={statsBoxClass}>
+      <ResponsiveGridLayout
+        className="styles.react-grid-layout layout relative"
+        layouts={layouts}
+        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+        cols={{ lg: 30, md: 16, sm: 16, xs: 12, xxs: 8 }}
+        rowHeight={20}
+        onLayoutChange={onLayoutChange}
+        isDraggable={true}
+        isResizable={true}
+        draggableHandle='.drag-handle'
+        margin={[15, 15]}
+        containerPadding={[0, 25]}
+      >
+        <div key="sources" className={statsBoxClass}>
+          <div className={dragHandleClass}></div>
           <Sources />
         </div>
-        <div className={statsBoxClass}>
+        <div key="pages" className={statsBoxClass}>
+          <div className={dragHandleClass}></div>
           <Pages />
         </div>
-      </div>
-
-      <div className="w-full md:flex">
-        <div className={statsBoxClass}>
+        <div key="locations" className={statsBoxClass}>
+          <div className={dragHandleClass}></div>
           <Locations />
         </div>
-        <div className={statsBoxClass}>
+        <div key="devices" className={statsBoxClass}>
+          <div className={dragHandleClass}></div>
           <Devices />
         </div>
-      </div>
-
+      </ResponsiveGridLayout>
       <Behaviours importedDataInView={importedDataInView} />
     </>
   )
@@ -71,4 +173,4 @@ function Dashboard() {
   )
 }
 
-export default Dashboard
+export default Dashboard;

assets/js/dashboard/stats/behaviours/index.js

@@ -445,7 +445,7 @@ export default function Behaviours({ importedDataInView }) {
 
   if (mode) {
     return (
-      <div className="items-start justify-between block w-full mt-6 md:flex">
+      <div className="items-start justify-between block w-full md:flex">
         <div className="w-full p-4 bg-white rounded shadow-xl dark:bg-gray-825">
           <div className="flex justify-between w-full">
             <div className="flex gap-x-1">