今回は Vue3 + nuxt3 + TypeScript でグラフと動画の再生位置を連動するプログラムに挑戦します！

<template>
  <div>
    <!-- グラフ表示 -->
    <div ref="chartContainer"></div>

    <!-- 動画表示 -->
    <div class="video-wrapper">
      <video ref="videoPlayer" controls width="640" height="360"></video>
    </div>
  </div>
</template>

<script setup lang="ts">
import 'c3/c3.min.css';
import Hls from "hls.js";

const chartContainer = ref<HTMLDivElement | null>(null);
const videoPlayer = ref<HTMLVideoElement | null>(null);

const videoSrc = "/sample.m3u8"; // public 配下 or 外部URL

onMounted(async () => {
  // c3 をクライアントでのみ動的 import
  const c3 = await import("c3");

  // データ作成 (0〜600秒まで60秒刻み)
  const timePoints = Array.from({ length: 21 }, (_, i) => i * 30); // [0,30,60,...,300]
  const salesData = timePoints.map(() => Math.floor(Math.random() * 500) + 50); // 50〜550
  const trendData = timePoints.map(() => Math.floor(Math.random() * 100) + 10); // 10〜110

  const chart = c3.generate({
    bindto: chartContainer.value!,
    size: {
      width: 700,   // グラフの幅
      height: 200,  // グラフの高さ
    },
    data: {
      x: "x",
      columns: [
        ["x", ...timePoints],
        ["sales", ...salesData],
        ["trend", ...trendData],
      ],
      types: {
        sales: "bar",
        trend: "line",
      },
      onclick: (d: any) => {
        if (videoPlayer.value) {
          videoPlayer.value.currentTime = d.x; // クリック位置にシーク
          videoPlayer.value.play();
        }
      },
    },
    axis: {
      x: {
        label: "時間 (秒)",
        tick: { values: timePoints },
      },
      y: { label: "値" },
    },
    bar: {
      width: { ratio: 0.8 },
    },
    tooltip: {
      grouped: true,
    },
    legend: {
      position: "right",
    },
    color: {
      pattern: ["#4dabf7", "#f59f00"], // 青とオレンジで見やすく
    },
  });

  // HLS.js のセットアップ
  if (videoPlayer.value) {
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(videoSrc);
      hls.attachMedia(videoPlayer.value);
    } else if (videoPlayer.value.canPlayType("application/vnd.apple.mpegurl")) {
      videoPlayer.value.src = videoSrc;
    }
  }
});
</script>

<style scoped>
.video-wrapper {
  margin-top: 20px;
}
</style>

<template>
  <div class="page">
    <h1>複合グラフ + HLS動画</h1>
    <ChartWithVideo />
  </div>
</template>

<script setup lang="ts">
// 先ほどのコンポーネントをインポート
import ChartWithVideo from "~/components/ChartWithVideo.vue";
</script>

<style scoped>
.page {
  padding: 20px;
}
</style>