whereFilter

between-sales-range-analysis

Phân tích khoảng doanh số: dùng between lọc đơn hàng từ 1000 đến 10000 và tổng hợp lợi nhuận theo danh mục

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": "Danh mục"
            }
          ],
          "measures": [
            {
              "field": "profit",
              "alias": "Lợi nhuận",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "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

Xóa và xây dựng lại bộ lọc: xóa bộ lọc đơn giản cũ và tạo điều kiện phức tạp có nhóm

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": "Tỉnh/TP"
            }
          ],
          "measures": [
            {
              "field": "profit",
              "alias": "Lợi nhuận",
              "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": "vi-VN",
          "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

Kết hợp lọc khoảng ngày: dùng period lọc dữ liệu Q1 2024, đồng thời dùng range giới hạn khoảng lợi nhuận, phân tích chéo theo danh mục và phương thức giao hàng

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": "Danh mục"
            },
            {
              "field": "delivery_method",
              "alias": "Phương thức giao hàng"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "profit",
              "alias": "Tỷ suất lợi nhuận",
              "encoding": "yAxis",
              "aggregate": {
                "func": "avg"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "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

Bộ lọc ngày với điều kiện lồng nhau: lọc đơn giá trị cao của khách tiêu dùng hoặc doanh nghiệp trong 30 ngày gần nhất và thống kê doanh số, lợi nhuận theo tỉnh/thành

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": "Tỉnh/TP"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "profit",
              "alias": "Lợi nhuận",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "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

Nhóm lồng nhiều tầng: đơn giá trị cao giao trong ngày của khách tiêu dùng hoặc giao hạng nhất của khách doanh nghiệp với ba tầng 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": "Tỉnh/TP"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "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

Phân tích lợi nhuận sản phẩm công nghệ chiết khấu cao: lọc đơn danh mục công nghệ có chiết khấu > 0.5 và so sánh lợi nhuận theo khu vực

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": "Khu vực"
            }
          ],
          "measures": [
            {
              "field": "profit",
              "alias": "Lợi nhuận",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "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

So sánh hiệu quả giao hàng nhiều khu vực: dùng in lọc Hoa Đông, Hoa Bắc, Trung Nam và đếm đơn theo phương thức giao hàng

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": "Phương thức giao hàng"
            }
          ],
          "measures": [
            {
              "field": "amount",
              "alias": "Số đơn hàng",
              "encoding": "xAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "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} />
}

Doanh số văn phòng phẩm hoặc nội thất tại Hoa Đông: dùng nhóm lồng với AND cho khu vực và OR cho danh mục

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": "Thành phố"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "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

bộ lọc not between: loại trừ doanh số từ 1000 đến 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": "Danh mục"
            }
          ],
          "measures": [
            {
              "field": "profit",
              "alias": "Lợi nhuận",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "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

bộ lọc not between với leftOp/rightOp rõ ràng để kiểm thử hàm 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": "Danh mục"
            }
          ],
          "measures": [
            {
              "field": "profit",
              "alias": "Lợi nhuận",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "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

Xếp hạng doanh số văn phòng phẩm theo tỉnh/thành: lọc danh mục văn phòng phẩm và tổng hợp doanh số theo tỉnh/thành

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": "Tỉnh/TP"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "encoding": "xAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "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

So sánh văn phòng phẩm và công nghệ: dùng nhóm OR lọc hai danh mục và so sánh doanh số theo khu vực

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": "Khu vực"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "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

Xóa điều kiện khỏi nhóm: nhóm OR có ba danh mục, xóa một danh mục bằng 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": "Khu vực"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "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": "vi-VN",
          "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

Xóa bộ lọc theo index: xóa bộ lọc danh mục đầu tiên và chỉ giữ điều kiện khu vực

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": "Tỉnh/TP"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "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": "vi-VN",
          "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

Sửa bộ lọc động: cập nhật bộ lọc tỉnh từ Chiết Giang sang Quảng Đông và quan sát thay đổi doanh số

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": "Thành phố"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "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": "vi-VN",
          "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

Sửa logic nhóm: chuyển nhóm danh mục OR có sẵn sang AND để thu hẹp phạm vi

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": "Khu vực"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "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": "vi-VN",
          "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

Bộ lọc where với giá trị mảng và toán tử '=' sẽ chuyển thành '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": "Khu vực"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "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

Bộ lọc where với giá trị mảng và toán tử '!=' sẽ chuyển thành '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": "Khu vực"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "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