デモで学ぶ業務アプリのUI開発（4） – サービス監視ダッシュボード

<template>
  <div class="cpu-usage">
    <div class="card__title">CPU使用率</div>

    <wj-radial-gauge
      class="gauge"
      :initialized="onGaugeInit"
      :thickness="0.2"
      :start-angle="-20"
      :sweep-angle="220"
      :min="0"
      :max="1"
      :value="lastCpuUsage / 100"
      :is-read-only="true"
      format="p2"
    >
      <!-- ポインター（現在の値） -->
      <wj-range wj-property="pointer" :thickness="0.2" color="black"></wj-range>
      <!-- ゲージ領域を3色に分割 -->
      <wj-range name="low" :min="0.0" :max="0.8" :color="greenStyle.stroke"></wj-range>
      <wj-range name="high" :min="0.8" :max="0.9" :color="orangeStyle.stroke"></wj-range>
      <wj-range name="top" :min="0.9" :max="1.0" :color="redStyle.stroke"></wj-range>
    </wj-radial-gauge>
  </div>
</template>
・・・

・・・
    <wj-radial-gauge
      class="gauge"
      ・・・
      format="n1"
      :get-text="(g: Gauge, part: string, v: number, t: string) => `${t}ms`"
    >
・・・

・・・
  <wj-radial-gauge
    class="gauge"
    :initialized="onGaugeInit"
    ・・・
  >
・・・

・・・
export const onGaugeInit = (ctrl: RadialGauge) => {
  const tt = new Tooltip({ showDelay: 0, hideDelay: 0 })
  const el = ctrl.hostElement
  tt.setTooltip(
    el,
    `<div>正常: ${getRangeText(ctrl, 0)}</div><div>注意: ${getRangeText(ctrl, 1)}</div><div>危険: ${getRangeText(ctrl, 2)}</div>`,
    PopupPosition.Below,
  )
}
・・・

・・・
const getRangeText = (ctrl: RadialGauge, i: number) => {
  const range = ctrl.ranges[i]

  // getText があれば必ずそれを使う
  const minText = ctrl.getText
    ? ctrl.getText(ctrl, '', range.min, Globalize.format(range.min, ctrl.format))
    : Globalize.format(range.min, ctrl.format)

  const maxText = ctrl.getText
    ? ctrl.getText(ctrl, '', range.max, Globalize.format(range.max, ctrl.format))
    : Globalize.format(range.max, ctrl.format)

  return `<span style="color:${range.color};">${minText} ~ ${maxText}</span>`
}
・・・

<template>
  <div class="insession-latency-chart">
    <div class="card__title">セッション中遅延</div>

    <div class="card__chart">
      <wj-flex-chart
        :items-source="data"
        binding-x="t"
        :chart-type="ChartType.Line"
        :tooltip-content="tooltipContent"
      >
        <wj-flex-chart-legend :position="Position.Bottom" />

        <wj-flex-chart-axis
          wj-property="axisX"
          :major-unit="term !== TermType.Day ? 1 : 1 / 24"
          :major-grid="false"
          :format="term !== TermType.Day ? DATE_FORMAT : TIME_FORMAT"
        />

        <wj-flex-chart-axis
          wj-property="axisY"
          title="ミリ秒(ms)"
          :min="min"
          :max="max"
          :major-unit="5"
          :major-grid="true"
          format="n1"
        />
        <!-- ①異常検出バンド（レンジエリア）-->
        <wj-flex-chart-series
          name="異常検出バンド"
          binding="bandLo,bandHi"
          :chart-type="ChartType.Area"
          :style="bandStyle"
        />
        <!-- 実測（折れ線） -->
        <wj-flex-chart-series name="セッション中遅延（正常）" binding="in" :style="greenStyle" />
        <!-- ②バンド外：赤 -->
        <wj-flex-chart-series name="セッション中遅延（異常）" binding="out" :style="redStyle" />
      </wj-flex-chart>
    </div>
  </div>
</template>
・・・

・・・
      <wj-flex-chart
        :items-source="data"
        binding-x="t"
        :chart-type="ChartType.Line"
        :tooltip-content="tooltipContent"
      >
・・・

・・・
/**
 * ツールチップをカスタム表示するロジック。異常検出バンドは上限と下限を表示する
 */
export const tooltipContent = (ht: HitTestInfo): string => {
  if (!ht.series) return ''

  const series = ht.series
  const color = series.style.fill
  const title = series.chart.axisY.title
  const t = ht.item?.t as Date
  const item = ht.item
  return `
    <div>
      <div style="font-weight:600;">${series.name}</div>
      <div>${t.toLocaleString()}</div>
      <div>
        <span style="color:${color}; font-weight:600;">
          ${
            series.binding !== 'bandLo,bandHi'
              ? Globalize.format(item[series.binding], series.chart.axisY.format)
              : Globalize.format(item.bandLo, series.chart.axisY.format) +
                '~' +
                Globalize.format(item.bandHi, series.chart.axisY.format)
          } ${title}
        </span>
      </div>
    </div>
  `
}
・・・