How to use stats - 10 common examples

const targetFPS = 1000 / 60; //60fps
const bunnySpeed = 10;

//PIXI
PixiCulling.renderArea.width = 100;
PixiCulling.renderArea.height = 100;
PixiCulling.cellSize.x = 50;
PixiCulling.cellSize.y = 50;

const app = new PIXI.Application({
    autoResize: true
});
app.stop(); // do custom render step
document.body.appendChild(app.view);

const stats = new Stats();
document.body.appendChild(stats.dom);

const container = new PIXI.Graphics();
app.stage.addChild(container);

let movingBunnies = [];


PIXI.loader.add('bunny', './assets/bunny.png').load((loader, resources) => {
    init();
});


const init = () => {
    const num = Math.sqrt(totalBunnies)

MapControls.create(sampleMapView);
        // end:vislib_hello_animation_example_2.ts

        // snippet:vislib_hello_animation_example_3.ts
        // Resize the mapView to maximum
        sampleMapView.resize(window.innerWidth, window.innerHeight);

        // React on resize events
        window.addEventListener("resize", () => {
            sampleMapView.resize(window.innerWidth, window.innerHeight);
        });
        // end:vislib_hello_animation_example_3.ts

        // snippet:vislib_hello_animation_example_6.ts
        const stats = new Stats();

        // Show plot with FPS, click in plot to cycle through other modes.
        stats.setMode(0); // 0: fps, 1: ms, 2: mb, 3+: custom

        stats.domElement.style.position = "absolute";
        stats.domElement.style.left = "0px";
        stats.domElement.style.top = "";
        stats.domElement.style.bottom = "0px";
        stats.domElement.style.zIndex = 10;

        document.body.appendChild(stats.domElement);

        sampleMapView.addEventListener(MapViewEventNames.Render, () => {
            stats.begin();
        });
        sampleMapView.addEventListener(MapViewEventNames.AfterRender, () => {

* ... And add the desired text to the [[TextCanvas]] using `addText` (also specifying where on the
 * screen through the text be added).
 *
 * ```typescript
 * [[include:textcanvas_minimal_3.ts]]
 * ```
 *
 * To finally get text on the scren, we can just call `render` on our [[TextCanvas]] object inside
 * a regular `three.js` animation loop:
 *
 * ```typescript
 * [[include:textcanvas_minimal_4.ts]]
 * ```
 */
export namespace TextCanvasMinimalExample {
    const stats = new Stats();
    let webglRenderer: THREE.WebGLRenderer;
    let camera: THREE.OrthographicCamera;

    let textCanvas: TextCanvas;
    let assetsLoaded: boolean = false;

    function onWindowResize() {
        webglRenderer.setSize(window.innerWidth, window.innerHeight);
        camera.left = -window.innerWidth / 2.0;
        camera.right = window.innerWidth / 2.0;
        camera.bottom = -window.innerHeight / 2.0;
        camera.top = window.innerHeight / 2.0;
        camera.updateProjectionMatrix();
    }

    // snippet:textcanvas_minimal_4.ts

// tslint:disable-next-line:no-var-requires
const Stats = require("stats.js");
import * as THREE from "three";

import { FontCatalog, FontUnit, TextCanvas, TextRenderStyle } from "@here/harp-text-canvas";

/**
 * This example showcases how [[TextCanvas]] can handle picking the different strings of text added
 * to it.
 *
 * For more information regarding basic [[TextCanvas]] initialization and usage, please check:
 * [[TextCanvasMinimalExample]] documentation.
 */
export namespace TextCanvasPickingExample {
    const stats = new Stats();
    let webglRenderer: THREE.WebGLRenderer;
    let camera: THREE.OrthographicCamera;

    let textCanvas: TextCanvas;
    let assetsLoaded: boolean = false;

    let textSample = "black";
    const textPosition = new THREE.Vector3();
    let textRenderStyle: TextRenderStyle;

    function onWindowResize() {
        webglRenderer.setSize(window.innerWidth, window.innerHeight);

        camera.left = -window.innerWidth / 2.0;
        camera.right = window.innerWidth / 2.0;
        camera.bottom = -window.innerHeight / 2.0;

componentDidMount() {
    this.stats = [new Stats(), new Stats(), new Stats()]

    this.stats[0].showPanel(0) // cpu
    this.stats[1].showPanel(1) // frame ms
    this.stats[2].showPanel(2) // mem

    this.rafHandle = requestAnimationFrame(this.update)
    this.stats.forEach((stats, i) => {
      if (!this.ref) return

      stats.dom.style.top = `${i * 48}px`
      this.ref.appendChild(stats.dom)
    })
  }

function init() {

    if(settings.useStats) {
        _stats = new Stats();
        css(_stats.domElement, {
            position : 'absolute',
            left : '0px',
            top : '0px',
            zIndex : 2048
        });

        document.body.appendChild( _stats.domElement );
    }

    _renderer = new THREE.WebGLRenderer({
        premultipliedAlpha : false,
    });
    fboHelper.init(_renderer);

    _renderer.setClearColor(0x0f1010);

module.exports = function() {
  try {
    const stats = new Stats();
    stats.domElement.style.cssText = 'position:fixed;right:0;bottom:100px;z-index:10000';
    document.body.appendChild(stats.domElement);
    const loop = function() {
      stats.update();
      window.requestAnimationFrame(loop);
    };
    window.requestAnimationFrame(loop);
  } catch (e) {
    console.warn('Stats.js could not be loaded.');
  }
};

initStats() {
    this.stats = new Stats();
    this.stats.showPanel(0);
    const $stats = this.stats.dom;
    $stats.style.position = 'absolute';
    $stats.style.left = '0px';
    $stats.style.top = '0px';
    document.getElementById('stats').appendChild($stats);
  }

private initStats() {
        this.stats = new Stats();
        this.stats.showPanel(0);
        const $stats = this.stats.dom;
        $stats.style.position = 'absolute';
        $stats.style.left = '0px';
        $stats.style.top = '0px';
        document.body.appendChild($stats);
    }

constructor() {
        super();
        this.state = {aspectRatio: 1920 / 1080, width: 640, height: 480, scaleFactor: 0.5, inFullscreen: false}; 
        this.height = 500;
        
        
        this.userFactor = 1; 
        this.stats = new Stats();
        this.stats.showPanel( 0 );
        this.canvasRef = React.createRef();
        this.canvasRef2 = React.createRef();
        
        this.containerRef = React.createRef();
    }
    begin = () => this.stats.begin();