File Introduction and Example

File Introduction

{widget}.editor.js is the widget attribute definition file, which is responsible for the GUI and logic to be rendered when the widget is in the editing state. {widget} indicates the name of the customized widget. In this example, the file name is EchartsWidgetTemplate.editor.js. The {widget}.editor.js file is loaded only when the widget is in the editing state. The file contains the propertiesConfig and create methods.

File Example

EchartsWidgetTemplate = EchartsWidgetTemplate.extend({
  // Widget event configuration item, which defines the widget event structure and description for global variable mapping.
  eventConfig: {
    clickSeries: {
      desc: { zh_CN: "Click Series", en_US: "Click Series" },
      fields: [
        {
          name: 'seriesIndex',
          desc: { zh_CN: 'Series Index', en_US: 'Series Index' },
        },
        {
          name: 'seriesName',
          desc: { zh_CN: 'Series Name', en_US: 'Series Name' },
        },
      ],
    },
  },
  // Classification of the configuration item
  classfication: [[{ name: 'configuration' }, { name: 'tooltip' }]],

  // Detailed configuration of the widget.
  propertiesConfig: [
    {
      config: [
        {
          type: 'dataSetting',
          mapping: {
            x: {
              keyName: 'dataX',
              keyTitle: { zh_CN: 'X-axis Data', en_US: 'X-axis Data' },
              limitNumber: '1',
              type: 'category',
              label: 'x',
              required: true,
            },
            y: {
              keyName: 'value',
              keyTitle: { zh_CN: 'Y-axis Data', en_US: 'Y axis Data' },
              limitNumber: '1',
              type: 'value',
              label: 'y',
              required: true,
            },
            s: {
              label: 's',
              limitNumber: '1',
              series: [
                {
                  type: '',
                  label: '',
                  required: false,
                },
              ],
            },
          },
          mock: {},
          name: 'EchartsWidgetTemplateConnector',
          model: 'CommonViewModel',
        },
      ],
    },
    {
      migrateFrom: 'advancedSettings',
      headerTitle: { zh_CN: 'Data Mapping', en_US: 'Data Mapping' },
      belong: 'configuration',
      config: [
        {
          type: 'select',
          name: 'commonProps.emphasisFocus',
          label: { zh_CN: ''Emphasis Focus', en_US: 'Emphasis Focus' },
          value: 'series',
          options: [
            {
              label: { zh_CN: 'None', en_US: 'None' },
              value: 'none',
            },
            {
              label: { zh_CN: 'Self', en_US: 'Self' },
              value: 'self',
            },
            {
              label: { zh_CN: 'Series', en_US: 'Series' },
              value: 'series',
            },
          ],
        },
        {
          type: 'tab',
          name: 'commonProps.showLabel',
          label: { zh_CN: 'Emphasis Focus', en_US: 'Emphasis Focus' },
          value: true,
          options: [
            {
              label: { zh_CN: 'Show', en_US: 'Show' },
              value: true,
            },
            {
              label: { zh_CN: 'Hide', en_US: 'Hide' },
              value: false,
            },
          ],
        },
      ],
    },
    {
      migrateFrom: 'advancedSettings',
      headerTitle: { zh_CN: 'Tooltip', en_US: 'Tooltip' },
      belong: 'tooltip',
      config: [
        {
          type: 'select',
          name: 'commonProps.axisPointerType',
          label: { zh_CN: 'Axis Pointer', en_US: 'Axis Pointer' },
          value: 'shadow',
          options: [
            {
              label: { zh_CN: 'Line', en_US: 'Line' },
              value: 'line',
            },
            {
              label: { zh_CN: 'Shadow', en_US: 'Shadow' },
              value: 'shadow',
            },
            {
              label: { zh_CN: 'None', en_US: 'None' },
              value: 'none',
            },
          ],
        },
      ],
    }
  ],

  //  Mandatory. This is called only once to create the widget.
  create: function (cbk) {
    if (cbk) {
      this._super();
      cbk();
    }
  },
});

// Mandatory. Register the widget.
window.Studio.registerWidget('EchartsWidgetTemplate', 'EchartsWidgetTemplate', {});