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": "ja-JP",
              "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": "ja-JP",
              "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": "ja-JP",
              "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} />
}