feat(cpu widget): allow user to switch (default) processor core view

Using the new CPU_CORES_TOGGLE_MODE env option the user is now able to specify which Processor
core view it want to see. The available options are 'toggle', 'multi-core' and 'average'. The
'toggle' option is default and has the same functionality/effect as before. The 'multi-core' option
and 'average' option switches to the corresponding view while hiding the toggle.

apps/docs/docs/config/widget-specific/processor.md

@@ -39,3 +39,12 @@ Read the Processor load every x milliseconds.
 
 - type: `number`
 - default: `1000`
+
+## `DASHDOT_CPU_SHOW_ALL_CORES`
+
+Switches the Processor core view depending on the selected option. The `toggle` option allows you to switch the view from the dashboard, other options hide the toggle from the dashboard.   
+
+The available options are: `toggle`, `multi-core`, `single-core`.
+
+- type: `string`
+- default: `toggle`

apps/server/src/config.ts

@@ -72,6 +72,7 @@ export const CONFIG: Config = {
   cpu_widget_min_width: numNull(penv('CPU_WIDGET_MIN_WIDTH')) ?? 500,
   cpu_shown_datapoints: numNull(penv('CPU_SHOWN_DATAPOINTS')) ?? 20,
   cpu_poll_interval: numNull(penv('CPU_POLL_INTERVAL')) ?? 1000,
+  cpu_show_all_cores: penv('CPU_SHOW_ALL_CORES') ?? 'toggle' as any,
 
   storage_widget_items_per_page:
     numNull(penv('STORAGE_WIDGET_ITEMS_PER_PAGE')) ?? 3,

apps/view/src/widgets/cpu.tsx

@@ -1,7 +1,7 @@
 import { Config, CpuInfo, CpuLoad } from '@dash/common';
 import { faMicrochip } from '@fortawesome/free-solid-svg-icons';
 import { Variants } from 'framer-motion';
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 import { YAxis } from 'recharts';
 import { useTheme } from 'styled-components';
 import { DefaultAreaChart } from '../components/chart-components';
@@ -187,6 +187,14 @@ export const CpuWidget: FC<CpuWidgetProps> = ({ load, data, config }) => {
   const [multiCore, setMulticore] = useSetting('multiCore', false);
   const frequency = override.cpu_frequency ?? data.frequency;
 
+  useEffect(() => {
+    if (config.cpu_show_all_cores === 'multi-core') {
+      setMulticore(true);
+    } else if (config.cpu_show_all_cores === 'single-core') {
+      setMulticore(false);
+    }
+  }, []);
+
   return (
     <HardwareInfoContainer
       color={theme.colors.cpuPrimary}
@@ -210,11 +218,12 @@ export const CpuWidget: FC<CpuWidgetProps> = ({ load, data, config }) => {
       infosPerPage={7}
       icon={faMicrochip}
       extraContent={
-        <WidgetSwitch
-          label='Show All Cores'
-          checked={multiCore}
-          onChange={() => setMulticore(!multiCore)}
-        />
+        config.cpu_show_all_cores === 'toggle' ?
+          <WidgetSwitch
+            label='Show All Cores'
+            checked={multiCore}
+            onChange={() => setMulticore(!multiCore)}
+          /> : undefined
       }
     >
       <CpuChart

libs/common/src/types.ts

@@ -132,6 +132,7 @@ export type Config = {
   cpu_widget_min_width: number;
   cpu_shown_datapoints: number;
   cpu_poll_interval: number;
+  cpu_show_all_cores: 'toggle' | 'multi-core' | 'single-core';
 
   // Storage Widget
   storage_widget_items_per_page: number;