Draw realtime chart on Vue3

Installation

npm

npm install @gesazumo/moving-chart

Recent Updates

The open source chart library is no longer used. Use canvas to draw a chart yourself. Thanks to this, the performance has improved.

Usage

Please put data that keeps being added in real time. The y array is uniformly cut from the front and shown on the screen by moving the x-axis. If the y array is empty, NoSignal will be displayed on the screen. The srate of streamBuffer represents the number of y-values per second.

The information about parseFuc will be updated later. Use ecgNormalization, plethNormalization, which is provided by default now.

template

<template>
   <div style="display: flex; flex-wrap: wrap; gap: 10px">
      <div>ECG</div>
      <canvas-chart
        :streamBuffer="streamBuffer.value.ECG1"
        :width="'16%'"
        :height="'13%'"
        :drawSpeed="0.38"
        :parseFuc="ecgNormalization"
      />
      <div>PLETH</div>
      <canvas-chart
        :streamBuffer="streamBuffer.value.PLETH"
        :width="'16%'"
        :height="'13%'"
        :parseFuc="plethNormalization"
        :drawSpeed="1.2"
        :lineColor="'red'"
      />
  </div>
</template>

script

<script setup lang="ts">
import { ref } from 'vue'
import { CanvasChart, useMinMaxFilter } from '@gesazumo/moving-chart'

const streamBuffer = ref({
  ECG1: { ts: [], y: [], srate: 0, name: 'ECG1' },
  PLETH: { ts: [], y: [], srate: 0, name: 'PLETH' },
})
</script>

props

const props = defineProps({
  streamBuffer: {
    type: Object as PropType<buffer>,
    require: true,
  },
  width: {
    type: [Number, String],
    required: true,
    default: 400,
  },
  height: {
    type: [Number, String],
    required: true,
    default: 200,
  },
  parseFuc: {
    type: Function as PropType<
      (arr: Array<number>, newMin: number, newMax: number) => Array<number>
    >,
    required: false,
  },
  lineColor: {
    type: String,
    default: '#00FF00',
  },
  drawSpeed: {
    type: Number,
    default: 0.4,
  },
  padding: {
    type: Array<number>,
    default: [0.4, 0.4]
  }
})

Monitoring visibilitychange event

If you turn over or minimize tabs in Chrome. The javascript sliding StreamBuffer is not working. Therefore, it is recommended to stop pushing to StreamBuffer for memory management. Here is the example code.

onMounted(() => {
    document.addEventListener('visibilitychange', () => {
      visibilityState.value = document.visibilityState === 'visible'
    })
  })

When received data from outside

// Do not push the stream buffer according to the visibility state.
if(!visibilityState.value) return
else streamBuffer.push(data)