put into util

src/components/Panel/PanelGraphicWrapper.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 import React, { useState, useEffect } from 'react';
 import PanelGraphic from './PanelGraphic';
-import { getLabelFromFactor, panelSrcGetter, snakeCase } from '../../utils';
+import { panelSrcGetter, replaceDatumFactorsWithLabels, snakeCase } from '../../utils';
 import { useDisplayInfo } from '../../slices/displayInfoAPI';
 
 interface PanelGraphicProps {
@@ -28,15 +28,7 @@ const PanelGraphicWrapper: React.FC<PanelGraphicProps> = ({
   const { data: displayInfo } = useDisplayInfo();
   const [panelSrc, setPanelSrc] = useState('');
   const sourceFunc = async (func: PanelFunction) => {
-    const dataWithFactorLabels = Object.keys(data).reduce((acc, key) => {
-      const foundFactor = displayInfo?.metas?.find((curMeta) => curMeta.varname === key && curMeta.type === 'factor');
-      if (foundFactor) {
-        const factorLabel = getLabelFromFactor(data[key] as number, foundFactor.levels as string[]);
-        return { ...acc, [key]: factorLabel };
-      }
-      return { ...acc, [key]: data[key] };
-    }, {});
-
+    const dataWithFactorLabels = replaceDatumFactorsWithLabels(data, displayInfo?.metas as IMeta[]);
     const res = await func(dataWithFactorLabels);
     setPanelSrc(res);
     return res;

src/utils.ts

@@ -41,3 +41,13 @@ export const getFactorFromLabel = (values: string[], levels: string[]) =>
 
 export const panelSrcGetter = (basePath: string, fileName: string, displayName: string) =>
   `${basePath}/displays/${displayName}/${fileName}`;
+
+export const replaceDatumFactorsWithLabels = (data: Datum, displayMetas: IMeta[]) =>
+  Object.keys(data).reduce((acc, key) => {
+    const foundFactor = displayMetas?.find((curMeta) => curMeta.varname === key && curMeta.type === 'factor');
+    if (foundFactor) {
+      const factorLabel = getLabelFromFactor(data[key] as number, foundFactor.levels as string[]);
+      return { ...acc, [key]: factorLabel };
+    }
+    return { ...acc, [key]: data[key] };
+  }, {});