whereFilter

between-sales-range-analysis

Analisis rentang penjualan: gunakan between untuk memfilter pesanan satuan 1000 sampai 10000 dan rangkum laba menurut kategori

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": "Kategori"
            }
          ],
          "measures": [
            {
              "field": "profit",
              "alias": "Laba",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "id-ID",
          "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

Kosongkan dan bangun ulang filter: hapus filter sederhana lama lalu bangun ulang kondisi kompleks berkelompok

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": "Provinsi"
            }
          ],
          "measures": [
            {
              "field": "profit",
              "alias": "Laba",
              "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": "id-ID",
          "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

Gabungan filter rentang tanggal: gunakan period untuk data Q1 2024, gunakan range untuk membatasi interval laba, lalu analisis silang menurut kategori dan metode pengiriman

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": "Kategori"
            },
            {
              "field": "delivery_method",
              "alias": "Metode Pengiriman"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Penjualan",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "profit",
              "alias": "Rasio Laba",
              "encoding": "yAxis",
              "aggregate": {
                "func": "avg"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "id-ID",
          "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

Filter tanggal dengan kondisi bersarang: filter pesanan bernilai tinggi dari pelanggan konsumen atau korporat dalam 30 hari terakhir dan rangkum penjualan serta laba per provinsi

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": "Provinsi"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Penjualan",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            },
            {
              "field": "profit",
              "alias": "Laba",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "id-ID",
          "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

Grup bersarang bertingkat: pesanan bernilai tinggi pengiriman hari yang sama dari pelanggan konsumen atau kelas satu dari pelanggan korporat, tiga tingkat 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": "Provinsi"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Penjualan",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "id-ID",
          "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

Analisis laba produk teknologi berdiskon tinggi: filter pesanan kategori teknologi dengan diskon lebih besar dari 0.5 dan bandingkan laba per wilayah

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": "Wilayah"
            }
          ],
          "measures": [
            {
              "field": "profit",
              "alias": "Laba",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "id-ID",
          "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

Perbandingan efisiensi pengiriman multiwilayah: gunakan in untuk memfilter Tiongkok Timur, Tiongkok Utara, dan Tiongkok Tengah-Selatan, lalu hitung pesanan menurut metode pengiriman

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": "Metode Pengiriman"
            }
          ],
          "measures": [
            {
              "field": "amount",
              "alias": "Jumlah Pesanan",
              "encoding": "xAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "id-ID",
          "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} />
}

Penjualan perlengkapan kantor atau furnitur di Tiongkok Timur: gunakan grup bersarang dengan AND untuk kondisi wilayah dan OR untuk kondisi kategori

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

filter not between: kecualikan penjualan antara 1000 sampai 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": "Kategori"
            }
          ],
          "measures": [
            {
              "field": "profit",
              "alias": "Laba",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "id-ID",
          "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

filter not between dengan leftOp/rightOp eksplisit untuk menguji fungsi 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": "Kategori"
            }
          ],
          "measures": [
            {
              "field": "profit",
              "alias": "Laba",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "id-ID",
          "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

Peringkat penjualan perlengkapan kantor menurut provinsi: filter kategori perlengkapan kantor lalu rangkum penjualan per provinsi

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": "Provinsi"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Penjualan",
              "encoding": "xAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "id-ID",
          "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

Perbandingan perlengkapan kantor dan teknologi: gunakan grup OR untuk memfilter dua kategori lalu bandingkan penjualan per wilayah

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

Hapus kondisi dari grup: grup OR bawaan berisi tiga kategori, lalu updateGroup menghapus salah satunya

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": "Wilayah"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Penjualan",
              "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": "id-ID",
          "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

Hapus filter menurut index: hapus filter kategori pertama dan sisakan kondisi wilayah

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": "Provinsi"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Penjualan",
              "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": "id-ID",
          "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

Ubah filter secara dinamis: perbarui filter provinsi dari Zhejiang ke Guangdong dan amati perubahan penjualan

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": "Kota"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Penjualan",
              "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": "id-ID",
          "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

Ubah logika grup: ganti grup kategori OR bawaan menjadi AND untuk mempersempit cakupan filter

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": "Wilayah"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Penjualan",
              "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": "id-ID",
          "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

Filter where dengan nilai array dan operator '=' dikonversi menjadi '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": "Wilayah"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Penjualan",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "id-ID",
          "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

Filter where dengan nilai array dan operator '!=' dikonversi menjadi '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": "Wilayah"
            }
          ],
          "measures": [
            {
              "field": "sales",
              "alias": "Penjualan",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "id-ID",
          "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