#havingFilter
#add-having-filter
Nach Region gruppieren und leistungsstarke Regionen mit Umsatz über einer Million filtern
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": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "de-DE",
"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
Mehrere Having-Bedingungen verkettet hinzufügen, um Regionen mit hohem Umsatz und hohem Gewinn zu filtern
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": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "profit",
"alias": "Gewinn",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "de-DE",
"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
Alle Having-Filterbedingungen leeren und das vollständige gruppierte Aggregationsergebnis anzeigen
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": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "profit",
"alias": "Gewinn",
"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": "de-DE",
"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
Having-Filter mit Array-Wert, der die Umwandlung in den Operator 'in' auslöst
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": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "de-DE",
"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
Having-Filter mit Array-Wert, der die Umwandlung in den Operator 'not in' auslöst
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": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "de-DE",
"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
Vorhandene Having-Bedingungen löschen und neue Gruppenfilter neu aufbauen, wie beim Zurücksetzen und erneuten Konfigurieren eines Filterpanels
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": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "profit",
"alias": "Gewinn",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "amount",
"alias": "Menge",
"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": "de-DE",
"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
Dreistufig verschachtelte Gruppe: OR(AND(Umsatz > 500K, Gewinn > 50K), AND(Menge > 100, durchschnittlicher Rabatt < 0.3)) für komplexe Business-Filter
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": "Bundesland"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "profit",
"alias": "Gewinn",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "amount",
"alias": "Menge",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "discount",
"alias": "Durchschnittsrabatt",
"encoding": "yAxis",
"aggregate": {
"func": "avg"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "de-DE",
"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
Von einer leeren DSL starten und mit builder where/having/measures/dimensions zusammensetzen, inklusive having-Kombination mit sum und countDistinct
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": "line",
"dimensions": [],
"measures": [],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "de-DE",
"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
Leere DSL initialisieren, nur Dimension area und Kennzahl sales per builder hinzufügen und im having das Feld profit verwenden, das nicht in measures/dimensions vorkommt
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": "line",
"dimensions": [],
"measures": [],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "de-DE",
"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
Zuerst having-Bedingungen hinzufügen, dann per find suchen und Schwellenwerte sowie Operatoren dynamisch aktualisieren
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": "Kategorie"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "profit",
"alias": "Gewinn",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "de-DE",
"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
Einer vorhandenen having-Gruppe eine neue Bedingung hinzufügen, um Filterregeln schrittweise zu verfeinern
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": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "profit",
"alias": "Gewinn",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "amount",
"alias": "Menge",
"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": "de-DE",
"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
Eine bestimmte Bedingung aus einer vorhandenen having-Gruppe entfernen
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": "Kategorie"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "profit",
"alias": "Gewinn",
"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": "de-DE",
"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
Eigenständige Filterbedingungen und OR-Gruppe mischen: Umsatz > 500K AND (Gewinn > 100K OR Menge >= 30)
Loading...
import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'
export default () => {
const [result, setResult] = useState<any>(null)
useEffect(() => {
const run = async () => {
const builder = VBI.chart.create({
...{
"connectorId": "demoSupermarket",
"chartType": "bar",
"dimensions": [
{
"field": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "profit",
"alias": "Gewinn",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "amount",
"alias": "Menge",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "de-DE",
"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
Nach Kategorie und Region gruppieren und Kombinationen mit durchschnittlichem Rabatt unter 20% und Gesamtumsatz über 100K filtern
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": "Kategorie"
},
{
"field": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "discount",
"alias": "Durchschnittsrabatt",
"encoding": "yAxis",
"aggregate": {
"func": "avg"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "de-DE",
"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
Verschachtelte Gruppe: AND(Umsatz > 1M, OR(Gewinn > 200K, Menge >= 50))
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": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "profit",
"alias": "Gewinn",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "amount",
"alias": "Menge",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "de-DE",
"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
OR-Gruppe verwenden, um Regionen mit hohem Umsatz oder hohem Gewinn zu filtern
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": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "profit",
"alias": "Gewinn",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "de-DE",
"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
Streudiagramm-Analyse: Nach Kategorie gruppieren und Kategorien mit hoher Gewinnrate sowie mehr als 20 Transaktionen finden
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": "scatter",
"dimensions": [
{
"field": "product_sub_type",
"alias": "Unterkategorie"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "xAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "profit",
"alias": "Gewinn",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "amount",
"alias": "Menge",
"encoding": "size",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "de-DE",
"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
Logischen Operator einer vorhandenen Having-Gruppe von AND auf OR aktualisieren
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": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "profit",
"alias": "Gewinn",
"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": "de-DE",
"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
where und having kombiniert: zuerst die Kategorie Bürobedarf per where filtern, dann Bundesländer mit Umsatz > 50K oder Gewinn > 10K per having
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": "Bundesland"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "profit",
"alias": "Gewinn",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
}
],
"whereFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"havingFilter": {
"id": "root",
"op": "and",
"conditions": []
},
"theme": "light",
"locale": "de-DE",
"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
Überflüssige Having-Filter entfernen und nur den Gewinnfilter behalten
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": "area",
"alias": "Region"
}
],
"measures": [
{
"field": "sales",
"alias": "Umsatz",
"encoding": "yAxis",
"aggregate": {
"func": "sum"
}
},
{
"field": "profit",
"alias": "Gewinn",
"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": "de-DE",
"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} />
}