fixed axis label styling for cost

Author: shenrunzhang

src/components/CompareModal.tsx

@@ -260,6 +260,17 @@ useEffect(() => {
   const spiderChartDomain: [number, number] =
     activeMetric === 'cost' ? spiderValueDomain : [0, 100];
 
+  const formatSpiderTick = useCallback(
+    (value: number) => {
+      if (activeMetric === 'cost') {
+        if (!Number.isFinite(value)) return '$0.000000';
+        return `$${value.toFixed(6)}`;
+      }
+      return value.toFixed(0);
+    },
+    [activeMetric]
+  );
+
   useEffect(() => {
     if (activeBarAxis && !currentAxes.includes(activeBarAxis)) {
       setActiveBarAxis('');
@@ -730,7 +741,7 @@ useEffect(() => {
                             </text>
                           )}
                         />
-                        <PolarRadiusAxis domain={spiderValueDomain} tickCount={5} />
+                        <PolarRadiusAxis domain={spiderValueDomain} tickCount={5} tickFormatter={formatSpiderTick} />
                         {routerIds.map((id, index) => (
                           <Radar
                             key={id}

src/components/DifficultyBarPanel.tsx

@@ -95,9 +95,10 @@ const DifficultyBarPanel: React.FC<DifficultyBarPanelProps> = ({
                 position="right"
                 formatter={(value: number) => {
                   if (metricKey === 'cost') {
-                    return value.toFixed(5);
+                    const safeValue = Number.isFinite(value) ? value : 0;
+                    return `$${safeValue.toFixed(5)}`;
                   }
-                  return value.toFixed(1);
+                  return Number.isFinite(value) ? value.toFixed(1) : '0.0';
                 }}
                 fill="#0f172a"
                 fontSize={12}