VisActor VBI
  • Deutsch

      • dimensions

      add-date-dimension-year

      Datumsdimension mit Jahresaggregation hinzufügen

      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": "table",
          "dimensions": [],
          "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.dimensions.add('order_date', node => {
    node.setAlias('Bestelldatum')
  })
  const dimensionId = builder.dimensions.find(node => node.getField() === 'order_date')?.getId()
  if (dimensionId) {
    builder.dimensions.update(dimensionId, node => {
      node.setAlias('Jahr').setAggregate({ func: 'toYear' })
    })
  }
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

      add-dimension

      Dimension hinzufügen

      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": "table",
          "dimensions": [],
          "measures": [],
          "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.dimensions.add('product_type', node => {
    node.setAlias('Warentyp')
  })
  const dimensionId = builder.dimensions.find(node => node.getField() === 'product_type')?.getId()
  if (dimensionId) {
    builder.dimensions.update(dimensionId, node => {
      node.setAlias('Produkttyp')
    })
  }
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

      add-multiple-dimensions

      Mehrere Dimensionen hinzufügen (verkettete Aufrufe)

      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": "table",
          "dimensions": [],
          "measures": [],
          "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.dimensions.add('product_type', n => n.setAlias('Produkttyp')).add('province', n => n.setAlias('Bundesland')); }
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

      mixed-date-and-normal-dimensions

      Gemischte Gruppierung mit normaler Dimension und quartalsaggregierter Datumsdimension

      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": "table",
          "dimensions": [],
          "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.dimensions
    .add('area', node => {
      node.setAlias('Region')
    })
    .add('order_date', node => {
      node.setAlias('Quartal').setAggregate({ func: 'toQuarter' })
    })
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

      remove-dimension

      Dimension 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": "table",
          "dimensions": [
            {
              "field": "product_type",
              "alias": "Produkttyp"
            },
            {
              "field": "province",
              "alias": "Bundesland"
            }
          ],
          "measures": [],
          "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) => {
  const dimensionId = builder.dimensions.toJSON().find(item => item.field === 'product_type')?.id
  if (dimensionId) {
    builder.dimensions.update(dimensionId, node => {
      node.setAlias('Zu entfernender Produkttyp')
    })
    builder.dimensions.remove(dimensionId)
  }
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

      update-date-dimension-month

      Bestehende Datumsdimension auf Monatsaggregation 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": "table",
          "dimensions": [
            {
              "field": "order_date",
              "alias": "Ursprüngliches Bestelldatum"
            }
          ],
          "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) => {
  const dimensionId = builder.dimensions.toJSON().find(item => item.field === 'order_date')?.id
  if (dimensionId) {
    const dimension = builder.dimensions.find((node) => node.getId() === dimensionId)
    if (dimension) {
      dimension.setAlias('Anzupassendes Bestelldatum')
    }
    builder.dimensions.update(dimensionId, node => {
      node.setAlias('Monat').setAggregate({ func: 'toMonth' })
    })
  }
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}

      update-dimension

      Dimension 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": "table",
          "dimensions": [
            {
              "field": "product_type",
              "alias": "Ursprünglicher Produkttyp"
            }
          ],
          "measures": [],
          "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) => {
  const dimensionId = builder.dimensions.toJSON().find(item => item.field === 'product_type')?.id
  if (dimensionId) {
    const dimension = builder.dimensions.find((node) => node.getId() === dimensionId)
    if (dimension) {
      dimension.setAlias('Anzupassender Produkttyp')
    }
    builder.dimensions.update(dimensionId, n => n.setAlias('Neuer Produkttyp'))
  }
}
      applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

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

  return <VSeedRender vseed={result} />
}