表格组件

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

部署

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

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

参数说明

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

分为以下三部分:

1. 组件参数

| Property | Description | Type | Default | | ----------- | --------------------- | -------------------- | --------------- | | data | 表格数据 | - | - | | columns | 表头设置 | Array<TableColumn> | - | | defaultType | 默认展示模式 | DISPLAY_TYPE | DISPLAY_TYPE.表 | | showSwitch | 是否显示切换图/表按钮 | boolean | true | | title | 表格 title | string | '详情列表' |

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

| Property | Description | Type | Default | | -------------------- | -------------------------------------------- | ------------------------------- | ----------------- | | defaultSortKey | 排序字段 | string | '' | | defaultSortDirection | 排序方向 | 'ascend' or 'descend' | 'descend' | | expandKeys | 需要支持展开的字段 | ExpandColumnSettings | {} | | filterFields | 筛选框的字段 | Array<string \| FilterConfig> | [] | | showOverflowTooltip | 超过一行不换行，而是用省略号显示 | boolean | false | | showSeniorFilter | 是否显示高级筛选 | boolean | true | | showSearch | 是否显示搜索框 | boolean | true | | showIndex | 是否显示 index | boolean | true | | indexWidth | 第一列 index 宽度 | number | 50 | | detectNumber | 是否自动检测 number 字段,number 字段靠右显示 | boolean | true | | defaultPageIndex | 分页默认值 | number | 1 | | defaultPageSize | 页码默认值 | number | 10 | | defaultPageIndex | 页码选项可选值 | number | PAGE_SIZE_OPTIONS | | showColumnsSetting | 是否显示表头设置(控制显示哪些表头) | boolean | true | | defaultHiddenColumns | 默认隐藏的字段 | Array<string> | [] | | showExport | 是否显示导出按钮 | boolean | true | | exportTitle | 导出表格名称 | string | '导出数据' | | tableClickCopy | 是否支持点击单元格复制 | boolean | true |

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

| Property | Description | Type | Default | | ---------------------- | ---------------------------------------- | --------------------- | ------- | | timeField | 指定时间字段 | string | true | | timeProps | 补充的时间字段,配合 timeField 字段 | TimeProps | true | | defaultValues | 维度设置默认值 | CubeSettings | {} | | options | 维度可选值，不传的话用字段聚合结果 | PassedInCubeOptions | true | | showSeriesSelection | 是否显示分析维度选择框 | boolean | true | | showDimensionSelection | 是否显示时间字段选择框 | boolean | true | | showMeasureSelection | 是否显示指标选择框 | boolean | true | | chartHeight | 图高度 | string | 350 | | chart1Width | 左图宽度 | string | 500 | | chart1Limit | 左图高度 Top 数量 | number | 10 | | defaultChart1Type | 左图显示模式 | 'pie' | 'bar' | 'bar' | | showSwitchChart1 | 是否显示作图模式切换按钮 | boolean | true | | showSkipWeek | 是否显示跳过周末选项(必须有 timeField) | boolean | true | | showSkipHoliday | 是否显示显示跳过节假日(必须有 timeField) | boolean | true |

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: '反馈日期' },
  },
};