百灵报表SDk

百灵报表SDK是百灵报表的前端SDK，用于在前端项目中调用百灵报表服务。 使用该SDK时请确保已经安装mid-platform-smartreport服务(版本需大于等于2.13.1)，并且项目网关中有指向该服务的代理，不支持脱离该服务使用。以nginx为例：

        location /mid-platform-smartreport/  {
            alias /path/to/mid-platform-smartreport/;
        }

本SDK不提供登录与权限验证功能，仅用于渲染配置好的报表，登录与权限验证功能由mid-platform-smartreport服务提供。

1.依赖

百灵报表SDK需添加的外部依赖：

• react 16.8.6及以上
• react-dom 16.8.6及以上
• antd 4.x

百灵报表SDK内部打包的依赖：

• axios 0.19.0及以上
• mobx 6.x,如果项目中也使用了，mobx，需配置共享state:

configure({
    isolateGlobalState: true
})

• mobx-react-lite 2.x

2. 引入项目

// antd样式
import 'antd/dist/antd.min.css'
// sdk主体文件
import SmartReportSdk from 'yl-smart-report-sdk'
// sdk样式
import 'yl-smart-report-sdk/sdk/style.css'

SmartReportSdk包含下面方法,他们参数是通用的：

• SmartReport，react组件，使用方法与普通react组件一样：

    <SmartReportSdk.SmartReport {...reportProps} />

• render，渲染方法，，需提外部供容器:

SmartReportSdk.render(reportProps)

SmartReportSdk参数

|名称|类型|默认值|说明| |-|-|-|------------| |container|string或者HTMLElement|无|报表渲染容器,render方法中必填，react组件不需要| |reportId|string|无|报表id,必填| |reportType|number|无|报表类型，非必填，若不传，会根据reportId获取报表类型,如果报表类型为仪表盘时会多请求一次报表配置| |noCustomFilter|boolean|false|是否禁用自定义面板,仅明细表、分组表和交叉表有效| |theme|light,dark或者object|light|报表主题，默认为浅色主题('light'),字符串仅支持light和dark| |theme.label|string|无|可以为空| |theme.theme|string|无|可以为空| |theme.variable|object|light主题配置|全部变量配置见CSSVAR.md|

主题样式变量

{
    // 主题背景色
    '--base-bg': '#f0f2f5',

    // 主题颜色
    '--primary-color': 'rgb(76, 132, 255)',

    // 主题字体颜色
    '--primary-font-color': 'rgb(76, 132, 255)',
    '--primary-btn-bg': 'rgb(255, 255, 255)',
    '--default-color': 'rgb(255, 255, 255)',
    '--link-color': 'rgb(76, 132, 255)',
    '--widget-bg': 'rgb(255, 255, 255)',
    '--widget-bg-2': 'rgb(255, 255, 255)',
    '--widget-bg-3': 'rgb(255, 255, 255)',
    '--table-row-even': 'rgb(255, 255, 255)',
    '--table-row-odd': 'rgb(255, 255, 255)',
    '--table-row-hover': 'rgb(240, 248, 255)',
    '--base-font-color': 'rgba(0, 0, 0, 0.85)',
    '--base-font-color-2': 'rgba(0, 0, 0, 0.45)',
    '--primary-color-hover': 'rgb(125, 177, 255)',
    '--drawer-bg-color': 'rgb(255, 255, 255)',
    '--border-color': 'rgb(217, 217, 217)',
    '--border-color2': '#f0f0f0',
    '--border-color3': '#f0f0f0',
    '--selected-bg-color': 'rgb(240, 247, 255)',
    '--disabled-color': '#d9d9d9',
    
    '--antd-upload-picture-card-bg': 'rgb(250, 250, 250)', // antd 上传图片组件背景颜色
    '--antd-upload-picture-card-border': 'rgb(217, 217, 217)', // antd 上传图片组件背景颜色
    '--ant-table-row-selected': 'rgb(240, 248, 255)', // TODO
    '--success-font-color': 'green',
    '--error-font-color': 'red',
    '--table-thead-bg': 'rgb(250, 250, 250)',
    '--table-thead-font-color': 'rgba(0, 0, 0, 0.85)',
    '--action-btn-font-color': 'rgb(83, 146, 255)',
    '--action-btn-border-color': 'transparent',
    '--action-btn-padding': '0 12px',
    '--scroll-bg': '#cccccc',
    '--container-padding': '16px 12px 0 12px',
    '--checkbox-bg': 'rgb(255, 255, 255)',
    '--checkbox-border': 'rgb(217, 217, 217)',
    '--multiple-select-item-bg': '#f5f5f5',
    '--multiple-select-item-border': '#E6EAEF',
    '--table-border-color': '#E6EAEF',
    '--disabled-font-color': 'rgba(0, 0, 0, 0.25)',
    '--disabled-link-color': 'rgba(0, 0, 0, 0.25)',
    '--ant-modal-border-color': 'rgb(230, 234, 239)',
    '--ant-drawer-border-color': 'rgb(230, 234, 239)',
    '--menu-padding': '20px 20px 0 20px',
    '--top-two-menu-border':
        'linear-gradient(90deg, #f0f8ff 0%, #f0f8ff 100%) 1',
    '--top-two-menu-bg': '#f0f8ff',
    '--top-two-menu-padding': '0 16px',
    '--top-two-menu-selected-border-width': '2px',
    
    // 百灵报表配置界面标签背景色
    '--ds-col-bg': 'rgb(244, 247, 253)',
    '--ds-param-bg': 'rgb(217, 241, 232)',
    '--panel-param-bg': 'rgb(216, 235, 255)',
    '--panel-col-bg': 'rgb(217, 227, 255)',
    '--panel-over-bg': 'rgb(162 164 174)',
    '--panel-drop-bg': '#eee',
}