havingFilter

add-having-filter

Nhóm theo khu vực rồi lọc các khu vực hiệu quả cao có doanh số trên một triệu

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": "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.havingFilter.add('sales', node => { node.setAggregate({"func":"sum"}).setOperator('gt').setValue(1000000); }); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

add-multiple-having-filter

Thêm nhiều điều kiện Having dạng chuỗi để lọc khu vực có doanh số và lợi nhuận cao

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": "area",
              "alias": "Khu vực"
            }
          ],
          "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.havingFilter.add('sales', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(1000000)).add('profit', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(200000)); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

clear-having-filter

Xóa tất cả điều kiện lọc Having và hiển thị kết quả tổng hợp nhóm đầy đủ

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": "area",
              "alias": "Khu vực"
            }
          ],
          "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": [
              {
                "id": "having-1",
                "field": "sales",
                "op": "gt",
                "value": 1000000,
                "aggregate": {
                  "func": "sum"
                }
              },
              {
                "id": "having-2",
                "field": "profit",
                "op": "gt",
                "value": 200000,
                "aggregate": {
                  "func": "sum"
                }
              }
            ]
          },
          "theme": "light",
          "locale": "vi-VN",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => { builder.havingFilter.clear(); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

having-array-value-with-in-operator

Bộ lọc Having với giá trị mảng kích hoạt chuyển đổi toán tử '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": "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": 10
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.havingFilter.add('sales', node => {
    node.setOperator('=').setValue([100, 200, 300]);
  });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

having-array-value-with-not-in-operator

Bộ lọc Having với giá trị mảng kích hoạt chuyển đổi toán tử '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": "bar",
          "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": 10
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.havingFilter.add('sales', node => {
    node.setOperator('!=').setValue([100, 200]);
  });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

having-clear-and-rebuild

Xóa các điều kiện having hiện có rồi xây dựng lại bộ lọc nhóm mới như khi người dùng đặt lại bảng lọ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": "bar",
          "dimensions": [
            {
              "field": "area",
              "alias": "Khu vực"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "profit",
              "alias": "Lợi nhuận",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "amount",
              "alias": "Số lượng",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": [
              {
                "id": "old-1",
                "field": "sales",
                "op": "gt",
                "value": 999999,
                "aggregate": {
                  "func": "sum"
                }
              }
            ]
          },
          "theme": "light",
          "locale": "vi-VN",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => { builder.havingFilter.clear(); builder.havingFilter.addGroup('and', g => { g.add('sales', n => n.setAggregate({"func":"sum"}).setOperator('gte').setValue(100000)); g.addGroup('or', sub => { sub.add('profit', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(20000)); sub.add('amount', n => n.setAggregate({"func":"sum"}).setOperator('gte').setValue(50)); }); }); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

having-deeply-nested-groups

Nhóm lồng ba tầng: OR(AND(doanh số > 500K, lợi nhuận > 50K), AND(số lượng > 100, chiết khấu TB < 0.3)) cho bộ lọc nghiệp vụ phức tạp

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": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "profit",
              "alias": "Lợi nhuận",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "amount",
              "alias": "Số lượng",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "discount",
              "alias": "Chiết khấu TB",
              "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": 10
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => { builder.havingFilter.addGroup('or', root => { root.addGroup('and', g1 => { g1.add('sales', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(500000)); g1.add('profit', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(50000)); }); root.addGroup('and', g2 => { g2.add('amount', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(100)); g2.add('discount', n => n.setAggregate({"func":"avg"}).setOperator('lt').setValue(0.3)); }); }); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

having-empty-dsl-compose-target

Bắt đầu từ DSL trống và dùng builder lắp ráp where/having/measures/dimensions, gồm tổ hợp having với sum và countDistinct

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": "line",
          "dimensions": [],
          "measures": [],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "version": 1
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => { builder.chartType.changeChartType('table'); builder.theme.setTheme('light'); builder.locale.setLocale('zh-CN'); builder.whereFilter.add('profit', n => n.setOperator('<').setValue(0)); const whereConds = builder.whereFilter.getConditions(); whereConds.get(0).set('id', 'c84825ed-547a-48f0-b4d9-55ebe53aab8c'); builder.havingFilter.clear(); builder.havingFilter.add('profit', n => n.setAggregate({"func":"sum"}).setOperator('lt').setValue(-100000)); builder.havingFilter.add('province', n => n.setAggregate({"func":"countDistinct"}).setOperator('gt').setValue(4)); const havingConds = builder.havingFilter.getConditions(); havingConds.get(0).set('id', 'a6f2f16a-e0fc-4bdc-9729-bbe3a105cfca'); havingConds.get(1).set('id', '01c004d2-4041-40ee-a18b-a18fc0cea416'); builder.measures.add('sales', n => n.setAlias('sales').setEncoding('yAxis').setAggregate({"func":"sum"})); builder.measures.add('country_or_region', n => n.setAlias('country_or_region').setEncoding('yAxis').setAggregate({"func":"count"})); const measures = builder.dsl.get('measures'); measures.get(0).set('id', 'a5ba6c4a-31dc-4b2c-a38f-9f23c2bbe850'); measures.get(1).set('id', '49f3b33d-4ede-436c-8be9-a51619236916'); builder.dimensions.add('area', n => n.setAlias('area')); const dimensions = builder.dsl.get('dimensions'); dimensions.get(0).set('id', 'c3583433-a2cc-4234-85ff-75ae2472b674'); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

having-field-not-in-measures-and-dimensions

Khởi tạo DSL trống, chỉ thêm chiều area và chỉ số sales bằng builder, rồi dùng field profit trong having khi field này không có trong measures/dimensions

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": "line",
          "dimensions": [],
          "measures": [],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "version": 1
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => { builder.chartType.changeChartType('bar'); builder.dimensions.add('area', n => n.setAlias('Region')); builder.measures.add('sales', n => n.setAlias('Sales').setEncoding('yAxis').setAggregate({"func":"sum"})); builder.havingFilter.add('profit', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(100000)); builder.limit.setLimit(20); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

having-find-and-update

Thêm điều kiện having trước, sau đó dùng find để tìm và cập nhật động ngưỡng cùng toán tử

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": "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.havingFilter.add('sales', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(100000)).add('profit', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(10000)); const json = builder.havingFilter.toJSON().conditions; const salesId = json[0].id; const profitId = json[1].id; builder.havingFilter.update(salesId, n => { n.setOperator('gte').setValue(500000); }); builder.havingFilter.update(profitId, n => { n.setOperator('gte').setValue(50000); }); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

having-group-add-to-existing

Thêm điều kiện mới vào nhóm having hiện có để tinh chỉnh quy tắc lọc theo từng bướ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": "bar",
          "dimensions": [
            {
              "field": "area",
              "alias": "Khu vực"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "profit",
              "alias": "Lợi nhuận",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "amount",
              "alias": "Số lượng",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": [
              {
                "id": "group-1",
                "op": "or",
                "conditions": [
                  {
                    "id": "cond-1",
                    "field": "sales",
                    "op": "gt",
                    "value": 500000,
                    "aggregate": {
                      "func": "sum"
                    }
                  }
                ]
              }
            ]
          },
          "theme": "light",
          "locale": "vi-VN",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => { builder.havingFilter.updateGroup('group-1', group => { group.add('profit', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(100000)); group.add('amount', n => n.setAggregate({"func":"sum"}).setOperator('gte').setValue(200)); }); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

having-group-remove-condition

Xóa một điều kiện cụ thể khỏi nhóm having hiện 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": "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": [
              {
                "id": "group-1",
                "op": "and",
                "conditions": [
                  {
                    "id": "cond-1",
                    "field": "sales",
                    "op": "gt",
                    "value": 100000,
                    "aggregate": {
                      "func": "sum"
                    }
                  },
                  {
                    "id": "cond-2",
                    "field": "profit",
                    "op": "gt",
                    "value": 10000,
                    "aggregate": {
                      "func": "sum"
                    }
                  }
                ]
              }
            ]
          },
          "theme": "light",
          "locale": "vi-VN",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => { builder.havingFilter.updateGroup('group-1', group => { group.remove('cond-1'); }); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

having-mix-filters-and-groups

Kết hợp điều kiện độc lập và nhóm OR: doanh số > 500K AND (lợi nhuận > 100K OR số lượng >= 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": "bar",
          "dimensions": [
            {
              "field": "area",
              "alias": "Khu vực"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "profit",
              "alias": "Lợi nhuận",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "amount",
              "alias": "Số lượng",
              "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.havingFilter.add('sales', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(500000)).addGroup('or', group => { group.add('profit', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(100000)); group.add('amount', n => n.setAggregate({"func":"sum"}).setOperator('gte').setValue(30)); }); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

having-multi-dimension-aggregate

Nhóm theo danh mục và khu vực, lọc các tổ hợp có chiết khấu TB dưới 20% và tổng doanh số trên 100K

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": "area",
              "alias": "Khu vực"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "discount",
              "alias": "Chiết khấu TB",
              "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": 10
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => { builder.havingFilter.addGroup('and', g => { g.add('discount', n => n.setAggregate({"func":"avg"}).setOperator('lt').setValue(0.2)); g.add('sales', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(100000)); }); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

having-nested-groups

Nhóm lồng nhau: AND(doanh số > 1M, OR(lợi nhuận > 200K, số lượng >= 50))

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": "area",
              "alias": "Khu vực"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "profit",
              "alias": "Lợi nhuận",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "amount",
              "alias": "Số lượng",
              "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.havingFilter.addGroup('and', outer => { outer.add('sales', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(1000000)); outer.addGroup('or', inner => { inner.add('profit', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(200000)); inner.add('amount', n => n.setAggregate({"func":"sum"}).setOperator('gte').setValue(50)); }); }); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

having-or-group

Dùng nhóm OR để lọc khu vực có doanh số hoặc lợi nhuận cao

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": "area",
              "alias": "Khu vực"
            }
          ],
          "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.havingFilter.addGroup('or', group => { group.add('sales', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(1000000)); group.add('profit', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(200000)); }); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

having-scatter-profit-analysis

Phân tích biểu đồ phân tán: nhóm theo danh mục và lọc danh mục có tỷ lệ lợi nhuận cao với hơn 20 giao dịch

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": "scatter",
          "dimensions": [
            {
              "field": "product_sub_type",
              "alias": "Danh mục con"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "encoding": "xAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "profit",
              "alias": "Lợi nhuận",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "amount",
              "alias": "Số lượng",
              "encoding": "size",
              "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.havingFilter.addGroup('and', g => { g.add('profit', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(0)); g.add('amount', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(20)); g.add('sales', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(10000)); }); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

having-update-group-operator

Cập nhật toán tử logic của nhóm Having hiện có từ AND sang 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": "bar",
          "dimensions": [
            {
              "field": "area",
              "alias": "Khu vực"
            }
          ],
          "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": [
              {
                "id": "group-1",
                "op": "and",
                "conditions": [
                  {
                    "id": "cond-1",
                    "field": "sales",
                    "op": "gt",
                    "value": 1000000,
                    "aggregate": {
                      "func": "sum"
                    }
                  },
                  {
                    "id": "cond-2",
                    "field": "profit",
                    "op": "gt",
                    "value": 200000,
                    "aggregate": {
                      "func": "sum"
                    }
                  }
                ]
              }
            ]
          },
          "theme": "light",
          "locale": "vi-VN",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => { builder.havingFilter.updateGroup('group-1', group => { group.setOperator('or'); }); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

having-with-where-combined

Kết hợp where và having: lọc danh mục văn phòng phẩm bằng where trước, rồi lọc tỉnh/thành có doanh số > 50K hoặc lợi nhuận > 10K bằng having

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": 10
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => { builder.whereFilter.add('product_type', n => n.setOperator('=').setValue('办公用品')); builder.havingFilter.addGroup('or', g => { g.add('sales', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(50000)); g.add('profit', n => n.setAggregate({"func":"sum"}).setOperator('gt').setValue(10000)); }); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

remove-having-filter

Xóa các điều kiện lọc Having thừa và chỉ giữ bộ lọc lợi nhuận

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": "area",
              "alias": "Khu vực"
            }
          ],
          "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": [
              {
                "id": "having-1",
                "field": "sales",
                "op": "gt",
                "value": 1000000,
                "aggregate": {
                  "func": "sum"
                }
              },
              {
                "id": "having-2",
                "field": "profit",
                "op": "gt",
                "value": 200000,
                "aggregate": {
                  "func": "sum"
                }
              }
            ]
          },
          "theme": "light",
          "locale": "vi-VN",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => { builder.havingFilter.remove('having-1'); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

#havingFilter

#add-having-filter

#add-multiple-having-filter

#clear-having-filter

#having-array-value-with-in-operator

#having-array-value-with-not-in-operator

#having-clear-and-rebuild

#having-deeply-nested-groups

#having-empty-dsl-compose-target

#having-field-not-in-measures-and-dimensions

#having-find-and-update

#having-group-add-to-existing

#having-group-remove-condition

#having-mix-filters-and-groups

#having-multi-dimension-aggregate

#having-nested-groups

#having-or-group

#having-scatter-profit-analysis

#having-update-group-operator

#having-with-where-combined

#remove-having-filter