Index.js File

The Index.js file is a component's main entry file that provides an example component and describes the lifecycles and related functions of common components.

The example is a text component that displays the values of metric fields and allows for text styling.

• Description of the eventParam parameter.

  Table 3 eventParam parameter description

  Parameter	Mandatory	Type	Description
  key	Yes	select, drive, and link	select: Allows components to define interaction events through interactive editing in the interaction panel. This type cannot be configured simultaneously with drive or link. drive: Allows components to configure linkage in the interaction panel. This type cannot be configured simultaneously with select. link: Allows components to configure redirections in the interaction panel.
  params	Yes	Object	Event triggering field and its value. For details, see params description.

  Description of params in the eventParam parameter.

  Table 4 params description

  Parameter	Mandatory	Type	Description
  key	Yes	String	ID of the data field that initiates the interaction. If it is a select type, the value is value.
  value	Yes	String | Number	Value of the data field that initiates the interaction.
  isReset	No	Boolean	The default value is false, which indicates whether it is the first time to initiate an interaction or to cancel the previous interaction. For example, when a bar chart initiates an interaction, the bar is highlighted, and after canceling the interaction, the bar returns to its original state.

• eventEmit usage

  This method is an interactive event method that is called in the function that triggers the interaction, such as when clicking text.

  To trigger an interaction of the select type, set type to select in event of gui.json, and call the method as follows:

  // click is the method used to trigger the interaction and is a user-defined method. To ensure that the this context remains unchanged, use an arrow function.
  click = () => {
      // Trigger the interaction.
      this.eventEmit({
          key: 'select',
          params: [
              {
                  key: 'value', // The value is fixed at value.
                  value: xxx, // Value that triggers the interaction.
              },
          ],
      });
  };

  To trigger an interaction of the driver type, set type to drive in event of gui.json, and the parameters are as follows:

  click = () => {
      // Trigger the interaction.
      this.eventEmit({
          key: 'drive',
          params: [
              {
                  key: 'xxxxxxx', // ID of the field that initiates the linkage.
                  value: xxx, // Value that triggers the interaction.
              },
          ],
      });
  };

  To trigger an interaction of the link type, set type to link in event of gui.json, and the parameters are as follows:

  click = () => {
      // Trigger the interaction.
      this.eventEmit({
          key: 'link,
          params: [
              {
                  key: 'xxxxxxx', // ID of the field that initiates the linkage.
                  value: xxx, // Value that triggers the interaction.
              },
          ],
      });
  };

• Obtaining data related to custom components
  Users can obtain the latest style configuration values, data values, and bound dataset fields from the development package of custom components. The relevant data is stored in the config variable of the development package.

  Table 5 Data related to custom components

  Parameter	Type	Description
  styledata	Object	The style configuration corresponds to the configuration in gui.json. For example, to obtain the style value of name whose value is fontSize in gui.json, use this.config.styledata.fontSize.
  jsondata	Object	Value of the data field that initiates the interaction. For details, see jsondata description.

  Table 6 jsondata description

  Parameter	Type	Description
  dataBind.dataArea	Arrary	Field information bound to the data panel and is in an array structure. For details, see dataArea description.
  originData	Arrary	Data value obtained in real time. For details, see originData description.

  Table 7 dataArea description

  Parameter	Type	Description
  areaId	Object	Data slot type configured in gui.json. For the options, see AreaId description.
  columnList	Arrary	Fields dragged to the data panel slot when the component is used to create a large screen or dashboard. For details about the fields, see columnList description.

• columnList description
  The values are in an array, with each item corresponding to a field in the dataset.

  Table 8 Data slot fields

  Parameter	Type	Description
  id	String	Unique field ID, which needs to be passed in when the eventEmitter function is called for interaction.
  caption	String	Field name.
  type	'dimension' | 'measure'	Field type. dimension indicates a dimension, and measure indicates a metric.

• originData description

  It stores real-time data values obtained through this.config.jsondata.originData.

  originData is a two-dimensional array. The first row is the table header, which stores fields and does not have specific values. The second row and beyond store data.

  Each data item in a data row corresponds to a field in the slot of the data panel. For the data items, see Table 9.

  Table 9 originData data items

  Parameter	Type	Description
  id	String	Field ID.
  caption	String	Field name.
  cellRawValue	String | Number	Field value.
  cellValue	String | Number	Value of a field formatted based on dataset rules.

  Example Index.js:

  import gui from './gui.json';
  import './index.less';
  class App extends CustomBaseChart {
      constructor(props) {
          super(props);
          this.el.innerHTML = this.renderHtml();
      }
      refresh() {
          this.loadData();
      }
      loadData() {
          this.el.innerHTML = this.renderHtml();
          this.el.querySelector(".insight-text-inner").addEventListener('click', this.click, false);
      }
      renderHtml() {
          return `
          <div class="insight-text-inner" style="color: ${this.config.styledata.color
              };font-size: ${this.config.styledata.fontSize}px;font-weight: ${this.config.styledata.fontWeight}">
              <span class="insight-text-content">${this.data[1]?.[0]?.cellRawValue ?? "No Data"}</span>
          </div>
          `
      }
      resize(attr) {
          this.attr = { ...attr };
      }
  click = () => {
      // Trigger the interaction.
      this.eventEmit({
          key: 'drive',
          params: [
              {
                  key: this.data[1]?.[0]?.id,
                  value: this.data[1]?.[0]?.cellRawValue,
              },
          ],
      });
  };
  }
  App.gui = gui;
  export default App;