@bundle-stats/ui 4.13.0-beta.8 → 4.13.0-rc.0

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,52 @@
+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>;

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';

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

@@ -2,6 +2,9 @@
   position: relative;
   aspect-ratio: 16/9;
   background: var(--color-background);
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  overflow: hidden;
 }
 
 .canvas {
@@ -10,34 +13,101 @@
   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;
+/**
+ * Tile group
+ */
+.tileGroup {
+  position: absolute;
+}
+
+.tileGroupTitle {
+  width: 100%;
+  padding: 4px 2px 4px var(--space-xxsmall);
+  color: var(--color-text);
+  font-family: var(--font-family-fixed);
+  font-size: 10px;
+  line-height: 16px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.tileGroupTitleTotal {
+  margin-left: var(--space-xxxsmall);
+}
+
+/** Tile group size variation */
+.tileGroupSizeDefault {
+  transition: var(--ui-transition-in);
+  transition-property: left, top, width, height;
+}
+
+/** Tile group nested variation */
+.nested .tileGroup {
+  background-color: rgba(27, 26, 33, 0.05);
+  outline: 1px solid rgba(255, 255, 255, 0.75);
+}
+
+.nested .tileGroup:has(> .tileGroupTitle:hover),
+.nested .tileGroup:has(> .tile:hover) {
+  background-color: rgba(27, 26, 33, 0.1);
+  outline: 1px solid rgba(255, 255, 255, 1);
+}
+
+.nested .tileGroup--NEGATIVE {
+  background-color: rgba(194, 31, 37, 0.05);
+}
+
+.nested .tileGroup--NEGATIVE:has(> .tileGroupTitle:hover),
+.nested .tileGroup--NEGATIVE:has(> .tile:hover) {
+  background-color: rgba(194, 31, 37, 0.1);
+}
+
+.nested .tileGroup--POSITIVE {
+  background-color: rgba(42, 147, 39, 0.05);
+}
+
+.nested .tileGroup--POSITIVE:has(> .tileGroupTitle:hover),
+.nested .tileGroup--POSITIVE:has(> .tile:hover) {
+  background-color: rgba(42, 147, 39, 0.1);
+}
+
+/* reset bacground color when having a not changed group */
+.nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE,
+.nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE {
+  background-color: var(--color-background);
+  background-image: linear-gradient(rgba(27, 26, 33, 0.1), rgba(27, 26, 33, 0.1));
+}
+
+.nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
+.nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tile:hover),
+.nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
+.nested .tileGroup--NEGATIVE > .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tile:hover) {
+  background-color: var(--color-background);
+  background-image: linear-gradient(rgba(27, 26, 33, 0.1), rgba(27, 26, 33, 0.1));
 }
 
 /** Leaf wrapper button */
-.leaf {
+.tile {
   position: absolute;
   appearance: none;
   border: 0;
   border-radius: 0;
   padding: 0;
-  background: none;
+  background: var(--color-background);
   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;
+  transition: var(--ui-transition-out);
 }
 
-.leaf::before {
+.tile::before {
   content: "";
   display: block;
   position: absolute;
@@ -47,18 +117,9 @@
   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 {
+.tileContent {
   position: relative;
   z-index: 1;
   width: 100%;
@@ -71,12 +132,12 @@
   line-height: var(--line-height-heading);
 }
 
-/** Align label to other elements on the first column leafs */
-.leaf[x="1"] .leafContent {
+/** Align label to other elements on the first column cells */
+.tileFirstCol .tileContent {
   padding-left: var(--space-small);
 }
 
-.leadContentLabel {
+.tileContentLabel {
   flex: 0 1 auto;
   width: 100%;
   min-width: 0;
@@ -84,67 +145,95 @@
   overflow: hidden;
 }
 
-.leadContentValue {
+.tileContentValue {
   flex: 0 0 auto;
   max-width: calc(100% + var(--space-xxsmall));
   white-space: nowrap;
   overflow: hidden;
 }
 
-.leadContentMetric {
+.tileContentMetric {
   font-weight: bold;
 }
 
-.leadContentDelta {
+.tileContentDelta {
   margin-left: var(--space-xxxsmall);
 }
 
 /** Tile size variation */
-.leafSmall .leafContent {
+.tileSizeSmall .tileContent {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   gap: 0;
   font-size: var(--size-xsmall);
 }
 
-.leafSmall .leadContentLabel {
+.tileSizeSmall .tileContentLabel {
   margin-top: 0;
 }
 
+.tileSizeDefault {
+  transition: var(--ui-transition-in);
+  transition-property: left top width height;
+}
+
 /** Tile diff variation */
-.leaf-NO_CHANGE {
-  color: var(--color-text-light);
+.tile {
+  outline: 1px solid rgba(255, 255, 255, 1);
+  color: var(--color-text);
+  transition: var(--ui-transition-out);
 }
 
-.leaf-NO_CHANGE::before {
-  color: var(--color-gray-50);
+.tile::before {
+  color: var(--color-highlight);
+  transition: var(--ui-transition-out);
+  transition-property: opacity;
+  opacity: 0.5;
+}
+
+.tile:hover::before {
+  transition: var(--ui-transition-in);
   opacity: 0.4;
 }
 
-.leaf-NO_CHANGE:hover::before {
-  opacity: 0.2;
+.tile-NO_CHANGE {
+  color: var(--color-text-ultra-light);
 }
 
-.leaf-HIGH_NEGATIVE::before {
+.tile-NO_CHANGE::before {
+  color: var(--color-gray-50);
+}
+
+.tile-HIGH_NEGATIVE::before {
   color: var(--color-red-100);
 }
 
-.leaf-NEGATIVE::before {
+.tile-NEGATIVE::before {
   color: var(--color-red-50);
 }
 
-.leaf-LOW_NEGATIVE::before {
-  color: var(--color-red-25);
+.tile-LOW_NEGATIVE::before {
+  color: var(--color-red-50);
+  opacity: 0.6;
 }
 
-.leaf-LOW_POSITIVE::before {
-  color: var(--color-green-25);
+.tile-LOW_NEGATIVE:hover::before {
+  opacity: 0.5;
 }
 
-.leaf-POSITIVE::before {
+.tile-LOW_POSITIVE::before {
   color: var(--color-green-50);
+  opacity: 0.6;
+}
+
+.tile-LOW_POSITIVE:hover::before {
+  opacity: 0.5;
 }
 
-.leaf-HIGH_POSITIVE::before {
+.tile-POSITIVE::before {
+  color: var(--color-green-50);
+}
+
+.tile-HIGH_POSITIVE::before {
   color: var(--color-green-100);
 }
 
@@ -166,7 +255,7 @@
 }
 
 /** tooltip */
-.leafContentTooltipAnchor {
+.tileContentTooltipAnchor {
   width: 100%;
   height: 100%;
 }
@@ -185,17 +274,16 @@
   pointer-events: none;
 }
 
-/* prevent tooltip portal wrapper from capturing events */
-div[role="presentation"]:has(.tooltip) {
-  pointer-events: none;
-}
-
-
-.leafTooltipArrow svg {
+.tileTooltipArrow svg {
   display: block;
   fill: var(--color-background) !important;
 }
 
-.leafTooltipContentTitle {
-  font-size: var(--size-medium);
+.tileTooltipContentTitle {
+  font-size: var(--size-small);
+}
+
+/* prevent tooltip portal wrapper from capturing events */
+div[role="presentation"]:has(.tooltip) {
+  pointer-events: none;
 }

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

@@ -2,22 +2,56 @@ import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
+import { createJobs } from '@bundle-stats/utils';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
-// eslint-disable-next-line import/no-relative-packages
+/* eslint-disable import/no-relative-packages */
+import baselineData from '../../../../../fixtures/webpack-stats.baseline.json';
+import currentData from '../../../../../fixtures/webpack-stats.current.json';
 import moduleItemsFixture from '../../../../../fixtures/module-items.json';
-import { MetricsTreemap } from '.';
+/* eslint-enable import/no-relative-packages */
+import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '.';
 
-export default {
+const meta: Meta<typeof MetricsTreemap> = {
   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'),
   },
 };
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+
+const MULTIPLE_JOBS = createJobs([{ webpack: currentData }, { webpack: baselineData }]);
+
+export const Assets: Story = {
+  render: (props) => <MetricsTreemap style={{ maxWidth: 'var(--max-width)' }} {...props} />,
+  args: {
+    treeNodes: getTreemapNodes(webpack.compareBySection.assets(MULTIPLE_JOBS)),
+  },
+};
+
+export const AssetsNested: Story = {
+  render: (props) => <MetricsTreemap style={{ maxWidth: 'var(--max-width)' }} {...props} />,
+  args: {
+    treeNodes: getTreemapNodesGroupedByPath(webpack.compareBySection.assets(MULTIPLE_JOBS)),
+    nested: true,
+  },
+};
+
+export const Modules: Story = {
+  render: (props) => <MetricsTreemap style={{ maxWidth: 'var(--max-width)' }} {...props} />,
+  args: {
+    treeNodes: getTreemapNodes(moduleItemsFixture),
+  },
+};
+
+export const ModulesNested: Story = {
+  render: (props) => <MetricsTreemap style={{ maxWidth: 'var(--max-width)' }} {...props} />,
+  args: {
+    treeNodes: getTreemapNodesGroupedByPath(moduleItemsFixture),
+    nested: true,
+  },
+};