sunburst style tweaks

frontend/src/components/Sunburst.module.css

@@ -19,6 +19,10 @@
   height: 20px;
 }
 
+.chart {
+  justify-self: center;
+}
+
 .segment {
   cursor: pointer;
   transition: opacity var(--fast);
@@ -47,7 +51,7 @@
   padding: 5px;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 800px) {
   .container {
     grid-template-columns: 1fr;
   }

frontend/src/components/Sunburst.tsx

@@ -73,10 +73,19 @@ const Sunburst = ({ title, data }: Props) => {
   const container = useRef<HTMLDivElement>(null);
   const svg = useRef<SVGSVGElement>(null);
 
-  /** fit viewBox after any change */
+  const [maxHeight, setMaxHeight] = useState(99999);
+
   useEffect(() => {
-    if (svg.current) fitViewbox(svg.current, 0.01);
-  });
+    if (!svg.current) return;
+    /** fit viewBox to contents */
+    const { height } = fitViewbox(svg.current, 0.01);
+
+    /** set max dimensions so svg text isn't bigger than page text */
+    const pageFontSize = parseFloat(
+      window.getComputedStyle(svg.current).fontSize,
+    );
+    setMaxHeight((height / fontSize) * pageFontSize);
+  }, []);
 
   /** "trail" of breadcrumbs through tree of items */
   const [breadcrumbs, setBreadcrumbs] = useState<ItemDerived[]>([]);
@@ -206,7 +215,7 @@ const Sunburst = ({ title, data }: Props) => {
         </div>
 
         {/* chart container */}
-        <svg ref={svg} className={classes.chart}>
+        <svg ref={svg} className={classes.chart} style={{ maxHeight }}>
           <Segment children={derived} selectItem={selectItem} />
         </svg>
 
@@ -217,7 +226,7 @@ const Sunburst = ({ title, data }: Props) => {
             gap="sm"
             gapRatio={1}
             direction="column"
-            hAlign="stretch"
+            hAlign="right"
             vAlign="top"
           >
             {breadcrumbs.map((item, index) => (
@@ -378,7 +387,8 @@ const Segment = ({
           <text
             className={classes.label}
             textAnchor="middle"
-            dominantBaseline="middle"
+            // dominantBaseline="central"
+            dy="0.5ex"
             fontSize={fontSize}
             fill={theme["--black"]}
           >

frontend/src/util/dom.ts

@@ -161,19 +161,16 @@ export const isCovering = (
 
 /** fit view box to contents of svg */
 export const fitViewbox = (svg?: SVGSVGElement, paddingPercent = 0) => {
-  if (!svg) return;
-  const { x, y, width, height } = svg.getBBox();
+  if (!svg) return { x: 0, y: 0, width: 100, height: 100 };
+  let { x, y, width, height } = svg.getBBox();
   const padding = Math.min(width, height) * paddingPercent;
-  const viewBox = [
-    x - padding,
-    y - padding,
-    width + padding * 2,
-    height + padding * 2,
-  ]
-    .map((v) => Math.round(v))
-    .join(" ");
+  x -= padding;
+  y -= padding;
+  width += padding * 2;
+  height += padding * 2;
+  const viewBox = [x, y, width, height].map((v) => Math.round(v)).join(" ");
   svg.setAttribute("viewBox", viewBox);
-  return viewBox;
+  return { x, y, width, height };
 };
 
 /** open browser print dialog with just one element shown */