feat: update stats panel. update styles, use hook.

Signed-off-by: Eugene Panteleymonchuk <[email protected]>
iotaledger · Feb 15, 2024 · 5a62002 · 5a62002
1 parent df03dc8
commit 5a62002
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 28 deletions.
diff --git a/client/src/features/visualizer-threejs/VisualizerInstance.tsx b/client/src/features/visualizer-threejs/VisualizerInstance.tsx
@@ -33,7 +33,7 @@ import CameraControls from "./CameraControls";
 import "./Visualizer.scss";
 
 const features = {
-    statsEnabled: true,
+    statsEnabled: false,
     cameraControls: true,
 };
 
@@ -244,7 +244,6 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
 
     return (
         <Wrapper
-            bps={bpsCounter.getBPS()}
             key={network}
             blocksCount={indexToBlockId.length}
             filter=""

diff --git a/client/src/features/visualizer-threejs/wrapper/KeyPanel.scss b/client/src/features/visualizer-threejs/wrapper/KeyPanel.scss
@@ -59,23 +59,17 @@
         align-items: center;
         pointer-events: none;
 
-        .stats-panel {
-            background: var(--body-background);
-
-            .card--value,
-            .card--label {
-                text-align: left;
-            }
-            .card--label {
-                justify-content: flex-start;
-            }
-            .card--content {
-                padding: 0;
-            }
-            .stats-panel__info {
-                padding: 0 10px;
-                display: inline-block;
-            }
+        .card--label {
+            justify-content: flex-start;
+        }
+        .card--content {
+            padding: 0;
+        }
+        .stats-panel__info {
+            justify-content: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
         }
 
         @include tablet-down {

diff --git a/client/src/features/visualizer-threejs/wrapper/KeyPanel.tsx b/client/src/features/visualizer-threejs/wrapper/KeyPanel.tsx
@@ -4,7 +4,7 @@ import { BlockState } from "@iota/sdk-wasm-nova/web";
 import "./KeyPanel.scss";
 import { StatsPanel } from "~features/visualizer-threejs/wrapper/StatsPanel";
 
-export const KeyPanel = ({ bps }: { bps: number }) => {
+export const KeyPanel = ({ network }: { network: string }) => {
     const statuses: {
         label: string;
         state: BlockState;
@@ -59,7 +59,7 @@ export const KeyPanel = ({ bps }: { bps: number }) => {
                     );
                 })}
             </div>
-            <StatsPanel bps={bps} />
+            <StatsPanel network={network} />
         </div>
     );
 };
diff --git a/client/src/features/visualizer-threejs/wrapper/StatsPanel.tsx b/client/src/features/visualizer-threejs/wrapper/StatsPanel.tsx
@@ -1,12 +1,14 @@
 import React from "react";
+import { useNetworkStats } from "~helpers/stardust/hooks/useNetworkStats";
 
-export const StatsPanel = ({ bps }: { bps: number }) => {
+export const StatsPanel = ({ network }: { network: string }) => {
+    const [blocksPerSecond] = useNetworkStats(network);
     return (
         <div className="stats-panel-container">
             <div className="card">
                 <div className="stats-panel__info">
                     <div className="card--label">BPS</div>
-                    <div className="card--value green">{parseInt(String(bps))}</div>
+                    <div className="card--value green">{blocksPerSecond}</div>
                 </div>
             </div>
         </div>

diff --git a/client/src/features/visualizer-threejs/wrapper/Wrapper.tsx b/client/src/features/visualizer-threejs/wrapper/Wrapper.tsx
@@ -8,20 +8,18 @@ import { SelectedFeedInfo } from "./SelectedFeedInfo";
 
 export const Wrapper = ({
     blocksCount,
-    bps,
     children,
     filter,
-    isEdgeRenderingEnabled,
     isPlaying,
     network,
     networkConfig,
     onChangeFilter,
     selectNode,
     selectedFeedItem,
-    setEdgeRenderingEnabled,
     setIsPlaying,
+    isEdgeRenderingEnabled,
+    setEdgeRenderingEnabled,
 }: {
-    readonly bps: number;
     readonly blocksCount: number;
     readonly children: React.ReactNode;
     readonly filter: string;
@@ -71,7 +69,7 @@ export const Wrapper = ({
         </div>
 
         {selectedFeedItem && <SelectedFeedInfo networkConfig={networkConfig} network={network} selectedFeedItem={selectedFeedItem} />}
-        <KeyPanel bps={bps} />
+        <KeyPanel network={network} />
     </div>
 );