@bundle-stats/ui 4.12.0-beta.4 → 4.13.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (174) hide show
  1. package/lib/app/app.js +3 -7
  2. package/lib/app/app.js.map +1 -1
  3. package/lib/assets/icons.svg +26 -20
  4. package/lib/assets/icons.svg.js +27 -23
  5. package/lib/assets/icons.svg.js.map +1 -1
  6. package/lib/components/bundle-assets/bundle-assets.js +11 -3
  7. package/lib/components/bundle-assets/bundle-assets.js.map +1 -1
  8. package/lib/components/bundle-assets/index.js +3 -4
  9. package/lib/components/bundle-assets/index.js.map +1 -1
  10. package/lib/components/bundle-assets-totals/bundle-assets-totals.js +77 -0
  11. package/lib/components/bundle-assets-totals/bundle-assets-totals.js.map +1 -0
  12. package/lib/components/bundle-assets-totals/bundle-assets-totals.module.css +7 -0
  13. package/lib/{ui/horizontal-bar-chart → components/bundle-assets-totals}/index.js +1 -1
  14. package/lib/components/bundle-assets-totals/index.js.map +1 -0
  15. package/lib/components/bundle-modules/bundle-modules.js +9 -2
  16. package/lib/components/bundle-modules/bundle-modules.js.map +1 -1
  17. package/lib/components/bundle-modules/index.js +3 -4
  18. package/lib/components/bundle-modules/index.js.map +1 -1
  19. package/lib/components/bundle-packages/bundle-packages.js +10 -2
  20. package/lib/components/bundle-packages/bundle-packages.js.map +1 -1
  21. package/lib/components/bundle-packages/index.js +3 -4
  22. package/lib/components/bundle-packages/index.js.map +1 -1
  23. package/lib/components/index.js +3 -5
  24. package/lib/components/index.js.map +1 -1
  25. package/lib/components/{bundle-assets-totals-table → metrics-display-selector}/index.js +1 -1
  26. package/lib/components/metrics-display-selector/index.js.map +1 -0
  27. package/lib/components/metrics-display-selector/metrics-display-selector.js +27 -0
  28. package/lib/components/metrics-display-selector/metrics-display-selector.js.map +1 -0
  29. package/lib/components/metrics-display-selector/metrics-display-selector.module.css +10 -0
  30. package/lib/components/{bundle-assets-totals-chart-bars → metrics-treemap}/index.js +1 -1
  31. package/lib/components/metrics-treemap/index.js.map +1 -0
  32. package/lib/components/metrics-treemap/metrics-treemap.js +148 -0
  33. package/lib/components/metrics-treemap/metrics-treemap.js.map +1 -0
  34. package/lib/components/metrics-treemap/metrics-treemap.module.css +168 -0
  35. package/lib/constants.js +6 -1
  36. package/lib/constants.js.map +1 -1
  37. package/lib/hooks/metrics-display-type.js +40 -0
  38. package/lib/hooks/metrics-display-type.js.map +1 -0
  39. package/lib/hooks/show-entry.js +13 -0
  40. package/lib/hooks/show-entry.js.map +1 -0
  41. package/lib/ui/icon/icon.js +2 -0
  42. package/lib/ui/icon/icon.js.map +1 -1
  43. package/lib/ui/index.js +1 -3
  44. package/lib/ui/index.js.map +1 -1
  45. package/lib-esm/app/app.js +3 -7
  46. package/lib-esm/app/app.js.map +1 -1
  47. package/lib-esm/assets/icons.svg +26 -20
  48. package/lib-esm/assets/icons.svg.js +27 -23
  49. package/lib-esm/assets/icons.svg.js.map +1 -1
  50. package/lib-esm/components/bundle-assets/bundle-assets.js +11 -3
  51. package/lib-esm/components/bundle-assets/bundle-assets.js.map +1 -1
  52. package/lib-esm/components/bundle-assets/index.js +4 -5
  53. package/lib-esm/components/bundle-assets/index.js.map +1 -1
  54. package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.js +47 -0
  55. package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.js.map +1 -0
  56. package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.module.css +7 -0
  57. package/lib-esm/components/bundle-assets-totals/index.js +2 -0
  58. package/lib-esm/components/bundle-assets-totals/index.js.map +1 -0
  59. package/lib-esm/components/bundle-modules/bundle-modules.js +9 -2
  60. package/lib-esm/components/bundle-modules/bundle-modules.js.map +1 -1
  61. package/lib-esm/components/bundle-modules/index.js +3 -4
  62. package/lib-esm/components/bundle-modules/index.js.map +1 -1
  63. package/lib-esm/components/bundle-packages/bundle-packages.js +10 -2
  64. package/lib-esm/components/bundle-packages/bundle-packages.js.map +1 -1
  65. package/lib-esm/components/bundle-packages/index.js +4 -5
  66. package/lib-esm/components/bundle-packages/index.js.map +1 -1
  67. package/lib-esm/components/index.js +1 -2
  68. package/lib-esm/components/index.js.map +1 -1
  69. package/lib-esm/components/metrics-display-selector/index.js +2 -0
  70. package/lib-esm/components/metrics-display-selector/index.js.map +1 -0
  71. package/lib-esm/components/metrics-display-selector/metrics-display-selector.js +20 -0
  72. package/lib-esm/components/metrics-display-selector/metrics-display-selector.js.map +1 -0
  73. package/lib-esm/components/metrics-display-selector/metrics-display-selector.module.css +10 -0
  74. package/lib-esm/components/metrics-treemap/index.js +2 -0
  75. package/lib-esm/components/metrics-treemap/index.js.map +1 -0
  76. package/lib-esm/components/metrics-treemap/metrics-treemap.js +119 -0
  77. package/lib-esm/components/metrics-treemap/metrics-treemap.js.map +1 -0
  78. package/lib-esm/components/metrics-treemap/metrics-treemap.module.css +168 -0
  79. package/lib-esm/constants.js +5 -0
  80. package/lib-esm/constants.js.map +1 -1
  81. package/lib-esm/hooks/metrics-display-type.js +36 -0
  82. package/lib-esm/hooks/metrics-display-type.js.map +1 -0
  83. package/lib-esm/hooks/show-entry.js +9 -0
  84. package/lib-esm/hooks/show-entry.js.map +1 -0
  85. package/lib-esm/ui/icon/icon.js +2 -0
  86. package/lib-esm/ui/icon/icon.js.map +1 -1
  87. package/lib-esm/ui/index.js +0 -1
  88. package/lib-esm/ui/index.js.map +1 -1
  89. package/package.json +11 -6
  90. package/src/app/app.jsx +4 -8
  91. package/src/assets/icons/table.svg +3 -0
  92. package/src/assets/icons/treemap.svg +4 -0
  93. package/src/assets/icons.svg +26 -20
  94. package/src/assets/icons.svg.jsx +91 -55
  95. package/src/components/bundle-assets/bundle-assets.jsx +25 -11
  96. package/src/components/bundle-assets/index.jsx +4 -4
  97. package/src/components/bundle-assets-totals/bundle-assets-totals.jsx +94 -0
  98. package/src/components/bundle-assets-totals/bundle-assets-totals.module.css +7 -0
  99. package/src/components/bundle-assets-totals/index.js +1 -0
  100. package/src/components/bundle-modules/bundle-modules.tsx +26 -12
  101. package/src/components/bundle-modules/index.tsx +4 -3
  102. package/src/components/bundle-packages/bundle-packages.jsx +24 -10
  103. package/src/components/bundle-packages/index.jsx +4 -4
  104. package/src/components/index.js +1 -2
  105. package/src/components/metrics-display-selector/index.tsx +1 -0
  106. package/src/components/metrics-display-selector/metrics-display-selector.module.css +10 -0
  107. package/src/components/metrics-display-selector/metrics-display-selector.tsx +51 -0
  108. package/src/components/metrics-treemap/index.ts +1 -0
  109. package/src/components/metrics-treemap/metrics-treemap.module.css +168 -0
  110. package/src/components/metrics-treemap/metrics-treemap.stories.tsx +23 -0
  111. package/src/components/metrics-treemap/metrics-treemap.tsx +271 -0
  112. package/src/{constants.js → constants.ts} +5 -0
  113. package/src/hooks/metrics-display-type.ts +56 -0
  114. package/src/hooks/show-entry.ts +17 -0
  115. package/src/types.d.ts +2 -0
  116. package/src/ui/icon/icon.tsx +2 -0
  117. package/src/ui/index.js +0 -1
  118. package/types/components/bundle-assets/bundle-assets.d.ts +2 -1
  119. package/types/components/{bundle-assets-totals-table/bundle-assets-totals-table.d.ts → bundle-assets-totals/bundle-assets-totals.d.ts} +2 -2
  120. package/types/components/bundle-assets-totals/index.d.ts +1 -0
  121. package/types/components/bundle-modules/bundle-modules.d.ts +2 -1
  122. package/types/components/bundle-modules/index.d.ts +1 -1
  123. package/types/components/bundle-packages/bundle-packages.d.ts +1 -0
  124. package/types/components/index.d.ts +1 -2
  125. package/types/components/metrics-display-selector/index.d.ts +1 -0
  126. package/types/components/metrics-display-selector/metrics-display-selector.d.ts +9 -0
  127. package/types/components/metrics-treemap/index.d.ts +1 -0
  128. package/types/components/metrics-treemap/metrics-treemap.d.ts +9 -0
  129. package/types/constants.d.ts +19 -15
  130. package/types/hooks/metrics-display-type.d.ts +4 -0
  131. package/types/hooks/show-entry.d.ts +10 -0
  132. package/types/ui/icon/icon.d.ts +4 -0
  133. package/types/ui/index.d.ts +0 -1
  134. package/lib/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js +0 -95
  135. package/lib/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js.map +0 -1
  136. package/lib/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css +0 -42
  137. package/lib/components/bundle-assets-totals-chart-bars/index.js.map +0 -1
  138. package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.js +0 -57
  139. package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.js.map +0 -1
  140. package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css +0 -3
  141. package/lib/components/bundle-assets-totals-table/index.js.map +0 -1
  142. package/lib/ui/horizontal-bar-chart/horizontal-bar-chart.js +0 -102
  143. package/lib/ui/horizontal-bar-chart/horizontal-bar-chart.js.map +0 -1
  144. package/lib/ui/horizontal-bar-chart/horizontal-bar-chart.module.css +0 -42
  145. package/lib/ui/horizontal-bar-chart/index.js.map +0 -1
  146. package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js +0 -66
  147. package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js.map +0 -1
  148. package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css +0 -42
  149. package/lib-esm/components/bundle-assets-totals-chart-bars/index.js +0 -2
  150. package/lib-esm/components/bundle-assets-totals-chart-bars/index.js.map +0 -1
  151. package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.js +0 -27
  152. package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.js.map +0 -1
  153. package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css +0 -3
  154. package/lib-esm/components/bundle-assets-totals-table/index.js +0 -2
  155. package/lib-esm/components/bundle-assets-totals-table/index.js.map +0 -1
  156. package/lib-esm/ui/horizontal-bar-chart/horizontal-bar-chart.js +0 -96
  157. package/lib-esm/ui/horizontal-bar-chart/horizontal-bar-chart.js.map +0 -1
  158. package/lib-esm/ui/horizontal-bar-chart/horizontal-bar-chart.module.css +0 -42
  159. package/lib-esm/ui/horizontal-bar-chart/index.js +0 -2
  160. package/lib-esm/ui/horizontal-bar-chart/index.js.map +0 -1
  161. package/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.jsx +0 -106
  162. package/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css +0 -42
  163. package/src/components/bundle-assets-totals-chart-bars/index.js +0 -1
  164. package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx +0 -55
  165. package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css +0 -3
  166. package/src/components/bundle-assets-totals-table/index.js +0 -1
  167. package/src/ui/horizontal-bar-chart/horizontal-bar-chart.jsx +0 -156
  168. package/src/ui/horizontal-bar-chart/horizontal-bar-chart.module.css +0 -42
  169. package/src/ui/horizontal-bar-chart/index.js +0 -1
  170. package/types/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.d.ts +0 -22
  171. package/types/components/bundle-assets-totals-chart-bars/index.d.ts +0 -1
  172. package/types/components/bundle-assets-totals-table/index.d.ts +0 -1
  173. package/types/ui/horizontal-bar-chart/horizontal-bar-chart.d.ts +0 -23
  174. package/types/ui/horizontal-bar-chart/index.d.ts +0 -1
@@ -0,0 +1,56 @@
1
+ import { useCallback, useEffect, useMemo } from 'react';
2
+ import { useLocalStorage } from 'react-use';
3
+ import { StringParam, useQueryParams } from 'use-query-params';
4
+
5
+ import { MetricsDisplayType } from '../constants';
6
+
7
+ const DEFAULT_DISPLAY_TYPE = MetricsDisplayType.TABLE;
8
+ const PARAM_NAME = 'dt';
9
+
10
+ type UseMetricsDisplayType = [MetricsDisplayType, (value: MetricsDisplayType) => void];
11
+
12
+ export const useMetricsDisplayType = (): UseMetricsDisplayType => {
13
+ const [{ [PARAM_NAME]: queryDisplayType }, setQueryParams] = useQueryParams({
14
+ [PARAM_NAME]: StringParam,
15
+ });
16
+ const [storageDisplayType, setStoreageDisplayType] = useLocalStorage(
17
+ PARAM_NAME,
18
+ MetricsDisplayType.TABLE,
19
+ );
20
+
21
+ const displayType = useMemo(() => {
22
+ const value = queryDisplayType || storageDisplayType;
23
+
24
+ if (!value) {
25
+ return DEFAULT_DISPLAY_TYPE;
26
+ }
27
+
28
+ if (!Object.values(MetricsDisplayType).includes(value as MetricsDisplayType)) {
29
+ return DEFAULT_DISPLAY_TYPE;
30
+ }
31
+
32
+ return value as MetricsDisplayType;
33
+ }, [queryDisplayType, storageDisplayType]);
34
+
35
+ useEffect(() => {
36
+ // Update query string display type when missing
37
+ if (queryDisplayType !== displayType) {
38
+ setQueryParams({ [PARAM_NAME]: displayType });
39
+ }
40
+
41
+ // Update storage state when query string is set and different
42
+ if (storageDisplayType !== displayType) {
43
+ setStoreageDisplayType(queryDisplayType as MetricsDisplayType);
44
+ }
45
+ }, [displayType, queryDisplayType, storageDisplayType, setQueryParams, setStoreageDisplayType]);
46
+
47
+ const setDisplayType = useCallback(
48
+ (value: MetricsDisplayType) => {
49
+ setStoreageDisplayType(value);
50
+ setQueryParams({ [PARAM_NAME]: value });
51
+ },
52
+ [setStoreageDisplayType, setQueryParams],
53
+ );
54
+
55
+ return [displayType, setDisplayType];
56
+ };
@@ -0,0 +1,17 @@
1
+ import { useMemo } from 'react';
2
+
3
+ interface UseEntryIdParams {
4
+ setState: (data: { entryId: string }) => void;
5
+ }
6
+
7
+ export const useShowEntry = (params: UseEntryIdParams) => {
8
+ const { setState } = params;
9
+
10
+ return useMemo(
11
+ () => ({
12
+ hideEntryInfo: () => setState({ entryId: '' }),
13
+ showEntryInfo: (entryId: string) => setState({ entryId }),
14
+ }),
15
+ [setState],
16
+ );
17
+ };
package/src/types.d.ts CHANGED
@@ -8,8 +8,10 @@ interface FilterFieldData {
8
8
  defaultValue: boolean;
9
9
  disabled?: boolean;
10
10
  }
11
+
11
12
  type FilterGroupFieldData = {
12
13
  label: string;
13
14
  children: Array<{ key: string } & FilterFieldData>;
14
15
  };
16
+
15
17
  type FilterFieldsData = Record<string, FilterFieldData | FilterGroupFieldData>;
@@ -18,6 +18,8 @@ const ICONS = {
18
18
  GITHUB: 'github',
19
19
  INFO: 'info',
20
20
  HELP: 'help',
21
+ TABLE: 'table',
22
+ TREEMAP: 'treemap',
21
23
  MENU: 'menu',
22
24
  MORE_VERTICAL: 'more-vertical',
23
25
  SORT: 'sort',
package/src/ui/index.js CHANGED
@@ -6,7 +6,6 @@ export { Dropdown } from './dropdown';
6
6
  export { EmptySet } from './empty-set';
7
7
  export { FileName } from './file-name';
8
8
  export { Filters } from './filters';
9
- export { HorizontalBarChart } from './horizontal-bar-chart';
10
9
  export { HoverCard } from './hover-card';
11
10
  export { Icon } from './icon';
12
11
  export { Input } from './input';
@@ -47,11 +47,12 @@ export namespace BundleAssets {
47
47
  direction: PropTypes.Requireable<string>;
48
48
  }>>>;
49
49
  export let updateSort: PropTypes.Validator<(...args: any[]) => any>;
50
- export let allItems: PropTypes.Requireable<(PropTypes.InferProps<{
50
+ export let allItems: PropTypes.Validator<(PropTypes.InferProps<{
51
51
  key: PropTypes.Requireable<string>;
52
52
  }> | null | undefined)[]>;
53
53
  export let customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
54
54
  export let hideEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
55
+ export let showEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
55
56
  }
56
57
  }
57
58
  import React from 'react';
@@ -1,10 +1,10 @@
1
- export function BundleAssetsTotalsTable({ className, jobs, customComponentLink: CustomComponentLink, ...restProps }: {
1
+ export function BundleAssetsTotals({ className, jobs, customComponentLink: CustomComponentLink, ...restProps }: {
2
2
  [x: string]: any;
3
3
  className: any;
4
4
  jobs: any;
5
5
  customComponentLink: any;
6
6
  }): React.JSX.Element;
7
- export namespace BundleAssetsTotalsTable {
7
+ export namespace BundleAssetsTotals {
8
8
  namespace defaultProps {
9
9
  export let className: string;
10
10
  export let jobs: never[];
@@ -0,0 +1 @@
1
+ export * from "./bundle-assets-totals";
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import type { SortAction } from '../../types';
2
+ import { SortAction } from '../../types';
3
3
  import { ModuleMetric } from './bundle-modules.constants';
4
4
  import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
5
5
  interface BundleModulesProps extends React.ComponentProps<'div'> {
@@ -18,6 +18,7 @@ interface BundleModulesProps extends React.ComponentProps<'div'> {
18
18
  updateSearch: (newSerarch: string) => void;
19
19
  entryId?: string;
20
20
  hideEntryInfo: () => void;
21
+ showEntryInfo: (entryId: string) => void;
21
22
  moduleMetric: ModuleMetric;
22
23
  setModuleMetric: (newValue: ModuleMetric) => void;
23
24
  customComponentLink: React.ElementType;
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import type { SortAction } from '../../types';
3
3
  import { BundleModules as BaseComponent } from './bundle-modules';
4
4
  import * as types from './bundle-modules.types';
5
- interface BundleModulesProps extends Omit<React.ComponentProps<typeof BaseComponent>, 'jobs' | 'items' | 'chunks' | 'updateFilters' | 'resetFilters' | 'resetAllFilters' | 'filters' | 'sort' | 'updateSort' | 'search' | 'updateSearch' | 'allItems' | 'totalRowCount' | 'hideEntryInfo'> {
5
+ interface BundleModulesProps extends Omit<React.ComponentProps<typeof BaseComponent>, 'jobs' | 'items' | 'chunks' | 'updateFilters' | 'resetFilters' | 'resetAllFilters' | 'filters' | 'sort' | 'updateSort' | 'search' | 'updateSearch' | 'allItems' | 'totalRowCount' | 'hideEntryInfo' | 'showEntryInfo'> {
6
6
  jobs: Array<types.Job>;
7
7
  filters: Record<string, boolean>;
8
8
  search?: string;
@@ -45,6 +45,7 @@ export namespace BundlePackages {
45
45
  let entryId_1: PropTypes.Requireable<string>;
46
46
  export { entryId_1 as entryId };
47
47
  export let hideEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
48
+ export let showEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
48
49
  }
49
50
  }
50
51
  import React from 'react';
@@ -1,7 +1,6 @@
1
1
  export { BrowsertimeTable } from "./browsertime-table";
2
2
  export { BundleAssets } from "./bundle-assets";
3
- export { BundleAssetsTotalsTable } from "./bundle-assets-totals-table";
4
- export { BundleAssetsTotalsChartBars } from "./bundle-assets-totals-chart-bars";
3
+ export { BundleAssetsTotals } from "./bundle-assets-totals";
5
4
  export { BundlePackages } from "./bundle-packages";
6
5
  export { BundleModules } from "./bundle-modules";
7
6
  export { ComponentLink } from "./component-link";
@@ -0,0 +1 @@
1
+ export * from './metrics-display-selector';
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import { MetricsDisplayType } from '../../constants';
3
+ import { FlexStack } from '../../layout/flex-stack';
4
+ interface MetricsDisplaySelectorProps {
5
+ value: MetricsDisplayType;
6
+ onSelect: (newValue: MetricsDisplayType) => void;
7
+ }
8
+ export declare const MetricsDisplaySelector: (props: MetricsDisplaySelectorProps & Omit<React.ComponentProps<typeof FlexStack>, 'onSelect' | 'value'>) => React.JSX.Element;
9
+ export {};
@@ -0,0 +1 @@
1
+ export * from './metrics-treemap';
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import type { ReportMetricRow } from '@bundle-stats/utils';
3
+ interface MetricsTreemapProps {
4
+ items: Array<ReportMetricRow>;
5
+ emptyMessage?: React.ReactNode;
6
+ onItemClick?: (entryId: string) => void;
7
+ }
8
+ export declare const MetricsTreemap: (props: MetricsTreemapProps & React.ComponentProps<'div'>) => React.JSX.Element;
9
+ export {};
@@ -1,18 +1,22 @@
1
- export namespace URLS {
2
- let OVERVIEW: string;
3
- let ASSETS: string;
4
- let MODULES: string;
5
- let PACKAGES: string;
6
- }
7
- export const SECTION_URLS: {
1
+ export declare const URLS: {
2
+ OVERVIEW: string;
3
+ ASSETS: string;
4
+ MODULES: string;
5
+ PACKAGES: string;
6
+ };
7
+ export declare const SECTION_URLS: {
8
8
  [x: string]: string;
9
9
  };
10
- export const ASSETS_SIZES_FILE_TYPE_MAP: {};
11
- export const METRICS_WEBPACK_GENERAL: string[];
12
- export const METRICS_WEBPACK_ASSETS: string[];
13
- export const METRICS_WEBPACK_MODULES: string[];
14
- export const METRICS_WEBPACK_PACKAGES: string[];
15
- export namespace SORT {
16
- let ASC: string;
17
- let DESC: string;
10
+ export declare const ASSETS_SIZES_FILE_TYPE_MAP: {};
11
+ export declare const METRICS_WEBPACK_GENERAL: string[];
12
+ export declare const METRICS_WEBPACK_ASSETS: string[];
13
+ export declare const METRICS_WEBPACK_MODULES: string[];
14
+ export declare const METRICS_WEBPACK_PACKAGES: string[];
15
+ export declare const SORT: {
16
+ ASC: string;
17
+ DESC: string;
18
+ };
19
+ export declare enum MetricsDisplayType {
20
+ TABLE = "table",
21
+ TREEMAP = "treemap"
18
22
  }
@@ -0,0 +1,4 @@
1
+ import { MetricsDisplayType } from '../constants';
2
+ type UseMetricsDisplayType = [MetricsDisplayType, (value: MetricsDisplayType) => void];
3
+ export declare const useMetricsDisplayType: () => UseMetricsDisplayType;
4
+ export {};
@@ -0,0 +1,10 @@
1
+ interface UseEntryIdParams {
2
+ setState: (data: {
3
+ entryId: string;
4
+ }) => void;
5
+ }
6
+ export declare const useShowEntry: (params: UseEntryIdParams) => {
7
+ hideEntryInfo: () => void;
8
+ showEntryInfo: (entryId: string) => void;
9
+ };
10
+ export {};
@@ -14,6 +14,8 @@ declare const ICONS: {
14
14
  readonly GITHUB: "github";
15
15
  readonly INFO: "info";
16
16
  readonly HELP: "help";
17
+ readonly TABLE: "table";
18
+ readonly TREEMAP: "treemap";
17
19
  readonly MENU: "menu";
18
20
  readonly MORE_VERTICAL: "more-vertical";
19
21
  readonly SORT: "sort";
@@ -47,6 +49,8 @@ export declare const Icon: {
47
49
  readonly GITHUB: "github";
48
50
  readonly INFO: "info";
49
51
  readonly HELP: "help";
52
+ readonly TABLE: "table";
53
+ readonly TREEMAP: "treemap";
50
54
  readonly MENU: "menu";
51
55
  readonly MORE_VERTICAL: "more-vertical";
52
56
  readonly SORT: "sort";
@@ -6,7 +6,6 @@ export { Dropdown } from "./dropdown";
6
6
  export { EmptySet } from "./empty-set";
7
7
  export { FileName } from "./file-name";
8
8
  export { Filters } from "./filters";
9
- export { HorizontalBarChart } from "./horizontal-bar-chart";
10
9
  export { HoverCard } from "./hover-card";
11
10
  export { Icon } from "./icon";
12
11
  export { Input } from "./input";
@@ -1,95 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- var __importDefault = (this && this.__importDefault) || function (mod) {
26
- return (mod && mod.__esModule) ? mod : { "default": mod };
27
- };
28
- Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.BundleAssetsTotalsChartBars = void 0;
30
- const react_1 = __importDefault(require("react"));
31
- const prop_types_1 = __importDefault(require("prop-types"));
32
- const classnames_1 = __importDefault(require("classnames"));
33
- const map_1 = __importDefault(require("lodash/map"));
34
- const max_1 = __importDefault(require("lodash/max"));
35
- const sum_1 = __importDefault(require("lodash/sum"));
36
- const webpack = __importStar(require("@bundle-stats/utils/lib-esm/webpack"));
37
- const utils_1 = require("@bundle-stats/utils");
38
- const constants_1 = require("../../constants");
39
- const horizontal_bar_chart_1 = require("../../ui/horizontal-bar-chart");
40
- const component_link_1 = require("../component-link");
41
- const utils_2 = require("../../utils");
42
- const stack_1 = require("../../layout/stack");
43
- const job_name_1 = require("../job-name");
44
- const metric_run_info_1 = require("../metric-run-info");
45
- const bundle_assets_totals_chart_bars_module_css_1 = __importDefault(require("./bundle-assets-totals-chart-bars.module.css"));
46
- const getTooltip = (items, jobs, itemIndex, runIndex) => () => {
47
- const metricId = items?.[itemIndex]?.key;
48
- const current = items?.[itemIndex]?.runs?.[runIndex]?.value || 0;
49
- const baseline = items?.[itemIndex]?.runs?.[runIndex + 1]?.value;
50
- return (react_1.default.createElement(metric_run_info_1.MetricRunInfo, { className: bundle_assets_totals_chart_bars_module_css_1.default.itemTooltip, metricId: metricId, current: current, baseline: baseline, showMetridDescription: false, size: "large" }));
51
- };
52
- const BundleAssetsTotalsChartBars = ({ className, jobs, customComponentLink: CustomComponentLink, }) => {
53
- const rootClassName = (0, classnames_1.default)(bundle_assets_totals_chart_bars_module_css_1.default.root, className);
54
- const items = webpack.compareBySection.sizes(jobs);
55
- const dataGraphs = [];
56
- items.forEach(({ runs }) => {
57
- runs.forEach((run, runIndex) => {
58
- dataGraphs[runIndex] = [...(dataGraphs[runIndex] || []), run?.value || 0];
59
- });
60
- });
61
- const maxValues = (0, max_1.default)((0, map_1.default)(dataGraphs, (values) => (0, sum_1.default)(values)));
62
- const maxValue = (0, max_1.default)(maxValues);
63
- const labels = items.map(({ key, label }) => {
64
- const fileType = constants_1.ASSETS_SIZES_FILE_TYPE_MAP[key];
65
- const componentData = (0, utils_1.getBundleAssetsFileTypeComponentLink)(fileType, label);
66
- return (react_1.default.createElement(CustomComponentLink, { className: bundle_assets_totals_chart_bars_module_css_1.default.itemLink, ...componentData }, label));
67
- });
68
- const colors = (0, utils_2.getColors)((0, max_1.default)((0, map_1.default)(dataGraphs, (values) => values.length)));
69
- return (react_1.default.createElement(stack_1.Stack, { className: rootClassName, space: "small" }, dataGraphs.map((data, runIndex) => {
70
- const { internalBuildNumber } = jobs[runIndex];
71
- const values = data.map((value, valueIndex) => ({
72
- value,
73
- color: colors[valueIndex],
74
- label: labels[valueIndex],
75
- getItemTooltip: getTooltip(items, jobs, valueIndex, runIndex),
76
- }));
77
- return (react_1.default.createElement("div", { key: internalBuildNumber || runIndex, className: bundle_assets_totals_chart_bars_module_css_1.default.item },
78
- react_1.default.createElement("h3", { className: bundle_assets_totals_chart_bars_module_css_1.default.itemTitle },
79
- react_1.default.createElement(job_name_1.JobName, { internalBuildNumber: internalBuildNumber })),
80
- react_1.default.createElement(horizontal_bar_chart_1.HorizontalBarChart, { className: bundle_assets_totals_chart_bars_module_css_1.default.itemChart, data: { labels, values }, maxValue: maxValue })));
81
- })));
82
- };
83
- exports.BundleAssetsTotalsChartBars = BundleAssetsTotalsChartBars;
84
- exports.BundleAssetsTotalsChartBars.defaultProps = {
85
- className: '',
86
- customComponentLink: component_link_1.ComponentLink,
87
- };
88
- exports.BundleAssetsTotalsChartBars.propTypes = {
89
- className: prop_types_1.default.string,
90
- jobs: prop_types_1.default.arrayOf(prop_types_1.default.shape({
91
- internalBuildNumber: prop_types_1.default.number,
92
- })).isRequired,
93
- customComponentLink: prop_types_1.default.elementType,
94
- };
95
- //# sourceMappingURL=bundle-assets-totals-chart-bars.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"bundle-assets-totals-chart-bars.js","sourceRoot":"","sources":["../../../src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.jsx"],"names":[],"mappings":"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"}
@@ -1,42 +0,0 @@
1
- .item {
2
- position: relative;
3
- }
4
-
5
- .itemTitle {
6
- position: absolute;
7
- right: 0;
8
- bottom: 100%;
9
- margin: 0 0 2px;
10
-
11
- color: var(--color-text-light);
12
- font-size: var(--size-xsmall);
13
- font-weight: bold;
14
- line-height: 1.1;
15
- text-transform: uppercase;
16
- }
17
-
18
- .item:hover .itemTitle {
19
- color: var(--color-text);
20
- }
21
-
22
- .itemChart {
23
- height: var(--space-large);
24
- }
25
-
26
- .itemTooltip {
27
- padding: var(--space-xxsmall) var(--space-xxxsmall);
28
- min-width: 240px;
29
- text-align: left;
30
- font-size: var(--size-medium);
31
- line-height: var(--line-height);
32
- }
33
-
34
- .itemLink {
35
- color: inherit;
36
- text-decoration: none;
37
- }
38
-
39
- .itemLink:hover {
40
- color: inherit;
41
- text-decoration: underline;
42
- }
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/bundle-assets-totals-chart-bars/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,oEAAkD"}
@@ -1,57 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- var __importDefault = (this && this.__importDefault) || function (mod) {
26
- return (mod && mod.__esModule) ? mod : { "default": mod };
27
- };
28
- Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.BundleAssetsTotalsTable = void 0;
30
- const react_1 = __importDefault(require("react"));
31
- const prop_types_1 = __importDefault(require("prop-types"));
32
- const utils_1 = require("@bundle-stats/utils");
33
- const webpack = __importStar(require("@bundle-stats/utils/lib-esm/webpack"));
34
- const constants_1 = require("../../constants");
35
- const metrics_table_1 = require("../metrics-table");
36
- const component_link_1 = require("../component-link");
37
- const BundleAssetsTotalsTable = ({ className, jobs, customComponentLink: CustomComponentLink, ...restProps }) => {
38
- const items = webpack.compareBySection.sizes(jobs);
39
- const renderRowHeader = (item) => {
40
- const fileType = constants_1.ASSETS_SIZES_FILE_TYPE_MAP[item.key];
41
- const { section, title, params } = (0, utils_1.getBundleAssetsFileTypeComponentLink)(fileType, item.label);
42
- return (react_1.default.createElement(CustomComponentLink, { section: section, title: title, params: params }, item.label));
43
- };
44
- return (react_1.default.createElement(metrics_table_1.MetricsTable, { className: className, runs: jobs, items: items, renderRowHeader: renderRowHeader, showHeaderSum: true, ...restProps }));
45
- };
46
- exports.BundleAssetsTotalsTable = BundleAssetsTotalsTable;
47
- exports.BundleAssetsTotalsTable.defaultProps = {
48
- className: '',
49
- jobs: [],
50
- customComponentLink: component_link_1.ComponentLink,
51
- };
52
- exports.BundleAssetsTotalsTable.propTypes = {
53
- className: prop_types_1.default.string,
54
- jobs: prop_types_1.default.array,
55
- customComponentLink: prop_types_1.default.elementType,
56
- };
57
- //# sourceMappingURL=bundle-assets-totals-table.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"bundle-assets-totals-table.js","sourceRoot":"","sources":["../../../src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,+CAA2E;AAC3E,6EAA+D;AAE/D,+CAA6D;AAC7D,oDAAgD;AAChD,sDAAkD;AAE3C,MAAM,uBAAuB,GAAG,CAAC,EACtC,SAAS,EACT,IAAI,EACJ,mBAAmB,EAAE,mBAAmB,EACxC,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,OAAO,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE;QAC/B,MAAM,QAAQ,GAAG,sCAA0B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACtD,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAA,4CAAoC,EAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAE9F,OAAO,CACL,8BAAC,mBAAmB,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,IAChE,IAAI,CAAC,KAAK,CACS,CACvB,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,4BAAY,IACX,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,eAAe,EAChC,aAAa,WACT,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,uBAAuB,2BA6BlC;AAEF,+BAAuB,CAAC,YAAY,GAAG;IACrC,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,EAAE;IACR,mBAAmB,EAAE,8BAAa;CACnC,CAAC;AAEF,+BAAuB,CAAC,SAAS,GAAG;IAElC,SAAS,EAAE,oBAAS,CAAC,MAAM;IAG3B,IAAI,EAAE,oBAAS,CAAC,KAAK;IAErB,mBAAmB,EAAE,oBAAS,CAAC,WAAW;CAC3C,CAAC"}
@@ -1,3 +0,0 @@
1
- .title {
2
- color: var(--color-text-light);
3
- }
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/bundle-assets-totals-table/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+DAA6C"}
@@ -1,102 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.HorizontalBarChart = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const prop_types_1 = __importDefault(require("prop-types"));
9
- const round_1 = __importDefault(require("lodash/round"));
10
- const sum_1 = __importDefault(require("lodash/sum"));
11
- const classnames_1 = __importDefault(require("classnames"));
12
- const utils_1 = require("../../utils");
13
- const tooltip_1 = require("../tooltip");
14
- const horizontal_bar_chart_module_css_1 = __importDefault(require("./horizontal-bar-chart.module.css"));
15
- class HorizontalBarChartItem extends react_1.default.Component {
16
- constructor(props) {
17
- super(props);
18
- this.textRef = react_1.default.createRef();
19
- this.ref = react_1.default.createRef();
20
- this.state = {
21
- isTextOverflowing: true,
22
- };
23
- }
24
- componentDidMount() {
25
- const wrapperWidth = this.ref?.current?.clientWidth || 0;
26
- const textWidth = this.textRef?.current?.scrollWidth || 0;
27
- if (wrapperWidth >= (textWidth + 2 * 4)) {
28
- this.setState({ isTextOverflowing: false });
29
- }
30
- }
31
- render() {
32
- const { color, label, getItemTooltip, width, } = this.props;
33
- const { isTextOverflowing } = this.state;
34
- const tooltipContent = getItemTooltip();
35
- return (react_1.default.createElement("span", { className: (0, classnames_1.default)(horizontal_bar_chart_module_css_1.default.item, isTextOverflowing && horizontal_bar_chart_module_css_1.default.textOverflowed), style: {
36
- width,
37
- background: color,
38
- }, ref: this.ref },
39
- react_1.default.createElement(tooltip_1.Tooltip, { className: horizontal_bar_chart_module_css_1.default.itemContent, title: tooltipContent, darkMode: false },
40
- react_1.default.createElement("span", { className: horizontal_bar_chart_module_css_1.default.itemLabel, ref: this.textRef }, label))));
41
- }
42
- }
43
- HorizontalBarChartItem.propTypes = {
44
- width: prop_types_1.default.string.isRequired,
45
- color: prop_types_1.default.string.isRequired,
46
- label: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.element]).isRequired,
47
- getItemTooltip: prop_types_1.default.func,
48
- };
49
- HorizontalBarChartItem.defaultProps = {
50
- getItemTooltip: () => null,
51
- };
52
- const getTotalValues = (values) => (0, sum_1.default)(values.map((entry) => {
53
- if (typeof entry === 'object') {
54
- return entry.value;
55
- }
56
- return entry;
57
- }));
58
- const HorizontalBarChart = (props) => {
59
- const { className, data, maxValue } = props;
60
- const { labels, values } = data;
61
- const defaultColors = (0, utils_1.getColors)(labels.length);
62
- const total = maxValue || getTotalValues(values);
63
- const entries = values.reduce((agg, entry, index) => {
64
- const { value, color = defaultColors[index], label = labels[index], getItemTooltip, } = typeof entry === 'object' ? entry : { value: entry };
65
- const width = `${(0, round_1.default)((value / total) * 100, 2)}%`;
66
- return [
67
- ...agg,
68
- {
69
- value,
70
- width,
71
- color,
72
- label,
73
- getItemTooltip,
74
- },
75
- ];
76
- }, []);
77
- return (react_1.default.createElement("div", { className: (0, classnames_1.default)(horizontal_bar_chart_module_css_1.default.root, className) }, entries.map(({ color, getItemTooltip, label, width, }, index) => {
78
- const key = index;
79
- return (react_1.default.createElement(HorizontalBarChartItem, { key: key, width: width, color: color, label: label, getItemTooltip: getItemTooltip, className: horizontal_bar_chart_module_css_1.default.item }));
80
- })));
81
- };
82
- exports.HorizontalBarChart = HorizontalBarChart;
83
- exports.HorizontalBarChart.defaultProps = {
84
- className: '',
85
- maxValue: null,
86
- };
87
- exports.HorizontalBarChart.propTypes = {
88
- className: prop_types_1.default.string,
89
- data: prop_types_1.default.shape({
90
- labels: prop_types_1.default.arrayOf(prop_types_1.default.string),
91
- values: prop_types_1.default.arrayOf(prop_types_1.default.oneOfType([
92
- prop_types_1.default.number,
93
- prop_types_1.default.shape({
94
- value: prop_types_1.default.number,
95
- color: prop_types_1.default.string,
96
- label: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.element]),
97
- }),
98
- ])),
99
- }).isRequired,
100
- maxValue: prop_types_1.default.number,
101
- };
102
- //# sourceMappingURL=horizontal-bar-chart.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"horizontal-bar-chart.js","sourceRoot":"","sources":["../../../src/ui/horizontal-bar-chart/horizontal-bar-chart.jsx"],"names":[],"mappings":"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"}