记Perfeye自定义项实现对比需求

背景

Perfyeye平台很早就支持对比功能了，但是支持的模块不全，需求方现在想要支持自定义列的需求对比功能，用来显示多份报告之间的差异以及性能趋势。

刚接到这个需求的时候，我想，这不就是简简单单CV复制一下老代码的逻辑，改改相应字段就可以了，30分钟也就差不多能搞定了。

后来一看代码，之前对比的模块字段图表都是固定的，但是自定义列经过多次迭代，数据结构大概有3种。再一想想，如果手动粘贴二三十个字段，粘贴完的代码至少2000行以上，非常不方便维护，也不利于以后修改，那么肯定要封装了。

1.	旧数据格式，1对1字段，label 只展示 Avg，Min，Max
2.	新数据格式，1对多字段，label展示 Avg，Tp90
3.	新数据格式，1对1字段，label展示 Avg，Min，Max，Tp90

数据结构

原型图

需求实现

规范数据

根据上面的三个数据结构，我的想法是要导出一个统计的数据结构，那么该有哪些内容呢

[{
    name: 'card标题',
    chartField: '图表所用字段',
    tableKeys: '图表label展示字段',// [`Avg(${i.key})`, `Max(${i.key})`, `Min(${i.key})`]
    multiTrendChart: '是否是新格式图表', // 旧格式 false
    unit: '图表单位',
}, {
    name: 'card标题',
    multiTrendChart: true, // 新格式 true
    chartConfig: {
        SetPass: [图表label展示字段],// ['Avg(SetPass)', 'Max(SetPass)', ...]
				...
    },
    unit: '图表单位',
}]

基本上这样的格式就够用了，然后根据旧数据格式，编写了转换的方法

import { customization } from "@/pages/CaseReport/modules/Custom/useChartList";
import { customizationmuti } from "@/pages/CaseReport/modules/Custom/const";

export const getCustomCompareFieldsConfig = () => {
  const customizationConfig = customization.map(i => {
    const tableKeys = [`Avg(${i.key})`, `Max(${i.key})`, `Min(${i.key})`]
    return {
      name: i.name,
      chartField: i.key,
      tableKeys: tableKeys,
      multiTrendChart: false,
      unit: i.unit,
    }
  })

  const getFieldNum = (key: string) => {
    // 如果是以下字段，显示 Avg、Max、Min、Tp90，不然显示Avg、Tp90
    const fields4 = ['SetPass', 'TextureCount', 'MeshCount', 'VulkanMemory']
    return fields4.includes(key) ? ['Avg', 'Max', 'Min', 'Tp90'] : ['Avg', 'Tp90']
  }

  const customizationmutiConfig = customizationmuti.map(i => {

    const chartConfig = i.childrenKeys.reduce((acc, cur) => {
      cur.optionKeys.forEach(j => {
        acc[j] = getFieldNum(j).map(k => `${k}(${j})`)
      })
      return acc
    }, {})
    return {
      name: i.name,
      multiTrendChart: true,
      chartConfig: chartConfig,
      unit: i.childrenKeys?.[0].unit || '',
    }
  })
  return [...customizationConfig, ...customizationmutiConfig]
}
// 获取自定义列所有字段
export const getAllCustomCompareFields = () => {
  const customCompareFieldsConfig = getCustomCompareFieldsConfig()
  const fieldsArr: string[] = []
  customCompareFieldsConfig.forEach(i => {
    // 多字段
    if (i.multiTrendChart) {
      Object.keys(i?.chartConfig || []).forEach(j => {
        fieldsArr.push(j)
      })
    } else {
      fieldsArr.push(i.chartField)
    }
  })
  return fieldsArr
}