feat: BundleTotals - use Treemap

relative-ci · Oct 28, 2021 · d0bb03e · d0bb03e
1 parent 8746a14
commit d0bb03e
Showing 1 changed file with 28 additions and 14 deletions.
diff --git a/packages/ui/src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx b/packages/ui/src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx
@@ -4,16 +4,23 @@ import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
+import { Tabs } from '../../ui/tabs';
+import { Treemap } from '../../ui/treemap';
 import { MetricsTable } from '../metrics-table';
 import { ComponentLink } from '../component-link';
 
-export const BundleAssetsTotalsTable = ({
-  className,
-  jobs,
-  customComponentLink: CustomComponentLink,
-}) => {
-  const items = webpack.compareBySection.sizes(jobs);
+const TreemapPanel = ({ jobs, items, customComponentLink: CustomComponentLink }) => {
+  const treemapItems = items.map((row) => ({
+    id: row.key,
+    label: row.label,
+    value: row.runs[0].value,
+    data: row,
+  }));
+
+  return <Treemap items={treemapItems} />;
+};
 
+const Table = ({ jobs, items, customComponentLink: CustomComponentLink }) => {
   const renderRowHeader = (item) => {
     const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
     const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
@@ -25,15 +32,22 @@ export const BundleAssetsTotalsTable = ({
     );
   };
 
+  return <MetricsTable runs={jobs} items={items} renderRowHeader={renderRowHeader} showHeaderSum />;
+};
+
+export const BundleAssetsTotalsTable = ({ className, jobs, customComponentLink }) => {
+  const items = webpack.compareBySection.sizes(jobs);
+
   return (
-    <MetricsTable
-      className={className}
-      runs={jobs}
-      items={items}
-      renderRowHeader={renderRowHeader}
-      showHeaderSum
-    />
-  );
+    <div className={className}>
+      <Tabs>
+        <button>Chart</button>
+        <button>Table</button>
+      </Tabs>
+      <TreemapPanel items={items} customComponentLink={customComponentLink} />
+      <Table jobs={jobs} items={items} customComponentLink={customComponentLink} />
+    </div>
+  )
 };
 
 BundleAssetsTotalsTable.defaultProps = {