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": "ko-KR",
              "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": "ko-KR",
              "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": "ko-KR",
              "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} />
}