feat: prevent overlapping of blips

src/components/Radar/Chart.tsx

@@ -86,29 +86,8 @@ const _Chart: FC<ChartProps> = ({
     const ring = rings.find((r) => r.id === item.ring);
     const quadrant = quadrants.find((q) => q.id === item.quadrant);
     if (!ring || !quadrant) return null; // If no ring or quadrant, don't render item
+    const [x, y] = item.position;
 
-    const padding = 15; // Padding in pixels
-    const paddingAngle = 10; // Padding in degrees
-
-    // Random factors to determine position within the ring
-    const [randomRadius, randomAngleFactor] = item.random || [
-      Math.sqrt(Math.random()),
-      Math.random(),
-    ];
-    const innerRadius =
-      (rings[rings.indexOf(ring) - 1]?.radius || 0) + padding / center; // Add inner padding
-    const outerRadius = (ring.radius || 1) - padding / center; // Subtract outer padding
-    const ringWidth = (outerRadius - innerRadius) * center; // Width of the ring in the SVG
-
-    // Calculate the position within the ring
-    const itemRadius = innerRadius * center + randomRadius * ringWidth;
-    // Calculate the angle with padding offset, avoiding the exact edges
-    const startAngle = startAngles[quadrant.position - 1] + paddingAngle;
-    const endAngle = startAngle + 90 - 2 * paddingAngle; // Subtract padding from both sides
-    const itemAngle = startAngle + (endAngle - startAngle) * randomAngleFactor;
-
-    // Convert polar coordinates to cartesian for the item's position
-    const { x, y } = polarToCartesian(itemRadius, itemAngle);
     return (
       <Link
         key={item.id}

src/lib/types.ts

@@ -24,7 +24,7 @@ export interface Item {
   tags: string[];
   release: Release;
   revisions?: Revision[];
-  random?: [radius: number, angle: number];
+  position: [x: number, y: number];
 }
 
 export interface Ring {

src/pages/index.tsx

@@ -5,6 +5,7 @@ import { Radar } from "@/components/Radar/Radar";
 import { Tags } from "@/components/Tags/Tags";
 import {
   getAppName,
+  getChartConfig,
   getItems,
   getQuadrants,
   getReleases,
@@ -17,6 +18,7 @@ const Home: CustomPage = () => {
   const router = useRouter();
   const tag = router.query.tag as string | undefined;
   const appName = getAppName();
+  const chartConfig = getChartConfig();
   const version = getReleases().length;
   const rings = getRings();
   const quadrants = getQuadrants();
@@ -33,7 +35,12 @@ const Home: CustomPage = () => {
           Version #{version}
         </span>
       </h1>
-      <Radar quadrants={quadrants} rings={rings} items={items} />
+      <Radar
+        size={chartConfig.size}
+        quadrants={quadrants}
+        rings={rings}
+        items={items}
+      />
       <Tags tags={tags} activeTag={tag} />
       <QuadrantList items={items} />
     </>