VisActor VBI
  • 日本語

      • whereFilter

      between-sales-range-analysis

      売上区間分析: between で 1000〜10000 の注文を絞り込み、カテゴリ別に利益を集計

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "product_type",
              "alias": "カテゴリ"
            }
          ],
          "measures": [
            {
              "field": "profit",
              "alias": "利益",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter.add('sales', node => {
    node.setOperator('between').setValue({ min: 1000, max: 10000 });
  });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      clear-and-rebuild-filters

      フィルターをクリアして再構築: 古い単純条件を削除し、グループを含む複雑条件を再構築

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "province",
              "alias": "都道府県"
            }
          ],
          "measures": [
            {
              "field": "profit",
              "alias": "利益",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": [
              {
                "id": "f-old1",
                "field": "product_type",
                "op": "eq",
                "value": "办公用品"
              },
              {
                "id": "f-old2",
                "field": "area",
                "op": "eq",
                "value": "华东"
              }
            ]
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter
    .clear()
    .add('profit', node => node.setOperator('>').setValue(0))
    .addGroup('or', group => {
      group
        .add('area', n => n.setOperator('eq').setValue('华东'))
        .add('area', n => n.setOperator('eq').setValue('华北'));
    });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      date-filter-period-and-range-combo

      日付範囲の組み合わせフィルター: period で 2024 年 Q1 データを絞り込み、range で利益範囲を制限してカテゴリと配送方法でクロス分析

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "bar",
          "dimensions": [
            {
              "field": "product_type",
              "alias": "カテゴリ"
            },
            {
              "field": "delivery_method",
              "alias": "配送方法"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "売上",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "profit",
              "alias": "利益率",
              "encoding": "yAxis",
              "aggregate": {
                "func": "avg"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 50
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter
    .add('order_date', node => {
      node.setDate({ type: 'period', unit: 'quarter', year: 2024, quarter: 1 });
    })
    .add('profit', node => {
      node.setOperator('between').setValue({ min: 0, max: 5000, leftOp: '<=', rightOp: '<' });
    })
    .add('sales', node => node.setOperator('>=').setValue(100));
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      date-filter-relative-with-nested-conditions

      日付フィルターとネスト条件の組み合わせ: 直近 30 日の消費者または企業顧客の高額注文を絞り込み、都道府県別に売上と利益を集計

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "province",
              "alias": "都道府県"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "売上",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "profit",
              "alias": "利益",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter
    .add('order_date', node => {
      node.setDate({ type: 'relative', mode: 'last', amount: 30, unit: 'day' });
    })
    .add('sales', node => node.setOperator('>').setValue(500))
    .addGroup('or', group => {
      group
        .add('customer_type', n => n.setOperator('eq').setValue('消费者'))
        .add('customer_type', n => n.setOperator('in').setValue(['公司', '小型企业']));
    });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      deeply-nested-or-and-groups

      多層ネストグループ: 消費者顧客の当日配送高額注文、または企業顧客の一級配送高額注文を 3 層 AND/OR で表現

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "province",
              "alias": "都道府県"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "売上",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter
    .add('sales', node => node.setOperator('>').setValue(500))
    .addGroup('or', outerGroup => {
      outerGroup
        .addGroup('and', g1 => {
          g1.add('customer_type', n => n.setOperator('eq').setValue('消费者'))
            .add('delivery_method', n => n.setOperator('eq').setValue('当日'));
        })
        .addGroup('and', g2 => {
          g2.add('customer_type', n => n.setOperator('in').setValue(['公司', '小型企业']))
            .add('delivery_method', n => n.setOperator('eq').setValue('一级'));
        });
    });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      high-discount-tech-profit-analysis

      高割引技術商品の利益分析: 技術カテゴリかつ割引 0.5 超の注文を絞り込み、地域別に利益を比較

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "area",
              "alias": "地域"
            }
          ],
          "measures": [
            {
              "field": "profit",
              "alias": "利益",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter
    .add('product_type', node => node.setOperator('eq').setValue('技术'))
    .add('discount', node => node.setOperator('>').setValue(0.5));
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      in-operator-multi-area-delivery

      複数地域の配送効率比較: in で華東、華北、中南を絞り込み、配送方法別に注文数を集計

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "bar",
          "dimensions": [
            {
              "field": "delivery_method",
              "alias": "配送方法"
            }
          ],
          "measures": [
            {
              "field": "amount",
              "alias": "注文数",
              "encoding": "xAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter.add('area', node => {
    node.setOperator('in').setValue(['华东', '华北', '中南']);
  });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      nested-group-region-product-filter

      華東地域の事務用品または家具の売上: ネストグループで地域条件と OR カテゴリ条件を AND 接続

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "city",
              "alias": "都市"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "売上",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 10
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter
    .add('area', node => node.setOperator('eq').setValue('华东'))
    .addGroup('or', group => {
      group
        .add('product_type', node => node.setOperator('eq').setValue('办公用品'))
        .add('product_type', node => node.setOperator('eq').setValue('家具'));
    });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      not-between-sales-range

      not between フィルター: 1000〜10000 の売上を除外

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "product_type",
              "alias": "カテゴリ"
            }
          ],
          "measures": [
            {
              "field": "profit",
              "alias": "利益",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter.add('sales', node => {
    node.setOperator('not between').setValue({ min: 1000, max: 10000 });
  });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      not-between-with-explicit-operators

      明示的な leftOp/rightOp を持つ not between フィルターで反転関数をテスト

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "product_type",
              "alias": "カテゴリ"
            }
          ],
          "measures": [
            {
              "field": "profit",
              "alias": "利益",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter.add('sales', node => {
    node.setOperator('not between').setValue({ min: 1000, max: 10000, leftOp: '<', rightOp: '<' });
  });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      office-supplies-sales-by-province

      都道府県別の事務用品売上ランキング: 事務用品カテゴリを絞り込み、都道府県別に売上を集計

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "bar",
          "dimensions": [
            {
              "field": "province",
              "alias": "都道府県"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "売上",
              "encoding": "xAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter.add('product_type', node => {
    node.setOperator('eq').setValue('办公用品');
  });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      or-group-product-category-comparison

      事務用品と技術カテゴリの比較: OR グループで 2 カテゴリを絞り込み、地域別に売上を比較

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "area",
              "alias": "地域"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "売上",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter.addGroup('or', group => {
    group
      .add('product_type', node => node.setOperator('eq').setValue('办公用品'))
      .add('product_type', node => node.setOperator('eq').setValue('技术'));
  });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      remove-condition-from-group

      グループから条件を削除: 3 つのカテゴリを含む OR グループから updateGroup で 1 つを削除

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "area",
              "alias": "地域"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "売上",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": [
              {
                "id": "g-products",
                "op": "or",
                "conditions": [
                  {
                    "id": "f-office",
                    "field": "product_type",
                    "op": "eq",
                    "value": "办公用品"
                  },
                  {
                    "id": "f-tech",
                    "field": "product_type",
                    "op": "eq",
                    "value": "技术"
                  },
                  {
                    "id": "f-furniture",
                    "field": "product_type",
                    "op": "eq",
                    "value": "家具"
                  }
                ]
              }
            ]
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter.updateGroup('g-products', group => {
    group.remove('f-furniture');
  });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      remove-filter-by-index

      インデックスでフィルターを削除: 最初のカテゴリ条件を削除し、地域条件だけを保持

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "province",
              "alias": "都道府県"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "売上",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": [
              {
                "id": "f-product",
                "field": "product_type",
                "op": "eq",
                "value": "办公用品"
              },
              {
                "id": "f-area",
                "field": "area",
                "op": "in",
                "value": [
                  "华东",
                  "华北",
                  "中南"
                ]
              }
            ]
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter.remove(0);
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      update-filter-switch-province

      フィルターを動的に変更: 都道府県条件を浙江から広東に更新し、売上変化を確認

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "bar",
          "dimensions": [
            {
              "field": "city",
              "alias": "都市"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "売上",
              "encoding": "xAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": [
              {
                "id": "f-province",
                "field": "province",
                "op": "eq",
                "value": "浙江"
              },
              {
                "id": "f-product",
                "field": "product_type",
                "op": "eq",
                "value": "技术"
              }
            ]
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter.update('f-province', node => {
    node.setValue('广东');
  });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      update-group-or-to-and

      グループロジックを変更: 既存の OR カテゴリグループを AND に切り替え、範囲を絞る

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "area",
              "alias": "地域"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "売上",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": [
              {
                "id": "g-customer",
                "op": "or",
                "conditions": [
                  {
                    "id": "f-ct1",
                    "field": "customer_type",
                    "op": "eq",
                    "value": "公司"
                  },
                  {
                    "id": "f-ct2",
                    "field": "customer_type",
                    "op": "eq",
                    "value": "消费者"
                  }
                ]
              }
            ]
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter.updateGroup('g-customer', group => {
    group.setOperator('and');
  });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      where-filter-array-value-converts-to-in

      配列値と '=' 演算子を持つ where フィルターが 'in' に変換される例

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "area",
              "alias": "地域"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "売上",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter.add('area', node => {
    node.setOperator('=').setValue(['华东', '华北']);
  });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}

      where-filter-array-value-converts-to-not-in

      配列値と '!=' 演算子を持つ where フィルターが 'not in' に変換される例

      Loading...
      import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "area",
              "alias": "地域"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "売上",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "ja-JP",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter.add('area', node => {
    node.setOperator('!=').setValue(['华东', '华北']);
  });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}