measures

add-measure

Thêm measure

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": "table",
          "dimensions": [],
          "measures": [],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.measures.add('sales', node => {
    node.setAlias('Doanh số ban đầu')
  })
  const measureId = builder.measures.find(node => node.getField() === 'sales')?.getId()
  if (measureId) {
    builder.measures.update(measureId, node => {
      node.setAlias('Doanh số').setAggregate({ func: 'sum' })
    })
  }
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

add-measure-encoding

Thêm measure và thiết lập encoding

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": "table",
          "dimensions": [],
          "measures": [],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.measures.add('sales', n => n.setAlias('Doanh số'))
  const measureId = builder.measures.find(node => node.getField() === 'sales')?.getId()
  if (measureId) {
    builder.measures.update(measureId, n => n.setEncoding('yAxis').setAggregate({ func: 'sum' }))
  }
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

measure-with-custom-and-auto-format

Định dạng measure: doanh số dùng định dạng tùy chỉnh đơn vị 10 nghìn (tiền tố ¥, hai chữ số thập phân), tỷ lệ lợi nhuận dùng tự động, chiết khấu dùng phần trăm

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": "table",
          "dimensions": [
            {
              "field": "product_type",
              "alias": "Danh mục"
            }
          ],
          "measures": [],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.measures
    .add('sales', node => {
      node.setAlias('Doanh số (10K)')
        .setAggregate({ func: 'sum' })
        .setEncoding('column')
        .setFormat({
          type: 'number',
          ratio: 10000,
          symbol: '10K',
          prefix: '¥',
          fractionDigits: 2
        });
    })
    .add('profit', node => {
      node.setAlias('Lợi nhuận')
        .setAggregate({ func: 'sum' })
        .setEncoding('column')
        .setFormat({ autoFormat: true });
    })
    .add('discount', node => {
      node.setAlias('Chiết khấu TB')
        .setAggregate({ func: 'avg' })
        .setEncoding('column')
        .setFormat({
          type: 'percent',
          fractionDigits: 1
        });
    });
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

remove-measure

Xóa measure

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": "table",
          "dimensions": [],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số",
              "aggregate": {
                "func": "sum"
              },
              "encoding": "yAxis"
            },
            {
              "field": "profit",
              "alias": "Lợi nhuận",
              "aggregate": {
                "func": "sum"
              },
              "encoding": "yAxis"
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  const measureId = builder.measures.toJSON().find(item => item.field === 'sales')?.id
  if (measureId) {
    builder.measures.update(measureId, n => n.setAlias('Doanh số cần xóa'))
    builder.measures.remove(measureId)
  }
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

update-measure

Cập nhật measure

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": "table",
          "dimensions": [],
          "measures": [
            {
              "field": "sales",
              "alias": "Doanh số ban đầu",
              "aggregate": {
                "func": "sum"
              },
              "encoding": "yAxis"
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "vi-VN",
          "version": 1,
          "limit": 20
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  const measureId = builder.measures.toJSON().find(item => item.field === 'sales')?.id
  if (measureId) {
    const measure = builder.measures.find((node) => node.getId() === measureId)
    if (measure) {
      measure.setAlias('Doanh số cần điều chỉnh').setEncoding('yAxis')
    }
    builder.measures.update(measureId, n => n.setAlias('Doanh số mới').setAggregate({ func: 'avg' }))
  }
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

#measures

#add-measure

#add-measure-encoding

#measure-with-custom-and-auto-format