@reltio/components 1.4.2002 → 1.4.2004

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 (19) hide show
  1. package/cjs/BarChart/BarChart.js +15 -2
  2. package/cjs/LineChart/LineChart.js +15 -2
  3. package/cjs/LineChart/LineChart.test.js +28 -0
  4. package/cjs/hooks/useDynamicYAxisWidth/index.d.ts +1 -0
  5. package/cjs/hooks/useDynamicYAxisWidth/index.js +5 -0
  6. package/cjs/hooks/useDynamicYAxisWidth/useDynamicYAxisWidth.d.ts +13 -0
  7. package/cjs/hooks/useDynamicYAxisWidth/useDynamicYAxisWidth.js +47 -0
  8. package/cjs/index.d.ts +1 -0
  9. package/cjs/index.js +3 -1
  10. package/esm/BarChart/BarChart.js +15 -2
  11. package/esm/LineChart/LineChart.js +15 -2
  12. package/esm/LineChart/LineChart.test.js +5 -0
  13. package/esm/hooks/useDynamicYAxisWidth/index.d.ts +1 -0
  14. package/esm/hooks/useDynamicYAxisWidth/index.js +1 -0
  15. package/esm/hooks/useDynamicYAxisWidth/useDynamicYAxisWidth.d.ts +13 -0
  16. package/esm/hooks/useDynamicYAxisWidth/useDynamicYAxisWidth.js +43 -0
  17. package/esm/index.d.ts +1 -0
  18. package/esm/index.js +1 -0
  19. package/package.json +2 -2
package/cjs/BarChart/BarChart.js CHANGED
@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
10
10
  };
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
13
24
  var __importDefault = (this && this.__importDefault) || function (mod) {
14
25
  return (mod && mod.__esModule) ? mod : { "default": mod };
15
26
  };
@@ -19,20 +30,22 @@ var react_1 = __importDefault(require("react"));
19
30
  var recharts_1 = require("recharts");
20
31
  var ChartTooltip_1 = require("../ChartTooltip");
21
32
  var useClickableChartStyle_1 = require("../hooks/useClickableChartStyle");
33
+ var useDynamicYAxisWidth_1 = require("../hooks/useDynamicYAxisWidth");
22
34
  var helpers_1 = require("./helpers");
23
35
  var BarChart = function (_a) {
24
36
  var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
25
37
  var _c = (0, helpers_1.getBarChartSettings)(options), barChart = _c.barChart, cartesianGrid = _c.cartesianGrid, bar = _c.bar, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis;
38
+ var _d = (0, useDynamicYAxisWidth_1.useDynamicYAxisWidth)({ chartYAxisProps: yAxis }), chartRef = _d.chartRef, dynamicYAxisWidth = __rest(_d, ["chartRef"]);
26
39
  var onBarClick = onItemClick && (function (_a) {
27
40
  var group = _a.group;
28
41
  return onItemClick(group);
29
42
  });
30
43
  var clickable = (0, useClickableChartStyle_1.useClickableChartStyle)(onBarClick);
31
- return (react_1.default.createElement(recharts_1.BarChart, __assign({ width: width, height: height, data: data }, barChart),
44
+ return (react_1.default.createElement(recharts_1.BarChart, __assign({ width: width, height: height, data: data }, barChart, { ref: chartRef }),
32
45
  react_1.default.createElement(recharts_1.CartesianGrid, __assign({}, cartesianGrid)),
33
46
  react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(ChartTooltip_1.ChartTooltip, null) }, tooltip)),
34
47
  react_1.default.createElement(recharts_1.Bar, __assign({}, bar, { shape: react_1.default.createElement(recharts_1.Rectangle, { className: clickable }), onClick: onBarClick })),
35
48
  react_1.default.createElement(recharts_1.XAxis, __assign({}, xAxis)),
36
- react_1.default.createElement(recharts_1.YAxis, __assign({}, yAxis))));
49
+ react_1.default.createElement(recharts_1.YAxis, __assign({}, yAxis, dynamicYAxisWidth))));
37
50
  };
38
51
  exports.BarChart = BarChart;
package/cjs/LineChart/LineChart.js CHANGED
@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
10
10
  };
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
13
24
  var __importDefault = (this && this.__importDefault) || function (mod) {
14
25
  return (mod && mod.__esModule) ? mod : { "default": mod };
15
26
  };
@@ -20,14 +31,16 @@ var recharts_1 = require("recharts");
20
31
  var helpers_1 = require("./helpers");
21
32
  var ChartTooltip_1 = require("../ChartTooltip");
22
33
  var useClickableChartStyle_1 = require("../hooks/useClickableChartStyle");
34
+ var useDynamicYAxisWidth_1 = require("../hooks/useDynamicYAxisWidth");
23
35
  var LineChart = function (_a) {
24
36
  var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
25
37
  var _c = (0, helpers_1.getLineChartSettings)(options), cartesianGrid = _c.cartesianGrid, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis, lineChart = _c.lineChart, line = _c.line;
38
+ var _d = (0, useDynamicYAxisWidth_1.useDynamicYAxisWidth)({ chartYAxisProps: yAxis }), chartRef = _d.chartRef, dynamicYAxisWidth = __rest(_d, ["chartRef"]);
26
39
  var clickable = (0, useClickableChartStyle_1.useClickableChartStyle)(onItemClick);
27
- return (react_1.default.createElement(recharts_1.LineChart, __assign({ width: width, height: height, data: data }, lineChart),
40
+ return (react_1.default.createElement(recharts_1.LineChart, __assign({ width: width, height: height, data: data }, lineChart, { ref: chartRef }),
28
41
  react_1.default.createElement(recharts_1.CartesianGrid, __assign({}, cartesianGrid)),
29
42
  react_1.default.createElement(recharts_1.XAxis, __assign({}, xAxis)),
30
- react_1.default.createElement(recharts_1.YAxis, __assign({}, yAxis)),
43
+ react_1.default.createElement(recharts_1.YAxis, __assign({}, yAxis, dynamicYAxisWidth)),
31
44
  react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(ChartTooltip_1.ChartTooltip, null) }, tooltip)),
32
45
  react_1.default.createElement(recharts_1.Line, __assign({}, line, { activeDot: __assign(__assign({}, line.activeDot), { className: clickable, onClick: function (_, event) { return onItemClick(event.payload.group); } }) }))));
33
46
  };
package/cjs/LineChart/LineChart.test.js CHANGED
@@ -1,4 +1,27 @@
1
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
+ };
2
25
  var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
26
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
27
  return new (P || (P = Promise))(function (resolve, reject) {
@@ -42,12 +65,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
42
65
  var react_1 = __importDefault(require("react"));
43
66
  var react_2 = require("@testing-library/react");
44
67
  var LineChart_1 = require("./LineChart");
68
+ var useDynamicYAxisWidthHook = __importStar(require("../hooks/useDynamicYAxisWidth/useDynamicYAxisWidth"));
45
69
  describe('LinesChart', function () {
46
70
  var defaultData = [
47
71
  { label: 'first', value: 10, group: 'group1' },
48
72
  { label: 'second', value: 20, group: 'group2' },
49
73
  { label: 'third', value: 30, group: 'group3' }
50
74
  ];
75
+ jest.spyOn(useDynamicYAxisWidthHook, 'useDynamicYAxisWidth').mockImplementation(function (_a) {
76
+ var tickFormatter = _a.chartYAxisProps.tickFormatter;
77
+ return ({ chartRef: { current: null }, width: 60, tickFormatter: tickFormatter });
78
+ });
51
79
  var onItemClickSpy = jest.fn();
52
80
  var setUp = function (data) {
53
81
  if (data === void 0) { data = defaultData; }
package/cjs/hooks/useDynamicYAxisWidth/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { useDynamicYAxisWidth } from './useDynamicYAxisWidth';
package/cjs/hooks/useDynamicYAxisWidth/index.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useDynamicYAxisWidth = void 0;
4
+ var useDynamicYAxisWidth_1 = require("./useDynamicYAxisWidth");
5
+ Object.defineProperty(exports, "useDynamicYAxisWidth", { enumerable: true, get: function () { return useDynamicYAxisWidth_1.useDynamicYAxisWidth; } });
package/cjs/hooks/useDynamicYAxisWidth/useDynamicYAxisWidth.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { type DependencyList } from 'react';
2
+ import { type YAxisProps } from 'recharts';
3
+ type Props = {
4
+ chartYAxisProps?: Partial<YAxisProps>;
5
+ modifyWidth?: (width: number) => number;
6
+ effectDependencies?: DependencyList;
7
+ };
8
+ export declare const useDynamicYAxisWidth: ({ chartYAxisProps: { tickFormatter, width: fixedWidth }, modifyWidth, effectDependencies }?: Props) => {
9
+ width: number;
10
+ tickFormatter: (value: number | string, index: number) => string;
11
+ chartRef: import("react").MutableRefObject<any>;
12
+ };
13
+ export {};
package/cjs/hooks/useDynamicYAxisWidth/useDynamicYAxisWidth.js ADDED
@@ -0,0 +1,47 @@
1
+ "use strict";
2
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
3
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
4
+ if (ar || !(i in from)) {
5
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
6
+ ar[i] = from[i];
7
+ }
8
+ }
9
+ return to.concat(ar || Array.prototype.slice.call(from));
10
+ };
11
+ Object.defineProperty(exports, "__esModule", { value: true });
12
+ exports.useDynamicYAxisWidth = void 0;
13
+ var react_1 = require("react");
14
+ var WIDTH_DEFAULT = 60;
15
+ var WIDTH_MAX = 100;
16
+ var canvas = document === null || document === void 0 ? void 0 : document.createElement('canvas');
17
+ var context = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
18
+ var propsDefault = {
19
+ chartYAxisProps: { tickFormatter: function (value) { return String(value); }, width: WIDTH_DEFAULT },
20
+ modifyWidth: function (width) { return width; }
21
+ };
22
+ var useDynamicYAxisWidth = function (_a) {
23
+ var _b = _a === void 0 ? propsDefault : _a, _c = _b.chartYAxisProps, _d = _c === void 0 ? propsDefault.chartYAxisProps : _c, _e = _d.tickFormatter, tickFormatter = _e === void 0 ? propsDefault.chartYAxisProps.tickFormatter : _e, _f = _d.width, fixedWidth = _f === void 0 ? propsDefault.chartYAxisProps.width : _f, _g = _b.modifyWidth, modifyWidth = _g === void 0 ? propsDefault.modifyWidth : _g, effectDependencies = _b.effectDependencies;
24
+ var chartRef = (0, react_1.useRef)(null);
25
+ var _h = (0, react_1.useState)(fixedWidth), width = _h[0], setWidth = _h[1];
26
+ var formattedTicks = new Set();
27
+ var tickFormatterWithCollector = function (value, index) {
28
+ var formattedTick = tickFormatter(value, index);
29
+ formattedTicks.add(formattedTick);
30
+ return formattedTick;
31
+ };
32
+ (0, react_1.useLayoutEffect)(function () {
33
+ var _a;
34
+ if (window && context && ((_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.container)) {
35
+ context.font = window.getComputedStyle(chartRef.current.container, null).getPropertyValue('font');
36
+ var maxTickWidth = Math.max.apply(Math, __spreadArray([0], Array.from(formattedTicks).map(function (formattedTick) { return context.measureText(formattedTick).width; }), false));
37
+ if (maxTickWidth) {
38
+ var newWidth = modifyWidth(Math.min(Math.ceil(maxTickWidth) + 2, WIDTH_MAX));
39
+ if (newWidth !== width) {
40
+ setWidth(newWidth);
41
+ }
42
+ }
43
+ }
44
+ }, effectDependencies); // eslint-disable-line react-hooks/exhaustive-deps
45
+ return { width: width, tickFormatter: tickFormatterWithCollector, chartRef: chartRef };
46
+ };
47
+ exports.useDynamicYAxisWidth = useDynamicYAxisWidth;
package/cjs/index.d.ts CHANGED
@@ -268,6 +268,7 @@ export { useMaskedAttribute } from './hooks/useMaskedAttribute';
268
268
  export { useMarkers, resolveMarkers } from './hooks/useMarkers';
269
269
  export { useSegmentationRequest } from './hooks/useSegmentationRequest';
270
270
  export { useFilterAutoFocus } from './hooks/useFilterAutoFocus';
271
+ export { useDynamicYAxisWidth } from './hooks/useDynamicYAxisWidth';
271
272
  export { buildColumnsFilter, buildColumnsSizeById, columnFilterToMdmFilter, defaultGetRowCellHeight, defaultRenderRowCell } from './helpers/basicTable';
272
273
  export { enrichDataWithPercents } from './helpers/charts';
273
274
  export { showDefaultErrorMessage, showErrorMessage } from './helpers/errors';
package/cjs/index.js CHANGED
@@ -20,7 +20,7 @@ exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.Mo
20
20
  exports.HistoryDiffContext = exports.AsyncMountContext = exports.MdmModuleProvider = exports.withTableContext = exports.withFilterAtBottom = exports.withPercents = exports.withContext = exports.withDateRangeSelector = exports.withDragHandle = exports.withAsyncMount = exports.withTooltip = exports.MetadataTypesSelector = exports.DateRangeSelector = exports.UpSetChart = exports.GaugeChart = exports.RelationEditor = exports.ReltioMap = exports.Marginator = exports.LightArrowTooltip = exports.ScrollableTabs = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopup = exports.WhiteSearchInput = exports.SearchInput = exports.ProfileResizablePanes = exports.ResizablePanes = exports.ReltioGridLayout = exports.RCTreeSwitchRenderer = exports.RCTreeLevelLines = exports.RCTree = exports.reactSortableTreeHelpers = exports.ReactSortableTree = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = void 0;
21
21
  exports.ReloadDataProvider = exports.useAttributeValueConfigPermissions = exports.ConfigPermissionsContextProvider = exports.ConfigPermissionsContext = exports.useActionsHook = exports.ActionsHookProvider = exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.isHighlightedAttributeType = exports.isHighlightedErrorType = exports.ScrollType = exports.ScrollToElementProvider = exports.ScrollToElementContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.useEntityLoadingIndication = exports.EntityLoadingIndicationProvider = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.usePerspectivesSettings = exports.PerspectivesSettingsContext = exports.PivotingAttributeContext = exports.UsersContext = exports.InitialCollaborationContextValue = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.PopupBoundariesContext = void 0;
22
22
  exports.useMaskedAttribute = exports.useKeyboardNavigation = exports.useDynamicRowCellHeight = exports.useClickableStyle = exports.BasicTableCellRenderer = exports.useBasicTableCellRenderer = exports.useHiddenAttributes = exports.useSavedSearchesRequest = exports.useRequestDCRReview = exports.useAutoFocus = exports.useExpandInvalidRelations = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useMatchesColumnsData = exports.useScrollToAttributeError = exports.ProfileTablesContext = exports.HiddenAttributesContext = exports.BasicTableContext = exports.BasicTableRowCollapseContext = exports.useDeleteUnmaskedAttributeForRelation = exports.useUnmaskedAttributeValue = exports.useUnmaskAttributeValue = exports.useMaskAttributeValue = exports.MaskedAttributesProvider = exports.SegmentationContext = exports.useReloadData = void 0;
23
- exports.mockComputedStyles = exports.FakeMouseEvent = exports.rerenderWrapper = exports.mockElementSizes = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = exports.getMuiIconsByName = exports.getMuiIconByName = exports.delayPromise = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = exports.getAttributeSelectorItems = exports.mergeClasses = exports.isControlOrCommandPressed = exports.getValue = exports.getChecked = exports.showErrorMessage = exports.showDefaultErrorMessage = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsSizeById = exports.buildColumnsFilter = exports.useFilterAutoFocus = exports.useSegmentationRequest = exports.resolveMarkers = exports.useMarkers = void 0;
23
+ exports.mockComputedStyles = exports.FakeMouseEvent = exports.rerenderWrapper = exports.mockElementSizes = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = exports.getMuiIconsByName = exports.getMuiIconByName = exports.delayPromise = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = exports.getAttributeSelectorItems = exports.mergeClasses = exports.isControlOrCommandPressed = exports.getValue = exports.getChecked = exports.showErrorMessage = exports.showDefaultErrorMessage = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsSizeById = exports.buildColumnsFilter = exports.useDynamicYAxisWidth = exports.useFilterAutoFocus = exports.useSegmentationRequest = exports.resolveMarkers = exports.useMarkers = void 0;
24
24
  // components
25
25
  var ActionButton_1 = require("./ActionButton");
26
26
  Object.defineProperty(exports, "ActionButton", { enumerable: true, get: function () { return ActionButton_1.ActionButton; } });
@@ -599,6 +599,8 @@ var useSegmentationRequest_1 = require("./hooks/useSegmentationRequest");
599
599
  Object.defineProperty(exports, "useSegmentationRequest", { enumerable: true, get: function () { return useSegmentationRequest_1.useSegmentationRequest; } });
600
600
  var useFilterAutoFocus_1 = require("./hooks/useFilterAutoFocus");
601
601
  Object.defineProperty(exports, "useFilterAutoFocus", { enumerable: true, get: function () { return useFilterAutoFocus_1.useFilterAutoFocus; } });
602
+ var useDynamicYAxisWidth_1 = require("./hooks/useDynamicYAxisWidth");
603
+ Object.defineProperty(exports, "useDynamicYAxisWidth", { enumerable: true, get: function () { return useDynamicYAxisWidth_1.useDynamicYAxisWidth; } });
602
604
  // helpers
603
605
  var basicTable_1 = require("./helpers/basicTable");
604
606
  Object.defineProperty(exports, "buildColumnsFilter", { enumerable: true, get: function () { return basicTable_1.buildColumnsFilter; } });
package/esm/BarChart/BarChart.js CHANGED
@@ -9,23 +9,36 @@ var __assign = (this && this.__assign) || function () {
9
9
  };
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
12
23
  import React from 'react';
13
24
  import { Bar, Rectangle, BarChart as BarChartWidget, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
14
25
  import { ChartTooltip } from '../ChartTooltip';
15
26
  import { useClickableChartStyle } from '../hooks/useClickableChartStyle';
27
+ import { useDynamicYAxisWidth } from '../hooks/useDynamicYAxisWidth';
16
28
  import { getBarChartSettings } from './helpers';
17
29
  export var BarChart = function (_a) {
18
30
  var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
19
31
  var _c = getBarChartSettings(options), barChart = _c.barChart, cartesianGrid = _c.cartesianGrid, bar = _c.bar, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis;
32
+ var _d = useDynamicYAxisWidth({ chartYAxisProps: yAxis }), chartRef = _d.chartRef, dynamicYAxisWidth = __rest(_d, ["chartRef"]);
20
33
  var onBarClick = onItemClick && (function (_a) {
21
34
  var group = _a.group;
22
35
  return onItemClick(group);
23
36
  });
24
37
  var clickable = useClickableChartStyle(onBarClick);
25
- return (React.createElement(BarChartWidget, __assign({ width: width, height: height, data: data }, barChart),
38
+ return (React.createElement(BarChartWidget, __assign({ width: width, height: height, data: data }, barChart, { ref: chartRef }),
26
39
  React.createElement(CartesianGrid, __assign({}, cartesianGrid)),
27
40
  React.createElement(Tooltip, __assign({ content: React.createElement(ChartTooltip, null) }, tooltip)),
28
41
  React.createElement(Bar, __assign({}, bar, { shape: React.createElement(Rectangle, { className: clickable }), onClick: onBarClick })),
29
42
  React.createElement(XAxis, __assign({}, xAxis)),
30
- React.createElement(YAxis, __assign({}, yAxis))));
43
+ React.createElement(YAxis, __assign({}, yAxis, dynamicYAxisWidth))));
31
44
  };
package/esm/LineChart/LineChart.js CHANGED
@@ -9,19 +9,32 @@ var __assign = (this && this.__assign) || function () {
9
9
  };
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
12
23
  import React from 'react';
13
24
  import { CartesianGrid, Line, LineChart as LineChartWidget, Tooltip, XAxis, YAxis } from 'recharts';
14
25
  import { getLineChartSettings } from './helpers';
15
26
  import { ChartTooltip } from '../ChartTooltip';
16
27
  import { useClickableChartStyle } from '../hooks/useClickableChartStyle';
28
+ import { useDynamicYAxisWidth } from '../hooks/useDynamicYAxisWidth';
17
29
  export var LineChart = function (_a) {
18
30
  var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
19
31
  var _c = getLineChartSettings(options), cartesianGrid = _c.cartesianGrid, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis, lineChart = _c.lineChart, line = _c.line;
32
+ var _d = useDynamicYAxisWidth({ chartYAxisProps: yAxis }), chartRef = _d.chartRef, dynamicYAxisWidth = __rest(_d, ["chartRef"]);
20
33
  var clickable = useClickableChartStyle(onItemClick);
21
- return (React.createElement(LineChartWidget, __assign({ width: width, height: height, data: data }, lineChart),
34
+ return (React.createElement(LineChartWidget, __assign({ width: width, height: height, data: data }, lineChart, { ref: chartRef }),
22
35
  React.createElement(CartesianGrid, __assign({}, cartesianGrid)),
23
36
  React.createElement(XAxis, __assign({}, xAxis)),
24
- React.createElement(YAxis, __assign({}, yAxis)),
37
+ React.createElement(YAxis, __assign({}, yAxis, dynamicYAxisWidth)),
25
38
  React.createElement(Tooltip, __assign({ content: React.createElement(ChartTooltip, null) }, tooltip)),
26
39
  React.createElement(Line, __assign({}, line, { activeDot: __assign(__assign({}, line.activeDot), { className: clickable, onClick: function (_, event) { return onItemClick(event.payload.group); } }) }))));
27
40
  };
package/esm/LineChart/LineChart.test.js CHANGED
@@ -37,12 +37,17 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
37
37
  import React from 'react';
38
38
  import { fireEvent, render, screen } from '@testing-library/react';
39
39
  import { LineChart } from './LineChart';
40
+ import * as useDynamicYAxisWidthHook from '../hooks/useDynamicYAxisWidth/useDynamicYAxisWidth';
40
41
  describe('LinesChart', function () {
41
42
  var defaultData = [
42
43
  { label: 'first', value: 10, group: 'group1' },
43
44
  { label: 'second', value: 20, group: 'group2' },
44
45
  { label: 'third', value: 30, group: 'group3' }
45
46
  ];
47
+ jest.spyOn(useDynamicYAxisWidthHook, 'useDynamicYAxisWidth').mockImplementation(function (_a) {
48
+ var tickFormatter = _a.chartYAxisProps.tickFormatter;
49
+ return ({ chartRef: { current: null }, width: 60, tickFormatter: tickFormatter });
50
+ });
46
51
  var onItemClickSpy = jest.fn();
47
52
  var setUp = function (data) {
48
53
  if (data === void 0) { data = defaultData; }
package/esm/hooks/useDynamicYAxisWidth/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { useDynamicYAxisWidth } from './useDynamicYAxisWidth';
package/esm/hooks/useDynamicYAxisWidth/index.js ADDED
@@ -0,0 +1 @@
1
+ export { useDynamicYAxisWidth } from './useDynamicYAxisWidth';
package/esm/hooks/useDynamicYAxisWidth/useDynamicYAxisWidth.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { type DependencyList } from 'react';
2
+ import { type YAxisProps } from 'recharts';
3
+ type Props = {
4
+ chartYAxisProps?: Partial<YAxisProps>;
5
+ modifyWidth?: (width: number) => number;
6
+ effectDependencies?: DependencyList;
7
+ };
8
+ export declare const useDynamicYAxisWidth: ({ chartYAxisProps: { tickFormatter, width: fixedWidth }, modifyWidth, effectDependencies }?: Props) => {
9
+ width: number;
10
+ tickFormatter: (value: number | string, index: number) => string;
11
+ chartRef: import("react").MutableRefObject<any>;
12
+ };
13
+ export {};
package/esm/hooks/useDynamicYAxisWidth/useDynamicYAxisWidth.js ADDED
@@ -0,0 +1,43 @@
1
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
2
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
3
+ if (ar || !(i in from)) {
4
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
5
+ ar[i] = from[i];
6
+ }
7
+ }
8
+ return to.concat(ar || Array.prototype.slice.call(from));
9
+ };
10
+ import { useLayoutEffect, useRef, useState } from 'react';
11
+ var WIDTH_DEFAULT = 60;
12
+ var WIDTH_MAX = 100;
13
+ var canvas = document === null || document === void 0 ? void 0 : document.createElement('canvas');
14
+ var context = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
15
+ var propsDefault = {
16
+ chartYAxisProps: { tickFormatter: function (value) { return String(value); }, width: WIDTH_DEFAULT },
17
+ modifyWidth: function (width) { return width; }
18
+ };
19
+ export var useDynamicYAxisWidth = function (_a) {
20
+ var _b = _a === void 0 ? propsDefault : _a, _c = _b.chartYAxisProps, _d = _c === void 0 ? propsDefault.chartYAxisProps : _c, _e = _d.tickFormatter, tickFormatter = _e === void 0 ? propsDefault.chartYAxisProps.tickFormatter : _e, _f = _d.width, fixedWidth = _f === void 0 ? propsDefault.chartYAxisProps.width : _f, _g = _b.modifyWidth, modifyWidth = _g === void 0 ? propsDefault.modifyWidth : _g, effectDependencies = _b.effectDependencies;
21
+ var chartRef = useRef(null);
22
+ var _h = useState(fixedWidth), width = _h[0], setWidth = _h[1];
23
+ var formattedTicks = new Set();
24
+ var tickFormatterWithCollector = function (value, index) {
25
+ var formattedTick = tickFormatter(value, index);
26
+ formattedTicks.add(formattedTick);
27
+ return formattedTick;
28
+ };
29
+ useLayoutEffect(function () {
30
+ var _a;
31
+ if (window && context && ((_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.container)) {
32
+ context.font = window.getComputedStyle(chartRef.current.container, null).getPropertyValue('font');
33
+ var maxTickWidth = Math.max.apply(Math, __spreadArray([0], Array.from(formattedTicks).map(function (formattedTick) { return context.measureText(formattedTick).width; }), false));
34
+ if (maxTickWidth) {
35
+ var newWidth = modifyWidth(Math.min(Math.ceil(maxTickWidth) + 2, WIDTH_MAX));
36
+ if (newWidth !== width) {
37
+ setWidth(newWidth);
38
+ }
39
+ }
40
+ }
41
+ }, effectDependencies); // eslint-disable-line react-hooks/exhaustive-deps
42
+ return { width: width, tickFormatter: tickFormatterWithCollector, chartRef: chartRef };
43
+ };
package/esm/index.d.ts CHANGED
@@ -268,6 +268,7 @@ export { useMaskedAttribute } from './hooks/useMaskedAttribute';
268
268
  export { useMarkers, resolveMarkers } from './hooks/useMarkers';
269
269
  export { useSegmentationRequest } from './hooks/useSegmentationRequest';
270
270
  export { useFilterAutoFocus } from './hooks/useFilterAutoFocus';
271
+ export { useDynamicYAxisWidth } from './hooks/useDynamicYAxisWidth';
271
272
  export { buildColumnsFilter, buildColumnsSizeById, columnFilterToMdmFilter, defaultGetRowCellHeight, defaultRenderRowCell } from './helpers/basicTable';
272
273
  export { enrichDataWithPercents } from './helpers/charts';
273
274
  export { showDefaultErrorMessage, showErrorMessage } from './helpers/errors';
package/esm/index.js CHANGED
@@ -272,6 +272,7 @@ export { useMaskedAttribute } from './hooks/useMaskedAttribute';
272
272
  export { useMarkers, resolveMarkers } from './hooks/useMarkers';
273
273
  export { useSegmentationRequest } from './hooks/useSegmentationRequest';
274
274
  export { useFilterAutoFocus } from './hooks/useFilterAutoFocus';
275
+ export { useDynamicYAxisWidth } from './hooks/useDynamicYAxisWidth';
275
276
  // helpers
276
277
  export { buildColumnsFilter, buildColumnsSizeById, columnFilterToMdmFilter, defaultGetRowCellHeight, defaultRenderRowCell } from './helpers/basicTable';
277
278
  export { enrichDataWithPercents } from './helpers/charts';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reltio/components",
3
- "version": "1.4.2002",
3
+ "version": "1.4.2004",
4
4
  "license": "SEE LICENSE IN LICENSE FILE",
5
5
  "main": "./cjs/index.js",
6
6
  "module": "./esm/index.js",
@@ -8,7 +8,7 @@
8
8
  "@fluentui/react-context-selector": "^9.1.26",
9
9
  "@react-google-maps/api": "2.7.0",
10
10
  "@react-sigma/core": "3.4.0",
11
- "@reltio/mdm-sdk": "^1.4.1891",
11
+ "@reltio/mdm-sdk": "^1.4.1892",
12
12
  "d3-cloud": "^1.2.5",
13
13
  "d3-geo": "^2.0.1",
14
14
  "d3-hierarchy": "^2.0.0",