使用map 解决cube.js 默认title 显示的问题

默认cube client sdk 提供了比较完整的处理展示,但是因为titile 比较长,或者就不是我们应该显示的,造成一些问题

参考解决方法

使用map 进行以下数据转换就可以了

  const columns = resultSet.tableColumns().map((item)=>{
    return {
      ...item,
      title:item.shortTitle,
      shortTitle:item.title
    }
  })

参考antd table 数据绑定

import React from ‘react‘;
import { Table } from ‘antd‘;
import { useCubeQuery } from ‘@cubejs-client/react‘;
import cubejs from ‘@cubejs-client/core‘;
import ‘antd/dist/antd.css‘;
const cubejsApi = cubejs(‘<token>‘, {
  apiUrl: ‘<addd>‘,
});
 
 
function Demo() {
  const { resultSet, isLoading, error, progress } = useCubeQuery(
    {"measures": ["HrSeaApproveStatistics.count"],
     "timeDimensions": [],
      "order": { "HrSeaApproveStatistics.count": "desc" },
       "dimensions": ["HrSeaApproveStatistics.avg_order_id"]
    },{
      cubejsApi
    });
 
  if (isLoading) {
    return <div>{progress && progress.stage && progress.stage.stage || ‘Loading...‘}</div>;
  }
 
  if (error) {
    return <div>{error.toString()}</div>;
  }
 
  if (!resultSet) {
    return null;
  }
 
  function demoapp(item){
    return item["shortTitle"]
  }
 
  const dataSource = resultSet.tablePivot();
   // 通过map进行简单转换
  const columns = resultSet.tableColumns().map((item)=>{
    return {
      ...item,
      title:item.shortTitle,
      shortTitle:item.title
    }
  })
  console.log(columns)
return <div >
    <Table columns={columns} dataSource={dataSource} />;
    </div>
}
 
// Create Document Component
export default Demo;
 
 

使用map 解决cube.js 默认title 显示的问题

上一篇:webpack4.x系列--资源和样式解析


下一篇:Web 概述