TWSNMP FC:グラフ表示で更に悩む　３日目

今朝も４時に猫に起こされました。もうちょっと寝ていたかったのですが、容赦なしです。私が起きてストーブをつけるのを見た後、猫はかみさんの布団に潜って寝てしましました。
昨日はechartsを使ってTWSNMP FCのグラフを表示することに決めたので、今日からは単に組み込むだけと思っていました。しかし、更に考えることが待っていました。Nuxt(Vue)のコンポーネントで作るか？プラグインで作るか？です。最初、コンポーネントで作ってみました。コンポーネントへのデータの受け渡し方法は、

を参考にして作りました。
こんな感じです。

<template>
 <div id="logCountChart"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
 props: {
   chartData: {
     type: Array,
     required: true,
   },
 },
 data: () => {
   return {
     chart: null,
   }
 },
 watch: {
   chartData: (newVal, oldVal) => {
     console.log(newVal, oldVal)
     this.chart.setOption({
       series: [
         {
           data: newVal,
         },
       ],
     })
     this.chart.resize()
   },
 },
 mounted() {
   this.chart = echarts.init(document.getElementById('logCountChart'))
   const option = {
     title: {
       show: false,
     },
     // ※一部省略
     series: [
       {
         type: 'bar',
         color: '#1f78b4',
         large: true,
         data: [],
       },
     ],
   }
   this.chart.setOption(option)
 },
}
</script>

<style>
#logCountChart {
 width: 100%;
 height: 200px;
}
</style>

何となく、うまくグラフが表示できたのですが、データを更新した時にグラフを再描画する方法が見つかりません。２時間の作業を捨てて、プラグインで作る方法を試してみました。P5.jsでマップ表示を作った時の学習が役にたちました。作ったプラグインは、

import * as echarts from 'echarts'

let chart

const makeLogCountChart = (div) => {
 chart = echarts.init(document.getElementById(div))
 const option = {
   title: {
     show: false,
   },
   backgroundColor: new echarts.graphic.RadialGradient(0.5, 0.5, 0.4, [
     {
       offset: 0,
       color: '#4b5769',
     },
     {
       offset: 1,
       color: '#404a59',
     },
   ]),
   tooltip: {
     trigger: 'axis',
     formatter: (params) => {
       const p = params[0]
       return p.name + ' : ' + p.value[1]
     },
     axisPointer: {
       type: 'shadow',
     },
   },
   grid: {
     left: '5%',
     right: '5%',
     top: 40,
     buttom: 0,
   },
   xAxis: {
     type: 'time',
     name: '日時',
     axisLabel: {
       color: '#ccc',
       fontSize: '8px',
       formatter: (value, index) => {
         const date = new Date(value)
         return echarts.format.formatTime('MM/dd hh:mm', date)
       },
     },
     nameTextStyle: {
       color: '#ccc',
       fontSize: 10,
       margin: 2,
     },
     axisLine: {
       lineStyle: {
         color: '#ccc',
       },
     },
     splitLine: {
       show: false,
     },
   },
   yAxis: {
     type: 'value',
     name: '件数',
     nameTextStyle: {
       color: '#ccc',
       fontSize: 10,
       margin: 2,
     },
     axisLine: {
       lineStyle: {
         color: '#ccc',
       },
     },
     axisLabel: {
       color: '#ccc',
       fontSize: 8,
       margin: 2,
     },
   },
   series: [
     {
       type: 'bar',
       color: '#1f78b4',
       large: true,
       data: [],
     },
   ],
 }
 chart.setOption(option)
 chart.resize()
}

const showLogCountChart = (logs) => {
 const data = []
 let count = 0
 let ctm
 logs.forEach((e) => {
   if (!ctm) {
     ctm = Math.floor(e.Time / (1000 * 1000 * 1000 * 60))
     count++
     return
   }
   const newCtm = Math.floor(e.Time / (1000 * 1000 * 1000 * 60))
   if (ctm !== newCtm) {
     let t = new Date(ctm * 60 * 1000)
     data.push({
       name: echarts.format.formatTime('yyyy/MM/dd hh:mm:ss', t),
       value: [t, count],
     })
     for (; ctm < newCtm; ctm++) {
       t = new Date(ctm * 60 * 1000)
       data.push({
         name: echarts.format.formatTime('yyyy/MM/dd hh:mm:ss', t),
         value: [t, 0],
       })
     }
     count = 0
   }
   count++
 })
 chart.setOption({
   series: [
     {
       data,
     },
   ],
 })
 chart.resize()
}

export default (context, inject) => {
 inject('makeLogCountChart', makeLogCountChart)
 inject('showLogCountChart', showLogCountChart)
}

使う側vueファイルのテンプレートに、

      <div id="logCountChart" style="width: 100%; height: 200px"></div>

のように書いて、スクリプトに

  mounted() {
   this.$makeLogCountChart('logCountChart')
   this.$showLogCountChart(this.logs)
 },

のように書けば、

のように表示できました。嬉しい！

これで、グラフ表示の悩みは全て解決だと思います。ついでに、ログのテーブル表示の列幅の悩みも解決できました。

      headers: [
       { text: '状態', value: 'Level', width: '10%' },
       { text: '発生日時', value: 'TimeStr', width: '15%' },
       { text: '種別', value: 'Type', width: '10%' },
       { text: '関連ノード', value: 'NodeName', width: '15%' },
       { text: 'イベント', value: 'Event', width: '50%' },
     ],

のように、widthを割合で設定すれば、いい感じになりました。

テーブルとグラフを表示するパターンのページの作り方が確立したので、明日からページの量産に入りたいと思っています。
明日に続く。​