feat: show percentages only on mobile

fixes #149

apps/api/src/config.ts

@@ -13,54 +13,56 @@ const numlst = (item: string): number[] => lst(item).map(numNull);
 
 export const CONFIG: Config = {
   port: numNull(penv('PORT')) ?? 3001,
-  widget_list: lst(
-    penv('WIDGET_LIST') ?? 'os,cpu,storage,ram,network'
-  ) as any[],
+  disable_host: penv('DISABLE_HOST') === 'true',
   accept_ookla_eula: penv('ACCEPT_OOKLA_EULA') === 'true',
   use_imperial: penv('USE_IMPERIAL') === 'true',
   disable_integrations: penv('DISABLE_INTEGRATIONS') === 'true',
+  enable_storage_split_view: penv('ENABLE_STORAGE_SPLIT_VIEW') === 'true',
+  use_network_interface: penv('USE_NETWORK_INTERFACE') ?? '',
+  always_show_percentages: penv('ALWAYS_SHOW_PERCENTAGES') === 'true',
 
-  disable_host: penv('DISABLE_HOST') === 'true',
+  widget_list: lst(
+    penv('WIDGET_LIST') ?? 'os,cpu,storage,ram,network'
+  ) as any[],
   os_label_list: lst(penv('OS_LABEL_LIST') ?? 'os,arch,up_since') as any[],
+  cpu_label_list: lst(
+    penv('CPU_LABEL_LIST') ?? 'brand,model,cores,threads,frequency'
+  ) as any[],
+  storage_label_list: lst(
+    penv('STORAGE_LABEL_LIST') ?? 'brand,size,type,raid'
+  ) as any[],
+  ram_label_list: lst(
+    penv('RAM_LABEL_LIST') ?? 'brand,size,type,frequency'
+  ) as any[],
+  network_label_list: lst(
+    penv('NETWORK_LABEL_LIST') ?? 'type,speed_up,speed_down,interface_speed'
+  ) as any[],
+  gpu_label_list: lst(penv('GPU_LABEL_LIST') ?? 'brand,model,memory') as any[],
+
   os_widget_grow: numNull(penv('OS_WIDGET_GROW')) ?? 1.5,
   os_widget_min_width: numNull(penv('OS_WIDGET_MIN_WIDTH')) ?? 300,
 
   enable_cpu_temps: penv('ENABLE_CPU_TEMPS') === 'true',
-  cpu_label_list: lst(
-    penv('CPU_LABEL_LIST') ?? 'brand,model,cores,threads,frequency'
-  ) as any[],
   cpu_widget_grow: numNull(penv('CPU_WIDGET_GROW')) ?? 4,
   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,
 
-  enable_storage_split_view: penv('ENABLE_STORAGE_SPLIT_VIEW') === 'true',
-  storage_label_list: lst(
-    penv('STORAGE_LABEL_LIST') ?? 'brand,size,type,raid'
-  ) as any[],
   storage_widget_grow: numNull(penv('STORAGE_WIDGET_GROW')) ?? 3.5,
   storage_widget_min_width: numNull(penv('STORAGE_WIDGET_MIN_WIDTH')) ?? 500,
   storage_poll_interval: numNull(penv('STORAGE_POLL_INTERVAL')) ?? 60000,
 
-  ram_label_list: lst(
-    penv('RAM_LABEL_LIST') ?? 'brand,size,type,frequency'
-  ) as any[],
   ram_widget_grow: numNull(penv('RAM_WIDGET_GROW')) ?? 4,
   ram_widget_min_width: numNull(penv('RAM_WIDGET_MIN_WIDTH')) ?? 500,
   ram_shown_datapoints: numNull(penv('RAM_SHOWN_DATAPOINTS')) ?? 20,
   ram_poll_interval: numNull(penv('RAM_POLL_INTERVAL')) ?? 1000,
 
-  use_network_interface: penv('USE_NETWORK_INTERFACE') ?? '',
   speed_test_interval: numNull(penv('SPEED_TEST_INTERVAL')) ?? 60,
-  network_label_list: lst(
-    penv('NETWORK_LABEL_LIST') ?? 'type,speed_up,speed_down,interface_speed'
-  ) as any[],
   network_widget_grow: numNull(penv('NETWORK_WIDGET_GROW')) ?? 6,
   network_widget_min_width: numNull(penv('NETWORK_WIDGET_MIN_WIDTH')) ?? 500,
   network_shown_datapoints: numNull(penv('NETWORK_SHOWN_DATAPOINTS')) ?? 20,
   network_poll_interval: numNull(penv('NETWORK_POLL_INTERVAL')) ?? 1000,
 
-  gpu_label_list: lst(penv('GPU_LABEL_LIST') ?? 'brand,model,memory') as any[],
   gpu_widget_grow: numNull(penv('GPU_WIDGET_GROW')) ?? 6,
   gpu_widget_min_width: numNull(penv('GPU_WIDGET_MIN_WIDTH')) ?? 700,
   gpu_shown_datapoints: numNull(penv('GPU_SHOWN_DATAPOINTS')) ?? 20,

apps/docs/docs/integration/widget-preview.jsx

@@ -10,6 +10,7 @@ export const WidgetPreview = () => {
   const [url, setUrl] = useState('dash.mauz.io');
   const [widget, setWidget] = useState('cpu');
   const [multiView, setMultiView] = useState('false');
+  const [showPercentage, setShowPercentage] = useState('false');
   const [primaryColor, setPrimaryColor] = useState('');
   const [surfaceColor, setSurfaceColor] = useState('');
   const [theme, setTheme] = useState('');
@@ -20,7 +21,13 @@ export const WidgetPreview = () => {
   const multiViewAllowed = widget === 'cpu' || widget === 'storage';
 
   const multiViewPart =
-    multiViewAllowed && multiView ? `&multiView=${multiView.toString()}` : '';
+    multiViewAllowed && multiView === 'true'
+      ? `&multiView=${multiView.toString()}`
+      : '';
+  const showPercentagePart =
+    showPercentage === 'true'
+      ? `&showPercentage=${showPercentage.toString()}`
+      : '';
   const themePart = theme !== '' ? `&theme=${theme}` : '';
   const primaryColorPart = primaryColor !== '' ? `&color=${primaryColor}` : '';
   const surfaceColorPart =
@@ -29,7 +36,7 @@ export const WidgetPreview = () => {
     innerRadius !== null ? `&innerRadius=${innerRadius}` : '';
   const gapPart = gap !== null ? `&gap=${gap}` : '';
 
-  const finalUrl = `${protocol}://${url}?singleGraphMode=true&graph=${widget}${multiViewPart}${themePart}${primaryColorPart}${surfaceColorPart}${innerRadiusPart}${gapPart}`;
+  const finalUrl = `${protocol}://${url}?singleGraphMode=true&graph=${widget}${multiViewPart}${showPercentagePart}${themePart}${primaryColorPart}${surfaceColorPart}${innerRadiusPart}${gapPart}`;
 
   return (
     <MantineProvider
@@ -97,6 +104,15 @@ export const WidgetPreview = () => {
               ]}
             />
           )}
+          <Select
+            label='Show Percentage'
+            value={showPercentage}
+            onChange={e => setShowPercentage(e)}
+            data={[
+              { value: 'true', label: 'True' },
+              { value: 'false', label: 'False' },
+            ]}
+          />
 
           <Select
             label='Theme'
@@ -164,6 +180,8 @@ export const WidgetPreview = () => {
   style="border-radius: ${outerRadius}px"`
               : ''
           }
+  allowtransparency="true"
+  frameborder="0"
 ></iframe>`}
         </CodeBlock>
 
@@ -174,6 +192,8 @@ export const WidgetPreview = () => {
             width: '100%',
             maxWidth: '300px',
           }}
+          frameBorder='0'
+          allowTransparency
         ></iframe>
       </div>
     </MantineProvider>

apps/docs/docs/integration/widgets.mdx

@@ -16,6 +16,8 @@ can be configured using query parameters.
 <iframe
   src="https://<YOUR_SERVER_URL>/?singleGraphMode=true&graph=cpu&multiView=true"
   style="border-radius: 20px"
+  allowtransparency="true"
+  frameborder="0"
 ></iframe>
 ```
 
@@ -30,7 +32,7 @@ This parameter tells dash. that it should only show a single graph in full-scree
 
 ### `graph`
 
-Select the specific graph that you want to show,
+Select the specific graph that you want to show.
 
 - type: `string` (`cpu`, `storage`, `ram`, `network`, `gpu`)
 - required: `true`
@@ -49,6 +51,12 @@ the API Request to `/config`, like [described in the API Section](./api#config)
 
 :::
 
+### `showPercentage`
+
+Show a label with the current percentage of the graph.
+
+- type: `boolean`
+
 ### `theme`
 
 To override the theme of the graph. If this is not passed, the default theme of the users browser is used.

apps/view/src/components/chart-components.tsx

@@ -102,6 +102,7 @@ type DefaultPieChartProps = {
   children: React.ReactNode;
   data: any[];
   labelRenderer: (value: number) => string;
+  hoverLabelRenderer: (label: string, value: number) => string;
 };
 export const DefaultPieChart: FC<DefaultPieChartProps> = ({
   data,
@@ -110,6 +111,7 @@ export const DefaultPieChart: FC<DefaultPieChartProps> = ({
   color,
   children,
   labelRenderer,
+  hoverLabelRenderer,
 }) => {
   const id = useMemo(() => {
     return `pie-chart-${++globalId}`;
@@ -165,9 +167,10 @@ export const DefaultPieChart: FC<DefaultPieChartProps> = ({
               document.querySelector(`#${id}`) as HTMLElement
             ).getBoundingClientRect();
             const label = data.payload.payload.name;
+            const value = data.payload.payload.value;
 
             setLabel({
-              label,
+              label: hoverLabelRenderer(label, value),
               x: event.clientX - rect.left,
               y: event.clientY - rect.top,
             });

apps/view/src/components/single-widget-chart.tsx

@@ -60,6 +60,8 @@ export const SingleWidgetChart: FC = () => {
 
   if (!pageLoaded || !config || !query.isSingleGraphMode) return null;
 
+  const showPercentages = query.showPercentage;
+
   const configs = {
     cpu: {
       Component: CpuChart,
@@ -109,7 +111,10 @@ export const SingleWidgetChart: FC = () => {
   return (
     <Container radius={query.radius} gap={query.gap}>
       {/*@ts-ignore */}
-      <compConfig.Component {...compConfig.props} />
+      <compConfig.Component
+        {...compConfig.props}
+        showPercentages={showPercentages}
+      />
     </Container>
   );
 };

apps/view/src/services/query-params.ts

@@ -17,7 +17,8 @@ type QueryResult =
   | {
       isSingleGraphMode: true;
       graph: FullscreenGraphTypes;
-      multiView?: boolean;
+      multiView: boolean;
+      showPercentage: boolean;
       overrideTheme?: 'light' | 'dark';
       overrideThemeColor?: string;
       overrideThemeSurface?: string;
@@ -36,6 +37,7 @@ export const useQuery = (): QueryResult => {
       isSingleGraphMode: true,
       graph: query['graph'] as FullscreenGraphTypes,
       multiView: query['multiView'] === 'true',
+      showPercentage: query['showPercentage'] === 'true',
       overrideTheme: query['theme'] as 'light' | 'dark',
       overrideThemeColor: query['color'] as string,
       overrideThemeSurface: query['surface'] as string,

apps/view/src/widgets/cpu.tsx

@@ -12,6 +12,7 @@ import {
 import { HardwareInfoContainer } from '../components/hardware-info-container';
 import { ThemedText } from '../components/text';
 import { WidgetSwitch } from '../components/widget-switch';
+import { useIsMobile } from '../services/mobile';
 import { useSetting } from '../services/settings';
 import { celsiusToFahrenheit } from '../utils/calculations';
 import { toInfoTable } from '../utils/format';
@@ -53,8 +54,14 @@ type CpuChartProps = {
   load: CpuLoad[];
   config: Config;
   multiView: boolean;
+  showPercentages: boolean;
 };
-export const CpuChart: FC<CpuChartProps> = ({ load, config, multiView }) => {
+export const CpuChart: FC<CpuChartProps> = ({
+  load,
+  config,
+  multiView,
+  showPercentages,
+}) => {
   const theme = useTheme();
 
   const latestLoad = load[load.length - 1];
@@ -131,7 +138,7 @@ export const CpuChart: FC<CpuChartProps> = ({ load, config, multiView }) => {
               : undefined
           }
           textLeft={
-            multiView
+            multiView || !showPercentages
               ? undefined
               : `%: ${((chart.at(-1)?.y as number) ?? 0)?.toFixed(1)}`
           }
@@ -176,6 +183,7 @@ type CpuWidgetProps = {
 
 export const CpuWidget: FC<CpuWidgetProps> = ({ load, data, config }) => {
   const theme = useTheme();
+  const isMobile = useIsMobile();
   const override = config.override;
 
   const [multiCore, setMulticore] = useSetting('multiCore', false);
@@ -227,7 +235,12 @@ export const CpuWidget: FC<CpuWidgetProps> = ({ load, data, config }) => {
         />
       }
     >
-      <CpuChart multiView={multiCore} config={config} load={load} />
+      <CpuChart
+        showPercentages={config.always_show_percentages || isMobile}
+        multiView={multiCore}
+        config={config}
+        load={load}
+      />
     </HardwareInfoContainer>
   );
 };

apps/view/src/widgets/gpu.tsx

@@ -10,16 +10,22 @@ import {
 } from '../components/chart-container';
 import { HardwareInfoContainer } from '../components/hardware-info-container';
 import { ThemedText } from '../components/text';
+import { useIsMobile } from '../services/mobile';
 import { bytePrettyPrint } from '../utils/calculations';
 import { toInfoTable } from '../utils/format';
 import { ChartVal } from '../utils/types';
 
 type GpuChartProps = {
   load: GpuLoad[];
   index: number;
+  showPercentages: boolean;
 };
 
-export const GpuChart: FC<GpuChartProps> = ({ load, index }) => {
+export const GpuChart: FC<GpuChartProps> = ({
+  load,
+  index,
+  showPercentages,
+}) => {
   const theme = useTheme();
 
   const chartDataLoad = load.map((load, i) => ({
@@ -35,9 +41,11 @@ export const GpuChart: FC<GpuChartProps> = ({ load, index }) => {
     <MultiChartContainer columns={2}>
       <ChartContainer
         contentLoaded={chartDataLoad.length > 1}
-        textLeft={`%: ${(chartDataLoad.at(-1)?.y as number)?.toFixed(
-          1
-        )} (Load)`}
+        textLeft={
+          showPercentages
+            ? `%: ${(chartDataLoad.at(-1)?.y as number)?.toFixed(1)} (Load)`
+            : undefined
+        }
       >
         {size => (
           <DefaultAreaChart
@@ -94,6 +102,7 @@ type GpuWidgetProps = {
 
 export const GpuWidget: FC<GpuWidgetProps> = ({ load, data, config }) => {
   const theme = useTheme();
+  const isMobile = useIsMobile();
   const [page, setPage] = useState(0);
   const override = config.override;
 
@@ -145,7 +154,11 @@ export const GpuWidget: FC<GpuWidgetProps> = ({ load, data, config }) => {
       icon={faDesktop}
       onPageChange={setPage}
     >
-      <GpuChart load={load} index={page} />
+      <GpuChart
+        showPercentages={config.always_show_percentages || isMobile}
+        load={load}
+        index={page}
+      />
     </HardwareInfoContainer>
   );
 };