#whereFilter
#between-sales-range-analysis
Sales range analysis: use between to filter individual orders from 1000 to 10000 and summarize profit by category
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "column",
"dimensions": [
{
"field": "product_type",
"alias": "Category"
}
],
"measures": [
{
"field": "profit",
"alias": "Profit",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "en-US",
"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
Clear and rebuild filters: clear old simple filters and rebuild complex grouped conditions
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "column",
"dimensions": [
{
"field": "province",
"alias": "Province"
}
],
"measures": [
{
"field": "profit",
"alias": "Profit",
"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": "en-US",
"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
Date range combined filter: use period to filter 2024 Q1 data, while range limits the profit interval, then cross-analyze by category and shipping mode
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "bar",
"dimensions": [
{
"field": "product_type",
"alias": "Category"
},
{
"field": "delivery_method",
"alias": "Delivery Method"
}
],
"measures": [
{
"field": "sales",
"alias": "Sales",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "profit",
"alias": "Profit Ratio",
"encoding": "yAxis",
"aggregate": {
"func": "avg"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "en-US",
"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
Date filter with nested conditions: filter high-value orders from Consumer or Corporate customers in the last 30 days and summarize sales and profit by province
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "column",
"dimensions": [
{
"field": "province",
"alias": "Province"
}
],
"measures": [
{
"field": "sales",
"alias": "Sales",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "profit",
"alias": "Profit",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "en-US",
"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
Multi-level nested grouping: high-value Same Day orders from Consumer customers or First Class orders from Corporate customers, using three levels of AND/OR nesting
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "column",
"dimensions": [
{
"field": "province",
"alias": "Province"
}
],
"measures": [
{
"field": "sales",
"alias": "Sales",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "en-US",
"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
High-discount Technology product profit analysis: filter Technology category orders with discount greater than 0.5 and compare profit by region
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "column",
"dimensions": [
{
"field": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "profit",
"alias": "Profit",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "en-US",
"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
Multi-region delivery efficiency comparison: use in to filter East China, North China, and Central South, then count orders by shipping mode
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "bar",
"dimensions": [
{
"field": "delivery_method",
"alias": "Delivery Method"
}
],
"measures": [
{
"field": "amount",
"alias": "Order Count",
"encoding": "xAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "en-US",
"version": 1,
"limit": 20
},
connectorId: DEMO_CONNECTOR_ID,
})
const applyBuilder = (builder: VBIChartBuilder) => {
builder.whereFilter.add('area', node => {
node.setOperator('in').setValue(['华东', '华北', '中南']);
});
}
applyBuilder(builder)
setResult(await builder.buildVSeed())
}
run()
}, [])
if (!result) return <div>Loading...</div>
return <VSeedRender vseed={result} />
}#nested-group-region-product-filter
Office Supplies or Furniture sales in East China: use nested grouping with AND connecting the region condition and OR category conditions
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "column",
"dimensions": [
{
"field": "city",
"alias": "City"
}
],
"measures": [
{
"field": "sales",
"alias": "Sales",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "en-US",
"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 filter: exclude sales between 1000 and 10000
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "column",
"dimensions": [
{
"field": "product_type",
"alias": "Category"
}
],
"measures": [
{
"field": "profit",
"alias": "Profit",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "en-US",
"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
Not between filter with explicit leftOp/rightOp to test invert functions
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "column",
"dimensions": [
{
"field": "product_type",
"alias": "Category"
}
],
"measures": [
{
"field": "profit",
"alias": "Profit",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "en-US",
"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
Office Supplies sales ranking by province: filter the Office Supplies category and summarize sales by province
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "bar",
"dimensions": [
{
"field": "province",
"alias": "Province"
}
],
"measures": [
{
"field": "sales",
"alias": "Sales",
"encoding": "xAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "en-US",
"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
Office Supplies versus Technology category comparison: use an OR group to filter two categories and compare sales by region
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "column",
"dimensions": [
{
"field": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Sales",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "en-US",
"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
Remove a condition from a group: the preset OR group contains three categories, and updateGroup removes one of them
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "column",
"dimensions": [
{
"field": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Sales",
"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": "en-US",
"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
Remove a filter by index: remove the first category filter and keep only the region condition
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "column",
"dimensions": [
{
"field": "province",
"alias": "Province"
}
],
"measures": [
{
"field": "sales",
"alias": "Sales",
"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": "en-US",
"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
Dynamically modify a filter: update the province filter from Zhejiang to Guangdong and observe sales changes
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "bar",
"dimensions": [
{
"field": "city",
"alias": "City"
}
],
"measures": [
{
"field": "sales",
"alias": "Sales",
"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": "en-US",
"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
Modify group logic: switch the preset OR category group to AND to narrow the filter scope
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "column",
"dimensions": [
{
"field": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Sales",
"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": "en-US",
"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 filter with array value using '=' operator should convert to 'in'
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "column",
"dimensions": [
{
"field": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Sales",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "en-US",
"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 filter with array value using '!=' operator should convert to 'not in'
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "column",
"dimensions": [
{
"field": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Sales",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "en-US",
"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} />
}