@bundle-stats/ui 4.12.0 → 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.
- package/lib/app/app.js +3 -7
- package/lib/app/app.js.map +1 -1
- 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 +11 -3
- package/lib/components/bundle-assets/bundle-assets.js.map +1 -1
- 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 +77 -0
- package/lib/components/bundle-assets-totals/bundle-assets-totals.js.map +1 -0
- package/lib/components/bundle-assets-totals/bundle-assets-totals.module.css +7 -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 +9 -2
- package/lib/components/bundle-modules/bundle-modules.js.map +1 -1
- 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 +10 -2
- package/lib/components/bundle-packages/bundle-packages.js.map +1 -1
- 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 -5
- package/lib/components/index.js.map +1 -1
- 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 +27 -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/{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 +148 -0
- package/lib/components/metrics-treemap/metrics-treemap.js.map +1 -0
- package/lib/components/metrics-treemap/metrics-treemap.module.css +168 -0
- package/lib/constants.js +6 -1
- package/lib/constants.js.map +1 -1
- package/lib/hooks/metrics-display-type.js +40 -0
- package/lib/hooks/metrics-display-type.js.map +1 -0
- package/lib/hooks/show-entry.js +13 -0
- package/lib/hooks/show-entry.js.map +1 -0
- 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-esm/app/app.js +3 -7
- package/lib-esm/app/app.js.map +1 -1
- 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 +11 -3
- package/lib-esm/components/bundle-assets/bundle-assets.js.map +1 -1
- package/lib-esm/components/bundle-assets/index.js +4 -5
- package/lib-esm/components/bundle-assets/index.js.map +1 -1
- package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.js +47 -0
- package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.js.map +1 -0
- package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.module.css +7 -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 +9 -2
- package/lib-esm/components/bundle-modules/bundle-modules.js.map +1 -1
- 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 +10 -2
- package/lib-esm/components/bundle-packages/bundle-packages.js.map +1 -1
- package/lib-esm/components/bundle-packages/index.js +4 -5
- package/lib-esm/components/bundle-packages/index.js.map +1 -1
- package/lib-esm/components/index.js +1 -2
- package/lib-esm/components/index.js.map +1 -1
- 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 +20 -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-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 +119 -0
- package/lib-esm/components/metrics-treemap/metrics-treemap.js.map +1 -0
- package/lib-esm/components/metrics-treemap/metrics-treemap.module.css +168 -0
- package/lib-esm/constants.js +5 -0
- package/lib-esm/constants.js.map +1 -1
- package/lib-esm/hooks/metrics-display-type.js +36 -0
- package/lib-esm/hooks/metrics-display-type.js.map +1 -0
- package/lib-esm/hooks/show-entry.js +9 -0
- package/lib-esm/hooks/show-entry.js.map +1 -0
- 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/package.json +11 -6
- package/src/app/app.jsx +4 -8
- 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 +25 -11
- package/src/components/bundle-assets/index.jsx +4 -4
- package/src/components/bundle-assets-totals/bundle-assets-totals.jsx +94 -0
- package/src/components/bundle-assets-totals/bundle-assets-totals.module.css +7 -0
- package/src/components/bundle-assets-totals/index.js +1 -0
- package/src/components/bundle-modules/bundle-modules.tsx +26 -12
- package/src/components/bundle-modules/index.tsx +4 -3
- package/src/components/bundle-packages/bundle-packages.jsx +24 -10
- package/src/components/bundle-packages/index.jsx +4 -4
- package/src/components/index.js +1 -2
- 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 +51 -0
- package/src/components/metrics-treemap/index.ts +1 -0
- package/src/components/metrics-treemap/metrics-treemap.module.css +168 -0
- package/src/components/metrics-treemap/metrics-treemap.stories.tsx +23 -0
- package/src/components/metrics-treemap/metrics-treemap.tsx +271 -0
- package/src/{constants.js → constants.ts} +5 -0
- package/src/hooks/metrics-display-type.ts +56 -0
- package/src/hooks/show-entry.ts +17 -0
- package/src/types.d.ts +2 -0
- package/src/ui/icon/icon.tsx +2 -0
- package/src/ui/index.js +0 -1
- 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} +2 -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 -2
- 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-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/metrics-display-type.d.ts +4 -0
- package/types/hooks/show-entry.d.ts +10 -0
- 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/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/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/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/ui/horizontal-bar-chart/horizontal-bar-chart.d.ts +0 -23
- 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>;
|
package/src/ui/icon/icon.tsx
CHANGED
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.
|
|
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
|
|
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
|
|
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
|
|
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 {
|
|
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 {};
|
package/types/constants.d.ts
CHANGED
|
@@ -1,18 +1,22 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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
|
|
16
|
-
|
|
17
|
-
|
|
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
|
}
|
package/types/ui/icon/icon.d.ts
CHANGED
|
@@ -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";
|
package/types/ui/index.d.ts
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";
|
|
@@ -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
|
package/lib/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js.map
DELETED
|
@@ -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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"}
|
package/lib/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
|
-
{"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 +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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"}
|