@bundle-stats/ui 4.13.0-beta.15 → 4.13.0-beta.17

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

@@ -4,53 +4,111 @@ import { StringParam, useQueryParams } from 'use-query-params';
 
 import { MetricsDisplayType } from '../constants';
 
-const DEFAULT_DISPLAY_TYPE = MetricsDisplayType.TABLE;
-const PARAM_NAME = 'dt';
+const DEFAULT_VALUE = MetricsDisplayType.TABLE;
+const DEFAULT_GROUP_BY = '';
 
-type UseMetricsDisplayType = [MetricsDisplayType, (value: MetricsDisplayType) => void];
+// Display type query param name
+const QUERY_PARAM_VALUE = 'dt';
+// Display type group by param name
+const QUERY_PARAM_GROUP_BY = 'dtg';
 
-export const useMetricsDisplayType = (): UseMetricsDisplayType => {
-  const [{ [PARAM_NAME]: queryDisplayType }, setQueryParams] = useQueryParams({
-    [PARAM_NAME]: StringParam,
+type UseMetricsDisplayType = [
+  { value: MetricsDisplayType; groupBy?: string },
+  (value: MetricsDisplayType, newGroupBy?: string) => void,
+];
+
+export const useMetricsDisplayType = (
+  groups?: Partial<Record<MetricsDisplayType, Array<string>>>,
+): UseMetricsDisplayType => {
+  const [queryParams, setQueryParams] = useQueryParams({
+    [QUERY_PARAM_VALUE]: StringParam,
+    [QUERY_PARAM_GROUP_BY]: StringParam,
   });
-  const [storageDisplayType, setStoreageDisplayType] = useLocalStorage(
-    PARAM_NAME,
-    MetricsDisplayType.TABLE,
+
+  const { [QUERY_PARAM_VALUE]: queryParamValue, [QUERY_PARAM_GROUP_BY]: queryParamGroupBy } =
+    queryParams;
+
+  const [storageValue, setStorageValue] = useLocalStorage(QUERY_PARAM_VALUE, DEFAULT_VALUE);
+  const [storageGroupBy, setStorageGroupBy] = useLocalStorage(
+    QUERY_PARAM_GROUP_BY,
+    DEFAULT_GROUP_BY,
   );
 
-  const displayType = useMemo(() => {
-    const value = queryDisplayType || storageDisplayType;
+  /**
+   * Normalize display type value
+   */
+  const value = useMemo(() => {
+    const resolvedValue = queryParamValue || storageValue;
+
+    if (!resolvedValue) {
+      return DEFAULT_VALUE;
+    }
+
+    if (!Object.values(MetricsDisplayType).includes(resolvedValue as MetricsDisplayType)) {
+      return DEFAULT_VALUE;
+    }
+
+    return resolvedValue as MetricsDisplayType;
+  }, [queryParamValue, storageValue]);
+
+  /**
+   * Normalize display type group by
+   */
+  const groupBy = useMemo(() => {
+    const resolvedValue = queryParamGroupBy || storageGroupBy;
 
-    if (!value) {
-      return DEFAULT_DISPLAY_TYPE;
+    if (!resolvedValue) {
+      return DEFAULT_GROUP_BY;
     }
 
-    if (!Object.values(MetricsDisplayType).includes(value as MetricsDisplayType)) {
-      return DEFAULT_DISPLAY_TYPE;
+    if (!groups?.[value]?.includes(resolvedValue as MetricsDisplayType)) {
+      return DEFAULT_GROUP_BY;
     }
 
-    return value as MetricsDisplayType;
-  }, [queryDisplayType, storageDisplayType]);
+    return resolvedValue;
+  }, [queryParamGroupBy, storageGroupBy]);
 
+  /**
+   * Synchronize query params when values are different
+   */
   useEffect(() => {
-    // Update query string display type when missing
-    if (queryDisplayType !== displayType) {
-      setQueryParams({ [PARAM_NAME]: displayType });
+    if (value !== queryParamValue || groupBy !== queryParamGroupBy) {
+      setQueryParams({ [QUERY_PARAM_VALUE]: value, [QUERY_PARAM_GROUP_BY]: groupBy });
     }
+  }, [value, queryParamValue, groupBy, queryParamGroupBy, setQueryParams]);
 
-    // Update storage state when query string is set and different
-    if (storageDisplayType !== displayType) {
-      setStoreageDisplayType(queryDisplayType as MetricsDisplayType);
+  /**
+   * Synchronize storeage when values are different
+   */
+  useEffect(() => {
+    if (value !== storageValue) {
+      setStorageValue(value);
+    }
+    if (groupBy !== storageValue) {
+      setStorageGroupBy(groupBy);
     }
-  }, [displayType, queryDisplayType, storageDisplayType, setQueryParams, setStoreageDisplayType]);
+  }, [
+    value,
+    storageValue,
+    groupBy,
+    storageGroupBy,
+    setQueryParams,
+    setStorageValue,
+    setStorageGroupBy,
+  ]);
 
   const setDisplayType = useCallback(
-    (value: MetricsDisplayType) => {
-      setStoreageDisplayType(value);
-      setQueryParams({ [PARAM_NAME]: value });
+    (newValue: MetricsDisplayType, newGroupBy: string = DEFAULT_GROUP_BY) => {
+      setStorageValue(newValue);
+      setStorageGroupBy(newGroupBy);
+
+      setQueryParams({
+        [QUERY_PARAM_VALUE]: newValue,
+        [QUERY_PARAM_GROUP_BY]: newGroupBy,
+      });
     },
-    [setStoreageDisplayType, setQueryParams],
+    [setStorageValue, setQueryParams],
   );
 
-  return [displayType, setDisplayType];
+  return [{ value, groupBy }, setDisplayType];
 };

package/src/ui/icon/icon.tsx

@@ -9,6 +9,7 @@ const ICONS = {
   CANCEL: 'close',
   CHEVRON_DOWN: 'chevron-down',
   CHEVRON_UP: 'chevron-up',
+  CHECK: 'check',
   CLOSE: 'close',
   CLOCK: 'clock',
   COMMIT: 'commit',

package/types/components/metrics-display-selector/metrics-display-selector.d.ts

@@ -3,7 +3,9 @@ import { MetricsDisplayType } from '../../constants';
 import { ControlGroup } from '../../ui/control-group';
 interface MetricsDisplaySelectorProps {
     value: MetricsDisplayType;
-    onSelect: (newValue: MetricsDisplayType) => void;
+    groupBy?: string;
+    groups?: Partial<Record<MetricsDisplayType, Array<string>>>;
+    onSelect: (newValue: MetricsDisplayType, groupBy?: string) => void;
 }
 export declare const MetricsDisplaySelector: (props: MetricsDisplaySelectorProps & Omit<React.ComponentProps<typeof ControlGroup>, 'onSelect' | 'value'>) => React.JSX.Element;
 export {};

package/types/components/metrics-treemap/index.d.ts

@@ -1 +1,2 @@
 export * from './metrics-treemap';
+export { getTreemapNodes, getTreemapNodesGroupedByPath } from './metrics-treemap.utils';

package/types/components/metrics-treemap/metrics-treemap.constants.d.ts

@@ -0,0 +1,15 @@
+import type { ReportMetricRow } from '@bundle-stats/utils';
+export interface TreeLeaf {
+    id: string;
+    label: string;
+    value: number;
+    item: ReportMetricRow;
+}
+export interface Tree {
+    id: string;
+    label: string;
+    value: number;
+    children: TreeNodeChildren;
+}
+export type TreeNode = Tree | TreeLeaf;
+export type TreeNodeChildren = Array<TreeNode>;

package/types/components/metrics-treemap/metrics-treemap.d.ts

@@ -1,9 +1,11 @@
-import React from 'react';
-import type { ReportMetricRow } from '@bundle-stats/utils';
+import React, { type ComponentProps, type ReactNode } from 'react';
+import type { Tree } from './metrics-treemap.constants';
 interface MetricsTreemapProps {
-    items: Array<ReportMetricRow>;
-    emptyMessage?: React.ReactNode;
+    treeNodes: Tree;
+    emptyMessage?: ReactNode;
+    nested?: boolean;
     onItemClick?: (entryId: string) => void;
+    onGroupClick?: (entryId: string) => void;
 }
-export declare const MetricsTreemap: (props: MetricsTreemapProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export declare const MetricsTreemap: (props: MetricsTreemapProps & ComponentProps<'div'>) => React.JSX.Element;
 export {};

package/types/components/metrics-treemap/metrics-treemap.utils.d.ts

@@ -0,0 +1,4 @@
+import type { ReportMetricRow } from '@bundle-stats/utils';
+import type { Tree } from './metrics-treemap.constants';
+export declare function getTreemapNodes(items: Array<ReportMetricRow>): Tree;
+export declare function getTreemapNodesGroupedByPath(items: Array<ReportMetricRow>): Tree;

package/types/hooks/metrics-display-type.d.ts

@@ -1,4 +1,10 @@
 import { MetricsDisplayType } from '../constants';
-type UseMetricsDisplayType = [MetricsDisplayType, (value: MetricsDisplayType) => void];
-export declare const useMetricsDisplayType: () => UseMetricsDisplayType;
+type UseMetricsDisplayType = [
+    {
+        value: MetricsDisplayType;
+        groupBy?: string;
+    },
+    (value: MetricsDisplayType, newGroupBy?: string) => void
+];
+export declare const useMetricsDisplayType: (groups?: Partial<Record<MetricsDisplayType, Array<string>>>) => UseMetricsDisplayType;
 export {};

package/types/ui/icon/icon.d.ts

@@ -5,6 +5,7 @@ declare const ICONS: {
     readonly CANCEL: "close";
     readonly CHEVRON_DOWN: "chevron-down";
     readonly CHEVRON_UP: "chevron-up";
+    readonly CHECK: "check";
     readonly CLOSE: "close";
     readonly CLOCK: "clock";
     readonly COMMIT: "commit";
@@ -40,6 +41,7 @@ export declare const Icon: {
         readonly CANCEL: "close";
         readonly CHEVRON_DOWN: "chevron-down";
         readonly CHEVRON_UP: "chevron-up";
+        readonly CHECK: "check";
         readonly CLOSE: "close";
         readonly CLOCK: "clock";
         readonly COMMIT: "commit";