whereFilter

between-sales-range-analysis

매출 구간 분석: between으로 1000~10000 단일 주문을 필터링하고 카테고리별 이익 집계

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": "ko-KR",
          "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

필터 비우기 및 재구성: 기존 단순 필터를 지우고 그룹이 포함된 복잡 조건 재구성

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": "ko-KR",
          "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로 이익 구간을 제한해 카테고리와 배송 방식별 교차 분석

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": "ko-KR",
          "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일 내 소비자 또는 기업 고객의 고액 주문을 필터링하고 시/도별 매출과 이익 집계

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": "ko-KR",
          "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

다단계 중첩 그룹: 소비자 고객의 당일 배송 고액 주문 또는 기업 고객의 1급 배송 고액 주문을 3단계 AND/OR로 표현

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": "ko-KR",
          "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보다 큰 주문을 필터링하고 지역별 이익 비교

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": "ko-KR",
          "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으로 화동, 화북, 중남을 필터링하고 배송 방식별 주문 수 집계

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": "ko-KR",
          "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} />
}

화동 지역의 사무용품 또는 가구 매출: 중첩 그룹으로 지역 조건과 카테고리 OR 조건을 AND 연결

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": "ko-KR",
          "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 매출 제외

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": "ko-KR",
          "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 필터로 invert 함수 테스트

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": "ko-KR",
          "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

시/도별 사무용품 매출 순위: 사무용품 카테고리를 필터링하고 시/도별 매출 집계

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": "ko-KR",
          "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 그룹으로 두 카테고리를 필터링하고 지역별 매출 비교

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": "ko-KR",
          "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

그룹에서 조건 제거: 세 카테고리가 있는 OR 그룹에서 updateGroup으로 하나 제거

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": "ko-KR",
          "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

index로 필터 제거: 첫 번째 카테고리 필터를 제거하고 지역 조건만 유지

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": "ko-KR",
          "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

필터 동적 수정: 시/도 필터를 저장성에서 광둥성으로 업데이트하고 매출 변화 확인

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": "ko-KR",
          "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로 전환해 필터 범위 축소

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": "ko-KR",
          "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'으로 변환되는 예제

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": "ko-KR",
          "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'으로 변환되는 예제

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": "ko-KR",
          "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} />
}

#whereFilter

#between-sales-range-analysis

#clear-and-rebuild-filters

#date-filter-period-and-range-combo

#date-filter-relative-with-nested-conditions

#deeply-nested-or-and-groups

#high-discount-tech-profit-analysis

#in-operator-multi-area-delivery

#nested-group-region-product-filter

#not-between-sales-range

#not-between-with-explicit-operators

#office-supplies-sales-by-province

#or-group-product-category-comparison

#remove-condition-from-group

#remove-filter-by-index

#update-filter-switch-province

#update-group-or-to-and

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

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