@bundle-stats/ui 4.13.0-beta.9 → 4.13.0-rc.1

package/src/components/metrics-display-selector/metrics-display-selector.tsx

@@ -4,44 +4,102 @@ import cx from 'classnames';
 import { MetricsDisplayType } from '../../constants';
 import { Button } from '../../ui/button';
 import { ControlGroup } from '../../ui/control-group';
+import { Dropdown, DropdownItem } from '../../ui/dropdown';
 import { Icon } from '../../ui/icon';
 import css from './metrics-display-selector.module.css';
+import { FlexStack } from '../../layout';
+
+const DEFAULT_GROUP_BY = '';
+
+const METRICS_DISPLAY_MAP = {
+  [MetricsDisplayType.TABLE]: {
+    glyph: Icon.ICONS.TABLE,
+    label: 'Table',
+  },
+  [MetricsDisplayType.TREEMAP]: {
+    glyph: Icon.ICONS.TREEMAP,
+    label: 'Treemap',
+  },
+};
+
+const displayTypes = Object.values(MetricsDisplayType);
 
 interface MetricsDisplaySelectorProps {
   value: MetricsDisplayType;
-  onSelect: (newValue: MetricsDisplayType) => void;
+  groupBy?: string;
+  groups?: Partial<Record<MetricsDisplayType, Array<string>>>;
+  onSelect: (newValue: MetricsDisplayType, groupBy?: string) => void;
 }
 
 export const MetricsDisplaySelector = (
   props: MetricsDisplaySelectorProps &
     Omit<React.ComponentProps<typeof ControlGroup>, 'onSelect' | 'value'>,
 ) => {
-  const { className = '', value, onSelect, ...restProps } = props;
+  const { value, groupBy = DEFAULT_GROUP_BY, groups = {}, onSelect, ...restProps } = props;
 
   return (
-    <ControlGroup className={cx(css.root, className)} {...restProps}>
-      <Button
-        outline
-        active={value === MetricsDisplayType.TABLE}
-        size="small"
-        type="button"
-        glyph={Icon.ICONS.TABLE}
-        onClick={() => onSelect(MetricsDisplayType.TABLE)}
-        className={css.button}
-      >
-        Table
-      </Button>
-      <Button
-        outline
-        active={value === MetricsDisplayType.TREEMAP}
-        size="small"
-        type="button"
-        glyph={Icon.ICONS.TREEMAP}
-        onClick={() => onSelect(MetricsDisplayType.TREEMAP)}
-        className={cx(css.button)}
-      >
-        Treemap
-      </Button>
+    <ControlGroup {...restProps}>
+      {displayTypes.map((displayType, index) => {
+        const displayGroups = groups?.[displayType];
+        const displayProps = METRICS_DISPLAY_MAP[displayType];
+        const isLast = displayTypes.length - 1 === index;
+        const isActive = displayType === value;
+
+        if (!displayGroups || displayGroups.length === 0) {
+          return (
+            <Button
+              outline
+              active={isActive}
+              size="small"
+              type="button"
+              glyph={displayProps.glyph}
+              onClick={() => onSelect(displayType)}
+              className={isLast && css.itemLast}
+              key={displayType}
+            >
+              {displayProps.label}
+            </Button>
+          );
+        }
+
+        const displayGroupsData = [
+          {
+            value: DEFAULT_GROUP_BY,
+            label: 'No groups',
+          },
+          ...displayGroups.map((displayGroup) => ({
+            value: displayGroup,
+            label: `Group by ${displayGroup}`,
+          })),
+        ];
+
+        return (
+          <Dropdown
+            glyph={displayProps.glyph}
+            label={displayProps.label}
+            className={cx(isLast && css.itemLast, isActive && css.buttonActive)}
+            key={displayType}
+          >
+            {displayGroupsData.map((displayGroupData) => {
+              const isGroupActive = isActive && displayGroupData.value === groupBy;
+
+              return (
+                <DropdownItem
+                  onClick={() => onSelect(displayType, displayGroupData.value)}
+                  isActive={isGroupActive}
+                  className={cx(css.dropdownItem, isGroupActive && css.dropdownItemActive)}
+                  key={displayGroupData.value}
+                >
+                  <FlexStack space="xxxsmall" alignItems="center">
+                    <Icon glyph={Icon.ICONS.CHECK} size="small" className={css.dropdownItemIcon} />
+                    <span>{displayGroupData.label}</span>
+                  </FlexStack>
+                </DropdownItem>
+              );
+            })}
+          </Dropdown>
+        );
+      })}
     </ControlGroup>
   );
 };

package/src/components/metrics-treemap/__tests__/metrics-treemap.utils.ts

@@ -0,0 +1,188 @@
+import { getTreemapNodesGroupedByPath } from '../metrics-treemap.utils';
+
+describe('MetricsTreemap / getTreeNodesGroupedByPath', () => {
+  test('should group tree ndoes by path', () => {
+    const actual = getTreemapNodesGroupedByPath([
+      {
+        key: './src/app.jsx',
+        runs: [{ value: 300 }, { value: 500 }],
+      },
+      {
+        key: './src/components/header.jsx',
+        runs: [{ value: 200 }, { value: 100 }],
+      },
+      {
+        key: './src/components/footer.jsx',
+        runs: [{ value: 100 }, { value: 100 }],
+      },
+      {
+        key: './src/ui/button.jsx',
+        runs: [{ value: 100 }, { value: 100 }],
+      },
+      {
+        key: './src/ui/input.jsx',
+        runs: [{ value: 0 }, { value: 100 }],
+      },
+      {
+        key: './node_modules/react/dist/react.production.js',
+        runs: [{ value: 100 }, { value: 100 }],
+      },
+      {
+        key: 'favicon.ico',
+        runs: [{ value: 10 }, { value: 10 }],
+      },
+    ] as any);
+
+    expect(actual).toStrictEqual({
+      id: '',
+      label: '(root)',
+      value: 0,
+      total: {
+        current: 810,
+        baseline: 1010,
+      },
+      children: [
+        {
+          id: '.',
+          label: '.',
+          value: 0,
+          total: {
+            current: 800,
+            baseline: 1000,
+          },
+          children: [
+            {
+              id: './src',
+              label: 'src',
+              value: 0,
+              total: {
+                current: 700,
+                baseline: 900,
+              },
+              children: [
+                {
+                  id: './src/app.jsx',
+                  label: 'app.jsx',
+                  value: 500,
+                  item: {
+                    key: './src/app.jsx',
+                    runs: [{ value: 300 }, { value: 500 }],
+                  },
+                },
+                {
+                  id: './src/components',
+                  label: 'components',
+                  value: 0,
+                  total: {
+                    current: 300,
+                    baseline: 200,
+                  },
+                  children: [
+                    {
+                      id: './src/components/header.jsx',
+                      label: 'header.jsx',
+                      value: 200,
+                      item: {
+                        key: './src/components/header.jsx',
+                        runs: [{ value: 200 }, { value: 100 }],
+                      },
+                    },
+                    {
+                      id: './src/components/footer.jsx',
+                      label: 'footer.jsx',
+                      value: 100,
+                      item: {
+                        key: './src/components/footer.jsx',
+                        runs: [{ value: 100 }, { value: 100 }],
+                      },
+                    },
+                  ],
+                },
+                {
+                  id: './src/ui',
+                  label: 'ui',
+                  value: 0,
+                  total: {
+                    current: 100,
+                    baseline: 200,
+                  },
+                  children: [
+                    {
+                      id: './src/ui/button.jsx',
+                      label: 'button.jsx',
+                      value: 100,
+                      item: {
+                        key: './src/ui/button.jsx',
+                        runs: [{ value: 100 }, { value: 100 }],
+                      },
+                    },
+                    {
+                      id: './src/ui/input.jsx',
+                      label: 'input.jsx',
+                      value: 100,
+                      item: {
+                        key: './src/ui/input.jsx',
+                        runs: [{ value: 0 }, { value: 100 }],
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              id: './node_modules',
+              label: 'node_modules',
+              value: 0,
+              total: {
+                current: 100,
+                baseline: 100,
+              },
+              children: [
+                {
+                  id: './node_modules/react',
+                  label: 'react',
+                  value: 0,
+                  total: {
+                    current: 100,
+                    baseline: 100,
+                  },
+                  children: [
+                    {
+                      id: './node_modules/react/dist',
+                      label: 'dist',
+                      value: 0,
+                      total: {
+                        current: 100,
+                        baseline: 100,
+                      },
+                      children: [
+                        {
+                          id: './node_modules/react/dist/react.production.js',
+                          label: 'react.production.js',
+                          value: 100,
+                          item: {
+                            key: './node_modules/react/dist/react.production.js',
+                            runs: [{ value: 100 }, { value: 100 }],
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: 'favicon.ico',
+          label: 'favicon.ico',
+          value: 10,
+          item: {
+            key: 'favicon.ico',
+            runs: [{ value: 10 }, { value: 10 }],
+          },
+        },
+      ],
+    });
+  });
+});

package/src/components/metrics-treemap/index.ts

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

package/src/components/metrics-treemap/metrics-treemap.constants.ts

@@ -0,0 +1,63 @@
+import type { ReportMetricRow } from '@bundle-stats/utils';
+
+export interface TreeTotal {
+  current: number;
+  baseline: number;
+}
+
+export interface TreeLeaf {
+  /**
+   * Node id - file/directory path
+   */
+  id: string;
+  /**
+   * Node label - file/directory baseline
+   */
+  label: string;
+  /**
+   * Node value - the max amount between item run values
+   */
+  value: number;
+  /**
+   * Corresponding report metric item
+   */
+  item: ReportMetricRow;
+}
+
+export interface Tree {
+  /**
+   * Node id - file/directory path
+   */
+  id: string;
+  /**
+   * Node label - file/directory baseline
+   */
+  label: string;
+  /**
+   * Node value - 0 for groups
+   */
+  value: number;
+  /**
+   * List of children nodes
+   */
+  children: TreeNodeChildren;
+  /**
+   * children total values for nested
+   */
+  total?: TreeTotal;
+}
+
+export type TreeNode = Tree | TreeLeaf;
+
+export type TreeNodeChildren = Array<TreeNode>;
+
+export type TileGroupSizeDisplay = 'minimal' | 'small' | 'default';
+
+export type TileSizeDisplay = 'minimal' | 'small' | 'default';
+
+export const SQUARIFY_RATIO = 1.66;
+export const PADDING_OUTER = 1;
+export const PADDING_INNER = 2;
+export const NESTED_PADDING = 4;
+export const NESTED_PADDING_TOP = 16 + NESTED_PADDING * 2;
+export const NESTED_PADDING_LEFT = 8;

package/src/components/metrics-treemap/metrics-treemap.i18n.ts

@@ -0,0 +1,2 @@
+export const TILE_GROUP_LABEL = 'View children entries';
+export const TILE_LABEL = 'View entry info';