Luna Performance Monitor

Realtime counter used for displaying cpu, fps metrics.

Demo

https://luna.liriliri.io/?path=/story/performance-monitor

Install

Add the following script and style to your page.

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-performance-monitor/luna-performance-monitor.css" />
<script src="//cdn.jsdelivr.net/npm/luna-performance-monitor/luna-performance-monitor.js"></script>

You can also get it on npm.

npm install luna-performance-monitor --save

import 'luna-performance-monitor/luna-performance-monitor.css'
import LunaPerformanceMonitor from 'luna-performance-monitor'

Usage

const container = document.getElementById('container')
const memoryMonitor = new PerformanceMonitor(container, {
  title: 'Used JS heap size',
  unit: 'MB',
  color: '#614d82',
  smooth: false,
  data() {
    return (performance.memory.usedJSHeapSize / 1024 / 1024).toFixed(1)
  },
})
memoryMonitor.start()

Configuration

• color(string): Line color.
• data(Fn): Data source provider, a number should be returned.
• max(number): Maximum value.
• smooth(boolean): Smooth lines or not.
• title(string): Monitor title.
• unit(string): Unit of the value.

Api

start(): void

Start monitoring.

stop(): void

Stop monitoring.