vue-analysis-table v2.3.0

表格组件

默认已表格形式展示数据，支持切换到图分析模式。

部署

使用内网源：npm set registry http://npm.vivo.com.cn/

1. 修改版本 (TODO 自动化)
2. yarn build
3. npm publish

参数说明

除了 data columns，其它参数都可缺省

分为以下三部分:

1. 组件参数

enum DISPLAY_TYPE {
  '表' = 'table',
  '图' = 'chart',
}

export interface TableColumn {
  key: string;
  name?: string;
  isNumber?: boolean; // 数字类型会靠右
  _show?: boolean;
  width?: string;
  overflowTooltip?: boolean;
  fixed?: 'right' | 'left' | true; // 出现横向滚动条的时候是否固定
}

2. 表相关参数

常用的参数: defaultSortKey defaultSortDirection expandKeys filterFields showOverflowTooltip

export interface FilterConfig {
  key: string;
  label?: string;
  multiple?: boolean;
  defaultValue?: any;
  preKeys?: string[];
}

interface ExpandColumnSettings {
  [key: string]: number; // 超过多少行才显示展开按钮
}

3. 图相关参数

常用的参数: timeField timeProps defaultValues options

比较难理解的是 defaultValues options。

• series: 分析维度字段
• dimension: 时间字段
• measure: 指标字段，有的数据可能缺少指标字段，默认使用次数

defaultValues

定义三个维度的默认值： 示例:

{ series: 'sysver', dimension: '_day' }

分析维度选择框默认选中 sysver 时间字段默认选择_day

options

定义三个维度的可选值： 示例:

options: {
    series: {
      sysver: '版本',
      split_module: '模块',
      android_version: '安卓版本',
      sysversion: '软件版本号',
      data_source: '数据源',
      externalModelName: '机型',
    },
    dimensions: { _day: '反馈日期' },
  },

指定分析维度的可选项只有这 6 个字段，时间字段只能选择_day

export interface CubeSettings<T> {
  dimension?: keyof T | UnwrapRef<keyof T>;
  series?: keyof T | UnwrapRef<keyof T>;
  measure?: keyof T | UnwrapRef<keyof T> | CountField;
}

export interface PassedInCubeOptions {
  dimensions?: Record<string, string>;
  series?: Record<string, string>;
  measures?: Record<string, string>;
}

export interface TimeProps {
  year?: string;
  month?: string;
  week?: string;
  day?: string;
  hour?: string;
}
// 例如:
const timeProps = { day: '反馈日期', week: '反馈周', month: '反馈月' };

示例参数

// 表格数据源
const data = [{
    {
    externalModelName: 'X9s',
    product: 'PD1616BA',
    feedback_time: '2021-04-16T00:08:46',
    split_module: '其他',
    sysver: '',
    description: '打不开',
    android_version: '',
    sysversion: '',
    imei: '867821032381965',
    telephone: '',
    data_source: 'faq',
    log_path: '',
  },
}]

const props = {
  showSwitch: 'true',
  defaultType: 'table',
  filterFields: [
    { key: 'externalModelName', multiple: true, defaultValue: [] },
    { key: 'sysver', multiple: true },
    { key: 'data_source', multiple: true },
  ],
  defaultSortKey: 'feedback_time',
  defaultSortDirection: 'descend',
  // description字段超过两行显示展开按钮
  expandKeys: { description: 2 },

  // 下面是图的设置
  // 没有指标字段会默认用次数
  showMeasureSelection: 'false',
  showSeriesSelection: 'true',
  showDimensionSelection: 'true',
  // 分析维度选择框默认选中 sysver  时间字段默认选择_day
  defaultValues: { series: 'sysver', dimension: '_day' },
  // 表格数据时间字段是feedback_time
  timeField: 'feedback_time',
  // 根据feedback_time字段补充天周月时间维度
  timeProps: { day: '反馈日期', week: '反馈周', month: '反馈月' },
  options: {
    series: {
      sysver: '版本',
      split_module: '模块',
      android_version: '安卓版本',
      sysversion: '软件版本号',
      data_source: '数据源',
      externalModelName: '机型',
    },
    dimensions: { _day: '反馈日期' },
  },
};