diff options
Diffstat (limited to 'users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/gpu.jsx')
| -rwxr-xr-x | users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/gpu.jsx | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/gpu.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/gpu.jsx new file mode 100755 index 0000000..6ac1dab --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/gpu.jsx | |||
| @@ -0,0 +1,128 @@ | |||
| 1 | import * as Uebersicht from "uebersicht"; | ||
| 2 | import * as DataWidget from "./data-widget.jsx"; | ||
| 3 | import * as DataWidgetLoader from "./data-widget-loader.jsx"; | ||
| 4 | import Graph from "./graph.jsx"; | ||
| 5 | import * as Icons from "../icons/icons.jsx"; | ||
| 6 | import useWidgetRefresh from "../../hooks/use-widget-refresh.js"; | ||
| 7 | import useServerSocket from "../../hooks/use-server-socket.js"; | ||
| 8 | import { useSimpleBarContext } from "../simple-bar-context.jsx"; | ||
| 9 | import * as Utils from "../../utils.js"; | ||
| 10 | |||
| 11 | export { gpuStyles as styles } from "../../styles/components/data/gpu.js"; | ||
| 12 | |||
| 13 | const { React } = Uebersicht; | ||
| 14 | |||
| 15 | const DEFAULT_REFRESH_FREQUENCY = 2000; | ||
| 16 | const GRAPH_LENGTH = 40; | ||
| 17 | |||
| 18 | /** | ||
| 19 | * GPU Widget component | ||
| 20 | * @returns {JSX.Element|null} The GPU widget component | ||
| 21 | */ | ||
| 22 | export const Widget = React.memo(() => { | ||
| 23 | const { displayIndex, settings } = useSimpleBarContext(); | ||
| 24 | const { widgets, gpuWidgetOptions } = settings; | ||
| 25 | const { gpuWidget } = widgets; | ||
| 26 | const { | ||
| 27 | refreshFrequency, | ||
| 28 | showOnDisplay, | ||
| 29 | displayAsGraph, | ||
| 30 | gpuMacmonBinaryPath, | ||
| 31 | showIcon, | ||
| 32 | } = gpuWidgetOptions; | ||
| 33 | |||
| 34 | const isDisabled = React.useRef(false); | ||
| 35 | |||
| 36 | // Calculate the refresh frequency for the widget | ||
| 37 | const refresh = React.useMemo( | ||
| 38 | () => | ||
| 39 | Utils.getRefreshFrequency(refreshFrequency, DEFAULT_REFRESH_FREQUENCY), | ||
| 40 | [refreshFrequency], | ||
| 41 | ); | ||
| 42 | |||
| 43 | // Determine if the widget should be visible | ||
| 44 | const visible = | ||
| 45 | Utils.isVisibleOnDisplay(displayIndex, showOnDisplay) && gpuWidget; | ||
| 46 | |||
| 47 | const [graph, setGraph] = React.useState([]); | ||
| 48 | const [state, setState] = React.useState(); | ||
| 49 | const [loading, setLoading] = React.useState(visible); | ||
| 50 | |||
| 51 | /** | ||
| 52 | * Reset the widget state | ||
| 53 | */ | ||
| 54 | const resetWidget = () => { | ||
| 55 | setState(undefined); | ||
| 56 | setLoading(false); | ||
| 57 | setGraph([]); | ||
| 58 | }; | ||
| 59 | |||
| 60 | /** | ||
| 61 | * Fetch GPU data and update the widget state | ||
| 62 | */ | ||
| 63 | const getGpu = React.useCallback(async () => { | ||
| 64 | if (!visible) return; | ||
| 65 | try { | ||
| 66 | const result = await Utils.cachedRun( | ||
| 67 | `${gpuMacmonBinaryPath} pipe -s 1`, | ||
| 68 | refresh, | ||
| 69 | ); | ||
| 70 | if (!visible || isDisabled.current) { | ||
| 71 | return; | ||
| 72 | } | ||
| 73 | const json = JSON.parse(result); | ||
| 74 | const { gpu_usage } = json; | ||
| 75 | const formattedUsage = { usage: Math.round(gpu_usage[1] * 100) }; | ||
| 76 | setState(formattedUsage); | ||
| 77 | if (displayAsGraph) { | ||
| 78 | Utils.addToGraphHistory(formattedUsage, setGraph, GRAPH_LENGTH); | ||
| 79 | } | ||
| 80 | setLoading(false); | ||
| 81 | } catch { | ||
| 82 | setTimeout(getGpu, 1000); | ||
| 83 | } | ||
| 84 | }, [displayAsGraph, gpuMacmonBinaryPath, visible, refresh]); | ||
| 85 | |||
| 86 | // Update the disabled state based on visibility | ||
| 87 | React.useEffect(() => { | ||
| 88 | isDisabled.current = !visible; | ||
| 89 | }, [visible]); | ||
| 90 | |||
| 91 | // Use server socket to fetch GPU data | ||
| 92 | useServerSocket("gpu", visible, getGpu, resetWidget, setLoading); | ||
| 93 | // Use widget refresh hook to periodically refresh the widget | ||
| 94 | useWidgetRefresh(visible, getGpu, refresh); | ||
| 95 | |||
| 96 | if (loading) return <DataWidgetLoader.Widget className="cpu" />; | ||
| 97 | if (!state) return null; | ||
| 98 | |||
| 99 | const { usage } = state; | ||
| 100 | |||
| 101 | if (displayAsGraph) { | ||
| 102 | return ( | ||
| 103 | <DataWidget.Widget classes="gpu gpu--graph" disableSlider> | ||
| 104 | <Graph | ||
| 105 | className="gpu__graph" | ||
| 106 | caption={{ | ||
| 107 | usage: { | ||
| 108 | value: `${usage}%`, | ||
| 109 | icon: showIcon ? Icons.CPU : null, | ||
| 110 | color: "var(--cyan)", | ||
| 111 | }, | ||
| 112 | }} | ||
| 113 | values={graph} | ||
| 114 | maxLength={GRAPH_LENGTH} | ||
| 115 | maxValue={100} | ||
| 116 | /> | ||
| 117 | </DataWidget.Widget> | ||
| 118 | ); | ||
| 119 | } | ||
| 120 | |||
| 121 | return ( | ||
| 122 | <DataWidget.Widget classes="cpu" Icon={showIcon ? Icons.CPU : null}> | ||
| 123 | <span className="cpu__usage">{usage}%</span> | ||
| 124 | </DataWidget.Widget> | ||
| 125 | ); | ||
| 126 | }); | ||
| 127 | |||
| 128 | Widget.displayName = "Gpu"; | ||
