@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,86 @@
1
+ define(["require", "exports", "tslib", "react", "@fluentui/react"], function (require, exports, tslib_1, React, react_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.ResponsiveContainer = void 0;
5
+ /**
6
+ * Responsive Container component
7
+ * {@docCategory ResponsiveContainer}
8
+ */
9
+ var ResponsiveContainer = function (props) {
10
+ var _a, _b;
11
+ var containerRef = React.useRef(null);
12
+ var onResizeRef = React.useRef();
13
+ var _c = React.useState({}), size = _c[0], setSize = _c[1];
14
+ onResizeRef.current = props.onResize;
15
+ React.useEffect(function () {
16
+ var _window = (0, react_1.getWindow)(containerRef.current);
17
+ var animationFrameId;
18
+ var resizeObserver;
19
+ var resizeCallback = function (entries) {
20
+ var _a;
21
+ var _b = entries[0].contentRect, containerWidth = _b.width, containerHeight = _b.height;
22
+ // rAF is an alternative to the throttle function. For more info, see:
23
+ // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf
24
+ animationFrameId = _window === null || _window === void 0 ? void 0 : _window.requestAnimationFrame(function () {
25
+ setSize(function (prevSize) {
26
+ var roundedWidth = Math.floor(containerWidth);
27
+ var roundedHeight = Math.floor(containerHeight);
28
+ if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {
29
+ return prevSize;
30
+ }
31
+ return { containerWidth: roundedWidth, containerHeight: roundedHeight };
32
+ });
33
+ });
34
+ (_a = onResizeRef.current) === null || _a === void 0 ? void 0 : _a.call(onResizeRef, containerWidth, containerHeight);
35
+ };
36
+ if (_window && _window.ResizeObserver) {
37
+ resizeObserver = new _window.ResizeObserver(resizeCallback);
38
+ if (containerRef.current) {
39
+ resizeObserver.observe(containerRef.current);
40
+ }
41
+ }
42
+ return function () {
43
+ if (animationFrameId) {
44
+ _window === null || _window === void 0 ? void 0 : _window.cancelAnimationFrame(animationFrameId);
45
+ }
46
+ resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
47
+ };
48
+ }, []);
49
+ var chartContent = React.useMemo(function () {
50
+ var calculatedWidth = size.containerWidth;
51
+ var calculatedHeight = size.containerHeight;
52
+ if (typeof props.aspect === 'number' && props.aspect > 0) {
53
+ if (calculatedWidth) {
54
+ calculatedHeight = calculatedWidth / props.aspect;
55
+ }
56
+ else if (calculatedHeight) {
57
+ calculatedWidth = calculatedHeight * props.aspect;
58
+ }
59
+ if (typeof props.maxHeight === 'number' && calculatedHeight && calculatedHeight > props.maxHeight) {
60
+ calculatedHeight = props.maxHeight;
61
+ }
62
+ }
63
+ return React.Children.map(props.children, function (child) {
64
+ var _a;
65
+ return React.cloneElement(child, {
66
+ width: calculatedWidth,
67
+ height: calculatedHeight,
68
+ shouldResize: (calculatedWidth !== null && calculatedWidth !== void 0 ? calculatedWidth : 0) + (calculatedHeight !== null && calculatedHeight !== void 0 ? calculatedHeight : 0),
69
+ 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), {
70
+ // Ensure the child element fills the parent container
71
+ // https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height
72
+ width: calculatedWidth, height: calculatedHeight }) }),
73
+ });
74
+ });
75
+ }, [size, props.aspect, props.maxHeight, props.children]);
76
+ return (React.createElement("div", { ref: containerRef, style: {
77
+ width: (_a = props.width) !== null && _a !== void 0 ? _a : '100%',
78
+ height: (_b = props.height) !== null && _b !== void 0 ? _b : '100%',
79
+ minWidth: props.minWidth,
80
+ minHeight: props.minHeight,
81
+ maxHeight: props.maxHeight,
82
+ } }, chartContent));
83
+ };
84
+ exports.ResponsiveContainer = ResponsiveContainer;
85
+ });
86
+ //# sourceMappingURL=ResponsiveContainer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ResponsiveContainer.js","sourceRoot":"../src/","sources":["components/ResponsiveContainer/ResponsiveContainer.tsx"],"names":[],"mappings":";;;;IAIA;;;OAGG;IACI,IAAM,mBAAmB,GAAwC,UAAA,KAAK;;QAC3E,IAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;QACxD,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,EAAyC,CAAC;QAEpE,IAAA,KAAkB,KAAK,CAAC,QAAQ,CAAwD,EAAE,CAAC,EAA1F,IAAI,QAAA,EAAE,OAAO,QAA6E,CAAC;QAElG,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC;QAErC,KAAK,CAAC,SAAS,CAAC;YACd,IAAM,OAAO,GAAG,IAAA,iBAAS,EAAC,YAAY,CAAC,OAAO,CAA6C,CAAC;YAC5F,IAAI,gBAAoC,CAAC;YACzC,IAAI,cAA0C,CAAC;YAE/C,IAAM,cAAc,GAAG,UAAC,OAA8B;;gBAC9C,IAAA,KAAqD,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,EAAlE,cAAc,WAAA,EAAU,eAAe,YAA2B,CAAC;gBAClF,sEAAsE;gBACtE,gGAAgG;gBAChG,gBAAgB,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,qBAAqB,CAAC;oBAChD,OAAO,CAAC,UAAA,QAAQ;wBACd,IAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;wBAChD,IAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;wBAClD,IAAI,QAAQ,CAAC,cAAc,KAAK,YAAY,IAAI,QAAQ,CAAC,eAAe,KAAK,aAAa,EAAE,CAAC;4BAC3F,OAAO,QAAQ,CAAC;wBAClB,CAAC;wBAED,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC;oBAC1E,CAAC,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;gBACH,MAAA,WAAW,CAAC,OAAO,4DAAG,cAAc,EAAE,eAAe,CAAC,CAAC;YACzD,CAAC,CAAC;YAEF,IAAI,OAAO,IAAI,OAAO,CAAC,cAAc,EAAE,CAAC;gBACtC,cAAc,GAAG,IAAI,OAAO,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;gBAC5D,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;oBACzB,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;gBAC/C,CAAC;YACH,CAAC;YAED,OAAO;gBACL,IAAI,gBAAgB,EAAE,CAAC;oBACrB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;gBAClD,CAAC;gBAED,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,UAAU,EAAE,CAAC;YAC/B,CAAC,CAAC;QACJ,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,IAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;YACjC,IAAI,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC;YAC1C,IAAI,gBAAgB,GAAG,IAAI,CAAC,eAAe,CAAC;YAE5C,IAAI,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACzD,IAAI,eAAe,EAAE,CAAC;oBACpB,gBAAgB,GAAG,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC;gBACpD,CAAC;qBAAM,IAAI,gBAAgB,EAAE,CAAC;oBAC5B,eAAe,GAAG,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAC;gBACpD,CAAC;gBAED,IAAI,OAAO,KAAK,CAAC,SAAS,KAAK,QAAQ,IAAI,gBAAgB,IAAI,gBAAgB,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;oBAClG,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC;gBACrC,CAAC;YACH,CAAC;YAED,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,UAAA,KAAK;;gBAC7C,OAAO,KAAK,CAAC,YAAY,CAAwB,KAAK,EAAE;oBACtD,KAAK,EAAE,eAAe;oBACtB,MAAM,EAAE,gBAAgB;oBACxB,YAAY,EAAE,CAAC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,CAAC,CAAC,GAAG,CAAC,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,CAAC,CAAC;oBAC9D,MAAM,wCAED,KAAK,CAAC,KAAK,CAAC,MAAM,KACrB,IAAI,wCACC,MAAA,KAAK,CAAC,KAAK,CAAC,MAAM,0CAAE,IAAI;4BAC3B,sDAAsD;4BACtD,4GAA4G;4BAC5G,KAAK,EAAE,eAAe,EACtB,MAAM,EAAE,gBAAgB,MAE3B;iBACF,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;QAE1D,OAAO,CACL,6BACE,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE;gBACL,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,MAAM;gBAC5B,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,MAAM;gBAC9B,QAAQ,EAAE,KAAK,CAAC,QAAQ;gBACxB,SAAS,EAAE,KAAK,CAAC,SAAS;gBAC1B,SAAS,EAAE,KAAK,CAAC,SAAS;aAC3B,IAEA,YAAY,CACT,CACP,CAAC;IACJ,CAAC,CAAC;IAjGW,QAAA,mBAAmB,uBAiG9B","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,5 @@
1
+ define(["require", "exports"], function (require, exports) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ });
5
+ //# 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,8 @@
1
+ define(["require", "exports", "tslib", "./ResponsiveContainer", "./ResponsiveContainer.types", "./withResponsiveContainer"], function (require, exports, tslib_1, ResponsiveContainer_1, ResponsiveContainer_types_1, withResponsiveContainer_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ tslib_1.__exportStar(ResponsiveContainer_1, exports);
5
+ tslib_1.__exportStar(ResponsiveContainer_types_1, exports);
6
+ tslib_1.__exportStar(withResponsiveContainer_1, exports);
7
+ });
8
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ResponsiveContainer/index.ts"],"names":[],"mappings":";;;IAAA,qDAAsC;IACtC,2DAA4C;IAC5C,yDAA0C","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,19 @@
1
+ define(["require", "exports", "tslib", "react", "./ResponsiveContainer"], function (require, exports, tslib_1, React, ResponsiveContainer_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.withResponsiveContainer = void 0;
5
+ /**
6
+ * An HOC to update wrapped component on container resize.
7
+ * {@docCategory ResponsiveContainer}
8
+ */
9
+ function withResponsiveContainer(WrappedComponent) {
10
+ var ComponentWithResponsiveContainer = function (_a) {
11
+ 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"]);
12
+ return (React.createElement(ResponsiveContainer_1.ResponsiveContainer, { aspect: aspect, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxHeight: maxHeight, onResize: onResize },
13
+ React.createElement(WrappedComponent, tslib_1.__assign({}, restProps))));
14
+ };
15
+ return ComponentWithResponsiveContainer;
16
+ }
17
+ exports.withResponsiveContainer = withResponsiveContainer;
18
+ });
19
+ //# sourceMappingURL=withResponsiveContainer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"withResponsiveContainer.js","sourceRoot":"../src/","sources":["components/ResponsiveContainer/withResponsiveContainer.tsx"],"names":[],"mappings":";;;;IAKA;;;OAGG;IACH,SAAgB,uBAAuB,CACrC,gBAA6C;QAE7C,IAAM,gCAAgC,GAAqB,UAAC,EAS3D;YARC,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;YAEZ,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;gBAElB,oBAAC,gBAAgB,uBAAM,SAAiB,EAAI,CACxB,CACvB,CAAC;QACJ,CAAC,CAAC;QAEF,OAAO,gCAAgC,CAAC;IAC1C,CAAC;IA7BD,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"]}
@@ -467,12 +467,13 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
467
467
  _this._labelTooltipId = (0, Utilities_1.getId)('tooltip');
468
468
  _this._margins = { top: 36, right: 48, bottom: 32, left: 48 };
469
469
  // We memo-ize creation so that we only create a new object when any of the fields change.
470
- _this._computeClassNamesProps = (0, Utilities_1.memoizeFunction)(function (theme, pathColor, className, containerWidth, containerHeight) { return ({
470
+ _this._computeClassNamesProps = (0, Utilities_1.memoizeFunction)(function (theme, pathColor, className, containerWidth, containerHeight, enableReflow) { return ({
471
471
  theme: theme,
472
472
  width: containerWidth,
473
473
  height: containerHeight,
474
474
  pathColor: pathColor,
475
475
  className: className,
476
+ enableReflow: enableReflow,
476
477
  }); });
477
478
  // `getClassNames` is memoized underneath, so it only recomputes when the `styles` or `classNamesProps` change.
478
479
  // We memoize `classNamesProps` so that we only create new class names when absolutely necessary,
@@ -538,7 +539,7 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
538
539
  if (!this._isChartEmpty()) {
539
540
  var _a = this.props, theme = _a.theme, className = _a.className, styles = _a.styles, pathColor = _a.pathColor, colorsForNodes = _a.colorsForNodes, borderColorsForNodes = _a.borderColorsForNodes;
540
541
  var state = this.state;
541
- var classNamesProps = this._computeClassNamesProps(theme, pathColor, className, state.containerWidth, state.containerHeight);
542
+ var classNamesProps = this._computeClassNamesProps(theme, pathColor, className, state.containerWidth, state.containerHeight, this.props.enableReflow);
542
543
  var classNames_1 = this._computeClassNames(styles, classNamesProps);
543
544
  // Compute the position of each node and link
544
545
  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;