improved calibration page design

manifoldmarkets · Mar 1, 2025 · 9cd51da · 9cd51da
1 parent 9cff924
commit 9cd51da
Show file tree

Hide file tree

Showing 2 changed files with 245 additions and 207 deletions.
diff --git a/web/components/charts/calibration.tsx b/web/components/charts/calibration.tsx
@@ -34,39 +34,45 @@ export function CalibrationChart(props: {
 
   return (
     <SVGChart w={width} h={height} xAxis={xAxis} yAxis={yAxis} noGridlines>
+      {/* diagonal line x = y */}
+      <line
+        x1={xScale(0)}
+        y1={yScale(0)}
+        x2={xScale(1)}
+        y2={yScale(1)}
+        stroke="rgb(99 102 241)"
+        strokeWidth={1.5}
+        strokeDasharray="4 8"
+      />
+
       {/* points */}
-      {yesPoints.map((p, i) => (
-        // triangle pointing up
+      {noPoints.map((p, i) => (
+        // triangle pointing down (red points)
         <polygon
           key={i}
           points={`
-           ${px(p)},${py(p) - 6}
-            ${px(p) - 3 * V3},${py(p) + 3}
-            ${px(p) + 3 * V3},${py(p) + 3}`}
-          fill="green"
+            ${px(p)},${py(p) + 6}
+            ${px(p) - 3 * V3},${py(p) - 3}
+            ${px(p) + 3 * V3},${py(p) - 3}`}
+          fill="#ef4444"
+          stroke="#b91c1c"
+          strokeWidth={0.5}
         />
       ))}
-      {noPoints.map((p, i) => (
-        // triangle pointing down
+
+      {yesPoints.map((p, i) => (
+        // triangle pointing up (green points)
         <polygon
           key={i}
           points={`
-            ${px(p)},${py(p) + 6}
-            ${px(p) - 3 * V3},${py(p) - 3}
-            ${px(p) + 3 * V3},${py(p) - 3}`}
-          fill="red"
+           ${px(p)},${py(p) - 6}
+            ${px(p) - 3 * V3},${py(p) + 3}
+            ${px(p) + 3 * V3},${py(p) + 3}`}
+          fill="#10b981"
+          stroke="#047857"
+          strokeWidth={0.5}
         />
       ))}
-      {/* line x = y */}
-      <line
-        x1={xScale(0)}
-        y1={yScale(0)}
-        x2={xScale(1)}
-        y2={yScale(1)}
-        stroke="rgb(99 102 241)"
-        strokeWidth={1}
-        strokeDasharray="4 8"
-      />
     </SVGChart>
   )
 }