api-performance-counters-ui

UI to render the data format of jsonrpc-bidirectional/Plugins/Server/PerformanceCounters.js

It looks like this:

Installation:

npm i api-performance-counters-ui

(and, if you don't have a build system):

<!-- NEVER serve static content directly from node_modules! Just illustrating the file paths here. -->
<script src="/node_modules/google-palette/palette.js"></script>

<script src="/node_modules/chart.js/dist/Chart.bundle.min.js"></script>
<script src="/node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.min.js"></script>

<script src="/node_modules/api-performance-counters-ui/dist/browser/api-performance-counters-ui.js"></script>

<script>
	// The APIPerformanceCharts class is available globally on the window object.
	new APIPerformanceCharts();
</script>

`google-palette` is optional wether using a build system or not.
When using a build system it can be excluded from the build (Webpack externals) and all will work fine without it.

Usage

See APIPerformanceCharts.js for public methods, usage and customizable defaults (like translations).

// If not already on window, import or require.
const APIPerformanceCharts = require("api-performance-counters-ui").APIPerformanceCharts;


const apiPerformanceCharts = new APIPerformanceCharts(navigator.language);

document.body.appendChild(apiPerformanceCharts.container);


setInterval(
	async() => {
		const objAPIPerformanceCounters = await yourAPIClient.rpc("rpc.performanceCounters", []);

		apiPerformanceCharts.update(objAPIPerformanceCounters);
	}, 
	30 * 1000
);


// When the table isn't needed anymore, call the destructor to remove event listeners, references and remove the HTMLTable element from the DOM.
apiPerformanceCharts.destroy();