From a0c54b50fcac10b954d22ebbbc64429b0f29a3f6 Mon Sep 17 00:00:00 2001
From: Mark Greene <markgreene5833@gmail.com>
Date: Sat, 10 Oct 2026 11:45:07 +1300
Subject: [PATCH 1/9] Feature: tank distribution scale on Tankopedia stats

---
 .../components/InfoWithDelta.tsx              | 34 ++++++---
 .../Characteristics/components/StatScale.tsx  | 71 +++++++++++++++++++
 2 files changed, 97 insertions(+), 8 deletions(-)
 create mode 100644 packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx

diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx
index 7d910738d..352317ddf 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx
@@ -1,5 +1,5 @@
 import { createDefaultSkills } from "@blitzkit/core";
-import { Flex, Progress, Text } from "@radix-ui/themes";
+import { Box, Flex, Progress, Text } from "@radix-ui/themes";
 import { clamp } from "lodash-es";
 import { memo, useMemo, type ComponentProps, type ReactNode } from "react";
 import { api } from "../../../../../../core/blitzkit/api";
@@ -16,6 +16,7 @@ import {
   TankopediaRelativeAgainst,
 } from "../../../../../../stores/tankopedia";
 import { Info, type InfoProps } from "./Info";
+import { StatScale } from "./StatScale";
 
 type InfoWithDeltaProps = Omit<InfoProps, "name"> & {
   stats: TankCharacteristics;
@@ -122,6 +123,15 @@ export const InfoWithDelta = memo<InfoWithDeltaProps>(
           return othersValue !== undefined;
         }) as TankCharacteristics[];
     }, [relativeAgainst, shellIndex, equipmentMatrix, equalize]);
+    const values = useMemo(
+      () =>
+        others.map((tank) =>
+          typeof props.value === "function"
+            ? props.value(tank)!
+            : (tank[props.value] as number),
+        ),
+      [others],
+    );
     const betterTanks = others.filter((tank) => {
       const othersValue =
         typeof props.value === "function"
@@ -161,13 +171,21 @@ export const InfoWithDelta = memo<InfoWithDeltaProps>(
 
         {!noRanking && (
           <Flex pl={indent ? "2" : "0"} align="center" gap="2">
-            <Progress
-              variant="soft"
-              size="1"
-              value={goodness * 100}
-              color={color}
-              style={{ height: "0.125rem", opacity: 0.5 }}
-            />
+            <Box position="relative" flexGrow="1">
+              <StatScale
+                values={values}
+                value={uhWhatDoICallThisVariable}
+                lowerIsBetter={deltaType === "lowerIsBetter"}
+              />
+
+              <Progress
+                variant="soft"
+                size="1"
+                value={goodness * 100}
+                color={color}
+                style={{ height: "0.125rem", opacity: 0.5 }}
+              />
+            </Box>
 
             <Text color="gray" size="1">
               {clamp(betterTanks.length + 1, 1, others.length)} /{" "}
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
new file mode 100644
index 000000000..32f867b01
--- /dev/null
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
@@ -0,0 +1,71 @@
+import { memo, useMemo } from "react";
+
+const RESOLUTION = 1000;
+const HEIGHT = 9;
+const DENSE_TICKS = 100;
+
+interface StatScaleProps {
+  values: number[];
+  value: number;
+  lowerIsBetter?: boolean;
+}
+
+export const StatScale = memo<StatScaleProps>(
+  ({ values, value, lowerIsBetter }) => {
+    const ticks = useMemo(() => {
+      const min = Math.min(value, ...values);
+      const max = Math.max(value, ...values);
+      const range = max - min;
+      const counts = new Map<number, number>();
+
+      for (const other of values) {
+        const raw = range === 0 ? 0.5 : (other - min) / range;
+        const x = Math.round((lowerIsBetter ? 1 - raw : raw) * RESOLUTION);
+
+        if (x === 0 || x === RESOLUTION) continue;
+
+        counts.set(x, (counts.get(x) ?? 0) + 1);
+      }
+
+      return Array.from(counts, ([x, count]) => ({
+        x,
+        color:
+          count === 1
+            ? "var(--gray-a5)"
+            : count <= 3
+              ? "var(--gray-a6)"
+              : "var(--gray-a7)",
+      }));
+    }, [values, value, lowerIsBetter]);
+
+    return (
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          bottom: 0,
+          left: 0,
+          width: "100%",
+          height: HEIGHT,
+          margin: "auto 0",
+          opacity: Math.min(1, Math.sqrt(DENSE_TICKS / ticks.length)),
+          pointerEvents: "none",
+        }}
+      >
+        {ticks.map(({ x, color }) => (
+          <div
+            key={x}
+            style={{
+              position: "absolute",
+              top: 0,
+              left: `${(x / RESOLUTION) * 100}%`,
+              width: 1,
+              height: "100%",
+              backgroundColor: color,
+            }}
+          />
+        ))}
+      </div>
+    );
+  },
+);

From b65229dc80f1928faa7050c1f218f61dd43ddd59 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 1 Nov 2026 13:03:37 -0600
Subject: [PATCH 2/9] remove granuality

---
 .../components/Characteristics/components/StatScale.tsx    | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
index 32f867b01..d124a2c81 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
@@ -1,6 +1,5 @@
 import { memo, useMemo } from "react";
 
-const RESOLUTION = 1000;
 const HEIGHT = 9;
 const DENSE_TICKS = 100;
 
@@ -20,9 +19,9 @@ export const StatScale = memo<StatScaleProps>(
 
       for (const other of values) {
         const raw = range === 0 ? 0.5 : (other - min) / range;
-        const x = Math.round((lowerIsBetter ? 1 - raw : raw) * RESOLUTION);
+        const x = lowerIsBetter ? 1 - raw : raw;
 
-        if (x === 0 || x === RESOLUTION) continue;
+        if (x === 0 || x === 1) continue;
 
         counts.set(x, (counts.get(x) ?? 0) + 1);
       }
@@ -58,7 +57,7 @@ export const StatScale = memo<StatScaleProps>(
             style={{
               position: "absolute",
               top: 0,
-              left: `${(x / RESOLUTION) * 100}%`,
+              left: `${x * 100}%`,
               width: 1,
               height: "100%",
               backgroundColor: color,

From ff507ed4e61ada022fcbe1e576823568a609cb09 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 1 Nov 2026 13:05:23 -0600
Subject: [PATCH 3/9] use canvas

---
 .../Characteristics/components/StatScale.tsx  | 57 ++++++++++++-------
 1 file changed, 35 insertions(+), 22 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
index d124a2c81..0be1f2904 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
@@ -1,4 +1,4 @@
-import { memo, useMemo } from "react";
+import { memo, useEffect, useMemo, useRef } from "react";
 
 const HEIGHT = 9;
 const DENSE_TICKS = 100;
@@ -11,6 +11,7 @@ interface StatScaleProps {
 
 export const StatScale = memo<StatScaleProps>(
   ({ values, value, lowerIsBetter }) => {
+    const canvas = useRef<HTMLCanvasElement>(null);
     const ticks = useMemo(() => {
       const min = Math.min(value, ...values);
       const max = Math.max(value, ...values);
@@ -29,16 +30,42 @@ export const StatScale = memo<StatScaleProps>(
       return Array.from(counts, ([x, count]) => ({
         x,
         color:
-          count === 1
-            ? "var(--gray-a5)"
-            : count <= 3
-              ? "var(--gray-a6)"
-              : "var(--gray-a7)",
+          count === 1 ? "--gray-a5" : count <= 3 ? "--gray-a6" : "--gray-a7",
       }));
     }, [values, value, lowerIsBetter]);
 
+    useEffect(() => {
+      const element = canvas.current;
+      if (!element) return;
+
+      const draw = () => {
+        const { width } = element.getBoundingClientRect();
+        const pixelRatio = window.devicePixelRatio || 1;
+        const context = element.getContext("2d");
+        if (!context) return;
+
+        element.width = Math.round(width * pixelRatio);
+        element.height = Math.round(HEIGHT * pixelRatio);
+        context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+
+        const styles = getComputedStyle(element);
+        for (const { x, color } of ticks) {
+          context.fillStyle = styles.getPropertyValue(color);
+          context.fillRect(x * width, 0, 1, HEIGHT);
+        }
+      };
+
+      const observer = new ResizeObserver(draw);
+      observer.observe(element);
+      draw();
+
+      return () => observer.disconnect();
+    }, [ticks]);
+
     return (
-      <div
+      <canvas
+        ref={canvas}
+        aria-hidden="true"
         style={{
           position: "absolute",
           top: 0,
@@ -50,21 +77,7 @@ export const StatScale = memo<StatScaleProps>(
           opacity: Math.min(1, Math.sqrt(DENSE_TICKS / ticks.length)),
           pointerEvents: "none",
         }}
-      >
-        {ticks.map(({ x, color }) => (
-          <div
-            key={x}
-            style={{
-              position: "absolute",
-              top: 0,
-              left: `${x * 100}%`,
-              width: 1,
-              height: "100%",
-              backgroundColor: color,
-            }}
-          />
-        ))}
-      </div>
+      />
     );
   },
 );

From 62637418e5fd38be5e6c32972c4ec7eedcd1adbe Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 1 Nov 2026 13:07:22 -0600
Subject: [PATCH 4/9] no gray picking

---
 .../Characteristics/components/StatScale.tsx       | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
index 0be1f2904..4462ddb8b 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
@@ -16,7 +16,7 @@ export const StatScale = memo<StatScaleProps>(
       const min = Math.min(value, ...values);
       const max = Math.max(value, ...values);
       const range = max - min;
-      const counts = new Map<number, number>();
+      const positions = new Set<number>();
 
       for (const other of values) {
         const raw = range === 0 ? 0.5 : (other - min) / range;
@@ -24,14 +24,10 @@ export const StatScale = memo<StatScaleProps>(
 
         if (x === 0 || x === 1) continue;
 
-        counts.set(x, (counts.get(x) ?? 0) + 1);
+        positions.add(x);
       }
 
-      return Array.from(counts, ([x, count]) => ({
-        x,
-        color:
-          count === 1 ? "--gray-a5" : count <= 3 ? "--gray-a6" : "--gray-a7",
-      }));
+      return Array.from(positions);
     }, [values, value, lowerIsBetter]);
 
     useEffect(() => {
@@ -49,8 +45,8 @@ export const StatScale = memo<StatScaleProps>(
         context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
 
         const styles = getComputedStyle(element);
-        for (const { x, color } of ticks) {
-          context.fillStyle = styles.getPropertyValue(color);
+        context.fillStyle = styles.getPropertyValue("--gray-a5");
+        for (const x of ticks) {
           context.fillRect(x * width, 0, 1, HEIGHT);
         }
       };

From be0be90bdb13d66bd392fa8d655a1a1b40ff5369 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 1 Nov 2026 13:15:06 -0600
Subject: [PATCH 5/9] Revert "no gray picking"

This reverts commit 62637418e5fd38be5e6c32972c4ec7eedcd1adbe.
---
 .../Characteristics/components/StatScale.tsx       | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
index 4462ddb8b..0be1f2904 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
@@ -16,7 +16,7 @@ export const StatScale = memo<StatScaleProps>(
       const min = Math.min(value, ...values);
       const max = Math.max(value, ...values);
       const range = max - min;
-      const positions = new Set<number>();
+      const counts = new Map<number, number>();
 
       for (const other of values) {
         const raw = range === 0 ? 0.5 : (other - min) / range;
@@ -24,10 +24,14 @@ export const StatScale = memo<StatScaleProps>(
 
         if (x === 0 || x === 1) continue;
 
-        positions.add(x);
+        counts.set(x, (counts.get(x) ?? 0) + 1);
       }
 
-      return Array.from(positions);
+      return Array.from(counts, ([x, count]) => ({
+        x,
+        color:
+          count === 1 ? "--gray-a5" : count <= 3 ? "--gray-a6" : "--gray-a7",
+      }));
     }, [values, value, lowerIsBetter]);
 
     useEffect(() => {
@@ -45,8 +49,8 @@ export const StatScale = memo<StatScaleProps>(
         context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
 
         const styles = getComputedStyle(element);
-        context.fillStyle = styles.getPropertyValue("--gray-a5");
-        for (const x of ticks) {
+        for (const { x, color } of ticks) {
+          context.fillStyle = styles.getPropertyValue(color);
           context.fillRect(x * width, 0, 1, HEIGHT);
         }
       };

From 71e9e6fd5b0a264e2c9e707830a607ac0febe82a Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 1 Nov 2026 13:15:06 -0600
Subject: [PATCH 6/9] Revert "use canvas"

This reverts commit ff507ed4e61ada022fcbe1e576823568a609cb09.
---
 .../Characteristics/components/StatScale.tsx  | 57 +++++++------------
 1 file changed, 22 insertions(+), 35 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
index 0be1f2904..d124a2c81 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
@@ -1,4 +1,4 @@
-import { memo, useEffect, useMemo, useRef } from "react";
+import { memo, useMemo } from "react";
 
 const HEIGHT = 9;
 const DENSE_TICKS = 100;
@@ -11,7 +11,6 @@ interface StatScaleProps {
 
 export const StatScale = memo<StatScaleProps>(
   ({ values, value, lowerIsBetter }) => {
-    const canvas = useRef<HTMLCanvasElement>(null);
     const ticks = useMemo(() => {
       const min = Math.min(value, ...values);
       const max = Math.max(value, ...values);
@@ -30,42 +29,16 @@ export const StatScale = memo<StatScaleProps>(
       return Array.from(counts, ([x, count]) => ({
         x,
         color:
-          count === 1 ? "--gray-a5" : count <= 3 ? "--gray-a6" : "--gray-a7",
+          count === 1
+            ? "var(--gray-a5)"
+            : count <= 3
+              ? "var(--gray-a6)"
+              : "var(--gray-a7)",
       }));
     }, [values, value, lowerIsBetter]);
 
-    useEffect(() => {
-      const element = canvas.current;
-      if (!element) return;
-
-      const draw = () => {
-        const { width } = element.getBoundingClientRect();
-        const pixelRatio = window.devicePixelRatio || 1;
-        const context = element.getContext("2d");
-        if (!context) return;
-
-        element.width = Math.round(width * pixelRatio);
-        element.height = Math.round(HEIGHT * pixelRatio);
-        context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-
-        const styles = getComputedStyle(element);
-        for (const { x, color } of ticks) {
-          context.fillStyle = styles.getPropertyValue(color);
-          context.fillRect(x * width, 0, 1, HEIGHT);
-        }
-      };
-
-      const observer = new ResizeObserver(draw);
-      observer.observe(element);
-      draw();
-
-      return () => observer.disconnect();
-    }, [ticks]);
-
     return (
-      <canvas
-        ref={canvas}
-        aria-hidden="true"
+      <div
         style={{
           position: "absolute",
           top: 0,
@@ -77,7 +50,21 @@ export const StatScale = memo<StatScaleProps>(
           opacity: Math.min(1, Math.sqrt(DENSE_TICKS / ticks.length)),
           pointerEvents: "none",
         }}
-      />
+      >
+        {ticks.map(({ x, color }) => (
+          <div
+            key={x}
+            style={{
+              position: "absolute",
+              top: 0,
+              left: `${x * 100}%`,
+              width: 1,
+              height: "100%",
+              backgroundColor: color,
+            }}
+          />
+        ))}
+      </div>
     );
   },
 );

From 7bfd930ceaa8481fe6267f474e92d7f7e567b166 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 1 Nov 2026 13:15:06 -0600
Subject: [PATCH 7/9] Revert "remove granuality"

This reverts commit b65229dc80f1928faa7050c1f218f61dd43ddd59.
---
 .../components/Characteristics/components/StatScale.tsx    | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
index d124a2c81..32f867b01 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
@@ -1,5 +1,6 @@
 import { memo, useMemo } from "react";
 
+const RESOLUTION = 1000;
 const HEIGHT = 9;
 const DENSE_TICKS = 100;
 
@@ -19,9 +20,9 @@ export const StatScale = memo<StatScaleProps>(
 
       for (const other of values) {
         const raw = range === 0 ? 0.5 : (other - min) / range;
-        const x = lowerIsBetter ? 1 - raw : raw;
+        const x = Math.round((lowerIsBetter ? 1 - raw : raw) * RESOLUTION);
 
-        if (x === 0 || x === 1) continue;
+        if (x === 0 || x === RESOLUTION) continue;
 
         counts.set(x, (counts.get(x) ?? 0) + 1);
       }
@@ -57,7 +58,7 @@ export const StatScale = memo<StatScaleProps>(
             style={{
               position: "absolute",
               top: 0,
-              left: `${x * 100}%`,
+              left: `${(x / RESOLUTION) * 100}%`,
               width: 1,
               height: "100%",
               backgroundColor: color,

From e4b49e16007597ceca55b05995f42c0cfb63900c Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 1 Nov 2026 13:20:02 -0600
Subject: [PATCH 8/9] use canvas

---
 .../Characteristics/components/StatScale.tsx  | 72 ++++++++++++-------
 1 file changed, 46 insertions(+), 26 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
index 32f867b01..5a18fa107 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
@@ -1,4 +1,4 @@
-import { memo, useMemo } from "react";
+import { memo, useEffect, useMemo, useRef } from "react";
 
 const RESOLUTION = 1000;
 const HEIGHT = 9;
@@ -12,6 +12,7 @@ interface StatScaleProps {
 
 export const StatScale = memo<StatScaleProps>(
   ({ values, value, lowerIsBetter }) => {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
     const ticks = useMemo(() => {
       const min = Math.min(value, ...values);
       const max = Math.max(value, ...values);
@@ -27,19 +28,52 @@ export const StatScale = memo<StatScaleProps>(
         counts.set(x, (counts.get(x) ?? 0) + 1);
       }
 
-      return Array.from(counts, ([x, count]) => ({
-        x,
-        color:
-          count === 1
-            ? "var(--gray-a5)"
-            : count <= 3
-              ? "var(--gray-a6)"
-              : "var(--gray-a7)",
-      }));
+      return Array.from(counts, ([x, count]) => ({ x }));
     }, [values, value, lowerIsBetter]);
 
+    useEffect(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+
+      const draw = () => {
+        const { width } = canvas.getBoundingClientRect();
+        const pixelRatio = window.devicePixelRatio || 1;
+        const canvasWidth = Math.ceil(width * pixelRatio);
+        const canvasHeight = Math.ceil(HEIGHT * pixelRatio);
+
+        if (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
+          canvas.width = canvasWidth;
+          canvas.height = canvasHeight;
+        }
+
+        const context = canvas.getContext("2d");
+        if (!context) return;
+
+        context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+        context.clearRect(0, 0, width, HEIGHT);
+
+        const styles = getComputedStyle(canvas);
+        for (const { x } of ticks) {
+          context.fillStyle = styles.getPropertyValue("--gray-a5").trim();
+          context.fillRect((x / RESOLUTION) * width, 0, 1, HEIGHT);
+        }
+      };
+
+      const observer = new ResizeObserver(draw);
+      observer.observe(canvas);
+      window.addEventListener("resize", draw);
+      draw();
+
+      return () => {
+        observer.disconnect();
+        window.removeEventListener("resize", draw);
+      };
+    }, [ticks]);
+
     return (
-      <div
+      <canvas
+        ref={canvasRef}
+        aria-hidden="true"
         style={{
           position: "absolute",
           top: 0,
@@ -51,21 +85,7 @@ export const StatScale = memo<StatScaleProps>(
           opacity: Math.min(1, Math.sqrt(DENSE_TICKS / ticks.length)),
           pointerEvents: "none",
         }}
-      >
-        {ticks.map(({ x, color }) => (
-          <div
-            key={x}
-            style={{
-              position: "absolute",
-              top: 0,
-              left: `${(x / RESOLUTION) * 100}%`,
-              width: 1,
-              height: "100%",
-              backgroundColor: color,
-            }}
-          />
-        ))}
-      </div>
+      />
     );
   },
 );

From f4894655b0eb3c8a1fd8e1f96f2c2c799d55ecf4 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 1 Nov 2026 13:23:35 -0600
Subject: [PATCH 9/9] yeah this is fine

---
 .../Characteristics/components/InfoWithDelta.tsx       |  6 +++++-
 .../Characteristics/components/StatScale.tsx           | 10 +++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx
index 352317ddf..5e0fe27f5 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx
@@ -183,7 +183,11 @@ export const InfoWithDelta = memo<InfoWithDeltaProps>(
                 size="1"
                 value={goodness * 100}
                 color={color}
-                style={{ height: "0.125rem", opacity: 0.5 }}
+                style={{
+                  position: "relative",
+                  height: "0.125rem",
+                  opacity: 0.75,
+                }}
               />
             </Box>
 
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
index 5a18fa107..a032c46d2 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatScale.tsx
@@ -1,7 +1,7 @@
 import { memo, useEffect, useMemo, useRef } from "react";
 
 const RESOLUTION = 1000;
-const HEIGHT = 9;
+const HEIGHT = 8;
 const DENSE_TICKS = 100;
 
 interface StatScaleProps {
@@ -17,7 +17,7 @@ export const StatScale = memo<StatScaleProps>(
       const min = Math.min(value, ...values);
       const max = Math.max(value, ...values);
       const range = max - min;
-      const counts = new Map<number, number>();
+      const positions = new Set<number>();
 
       for (const other of values) {
         const raw = range === 0 ? 0.5 : (other - min) / range;
@@ -25,10 +25,10 @@ export const StatScale = memo<StatScaleProps>(
 
         if (x === 0 || x === RESOLUTION) continue;
 
-        counts.set(x, (counts.get(x) ?? 0) + 1);
+        positions.add(x);
       }
 
-      return Array.from(counts, ([x, count]) => ({ x }));
+      return Array.from(positions, (x) => ({ x }));
     }, [values, value, lowerIsBetter]);
 
     useEffect(() => {
@@ -54,7 +54,7 @@ export const StatScale = memo<StatScaleProps>(
 
         const styles = getComputedStyle(canvas);
         for (const { x } of ticks) {
-          context.fillStyle = styles.getPropertyValue("--gray-a5").trim();
+          context.fillStyle = styles.getPropertyValue("--gray-a6").trim();
           context.fillRect((x / RESOLUTION) * width, 0, 1, HEIGHT);
         }
       };