Quick BI:カスタムウィジェットの API

カスタムコンポーネントは本質的に、インターフェイスが次のとおりであるオブジェクトです。

interface Lifecycle {
  bootstrap?: LifecycleBootstrap;
  mount?: LifecycleMount;
  unmount?: LifecycleUnmount;
  update?: LifecycleUpdate;
}

• bootstrap

  起動ライフサイクル中に、Quick BI ダッシュボードに入ると、まずユーザー定義コンポーネントメタデータが登録されます。この場合、bootstrap 関数が呼び出されます。インターフェイスは次のとおりです。

  type LifecycleBootstrap<T = LifecycleProps, P = any> = (props?: LifecycleProps<T>) => void | Promise<P>;

  説明

  ダッシュボード上にいくつのチャートが作成されても、同じカスタムウィジェットは boostrap ごとに 1 回だけトリガーされます。

• mount

  レンダリングライフサイクル。カスタムコンポーネントをレンダリングする必要がある場合、システムは DOM ノードを作成し、カスタムコンポーネントをそれにレンダリングします。mount 関数は、次のインターフェイスで呼び出されます。

  type LifecycleMount<T = LifecycleProps, P = any> = (props?: LifecycleProps<T>) => void | Promise<P>;

• unmount

  アンインストールライフサイクル。カスタムコンポーネントがダッシュボードから削除されると、unmount 関数が呼び出されます。インターフェイスは次のとおりです。

  type LifecycleUnmount<T = LifecycleProps, P = any> = (props?: LifecycleProps<T>) => void | Promise<P>;

• update

  カスタムコンポーネントのデータまたはその他のプロパティが更新されると、update 関数が呼び出されます。

  type LifecycleUpdate<T = LifecycleProps, P = any> = (props?: LifecycleProps<T>) => void | Promise<P>;

  例:

  // これはカスタムコンポーネントです
  const CustomComponent = {
      bootstrap: (props) => {},
    mount: (props) => {},
    unmount: (props) => {},
    update: (props) => {},
  }

LifecycleProps は、渡されたカスタムコンポーネントの各ライフサイクルの props パラメーターの型を記述します。container プロパティと customProps プロパティが含まれており、そのインターフェイスは次のとおりです。

interface LifecycleProps {
  container?: HTMLElement;
  customProps?: ComponentProps;
}

例:

class MyComponent {
    mount(props: LifecycleProps) {...}// Props は LifecycleProps 型です。
  update(props: LifecycleProps) {...}
  unmount(props: LifecycleProps) {...}
}

const MyReactComponent: React.FC<LifecycleProps> = (props) => <div>...<div/> // props は LifecycleProps 型です

カスタムコンポーネントのメタデータは、コンポーネントのスタイルパネル、データパネル、および高度なパネルの構成を記述するオブジェクトです。そのインターフェイスは次のとおりです。

interface ComponentMeta {
  propsSchema: {
    dataSchema?: DataSchema;
    styleSchema?: StyleSchema;
    advancedSchema?: StyleSchema;
  };
}

• propsSchema.syleSchema

  カスタムコンポーネントスタイルパネルフォームを記述する JSON 仕様。そのインターフェイスは次のとおりです。

  interface StyleSchema {
    schema: StyleSchemaBase;
    localEditors?: {
      [key: string]: React.ComponentType<any>;
    };
    validation?: StyleSchemaValidation;
  }

  例:

  // meta.js では、
  "myData": {
    "title": "someTitle",
    "type": "number",
  }

  [スタイル] パネルで、数値入力ボックスが表示されます。入力ボックスに 123 と入力すると、次の結果が生成されます。

  {
    "myData": 123
  }

  • schema: エディターとフォームの構成。そのインターフェイスは次のとおりです。

    interface StyleSchemaBase<P = any, T = string> {
      type: T;
      title?: string;
      titleAlign?: 'left' | 'center' | 'right';
      properties?: StyleSchemaProperties;
      className?: string;
      description?: string;
      propertyOrder?: number;
      id?: StyleSchemaDependId;
      hide?: boolean;
      visibleDepends?: StyleSchemaDepend[];
      disabled?: boolean;
      disableDepends?: StyleSchemaDepend[];
      hideIfDisable?: boolean;
      validation?: StyleSchemaValidationRule[];
      showRequiredMark?: boolean;
      hideValidateTips?: boolean;
      defaultValue?: any;
      props?: P;
      redirect?: string;
      relatedToData?: boolean;
      suffix?: string;
      grid?: { row: number; col: number };
    }

  • schema.type: エディタータイプ。 array、object は論理エディターであり、残りは基本エディター (Editor) タイプです。次の表に、サポートされている type について説明します。

    エディタータイプ	プレビュー	エディタープロパティ	タイプ	デフォルト	説明
    object		mode	'tabs' | 'collapse'	なし	グループタイプ。タブモードと折りたたみモードがサポートされています。
    array		-	-	なし	配列タイプ。複数のエディターを任意に追加して削除できます
    number		max	number	なし	最大値
    		min	number	なし	最小値
    		changeOnBlur	boolean	なし	ぼかしが変更をトリガーするかどうかを示します。
    string		maxLength	number	なし	最大長
    		placeholder	string	""	プレースホルダー
    		info	string	なし	プロンプトアイコン
    		debounceTime	number	0	変更の遅延 (ミリ秒)
    		textArea	boolean	false	フィールドが textarea かどうかを示します。
    select		suffix	string	なし	接尾辞。例: 数量: ドロップダウンボックス 数値
    		multiple	boolean	なし	複数選択かどうか
    		style	object	{ width: '100%' }	スタイル
    		options	{ label: string; value: string | number;}[]	[]	ドロップダウンリストのオプション
    switch		size	'default' | 'small'	'small'	同期された画像レイヤーのサイズ。
    		loading	boolean	false	読み込み中
    		info	string	なし	吹き出しヒント
    		label	string	なし	タグを表示
    		mode	'default' | 'checkbox'	'default'	スキーマ: default はスイッチコントロールモードです checkbox はチェックボックスの形式です
    checkbox		options	{ label: string; value: string | number; disabled?: boolean;}[]	[]	拡張機能のオプションを定義します
    		maxCheckNum	number	なし	オプションの最大数。この値を超えると、他のオプションは選択されません。オプションは disabled に設定されます。
    		label	string	なし	タグを表示
    		tooltip	string	なし	ツールチップ
    radio		options	{ label: string; value: string | number; info?: string; iconClassName?: string; img?: string; disabled?: boolean;}[]	[]	拡張機能のオプションを定義します
    		mode	'img' | 'icon' | 'default'	'default'	モード。img、icon、default (ツールチッププロンプトと省略記号が追加された) モードをサポートします。
    		useRadioButton	boolean	false	ラジオボタンを使用するかどうか
    slider		max	number	1	最大値
    		min	number	0	最小値
    		step	number	0.01	ステップ
    		isPercent	boolean	true	パーセントモードで表示するかどうかを示します。
    color		mode	'default' | 'classic'	'default'	スキーマ: default デフォルトモード classic クラシックモード
    		classicSize	'large' | 'middle' | 'small'	'large'	オーディオファイルのサイズ。classic モードでのみ有効です
    		placement	'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'	'bottom'	カラーボックスポップアップの方向
    		isFontMode	boolean	false	フォントカラーモードかどうか
    		disableAlpha	boolean	false	透過を無効にするかどうかを指定します。
    		allowClear	boolean	false	色をクリアできるかどうか
    		toRgb	boolean	false	RGB をエクスポート
    tab	tab1 tab2	options	{ text: string; value: string | number; disable?: boolean;}[]	[]	タブオプション
    		style	object	レスポンスパラメータ。	タブスタイル

    • object: type が object の場合、構成項目と値を含む一連のフォームをグループ化のようにまとめて集約できます。例:

      // meta.js
      export default = {
        "propsSchema": {
          "styleSchema": {
            "schema": {
              "title": "基本設定",
              "type": "object",
              "properties": {
                "group1": {
                    "type": 'object',
                  "properties": {
                    "address": {
                      "title": "住所",
                      "type": "string",
                      "defaultValue": "aaaa",
                    },
                    "phone": {
                      "title": "電話番号",
                      "type": "string" ,
                      "defaultValue": "1234567",
                    }
                    }
                }
              }
            }
          }
        }
      }
      
      // 値の構造が最終的に出力され、コンポーネントの props.customProps.viewConfig から取得できます。
      props.customProps.viewConfig = {
        // ...
        group1: {
          "address": "aaaa",
            "phone": "1234567"
        }
      }

    • array: type が array の場合、1 つ以上のエディターを配列形式に構成できます。この場合、properties は各項目に使用されるエディターのタイプを示し、number、string、object など、サポートされている任意の Editor タイプを指定できます。arrayItemDefaultValue によって配列の各項目にデフォルト値を追加することもできます。例:

      // meta.js
      export default = {
        "propsSchema": {
          "styleSchema": {
            "schema": {
              "title": "グループ 1",
              "type": "object",
              "properties": {
                "simpleArray": {
                  "title": "配列",
                  "type": "array",
                  "properties": "number", // 各項目に使用されるエディターのタイプ
                  "arrayItemDefaultValue": 5 // 配列の各項目のデフォルト値。
                },
                "multiArray": {
                  title: "配列 2",
                  type: "array",
                  properties: {
                      name: {
                        type: "string",
                      props: {
                          // ...
                      }
                    },
                    age: {
                        type: "number",
                        props: {
                          // ...
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      
      // 値の構造が最終的に出力され、コンポーネントの props.customProps.viewConfig から取得できます。
      props.customProps.viewConfig = {
        // ...
        "simpleArray": [1, 2, 3, 4, 5],
        "multiArray": [{
            name: 'aa',
          age: 12
        }, {
            name: 'bb',
          age: 13
        }]
      }

  • schema.title: エディターのタイトル。例:

    // ...
    phone: {
      title: '電話番号',
      type: 'string',
    },

    

  • schema.titleAlign: エディタータイトルの配置。

  • schema.properties: schema.type が object と array の場合、エディターの値のタイプは基本タイプではなく、object と array 構造です。この時点で、schema.properties はエディターの各項目値の構造を定義できます。そのインターフェイスは次のとおりです。

    type StyleSchemaProperties =
      | {
          [key: string]: StyleSchemaBase;
        }
      | string

    schema.properties が文字列型の場合、schema.type と同じ意味を表し、schema.props のプロパティは各セルフエディターに渡されます。この場合のエディターの値のタイプは、schema.properties のタイプによって異なります。次のコードは構成例を示しています。

    {
        a: {
          type: 'array',
        properties: 'string', // 配列の各項目は文字列型です。
        // props 属性は各入力ボックスに渡されます。
        props: {
            placeholder: 'プレース'
        }
      }
    }
    // 最終出力: 配列の各項目は文字列です
    {
      a: ['xx', 'xx']
    }

    schema.properties タイプが object の場合、エディターの各項目値はオブジェクトであり、構造は properties の構成によって異なります。例:

    // meta.js
    {
        a: {
          type: 'object',
        properties: {
            c: {
              type: 'string'
          }
        }
      },
        b: {
          type: 'array',
        properties: {
            c: {
              type: 'string'
          }
        }
      },
    }
    
    // 最終出力
    {
        a: {
          c: 'xxxx'
      },
      b: [{
          c: 'xxx'
      }]
    }

  • schema.className: エディタータイトルのクラス名。

  • schema.description: エディターの説明。エディターの下に表示されます。

    例:

    // ...
    phone: {
      title: '電話番号',
      type: 'string',
      description: 'これは説明です',
    },

    

  • schema.propertyOrder: エディターの表示順序。上から下へ、小さいものから大きいものへと並べられます。

  • schema.id: エディタータイトルの識別子。一般的に、表示、非表示、または無効化を制御するために使用されます。

  • schema.hide: エディターが非表示かどうかを示します。

  • schema.visibleDepends: 条件に基づいてエディターを表示するか非表示にするかを制御します。

    エディターに ID を追加することにより、複数のエディターの値がそれぞれ X の場合にエディター自体を表示する ように設定できます。

    説明

    • エディター自体が表示されない場合、onChange はトリガーされません。

    • エディター自体が表示されない場合、そのすべての子エディターは非表示になります。

    StyleSchemaDepend インターフェイスは次のとおりです。

    type StyleSchemaDependId = number | string;
    
    interface ValueDepend {
      /**エディターを識別するために使用される ID * /
      id: StyleSchemaDependId;
      /**エディターの値 * /
      value: any | any[];
    }
    
    interface PatternDepend {
      id: StyleSchemaDependId;
      /**正規表現 * /
      pattern: string;
    }
    
    type StyleSchemaBaseDepend = ValueDepend | PatternDepend;
    
    interface StyleSchemaAndDepend {
      $and?: StyleSchemaDepend[];
    }
    
    interface StyleSchemaOrDepend {
      $or?: StyleSchemaDepend[];
    }
    
    type StyleSchemaDepend = StyleSchemaBaseDepend | StyleSchemaAndDepend | StyleSchemaOrDepend;

    例:

    // ...
    {
      a: {
        title: 'a',
        type: 'string',
        id: 'a',
      },
      b: {
        title: 'b',
        type: 'string',
        id: 'b',
        visibleDepends: [{ id: 'a', value: 'china' }], // id が a のエディターの値が china と等しい場合にのみ、このコンポーネントが表示されます。
      },
      c: {
        title: 'c',
        type: 'string',
        id: 'c',
        visibleDepends: [{ id: 'a', pattern: '^china' }], // id が a のエディターの値が china で始まる場合にのみ、ウィジェットが表示されます。
      },
    }

    複数の条件を組み合わせる必要がある場合、$and または $or を使用して複数の条件を組み合わせることができます。例:

    // ...
    {
      d: {
        title: 'd',
        type: 'string',
        id: 'd',
        visibleDepends: [
          {
            $or: [
              { id: 'a', value: 'china' },
              { id: 'a', value: 'usa' },
            ],
          },
        ], // ID=a のエディターの値が china または usa と等しい場合にのみ、このコンポーネントが表示されます。
      },
    }

  • schema.disabled: エディターが無効かどうかを示します。

  • schema.diableDepends: エディターが無効かどうかを制御する条件。visibleDepends と同じ方法で構成されます。

  • schema.hideIfDisable: 無効になっているときにエディターを非表示にするかどうか。

  • schema.validation: フォーム値を検証するために使用されるエディター検証ルール。

    宣言 validation はオブジェクトの配列であり、単一ルールまたは複数ルールのシナリオをサポートします。複数のルールが存在する場合、すべてのルールが検証に合格する必要があります。

    // 検証ルールの API 操作。
    interface StyleSchemaValidationRule {
      message: string;
      [rule: string]: any;
      funcName?: string;
    }

    • message: 検証に失敗したときのエラーメッセージ。

    • [rule: string]: 構成プロパティを検証します。

      以下に、一般的な構成プロパティを示します。

      検証属性	値のタイプ	説明
      type	string (デフォルト)	文字列
      	number	数値
      	boolean	ブール値
      	integer	整数
      	float	浮動小数点数。
      	array	配列オブジェクト。
      	enum	タイプの列挙
      	date	日付
      	url	url 形式の文字列
      	email	email 形式の文字列
      required	boolean	必須
      pattern	string	正規表現
      min	number	type が string の場合、検証文字列の最小長。 type が number の場合、チェック番号の最小値。
      max	number	type が string の場合、検証文字列の最大長。 type が number の場合、番号の最大値が検証されます。
      len	number	type が string の場合、文字列の長さが検証されます。 type が array の場合、配列の長さが検証されます。

    • funcName: カスタム検証関数の名前。

      funcName が指定されている場合、他の検証構成は無効になります。詳細については、validation をご参照ください。例:

      // ...
      {
        address: {
          title: '住所',
          type: 'string',
          validation: [
            {
              required: true,
              message: 'この項目は必須です。',
            },
            {
              message: '長さは 7 と等しくなければなりません',
              len: 7,
            },
            {
              message: 'china で始まる必要があります',
              pattern: '^china',
            },
          ],
        },
        population: {
          Title: '人口',
          type: 'number',
          validation: [
            {
              type: 'integer',
              min: 1000,
              message: '少なくとも 1000 人',
            },
            {
              type: 'integer',
              max: 100000,
              message: '最大 100000 人。',
            },
          ],
        },
        url: {
          title: 'url',
          type: 'string',
          validation: [
            {
              type: 'url',
              message: '現在の形式は url に準拠していません',
            },
          ],
        },
        email: {
          title: 'email',
          type: 'string',
          validation: [
            {
              type: 'email',
              message: '現在の形式は email 形式に準拠していません',
            },
          ],
        },
      }
                                                      

  • schema.showRequiredMark: 必須のアスタリスク記号を表示するかどうか。

  • schema.hideValidateTips: 検証エラーメッセージを非表示にするかどうかを指定します。

  • schema.defaultValue: エディターのデフォルト値。

  • schema.props: props プロパティは、個々のエディター内で渡されるプロパティです。

    例:

    // ...
    "phone": {
      "title": "電話番号",
      "type": "string",
    
      // この属性の部分はエディター "string" に渡されます
      "props": {
        placeholder: "電話番号を入力してください"
      }
    }

    placeholder の string はエディターの属性です。各エディターの属性の詳細については、schema.type をご参照ください。

  • schema.redirect: フォームフィールド名を変更します。

    一般に、フォームによって出力されるキーは、styleSchema で構成されたキーに基づいています。例:

    styleSchema: {
        schema: {
          type: 'object',
          properties: {
              a: {
                type: 'object',
              properties: {
                  b: {
                  type: 'string'
                }
              }
            }
          }
      }
    }
    
    // 最終出力構造
    {
        a.b: '...'
    }

    出力レベルが深すぎると考える場合は、redirect を使用してキーの名前を変更できます。例:

    styleSchema: {
        schema: {
          type: 'object',
          properties: {
              a: {
                type: 'object',
              properties: {
                  b: {
                  type: 'string',
                  redirect: 'b'
                }
              }
            }
          }
      }
    }
    
    // 最終出力構造
    {
        b: '...'
    }

  • schema.suffix: エディターの接尾辞。例: xx: [選択] 日。

  • schema.grid: エディターのレイアウト属性。現在、垂直方向の配置や列の配置などのレイアウトがサポートされています。

    • col: 幅。24 列 ルールに従います。

      たとえば、12 と入力すると、幅の 50% を意味します。

    • row: 行番号。

    次のコードは構成例を示しています。

    {
      title: '',
      type: 'object',
      properties: { // プロジェクト名とバインドされたプロジェクト名が横に並べて表示されます。
        projectName: {
          title: 'プロジェクト名:',
          type: 'string',
          props: {
            placeholder: 'プロジェクト名の説明を入力してください'
          }
          grid: {
            row: 0, // 行番号。
            col: 12 // 列幅 (24 列ルールに従います。12 は幅の 50% です)
          }
        }
      }
    };
                                    

  • validation: カスタム検証関数は、validation オブジェクトを介してエディターに渡すことができます。そのインターフェイスは次のとおりです。

    interface StyleSchemaValidation {
      [validateFuncName: string]: (
        rule?: any,
        currentValue?: any,
        extras?: { data?: any; schema?: Schema; keyPaths?: string[] },
      ) => string | Promise<any> | void;
    }

    • rule: 現在の検証ルール。

    • currentValue: 現在のエディターの値。

    • extras: 現在のエディターに関する追加情報。

    例:

    // meta.js
    export default {
        propsSchema: {
          schema: {
            ...
          test: {
              type: 'string',
            validation: [
              {
                  funcName: 'isNum'
              }
            ]
          }
        },
        validation: {
          isNum: function(rule, currentValue) {
              if (typeof currentValue !== 'number') {
              return 'The ${currentValue} is not a number'
            }
          }
          }
      }
    }

  • localEditors: カスタムエディター。作成中です。

• propsSchema.dataSchema

  カスタムコンポーネントフェッチのデータモデルを記述します。このモデルを定義することにより、コンポーネントデータパネルをカスタマイズできます。

  interface DataSchema {
    /**フィールド設定 * /
    areas: DataSchemaArea;
    /**結果表示構成 * /
    resultDisplay: ResultDisplay;
  }

  Quick BI データパネルでは、データセットには ディメンションと メジャーの 2 種類のフィールドがあります。さまざまなフィールドをさまざまなブロックにドラッグして、さまざまなフェッチ方法を実装できます。データパネルには、次のタイプのブロックがあります。

  • ドリルブロック

  • ディメンションブロック

  • メトリックブロック

  • フィルターブロック

  • propsSchema.dataSchema.areas

    データパネルブロックの設定。そのインターフェイスは次のとおりです。

    interface DataSchemaArea {
      /**フィールド ID * /
      id?: 'area_column' | 'area_row' | 'drill' | 'filters';
      /**フィールドタイプ * /
      queryAxis?: 'dimension' | 'measure' | 'drill' | 'filters';
      /**フィールド名 * /
      name: string;
      /**フィールドヒント * /
      nameTip?: string;
      /**ルール構成 * /
      rule: DataSchemaAreaRule;
    }

    • propsSchema.dataSchema.areas[].id: ブロックの ID。

      次の値を使用できます。

      • area_column: メジャーブロックの ID。

      • area_row: ディメンションブロックの ID。

      • drill: ドリルブロック ID。

      • filters: フィルターブロックの ID。

    • propsSchema.dataSchema.areas[].rule: ブロック構成ルール。そのインターフェイスは次のとおりです。

      interface DataSchemaAreaRule {
        /**プレースホルダーの表示内容 * /
        placeholder?: string;
        /**ドラッグできるフィールドのタイプ。 * /
        fieldTypes: ('dimension' | 'measure')[];
        /**必須 * /
        required?: boolean;
        /**フィールド構成の数の制限。 * /
        maxColNum?: number;
      }

      • rule.fieldTypes: ブロックにドラッグできるフィールドのタイプを指定します。

        有効な値:

        • dimension: ディメンションフィールドのみを受け入れます。

        • measure: メジャーフィールドのみを受け入れます。

        そのタイプは配列です。すべてのタイプをドラッグできる場合は、次のように構成できます。

        fieldTypes: ['dimension', 'measure']

      • rule.required: 現在のブロックを空にできるかどうか。

      • rule.maxColNum: 現在のブロックで受け入れることができるフィールドの最大数。

    • propsSchema.dataSchema.areas[].queryAxis: ブロックの関数タイプ。

      次の値を使用できます。

      • column: メジャータイプ。

      • row: ディメンションタイプ。

      • drill: ドリルタイプ。

        この時点で、rule.type は dimension である必要があります。

      • filters: フィルタータイプ。

    • propsSchema.dataSchema.areas[].name: ブロックの表示名。

      例:

      const componentMeta = {
        // ...
        dataSchema: {
          areas: [
            {
              id: 'drill',
              name: 'ドリルダウン/ディメンション',
              queryAxis: 'drill',
              rule: {
                fieldTypes: ['dimension'],
                required: false,
                maxColNum: 6,
              },
            },
            {
              id: 'area_row',
              name: 'ディメンション',
              queryAxis: 'row',
              rule: {
                fieldTypes: ['dimension'], // ディメンションまたはメジャー
                maxColNum: 1, // 許可されるフィールドの最大数。
                required: true, // 更新アイコンが必須かどうかを指定します。
              },
            },
            {
              id: 'area_column',
              name: 'メトリック',
              queryAxis: 'column',
              rule: {
                fieldTypes: ['measure', 'dimension'],
                maxColNum: 3,
                required: true,
              },
            },
            {
              id: 'filters',
              name: 'フィルター', // フィルターの名前。
              queryAxis: 'filters',
              rule: {
                fieldTypes: ['dimension', 'measure'],
                required: false,
              },
            },
          ],
          resultDisplay: {
            upLimit: 1000,
          },
        }
      }

  • propsSchema.dataSchema.resultDisplay

    データパネルの結果表示領域の構成は次のとおりです。

    interface ResultDisplay {
      /**上限 * /
      upLimit?: number;
        /**下限 * /
      downLimit?: number;
      /**表示結果設定を非表示にするかどうかを指定します。 * /
      hide?: boolean;
    }

    

    • propsSchema.dataSchema.resultDisplay.upLimit: チャートフェッチの最大数。

    • propsSchema.dataSchema.resultDisplay.downLimit: チャートでフェッチされるデータ数の下限。デフォルト値は 1 です。

    • propsSchema.dataSchema.resultDisplay.hide: 結果表示ブロックを非表示にするかどうか。デフォルト値: false。

• 非推奨の API

  説明

  Quick BI データパネルは v4.1.1.1 バージョンでアップグレードされ、以下の古い API deprecated は非推奨になりました。現在のバージョンが Quick BI v4.1.1.1 より前の場合は、次の API をご参照ください。

  • (v4.1.1.1 で非推奨) schema: データパネルの構成。そのインターフェイスは次のとおりです。

    interface DataSchema {
      schema: DataSchemaBase;
    }
    
    interface DataSchemaBase {
      area: DataSchemaArea[];
      limitNum: number;
    }

  • (v4.1.1.1 で非推奨) schema.area: データパネルブロックの設定。そのインターフェイスは次のとおりです。

    interface DataSchemaArea {
      id?: 'area_column' | 'area_row' | 'drill' | 'filters';
      queryAxis?: 'dimension' | 'measure' | 'all';
      areaName: string;
      columnList?: any[];
      rule: DataSchemaRule;
    }

    • (v4.1.1.1 で非推奨) schema.area[].id: ブロックの ID。

      次の値を使用できます。

      • area_column: メジャーブロックの ID。

      • area_row: ディメンションブロックの ID。

      • drill: ドリルブロック ID。

      • filters: フィルターブロックの ID。

    • (v4.1.1.1 で非推奨) schema.area[].rule: ブロック構成ルール。そのインターフェイスは次のとおりです。

      interface DataSchemaRule {
        type: 'dimension' | 'measure' | 'all';
        required?: boolean;
        maxColNum?: number;
        show?: boolean;
      }

      • rule.type: ブロックが受け入れることができるフィールドのタイプを指定します。

        有効な値:

        • dimension: ディメンションフィールドのみを受け入れます。

        • measure: メジャーフィールドのみを受け入れます。

        • all: ディメンションフィールドとメジャーフィールドの両方を受け入れることができます。

      • rule.required: 現在のブロックを空にできるかどうか。

      • rule.maxColNum: 現在のブロックで受け入れることができるフィールドの最大数。

    • (v4.1.1.1 で非推奨) schema.area[].queryAxis: ブロックの関数タイプ。

      有効な値:

      • column: メジャータイプ。

      • row: ディメンションタイプ。

      • drill: ドリルタイプ。

        この時点で、rule.type は dimension である必要があります。

      • filters: フィルタータイプ。

    • (v4.1.1.1 で非推奨) schema.area[].areaName: ブロックの名前。

      次のコードは構成例を示しています。

      {
        "area": [
          {
            "id": "drill",
            "areaName": "ドリルスルー/ディメンション",
            "queryAxis": "drill",
            "rule": {
              "show": false,
              "type": "dimension",
              "required": false,
              "maxColNum": 6
            },
            "columnList": []
          },
          {
            "id": "area_onerow",
            "areaName": "ディメンション",
            "queryAxis": "row",
            "rule": {
              "type": "dimension",
              "maxColNum": 1,
              "required": true
            },
            "columnList": []
          },
          {
            "id": "area_column",
            "areaName": "メジャー",
            "queryAxis": "column",
            "rule": {
              "type": "measure",
              "maxColNum": 3,
              "required": true
            },
            "columnList": []
          },
          {
            "id": "filters",
            "areaName": "フィルター",
            "queryAxis": "filters",
            "rule": {
              "type": "all",
              "required": false
            },
            "columnList": []
          }
        ],
        "limitNum": 1000
      }

  • (v4.1.1.1 で非推奨) schema.limitNum: データフェッチの最大数。

• propsSchema.advancedSchema

  カスタムコンポーネントの [高度な設定] パネルフォームの構成仕様を記述します。作成中です。

bi-open-sdk と bi-open-react-sdk は、さまざまなフレームワーク向けに提供される SDK であり、API はまったく同じです。

• createBIComponent

  Quick BI カスタムコンポーネントを作成する関数。カスタムコンポーネントオブジェクトを返します。

  (option: IOption) => Lifecycle

  option パラメーターの構成。

  interface IBiComponent {
    mount?: Interfaces.LifecycleMount<Interfaces.ComponentProps>;
    umount?: Interfaces.LifecycleUnmount<Interfaces.ComponentProps>;
    update?: Interfaces.LifecycleUpdate<Interfaces.ComponentProps>;
  }
  
  interface IBiComponentConstructor {
    new (): IBiComponent;
  }
  
  interface IOption {
      element: IBiComponentConstructor | React.ComponentType
  }

  説明

  element createBIComponent カスタムコンポーネント。

  • bi-open-sdk によって導入された場合、タイプは IBiComponent です。

  • bi-open-react-sdk によって導入された場合、タイプは React.ComponentType です。

  例:

  import { createBIComponent } from 'bi-open-sdk'
  
  class MyComponent {
      mount() {}
    update() {}
    umount() {}
  }
  
  const { bootstrap, mount, unmount, update } = createBIComponent({
    element: MyComponent,
  })

  react フレームワークに基づく:

  import { createBIComponent } from 'bi-open-react-sdk'
  
  const MyComponent = (props) => <div>...</div>
  
  const { bootstrap, mount, unmount, update } = createBIComponent({
    element: MyComponent,
  })

• Interfaces

  Quick BI カスタムコンポーネントの型定義。

• Utils

  Quick BI カスタムコンポーネントのツールライブラリ。

  • Utils.getStringRealLength: 文字列の実際の長さを取得します。

    (str: string) => number

    str: 実際の長さを取得する必要がある文字列。例:

     getStringRealLength('abc') // 3
     getStringRealLength ('中国語') // 4 中国語は 2 としてカウントされます

  • Utils.formatNumber: 数値をフォーマットします。

    (num: number | string, partten?: 'CN' | 'CNT' | 'CN2' | 'EN' | 'KMG' | string, invalidString = 'N/A' ) => string

    • partten: 変換される形式。このパラメーターを指定しない場合、元の値が返されます。

    • invalidString: 数値が無効な場合の戻り値。デフォルト値は N/A です。

    例:

    formatNumber(1234, '#,##0') // 1,234
    formatNumber(1.234, '0.##') //1.234
    formatNumber(12, '0.##') // 12
    formatNumber(12.34, '0') // 12
    formatNumber(12.34, '0.#') // 12.3
    formatNumber(0.1, '%') // 10%
    formatNumber(0.001, '0.#%') // 0.1%
    formatNumber(0.01, '‰') // 10‰
    
    // 数値が 10000 より大きい場合
    formatNumber(12345, 'CN') // 12340
    formatNumber(12345, 'EN') // 12.34K
    formatNumber(12345, 'CNT') // 12340
    formatNumber(12345, 'CN2') // 12300
    formatNumber(12345, 'KMG') // 12.3K

  • Utils.formatNumberWithConfig: ダッシュボードデータパネルで構成された値の表示形式に従って数値をフォーマットします。

    (num: number | string, config: object) => string

    

    • num: フォーマットに変換する必要がある数値。

    • config: 値が表示される形式。このパラメーターを指定しない場合、元の値が返されます。

      構成は通常、props.customProps.viewConfig.fieldSettingMap から取得されます。

    例:

    // props を使用して、値の表示形式の構成を取得できます。
    update(props) {
      // ...
      const fieldSettingMap = props.customProps.viewConfig.fieldSettingMap
      const config = fieldSettingMap[fieldId].numberFormat;
      const value = formatNumberWithConfig(12345, config)
    }

• I18n

  Quick BI カスタムコンポーネントの国際化クラス。I18nInstance は、I18n.init または new I18n() によって作成されたインスタンスです。

  • I18n.init: 国際化インスタンスを作成し、I18nInstance インスタンスを返す静的メソッド。

    static (options: IOption, appendTarget?: object) => I18nInstance

    • options: 構成項目パラメーター。

      type Lng = "zh-CN" | "en-US" | "zh-TW" | "zh-MO" | "ja-JP"
      interface IOption {
          lng?: Lng,
        resources: Partial<{
            [key in Lng]: {
              [key: string]: string
          }
        }>
      }

      • lng: 現在の言語を設定します。このパラメーターを指定しない場合、現在の言語はデフォルトで Quick BI の現在の言語になります。

      • resources: 言語パックの構成。エントリのキーは、t 関数の最初のパラメーターに対応します。

    • appendTarget: バインドされるオブジェクト。このパラメーターを指定すると、i18n インスタンスはこのオブジェクトにバインドされます。一般的に、パフォーマンスの最適化に使用されます。

    例:

    import { I18n } form 'bi-open-sdk'
    I18n.init({
      resources: {
        // 英語キー
        'en-US': {
          My: 'my',
          Apple: 'apple',
          '{{who}} {{count}} Apple': {{who}} {{count}} apple',
          '{{who}} {{count}} apples_plural': 'plural', // {{count}} がある場合、_{{who}} {{count}} apples を追加して複雑な数値を処理できます。
        },
        // 日本語キー。
        'ja-JP': {
          Apple: 'Apple',
          ...
        }
      },
    })
    
    I18n.init(option, window.biI18n)
    window.biI18n // { t, i18n } は window.biI18n にバインドされます。

  • I18nInstance.t: 翻訳関数。

    (text: string, param?: object) => string;

    • text: 翻訳されるテキスト。

    • param: 置換されるパラメーター。

      text 内の {{}} で囲まれた式を置き換えることができます。count を渡すと、単数形と複数形を区別することもできます。

    例:

    const t = i18n.t.bind(i18n)
    
    t ('Apple') // apple
    t('{{who}}{{count}} apples', {
      who: t ('I'),
      count: 2
    }) // my 2 apples

  • I18nInstance.addResources: 翻訳エントリを追加します。

    (lng: "zh-CN" | "en-US" | "zh-TW" | "zh-MO" | "ja-JP", resource: IResource) => I18nInstance

    • lng: 追加する言語。

    • resource: 追加された言語パック。

    例:

    i18n.addResources('en-US', {
        'Apple': 'apple',
    })

  • I18nInstance.changeLanguage: 現在の言語を切り替えます。

    (lng: "zh-CN" | "en-US" | "zh-TW" | "zh-MO" | "ja-JP") => I18nInstance

    lng: 切り替える言語。

    例:

    i18n.t ('Apple') // Apple
    i18n.changeLanguage('en-US')
    i18n.t ('Apple') // apple