Better text measurement in timeline (#115)

* Better text measurement in timeline * Use shortName for organizations in title
gordonhart · Feb 11, 2025 · 8f93c56 · 8f93c56
1 parent 216540e
commit 8f93c56
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/FactSheet/Timeline.tsx b/src/components/FactSheet/Timeline.tsx
@@ -96,7 +96,10 @@ function renderTimeline(
   const baseColor = '#828282';
 
   ctx.font = `12px ${LABEL_FONT_FAMILY}`;
-  const { width: textWidthPx, actualBoundingBoxAscent: textHeightPx } = ctx.measureText('0000');
+  const years = new Set(items.map(({ date }) => date.getFullYear().toString()));
+  const measurements = [...years].map(year => ctx.measureText(year));
+  const textWidthPx = Math.max(...measurements.map(({ width }) => width));
+  const textHeightPx = Math.max(...measurements.map(({ actualBoundingBoxAscent }) => actualBoundingBoxAscent));
   const timelineLeft = dotRadius * 2 + 1 + textWidthPx;
   ctx.lineWidth = 1;
   ctx.strokeStyle = baseColor;

diff --git a/src/hooks/useFocusItem.ts b/src/hooks/useFocusItem.ts
@@ -72,7 +72,7 @@ function getFocusItem(id: string | null, bodies: Array<CelestialBody>): FocusIte
       type: FocusItemType.ORGANIZATION,
       item: organization,
       color: organization.color,
-      name: organization.name,
+      name: organization.shortName,
     };
   }
   return undefined;