功能点示例

Quick BI为自定义组件提供了下钻、联动和跳转等功能。调用dispatch方法即可。

const dispatch = props.customProps.dispatch;
const dataIndex = 1; // 需要下钻的维度在 props.customProps.data 中的数组下标

if (typeof dispatch === 'function') {
  dispatch({
    type: 'select',
    payload: {
      dataIndex: dataIndex,
    },
  });
}

Shadow DOM 可以将标签，样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起。在 Quick BI 中，自定义组件默认都是渲染在 Shadow DOM 节点之内，如果不需要开启 Shadow DOM，可以在自定义组件管理平台中手动关闭。

如果你的自定义组件需要支持低版本浏览器, 推荐使用 CSS Modules 隔离样式. 在种子工程中已经内置支持了 CSS Modules, 只要是以 .module.css 或 .module.css 结尾的文件都可以直接 import使用，

// index.module.css
.test-class {
  color: #ddd;
}

// 编译后的 index.module.css
._2GdXV4wBykbQ3MN-f1VJv7 {
  color: #ddd;
}

import styles from './index.css';

// 使用类
document.getElementById('foo').classList.add(styles['test-class'])

CSS 实际上是没有真正意义上的命名空间的.。为了模拟命名空间， 推荐使用 CSS BEM 规范。

// good, 所有样式都写在 .my-component 父类内.
.my-component {
  color: #ddd;

    ul {
      color: #aaa
  }

    &__header {}

  &__header--title {}
}

// bad, 样式尽量不要定义在父类之外
ul {
  background: #aaa
}

通过I18n.init可以初始化国际化，首先将翻译好的语言，以key、value 的方式组装到resources中, 然后导出 t 翻译函数和 i18n实例。示例如下：

import { I18n } from 'bi-open-sdk';

const { t, i18n } = I18n.init({
  resources: {
    // 英文 key
    'en-US': {
      起始角度: 'start angle',
    },
    // 日文 key
    'ja-JP': {
      起始角度: '開始角度',
    }
  },
});

在本示例中，我们设置了两种语言：en-US和ja-JP，目前所支持的语种如下表。

区域字符串	语言
zh-CN	简体中文（默认）
en-US	英语
ja-JP	日语

调用 t 函数可以翻译语言， t 函数的返回值依赖resources配置的语言包，如果 resources中没有配置对应的从条翻译， t 函数将返回第一个参数值。

console.log(t('起始角度')) // start angle

console.log(t('结束角度')) // 在 resources 未配置 "结束角度" 的翻译, 返回 "结束角度"

通过i18n.changeLanguage可以切换语言，一般来说Quick BI内置了语言切换的逻辑，无需手动调用i18n.changeLanguage。

// 默认语言为 zh-CN
console.log(t('起始角度')) // 起始角度

i18n.changeLanguage('en-US') // 无需手动调用
console.log(t('起始角度')) // start angle

i18n.changeLanguage('ja-JP') // 无需手动调用
console.log(t('起始角度')) // 開始角度

当有拼接词条时, 可以通过 t 函数第二个参数传入。

const { t, i18n } = I18n.init({
  resources: {
    'en-US': {
      '我的{{version}}{{item}}': 'my {{version}} {{item}}',
      '新': 'new',
      '手机': 'cellphone'
    },
  },
});

// 拼接 "新" "手机" 两个词条
console.log(t('我的{{version}}{{item}}', { item: t('手机'), version: t('新') })) // my new cellphone

一些语言在数量上会有单复数之分，为了处理这种情况，可以在resources中，为需要处理复数的词条的 key 的末尾增加 _plural 后缀，代表复数形式的翻译。

const { t, i18n } = I18n.init({
  resources: {
    'en-US': {
      '{{count}}个苹果': '{{count}} apple', // 单数翻译
      '{{count}}个苹果_plural': '{{count}} apples', // 复数翻译
    },
  },
});

console.log(t('{{count}}个苹果', { count: 3 })) // 3 apples
console.log(t('{{count}}个苹果', { count: 1 })) // 1 apple

在 Quick BI 中通常不需要手动设置当前语言，SDK已经内置识别当前语言的逻辑。如果一定要获取当前语言，可以通过以下方式获取。

const currentLang = window.globalConfig.currentLang

const currentLang = i18n.lng

Quick BI 提供了以下公共库：

• react - 16.12.0
• react-dom - 16.12.0
• lodash - 4.17.20
• moment - 2.29.1

这些库均已注入沙箱的全局变量之中，为了保证您的组件性能最佳，请优先使用这些版本的公共库。