Vtrushin/feature/sh-119

statshouse-ui/package.json

@@ -45,6 +45,7 @@
     "react": "^19.0.0",
     "react-data-grid": "^7.0.0-beta.47",
     "react-dom": "^19.0.0",
+    "react-grid-layout": "^1.5.0",
     "react-markdown": "^9.0.3",
     "react-router-dom": "^7.1.1",
     "react-window": "^1.8.11",
@@ -65,6 +66,7 @@
     "@types/node": "^20.17.12",
     "@types/react": "^19.0.4",
     "@types/react-dom": "^19.0.2",
+    "@types/react-grid-layout": "^1.3.5",
     "@typescript-eslint/eslint-plugin": "^8.19.1",
     "@typescript-eslint/parser": "^8.19.1",
     "prettier": "^3.4.2"

statshouse-ui/src/api/enum.ts

@@ -66,6 +66,7 @@ export const GET_PARAMS = {
   dashboardGroupInfoCount: 'n',
   dashboardGroupInfoSize: 's',
   dashboardGroupInfoDescription: 'd',
+  dashboardGroupInfoLayouts: 'ly',
   metricLive: 'live',
   theme: 'theme',
   avoidCache: 'ac',

statshouse-ui/src/common/helpers.ts

@@ -7,6 +7,10 @@
 import { produce } from 'immer';
 import { mapKeyboardEnToRu, mapKeyboardRuToEn, toggleKeyboard } from './toggleKeyboard';
 import type uPlot from 'uplot';
+import { BREAKPOINT_WIDTH } from '@/components2/Dashboard/constants';
+import { GroupInfo } from '@/url2';
+import { BreakpointKey, LayoutScheme } from '@/components2/Dashboard/types';
+import { BREAKPOINTS_SIZES } from '@/components2/Dashboard/constants';
 
 export function isArray(item: unknown): item is unknown[] {
   return Array.isArray(item);
@@ -427,3 +431,53 @@ export const bwd = (v: number) => {
   }
   return Math.pow(2, v) - 1;
 };
+
+const getBreakpointKey = (width: number): BreakpointKey => {
+  if (width >= BREAKPOINT_WIDTH.xxxl) return BREAKPOINTS_SIZES.xxxl;
+  if (width >= BREAKPOINT_WIDTH.xxl) return BREAKPOINTS_SIZES.xxl;
+  if (width >= BREAKPOINT_WIDTH.xl) return BREAKPOINTS_SIZES.xl;
+  if (width >= BREAKPOINT_WIDTH.lg) return BREAKPOINTS_SIZES.lg;
+  if (width >= BREAKPOINT_WIDTH.md) return BREAKPOINTS_SIZES.md;
+  if (width >= BREAKPOINT_WIDTH.sm) return BREAKPOINTS_SIZES.sm;
+  if (width >= BREAKPOINT_WIDTH.xs) return BREAKPOINTS_SIZES.xs;
+  return BREAKPOINTS_SIZES.xxs;
+};
+
+export const getBreakpointConfig = () => {
+  const width = window.innerWidth;
+  return { breakpointKey: getBreakpointKey(width) };
+};
+
+export const calculateMaxRows = (plots: string[], cols: number, layout?: { y: number; h: number }[]) => {
+  if (!layout?.length) {
+    return Math.ceil(plots.length / cols) + 1;
+  }
+
+  const maxOccupiedRow = layout.reduce((max, item) => {
+    const itemLastRow = item.y + item.h;
+    return Math.max(max, itemLastRow);
+  }, 0);
+
+  return maxOccupiedRow + 1;
+};
+
+export const calculateDynamicRowHeight = (width: number, baseWidth: number = 2700, baseHeight: number = 290) => {
+  if (width <= baseWidth) {
+    return baseHeight;
+  }
+  const extraWidth = width - baseWidth;
+  const extraBlocks = Math.floor(extraWidth / 300);
+
+  const finalHeight = baseHeight + extraBlocks * 25;
+
+  return finalHeight;
+};
+
+export const updateGroupWithLayout = (groupInfo: GroupInfo, groupKey: string, layouts?: LayoutScheme) => {
+  const layoutScheme = layouts?.groupKey === groupKey;
+
+  if (layoutScheme) {
+    groupInfo.layouts = layouts.layout;
+  }
+  return groupInfo;
+};

statshouse-ui/src/common/prepareItemsGroup.tsx

@@ -4,7 +4,9 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-import type { QueryParams } from '@/url2';
+import { DEFAULT_LAYOUT_COORDS } from '@/components2/Dashboard/constants';
+import type { GroupKey, PlotKey, QueryParams } from '@/url2';
+import type { Layout } from 'react-grid-layout';
 
 export function prepareItemsGroup({
   orderGroup,
@@ -20,3 +22,38 @@ export function prepareItemsGroup({
     };
   });
 }
+
+type PrepareItemsGroupWithLayoutProps = {
+  groups: QueryParams['groups'];
+  orderGroup: QueryParams['orderGroup'];
+  orderPlot: PlotKey[];
+};
+
+type PrepareItemsGroupWithLayoutResult = {
+  itemsGroup: { groupKey: GroupKey; plots: PlotKey[] }[];
+  layoutsCoords: { groupKey: GroupKey; layout: Layout[] }[];
+};
+
+export function prepareItemsGroupWithLayout({
+  groups,
+  orderGroup,
+  orderPlot,
+}: PrepareItemsGroupWithLayoutProps): PrepareItemsGroupWithLayoutResult {
+  const orderP = [...orderPlot];
+  const itemsGroup = orderGroup.map((groupKey) => {
+    const count = groups[groupKey]?.count ?? 0;
+    const groupPlots = orderP.splice(0, count);
+
+    return {
+      groupKey,
+      plots: groupPlots,
+    };
+  });
+
+  const layoutsCoords = orderGroup.map((groupKey) => ({
+    groupKey,
+    layout: groups[groupKey]?.layouts ?? [DEFAULT_LAYOUT_COORDS],
+  }));
+
+  return { itemsGroup, layoutsCoords };
+}

statshouse-ui/src/components2/Dashboard/Dashboard.tsx

@@ -13,7 +13,7 @@
 import { Link } from 'react-router-dom';
 import cn from 'classnames';
 import { ReactComponent as SVGCloudArrowUp } from 'bootstrap-icons/icons/cloud-arrow-up.svg';
 import { DashboardLayout } from './DashboardLayout';
 import { DashboardSettings } from './DashboardSettings';
 import { useLinkPlot } from '@/hooks/useLinkPlot';
 import { useGlobalLoader } from '@/store2/plotQueryStore';
@@ -23,6 +23,7 @@
 import { HistoryList } from '../HistoryList';
 
 const PATH_VERSION_PARAM = '&dv';
+import { DashboardLayoutNew } from './DashboardLayoutNew';
 
 export type DashboardProps = {
   className?: string;
@@ -148,7 +149,7 @@
       {variablesLength > 0 && tabNum === '-1' && !tvModeEnable && (
         <DashboardVariablesControl className="col-12 container-xl mb-3 z-100 position-relative" />
       )}
-      <DashboardLayout className={cn('z-10', tabNum === '-1' ? 'position-relative' : 'hidden-dashboard')} />
+      <DashboardLayoutNew className={cn('z-10', tabNum === '-1' ? 'position-relative' : 'hidden-dashboard')} />
       {tabNum === '-2' && <DashboardSettings />}
       {tabNum === '-3' && dashboardId && (
         <HistoryList