Draw realtime chart on Vue3

Installation

$3

`` bash
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.

$3


` html

`

$3

` javascript

`

props

` javascript
const props = defineProps({
streamBuffer: {
type: Object as PropType,
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, newMin: number, newMax: number) => Array
>,
required: false,
},
lineColor: {
type: String,
default: '#00FF00',
},
drawSpeed: {
type: Number,
default: 0.4,
},
padding: {
type: Array,
default: [0.4, 0.4]
}
})
`
------


$3

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.

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

When received data from outside

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