@bundle-stats/ui 4.12.2 → 4.13.0-beta.10
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.
- package/lib/app/app.js +5 -13
- package/lib/app/app.js.map +1 -1
- package/lib/app/app.module.css +2 -2
- package/lib/assets/icons.svg +26 -20
- package/lib/assets/icons.svg.js +27 -23
- package/lib/assets/icons.svg.js.map +1 -1
- package/lib/components/bundle-assets/bundle-assets.js +21 -6
- package/lib/components/bundle-assets/bundle-assets.js.map +1 -1
- package/lib/components/bundle-assets/bundle-assets.module.css +0 -5
- package/lib/components/bundle-assets/index.js +3 -4
- package/lib/components/bundle-assets/index.js.map +1 -1
- package/lib/components/bundle-assets-totals/bundle-assets-totals.js +88 -0
- package/lib/components/bundle-assets-totals/bundle-assets-totals.js.map +1 -0
- package/lib/{ui/horizontal-bar-chart → components/bundle-assets-totals}/index.js +1 -1
- package/lib/components/bundle-assets-totals/index.js.map +1 -0
- package/lib/components/bundle-modules/bundle-modules.js +24 -9
- package/lib/components/bundle-modules/bundle-modules.js.map +1 -1
- package/lib/components/bundle-modules/bundle-modules.module.css +0 -5
- package/lib/components/bundle-modules/index.js +3 -4
- package/lib/components/bundle-modules/index.js.map +1 -1
- package/lib/components/bundle-packages/bundle-packages.js +19 -4
- package/lib/components/bundle-packages/bundle-packages.js.map +1 -1
- package/lib/components/bundle-packages/bundle-packages.module.css +0 -5
- package/lib/components/bundle-packages/index.js +3 -4
- package/lib/components/bundle-packages/index.js.map +1 -1
- package/lib/components/index.js +3 -7
- package/lib/components/index.js.map +1 -1
- package/lib/components/jobs-header/jobs-header.module.css +0 -4
- package/lib/components/{bundle-assets-totals-table → metrics-display-selector}/index.js +1 -1
- package/lib/components/metrics-display-selector/index.js.map +1 -0
- package/lib/components/metrics-display-selector/metrics-display-selector.js +21 -0
- package/lib/components/metrics-display-selector/metrics-display-selector.js.map +1 -0
- package/lib/components/metrics-display-selector/metrics-display-selector.module.css +10 -0
- package/lib/components/metrics-table/metrics-table.i18n.js +1 -6
- package/lib/components/metrics-table/metrics-table.i18n.js.map +1 -1
- package/lib/components/metrics-table/metrics-table.js +4 -37
- package/lib/components/metrics-table/metrics-table.js.map +1 -1
- package/lib/components/metrics-table/metrics-table.module.css +1 -44
- package/lib/components/{total-size-type-title → metrics-table-header}/index.js +1 -1
- package/lib/components/metrics-table-header/index.js.map +1 -0
- package/lib/components/metrics-table-header/metrics-table-header.i18n.js +9 -0
- package/lib/components/metrics-table-header/metrics-table-header.i18n.js.map +1 -0
- package/lib/components/metrics-table-header/metrics-table-header.js +79 -0
- package/lib/components/metrics-table-header/metrics-table-header.js.map +1 -0
- package/lib/components/metrics-table-header/metrics-table-header.module.css +51 -0
- package/lib/components/metrics-table-options/metrics-table-options.js +2 -2
- package/lib/components/metrics-table-options/metrics-table-options.js.map +1 -1
- package/lib/components/metrics-table-title/metrics-table-title.js +1 -1
- package/lib/components/metrics-table-title/metrics-table-title.js.map +1 -1
- package/lib/components/metrics-table-title/metrics-table-title.module.css +4 -4
- package/lib/components/{bundle-assets-totals-chart-bars → metrics-treemap}/index.js +1 -1
- package/lib/components/metrics-treemap/index.js.map +1 -0
- package/lib/components/metrics-treemap/metrics-treemap.js +163 -0
- package/lib/components/metrics-treemap/metrics-treemap.js.map +1 -0
- package/lib/components/metrics-treemap/metrics-treemap.module.css +201 -0
- package/lib/components/sort-button/sort-button.module.css +1 -0
- package/lib/constants.js +6 -1
- package/lib/constants.js.map +1 -1
- package/lib/css/variables.css +11 -11
- package/lib/hooks/entry-info.js +12 -0
- package/lib/hooks/entry-info.js.map +1 -0
- package/lib/hooks/metrics-display-type.js +40 -0
- package/lib/hooks/metrics-display-type.js.map +1 -0
- package/lib/layout/flex-stack/flex-stack.js +3 -4
- package/lib/layout/flex-stack/flex-stack.js.map +1 -1
- package/lib/layout/flex-stack/flex-stack.module.css +19 -23
- package/lib/query-state.js +1 -1
- package/lib/query-state.js.map +1 -1
- package/lib/ui/button/button.module.css +1 -0
- package/lib/ui/dropdown/dropdown.js +10 -40
- package/lib/ui/dropdown/dropdown.js.map +1 -1
- package/lib/ui/dropdown/index.js.map +1 -1
- package/lib/ui/filters/filters.js +33 -35
- package/lib/ui/filters/filters.js.map +1 -1
- package/lib/ui/filters/filters.module.css +55 -67
- package/lib/ui/hover-card/hover-card.js +1 -1
- package/lib/ui/hover-card/hover-card.js.map +1 -1
- package/lib/ui/icon/icon.js +2 -0
- package/lib/ui/icon/icon.js.map +1 -1
- package/lib/ui/index.js +1 -3
- package/lib/ui/index.js.map +1 -1
- package/lib/ui/toolbar/toolbar.module.css +1 -3
- package/lib-esm/app/app.js +5 -13
- package/lib-esm/app/app.js.map +1 -1
- package/lib-esm/app/app.module.css +2 -2
- package/lib-esm/assets/icons.svg +26 -20
- package/lib-esm/assets/icons.svg.js +27 -23
- package/lib-esm/assets/icons.svg.js.map +1 -1
- package/lib-esm/components/bundle-assets/bundle-assets.js +21 -6
- package/lib-esm/components/bundle-assets/bundle-assets.js.map +1 -1
- package/lib-esm/components/bundle-assets/bundle-assets.module.css +0 -5
- package/lib-esm/components/bundle-assets/index.js +5 -6
- package/lib-esm/components/bundle-assets/index.js.map +1 -1
- package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.js +58 -0
- package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.js.map +1 -0
- package/lib-esm/components/bundle-assets-totals/index.js +2 -0
- package/lib-esm/components/bundle-assets-totals/index.js.map +1 -0
- package/lib-esm/components/bundle-modules/bundle-modules.js +24 -9
- package/lib-esm/components/bundle-modules/bundle-modules.js.map +1 -1
- package/lib-esm/components/bundle-modules/bundle-modules.module.css +0 -5
- package/lib-esm/components/bundle-modules/index.js +3 -4
- package/lib-esm/components/bundle-modules/index.js.map +1 -1
- package/lib-esm/components/bundle-packages/bundle-packages.js +19 -4
- package/lib-esm/components/bundle-packages/bundle-packages.js.map +1 -1
- package/lib-esm/components/bundle-packages/bundle-packages.module.css +0 -5
- package/lib-esm/components/bundle-packages/index.js +5 -6
- package/lib-esm/components/bundle-packages/index.js.map +1 -1
- package/lib-esm/components/index.js +1 -3
- package/lib-esm/components/index.js.map +1 -1
- package/lib-esm/components/jobs-header/jobs-header.module.css +0 -4
- package/lib-esm/components/metrics-display-selector/index.js +2 -0
- package/lib-esm/components/metrics-display-selector/index.js.map +1 -0
- package/lib-esm/components/metrics-display-selector/metrics-display-selector.js +14 -0
- package/lib-esm/components/metrics-display-selector/metrics-display-selector.js.map +1 -0
- package/lib-esm/components/metrics-display-selector/metrics-display-selector.module.css +10 -0
- package/lib-esm/components/metrics-table/metrics-table.i18n.js +0 -5
- package/lib-esm/components/metrics-table/metrics-table.i18n.js.map +1 -1
- package/lib-esm/components/metrics-table/metrics-table.js +4 -37
- package/lib-esm/components/metrics-table/metrics-table.js.map +1 -1
- package/lib-esm/components/metrics-table/metrics-table.module.css +1 -44
- package/lib-esm/components/metrics-table-header/index.js +2 -0
- package/lib-esm/components/metrics-table-header/index.js.map +1 -0
- package/lib-esm/components/metrics-table-header/metrics-table-header.i18n.js +6 -0
- package/lib-esm/components/metrics-table-header/metrics-table-header.i18n.js.map +1 -0
- package/lib-esm/components/metrics-table-header/metrics-table-header.js +49 -0
- package/lib-esm/components/metrics-table-header/metrics-table-header.js.map +1 -0
- package/lib-esm/components/metrics-table-header/metrics-table-header.module.css +51 -0
- package/lib-esm/components/metrics-table-options/metrics-table-options.js +3 -3
- package/lib-esm/components/metrics-table-options/metrics-table-options.js.map +1 -1
- package/lib-esm/components/metrics-table-title/metrics-table-title.js +1 -1
- package/lib-esm/components/metrics-table-title/metrics-table-title.js.map +1 -1
- package/lib-esm/components/metrics-table-title/metrics-table-title.module.css +4 -4
- package/lib-esm/components/metrics-treemap/index.js +2 -0
- package/lib-esm/components/metrics-treemap/index.js.map +1 -0
- package/lib-esm/components/metrics-treemap/metrics-treemap.js +135 -0
- package/lib-esm/components/metrics-treemap/metrics-treemap.js.map +1 -0
- package/lib-esm/components/metrics-treemap/metrics-treemap.module.css +201 -0
- package/lib-esm/components/sort-button/sort-button.module.css +1 -0
- package/lib-esm/constants.js +5 -0
- package/lib-esm/constants.js.map +1 -1
- package/lib-esm/css/variables.css +11 -11
- package/lib-esm/hooks/entry-info.js +8 -0
- package/lib-esm/hooks/entry-info.js.map +1 -0
- package/lib-esm/hooks/metrics-display-type.js +36 -0
- package/lib-esm/hooks/metrics-display-type.js.map +1 -0
- package/lib-esm/layout/flex-stack/flex-stack.js +3 -4
- package/lib-esm/layout/flex-stack/flex-stack.js.map +1 -1
- package/lib-esm/layout/flex-stack/flex-stack.module.css +19 -23
- package/lib-esm/query-state.js +1 -1
- package/lib-esm/query-state.js.map +1 -1
- package/lib-esm/ui/button/button.module.css +1 -0
- package/lib-esm/ui/dropdown/dropdown.js +8 -39
- package/lib-esm/ui/dropdown/dropdown.js.map +1 -1
- package/lib-esm/ui/dropdown/index.js.map +1 -1
- package/lib-esm/ui/filters/filters.js +34 -36
- package/lib-esm/ui/filters/filters.js.map +1 -1
- package/lib-esm/ui/filters/filters.module.css +55 -67
- package/lib-esm/ui/hover-card/hover-card.js +1 -1
- package/lib-esm/ui/hover-card/hover-card.js.map +1 -1
- package/lib-esm/ui/icon/icon.js +2 -0
- package/lib-esm/ui/icon/icon.js.map +1 -1
- package/lib-esm/ui/index.js +0 -1
- package/lib-esm/ui/index.js.map +1 -1
- package/lib-esm/ui/toolbar/toolbar.module.css +1 -3
- package/package.json +10 -7
- package/src/app/app.jsx +5 -17
- package/src/app/app.module.css +2 -2
- package/src/assets/icons/table.svg +3 -0
- package/src/assets/icons/treemap.svg +4 -0
- package/src/assets/icons.svg +26 -20
- package/src/assets/icons.svg.jsx +91 -55
- package/src/components/bundle-assets/bundle-assets.jsx +47 -16
- package/src/components/bundle-assets/bundle-assets.module.css +0 -5
- package/src/components/bundle-assets/index.jsx +10 -5
- package/src/components/bundle-assets-totals/bundle-assets-totals.jsx +125 -0
- package/src/components/bundle-assets-totals/index.js +1 -0
- package/src/components/bundle-modules/bundle-modules.module.css +0 -5
- package/src/components/bundle-modules/bundle-modules.tsx +65 -35
- package/src/components/bundle-modules/index.tsx +4 -3
- package/src/components/bundle-packages/bundle-packages.jsx +42 -14
- package/src/components/bundle-packages/bundle-packages.module.css +0 -5
- package/src/components/bundle-packages/index.jsx +10 -5
- package/src/components/index.js +1 -3
- package/src/components/jobs-header/jobs-header.module.css +0 -4
- package/src/components/metrics-display-selector/index.tsx +1 -0
- package/src/components/metrics-display-selector/metrics-display-selector.module.css +10 -0
- package/src/components/metrics-display-selector/metrics-display-selector.tsx +47 -0
- package/src/components/metrics-table/metrics-table.i18n.ts +0 -7
- package/src/components/metrics-table/metrics-table.module.css +1 -44
- package/src/components/metrics-table/metrics-table.tsx +17 -153
- package/src/components/metrics-table-header/index.ts +1 -0
- package/src/components/metrics-table-header/metrics-table-header.i18n.ts +6 -0
- package/src/components/metrics-table-header/metrics-table-header.module.css +51 -0
- package/src/components/metrics-table-header/metrics-table-header.tsx +172 -0
- package/src/components/metrics-table-options/metrics-table-options.jsx +4 -10
- package/src/components/metrics-table-title/metrics-table-title.jsx +1 -1
- package/src/components/metrics-table-title/metrics-table-title.module.css +4 -4
- package/src/components/metrics-treemap/index.ts +1 -0
- package/src/components/metrics-treemap/metrics-treemap.module.css +201 -0
- package/src/components/metrics-treemap/metrics-treemap.stories.tsx +23 -0
- package/src/components/metrics-treemap/metrics-treemap.tsx +304 -0
- package/src/components/sort-button/sort-button.module.css +1 -0
- package/src/{constants.js → constants.ts} +5 -0
- package/src/css/variables.css +11 -11
- package/src/hooks/entry-info.ts +19 -0
- package/src/hooks/metrics-display-type.ts +56 -0
- package/src/layout/flex-stack/flex-stack.module.css +19 -23
- package/src/layout/flex-stack/flex-stack.tsx +2 -8
- package/src/query-state.tsx +1 -1
- package/src/types.d.ts +2 -0
- package/src/ui/button/button.module.css +1 -0
- package/src/ui/dropdown/dropdown.stories.tsx +25 -0
- package/src/ui/dropdown/dropdown.tsx +66 -0
- package/src/ui/filters/filters.module.css +55 -67
- package/src/ui/filters/filters.stories.tsx +109 -0
- package/src/ui/filters/filters.tsx +128 -167
- package/src/ui/hover-card/hover-card.tsx +1 -1
- package/src/ui/icon/icon.tsx +2 -0
- package/src/ui/index.js +0 -1
- package/src/ui/toolbar/toolbar.module.css +1 -3
- package/types/components/bundle-assets/bundle-assets.d.ts +2 -1
- package/types/components/{bundle-assets-totals-table/bundle-assets-totals-table.d.ts → bundle-assets-totals/bundle-assets-totals.d.ts} +6 -2
- package/types/components/bundle-assets-totals/index.d.ts +1 -0
- package/types/components/bundle-modules/bundle-modules.d.ts +2 -1
- package/types/components/bundle-modules/index.d.ts +1 -1
- package/types/components/bundle-packages/bundle-packages.d.ts +1 -0
- package/types/components/index.d.ts +1 -3
- package/types/components/metrics-display-selector/index.d.ts +1 -0
- package/types/components/metrics-display-selector/metrics-display-selector.d.ts +9 -0
- package/types/components/metrics-table/metrics-table.d.ts +4 -10
- package/types/components/metrics-table/metrics-table.i18n.d.ts +0 -5
- package/types/components/metrics-table-header/index.d.ts +1 -0
- package/types/components/metrics-table-header/metrics-table-header.d.ts +15 -0
- package/types/components/metrics-table-header/metrics-table-header.i18n.d.ts +5 -0
- package/types/components/metrics-treemap/index.d.ts +1 -0
- package/types/components/metrics-treemap/metrics-treemap.d.ts +9 -0
- package/types/constants.d.ts +19 -15
- package/types/hooks/entry-info.d.ts +8 -0
- package/types/hooks/metrics-display-type.d.ts +4 -0
- package/types/ui/dropdown/dropdown.d.ts +12 -47
- package/types/ui/dropdown/index.d.ts +1 -1
- package/types/ui/filters/filters.d.ts +2 -7
- package/types/ui/icon/icon.d.ts +4 -0
- package/types/ui/index.d.ts +0 -1
- package/lib/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js +0 -95
- package/lib/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js.map +0 -1
- package/lib/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css +0 -42
- package/lib/components/bundle-assets-totals-chart-bars/index.js.map +0 -1
- package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.js +0 -57
- package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.js.map +0 -1
- package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css +0 -3
- package/lib/components/bundle-assets-totals-table/index.js.map +0 -1
- package/lib/components/total-size-type-title/index.js.map +0 -1
- package/lib/components/total-size-type-title/total-size-type-title.js +0 -32
- package/lib/components/total-size-type-title/total-size-type-title.js.map +0 -1
- package/lib/components/total-size-type-title/total-size-type-title.module.css +0 -14
- package/lib/ui/horizontal-bar-chart/horizontal-bar-chart.js +0 -102
- package/lib/ui/horizontal-bar-chart/horizontal-bar-chart.js.map +0 -1
- package/lib/ui/horizontal-bar-chart/horizontal-bar-chart.module.css +0 -42
- package/lib/ui/horizontal-bar-chart/index.js.map +0 -1
- package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js +0 -66
- package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js.map +0 -1
- package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css +0 -42
- package/lib-esm/components/bundle-assets-totals-chart-bars/index.js +0 -2
- package/lib-esm/components/bundle-assets-totals-chart-bars/index.js.map +0 -1
- package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.js +0 -27
- package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.js.map +0 -1
- package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css +0 -3
- package/lib-esm/components/bundle-assets-totals-table/index.js +0 -2
- package/lib-esm/components/bundle-assets-totals-table/index.js.map +0 -1
- package/lib-esm/components/total-size-type-title/index.js +0 -2
- package/lib-esm/components/total-size-type-title/index.js.map +0 -1
- package/lib-esm/components/total-size-type-title/total-size-type-title.js +0 -25
- package/lib-esm/components/total-size-type-title/total-size-type-title.js.map +0 -1
- package/lib-esm/components/total-size-type-title/total-size-type-title.module.css +0 -14
- package/lib-esm/ui/horizontal-bar-chart/horizontal-bar-chart.js +0 -96
- package/lib-esm/ui/horizontal-bar-chart/horizontal-bar-chart.js.map +0 -1
- package/lib-esm/ui/horizontal-bar-chart/horizontal-bar-chart.module.css +0 -42
- package/lib-esm/ui/horizontal-bar-chart/index.js +0 -2
- package/lib-esm/ui/horizontal-bar-chart/index.js.map +0 -1
- package/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.jsx +0 -106
- package/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css +0 -42
- package/src/components/bundle-assets-totals-chart-bars/index.js +0 -1
- package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx +0 -55
- package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css +0 -3
- package/src/components/bundle-assets-totals-table/index.js +0 -1
- package/src/components/total-size-type-title/index.js +0 -1
- package/src/components/total-size-type-title/total-size-type-title.jsx +0 -41
- package/src/components/total-size-type-title/total-size-type-title.module.css +0 -14
- package/src/ui/dropdown/dropdown.jsx +0 -88
- package/src/ui/horizontal-bar-chart/horizontal-bar-chart.jsx +0 -156
- package/src/ui/horizontal-bar-chart/horizontal-bar-chart.module.css +0 -42
- package/src/ui/horizontal-bar-chart/index.js +0 -1
- package/types/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.d.ts +0 -22
- package/types/components/bundle-assets-totals-chart-bars/index.d.ts +0 -1
- package/types/components/bundle-assets-totals-table/index.d.ts +0 -1
- package/types/components/total-size-type-title/index.d.ts +0 -1
- package/types/components/total-size-type-title/total-size-type-title.d.ts +0 -14
- package/types/ui/horizontal-bar-chart/horizontal-bar-chart.d.ts +0 -23
- package/types/ui/horizontal-bar-chart/index.d.ts +0 -1
- /package/src/ui/dropdown/{index.js → index.ts} +0 -0
|
@@ -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,cAAc,mCAAmC,CAAC"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
|
|
4
|
-
import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
|
|
5
|
-
import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
|
|
6
|
-
import { MetricsTable } from '../metrics-table';
|
|
7
|
-
import { ComponentLink } from '../component-link';
|
|
8
|
-
export const BundleAssetsTotalsTable = ({ className, jobs, customComponentLink: CustomComponentLink, ...restProps }) => {
|
|
9
|
-
const items = webpack.compareBySection.sizes(jobs);
|
|
10
|
-
const renderRowHeader = (item) => {
|
|
11
|
-
const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
|
|
12
|
-
const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
|
|
13
|
-
return (React.createElement(CustomComponentLink, { section: section, title: title, params: params }, item.label));
|
|
14
|
-
};
|
|
15
|
-
return (React.createElement(MetricsTable, { className: className, runs: jobs, items: items, renderRowHeader: renderRowHeader, showHeaderSum: true, ...restProps }));
|
|
16
|
-
};
|
|
17
|
-
BundleAssetsTotalsTable.defaultProps = {
|
|
18
|
-
className: '',
|
|
19
|
-
jobs: [],
|
|
20
|
-
customComponentLink: ComponentLink,
|
|
21
|
-
};
|
|
22
|
-
BundleAssetsTotalsTable.propTypes = {
|
|
23
|
-
className: PropTypes.string,
|
|
24
|
-
jobs: PropTypes.array,
|
|
25
|
-
customComponentLink: PropTypes.elementType,
|
|
26
|
-
};
|
|
27
|
-
//# 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,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,oCAAoC,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,KAAK,OAAO,MAAM,qCAAqC,CAAC;AAE/D,OAAO,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,CAAC,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,0BAA0B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACtD,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,oCAAoC,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAE9F,OAAO,CACL,oBAAC,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,oBAAC,YAAY,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;AAEF,uBAAuB,CAAC,YAAY,GAAG;IACrC,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,EAAE;IACR,mBAAmB,EAAE,aAAa;CACnC,CAAC;AAEF,uBAAuB,CAAC,SAAS,GAAG;IAElC,SAAS,EAAE,SAAS,CAAC,MAAM;IAG3B,IAAI,EAAE,SAAS,CAAC,KAAK;IAErB,mBAAmB,EAAE,SAAS,CAAC,WAAW;CAC3C,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/bundle-assets-totals-table/index.js"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/total-size-type-title/index.js"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import cx from 'classnames';
|
|
4
|
-
import config from '../../config.json';
|
|
5
|
-
import I18N from '../../i18n';
|
|
6
|
-
import { FlexStack } from '../../layout/flex-stack';
|
|
7
|
-
import { Stack } from '../../layout/stack';
|
|
8
|
-
import { Button } from '../../ui/button';
|
|
9
|
-
import { Icon } from '../../ui/icon';
|
|
10
|
-
import { HoverCard } from '../../ui/hover-card';
|
|
11
|
-
import css from './total-size-type-title.module.css';
|
|
12
|
-
export const TotalSizeTypeTitle = ({ className }) => (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", className: cx(css.root, className) },
|
|
13
|
-
React.createElement("span", { className: css.text }, I18N.ASSET_TOTALS),
|
|
14
|
-
React.createElement(HoverCard, { label: React.createElement(Icon, { glyph: Icon.ICONS.HELP }), anchorClassName: css.anchor },
|
|
15
|
-
React.createElement(Stack, { space: "xxxsmall" },
|
|
16
|
-
React.createElement("p", null, I18N.ASSET_TOTALS_INFO),
|
|
17
|
-
React.createElement("p", null,
|
|
18
|
-
React.createElement(Button, { kind: "primary", type: "button", onClick: () => window.open(config.documentation.assets), className: css.readMoreLink }, I18N.READ_MORE))))));
|
|
19
|
-
TotalSizeTypeTitle.propTypes = {
|
|
20
|
-
className: PropTypes.string,
|
|
21
|
-
};
|
|
22
|
-
TotalSizeTypeTitle.defaultProps = {
|
|
23
|
-
className: '',
|
|
24
|
-
};
|
|
25
|
-
//# sourceMappingURL=total-size-type-title.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"total-size-type-title.js","sourceRoot":"","sources":["../../../src/components/total-size-type-title/total-size-type-title.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,GAAG,MAAM,oCAAoC,CAAC;AAErD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CACnD,oBAAC,SAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IAChF,8BAAM,SAAS,EAAE,GAAG,CAAC,IAAI,IAAG,IAAI,CAAC,YAAY,CAAQ;IACrD,oBAAC,SAAS,IAAC,KAAK,EAAE,oBAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI,EAAE,eAAe,EAAE,GAAG,CAAC,MAAM;QAC7E,oBAAC,KAAK,IAAC,KAAK,EAAC,UAAU;YACrB,+BAAI,IAAI,CAAC,iBAAiB,CAAK;YAC/B;gBACE,oBAAC,MAAM,IACL,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,EACvD,SAAS,EAAE,GAAG,CAAC,YAAY,IAE1B,IAAI,CAAC,SAAS,CACR,CACP,CACE,CACE,CACF,CACb,CAAC;AAEF,kBAAkB,CAAC,SAAS,GAAG;IAC7B,SAAS,EAAE,SAAS,CAAC,MAAM;CAC5B,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG;IAChC,SAAS,EAAE,EAAE;CACd,CAAC"}
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import round from 'lodash/round';
|
|
4
|
-
import sum from 'lodash/sum';
|
|
5
|
-
import cx from 'classnames';
|
|
6
|
-
import { getColors } from '../../utils';
|
|
7
|
-
import { Tooltip } from '../tooltip';
|
|
8
|
-
import css from './horizontal-bar-chart.module.css';
|
|
9
|
-
class HorizontalBarChartItem extends React.Component {
|
|
10
|
-
constructor(props) {
|
|
11
|
-
super(props);
|
|
12
|
-
this.textRef = React.createRef();
|
|
13
|
-
this.ref = React.createRef();
|
|
14
|
-
this.state = {
|
|
15
|
-
isTextOverflowing: true,
|
|
16
|
-
};
|
|
17
|
-
}
|
|
18
|
-
componentDidMount() {
|
|
19
|
-
var _a, _b, _c, _d;
|
|
20
|
-
const wrapperWidth = ((_b = (_a = this.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
|
|
21
|
-
const textWidth = ((_d = (_c = this.textRef) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.scrollWidth) || 0;
|
|
22
|
-
if (wrapperWidth >= (textWidth + 2 * 4)) {
|
|
23
|
-
this.setState({ isTextOverflowing: false });
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
render() {
|
|
27
|
-
const { color, label, getItemTooltip, width, } = this.props;
|
|
28
|
-
const { isTextOverflowing } = this.state;
|
|
29
|
-
const tooltipContent = getItemTooltip();
|
|
30
|
-
return (React.createElement("span", { className: cx(css.item, isTextOverflowing && css.textOverflowed), style: {
|
|
31
|
-
width,
|
|
32
|
-
background: color,
|
|
33
|
-
}, ref: this.ref },
|
|
34
|
-
React.createElement(Tooltip, { className: css.itemContent, title: tooltipContent, darkMode: false },
|
|
35
|
-
React.createElement("span", { className: css.itemLabel, ref: this.textRef }, label))));
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
HorizontalBarChartItem.propTypes = {
|
|
39
|
-
width: PropTypes.string.isRequired,
|
|
40
|
-
color: PropTypes.string.isRequired,
|
|
41
|
-
label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
|
|
42
|
-
getItemTooltip: PropTypes.func,
|
|
43
|
-
};
|
|
44
|
-
HorizontalBarChartItem.defaultProps = {
|
|
45
|
-
getItemTooltip: () => null,
|
|
46
|
-
};
|
|
47
|
-
const getTotalValues = (values) => sum(values.map((entry) => {
|
|
48
|
-
if (typeof entry === 'object') {
|
|
49
|
-
return entry.value;
|
|
50
|
-
}
|
|
51
|
-
return entry;
|
|
52
|
-
}));
|
|
53
|
-
export const HorizontalBarChart = (props) => {
|
|
54
|
-
const { className, data, maxValue } = props;
|
|
55
|
-
const { labels, values } = data;
|
|
56
|
-
const defaultColors = getColors(labels.length);
|
|
57
|
-
const total = maxValue || getTotalValues(values);
|
|
58
|
-
const entries = values.reduce((agg, entry, index) => {
|
|
59
|
-
const { value, color = defaultColors[index], label = labels[index], getItemTooltip, } = typeof entry === 'object' ? entry : { value: entry };
|
|
60
|
-
const width = `${round((value / total) * 100, 2)}%`;
|
|
61
|
-
return [
|
|
62
|
-
...agg,
|
|
63
|
-
{
|
|
64
|
-
value,
|
|
65
|
-
width,
|
|
66
|
-
color,
|
|
67
|
-
label,
|
|
68
|
-
getItemTooltip,
|
|
69
|
-
},
|
|
70
|
-
];
|
|
71
|
-
}, []);
|
|
72
|
-
return (React.createElement("div", { className: cx(css.root, className) }, entries.map(({ color, getItemTooltip, label, width, }, index) => {
|
|
73
|
-
const key = index;
|
|
74
|
-
return (React.createElement(HorizontalBarChartItem, { key: key, width: width, color: color, label: label, getItemTooltip: getItemTooltip, className: css.item }));
|
|
75
|
-
})));
|
|
76
|
-
};
|
|
77
|
-
HorizontalBarChart.defaultProps = {
|
|
78
|
-
className: '',
|
|
79
|
-
maxValue: null,
|
|
80
|
-
};
|
|
81
|
-
HorizontalBarChart.propTypes = {
|
|
82
|
-
className: PropTypes.string,
|
|
83
|
-
data: PropTypes.shape({
|
|
84
|
-
labels: PropTypes.arrayOf(PropTypes.string),
|
|
85
|
-
values: PropTypes.arrayOf(PropTypes.oneOfType([
|
|
86
|
-
PropTypes.number,
|
|
87
|
-
PropTypes.shape({
|
|
88
|
-
value: PropTypes.number,
|
|
89
|
-
color: PropTypes.string,
|
|
90
|
-
label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
|
91
|
-
}),
|
|
92
|
-
])),
|
|
93
|
-
}).isRequired,
|
|
94
|
-
maxValue: PropTypes.number,
|
|
95
|
-
};
|
|
96
|
-
//# 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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"}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
.root {
|
|
2
|
-
background: var(--color-highlight);
|
|
3
|
-
display: flex;
|
|
4
|
-
align-items: stretch;
|
|
5
|
-
justify-content: flex-start;
|
|
6
|
-
width: 100%;
|
|
7
|
-
overflow: hidden;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.item {
|
|
11
|
-
flex: 0 1 auto;
|
|
12
|
-
background: var(--color-text);
|
|
13
|
-
display: inline-flex;
|
|
14
|
-
min-width: var(--space-xxxsmall);
|
|
15
|
-
min-height: var(--space-medium);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.itemContent {
|
|
19
|
-
display: flex;
|
|
20
|
-
width: 100%;
|
|
21
|
-
height: 100%;
|
|
22
|
-
padding: var(--space-xxsmall);
|
|
23
|
-
align-items: center;
|
|
24
|
-
justify-content: center;
|
|
25
|
-
|
|
26
|
-
color: var(--color-background);
|
|
27
|
-
font-weight: bold;
|
|
28
|
-
text-overflow: ellipsis;
|
|
29
|
-
text-align: center;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.itemLabel {
|
|
33
|
-
position: absolute;
|
|
34
|
-
left: 50%;
|
|
35
|
-
top: 50%;
|
|
36
|
-
transform: translate(-50%, -50%);
|
|
37
|
-
visibility: visible;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.textOverflowed .itemLabel {
|
|
41
|
-
visibility: hidden;
|
|
42
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/horizontal-bar-chart/index.js"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import cx from 'classnames';
|
|
4
|
-
import map from 'lodash/map';
|
|
5
|
-
import max from 'lodash/max';
|
|
6
|
-
import sum from 'lodash/sum';
|
|
7
|
-
import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
|
|
8
|
-
import { getBundleAssetsFileTypeComponentLink, getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
|
|
9
|
-
|
|
10
|
-
import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
|
|
11
|
-
import { HorizontalBarChart } from '../../ui/horizontal-bar-chart';
|
|
12
|
-
import { ComponentLink } from '../component-link'
|
|
13
|
-
import { getColors } from '../../utils';
|
|
14
|
-
import { Stack } from '../../layout/stack';
|
|
15
|
-
import { JobName } from '../job-name';
|
|
16
|
-
import { MetricRunInfo } from '../metric-run-info';
|
|
17
|
-
import css from './bundle-assets-totals-chart-bars.module.css';
|
|
18
|
-
|
|
19
|
-
const getTooltip = (items, jobs, itemIndex, runIndex) => () => {
|
|
20
|
-
const metricId = items?.[itemIndex]?.key;
|
|
21
|
-
const current = items?.[itemIndex]?.runs?.[runIndex]?.value || 0;
|
|
22
|
-
const baseline = items?.[itemIndex]?.runs?.[runIndex + 1]?.value;
|
|
23
|
-
|
|
24
|
-
return (
|
|
25
|
-
<MetricRunInfo
|
|
26
|
-
className={css.itemTooltip}
|
|
27
|
-
metricId={metricId}
|
|
28
|
-
current={current}
|
|
29
|
-
baseline={baseline}
|
|
30
|
-
showMetridDescription={false}
|
|
31
|
-
size="large"
|
|
32
|
-
/>
|
|
33
|
-
);
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
export const BundleAssetsTotalsChartBars = ({
|
|
37
|
-
className,
|
|
38
|
-
jobs,
|
|
39
|
-
customComponentLink: CustomComponentLink,
|
|
40
|
-
}) => {
|
|
41
|
-
const rootClassName = cx(css.root, className);
|
|
42
|
-
const items = webpack.compareBySection.sizes(jobs);
|
|
43
|
-
|
|
44
|
-
const dataGraphs = [];
|
|
45
|
-
|
|
46
|
-
items.forEach(({ runs }) => {
|
|
47
|
-
runs.forEach((run, runIndex) => {
|
|
48
|
-
dataGraphs[runIndex] = [...(dataGraphs[runIndex] || []), run?.value || 0];
|
|
49
|
-
});
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
const maxValues = max(map(dataGraphs, (values) => sum(values)));
|
|
53
|
-
const maxValue = max(maxValues);
|
|
54
|
-
|
|
55
|
-
const labels = items.map(({ key, label }) => {
|
|
56
|
-
const fileType = ASSETS_SIZES_FILE_TYPE_MAP[key];
|
|
57
|
-
const componentData = getBundleAssetsFileTypeComponentLink(fileType, label);
|
|
58
|
-
return (
|
|
59
|
-
<CustomComponentLink className={css.itemLink} {...componentData}>
|
|
60
|
-
{label}
|
|
61
|
-
</CustomComponentLink>
|
|
62
|
-
);
|
|
63
|
-
});
|
|
64
|
-
const colors = getColors(max(map(dataGraphs, (values) => values.length)));
|
|
65
|
-
|
|
66
|
-
return (
|
|
67
|
-
<Stack className={rootClassName} space="small">
|
|
68
|
-
{dataGraphs.map((data, runIndex) => {
|
|
69
|
-
const { internalBuildNumber } = jobs[runIndex];
|
|
70
|
-
|
|
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
|
-
|
|
78
|
-
return (
|
|
79
|
-
<div key={internalBuildNumber || runIndex} className={css.item}>
|
|
80
|
-
<h3 className={css.itemTitle}><JobName internalBuildNumber={internalBuildNumber} /></h3>
|
|
81
|
-
<HorizontalBarChart
|
|
82
|
-
className={css.itemChart}
|
|
83
|
-
data={{ labels, values }}
|
|
84
|
-
maxValue={maxValue}
|
|
85
|
-
/>
|
|
86
|
-
</div>
|
|
87
|
-
);
|
|
88
|
-
})}
|
|
89
|
-
</Stack>
|
|
90
|
-
);
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
BundleAssetsTotalsChartBars.defaultProps = {
|
|
94
|
-
className: '',
|
|
95
|
-
customComponentLink: ComponentLink,
|
|
96
|
-
};
|
|
97
|
-
|
|
98
|
-
BundleAssetsTotalsChartBars.propTypes = {
|
|
99
|
-
className: PropTypes.string,
|
|
100
|
-
jobs: PropTypes.arrayOf(
|
|
101
|
-
PropTypes.shape({
|
|
102
|
-
internalBuildNumber: PropTypes.number,
|
|
103
|
-
}),
|
|
104
|
-
).isRequired,
|
|
105
|
-
customComponentLink: PropTypes.elementType,
|
|
106
|
-
};
|
package/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css
DELETED
|
@@ -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
|
-
export * from './bundle-assets-totals-chart-bars';
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
|
|
4
|
-
import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
|
|
5
|
-
|
|
6
|
-
import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
|
|
7
|
-
import { MetricsTable } from '../metrics-table';
|
|
8
|
-
import { ComponentLink } from '../component-link';
|
|
9
|
-
|
|
10
|
-
export const BundleAssetsTotalsTable = ({
|
|
11
|
-
className,
|
|
12
|
-
jobs,
|
|
13
|
-
customComponentLink: CustomComponentLink,
|
|
14
|
-
...restProps
|
|
15
|
-
}) => {
|
|
16
|
-
const items = webpack.compareBySection.sizes(jobs);
|
|
17
|
-
|
|
18
|
-
const renderRowHeader = (item) => {
|
|
19
|
-
const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
|
|
20
|
-
const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
|
|
21
|
-
|
|
22
|
-
return (
|
|
23
|
-
<CustomComponentLink section={section} title={title} params={params}>
|
|
24
|
-
{item.label}
|
|
25
|
-
</CustomComponentLink>
|
|
26
|
-
);
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
return (
|
|
30
|
-
<MetricsTable
|
|
31
|
-
className={className}
|
|
32
|
-
runs={jobs}
|
|
33
|
-
items={items}
|
|
34
|
-
renderRowHeader={renderRowHeader}
|
|
35
|
-
showHeaderSum
|
|
36
|
-
{...restProps}
|
|
37
|
-
/>
|
|
38
|
-
);
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
BundleAssetsTotalsTable.defaultProps = {
|
|
42
|
-
className: '',
|
|
43
|
-
jobs: [],
|
|
44
|
-
customComponentLink: ComponentLink,
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
BundleAssetsTotalsTable.propTypes = {
|
|
48
|
-
/** Addopted child class name */
|
|
49
|
-
className: PropTypes.string,
|
|
50
|
-
|
|
51
|
-
/** Jobs data */
|
|
52
|
-
jobs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
|
|
53
|
-
|
|
54
|
-
customComponentLink: PropTypes.elementType,
|
|
55
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './bundle-assets-totals-table';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './total-size-type-title';
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import cx from 'classnames';
|
|
4
|
-
|
|
5
|
-
import config from '../../config.json';
|
|
6
|
-
import I18N from '../../i18n';
|
|
7
|
-
import { FlexStack } from '../../layout/flex-stack';
|
|
8
|
-
import { Stack } from '../../layout/stack';
|
|
9
|
-
import { Button } from '../../ui/button';
|
|
10
|
-
import { Icon } from '../../ui/icon';
|
|
11
|
-
import { HoverCard } from '../../ui/hover-card';
|
|
12
|
-
import css from './total-size-type-title.module.css';
|
|
13
|
-
|
|
14
|
-
export const TotalSizeTypeTitle = ({ className }) => (
|
|
15
|
-
<FlexStack space="xxxsmall" alignItems="center" className={cx(css.root, className)}>
|
|
16
|
-
<span className={css.text}>{I18N.ASSET_TOTALS}</span>
|
|
17
|
-
<HoverCard label={<Icon glyph={Icon.ICONS.HELP} />} anchorClassName={css.anchor}>
|
|
18
|
-
<Stack space="xxxsmall">
|
|
19
|
-
<p>{I18N.ASSET_TOTALS_INFO}</p>
|
|
20
|
-
<p>
|
|
21
|
-
<Button
|
|
22
|
-
kind="primary"
|
|
23
|
-
type="button"
|
|
24
|
-
onClick={() => window.open(config.documentation.assets)}
|
|
25
|
-
className={css.readMoreLink}
|
|
26
|
-
>
|
|
27
|
-
{I18N.READ_MORE}
|
|
28
|
-
</Button>
|
|
29
|
-
</p>
|
|
30
|
-
</Stack>
|
|
31
|
-
</HoverCard>
|
|
32
|
-
</FlexStack>
|
|
33
|
-
);
|
|
34
|
-
|
|
35
|
-
TotalSizeTypeTitle.propTypes = {
|
|
36
|
-
className: PropTypes.string,
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
TotalSizeTypeTitle.defaultProps = {
|
|
40
|
-
className: '',
|
|
41
|
-
};
|