@bundle-stats/ui 4.12.2 → 4.13.0-beta.10

package/src/components/metrics-treemap/metrics-treemap.module.css

@@ -0,0 +1,201 @@
+.root {
+  position: relative;
+  aspect-ratio: 16/9;
+  background: var(--color-background);
+}
+
+.canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  fill: var(--color-text);
+  font-family: var(--font-family);
+  background: var(--color-background);
+}
+
+/** Tile overlay fill background transition */
+.root {
+  transition: var(--ui-transition-out);
+  transition-property: opacity;
+}
+
+/** Leaf wrapper button */
+.leaf {
+  position: absolute;
+  appearance: none;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: none;
+  display: flex;
+  align-items: center;
+  font-family: var(--font-family-fixed);
+  font-size: var(--size-small);
+  line-height: var(--line-height-heading);
+  text-align: left;
+}
+
+.leaf::before {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: currentColor;
+  color: var(--color-background);
+  transition: var(--ui-transition-out);
+  transition-property: opacity;
+  opacity: 0.6;
+}
+
+.leaf:hover::before {
+  transition: var(--ui-transition-in);
+  opacity: 0.4;
+}
+
+.leafContent {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  padding: var(--space-xxsmall) var(--space-xxsmall);
+  gap: var(--space-xxxsmall);
+  line-height: var(--line-height-heading);
+}
+
+/** Align label to other elements on the first column leafs */
+.leafFirstCol .leafContent {
+  padding-left: var(--space-small);
+}
+
+.leadContentLabel {
+  flex: 0 1 auto;
+  width: 100%;
+  min-width: 0;
+  max-height: calc(2em * var(--line-height-heading));
+  overflow: hidden;
+}
+
+.leadContentValue {
+  flex: 0 0 auto;
+  max-width: calc(100% + var(--space-xxsmall));
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.leadContentMetric {
+  font-weight: bold;
+}
+
+.leadContentDelta {
+  margin-left: var(--space-xxxsmall);
+}
+
+/** Tile size variation */
+.leafSmall .leafContent {
+  padding: var(--space-xxxsmall) var(--space-xxsmall);
+  gap: 0;
+  font-size: var(--size-xsmall);
+}
+
+.leafSmall .leadContentLabel {
+  margin-top: 0;
+}
+
+/** Tile diff variation */
+.leaf-NO_CHANGE {
+  color: var(--color-text-light);
+}
+
+.leaf-NO_CHANGE::before {
+  color: var(--color-gray-50);
+  opacity: 0.4;
+}
+
+.leaf-NO_CHANGE:hover::before {
+  opacity: 0.2;
+}
+
+.leaf-HIGH_NEGATIVE::before {
+  color: var(--color-red-100);
+}
+
+.leaf-NEGATIVE::before {
+  color: var(--color-red-50);
+}
+
+.leaf-LOW_NEGATIVE::before {
+  color: var(--color-red-25);
+}
+
+.leaf-LOW_POSITIVE::before {
+  color: var(--color-green-25);
+}
+
+.leaf-POSITIVE::before {
+  color: var(--color-green-50);
+}
+
+.leaf-HIGH_POSITIVE::before {
+  color: var(--color-green-100);
+}
+
+/** empty message */
+.emptyMessage {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.emptyMessageWrapper {
+  max-width: 100%;
+  text-align: center;
+}
+
+/** tooltip */
+.leafContentTooltipAnchor {
+  width: 100%;
+  height: 100%;
+}
+
+.tooltip {
+  z-index: var(--layer-xxhigh);
+  padding: var(--space-xsmall) var(--space-small);
+  border-radius: var(--radius-medium);
+  width: calc(100vw - 2 * var(--space-small));
+  max-width: 340px;
+  outline: none;
+  filter: drop-shadow(var(--shadow-layer-high));
+  will-change: filter;
+  background: var(--color-light);
+  font-size: var(--size-small);
+  pointer-events: none;
+}
+
+/* prevent tooltip portal wrapper from capturing events */
+div[role="presentation"]:has(.tooltip) {
+  pointer-events: none;
+}
+
+
+.leafTooltipArrow svg {
+  display: block;
+  fill: var(--color-background) !important;
+}
+
+.leafTooltipContentTitle {
+  font-size: var(--size-medium);
+}

package/src/components/metrics-treemap/metrics-treemap.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { action } from '@storybook/addon-actions';
+
+// eslint-disable-next-line import/no-relative-packages
+import moduleItemsFixture from '../../../../../fixtures/module-items.json';
+import { MetricsTreemap } from '.';
+
+export default {
+  title: 'Components/MetricsTreemap',
+  component: MetricsTreemap,
+} as Meta;
+
+export const Default: StoryObj = {
+  render: (props: React.ComponentProps<typeof MetricsTreemap>) => (
+    <MetricsTreemap style={{ maxWidth: 'var(--max-width)' }} {...props} />
+  ),
+  args: {
+    items: moduleItemsFixture,
+    onItemClick: action('CLICK'),
+  },
+};

package/src/components/metrics-treemap/metrics-treemap.tsx

@@ -0,0 +1,304 @@
+import React, { RefObject, forwardRef, useCallback, useMemo, useRef } from 'react';
+import { useDebounce, useHoverDirty, useMeasure, useMouseHovered } from 'react-use';
+import cx from 'classnames';
+import type { ReportMetricRow, MetricRunInfo, MetricRunInfoBaseline } from '@bundle-stats/utils';
+import { hierarchy, treemap, treemapSquarify } from 'd3';
+import { Tooltip, TooltipArrow, TooltipAnchor, useTooltipState } from 'ariakit/tooltip';
+
+import { Stack } from '../../layout/stack';
+import { FileName } from '../../ui/file-name';
+import { Delta } from '../delta';
+import { RunInfo } from '../run-info';
+import css from './metrics-treemap.module.css';
+
+const SQUARIFY_RATIO = 1.33;
+const PADDING_OUTER = 0;
+const PADDING_INNER = 2;
+
+type TileSizeDisplay = 'minimal' | 'small' | 'default';
+
+/**
+ * Resolve the tile size using predefined values to avoid
+ * computing the size of the content for every tile
+ */
+const PADDING_TOP = 4;
+const PADDING_BOTTOM = 2; // substracted to allow longer texts to appear
+const PADDING_LEFT = 16;
+const PADDING_RIGHT = 4; // substracted to allow longer texts to not break
+const VERTICAL_SPACING = 4;
+const LINE_HEIGHT = 16;
+const LINE_HEIGHT_SMALL = 13.3;
+
+function resolveLeafSizeDisplay(width: number, height: number): TileSizeDisplay {
+  if (
+    height > PADDING_TOP + PADDING_BOTTOM + VERTICAL_SPACING + LINE_HEIGHT * 2 &&
+    width > PADDING_LEFT + PADDING_RIGHT + 128
+  ) {
+    return 'default';
+  }
+
+  if (
+    height > PADDING_TOP + PADDING_BOTTOM + LINE_HEIGHT_SMALL * 2 &&
+    width > PADDING_LEFT + PADDING_BOTTOM + 48
+  ) {
+    return 'small';
+  }
+
+  return 'minimal';
+}
+
+interface LeafTooltipContentProps {
+  item: ReportMetricRow;
+}
+
+const LeafTooltipContent = (props: LeafTooltipContentProps) => {
+  const { item } = props;
+
+  const currentRun = item.runs[0] as MetricRunInfo;
+  const baselineRun = item.runs[item.runs.length - 1] as MetricRunInfoBaseline;
+
+  return (
+    <Stack space="small" className={css.leafTooltipContent}>
+      <h3 className={css.leafTooltipContentTitle}>
+        <FileName as="code" name={item.label} />
+      </h3>
+      <RunInfo
+        current={currentRun.displayValue}
+        delta={currentRun.displayDeltaPercentage}
+        deltaType={currentRun.deltaType}
+        baseline={baselineRun?.displayValue || '0B'}
+      />
+    </Stack>
+  );
+};
+
+interface LeafContentProps {
+  sizeDisplay: 'minimal' | 'small' | 'default';
+  item: ReportMetricRow;
+  runInfo: MetricRunInfo;
+}
+
+const LeafContent = forwardRef((props: LeafContentProps, ref: React.Ref<HTMLDivElement>) => {
+  const { sizeDisplay, item, runInfo } = props;
+
+  if (sizeDisplay === 'minimal') {
+    return <div className={css.leafContent} ref={ref} />;
+  }
+
+  return (
+    <div className={css.leafContent} ref={ref}>
+      <FileName as="p" className={css.leadContentLabel} name={item.label} />
+      {sizeDisplay !== 'small' && (
+        <p className={css.leadContentValue}>
+          <span className={css.leadContentMetric}>{runInfo.displayValue}</span>
+          <Delta
+            className={css.leadContentDelta}
+            displayValue={runInfo.displayDeltaPercentage}
+            deltaType={runInfo.deltaType}
+          />
+        </p>
+      )}
+    </div>
+  );
+});
+
+const LeafContentWithTooltip = (props: LeafContentProps & { parentRef: RefObject<Element> }) => {
+  const { sizeDisplay, item, runInfo, parentRef } = props;
+
+  const pointer = useMouseHovered(parentRef, { whenHovered: true });
+
+  // Return custom rect based on the mouse position
+  const getAnchorRect = useCallback(() => {
+    // Skip custom component rect area if the pointer position is empty
+    if (pointer.docX === 0 && pointer.docY === 0 && pointer.elW === 0 && pointer.elH === 0) {
+      return null;
+    }
+
+    const newRect = {
+      x: pointer.docX - (document?.defaultView?.scrollX ?? 0),
+      y: pointer.docY - (document?.defaultView?.scrollY ?? 0),
+      w: 1,
+      h: 1,
+    };
+
+    return newRect;
+  }, [pointer.docX, pointer.docY]);
+
+  const tooltipState = useTooltipState({ gutter: 12, getAnchorRect, timeout: 120 });
+
+  // Update tooltip position when poiner values are changing
+  useDebounce(tooltipState.render, 5, [pointer.docX, pointer.docY]);
+
+  return (
+    <>
+      <TooltipAnchor state={tooltipState} className={css.leafContentTooltipAnchor}>
+        <LeafContent sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
+      </TooltipAnchor>
+      <Tooltip state={tooltipState} className={css.tooltip}>
+        <TooltipArrow state={tooltipState} size={16} className={css.leafTooltipArrow} />
+        <LeafTooltipContent item={item} />
+      </Tooltip>
+    </>
+  );
+};
+
+interface TreeNode {
+  id: string;
+  value: number;
+  item: ReportMetricRow;
+  children?: Array<TreeNode>;
+}
+
+interface RootTree {
+  id: string;
+  value: number;
+  children: Array<TreeNode>;
+}
+
+interface LeafProps {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  data: TreeNode;
+  onClick?: (id: string) => void;
+}
+
+const Leaf = (props: LeafProps) => {
+  const { left, top, width, height, data, onClick } = props;
+
+  const { item } = data;
+  const runInfo = item.runs?.[0] as MetricRunInfo;
+
+  const sizeDisplay = useMemo(() => resolveLeafSizeDisplay(width, height), [width, height]);
+  const handleOnClick = useCallback(() => onClick?.(item.key), [item.key, onClick]);
+
+  const leafContentRef = useRef<HTMLButtonElement>(null);
+  const hover = useHoverDirty(leafContentRef);
+
+  const leafClassName = cx(
+    css.leaf,
+    css[`leaf-${runInfo.deltaType}`],
+    sizeDisplay === 'small' && css.leafSmall,
+    left === 0 && css.leafFirstCol,
+  );
+
+  return (
+    <button
+      type="button"
+      onClick={handleOnClick}
+      ref={leafContentRef}
+      style={{ left, top, width, height }}
+      className={leafClassName}
+    >
+      {hover ? (
+        <LeafContentWithTooltip
+          sizeDisplay={sizeDisplay}
+          item={item}
+          runInfo={runInfo}
+          parentRef={leafContentRef}
+        />
+      ) : (
+        <LeafContent sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
+      )}
+    </button>
+  );
+};
+
+interface UseMetricsTreemapHierarchyParams {
+  items: Array<ReportMetricRow>;
+  width: number;
+  height: number;
+}
+
+function useMetricsTreemapHierarchy(params: UseMetricsTreemapHierarchyParams) {
+  const { items, width, height } = params;
+
+  const treemapHierarchy = useMemo(() => {
+    const children = items.map((item) => {
+      /**
+       * Set leaf value to the largest run value to allow to
+       * display the impact of deleted / items
+       */
+      const values = item.runs.map((run) => run?.value || 0);
+      const value = Math.max(...values);
+
+      return {
+        id: item.key,
+        value,
+        item,
+      };
+    });
+
+    const treemapData = {
+      id: 'root',
+      name: 'root',
+      value: 0,
+      children,
+    };
+
+    const customHierarchy = hierarchy<RootTree>(treemapData);
+    customHierarchy.sum((node) => node.value);
+    // @ts-expect-error
+    customHierarchy.sort((a, b) => b.value - a.value);
+
+    return customHierarchy;
+  }, [items]);
+
+  const cells = useMemo(() => {
+    const createTremapLayout = treemap()
+      .size([width, height])
+      .tile(treemapSquarify.ratio(SQUARIFY_RATIO))
+      .paddingOuter(PADDING_OUTER)
+      .paddingInner(PADDING_INNER);
+    // @ts-expect-error
+    const tremapLayout = createTremapLayout(treemapHierarchy);
+
+    return tremapLayout.leaves().filter((leaf) => Boolean(leaf.parent));
+  }, [height, width, treemapHierarchy]);
+
+  return cells;
+}
+
+interface MetricsTreemapProps {
+  items: Array<ReportMetricRow>;
+  emptyMessage?: React.ReactNode;
+  onItemClick?: (entryId: string) => void;
+}
+
+export const MetricsTreemap = (props: MetricsTreemapProps & React.ComponentProps<'div'>) => {
+  const { className = '', items, onItemClick, emptyMessage = 'No data', ...restProps } = props;
+
+  const [containerRef, { width, height }] = useMeasure<HTMLDivElement>();
+  const cells = useMetricsTreemapHierarchy({ items, width, height });
+
+  return (
+    <div className={cx(css.root, className)} {...restProps} ref={containerRef}>
+      {cells.length > 0 ? (
+        <div className={css.canvas}>
+          {cells.map((leaf) => {
+            if (!leaf.parent) {
+              return null;
+            }
+
+            return (
+              <Leaf
+                data={leaf.data as TreeNode}
+                left={leaf.x0}
+                top={leaf.y0}
+                width={leaf.x1 - leaf.x0}
+                height={leaf.y1 - leaf.y0}
+                onClick={onItemClick}
+                key={leaf.id}
+              />
+            );
+          })}
+        </div>
+      ) : (
+        <div className={css.emptyMessage}>
+          <div className={css.emptyMessageWrapper}>{emptyMessage}</div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/sort-button/sort-button.module.css

@@ -3,6 +3,7 @@
   display: inline-block;
   border-radius: var(--radius-small);
   position: relative;
+  color: var(--color-text-ultra-light);
 }
 
 .toggle {

package/src/{constants.js → constants.ts}

@@ -40,3 +40,8 @@ export const SORT = {
   ASC: 'asc',
   DESC: 'desc',
 };
+
+export enum MetricsDisplayType {
+  TABLE = 'table',
+  TREEMAP = 'treemap',
+}

package/src/css/variables.css

@@ -29,20 +29,20 @@
   /*
    * Color scheme:
    * https://coolors.co/287acc-da444e-55b950-efcc1a-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23efcc1a&mcgpalette3=%23353138&mcgpalette4=%23287acc&themename=mcgtheme
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23efcc1a&mcgpalette3=%233e3c49&mcgpalette4=%23287acc&themename=bundle-stats
    * https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
    */
   --color-gray-25: #f9f9fa;
   --color-gray-50: #e8e8e9;
-  --color-gray-100: #c6c5c7;
-  --color-gray-200: #a2a0a4;
-  --color-gray-300: #7e7b80;
-  --color-gray-400: #59565c;
-  --color-gray-500: #353138;
-  --color-gray-600: #302b31;
-  --color-gray-700: #2a252a;
-  --color-gray-800: #231e22;
-  --color-gray-900: #1c181b;
+  --color-gray-100: #c5c5c8;
+  --color-gray-200: #9f9ea4;
+  --color-gray-300: #787780;
+  --color-gray-400: #5b5964;
+  --color-gray-500: #3e3c49;
+  --color-gray-600: #383642;
+  --color-gray-700: #302e39;
+  --color-gray-800: #282731;
+  --color-gray-900: #1b1a21;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -199,7 +199,7 @@
   --outline-hover: 0 0 0 3px var(--color-highlight);
 
   /** Layout */
-  --max-width: 88rem;
+  --max-width: 82rem;
   --entry-info-width: 64rem;
   --entry-info-top: var(--header-height);
 }

package/src/hooks/entry-info.ts

@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+
+interface UseEntryInfoParams {
+  setState: (data: { entryId: string }) => void;
+}
+
+type UseEntryInfo = [() => void, (entryId: string) => void];
+
+/**
+ * Show/hide side panel entry
+ */
+export function useEntryInfo(params: UseEntryInfoParams): UseEntryInfo {
+  const { setState } = params;
+
+  const hideEntryInfo = useCallback(() => setState({ entryId: '' }), [setState]);
+  const showEntryInfo = useCallback((entryId: string) => setState({ entryId }), [setState]);
+
+  return [hideEntryInfo, showEntryInfo];
+}

package/src/hooks/metrics-display-type.ts

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useLocalStorage } from 'react-use';
+import { StringParam, useQueryParams } from 'use-query-params';
+
+import { MetricsDisplayType } from '../constants';
+
+const DEFAULT_DISPLAY_TYPE = MetricsDisplayType.TABLE;
+const PARAM_NAME = 'dt';
+
+type UseMetricsDisplayType = [MetricsDisplayType, (value: MetricsDisplayType) => void];
+
+export const useMetricsDisplayType = (): UseMetricsDisplayType => {
+  const [{ [PARAM_NAME]: queryDisplayType }, setQueryParams] = useQueryParams({
+    [PARAM_NAME]: StringParam,
+  });
+  const [storageDisplayType, setStoreageDisplayType] = useLocalStorage(
+    PARAM_NAME,
+    MetricsDisplayType.TABLE,
+  );
+
+  const displayType = useMemo(() => {
+    const value = queryDisplayType || storageDisplayType;
+
+    if (!value) {
+      return DEFAULT_DISPLAY_TYPE;
+    }
+
+    if (!Object.values(MetricsDisplayType).includes(value as MetricsDisplayType)) {
+      return DEFAULT_DISPLAY_TYPE;
+    }
+
+    return value as MetricsDisplayType;
+  }, [queryDisplayType, storageDisplayType]);
+
+  useEffect(() => {
+    // Update query string display type when missing
+    if (queryDisplayType !== displayType) {
+      setQueryParams({ [PARAM_NAME]: displayType });
+    }
+
+    // Update storage state when query string is set and different
+    if (storageDisplayType !== displayType) {
+      setStoreageDisplayType(queryDisplayType as MetricsDisplayType);
+    }
+  }, [displayType, queryDisplayType, storageDisplayType, setQueryParams, setStoreageDisplayType]);
+
+  const setDisplayType = useCallback(
+    (value: MetricsDisplayType) => {
+      setStoreageDisplayType(value);
+      setQueryParams({ [PARAM_NAME]: value });
+    },
+    [setStoreageDisplayType, setQueryParams],
+  );
+
+  return [displayType, setDisplayType];
+};