Merge pull request #133 from HyperloopUPV-H8/ethernet-view/charts-qol

[ethernet-view] Charts QoL

Author: andresdlt03

common-front/package-lock.json

@@ -51,7 +51,7 @@
         "nock": "^13.2.9",
         "sass": "^1.56.1",
         "typescript": "^4.6.4",
-        "vite": "^3.2.7",
+        "vite": "^3.2.10",
         "vitest": "^0.25.2"
     }
 }

ethernet-view/package-lock.json

@@ -3,22 +3,44 @@ import { TestingPage } from "pages/TestingPage/TestingPage";
 import { SplashScreen } from "components/SplashScreen/SplashScreen";
 import { WsHandlerProvider } from "common";
 import { useLoadBackend } from "common";
+import { AppLayout } from "layouts/AppLayout/AppLayout";
+import { useState } from "react";
+import { LoggerPage } from "pages/LoggerPage/LoggerPage";
 
 
 function App() {
 
     const isProduction = import.meta.env.PROD;
     const loadBackend = useLoadBackend(isProduction);
+    const [pageShown, setPageShown] = useState<string>("testing");
 
     return (
-        <div className="App">
-            {loadBackend.state === "fulfilled" && 
-                <WsHandlerProvider handler={loadBackend.wsHandler}>
-                    <TestingPage />
-                </WsHandlerProvider>}
-            {loadBackend.state === "pending" && <SplashScreen />}
-            {loadBackend.state === "rejected" && <div>{`${loadBackend.error}`}</div>}
-        </div>
+        <AppLayout
+            pageShown={pageShown}
+            setPageShown={setPageShown}
+        >
+            <div
+                className="App"
+                style={{
+                    display: pageShown == "testing" ? "block" : "none"
+                }}
+            >
+                {loadBackend.state === "fulfilled" && 
+                    <WsHandlerProvider handler={loadBackend.wsHandler}>
+                        <TestingPage />
+                    </WsHandlerProvider>}
+                {loadBackend.state === "pending" && <SplashScreen />}
+                {loadBackend.state === "rejected" && <div>{`${loadBackend.error}`}</div>}
+            </div>
+            <div 
+                className="App"
+                style={{
+                    display: pageShown == "logger" ? "block" : "none"
+                }}
+            >
+                <LoggerPage />
+            </div>
+        </AppLayout>
     );
 }
 

ethernet-view/package.json

@@ -1,8 +1,22 @@
-import { MeasurementId, NumericMeasurementInfo, UpdateFunction, useGlobalTicker } from "common";
-import { ColorType, IChartApi, ISeriesApi, UTCTimestamp, createChart } from "lightweight-charts";
-import { useEffect, useRef } from "react";
+import {
+    MeasurementId,
+    NumericMeasurementInfo,
+    UpdateFunction,
+    useGlobalTicker,
+} from 'common';
+import {
+    ColorType,
+    IChartApi,
+    ISeriesApi,
+    UTCTimestamp,
+    createChart,
+} from 'lightweight-charts';
+import { useEffect, useRef } from 'react';
 
-type DataSerieAndUpdater = Map<MeasurementId, [ISeriesApi<"Line">, UpdateFunction]>;
+type DataSerieAndUpdater = Map<
+    MeasurementId,
+    [ISeriesApi<'Line'>, UpdateFunction]
+>;
 
 interface Props {
     measurementsInChart: NumericMeasurementInfo[];
@@ -11,65 +25,85 @@ interface Props {
 const CHART_HEIGHT = 300;
 
 export const ChartCanvas = ({ measurementsInChart }: Props) => {
-
     const chart = useRef<IChartApi | null>(null);
     const chartContainerRef = useRef<HTMLDivElement>(null);
     const chartDataSeries = useRef<DataSerieAndUpdater>(new Map());
 
     useEffect(() => {
         const handleResize = () => {
             if (chartContainerRef.current)
-            if(chart)
-            chart.current?.applyOptions({ width: chartContainerRef.current.clientWidth });
+                if (chart)
+                    chart.current?.applyOptions({
+                        width: chartContainerRef.current.clientWidth,
+                    });
         };
 
         const resizeObserver = new ResizeObserver(handleResize);
         if (chartContainerRef.current)
-        resizeObserver.observe(chartContainerRef.current);
+            resizeObserver.observe(chartContainerRef.current);
 
         if (chartContainerRef.current) {
-            if(chart)
-            chart.current = createChart(chartContainerRef.current, {
-                layout: {
-                    background: { type: ColorType.Solid, color: "white" },
-                    textColor: "black",
-                },
-                width: chartContainerRef.current.clientWidth,
-                height: CHART_HEIGHT,
-                timeScale: {
-                    timeVisible: true,
-                    secondsVisible: true,
-                    fixLeftEdge: true,
-                    fixRightEdge: true,
-                    lockVisibleTimeRangeOnResize: true,
-                    rightBarStaysOnScroll: true,
-                }
-            });
+            if (chart) {
+                chart.current = createChart(chartContainerRef.current, {
+                    layout: {
+                        background: { type: ColorType.Solid, color: 'white' },
+                        textColor: 'black',
+                    },
+                    width: chartContainerRef.current.clientWidth,
+                    height: CHART_HEIGHT,
+                    timeScale: {
+                        timeVisible: true,
+                        secondsVisible: true,
+                        fixLeftEdge: true,
+                        fixRightEdge: true,
+                        lockVisibleTimeRangeOnResize: true,
+                        rightBarStaysOnScroll: true,
+                        tickMarkFormatter: (time: UTCTimestamp) => {
+                            const date = new Date(time * 1000);
+                            return date.toLocaleTimeString() + '.' + date.getMilliseconds();
+                        }
+                    },
+                    localization: {
+                        timeFormatter: (time: UTCTimestamp) => {
+                            const date = new Date(time * 1000);
+                            return date.toLocaleTimeString() + '.' + date.getMilliseconds();
+                        }
+                    }
+                });
+            }
         }
 
         return () => {
             resizeObserver.disconnect();
             chart.current?.remove();
-        }
+        };
     }, []);
 
     useEffect(() => {
         chartDataSeries.current.clear();
         measurementsInChart.forEach((measurement) => {
-            if(chart.current)
-            chartDataSeries.current.set(measurement.id, [chart.current.addLineSeries({color: measurement.color}), measurement.getUpdate]);
+            if (chart.current)
+                chartDataSeries.current.set(measurement.id, [
+                    chart.current.addLineSeries({
+                        color: measurement.color,
+                        priceFormat: {
+                            type: 'price',
+                            precision: 3,
+                            minMove: 0.001,
+                        },
+                    }),
+                    measurement.getUpdate,
+                ]);
         });
-    })
+    });
 
     useGlobalTicker(() => {
-        const now = Date.now() / 1000 as UTCTimestamp;
+        const now = (Date.now() / 1000) as UTCTimestamp;
         chartDataSeries.current?.forEach((serieAndUpdater) => {
             const [DataSerie, Updater] = serieAndUpdater;
-            DataSerie.update({ time: now, value: Updater() })
+            DataSerie.update({ time: now, value: Updater() });
         });
     });
 
-    return (
-        <div ref={chartContainerRef}></div>
-    );
+    return <div ref={chartContainerRef}></div>;
 };

ethernet-view/src/App.tsx

@@ -1,25 +1,23 @@
 import styles from "./Navbar.module.scss";
-import { ReactComponent as TeamLogo } from "assets/svg/team_logo.svg";
-import { Link } from "react-router-dom";
 import { NavbarItem, NavbarItemData } from "./NavbarItem/NavbarItem";
 
 type Props = {
     items: NavbarItemData[];
+    pageShown: string;
+    setPageShown: (page: string) => void;
 };
 
-export const Navbar = ({ items }: Props) => {
+export const Navbar = ({ items, pageShown, setPageShown }: Props) => {
     return (
         <nav className={styles.navbarWrapper}>
-            <Link to={"/"}>
-                <TeamLogo className={styles.logo} />
-            </Link>
             <div className={styles.separator} />
             <div className={styles.items}>
                 {items.map((item) => {
                     return (
                         <NavbarItem
-                            key={item.path}
                             item={item}
+                            pageShown={pageShown}
+                            setPageShown={setPageShown}
                         />
                     );
                 })}

ethernet-view/src/assets/svg/cross-active.svg

@@ -4,6 +4,7 @@
     > * {
         width: 2rem;
     }
+    cursor: pointer;
 }
 
 .link {

ethernet-view/src/assets/svg/cross.svg

@@ -1,24 +1,27 @@
 import styles from "components/Navbar/NavbarItem/NavbarItem.module.scss";
-import { NavLink } from "react-router-dom";
 
 export type NavbarItemData = {
-    path: string;
     icon: string;
+    page: string;
 };
 
 type Props = {
     item: NavbarItemData;
+    pageShown: string;
+    setPageShown: (page: string) => void;
 };
 
-export const NavbarItem = ({ item }: Props) => {
+export const NavbarItem = ({ item, pageShown, setPageShown }: Props) => {
+
+    const handleClick = () => {
+        setPageShown(item.page);
+    }
+
     return (
-        <NavLink
-            to={item.path}
-            className={({isActive}) => isActive ? styles.active : ""}
-        >
-            <div className={styles.iconWrapper}>
+        <div className={pageShown === item.page ? styles.active : ""}>
+            <div className={styles.iconWrapper} onClick={handleClick}>
                 <img src={item.icon} alt="icon" />
             </div>
-        </NavLink>
+        </div>
     );
 };