From dcb649436de1655c6f9cc62b01377621b5cef5ef Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Mon, 8 Sep 2025 16:12:36 +0200 Subject: [PATCH] update impact metrics layout --- .../FeatureMetrics/FeatureImpactMetrics.tsx | 2 +- .../hooks/useImpactMetricsState.ts | 29 ++++++++------- .../useImpactMetricsApi.ts | 0 .../useImpactMetricsSettingsApi.ts | 35 ------------------- .../useImpactMetricsSettings.ts | 21 ----------- 5 files changed, 18 insertions(+), 69 deletions(-) rename frontend/src/hooks/api/actions/{useImpactMetricsSettingsApi => useImpactMetricsApi}/useImpactMetricsApi.ts (100%) delete mode 100644 frontend/src/hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsSettingsApi.ts delete mode 100644 frontend/src/hooks/api/getters/useImpactMetricsSettings/useImpactMetricsSettings.ts diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx index 07b70ff89f..54798557a7 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx +++ b/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'; diff --git a/frontend/src/component/impact-metrics/hooks/useImpactMetricsState.ts b/frontend/src/component/impact-metrics/hooks/useImpactMetricsState.ts index a2ddabc3ac..b3452acdb5 100644 --- a/frontend/src/component/impact-metrics/hooks/useImpactMetricsState.ts +++ b/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], diff --git a/frontend/src/hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsApi.ts b/frontend/src/hooks/api/actions/useImpactMetricsApi/useImpactMetricsApi.ts similarity index 100% rename from frontend/src/hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsApi.ts rename to frontend/src/hooks/api/actions/useImpactMetricsApi/useImpactMetricsApi.ts diff --git a/frontend/src/hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsSettingsApi.ts b/frontend/src/hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsSettingsApi.ts deleted file mode 100644 index fc5a42578d..0000000000 --- a/frontend/src/hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsSettingsApi.ts +++ /dev/null @@ -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, - }; -}; diff --git a/frontend/src/hooks/api/getters/useImpactMetricsSettings/useImpactMetricsSettings.ts b/frontend/src/hooks/api/getters/useImpactMetricsSettings/useImpactMetricsSettings.ts deleted file mode 100644 index dcae6e1b03..0000000000 --- a/frontend/src/hooks/api/getters/useImpactMetricsSettings/useImpactMetricsSettings.ts +++ /dev/null @@ -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(formatApiPath(PATH), () => - fetcher(formatApiPath(PATH), 'Impact metrics settings'), - ); - - return { - settings: data || { charts: [], layout: [] }, - refetch, - loading, - error, - }; -};