Merge branch 'electron/react' into main

build/app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "slashboard",
   "productName": "Slashboard",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Electron app to monitor personal server statuses in real time",
   "main": "./dist/main/main.js",
   "author": {

global.d.ts

@@ -130,7 +130,8 @@ declare global {
     >;
     internals: {
       settings: {
-        dynamicScale: boolean;
+        dynamicCPUScale: boolean;
+        dynamicRAMScale: boolean;
       };
       preferences: Record<string, number | boolean | string>;
     };

src/main/main.ts

@@ -35,7 +35,8 @@ if (!store.has('servers')) {
     servers: {},
     internals: {
       settings: {
-        dynamicScale: true,
+        dynamicCPUScale: true,
+        dynamicRAMScale: false,
       },
       preferences: {},
     },

src/renderer/components/settings/Settings.tsx

@@ -42,7 +42,13 @@ const SettingCategory = (props: {
 
   return (
     <div className="setting-category">
-      <div className="title-box">
+      <div
+        className="title-box"
+        style={{
+          padding: '5px 0px',
+          marginBlockEnd: '20px',
+        }}
+      >
         <h2 className="h-bold h-primary">{title}</h2>
       </div>
       {children}
@@ -65,14 +71,14 @@ const SubSettingCategory = (props: {
       <div
         className="title-box"
         style={{
-          padding: '5px 0px',
+          padding: '5px 0px 5px 5px',
           marginBlockEnd: '20px',
           borderBottom: '1px solid #525366',
         }}
       >
         <h3 className="h-bold">{title}</h3>
       </div>
-      {children}
+      <div style={{ marginLeft: '5px' }}>{children}</div>
     </div>
   );
 };

src/renderer/components/settings/SettingsModal.tsx

@@ -12,6 +12,7 @@ import {
 import {
   SettingSwitch,
   SubSettingCategory,
+  SettingCategory,
 } from 'renderer/components/settings/Settings';
 import Storage from 'renderer/utils/Storage';
 
@@ -20,7 +21,9 @@ interface Props {
 }
 
 const SettingsModal = ({ token }: Props) => {
-  const [settings, setSettings] = useState(undefined as any);
+  const [settings, setSettings] = useState<
+    undefined | StorageFormat['internals']['settings']
+  >(undefined);
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
@@ -48,20 +51,40 @@ const SettingsModal = ({ token }: Props) => {
               color: '#fff',
             }}
           >
-            <SubSettingCategory title="Dashboard charts">
-              <SettingSwitch
-                text="Dynamic scale"
-                subtext="The chart's scale adapts dynamically to the data it displays"
-                state={{
-                  value: settings.dynamicScale,
-                  setter: (value) => {
-                    settings.dynamicScale = value;
-                    setSettings(settings);
-                  },
-                }}
-                defaultValue={settings.dynamicScale}
-              />
-            </SubSettingCategory>
+            <SettingCategory title="Dashboard charts">
+              <SubSettingCategory title="CPU">
+                <SettingSwitch
+                  text="Dynamic chart scale"
+                  subtext="The chart's scale adapts dynamically to the data it displays"
+                  state={{
+                    value: settings?.dynamicCPUScale,
+                    setter: (value) => {
+                      if (settings) {
+                        settings.dynamicCPUScale = value;
+                        setSettings(settings);
+                      }
+                    },
+                  }}
+                  defaultValue={settings?.dynamicCPUScale}
+                />
+              </SubSettingCategory>
+              <SubSettingCategory title="RAM">
+                <SettingSwitch
+                  text="Dynamic chart scale"
+                  subtext="Same thing as above, looks wrong most of the time due how slowly the memory usage varies"
+                  state={{
+                    value: settings?.dynamicRAMScale,
+                    setter: (value) => {
+                      if (settings) {
+                        settings.dynamicRAMScale = value;
+                        setSettings(settings);
+                      }
+                    },
+                  }}
+                  defaultValue={settings?.dynamicRAMScale}
+                />
+              </SubSettingCategory>
+            </SettingCategory>
           </ModalBody>
           <ModalFooter>
             <div className="button-band">
@@ -81,7 +104,9 @@ const SettingsModal = ({ token }: Props) => {
                 className="btn-standard b-primary b-shadow"
                 onClick={() => {
                   // ipcRenderer bridge
-                  window.electron.ipcRenderer.settings.setAll(settings);
+                  if (settings) {
+                    window.electron.ipcRenderer.settings.setAll(settings);
+                  }
                   // update internals in Storage
                   Storage.updateInternals();
                   // close modal

src/renderer/components/stats/CPUChart.tsx

@@ -5,6 +5,7 @@ import { Chart, Point, Line } from 'renderer/components/stats/Chart';
 import defaultStyles from 'renderer/components/stats/ChartStyles';
 import OWStack from 'renderer/utils/OWStack';
 import ColorGen from 'renderer/utils/ColorGen';
+import Storage from 'renderer/utils/Storage';
 
 interface Props {
   coreStates: Array<{
@@ -56,6 +57,7 @@ class CPUChart extends React.Component<Props, State> {
   render() {
     const { coreStates, title, subtitle, stroke } = this.props;
     const { areaChart } = this.state;
+    const { dynamicCPUScale } = Storage.internals.settings;
 
     // convert the Array of stacks to an array of Lines
     const arrayData = new Array<Line>();
@@ -72,7 +74,7 @@ class CPUChart extends React.Component<Props, State> {
         data: this.data[i].toArray(),
         style: {
           cursor: 'auto',
-          stroke: stroke || ColorGen.generate(i),
+          stroke: stroke || ColorGen.generate(i, [9, 31, 47]),
           strokeWidth: 2,
           strokeOpacity: 1,
           shapeRendering: 'geometricPrecision',
@@ -93,6 +95,7 @@ class CPUChart extends React.Component<Props, State> {
                 area={areaChart}
                 title={title}
                 subtitle={subtitle}
+                dynamicScale={dynamicCPUScale}
               />
             );
           }}

src/renderer/components/stats/Chart.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable react/static-property-placement */
-import React, { useState } from 'react';
+import React from 'react';
 
 import { curveBasis } from '@visx/curve';
 import { AreaClosed, LinePath } from '@visx/shape';
@@ -11,7 +11,6 @@ import { Group } from '@visx/group';
 import { scaleTime, scaleLinear } from '@visx/scale';
 import { LinearGradient } from '@visx/gradient';
 import { extent, max } from 'd3-array';
-import Storage from 'renderer/utils/Storage';
 
 interface Point {
   value: number;
@@ -58,6 +57,7 @@ interface Props {
   bg?: string;
   title?: string;
   subtitle?: string;
+  dynamicScale?: boolean;
 }
 
 const Chart = ({
@@ -71,9 +71,8 @@ const Chart = ({
   bg,
   title,
   subtitle,
+  dynamicScale,
 }: Props) => {
-  const { dynamicScale } = Storage.internals.settings;
-
   const allData = data
     .map((value) => value.data)
     .reduce((acc, curr) => acc.concat(curr), []);
@@ -201,6 +200,7 @@ Chart.defaultProps = {
   showPoints: false,
   area: false,
   bg: '#061a2bb6', // previously theming.blockAccent but erb doesn't seem to handle that very well
+  dynamicScale: false,
 };
 
 export default Chart;

src/renderer/components/stats/RAMChart.tsx

@@ -4,6 +4,7 @@ import { ParentSize } from '@visx/responsive';
 import { Chart, Point, Line } from 'renderer/components/stats/Chart';
 import defaultStyles from 'renderer/components/stats/ChartStyles';
 import OWStack from 'renderer/utils/OWStack';
+import Storage from 'renderer/utils/Storage';
 
 interface Props {
   memoryState: {
@@ -38,6 +39,7 @@ class RAMChart extends React.Component<Props, unknown> {
 
   render() {
     const { memoryState, stroke } = this.props;
+    const { dynamicRAMScale } = Storage.internals.settings;
 
     // convert the Array of stacks to an array of Lines
     const arrayData = new Array<Line>();
@@ -71,6 +73,7 @@ class RAMChart extends React.Component<Props, unknown> {
                 area
                 title="RAM"
                 subtitle="Memory usage"
+                dynamicScale={dynamicRAMScale}
               />
             );
           }}

src/renderer/containers/SideBar.tsx

@@ -48,7 +48,6 @@ const SideBarButton = ({
   const handleClick = () => {
     if (!disabled) {
       const url = `/dashboard/${text.toLowerCase()}`;
-      // console.debug(url)
       history.push(url);
     }
   };

src/renderer/utils/ColorGen.ts

@@ -20,19 +20,57 @@ class ColorGen {
     Math.floor(Math.random() * 700),
   ];
 
+  /**
+   * Calculate the "distance" between two rgb colors (which basically are 3D points).
+   * @param a first color
+   * @param b second color
+   * @returns distance
+   */
+  private static colorDistance(
+    a: [number, number, number],
+    b: [number, number, number]
+  ): number {
+    const vector = new Array<number>(3);
+    for (let i = 0; i < 3; i += 1) {
+      vector[i] = b[i] - a[i];
+    }
+    return Math.sqrt(vector.map((x) => x * x).reduce((u, v) => u + v, 0));
+  }
+
+  private static avgDist(
+    a: [number, number, number],
+    b: [number, number, number]
+  ): number {
+    const vector = new Array<number>(3);
+    for (let i = 0; i < 3; i += 1) {
+      vector[i] = b[i] - a[i];
+    }
+    return (
+      Math.sqrt(vector.reduce((u, v) => u + v, 0)) /
+      (vector[0] + vector[1] + vector[2])
+    );
+  }
+
   /**
    * Generate a color from a number "seed". As long as the seedReset() method isn't called, the results will
    * remain always the same for each number, regardless of how many times you call it.
    * @param value seed
    * @returns rgb color string
    */
-  static generate(value: number): string {
-    const rgb = new Array<number>(3);
+  static generate(value: number, bg?: [number, number, number]): string {
+    const rgb: [number, number, number] = [0, 0, 0];
+    const reference = bg || [0, 0, 0]; // by default the background is considered to be black
 
     for (let i = 0; i < 3; i += 1) {
       rgb[i] = (ColorGen.rgbOffsets[i] + ColorGen.rgbSteps[i] * value) % 255;
     }
 
+    // if the color is too close to the reference color, we need to adjust it
+    if (ColorGen.avgDist(rgb, reference) < 150) {
+      ColorGen.seedReset();
+      return ColorGen.generate(value, bg);
+    }
+
     return `#${ToHex(rgb[0])}${ToHex(rgb[1])}${ToHex(rgb[1])}`;
   }
 
@@ -41,6 +79,7 @@ class ColorGen {
    * will be changed.
    */
   static seedReset() {
+    console.debug('Resetting color generator');
     ColorGen.rgbOffsets = [
       Math.floor(Math.random() * 255),
       Math.floor(Math.random() * 255),

src/renderer/utils/Storage.ts

@@ -4,6 +4,7 @@ class Storage {
   static servers: StorageFormat['servers'];
 
   static updateInternals(callback?: () => void) {
+    console.debug('Updating internals');
     const fetch = async () => {
       Storage.internals = await Promise.all([
         window.electron.ipcRenderer.settings.getAll(),
@@ -21,6 +22,7 @@ class Storage {
   }
 
   static updateServers(callback?: () => void) {
+    console.debug('Updating server list');
     const fetch = async () => {
       Storage.servers = await window.electron.ipcRenderer.servers.getAll();
       callback?.();