2023-01-06 05:17:23 +00:00

1273 lines
32 KiB
HTML

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="A customizable cross-platform graphical process/system monitor for the terminal. Supports Linux, macOS, and Windows.">
<meta name="author" content="Clement Tsang">
<link rel="canonical" href="https://clementtsang.github.io/bottom/0.7.1/usage/widgets/cpu/">
<link rel="icon" href="../../../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.4.1, mkdocs-material-8.5.7">
<title>CPU Widget - bottom</title>
<link rel="stylesheet" href="../../../assets/stylesheets/main.20d9efc8.min.css">
<link rel="stylesheet" href="../../../assets/stylesheets/palette.cbb835fc.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="../../../stylesheets/extra.css">
<script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="" data-md-color-accent="">
<script>var palette=__md_get("__palette");if(palette&&"object"==typeof palette.color)for(var key of Object.keys(palette.color))document.body.setAttribute("data-md-color-"+key,palette.color[key])</script>
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#cpu-widget" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<div data-md-component="outdated" hidden>
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../../.." title="bottom" class="md-header__button md-logo" aria-label="bottom" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
bottom
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
CPU Widget
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="" data-md-color-accent="" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_2" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3 3.19.09m3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95 2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31Z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="" data-md-color-accent="" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_2">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5c-.84 0-1.65.15-2.39.42L12 2M3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29L3.34 7m.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14L3.36 17M20.65 7l-1.77 3.79a7.023 7.023 0 0 0-2.38-4.15l4.15.36m-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29L20.64 17M12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44L12 22Z"/></svg>
</label>
</form>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/ClementTsang/bottom" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
ClementTsang/bottom
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-tabs__inner md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../../.." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../../support/official/" class="md-tabs__link">
Support
</a>
</li>
<li class="md-tabs__item">
<a href="../../general-usage/" class="md-tabs__link md-tabs__link--active">
Usage
</a>
</li>
<li class="md-tabs__item">
<a href="../../../configuration/command-line-flags/" class="md-tabs__link">
Configuration
</a>
</li>
<li class="md-tabs__item">
<a href="../../../contribution/issues-and-pull-requests/" class="md-tabs__link">
Contribution
</a>
</li>
<li class="md-tabs__item">
<a href="../../../troubleshooting/" class="md-tabs__link">
Troubleshooting
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted md-nav--integrated" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../../.." title="bottom" class="md-nav__button md-logo" aria-label="bottom" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>
</a>
bottom
</label>
<div class="md-nav__source">
<a href="https://github.com/ClementTsang/bottom" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
ClementTsang/bottom
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../.." class="md-nav__link">
Home
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" checked>
<label class="md-nav__link" for="__nav_2">
Support
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Support" data-md-level="1">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Support
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../support/official/" class="md-nav__link">
Official Support
</a>
</li>
<li class="md-nav__item">
<a href="../../../support/unofficial/" class="md-nav__link">
Unofficial Support
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" checked>
<label class="md-nav__link" for="__nav_3">
Usage
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Usage" data-md-level="1">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Usage
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../general-usage/" class="md-nav__link">
General Usage
</a>
</li>
<li class="md-nav__item">
<a href="../../basic-mode/" class="md-nav__link">
Basic Mode
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3_3" type="checkbox" id="__nav_3_3" checked>
<label class="md-nav__link" for="__nav_3_3">
Widgets
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Widgets" data-md-level="2">
<label class="md-nav__title" for="__nav_3_3">
<span class="md-nav__icon md-icon"></span>
Widgets
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
CPU Widget
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
CPU Widget
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#features" class="md-nav__link">
Features
</a>
</li>
<li class="md-nav__item">
<a href="#key-bindings" class="md-nav__link">
Key bindings
</a>
<nav class="md-nav" aria-label="Key bindings">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#graph" class="md-nav__link">
Graph
</a>
</li>
<li class="md-nav__item">
<a href="#legend" class="md-nav__link">
Legend
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#mouse-bindings" class="md-nav__link">
Mouse bindings
</a>
<nav class="md-nav" aria-label="Mouse bindings">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#graph_1" class="md-nav__link">
Graph
</a>
</li>
<li class="md-nav__item">
<a href="#legend_1" class="md-nav__link">
Legend
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../memory/" class="md-nav__link">
Memory Widget
</a>
</li>
<li class="md-nav__item">
<a href="../network/" class="md-nav__link">
Network Widget
</a>
</li>
<li class="md-nav__item">
<a href="../process/" class="md-nav__link">
Process Widget
</a>
</li>
<li class="md-nav__item">
<a href="../disk/" class="md-nav__link">
Disk Widget
</a>
</li>
<li class="md-nav__item">
<a href="../temperature/" class="md-nav__link">
Temperature Widget
</a>
</li>
<li class="md-nav__item">
<a href="../battery/" class="md-nav__link">
Battery Widget
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
<label class="md-nav__link" for="__nav_4">
Configuration
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Configuration" data-md-level="1">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Configuration
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../configuration/command-line-flags/" class="md-nav__link">
Command-line Flags
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" data-md-toggle="__nav_4_2" type="checkbox" id="__nav_4_2" checked>
<label class="md-nav__link" for="__nav_4_2">
Config File
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Config File" data-md-level="2">
<label class="md-nav__title" for="__nav_4_2">
<span class="md-nav__icon md-icon"></span>
Config File
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../configuration/config-file/default-config/" class="md-nav__link">
Default Config
</a>
</li>
<li class="md-nav__item">
<a href="../../../configuration/config-file/flags/" class="md-nav__link">
Flags
</a>
</li>
<li class="md-nav__item">
<a href="../../../configuration/config-file/theming/" class="md-nav__link">
Theming
</a>
</li>
<li class="md-nav__item">
<a href="../../../configuration/config-file/layout/" class="md-nav__link">
Layout
</a>
</li>
<li class="md-nav__item">
<a href="../../../configuration/config-file/data-filtering/" class="md-nav__link">
Data Filtering
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" checked>
<label class="md-nav__link" for="__nav_5">
Contribution
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Contribution" data-md-level="1">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Contribution
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../contribution/issues-and-pull-requests/" class="md-nav__link">
Issues, Pull Requests, and Discussions
</a>
</li>
<li class="md-nav__item">
<a href="../../../contribution/documentation/" class="md-nav__link">
Documentation
</a>
</li>
<li class="md-nav__item">
<a href="../../../contribution/packaging-and-distribution/" class="md-nav__link">
Packaging and Distribution
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" data-md-toggle="__nav_5_4" type="checkbox" id="__nav_5_4" checked>
<label class="md-nav__link" for="__nav_5_4">
Development
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Development" data-md-level="2">
<label class="md-nav__title" for="__nav_5_4">
<span class="md-nav__icon md-icon"></span>
Development
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../contribution/development/dev_env/" class="md-nav__link">
Development Environment
</a>
</li>
<li class="md-nav__item">
<a href="../../../contribution/development/testing/" class="md-nav__link">
Testing
</a>
</li>
<li class="md-nav__item">
<a href="../../../contribution/development/logging/" class="md-nav__link">
Logging
</a>
</li>
<li class="md-nav__item">
<a href="../../../contribution/development/build_process/" class="md-nav__link">
Build Process
</a>
</li>
<li class="md-nav__item">
<a href="../../../contribution/development/deploy_process/" class="md-nav__link">
Deploy Process
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../../troubleshooting/" class="md-nav__link">
Troubleshooting
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<a href="https://github.com/ClementTsang/bottom/edit/master/docs/content/usage/widgets/cpu.md" title="Edit this page" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25Z"/></svg>
</a>
<h1 id="cpu-widget"><a class="toclink" href="#cpu-widget">CPU Widget</a></h1>
<p>The CPU widget displays a visual representation of CPU usage over a time range.</p>
<figure>
<img src="../../../assets/screenshots/cpu.webp" alt="A picture of an expanded CPU widget showing average CPU usage."/>
</figure>
<h2 id="features"><a class="toclink" href="#features">Features</a></h2>
<p>The CPU widget is composed of two parts: the graph and the legend:</p>
<ul>
<li>The graph displays the usage data for the currently selected entry as a percentage</li>
<li>The legend displays all available entries that can be displayed on the graph along with their last recorded use percentage (except for the "All" option)</li>
</ul>
<p>Users can scroll through the legend using either the keyboard or mouse to select which entry to display on the graph. The "All" option shows every entry
at the same time, though this may get a bit hard to follow if you have a large number of cores/threads.</p>
<p>One can also adjust the displayed time range through either the keyboard or mouse, with a range of 30s to 600s.</p>
<h2 id="key-bindings"><a class="toclink" href="#key-bindings">Key bindings</a></h2>
<p>Note that key bindings are generally case-sensitive.</p>
<h3 id="graph"><a class="toclink" href="#graph">Graph</a></h3>
<table>
<thead>
<tr>
<th>Binding</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="keys"><kbd class="key-plus">+</kbd></span></td>
<td>Zoom in on chart (decrease time range)</td>
</tr>
<tr>
<td><span class="keys"><kbd class="key-minus">-</kbd></span></td>
<td>Zoom out on chart (increase time range)</td>
</tr>
<tr>
<td><span class="keys"><kbd class="key-equal">=</kbd></span></td>
<td>Reset zoom</td>
</tr>
</tbody>
</table>
<h3 id="legend"><a class="toclink" href="#legend">Legend</a></h3>
<table>
<thead>
<tr>
<th>Binding</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="keys"><kbd class="key-arrow-up">Up</kbd></span> , <span class="keys"><kbd class="key-k">k</kbd></span></td>
<td>Move up within a widget</td>
</tr>
<tr>
<td><span class="keys"><kbd class="key-arrow-down">Down</kbd></span> , <span class="keys"><kbd class="key-j">j</kbd></span></td>
<td>Move down within a widget</td>
</tr>
<tr>
<td><span class="keys"><kbd class="key-g">g</kbd><span>+</span><kbd class="key-g">g</kbd></span> , <span class="keys"><kbd class="key-home">Home</kbd></span></td>
<td>Jump to the first entry in the legend</td>
</tr>
<tr>
<td><span class="keys"><kbd class="key-G">G</kbd></span> , <span class="keys"><kbd class="key-end">End</kbd></span></td>
<td>Jump to the last entry in the legend</td>
</tr>
</tbody>
</table>
<h2 id="mouse-bindings"><a class="toclink" href="#mouse-bindings">Mouse bindings</a></h2>
<h3 id="graph_1"><a class="toclink" href="#graph_1">Graph</a></h3>
<table>
<thead>
<tr>
<th>Binding</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="keys"><kbd>Scroll</kbd></span></td>
<td>Scrolling up or down zooms in or out of the graph respectively</td>
</tr>
</tbody>
</table>
<h3 id="legend_1"><a class="toclink" href="#legend_1">Legend</a></h3>
<table>
<thead>
<tr>
<th>Binding</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="keys"><kbd>Scroll</kbd></span></td>
<td>Scroll through options to display in the graph</td>
</tr>
<tr>
<td><span class="keys"><kbd class="key-left-button">Left Button</kbd></span></td>
<td>Selects a CPU thread/average to show in the graph</td>
</tr>
</tbody>
</table>
</article>
</div>
</div>
<a href="#" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg>
Back to top
</a>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="../../basic-mode/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Basic Mode" rel="prev">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</div>
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
Previous
</span>
Basic Mode
</div>
</div>
</a>
<a href="../memory/" class="md-footer__link md-footer__link--next" aria-label="Next: Memory Widget" rel="next">
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
Next
</span>
Memory Widget
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4Z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../../..", "features": ["navigation.tabs", "navigation.top", "navigation.expand", "navigation.instant", "navigation.sections", "toc.integrate", "search.suggest", "search.highlight"], "search": "../../../assets/javascripts/workers/search.16e2a7d4.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version.title": "Select version"}, "version": {"default": "stable", "provider": "mike"}}</script>
<script src="../../../assets/javascripts/bundle.8492ddcf.min.js"></script>
</body>
</html>