Nuxt Plotly モジュール

📊 nuxt-plotly モジュールは、plotly.js の薄い Nuxt3 ラッパーです。

機能

🎇 plotly.js のすべてのメソッドとイベント
🗾 画面サイズ変更とプロパティ更新時の自動再描画
🚀 データリアクティブ性
🏝️ TypeScript サポート

クイックセットアップ

nuxt-plotly 依存関係をプロジェクトに追加します。

npx nuxi@latest module add nuxt-plotly

nuxt.config.ts の modules セクションに nuxt-plotly を追加します。

// nuxt.config.js
export default defineNuxtConfig({
  /**
   * Add nuxt-plotly module
   */
  modules: ["nuxt-plotly"],

  /**
   * Add nuxt-plotly module with options
   * Set the inject option to true to use plotly function via $plotly
   */
  // modules: [["nuxt-plotly", { inject: true }]],
});

nuxt.config.ts の vite.optimizeDeps.include セクションに plotly.js-dist-min を追加します。

// nuxt.config.js
export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      include: ["plotly.js-dist-min"],
    },
  },
});

これで完了です！Nuxt アプリで Nuxt Plotly モジュールを使用できます ✨

クライアントサイドでの必要性

Nuxt3 でクライアントサイドで nuxt-plotly モジュールを使用するには、2 つの方法があります。

<client-only> タグでコンポーネントをラップします。

<client-only>
  <nuxt-plotly
    :data="pieChart.data"
    :layout="pieChart.layout"
    :config="pieChart.config"
    style="width: 100%"
  ></nuxt-plotly>
</client-only>

.client.vue 拡張子を持つファイルを作成します（例: PieChart.client.vue）。その後、<client-only> タグなしでコンポーネントを使用できます。

Plotly イベントリスナー

@on-ready ディレクティブを使用して <nuxt-plotly> コンポーネントから PlotlyHTMLElement オブジェクトを受け取り、Plotly イベントにアクセスできます。

HTML テンプレート例

<template>
  <client-only>
    <nuxt-plotly
      :data="data"
      :layout="layout"
      :config="config"
      @on-ready="myChartOnReady"
    ></nuxt-plotly>
  </client-only>
</template>

PlotlyHTMLElement を受け取ったら、Plotly イベントにアクセスできます。

function myChartOnReady(plotlyHTMLElement: NuxtPlotlyHTMLElement) {
  console.log({ plotlyHTMLElement });

  plotlyHTMLElement.on?.("plotly_afterplot", function () {
    console.log("done plotting");
  });

  plotlyHTMLElement.on?.("plotly_click", function () {
    alert("You clicked this Plotly chart!");
  });
}

Plotly 関数

Nuxt プロジェクトで Plotly 関数を使用するには、次の手順に従います。

ステップ 1: nuxt.config.ts ファイルの nuxt-plotly モジュール設定で、inject オプションを true に設定します。

// nuxt.config.js
export default defineNuxtConfig({
  modules: [["nuxt-plotly", { inject: true }]],
});

ステップ 2: inject オプションを true に設定したら、Nuxt プロジェクトで $plotly を介して plotly 関数にアクセスできます。

// app.vue

const { $plotly } = useNuxtApp();

/**
 * Show all plotly functions
 */
console.log($plotly);

/**
 * Use downloadImage function
 */
$plotly.downloadImage(plotlyHTMLElement as HTMLElement, {
  format: "png",
  width: 800,
  height: 600,
  filename: "newplot",
});

型エイリアス

これらの型エイリアスは、Nuxt プロジェクトでの Plotly 型の使用を簡素化します。

/**
 * Represents an array of Plotly data objects.
 */
export type NuxtPlotlyData = Array<Plotly.Data>;

/**
 * Represents a partial configuration object for Plotly charts.
 */
export type NuxtPlotlyConfig = Partial<Plotly.Config>;

/**
 * Represents a partial layout object for Plotly charts.
 */
export type NuxtPlotlyLayout = Partial<Plotly.Layout>;

/**
 * Represents a partial HTML element that holds a rendered Plotly chart.
 */
export type NuxtPlotlyHTMLElement = Partial<Plotly.PlotlyHTMLElement>;

これらの型エイリアスを使用すると、Nuxt アプリケーションで Plotly のデータ、設定、レイアウト、HTML 要素を簡単に操作でき、インタラクティブなチャートや視覚化を作成する際のエクスペリエンスが向上します。

開発: 貢献したい場合

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

ライセンス

このプロジェクトは MIT ライセンスです。