whereFilter

between-sales-range-analysis

Analyse de plage de ventes : utiliser between pour filtrer les commandes unitaires entre 1000 et 10000, puis résumer le profit par catégorie

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": "Catégorie"
            }
          ],
          "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": "fr-FR",
          "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

Effacer et reconstruire les filtres : supprimer les anciens filtres simples et reconstruire des conditions complexes groupées

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": "fr-FR",
          "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

Filtrage combiné de période et plage de dates : utiliser period pour filtrer les données du T1 2024, utiliser range pour limiter l'intervalle de profit, puis analyser par catégorie et mode de livraison

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": "Catégorie"
            },
            {
              "field": "delivery_method",
              "alias": "Mode de livraison"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Ventes",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "profit",
              "alias": "Taux de profit",
              "encoding": "yAxis",
              "aggregate": {
                "func": "avg"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "fr-FR",
          "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

Filtre de date avec conditions imbriquées : filtrer les commandes à forte valeur de clients consommateurs ou entreprises sur les 30 derniers jours et résumer ventes et profit par province

import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "province",
              "alias": "Province"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Ventes",
              "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": "fr-FR",
          "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

Groupes imbriqués multi-niveaux : commandes à forte valeur livrées le jour même pour les consommateurs ou en première classe pour les clients entreprises, avec trois niveaux AND/OR

import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "province",
              "alias": "Province"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Ventes",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "fr-FR",
          "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

Analyse du profit des produits technologiques à forte remise : filtrer les commandes de catégorie technologie avec remise supérieure à 0.5 et comparer le profit par région

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": "Région"
            }
          ],
          "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": "fr-FR",
          "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

Comparaison de l'efficacité de livraison multi-région : utiliser in pour filtrer la Chine de l’Est, la Chine du Nord et le Centre-Sud, puis compter les commandes par mode de livraison

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": "Mode de livraison"
            }
          ],
          "measures": [
            {
              "field": "amount",
              "alias": "Nombre de commandes",
              "encoding": "xAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "fr-FR",
          "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} />
}

Ventes de fournitures de bureau ou de mobilier en Chine de l’Est : utiliser un groupe imbriqué avec AND pour la condition de région et OR pour les conditions de catégorie

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": "Ville"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Ventes",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "fr-FR",
          "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

filtre not between : exclure les ventes entre 1000 et 10000

import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "product_type",
              "alias": "Catégorie"
            }
          ],
          "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": "fr-FR",
          "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

filtre not between avec leftOp/rightOp explicites pour tester les fonctions invert

import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "product_type",
              "alias": "Catégorie"
            }
          ],
          "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": "fr-FR",
          "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

Classement des ventes de fournitures de bureau par province : filtrer la catégorie fournitures de bureau puis résumer les ventes par province

import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "bar",
          "dimensions": [
            {
              "field": "province",
              "alias": "Province"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Ventes",
              "encoding": "xAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "fr-FR",
          "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

Comparer fournitures de bureau et technologie : utiliser un groupe OR pour filtrer deux catégories, puis comparer les ventes par région

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": "Région"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Ventes",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "fr-FR",
          "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

Supprimer une condition d'un groupe : le groupe OR prédéfini contient trois catégories, puis updateGroup en retire une

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": "Région"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Ventes",
              "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": "fr-FR",
          "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

Supprimer un filtre par index : retirer le premier filtre de catégorie et garder seulement la condition de région

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": "Ventes",
              "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": "fr-FR",
          "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

Modifier un filtre dynamiquement : passer le filtre de province de Zhejiang à Guangdong et observer l'évolution des ventes

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": "Ville"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Ventes",
              "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": "fr-FR",
          "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

Modifier la logique de groupe : passer le groupe OR de catégorie prédéfini en AND pour réduire le périmètre

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": "Région"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Ventes",
              "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": "fr-FR",
          "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

Filtre where avec valeur de tableau et opérateur '=' converti en 'in'

import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "area",
              "alias": "Région"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Ventes",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "fr-FR",
          "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

Filtre where avec valeur de tableau et opérateur '!=' converti en 'not in'

import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "column",
          "dimensions": [
            {
              "field": "area",
              "alias": "Région"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Ventes",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "fr-FR",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.whereFilter.add('area', node => {
    node.setOperator('!=').setValue(['华东', '华北']);
  });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

#whereFilter

#between-sales-range-analysis

#clear-and-rebuild-filters

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

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

#deeply-nested-or-and-groups

#high-discount-tech-profit-analysis

#in-operator-multi-area-delivery

#nested-group-region-product-filter

#not-between-sales-range

#not-between-with-explicit-operators

#office-supplies-sales-by-province

#or-group-product-category-comparison

#remove-condition-from-group

#remove-filter-by-index

#update-filter-switch-province

#update-group-or-to-and

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

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