首页 > 其他分享 >记Perfeye自定义项实现对比需求

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

时间:2023-05-22 17:47:43浏览次数:36  
标签:Perfeye const 自定义 Max 图表 key Avg 对比

记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
}

页面渲染

接下来来到页面渲染的部分了,无非就是通过遍历方式把数据渲染出来

这里代码进行了判断,如果是 字段数大于1,那么加上单选逻辑

getTableColumns ,getChartOptions这两个方法都是根据 field字段信息拿到相关的配置项,这里就不多解释了

checkIsEmpty这个方法,因为字段太多了,空字段就不需要展示数据,这里进行判断报告是否含有相关字段

其他一点坑踩在如何绑定图表事件上面,之前代码是通过ref来实现的,但是我尝试了绑定不上,后来发现可以放在onChartReady中注册,真方便

实现效果

最终实现代码,不到300行

总结

一个需求下来,还是先拆分需求,从逻辑让能跑通,之后想用什么办法实现最好,最后根据相关Bug进行修复就可以了

标签:Perfeye,const,自定义,Max,图表,key,Avg,对比
From: https://www.cnblogs.com/qisexin/p/17421260.html

相关文章

  • 在Windows Server 2022中使用Microsoft Deployment Toolkit(MDT)时,可使用Rules(规则)文件
    在WindowsServer2022中使用MicrosoftDeploymentToolkit(MDT)时,可使用Rules(规则)文件来配置和自定义部署过程。以下是常见的Rules参数及其描述:UserDomain:指定要加入的域的名称。UserID和UserPassword:指定加入域所需的管理员帐户凭据。TimeZoneName:指定安装期间使用的时区。Jo......
  • 【Git学习】git log自定义格式
    定制自己常用格式:1、二进制作者时间提交备注gitlog–pretty=format:”%h-%an,%ar:%s”2、以图表形式查看远程提交记录gitlog–decorate–oneline–graph3、说明:常用的格式占位符写法及其代表的意义。选项说明%H提交对象(commit)的完整哈希字串%h提交对象的简短......
  • 基于 Socket 接口实现自定义协议通信
    访问【WRITE-BUG数字空间】_[内附完整源码和文档]根据自定义的协议规范,使用Socket编程接口编写基本的网络应用软件。掌握C语言形式的Socket编程接口用法,能够正确发送和接收网络数据包开发一个客户端,实现人机交互界面和与服务器的通信开发一个服务端,实现并发处理多个客户端......
  • flutter dio自定义http client
    finaldio=Dio();DiogetMyDio(){initAdapter();dio.options.headers={'apiKey':'xxxxx'};dio.options.connectTimeout=constDuration(seconds:15);dio.options.receiveTimeout=constDuration(seconds:15);di......
  • springboot自定义拦截器
    之前使用过滤器实现了拦截没有登录的请求,现在使用springboot的拦截器实现1.LoginCheckInterceptor.javapackagecom.minqiliang.interceptor;importcom.alibaba.fastjson.JSONObject;importcom.minqiliang.pojo.Result;importcom.minqiliang.utils.JwtUtils;importlomb......
  • Oracle与DB2、MySQL取前10条记录的对比
    Oralce的示例:1.最佳选择:利用分析函数row_number()over(partitionbycol1orderbycol2)比如想取出100-150条记录,按照tname排序selecttname,tabtypefrom(selecttname,tabtype,row_number()over(orderbytname)rnfromtab)whe......
  • SpringBoot利用自定义注解实现多数据源
    自定义多数据源SpringBoot利用自定义注解实现多数据源,前置知识:注解、Aop、SpringBoot整合Mybaits1、搭建工程创建一个SpringBoot工程,并引入依赖<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring......
  • 【计算机视觉1】----- 图像增强算法(对比度增强、直方图均衡化)
    直方图均衡化直方图修正(HistogramEqualization)是一种常见的图像增强技术,它通过重新分布图像像素的灰度值来增强图像的对比度和亮度。直方图修正的基本思想是将图像的灰度值范围映射到一个更广泛的范围,从而使图像的灰度级分布更加均匀。注意,在运行代码之前,请确保已安装并配置了Ope......
  • Wordpress自定义小工具(Widget)简单案例
    在主题对应目录创建文件如widgets.php<?php//继承了WP_Widget这个类来创建新的小工具(Widget):可在后台外观-小工具中添加此自定义小工具到页面具体位置classmy_widgetextendsWP_Widget{publicfunction__construct() { //$widget_ops可以给小工具进......
  • ExtJS 4中自定义Grid列标题的对齐方式
           从ExtJS2.0到目前的4.0,Grid的列标题对齐方式都是和数据的对齐方式一致的,这不太符合中国人的习惯。解决办法是,自己重写一下Ext.grid.column.Column对象中渲染列标题的对齐方式的代码。代码只有一句,在afterRender方法中,因而重写afterRender方法就行了,具体做法如下。......