update impact metrics layout

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx

@@ -5,7 +5,7 @@ import Add from '@mui/icons-material/Add';
 import { useImpactMetricsMetadata } from 'hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata.ts';
 import { type FC, useMemo, useState } from 'react';
 import { ChartConfigModal } from '../../../impact-metrics/ChartConfigModal/ChartConfigModal.tsx';
-import { useImpactMetricsApi } from 'hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsApi.ts';
+import { useImpactMetricsApi } from 'hooks/api/actions/useImpactMetricsApi/useImpactMetricsApi.ts';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam.ts';
 import { useFeatureImpactMetrics } from 'hooks/api/getters/useFeatureImpactMetrics/useFeatureImpactMetrics.ts';
 import { ChartItem } from '../../../impact-metrics/ChartItem.tsx';

frontend/src/component/impact-metrics/hooks/useImpactMetricsState.ts

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 import type { ChartConfig } from '../types.ts';
 import { useImpactMetricsConfig } from 'hooks/api/getters/useImpactMetricsConfig/useImpactMetricsConfig.ts';
-import { useImpactMetricsApi } from 'hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsApi.ts';
+import { useImpactMetricsApi } from 'hooks/api/actions/useImpactMetricsApi/useImpactMetricsApi.ts';
 
 /**
  * "Select all" represents all current and future labels.
@@ -19,17 +19,22 @@ export const useImpactMetricsState = () => {
 
     const { layout, charts } = useMemo(
         () => ({
-            layout: configs.map((config, index) => ({
-                i: config.id,
-                x: 0,
-                y: index * 4,
-                w: 6,
-                h: 4,
-                minW: 4,
-                minH: 2,
-                maxW: 12,
-                maxH: 8,
-            })),
+            layout: configs.map((config, index) => {
+                const column = index % 2;
+                const row = Math.floor(index / 2);
+
+                return {
+                    i: config.id,
+                    x: column * 6,
+                    y: row * 2,
+                    w: 6,
+                    h: 2,
+                    minW: 4,
+                    minH: 2,
+                    maxW: 12,
+                    maxH: 8,
+                };
+            }),
             charts: configs,
         }),
         [configs],

frontend/src/hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsSettingsApi.ts

@@ -1,35 +0,0 @@
-import { useCallback } from 'react';
-import useAPI from '../useApi/useApi.js';
-import type { ImpactMetricsState } from 'component/impact-metrics/types.ts';
-
-/**
- * @deprecated use `useImpactMetricsApi()` instead
- */
-export const useImpactMetricsSettingsApi = () => {
-    const { makeRequest, createRequest, errors, loading } = useAPI({
-        propagateErrors: true,
-    });
-
-    const updateSettings = useCallback(
-        async (settings: ImpactMetricsState) => {
-            const path = `api/admin/impact-metrics/settings`;
-            const req = createRequest(
-                path,
-                {
-                    method: 'PUT',
-                    body: JSON.stringify(settings),
-                },
-                'updateImpactMetricsSettings',
-            );
-
-            return makeRequest(req.caller, req.id);
-        },
-        [makeRequest, createRequest],
-    );
-
-    return {
-        updateSettings,
-        errors,
-        loading,
-    };
-};

frontend/src/hooks/api/getters/useImpactMetricsSettings/useImpactMetricsSettings.ts

@@ -1,21 +0,0 @@
-import { fetcher, useApiGetter } from '../useApiGetter/useApiGetter.js';
-import { formatApiPath } from 'utils/formatPath';
-import type { DisplayImpactMetricsState } from 'component/impact-metrics/types.ts';
-
-/**
- * @deprecated use `useImpactMetricsConfig()` instead
- */
-export const useImpactMetricsSettings = () => {
-    const PATH = `api/admin/impact-metrics/settings`;
-    const { data, refetch, loading, error } =
-        useApiGetter<DisplayImpactMetricsState>(formatApiPath(PATH), () =>
-            fetcher(formatApiPath(PATH), 'Impact metrics settings'),
-        );
-
-    return {
-        settings: data || { charts: [], layout: [] },
-        refetch,
-        loading,
-        error,
-    };
-};