Quick BI:カスタムコンポーネント API

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.styleSchema

  カスタムコンポーネントの [スタイル] パネル内のフォームの 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 は論理エディターであり、それ以外は基本エディターです。サポートされる type 値を以下に示します。

    エディター種別	プレビュー	エディター属性	型	デフォルト	説明
    object		mode	'tabs' | 'collapse'	なし	グループ種別。 tabs および collapse モードをサポートします。
    array		-	-	なし	複数のエディターインスタンスを追加・削除できる配列型です。
    number		max	number	なし	最大値。
    		min	number	なし	最小値。
    		changeOnBlur	boolean	なし	true の場合、フォーカスアウト時のみ change イベントが発生します。
    string		maxLength	number	なし	最大長。
    		placeholder	string	""	プレースホルダーのテキスト。
    		info	string	なし	ツールチップのテキスト。
    		debounceTime	number	0	change イベントの遅延時間（ミリ秒単位）。
    		textArea	boolean	false	true の場合、入力を複数行のテキストエリアとしてレンダリングします。
    select		suffix	string	なし	接尾辞。例：数量：ドロップダウンリスト items
    		multiple	boolean	なし	true の場合、複数の選択肢を選択できます。
    		style	object	{ width: '100%' }	コントロールの CSS スタイルオブジェクト。
    		options	{ label: string; value: string | number;}[]	[]	ドロップダウンメニューのオプション配列。
    switch		size	'default' | 'small'	'small'	スイッチコントロールのサイズ。
    		loading	boolean	false	true の場合、スイッチをロード状態に設定します。
    		info	string	なし	ツールチップのテキスト。
    		label	string	なし	コントロールのラベル。
    		mode	'default' | 'checkbox'	'default'	モード： default：スイッチコントロールをレンダリングします。 checkbox：チェックボックスコントロールをレンダリングします。
    checkbox		options	{ label: string; value: string | number; disabled?: boolean;}[]	[]	オプションの構成。
    		maxCheckNum	number	なし	選択可能なオプションの最大数。この上限に達すると、未選択のオプションは無効化されます。
    		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 をサポートします。default モードでは、ツールチップおよびオーバーフロー時の省略記号が含まれます。
    		useRadioButton	boolean	false	true の場合、オプションをラジオボタンとしてレンダリングします。
    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	true の場合、フォントカラーモードを有効にします。
    		disableAlpha	boolean	false	true の場合、アルファ（透過度）チャンネルを無効化します。
    		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": "Basic Settings",
              "type": "object",
              "properties": {
                "group1": {
                    "type": 'object',
                  "properties": {
                    "address": {
                      "title": "Address",
                      "type": "string",
                      "defaultValue": "aaaa",
                    },
                    "phone": {
                      "title": "Phone",
                      "type": "string" ,
                      "defaultValue": "1234567",
                    }
                    }
                }
              }
            }
          }
        }
      }
      
      // 最終出力はコンポーネントの props.customProps.viewConfig で利用可能です。
      props.customProps.viewConfig = {
        // ...
        group1: {
          "address": "aaaa",
            "phone": "1234567"
        }
      }

    • array：type が array の場合、1 つ以上のエディターを配列形式で結合できます。この場合、properties は各アイテムのエディター種別を指定し、editor の種別（number、string、object など）を指定できます。また、arrayItemDefaultValue を使用して、新しいアイテムのデフォルト値を設定できます。例：

      // meta.js
      export default = {
        "propsSchema": {
          "styleSchema": {
            "schema": {
              "title": "Group1",
              "type": "object",
              "properties": {
                "simpleArray": {
                  "title": "Array",
                  "type": "array",
                  "properties": "number", // 各アイテムのエディター種別
                  "arrayItemDefaultValue": 5 // 新しいアイテムのデフォルト値
                },
                "multiArray": {
                  title: "Array 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: 'Phone',
      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: 'Enter a value'
        }
      }
    }
    // 最終出力：配列内の各アイテムは文字列
    {
      a: ['xx', 'xx']
    }

    schema.properties がオブジェクトの場合、各アイテムの値は 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: 'Phone',
      type: 'string',
      description: 'this is a description',
    },

    

  • schema.propertyOrder：エディターの表示順序で、上から下へ昇順の数値で並べられます。

  • schema.id：エディターの識別子で、通常は条件付き可視性または無効化に使用されます。

  • schema.hide：true の場合、エディターを非表示にします。

  • 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：true の場合、エディターを無効化します。

  • schema.disableDepends：エディターを無効化するための条件を定義します。これは visibleDepends と同様に構成されます。

  • schema.hideIfDisable：true の場合、エディターが無効化されているときに非表示にします。

  • schema.validation: フォームの値に対するエディターの入力規則。

    validation プロパティはルールオブジェクトの配列です。値は、定義されたすべてのルールを満たす必要があります。

    // 入力規則インターフェイス
    interface StyleSchemaValidationRule {
      message: string;
      [rule: string]: any;
      funcName?: string;
    }

    • message：検証失敗時のエラーメッセージ。

    • [rule: string]：検証構成プロパティ。

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

      検証プロパティ	値の型	説明
      type	string（デフォルト）	文字列型。
      	number	数値型。
      	boolean	ブール値。
      	integer	整数型。
      	float	浮動小数点型。
      	array	配列型。
      	enum	列挙型。
      	date	日付型。
      	url	URL 形式の文字列。
      	email	メールアドレス形式の文字列。
      required	boolean	true の場合、必須フィールドになります。
      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: 'Address',
          type: 'string',
          validation: [
            {
              required: true,
              message: 'This field is required.',
            },
            {
              message: 'Length must be exactly 7.',
              len: 7,
            },
            {
              message: 'Must start with "china".',
              pattern: '^china',
            },
          ],
        },
        population: {
          title: 'Population',
          type: 'number',
          validation: [
            {
              type: 'integer',
              min: 1000,
              message: 'The minimum value is 1000.',
            },
            {
              type: 'integer',
              max: 100000,
              message: 'The maximum value is 100000.',
            },
          ],
        },
        url: {
          title: 'url',
          type: 'string',
          validation: [
            {
              type: 'url',
              message: 'The value is not a valid URL.',
            },
          ],
        },
        email: {
          title: 'email',
          type: 'string',
          validation: [
            {
              type: 'email',
              message: 'The value is not a valid email address.',
            },
          ],
        },
      }
                                                      

  • schema.showRequiredMark：true の場合、必須フィールドのインジケーター (*) を表示します。

  • schema.hideValidateTips：true の場合、検証エラーメッセージを非表示にします。

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

  • schema.props：props オブジェクトには、エディター コンポーネントに直接渡される属性が含まれます。

    例：

    // ...
    "phone": {
      "title": "Phone",
      "type": "string",
    
      // これらのプロパティは "string" エディターに渡されます。
      "props": {
        placeholder: "Enter phone number"
      }
    }

    ここで、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: [select] days。

  • schema.grid：エディターのレイアウトプロパティ。縦方向および多段レイアウトをサポートします。

    • col：列幅で、24 列 グリッドシステムに従います。

      例：値 12 は 50 % の幅を意味します。

    • row：行番号。

    例：

    {
      title: '',
      type: 'object',
      properties: { // プロジェクト名と紐付けプロジェクト名のフィールドを横並びに表示します。
        projectName: {
          title: 'Project Name:',
          type: 'string',
          props: {
            placeholder: 'Enter the project name description'
          }
          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 `${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。

      • フィルター：フィルター エリアの ID です。

    • propsSchema.dataSchema.areas[].rule：エリアの構成ルール。インターフェイスは以下のとおりです：

      interface DataSchemaAreaRule {
        /** プレースホルダーのテキスト */
        placeholder?: string;
        /** エリアで許可されるフィールド種別 */
        fieldTypes: ('dimension' | 'measure')[];
        /** エリアが必須かどうかを指定 */
        required?: boolean;
        /** エリアで許可されるフィールドの最大数 */
        maxColNum?: number;
      }

      • rule.fieldTypes：エリアで許可されるフィールド種別を指定します。

        有効な値：

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

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

        このプロパティは配列です。すべてのサポートされる種別を受け入れるには、以下の構成を使用します：

        fieldTypes: ['dimension', 'measure']

      • rule.required：エリアを空にできるかどうかを指定します。

      • rule.maxColNum：エリアで許可されるフィールドの最大数。

    • propsSchema.dataSchema.areas[].queryAxis：エリアの機能的種別。

      有効な値：

      • column：メジャー種別に対応します。

      • row：ディメンション種別。

      • drill：ドリルダウン種別。

        この場合、rule.fieldTypes は dimension でなければなりません。

      • filters：フィルター種別。

    • propsSchema.dataSchema.areas[].name：エリアの表示名。

      例：

      const componentMeta = {
        // ...
        dataSchema: {
          areas: [
            {
              id: 'drill',
              name: 'drill/dimension',
              queryAxis: 'drill',
              rule: {
                fieldTypes: ['dimension'],
                required: false,
                maxColNum: 6,
              },
            },
            {
              id: 'area_row',
              name: 'dimension',
              queryAxis: 'row',
              rule: {
                fieldTypes: ['dimension'], // ディメンションまたはメジャー
                maxColNum: 1, // 許可されるフィールドの最大数
                required: true, // このフィールドがチャート更新に必須かどうかを指定
              },
            },
            {
              id: 'area_column',
              name: 'measure',
              queryAxis: 'column',
              rule: {
                fieldTypes: ['measure', 'dimension'],
                maxColNum: 3,
                required: true,
              },
            },
            {
              id: 'filters',
              name: 'filter', // 名称
              queryAxis: 'filters',
              rule: {
                fieldTypes: ['measure', 'dimension'],
                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 は 非推奨 となりました。v4.1.1.1 より前の Quick BI バージョンを使用している場合にのみ、これらの 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：ディメンションフィールドのみを受け入れます。

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

        • 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": "Drill/Dimension",
            "queryAxis": "drill",
            "rule": {
              "show": false,
              "type": "dimension",
              "required": false,
              "maxColNum": 6
            },
            "columnList": []
          },
          {
            "id": "area_onerow",
            "areaName": "Dimension",
            "queryAxis": "row",
            "rule": {
              "type": "dimension",
              "maxColNum": 1,
              "required": true
            },
            "columnList": []
          },
          {
            "id": "area_column",
            "areaName": "Measure",
            "queryAxis": "column",
            "rule": {
              "type": "measure",
              "maxColNum": 3,
              "required": true
            },
            "columnList": []
          },
          {
            "id": "filters",
            "areaName": "Filters",
            "queryAxis": "filters",
            "rule": {
              "type": "all",
              "required": false
            },
            "columnList": []
          }
        ],
        "limitNum": 1000
      }

  • (v4.1.1.1 で非推奨) schema.limitNum：取得するレコードの最大数。

• propsSchema.advancedSchema

  カスタムコンポーネントの [高度な設定] パネル内のフォームの構成を指定します。（この機能は開発中です。）