Vue Data Uiが、Vue製ダッシュボードの決定版たりうる理由

はじめに

管理画面やダッシュボードを作っていると、「グラフを1つ入れたいだけなのに、チャートライブラリの選定と設定にまる1日溶けた」という経験はないでしょうか。Chart.jsやD3.jsは強力な反面、Vueのリアクティブなデータとうまく噛み合わせるにはラッパーの実装が必要になりがちです。

Vue Data Uiは、この「Vueとグラフライブラリの間の溝」をなくすために作られたVue 3専用のデータ可視化コンポーネント集です。ドーナツチャートから折れ線・棒グラフ、スパークライン、ヒートマップ、ワードクラウドまで、豊富な種類のチャートコンポーネントを<VueUiXxx />という形でそのままテンプレートに書けるのが最大の特徴です。

Vue Data Uiとは

Vue Data Uiは、"eloquent data storytelling"（雄弁なデータストーリーテリング）を掲げるオープンソースのVue 3コンポーネントライブラリです。開発元はgraphierosで、npmにはvue-data-uiとして公開されています。

ドーナツ・レーダー・XY（折れ線/棒/散布図）・ヒートマップ・ワードクラウド・ツリーマップといった本格的なチャートに加え、スパークラインなどのミニチャート、3Dバー、ダッシュボード構築用のユーティリティコンポーネントまで、非常に幅広いラインナップを1パッケージにまとめています。

主な特徴

• Vue専用設計 - すべてのコンポーネントがVue 3のコンポーネントとして提供されるため、v-bindやv-forと組み合わせて自然にリアクティブなグラフを作れます
• 豊富なチャート種別 - ドーナツ、XY（折れ線・棒・散布図の複合）、レーダー、ヒートマップ、ワードクラウド、ツリーマップなど多様な可視化表現をカバーします
• dataset / config の分離設計 - データそのものはdataset、見た目や挙動はconfigに分けて渡す設計になっており、どのコンポーネントも同じ考え方で扱えます
• ユニバーサルコンポーネント - <VueDataUi component="VueUiXy" />のように、componentpropでチャート種別を動的に切り替えられる仕組みも用意されています
• 豊富なカスタマイズ性 - スロットやフォーマッター、テーマ切り替えなど、見た目を細かく調整できるオプションが揃っています

インストール

npmやyarn、pnpmなど、お使いのパッケージマネージャーでインストールします。

npm install vue-data-ui

yarn add vue-data-ui

実際のプロジェクトで使う際は、コンポーネントに加えて共通スタイルシートも読み込んでおくのがおすすめです。

import { createApp } from 'vue'
import App from './App.vue'
import 'vue-data-ui/style.css'

createApp(App).mount('#app')

Vue Data Uiの基本的な使い方 - VueUiDonutでドーナツチャートを描く

まずは最もシンプルな例として、VueUiDonutでドーナツチャートを描いてみましょう。datasetにはname（系列名）とvalues（数値の配列）を持つオブジェクトを並べるだけです。骨格だけを抜き出すと、次のようになります。

<script setup>
import { VueUiDonut } from 'vue-data-ui'

const dataset = [
  { name: 'モバイル', values: [58], color: '#5f8bee' },
  { name: 'デスクトップ', values: [32], color: '#42d392' },
  { name: 'タブレット', values: [10], color: '#f7b955' },
]

const config = {
  style: {
    chart: {
      title: { text: 'デバイス別アクセス比率' },
      legend: { show: true },
    },
  },
}
</script>

<template>
  <VueUiDonut :dataset="dataset" :config="config" />
</template>

実際に動かして確かめられるのが下のサンプルです。datasetのvaluesを書き換えて、ドーナツの比率がその場で再計算される様子を見てみてください。

datasetを書き換えるだけでグラフが即座に再描画されるので、APIから取得したデータをそのままバインドする感覚で使えます。config.style.chart.title.textを変えればタイトル文言が変わり、datasetに系列を1件追加すればドーナツのセクションもそのまま1つ増えます。

実践的なユースケース

Vue Data UiのVueUiXyで折れ線・棒グラフを組み合わせた推移チャートを作る

売上や訪問数など、時系列データを可視化したい場面ではVueUiXyが便利です。1つのdatasetの中で系列ごとにtype（bar / line / plot）を指定できるため、棒グラフと折れ線グラフを1つのチャートに重ねて表示できます。要点だけを抜き出すと次のようになります。

<script setup>
import { VueUiXy } from 'vue-data-ui'

const dataset = [
  {
    name: '売上（万円）',
    type: 'bar',
    color: '#5f8bee',
    series: [120, 132, 101, 134, 90, 230],
  },
  {
    name: '目標（万円）',
    type: 'line',
    color: '#f76c6c',
    series: [110, 120, 115, 125, 120, 200],
  },
]

const config = {
  chart: { title: { text: '月次売上と目標の推移' } },
}
</script>

<template>
  <VueUiXy :dataset="dataset" :config="config" />
</template>

このように、系列ごとにtypeを切り替えられるのがVueUiXyの特徴です。実際に値を書き換えて動かせるのが下のサンプルになります。

棒グラフの系列と折れ線の系列を混在させられるので、「実績と目標を重ねて見せたい」といったダッシュボードによくある要件にそのまま対応できます。上のサンプルでseriesの数値を書き換えると棒や折れ線の高さがその場で変わり、系列オブジェクトのtypeを'line'から'bar'に変更すればその系列だけ棒グラフに切り替わります。

Vue Data UiのVueUiSparklineでカードに埋め込むミニ指標を作る

管理画面のKPIカードでは、数値の横に小さな推移グラフを添えたいことがよくあります。VueUiSparklineはperiodとvalueだけのシンプルなデータセットで、省スペースな推移表示を実現します。要点を抜き出すと次のとおりです。

<script setup>
import { VueUiSparkline } from 'vue-data-ui'

const dataset = [
  { period: '月', value: 820 },
  { period: '火', value: 932 },
  { period: '水', value: 901 },
  { period: '木', value: 934 },
]

const config = {
  type: 'line',
  style: {
    area: { show: true },
    line: { strokeWidth: 3, color: '#42d392' },
  },
}
</script>

<template>
  <VueUiSparkline :dataset="dataset" :config="config" />
</template>

実際にKPIカードへ埋め込んだ形で動かせるのが下のサンプルです。

チャート単体としてではなく、カードUIの一部品として埋め込みやすいのがスパークラインの強みです。上のサンプルではconfig.typeを'line'から'bar'に変えると棒スパークラインになり、style.area.showをfalseにすると塗りつぶしのない折れ線に変わります。

Vue Data UiのVueDataUiコンポーネントでチャート種別を動的に切り替える

「ユーザーが表示形式を選べるダッシュボード」を作りたい場合、チャートごとにv-ifを並べるのは冗長になりがちです。Vue Data Uiが提供するVueDataUiコンポーネントを使えば、componentpropに文字列でチャート名を渡すだけで表示するコンポーネントを切り替えられます。骨格は次のようになります。

<script setup>
import { ref } from 'vue'
import { VueDataUi } from 'vue-data-ui'

const chartType = ref('VueUiDonut')

const dataset = [
  { name: 'モバイル', values: [58], color: '#5f8bee' },
  { name: 'デスクトップ', values: [32], color: '#42d392' },
]
</script>

<template>
  <VueDataUi :component="chartType" :dataset="dataset" />
</template>

chartTypeという1つのrefを切り替えるだけで表示コンポーネントが変わる点が、VueDataUiならではの使い方です。実際にボタンで切り替えて動かせるのが下のサンプルになります。

同じdatasetの形を保てるチャート同士であれば、componentの値を切り替えるだけで表示形式を変えられます。設定パネル付きのダッシュボードを作る際に、コンポーネントの出し分けロジックをシンプルに保てるのが便利なポイントです。

まとめ

Vue Data Uiは、Vue 3のコンポーネントとしてそのまま使える豊富なチャート群を提供してくれるライブラリです。datasetとconfigという一貫した設計のおかげで、ドーナツチャートも折れ線グラフもスパークラインも同じ感覚で扱えるため、チャートライブラリごとにAPIを覚え直す必要がありません。

今回紹介した例はごく一部で、レーダーチャートやヒートマップ、ワードクラウド、3Dバーなど他にも多くのコンポーネントが用意されています。Vueでダッシュボードや管理画面を作る機会があれば、まずは公式ドキュメントのコンポーネント一覧を眺めてみることをおすすめします。

参考リンク

• Vue Data Ui公式ドキュメント
• Vue Data Ui GitHub
• vue-data-ui - npm