-
Notifications
You must be signed in to change notification settings - Fork 0
/
cpu.jsx
66 lines (58 loc) · 1.85 KB
/
cpu.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { run } from 'uebersicht';
import { clickEffect } from './lib/js/utils.js'
import config from './lib/config.js'
// Refresh once every 15 seconds.
const refreshFrequency = 15000;
const initialState = {
used: '0',
color: '#b6b6b6'
};
const command = `${config.shell} ./yabar/lib/sh/cpu.sh`;
const updateState = (event, previousState) => {
return {
used: event.output,
color: event.output >= 80
? '#9e7275'
: '#b6b6b6'
};
};
const render = output => {
const onClick = e => {
clickEffect(e);
run("open -a 'Activity Monitor'");
};
return (
<section onClick={onClick}>
<div className='outer'>
<div className='inner' style={{
width: `${output.used}%`,
backgroundColor: output.color
}}></div>
</div>
</section>
);
};
const className = {
top: '0px', // Absolute position.
right: '58px',
borderLeft: '1px solid #1c1c1c', // Black separator.
padding: '8px 12px 6px 12px', // Roughly center the widget contents.
fontFamily: 'CozetteVector', // Font family and sizing.
fontSize: '10px',
lineHeight: '10px', // Line height to keep border and centering consistent.
color: '#b6b6b6', // Text color.
'& .outer': {
display: 'inline-block', // Display the outer box in-line rather than below.
boxSizing: 'border-box', // Include the padding and border in the total width/height of the outer box.
marginLeft: '8px', // Spacing between the outer box and the text.
width: '20px', // Static width and height of the outer box.
height: '7px',
border: '1px solid #565656', // Thin grey border to mark outer box.
padding: '2px', // Pad to place the inner bar directly inside.
'& .inner': {
height: '1px' // 1px fills the outer box without clipping.
}
}
};
export { refreshFrequency, initialState, command, updateState, render, className };