Skip to main content

StatsPanel

from v9.3

StatsPanel renders a compact table from a Stats object from @probe.gl/stats.

Usage​

import {PanelBox, PanelManager, StatsPanel} from '@deck.gl-community/panels';
import {Stats} from '@probe.gl/stats';

const stats = new Stats({
  id: 'Tile cache',
  stats: [{name: 'Tiles In Cache'}, {name: 'Visible Tiles'}]
});

stats.get('Tiles In Cache').addCount(24);
stats.get('Visible Tiles').addCount(12);

const panel = new StatsPanel({
  id: 'tile-stats',
  title: 'Stats',
  stats,
  labels: {
    'Tiles In Cache': 'Total tiles in cache',
    'Visible Tiles': 'Visible tiles across views'
  }
});

const panelManager = new PanelManager({
  parentElement: document.getElementById('app') as HTMLElement
});

panelManager.setProps({
  components: [new PanelBox({id: 'stats-box', panel})]
});

Props​

type StatsPanelProps = {
  id: string;
  title: string;
  stats: Stats;
  statNames?: string[];
  labels?: Partial<Record<string, string>>;
  className?: string;
  theme?: 'inherit' | 'light' | 'dark' | 'invert';
};

See Also​

Remarks​

  • Renders one row per selected stat.
  • Uses the stat count value from stats.getTable().
  • Preserves probe.gl stat ordering unless statNames is provided.
  • Supports relabeling rows with the optional labels prop.