VisActor VBI
  • 简体中文

      • dashboard

      basic-dashboard

      通过 dashboard builder 组合 chart 与 insight 资源，生成基础仪表盘

      标签: basic

      Loading...
      import { createVBI, VBIChartBuilder, VBIInsightBuilder, VBIDashboardBuilder } from '@visactor/vbi'
import { JsonRender } from '@components'
import { useEffect, useState } from 'react'

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

  useEffect(() => {
    try {
      const LocalVBI = createVBI()
      const resources = {
        charts: {
          salesChart: LocalVBI.chart.create({
              "connectorId": "demoSupermarket",
              "chartType": "bar",
              "dimensions": [
                {
                  "field": "province",
                  "alias": "省份"
                }
              ],
              "measures": [
                {
                  "field": "sales",
                  "alias": "销售额",
                  "encoding": "xAxis",
                  "aggregate": {
                    "func": "sum"
                  }
                }
              ],
              "whereFilter": {
                "id": "root",
                "op": "and",
                "conditions": []
              },
              "havingFilter": {
                "id": "root",
                "op": "and",
                "conditions": []
              },
              "theme": "light",
              "locale": "zh-CN",
              "version": 1
            }),
        },
        insights: {
          salesInsight: LocalVBI.insight.create({
              "content": "华东区域销售额领先，建议继续跟进重点客户。",
              "version": 0
            }),
        },
      }
      const builder = LocalVBI.dashboard.create({
          "widgets": [],
          "breakpoints": {
            "xxl": 1600,
            "xl": 1200,
            "lg": 996,
            "md": 768,
            "sm": 480,
            "xs": 0
          },
          "layout": {
            "xxl": [],
            "xl": [],
            "lg": [],
            "md": [],
            "sm": [],
            "xs": []
          },
          "meta": {
            "title": "销售仪表盘",
            "theme": "light"
          },
          "version": 0
        })
      const applyBuilder = (builder: VBIDashboardBuilder, resources: any) => {
  builder.chart.add(chart => {
    chart
      .setChartId(resources.charts.salesChart)
      .setTitle('销售趋势')
      .setDescription('按省份汇总销售额')
      .setLayouts({
        lg: { x: 0, y: 0, w: 8, h: 6 },
        md: { x: 0, y: 0, w: 6, h: 5 }
      })
  })

  builder.insight.add(insight => {
    insight
      .setInsightId(resources.insights.salesInsight)
      .setTitle('关键洞察')
      .setLayouts({
        lg: { x: 8, y: 0, w: 4, h: 6 },
        md: { x: 0, y: 5, w: 6, h: 3 }
      })
  })
}
      applyBuilder(builder, resources)
      setResult(builder.build())
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err))
    }
  }, [])

  if (error) return <JsonRender value={{ error }} />
  if (!result) return <div>Loading...</div>

  return <JsonRender value={result} />
}

      responsive-dashboard-layout

      组合多个 chart 与 insight 资源，并为不同断点设置响应式 dashboard 布局

      标签: layout responsive resources

      Loading...
      import { createVBI, VBIChartBuilder, VBIInsightBuilder, VBIDashboardBuilder } from '@visactor/vbi'
import { JsonRender } from '@components'
import { useEffect, useState } from 'react'

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

  useEffect(() => {
    try {
      const LocalVBI = createVBI()
      const resources = {
        charts: {
          salesChart: LocalVBI.chart.create({
              "connectorId": "demoSupermarket",
              "chartType": "bar",
              "dimensions": [
                {
                  "field": "province",
                  "alias": "省份"
                }
              ],
              "measures": [
                {
                  "field": "sales",
                  "alias": "销售额",
                  "encoding": "xAxis",
                  "aggregate": {
                    "func": "sum"
                  }
                }
              ],
              "whereFilter": {
                "id": "root",
                "op": "and",
                "conditions": []
              },
              "havingFilter": {
                "id": "root",
                "op": "and",
                "conditions": []
              },
              "theme": "light",
              "locale": "zh-CN",
              "version": 1
            }),
          profitChart: LocalVBI.chart.create({
              "connectorId": "demoSupermarket",
              "chartType": "line",
              "dimensions": [
                {
                  "field": "order_date",
                  "alias": "订单月份",
                  "aggregate": {
                    "func": "toMonth"
                  }
                }
              ],
              "measures": [
                {
                  "field": "profit",
                  "alias": "利润",
                  "encoding": "yAxis",
                  "aggregate": {
                    "func": "sum"
                  }
                }
              ],
              "whereFilter": {
                "id": "root",
                "op": "and",
                "conditions": []
              },
              "havingFilter": {
                "id": "root",
                "op": "and",
                "conditions": []
              },
              "theme": "light",
              "locale": "zh-CN",
              "version": 1
            }),
        },
        insights: {
          opsInsight: LocalVBI.insight.create({
              "content": "销售额与利润趋势需要联合观察，低利润月份应进一步拆解品类结构。",
              "version": 0
            }),
        },
      }
      const builder = LocalVBI.dashboard.create({
          "widgets": [],
          "breakpoints": {
            "xxl": 1600,
            "xl": 1200,
            "lg": 996,
            "md": 768,
            "sm": 480,
            "xs": 0
          },
          "layout": {
            "xxl": [],
            "xl": [],
            "lg": [],
            "md": [],
            "sm": [],
            "xs": []
          },
          "meta": {
            "title": "经营看板",
            "theme": "dark"
          },
          "version": 0
        })
      const applyBuilder = (builder: VBIDashboardBuilder, resources: any) => {
  builder.chart.add(chart => {
    chart
      .setChartId(resources.charts.salesChart)
      .setTitle('区域销售')
      .setDescription('按省份汇总销售额')
      .setLayouts({
        lg: { x: 0, y: 0, w: 7, h: 5 },
        md: { x: 0, y: 0, w: 6, h: 4 },
        sm: { x: 0, y: 0, w: 4, h: 4 }
      })
  })

  builder.chart.add(chart => {
    chart
      .setChartId(resources.charts.profitChart)
      .setTitle('利润趋势')
      .setDescription('按月份汇总利润')
      .setLayouts({
        lg: { x: 7, y: 0, w: 5, h: 5 },
        md: { x: 0, y: 4, w: 6, h: 4 },
        sm: { x: 0, y: 4, w: 4, h: 4 }
      })
  })

  builder.insight.add(insight => {
    insight
      .setInsightId(resources.insights.opsInsight)
      .setTitle('经营洞察')
      .setDescription('销售与利润联动说明')
      .setLayouts({
        lg: { x: 0, y: 5, w: 12, h: 3 },
        md: { x: 0, y: 8, w: 6, h: 3 },
        sm: { x: 0, y: 8, w: 4, h: 3 }
      })
  })
}
      applyBuilder(builder, resources)
      setResult(builder.build())
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err))
    }
  }, [])

  if (error) return <JsonRender value={{ error }} />
  if (!result) return <div>Loading...</div>

  return <JsonRender value={result} />
}

      update-and-remove-dashboard-widgets

      新增多个 dashboard widget 后更新布局并移除临时图表

      标签: layout mutation

      Loading...
      import { createVBI, VBIChartBuilder, VBIInsightBuilder, VBIDashboardBuilder } from '@visactor/vbi'
import { JsonRender } from '@components'
import { useEffect, useState } from 'react'

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

  useEffect(() => {
    try {
      const LocalVBI = createVBI()
      const resources = {
        charts: {
        },
        insights: {
        },
      }
      const builder = LocalVBI.dashboard.create({
          "widgets": [],
          "breakpoints": {
            "xxl": 1600,
            "xl": 1200,
            "lg": 996,
            "md": 768,
            "sm": 480,
            "xs": 0
          },
          "layout": {
            "xxl": [],
            "xl": [],
            "lg": [],
            "md": [],
            "sm": [],
            "xs": []
          },
          "meta": {
            "title": "",
            "theme": "light"
          },
          "version": 0
        })
      const applyBuilder = (builder: VBIDashboardBuilder, _resources: any) => {
  builder.chart.add(chart => {
    chart.setTitle('临时图表').setLayouts({ lg: { x: 0, y: 0, w: 6, h: 4 } })
  })
  builder.insight.add(insight => {
    insight.setTitle('保留洞察').setLayouts({ lg: { x: 6, y: 0, w: 6, h: 4 } })
  })

  const [chartWidget] = builder.chart.toJSON()
  const [insightWidget] = builder.insight.toJSON()

  builder.chart.update(chartWidget.id, chart => {
    chart
      .setDescription('更新后移除')
      .setLayouts({ lg: { x: 0, y: 1, w: 5, h: 3 } })
  })
  builder.insight.update(insightWidget.id, insight => {
    insight.setDescription('仪表盘保留的洞察说明')
  })
  builder.chart.remove(chartWidget.id)
}
      applyBuilder(builder, resources)
      setResult(builder.build())
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err))
    }
  }, [])

  if (error) return <JsonRender value={{ error }} />
  if (!result) return <div>Loading...</div>

  return <JsonRender value={result} />
}