Restablish previous peer component

src/components/Peers/PeersCard.css

@@ -15,6 +15,9 @@
     position: absolute;
     left: 0;
     right: 0;
+    top: -35px;
+    bottom: 0;
+    margin: auto;
   }
 
   footer {

src/components/Peers/PeersCard.tsx

@@ -12,14 +12,14 @@ export function PeersCard() {
 
   const nodes = data?.table.nodes ?? [];
   const actives = PeerUtils.countActives(nodes);
-  const percent = PeerUtils.calcularePercent(nodes);
+  const degrees = PeerUtils.calculareDegrees(nodes);
   const good = PeerUtils.isGoodQuality(actives);
 
   return (
     <div className="peers-card">
       <main className="row gap">
         <PeersMap nodes={data?.table.nodes || []}></PeersMap>
-        <PeersChart actives={actives} percent={percent}></PeersChart>
+        <PeersChart actives={actives} degrees={degrees}></PeersChart>
       </main>
       <footer>
         <PeersQuality good={good}></PeersQuality>

src/components/Peers/PeersChart.css

@@ -5,6 +5,7 @@
   overflow: hidden;
   margin: auto;
   left: -32px;
+  border-radius: 5px;
 
   @media (min-width: 1000px) {
     & {
@@ -30,6 +31,7 @@
     border-bottom: none;
     border-top-left-radius: 175px;
     border-top-right-radius: 175px;
+    border-bottom-right-radius: 5px;
   }
 
   div {
@@ -42,6 +44,8 @@
     border-bottom-left-radius: 175px;
     border-bottom-right-radius: 175px;
     transform-origin: 50% 0;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
   }
 
   div:nth-child(1) {
@@ -52,13 +56,13 @@
 
   span {
     font-family: Inter;
-    font-size: 38.67px;
+    font-size: 50px;
     font-weight: 500;
     line-height: 48.34px;
     letter-spacing: -0.005em;
     text-align: center;
     position: absolute;
-    bottom: 0;
+    bottom: 20px;
     left: calc(50% - 24px);
   }
 }

src/components/Peers/PeersChart.tsx

@@ -1,110 +1,25 @@
 import "./PeersChart.css";
-import * as echarts from "echarts/core";
-import { TooltipComponent } from "echarts/components";
-import { SVGRenderer } from "echarts/renderers";
-import { GaugeChart } from "echarts/charts";
-import { useEffect, useRef, useState } from "react";
 
 type Props = {
   actives: number;
-  percent: number;
+  degrees: number;
 };
 
-// type CustomCSSProperties = React.CSSProperties & {
-//   "--codex-peers-degrees": number;
-// };
+type CustomCSSProperties = React.CSSProperties & {
+  "--codex-peers-degrees": number;
+};
 
-echarts.use([GaugeChart, TooltipComponent, SVGRenderer]);
-
-export function PeersChart({ actives, percent }: Props) {
-  const div = useRef<HTMLDivElement>(null);
-  const chart = useRef<echarts.EChartsType | null>(null);
-  const [, setRefresher] = useState(Date.now());
-
-  useEffect(() => {
-    if (div.current && !chart.current) {
-      chart.current = echarts.init(div.current, null, {
-        renderer: "svg",
-      });
-      setRefresher(Date.now());
-    }
-  }, [chart, div]);
-
-  // const style: CustomCSSProperties = {
-  //   "--codex-peers-degrees": percent,
-  // };
-
-  if (chart.current) {
-    const options = {
-      series: [
-        {
-          type: "gauge",
-          axisLine: {
-            lineStyle: {
-              width: 30,
-              color: [
-                [0.2, "var(--codex-color-error-hexa)"],
-                [0.5, "rgb(var(--codex-color-warning))"],
-                [1, "var(--codex-color-primary)"],
-              ],
-            },
-          },
-          pointer: {
-            itemStyle: {
-              color: "auto",
-            },
-          },
-          axisTick: {
-            distance: -30,
-            length: 8,
-            lineStyle: {
-              color: "#fff",
-              width: 2,
-            },
-          },
-          splitLine: {
-            distance: -30,
-            length: 30,
-            lineStyle: {
-              color: "#fff",
-              width: 2,
-            },
-          },
-          axisLabel: {
-            color: "inherit",
-            distance: 40,
-            fontSize: 0,
-          },
-          detail: {
-            valueAnimation: true,
-            formatter: actives + "",
-            color: "inherit",
-          },
-          data: [
-            {
-              value: percent * 100,
-            },
-          ],
-        },
-      ],
-    };
-    chart.current.setOption(options);
-  }
+export function PeersChart({ actives, degrees }: Props) {
+  const style: CustomCSSProperties = {
+    "--codex-peers-degrees": degrees,
+  };
 
   return (
     <>
-      {/* <div style={style} className="peers-chart">
+      <div style={style} className="peers-chart">
         <div></div>
         <span>{actives}</span>
-      </div> */}
-      <div
-        id="chart"
-        ref={div}
-        className="gauge"
-        style={{
-          width: 250,
-          height: 250,
-        }}></div>
+      </div>
     </>
   );
 }

src/routes/dashboard/peers.tsx

@@ -76,7 +76,7 @@ export const PeersRoute = () => {
   });
 
   const actives = PeerUtils.countActives(sorted);
-  const percent = PeerUtils.calcularePercent(sorted);
+  const degrees = PeerUtils.calculareDegrees(sorted);
   const good = PeerUtils.isGoodQuality(actives);
 
   return (
@@ -96,7 +96,7 @@ export const PeersRoute = () => {
               <span>Connections</span>
             </header>
             <main>
-              <PeersChart actives={actives} percent={percent}></PeersChart>
+              <PeersChart actives={actives} degrees={degrees}></PeersChart>
             </main>
             <footer>
               <PeersQuality good={good}></PeersQuality>