Quick BI:examples of Quick BI features

Quick BI provides the drill-down, linkage, and jump features for custom widgets. Call the dispatch method.

const dispatch = props.customProps.dispatch;
const dataIndex = 1; // The array subscript of the dimension to be drilled down in the props.customProps.data

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

Shadow DOM can hide tags, styles, and behaviors from the rest of the code on the page, ensuring that different parts don't get mixed up. In Quick BI, custom components are rendered within the shadow DOM node by default. If you do not need to enable shadow DOM, you can manually disable it in the custom component management platform.

If your custom components need to support lower-version browsers, it is recommended to use CSS Modules isolation styles. CSS Modules are already built in the seed project. As long as files ending in .module.css or .module.css can be directly imported,

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

// Compiled index.module.css
._2GdXV4wBykbQ3MN-f1VJv7 {
  color: #ddd;
}

import styles from './index.css';

// Use the class
document.getElementById('foo').classList.add(styles['test-class'])

CSS doesn't really have a namespace. . To simulate a namespace, we recommend that you use the CSS BEM specification.

// good. All styles are written in the. my-component parent class.
.my-component {
  color: #ddd;

    ul {
      color: #aaa
  }

    &__header {}

  &__header--title {}
}

// bad, try not to define the style outside the parent class
ul {
  background: #aaa
}

Internationalization can be initialized through I18n.init. First, the translated language is assembled into resources in the form of keys and values, and then t translation functions and i18n instances are exported. Example:

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

const { t, i18n } = I18n.init({
  resources: {
    // English key
    'en-US': {
      Start angle: 'start angle',
    },
    // The Japanese key.
    'ja-JP': {
      Start Angle: 'Start Angle',
    }
  },
});

In this example, two languages are set: en-US and ja-JP. The following table lists the supported languages.

You can call the t function to translate languages, t the return value of the function depends on the language package configured resources. If the corresponding slave translation is not configured in the resources, the t function will return the first parameter value.

console.log(t ('Start angle')) // Start angle

console.log(t ('End angle')) // The end angle is not translated in resources. The end angle is returned. 

You can switch languages through the i18n.changeLanguage. Generally speaking, the Quick BI has built-in logic for language switching without manually calling the i18n.changeLanguage.

// The default language is zh-CN.
console.log(t ('Start angle')) // Start angle

i18n.changeLanguage('en-US') // You do not need to manually call the
console.log(t ('Start angle')) // start angle

i18n.changeLanguage (ja-JP) // You do not need to manually call the
console.log(t ('Start angle')) // Start angle 

If a splice entry is available, you can pass the second parameter of the t function.

const { t, i18n } = I18n.init({
  resources: {
    'en-US': {
      'My {{version}} {{item}}': 'My my {{version}} {{item}}',
      'New': 'new',
      'Mobile phone': 'cellphone'
    },
  },
});

// Splice the two entries "new" and "mobile phone".
console.log(t ('My {{version}}{{item}}', { item: t ('Phone'), version: t ('New') })) // my new cellphone 

Some languages have singular and plural numbers. In order to deal with this situation, _plural suffix can be added to the end of the key of the term that needs to deal with plural numbers in the resources to represent the translation of plural forms.

const { t, i18n } = I18n.init({
  resources: {
    'en-US': {
      '{{count}} an apple': '{{count}} apple', // singular translation
      '{{count}} apples_plural': '{{count}} apples', // Plural translation
    },
  },
});

console.log(t ('Apple' {{count}}, { count: 3 })) // 3 apples
console.log(t ('Apples {{count}} ', { count: 1 })) // 1 apple 

Generally, you do not need to manually set the current language in the Quick BI. The SDK has built-in logic for recognizing the current language. If you must obtain the current language, you can use one of the following methods to obtain the current language:

const currentLang = window.globalConfig.currentLang

const currentLang = i18n.lng

Quick BI provides the following public libraries:

• react - 16.12.0

• react-dom - 16.12.0

• lodash - 4.17.20

• moment - 2.29.1

These libraries are injected into the global variables of the sandbox. To ensure the best performance of your components, we recommend that you use these public libraries.