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

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,133 @@
   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 {
+/**
+ * Tile group
+ */
+.tileGroup {
+  position: absolute;
+}
+
+.tileGroupTitle {
+  width: 100%;
+}
+
+.tileGroupTitleContent {
+  width: 100%;
+  padding: var(--space-xxxsmall) 2px var(--space-xxxsmall) var(--space-xxsmall);
+  display: flex;
+  align-items: center;
+  color: var(--color-text);
+  font-family: var(--font-family-fixed);
+  font-size: 10px;
+  line-height: var(--space-small);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.tileGroupTitleText,
+.tileGroupTitleTotal {
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.tileGroupTitleTotal {
+  margin-left: var(--space-xxsmall);
+  color: var(--color-text-light);
+}
+
+.tileGroupTitle {
   transition: var(--ui-transition-out);
-  transition-property: opacity;
+}
+
+.tileGroupTitle:hover .tileGroupTitleText {
+  text-decoration: underline;
+  transition: var(--ui-transition-in);
+}
+
+/** Tile group size variation */
+.tileGroup {
+  transition: var(--ui-transition-in);
+  transition-property: left, top, width, height;
+}
+
+.tileGroup--minimal .tileGroupTitle,
+.tileGroup--small .tileGroupTitle {
+  height: 100%; /* full height when title is missing or we do not render any children */
+}
+
+.tileGroup--minimal .tileGroupTitleContent,
+.tileGroup--small .tileGroupTitleContent {
+  min-height: 100%;
+}
+
+/** 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 +149,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,80 +164,113 @@
   line-height: var(--line-height-heading);
 }
 
-/** Align label to other elements on the first column leafs */
-.leafFirstCol .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;
-  max-height: calc(2em * var(--line-height-heading));
+  max-height: calc(2em * var(--line-height-heading)); /* render max 2 rows */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-all;
+  word-break: break-word;
+  hyphens: auto;
+  white-space: normal;
   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 {
-  padding: var(--space-xxxsmall) var(--space-xxsmall);
-  gap: 0;
-  font-size: var(--size-xsmall);
+.tileSizeSmall .tileContent {
+  padding: var(--space-xxxsmall);
+  font-size: 10px;
 }
 
-.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-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);
+}
+
+.tile-LOW_NEGATIVE::before {
   color: var(--color-red-50);
+  opacity: 0.6;
+}
+
+.tile-LOW_NEGATIVE:hover::before {
+  opacity: 0.5;
 }
 
-.leaf-LOW_NEGATIVE::before {
-  color: var(--color-red-25);
+.tile-LOW_POSITIVE::before {
+  color: var(--color-green-50);
+  opacity: 0.6;
 }
 
-.leaf-LOW_POSITIVE::before {
-  color: var(--color-green-25);
+.tile-LOW_POSITIVE:hover::before {
+  opacity: 0.5;
 }
 
-.leaf-POSITIVE::before {
+.tile-POSITIVE::before {
   color: var(--color-green-50);
 }
 
-.leaf-HIGH_POSITIVE::before {
+.tile-HIGH_POSITIVE::before {
   color: var(--color-green-100);
 }
 
@@ -166,7 +292,7 @@
 }
 
 /** tooltip */
-.leafContentTooltipAnchor {
+.tileContentTooltipAnchor {
   width: 100%;
   height: 100%;
 }
@@ -185,17 +311,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,
+  },
+};