@fluentui/react-charting 5.23.55 → 5.23.57

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 (118) hide show
  1. package/CHANGELOG.json +49 -1
  2. package/CHANGELOG.md +23 -2
  3. package/dist/react-charting.d.ts +69 -0
  4. package/dist/react-charting.js +1 -1
  5. package/dist/react-charting.min.js +1 -1
  6. package/etc/react-charting.api.md +35 -0
  7. package/lib/ResponsiveContainer.d.ts +1 -0
  8. package/lib/ResponsiveContainer.js +2 -0
  9. package/lib/ResponsiveContainer.js.map +1 -0
  10. package/lib/components/CommonComponents/CartesianChart.base.js +1 -0
  11. package/lib/components/CommonComponents/CartesianChart.base.js.map +1 -1
  12. package/lib/components/CommonComponents/CartesianChart.styles.js +2 -4
  13. package/lib/components/CommonComponents/CartesianChart.styles.js.map +1 -1
  14. package/lib/components/CommonComponents/CartesianChart.types.d.ts +4 -0
  15. package/lib/components/CommonComponents/CartesianChart.types.js.map +1 -1
  16. package/lib/components/DeclarativeChart/DeclarativeChart.js +23 -12
  17. package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  18. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +38 -35
  19. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  20. package/lib/components/ResponsiveContainer/ResponsiveContainer.d.ts +7 -0
  21. package/lib/components/ResponsiveContainer/ResponsiveContainer.js +83 -0
  22. package/lib/components/ResponsiveContainer/ResponsiveContainer.js.map +1 -0
  23. package/lib/components/ResponsiveContainer/ResponsiveContainer.types.d.ts +52 -0
  24. package/lib/components/ResponsiveContainer/ResponsiveContainer.types.js +2 -0
  25. package/lib/components/ResponsiveContainer/ResponsiveContainer.types.js.map +1 -0
  26. package/lib/components/ResponsiveContainer/index.d.ts +3 -0
  27. package/lib/components/ResponsiveContainer/index.js +4 -0
  28. package/lib/components/ResponsiveContainer/index.js.map +1 -0
  29. package/lib/components/ResponsiveContainer/withResponsiveContainer.d.ts +7 -0
  30. package/lib/components/ResponsiveContainer/withResponsiveContainer.js +17 -0
  31. package/lib/components/ResponsiveContainer/withResponsiveContainer.js.map +1 -0
  32. package/lib/components/SankeyChart/SankeyChart.base.js +3 -2
  33. package/lib/components/SankeyChart/SankeyChart.base.js.map +1 -1
  34. package/lib/components/SankeyChart/SankeyChart.styles.js +2 -4
  35. package/lib/components/SankeyChart/SankeyChart.styles.js.map +1 -1
  36. package/lib/components/SankeyChart/SankeyChart.types.d.ts +1 -0
  37. package/lib/components/SankeyChart/SankeyChart.types.js.map +1 -1
  38. package/lib/index.d.ts +2 -0
  39. package/lib/index.js +1 -0
  40. package/lib/index.js.map +1 -1
  41. package/lib/utilities/utilities.js +2 -2
  42. package/lib/utilities/utilities.js.map +1 -1
  43. package/lib-amd/ResponsiveContainer.d.ts +1 -0
  44. package/lib-amd/ResponsiveContainer.js +6 -0
  45. package/lib-amd/ResponsiveContainer.js.map +1 -0
  46. package/lib-amd/components/CommonComponents/CartesianChart.base.js +1 -0
  47. package/lib-amd/components/CommonComponents/CartesianChart.base.js.map +1 -1
  48. package/lib-amd/components/CommonComponents/CartesianChart.styles.js +2 -4
  49. package/lib-amd/components/CommonComponents/CartesianChart.styles.js.map +1 -1
  50. package/lib-amd/components/CommonComponents/CartesianChart.types.d.ts +4 -0
  51. package/lib-amd/components/CommonComponents/CartesianChart.types.js.map +1 -1
  52. package/lib-amd/components/DeclarativeChart/DeclarativeChart.js +23 -13
  53. package/lib-amd/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  54. package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js +38 -35
  55. package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  56. package/lib-amd/components/ResponsiveContainer/ResponsiveContainer.d.ts +7 -0
  57. package/lib-amd/components/ResponsiveContainer/ResponsiveContainer.js +86 -0
  58. package/lib-amd/components/ResponsiveContainer/ResponsiveContainer.js.map +1 -0
  59. package/lib-amd/components/ResponsiveContainer/ResponsiveContainer.types.d.ts +52 -0
  60. package/lib-amd/components/ResponsiveContainer/ResponsiveContainer.types.js +5 -0
  61. package/lib-amd/components/ResponsiveContainer/ResponsiveContainer.types.js.map +1 -0
  62. package/lib-amd/components/ResponsiveContainer/index.d.ts +3 -0
  63. package/lib-amd/components/ResponsiveContainer/index.js +8 -0
  64. package/lib-amd/components/ResponsiveContainer/index.js.map +1 -0
  65. package/lib-amd/components/ResponsiveContainer/withResponsiveContainer.d.ts +7 -0
  66. package/lib-amd/components/ResponsiveContainer/withResponsiveContainer.js +19 -0
  67. package/lib-amd/components/ResponsiveContainer/withResponsiveContainer.js.map +1 -0
  68. package/lib-amd/components/SankeyChart/SankeyChart.base.js +3 -2
  69. package/lib-amd/components/SankeyChart/SankeyChart.base.js.map +1 -1
  70. package/lib-amd/components/SankeyChart/SankeyChart.styles.js +2 -4
  71. package/lib-amd/components/SankeyChart/SankeyChart.styles.js.map +1 -1
  72. package/lib-amd/components/SankeyChart/SankeyChart.types.d.ts +1 -0
  73. package/lib-amd/components/SankeyChart/SankeyChart.types.js.map +1 -1
  74. package/lib-amd/index.d.ts +2 -0
  75. package/lib-amd/index.js +4 -2
  76. package/lib-amd/index.js.map +1 -1
  77. package/lib-amd/utilities/utilities.js +2 -2
  78. package/lib-amd/utilities/utilities.js.map +1 -1
  79. package/lib-commonjs/ResponsiveContainer.d.ts +1 -0
  80. package/lib-commonjs/ResponsiveContainer.js +5 -0
  81. package/lib-commonjs/ResponsiveContainer.js.map +1 -0
  82. package/lib-commonjs/components/CommonComponents/CartesianChart.base.js +1 -0
  83. package/lib-commonjs/components/CommonComponents/CartesianChart.base.js.map +1 -1
  84. package/lib-commonjs/components/CommonComponents/CartesianChart.styles.js +2 -4
  85. package/lib-commonjs/components/CommonComponents/CartesianChart.styles.js.map +1 -1
  86. package/lib-commonjs/components/CommonComponents/CartesianChart.types.d.ts +4 -0
  87. package/lib-commonjs/components/CommonComponents/CartesianChart.types.js.map +1 -1
  88. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +23 -12
  89. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  90. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +38 -35
  91. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  92. package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.d.ts +7 -0
  93. package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.js +87 -0
  94. package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.js.map +1 -0
  95. package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.types.d.ts +52 -0
  96. package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.types.js +3 -0
  97. package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.types.js.map +1 -0
  98. package/lib-commonjs/components/ResponsiveContainer/index.d.ts +3 -0
  99. package/lib-commonjs/components/ResponsiveContainer/index.js +7 -0
  100. package/lib-commonjs/components/ResponsiveContainer/index.js.map +1 -0
  101. package/lib-commonjs/components/ResponsiveContainer/withResponsiveContainer.d.ts +7 -0
  102. package/lib-commonjs/components/ResponsiveContainer/withResponsiveContainer.js +21 -0
  103. package/lib-commonjs/components/ResponsiveContainer/withResponsiveContainer.js.map +1 -0
  104. package/lib-commonjs/components/SankeyChart/SankeyChart.base.js +3 -2
  105. package/lib-commonjs/components/SankeyChart/SankeyChart.base.js.map +1 -1
  106. package/lib-commonjs/components/SankeyChart/SankeyChart.styles.js +2 -4
  107. package/lib-commonjs/components/SankeyChart/SankeyChart.styles.js.map +1 -1
  108. package/lib-commonjs/components/SankeyChart/SankeyChart.types.d.ts +1 -0
  109. package/lib-commonjs/components/SankeyChart/SankeyChart.types.js.map +1 -1
  110. package/lib-commonjs/index.d.ts +2 -0
  111. package/lib-commonjs/index.js +4 -1
  112. package/lib-commonjs/index.js.map +1 -1
  113. package/lib-commonjs/utilities/utilities.js +2 -2
  114. package/lib-commonjs/utilities/utilities.js.map +1 -1
  115. package/package.json +5 -5
  116. package/src/components/CommonComponents/CartesianChart.types.ts +5 -0
  117. package/src/components/ResponsiveContainer/ResponsiveContainer.types.ts +59 -0
  118. package/src/components/SankeyChart/SankeyChart.types.ts +1 -0
@@ -0,0 +1,87 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ResponsiveContainer = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var React = require("react");
6
+ var react_1 = require("@fluentui/react");
7
+ /**
8
+ * Responsive Container component
9
+ * {@docCategory ResponsiveContainer}
10
+ */
11
+ var ResponsiveContainer = function (props) {
12
+ var _a, _b;
13
+ var containerRef = React.useRef(null);
14
+ var onResizeRef = React.useRef();
15
+ var _c = React.useState({}), size = _c[0], setSize = _c[1];
16
+ onResizeRef.current = props.onResize;
17
+ React.useEffect(function () {
18
+ var _window = (0, react_1.getWindow)(containerRef.current);
19
+ var animationFrameId;
20
+ var resizeObserver;
21
+ var resizeCallback = function (entries) {
22
+ var _a;
23
+ var _b = entries[0].contentRect, containerWidth = _b.width, containerHeight = _b.height;
24
+ // rAF is an alternative to the throttle function. For more info, see:
25
+ // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf
26
+ animationFrameId = _window === null || _window === void 0 ? void 0 : _window.requestAnimationFrame(function () {
27
+ setSize(function (prevSize) {
28
+ var roundedWidth = Math.floor(containerWidth);
29
+ var roundedHeight = Math.floor(containerHeight);
30
+ if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {
31
+ return prevSize;
32
+ }
33
+ return { containerWidth: roundedWidth, containerHeight: roundedHeight };
34
+ });
35
+ });
36
+ (_a = onResizeRef.current) === null || _a === void 0 ? void 0 : _a.call(onResizeRef, containerWidth, containerHeight);
37
+ };
38
+ if (_window && _window.ResizeObserver) {
39
+ resizeObserver = new _window.ResizeObserver(resizeCallback);
40
+ if (containerRef.current) {
41
+ resizeObserver.observe(containerRef.current);
42
+ }
43
+ }
44
+ return function () {
45
+ if (animationFrameId) {
46
+ _window === null || _window === void 0 ? void 0 : _window.cancelAnimationFrame(animationFrameId);
47
+ }
48
+ resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
49
+ };
50
+ }, []);
51
+ var chartContent = React.useMemo(function () {
52
+ var calculatedWidth = size.containerWidth;
53
+ var calculatedHeight = size.containerHeight;
54
+ if (typeof props.aspect === 'number' && props.aspect > 0) {
55
+ if (calculatedWidth) {
56
+ calculatedHeight = calculatedWidth / props.aspect;
57
+ }
58
+ else if (calculatedHeight) {
59
+ calculatedWidth = calculatedHeight * props.aspect;
60
+ }
61
+ if (typeof props.maxHeight === 'number' && calculatedHeight && calculatedHeight > props.maxHeight) {
62
+ calculatedHeight = props.maxHeight;
63
+ }
64
+ }
65
+ return React.Children.map(props.children, function (child) {
66
+ var _a;
67
+ return React.cloneElement(child, {
68
+ width: calculatedWidth,
69
+ height: calculatedHeight,
70
+ shouldResize: (calculatedWidth !== null && calculatedWidth !== void 0 ? calculatedWidth : 0) + (calculatedHeight !== null && calculatedHeight !== void 0 ? calculatedHeight : 0),
71
+ styles: tslib_1.__assign(tslib_1.__assign({}, child.props.styles), { root: tslib_1.__assign(tslib_1.__assign({}, (_a = child.props.styles) === null || _a === void 0 ? void 0 : _a.root), {
72
+ // Ensure the child element fills the parent container
73
+ // https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height
74
+ width: calculatedWidth, height: calculatedHeight }) }),
75
+ });
76
+ });
77
+ }, [size, props.aspect, props.maxHeight, props.children]);
78
+ return (React.createElement("div", { ref: containerRef, style: {
79
+ width: (_a = props.width) !== null && _a !== void 0 ? _a : '100%',
80
+ height: (_b = props.height) !== null && _b !== void 0 ? _b : '100%',
81
+ minWidth: props.minWidth,
82
+ minHeight: props.minHeight,
83
+ maxHeight: props.maxHeight,
84
+ } }, chartContent));
85
+ };
86
+ exports.ResponsiveContainer = ResponsiveContainer;
87
+ //# sourceMappingURL=ResponsiveContainer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ResponsiveContainer.js","sourceRoot":"../src/","sources":["components/ResponsiveContainer/ResponsiveContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getWindow } from '@fluentui/react';\nimport { IResponsiveChildProps, IResponsiveContainerProps } from './ResponsiveContainer.types';\n\n/**\n * Responsive Container component\n * {@docCategory ResponsiveContainer}\n */\nexport const ResponsiveContainer: React.FC<IResponsiveContainerProps> = props => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const onResizeRef = React.useRef<IResponsiveContainerProps['onResize']>();\n\n const [size, setSize] = React.useState<{ containerWidth?: number; containerHeight?: number }>({});\n\n onResizeRef.current = props.onResize;\n\n React.useEffect(() => {\n const _window = getWindow(containerRef.current) as (Window & typeof globalThis) | undefined;\n let animationFrameId: number | undefined;\n let resizeObserver: ResizeObserver | undefined;\n\n const resizeCallback = (entries: ResizeObserverEntry[]) => {\n const { width: containerWidth, height: containerHeight } = entries[0].contentRect;\n // rAF is an alternative to the throttle function. For more info, see:\n // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf\n animationFrameId = _window?.requestAnimationFrame(() => {\n setSize(prevSize => {\n const roundedWidth = Math.floor(containerWidth);\n const roundedHeight = Math.floor(containerHeight);\n if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {\n return prevSize;\n }\n\n return { containerWidth: roundedWidth, containerHeight: roundedHeight };\n });\n });\n onResizeRef.current?.(containerWidth, containerHeight);\n };\n\n if (_window && _window.ResizeObserver) {\n resizeObserver = new _window.ResizeObserver(resizeCallback);\n if (containerRef.current) {\n resizeObserver.observe(containerRef.current);\n }\n }\n\n return () => {\n if (animationFrameId) {\n _window?.cancelAnimationFrame(animationFrameId);\n }\n\n resizeObserver?.disconnect();\n };\n }, []);\n\n const chartContent = React.useMemo(() => {\n let calculatedWidth = size.containerWidth;\n let calculatedHeight = size.containerHeight;\n\n if (typeof props.aspect === 'number' && props.aspect > 0) {\n if (calculatedWidth) {\n calculatedHeight = calculatedWidth / props.aspect;\n } else if (calculatedHeight) {\n calculatedWidth = calculatedHeight * props.aspect;\n }\n\n if (typeof props.maxHeight === 'number' && calculatedHeight && calculatedHeight > props.maxHeight) {\n calculatedHeight = props.maxHeight;\n }\n }\n\n return React.Children.map(props.children, child => {\n return React.cloneElement<IResponsiveChildProps>(child, {\n width: calculatedWidth,\n height: calculatedHeight,\n shouldResize: (calculatedWidth ?? 0) + (calculatedHeight ?? 0),\n styles: {\n // Keep components styles\n ...child.props.styles,\n root: {\n ...child.props.styles?.root,\n // Ensure the child element fills the parent container\n // https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height\n width: calculatedWidth,\n height: calculatedHeight,\n },\n },\n });\n });\n }, [size, props.aspect, props.maxHeight, props.children]);\n\n return (\n <div\n ref={containerRef}\n style={{\n width: props.width ?? '100%',\n height: props.height ?? '100%',\n minWidth: props.minWidth,\n minHeight: props.minHeight,\n maxHeight: props.maxHeight,\n }}\n >\n {chartContent}\n </div>\n );\n};\n"]}
@@ -0,0 +1,52 @@
1
+ import * as React from 'react';
2
+ import { IStyle, IStyleFunctionOrObject } from '@fluentui/react';
3
+ /**
4
+ * Responsive Child props
5
+ * {@docCategory ResponsiveContainer}
6
+ */
7
+ export interface IResponsiveChildProps {
8
+ width?: number;
9
+ height?: number;
10
+ shouldResize?: number;
11
+ styles?: IStyleFunctionOrObject<{}, {
12
+ root: IStyle;
13
+ }>;
14
+ }
15
+ /**
16
+ * Responsive Container props
17
+ * {@docCategory ResponsiveContainer}
18
+ */
19
+ export interface IResponsiveContainerProps {
20
+ /**
21
+ * Aspect ratio (width / height) of the container. If specified, the height will be calculated by width / aspect.
22
+ */
23
+ aspect?: number;
24
+ /**
25
+ * Width of the container
26
+ */
27
+ width?: number | string;
28
+ /**
29
+ * Height of the container
30
+ */
31
+ height?: number | string;
32
+ /**
33
+ * Minimum width of the container
34
+ */
35
+ minWidth?: number | string;
36
+ /**
37
+ * Minimum height of the container
38
+ */
39
+ minHeight?: number | string;
40
+ /**
41
+ * Maximum height of the container
42
+ */
43
+ maxHeight?: number;
44
+ /**
45
+ * Callback providing the updated chart width and height values when the container is resized
46
+ */
47
+ onResize?: (width: number, height: number) => void;
48
+ /**
49
+ * Child component to be rendered within the container
50
+ */
51
+ children: React.ReactElement<IResponsiveChildProps>;
52
+ }
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ //# sourceMappingURL=ResponsiveContainer.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ResponsiveContainer.types.js","sourceRoot":"../src/","sources":["components/ResponsiveContainer/ResponsiveContainer.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { IStyle, IStyleFunctionOrObject } from '@fluentui/react';\n\n/**\n * Responsive Child props\n * {@docCategory ResponsiveContainer}\n */\nexport interface IResponsiveChildProps {\n width?: number;\n height?: number;\n shouldResize?: number;\n styles?: IStyleFunctionOrObject<{}, { root: IStyle }>;\n}\n\n/**\n * Responsive Container props\n * {@docCategory ResponsiveContainer}\n */\nexport interface IResponsiveContainerProps {\n /**\n * Aspect ratio (width / height) of the container. If specified, the height will be calculated by width / aspect.\n */\n aspect?: number;\n\n /**\n * Width of the container\n */\n width?: number | string;\n\n /**\n * Height of the container\n */\n height?: number | string;\n\n /**\n * Minimum width of the container\n */\n minWidth?: number | string;\n\n /**\n * Minimum height of the container\n */\n minHeight?: number | string;\n\n /**\n * Maximum height of the container\n */\n maxHeight?: number;\n\n /**\n * Callback providing the updated chart width and height values when the container is resized\n */\n onResize?: (width: number, height: number) => void;\n\n /**\n * Child component to be rendered within the container\n */\n children: React.ReactElement<IResponsiveChildProps>;\n}\n"]}
@@ -0,0 +1,3 @@
1
+ export * from './ResponsiveContainer';
2
+ export * from './ResponsiveContainer.types';
3
+ export * from './withResponsiveContainer';
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./ResponsiveContainer"), exports);
5
+ tslib_1.__exportStar(require("./ResponsiveContainer.types"), exports);
6
+ tslib_1.__exportStar(require("./withResponsiveContainer"), exports);
7
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ResponsiveContainer/index.ts"],"names":[],"mappings":";;;AAAA,gEAAsC;AACtC,sEAA4C;AAC5C,oEAA0C","sourcesContent":["export * from './ResponsiveContainer';\nexport * from './ResponsiveContainer.types';\nexport * from './withResponsiveContainer';\n"]}
@@ -0,0 +1,7 @@
1
+ import * as React from 'react';
2
+ import { IResponsiveContainerProps } from './ResponsiveContainer.types';
3
+ /**
4
+ * An HOC to update wrapped component on container resize.
5
+ * {@docCategory ResponsiveContainer}
6
+ */
7
+ export declare function withResponsiveContainer<TProps extends Omit<IResponsiveContainerProps, 'children'>>(WrappedComponent: React.ComponentType<TProps>): React.FC<TProps>;
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.withResponsiveContainer = void 0;
4
+ var tslib_1 = require("tslib");
5
+ /* eslint-disable @typescript-eslint/no-explicit-any */
6
+ var React = require("react");
7
+ var ResponsiveContainer_1 = require("./ResponsiveContainer");
8
+ /**
9
+ * An HOC to update wrapped component on container resize.
10
+ * {@docCategory ResponsiveContainer}
11
+ */
12
+ function withResponsiveContainer(WrappedComponent) {
13
+ var ComponentWithResponsiveContainer = function (_a) {
14
+ var aspect = _a.aspect, width = _a.width, height = _a.height, minWidth = _a.minWidth, minHeight = _a.minHeight, maxHeight = _a.maxHeight, onResize = _a.onResize, restProps = tslib_1.__rest(_a, ["aspect", "width", "height", "minWidth", "minHeight", "maxHeight", "onResize"]);
15
+ return (React.createElement(ResponsiveContainer_1.ResponsiveContainer, { aspect: aspect, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxHeight: maxHeight, onResize: onResize },
16
+ React.createElement(WrappedComponent, tslib_1.__assign({}, restProps))));
17
+ };
18
+ return ComponentWithResponsiveContainer;
19
+ }
20
+ exports.withResponsiveContainer = withResponsiveContainer;
21
+ //# sourceMappingURL=withResponsiveContainer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"withResponsiveContainer.js","sourceRoot":"../src/","sources":["components/ResponsiveContainer/withResponsiveContainer.tsx"],"names":[],"mappings":";;;;AAAA,uDAAuD;AACvD,6BAA+B;AAC/B,6DAA4D;AAG5D;;;GAGG;AACH,SAAgB,uBAAuB,CACrC,gBAA6C;IAE7C,IAAM,gCAAgC,GAAqB,UAAC,EAS3D;QARC,IAAA,MAAM,YAAA,EACN,KAAK,WAAA,EACL,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,SAAS,eAAA,EACT,QAAQ,cAAA,EACL,SAAS,sBAR8C,+EAS3D,CADa;QAEZ,OAAO,CACL,oBAAC,yCAAmB,IAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,gBAAgB,uBAAM,SAAiB,EAAI,CACxB,CACvB,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,gCAAgC,CAAC;AAC1C,CAAC;AA7BD,0DA6BC","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from 'react';\nimport { ResponsiveContainer } from './ResponsiveContainer';\nimport { IResponsiveContainerProps } from './ResponsiveContainer.types';\n\n/**\n * An HOC to update wrapped component on container resize.\n * {@docCategory ResponsiveContainer}\n */\nexport function withResponsiveContainer<TProps extends Omit<IResponsiveContainerProps, 'children'>>(\n WrappedComponent: React.ComponentType<TProps>,\n) {\n const ComponentWithResponsiveContainer: React.FC<TProps> = ({\n aspect,\n width,\n height,\n minWidth,\n minHeight,\n maxHeight,\n onResize,\n ...restProps\n }) => {\n return (\n <ResponsiveContainer\n aspect={aspect}\n width={width}\n height={height}\n minWidth={minWidth}\n minHeight={minHeight}\n maxHeight={maxHeight}\n onResize={onResize}\n >\n <WrappedComponent {...(restProps as any)} />\n </ResponsiveContainer>\n );\n };\n\n return ComponentWithResponsiveContainer;\n}\n"]}
@@ -476,12 +476,13 @@ var SankeyChartBase = /** @class */ (function (_super) {
476
476
  _this._labelTooltipId = (0, Utilities_1.getId)('tooltip');
477
477
  _this._margins = { top: 36, right: 48, bottom: 32, left: 48 };
478
478
  // We memo-ize creation so that we only create a new object when any of the fields change.
479
- _this._computeClassNamesProps = (0, Utilities_1.memoizeFunction)(function (theme, pathColor, className, containerWidth, containerHeight) { return ({
479
+ _this._computeClassNamesProps = (0, Utilities_1.memoizeFunction)(function (theme, pathColor, className, containerWidth, containerHeight, enableReflow) { return ({
480
480
  theme: theme,
481
481
  width: containerWidth,
482
482
  height: containerHeight,
483
483
  pathColor: pathColor,
484
484
  className: className,
485
+ enableReflow: enableReflow,
485
486
  }); });
486
487
  // `getClassNames` is memoized underneath, so it only recomputes when the `styles` or `classNamesProps` change.
487
488
  // We memoize `classNamesProps` so that we only create new class names when absolutely necessary,
@@ -547,7 +548,7 @@ var SankeyChartBase = /** @class */ (function (_super) {
547
548
  if (!this._isChartEmpty()) {
548
549
  var _a = this.props, theme = _a.theme, className = _a.className, styles = _a.styles, pathColor = _a.pathColor, colorsForNodes = _a.colorsForNodes, borderColorsForNodes = _a.borderColorsForNodes;
549
550
  var state = this.state;
550
- var classNamesProps = this._computeClassNamesProps(theme, pathColor, className, state.containerWidth, state.containerHeight);
551
+ var classNamesProps = this._computeClassNamesProps(theme, pathColor, className, state.containerWidth, state.containerHeight, this.props.enableReflow);
551
552
  var classNames_1 = this._computeClassNames(styles, classNamesProps);
552
553
  // Compute the position of each node and link
553
554
  var _b = this._normalizeData(this.props.data.SankeyChartData, state.containerWidth, state.containerHeight, colorsForNodes, borderColorsForNodes), nodes_1 = _b.nodes, links_1 = _b.links, width = _b.width, height = _b.height;