StatsWidget (Experimental)
Displays performance and debugging statistics from deck.gl, luma.gl, or custom probe.gl stats objects in a collapsible widget.
- JavaScript
- TypeScript
- React
import {Deck} from '@deck.gl/core';
import {_StatsWidget as StatsWidget} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';
new Deck({
widgets: [
new StatsWidget({defaultIsExpanded: true})
]
});
import {Deck} from '@deck.gl/core';
import {_StatsWidget as StatsWidget} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';
new Deck({
widgets: [
new StatsWidget({defaultIsExpanded: true})
]
});
import React from 'react';
import DeckGL, {_StatsWidget as StatsWidget} from '@deck.gl/react';
import '@deck.gl/widgets/stylesheet.css';
function App() {
return (
<DeckGL>
<StatsWidget defaultIsExpanded />
</DeckGL>
);
}
Installation
npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/widgets
import {_StatsWidget as StatsWidget, type StatsWidgetProps} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';
new StatsWidget({} satisfies StatsWidgetProps);
To use pre-bundled scripts:
<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
<link href="https://unpkg.com/deck.gl@^9.0.0/dist/stylesheet.css" rel='stylesheet' />
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist.min.js"></script>
<link href="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist/stylesheet.css" rel='stylesheet' />
new deck._StatsWidget({});
Types
StatsWidgetProps
The StatsWidget accepts the generic WidgetProps and:
type (string, optional)
Type of stats to display. One of 'deck', 'luma', 'device', or 'custom'.
- Default:
'deck'
stats (Stats, optional)
A Stats instance to display when using type: 'custom'.
title (string, optional)
Title shown in the widget header.
- Default:
'Stats'
defaultIsExpanded (boolean, optional)
If true, the UI is expanded at start.
- Default:
false
framesPerUpdate (number, optional)
Number of frames to wait between refresh.
- Default:
1
formatters (object, optional)
Custom formatters for stat values.
resetOnUpdate (object, optional)
Whether to reset particular stats after each update.
Built-in Formatters
'count'- Display raw count value'averageTime'- Format as average time in ms/s'totalTime'- Format as total time in ms/s'fps'- Format as frames per second'memory'- Format as memory in MB
Behavior
- Click the header to expand/collapse the stats display
- Stats are automatically updated based on
framesPerUpdate - Different stat types provide access to various performance metrics:
'deck': deck.gl rendering statistics'luma': luma.gl WebGL statistics'device': GPU device statistics'custom': User-provided stats object