feat(dashboards): Auto-size Big Number widget

static/app/views/dashboards/widgetCard/autoSizedText.stories.tsx

@@ -0,0 +1,51 @@
+import {Fragment} from 'react';
+import styled from '@emotion/styled';
+
+import JSXNode from 'sentry/components/stories/jsxNode';
+import SizingWindow from 'sentry/components/stories/sizingWindow';
+import storyBook from 'sentry/stories/storyBook';
+import {AutoSizedText} from 'sentry/views/dashboards/widgetCard/autoSizedText';
+
+export default storyBook(AutoSizedText, story => {
+  story('Getting Started', () => {
+    return (
+      <Fragment>
+        <p>
+          <JSXNode name="AutoSizedText" /> is a helper component that automatically sizes
+          a piece of text (single line only!) against its parent. It iteratively measures
+          the size of the parent element, and chooses a font size for the child element to
+          fit it perfectly (within reason) inside the parent. For example:
+        </p>
+
+        <SmallSizingWindow>
+          <AutoSizedText>
+            <OneLineSpan>NEWSFLASH, y'all!</OneLineSpan>
+          </AutoSizedText>
+        </SmallSizingWindow>
+
+        <p>
+          This was built for the "Big Number" widget in our Dashboards product. It's not
+          possible to <i>perfectly</i> size the text using only CSS and HTML!
+        </p>
+        <p>
+          To use <JSXNode name="AutoSizedText" />, set it as the child of positioned
+          element of known dimensions. Pass the content you want to size as the{' '}
+          <strong>
+            <code>children</code>
+          </strong>
+          prop. <JSXNode name="AutoSizedText" /> will set the font size of its children to
+          fit into the parent.
+        </p>
+      </Fragment>
+    );
+  });
+});
+
+const SmallSizingWindow = styled(SizingWindow)`
+  width: 300px;
+  height: 200px;
+`;
+
+const OneLineSpan = styled('span')`
+  white-space: nowrap;
+`;

static/app/views/dashboards/widgetCard/autoSizedText.tsx

@@ -0,0 +1,148 @@
+import {useLayoutEffect, useRef} from 'react';
+import styled from '@emotion/styled';
+import * as Sentry from '@sentry/react';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export function AutoSizedText({children}: Props) {
+  const childRef = useRef<HTMLDivElement>(null);
+
+  const fontSize = useRef<number>(0);
+  const fontSizeLowerBound = useRef<number>(0);
+  const fontSizeUpperBound = useRef<number>(0);
+
+  useLayoutEffect(() => {
+    const childElement = childRef.current; // This is `SizedChild`
+    const parentElement = childRef.current?.parentElement; // This is the parent of `AutoSizedText`
+
+    if (!childElement || !parentElement) {
+      return undefined;
+    }
+
+    // On component first mount, register a `ResizeObserver` on the containing element. The handler fires
+    // on component mount, and every time the element changes size after that
+    const observer = new ResizeObserver(entries => {
+      // The entries list contains an array of every observed item. Here it is only one element
+      const entry = entries[0];
+
+      if (!entry) {
+        return;
+      }
+
+      // The resize handler passes the parent's dimensions, so we don't have to get the bounding box
+      const parentDimensions = entry.contentRect;
+
+      // Reset the iteration parameters
+      fontSizeLowerBound.current = 0;
+      fontSizeUpperBound.current = parentDimensions.height;
+
+      let iterationCount = 0;
+
+      const span = Sentry.startInactiveSpan({
+        op: 'function',
+        name: 'AutoSizedText.iterate',
+      });
+
+      // Run the resize iteration in a loop. This blocks the main UI thread and prevents
+      // visible layout jitter. If this was done through a `ResizeObserver` or React State
+      // each step in the resize iteration would be visible to the user
+      while (iterationCount <= ITERATION_LIMIT) {
+        const childDimensions = getElementDimensions(childElement);
+
+        const widthDifference = parentDimensions.width - childDimensions.width;
+        const heightDifference = parentDimensions.height - childDimensions.height;
+
+        const childFitsIntoParent = heightDifference > 0 && widthDifference > 0;
+        const childIsWithinWidthTolerance =
+          Math.abs(widthDifference) <= MAXIMUM_DIFFERENCE;
+        const childIsWithinHeightTolerance =
+          Math.abs(heightDifference) <= MAXIMUM_DIFFERENCE;
+
+        if (
+          childFitsIntoParent &&
+          (childIsWithinWidthTolerance || childIsWithinHeightTolerance)
+        ) {
+          // Stop the iteration, we've found a fit!
+          span.setAttribute('widthDifference', widthDifference);
+          span.setAttribute('heightDifference', heightDifference);
+          break;
+        }
+
+        adjustFontSize(childDimensions, parentDimensions);
+
+        iterationCount += 1;
+      }
+
+      span.setAttribute('iterationCount', iterationCount);
+      span.end();
+    });
+
+    observer.observe(parentElement);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  const adjustFontSize = (childDimensions: Dimensions, parentDimensions: Dimensions) => {
+    const childElement = childRef.current;
+
+    if (!childElement) {
+      return;
+    }
+
+    let newFontSize;
+
+    if (
+      childDimensions.width > parentDimensions.width ||
+      childDimensions.height > parentDimensions.height
+    ) {
+      // The element is bigger than the parent, scale down
+      newFontSize = (fontSizeLowerBound.current + fontSize.current) / 2;
+      fontSizeUpperBound.current = fontSize.current;
+    } else if (
+      childDimensions.width < parentDimensions.width ||
+      childDimensions.height < parentDimensions.height
+    ) {
+      // The element is smaller than the parent, scale up
+      newFontSize = (fontSizeUpperBound.current + fontSize.current) / 2;
+      fontSizeLowerBound.current = fontSize.current;
+    }
+
+    // Store font size in a ref so we don't have to measure styles to get it
+    fontSize.current = newFontSize;
+    childElement.style.fontSize = `${newFontSize}px`;
+  };
+
+  return <SizedChild ref={childRef}>{children}</SizedChild>;
+}
+
+const SizedChild = styled('div')`
+  display: inline-block;
+`;
+
+const ITERATION_LIMIT = 50;
+
+// The maximum difference strongly affects the number of iterations required.
+// A value of 10 means that matches are often found in fewer than 5 iterations.
+// A value of 5 raises it to 6-7. A value of 1 brings it closer to 10. A value of
+// 0 never converges.
+// Note that on modern computers, even with 6x CPU throttling the iterations usually
+// finish in under 5ms.
+const MAXIMUM_DIFFERENCE = 1; // px
+
+type Dimensions = {
+  height: number;
+  width: number;
+};
+
+function getElementDimensions(element: HTMLElement): Dimensions {
+  const bbox = element.getBoundingClientRect();
+
+  return {
+    width: bbox.width,
+    height: bbox.height,
+  };
+}

static/app/views/dashboards/widgetCard/chart.tsx

@@ -1,3 +1,4 @@
+import type React from 'react';
 import {Component} from 'react';
 import type {InjectedRouter} from 'react-router';
 import type {Theme} from '@emotion/react';
@@ -51,6 +52,7 @@ import {
 } from 'sentry/utils/discover/fields';
 import getDynamicText from 'sentry/utils/getDynamicText';
 import {eventViewFromWidget} from 'sentry/views/dashboards/utils';
+import {AutoSizedText} from 'sentry/views/dashboards/widgetCard/autoSizedText';
 
 import {getFormatter} from '../../../components/charts/components/tooltip';
 import {getDatasetConfig} from '../datasetConfig/base';
@@ -243,7 +245,7 @@ class WidgetCardChart extends Component<WidgetCardChartProps, State> {
         ? containerHeight - parseInt(space(1), 10) - parseInt(space(3), 10)
         : `max(min(8vw, 90px), ${space(4)})`;
 
-      return (
+      return !organization.features.includes('auto-size-big-number-widget') ? (
         <BigNumber
           key={`big_number:${result.title}`}
           style={{
@@ -255,6 +257,18 @@ class WidgetCardChart extends Component<WidgetCardChartProps, State> {
             {rendered}
           </Tooltip>
         </BigNumber>
+      ) : expandNumbers ? (
+        <BigText>{rendered}</BigText>
+      ) : (
+        <AutoResizeParent key={`big_number:${result.title}`}>
+          <AutoSizedText>
+            <NumberContainerOverride>
+              <Tooltip title={rendered} showOnlyOnOverflow>
+                {rendered}
+              </Tooltip>
+            </NumberContainerOverride>
+          </AutoSizedText>
+        </AutoResizeParent>
       );
     });
   }
@@ -582,6 +596,7 @@ const BigNumberResizeWrapper = styled('div')`
   height: 100%;
   width: 100%;
   overflow: hidden;
+  position: relative;
 `;
 
 const BigNumber = styled('div')`
@@ -599,6 +614,46 @@ const BigNumber = styled('div')`
   }
 `;
 
+const AutoResizeParent = styled('div')`
+  position: absolute;
+  color: ${p => p.theme.headingColor};
+  inset: ${space(1)} ${space(3)} 0 ${space(3)};
+
+  * {
+    line-height: 1;
+    text-align: left !important;
+  }
+`;
+
+const BigText = styled('div')`
+  display: block;
+  width: 100%;
+  color: ${p => p.theme.headingColor};
+  font-size: max(min(8vw, 90px), 30px);
+  padding: ${space(1)} ${space(3)} 0 ${space(3)};
+  white-space: nowrap;
+
+  * {
+    text-align: left !important;
+  }
+`;
+
+/**
+ * This component overrides the default behavior of `NumberContainer`,
+ * which wraps every single number in big widgets. This override forces
+ * `NumberContainer` to never truncate its values, which makes it possible
+ * to auto-size them.
+ */
+const NumberContainerOverride = styled('div')`
+  display: inline-block;
+
+  * {
+    text-overflow: clip !important;
+    display: inline;
+    white-space: nowrap;
+  }
+`;
+
 const ChartWrapper = styled('div')<{autoHeightResize: boolean; noPadding?: boolean}>`
   ${p => p.autoHeightResize && 'height: 100%;'}
   padding: ${p => (p.noPadding ? `0` : `0 ${space(3)} ${space(3)}`)};