@fluentui/react-charting 5.23.63 → 5.23.65

package/lib/components/PieChart/PieChart.js

@@ -0,0 +1,10 @@
+import { styled } from '@fluentui/react/lib/Utilities';
+import { PieChartBase } from './PieChart.base';
+import { getStyles } from './PieChart.styles';
+// Create a PieChart variant which uses these default styles and this styled subcomponent.
+/**
+ * Piechart component
+ * {@docCategory PieChart}
+ */
+export var PieChart = styled(PieChartBase, getStyles);
+//# sourceMappingURL=PieChart.js.map

package/lib/components/PieChart/PieChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,0FAA0F;AAC1F;;;GAGG;AACH,MAAM,CAAC,IAAM,QAAQ,GAA4C,MAAM,CAIrE,YAAY,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { IPieChartProps, IPieChartStyleProps, IPieChartStyles } from './PieChart.types';\nimport { PieChartBase } from './PieChart.base';\nimport { getStyles } from './PieChart.styles';\n\n// Create a PieChart variant which uses these default styles and this styled subcomponent.\n/**\n * Piechart component\n * {@docCategory PieChart}\n */\nexport const PieChart: React.FunctionComponent<IPieChartProps> = styled<\n  IPieChartProps,\n  IPieChartStyleProps,\n  IPieChartStyles\n>(PieChartBase, getStyles);\n"]}

package/lib/components/PieChart/PieChart.styles.d.ts

@@ -0,0 +1,2 @@
+import { IPieChartStyleProps, IPieChartStyles } from './PieChart.types';
+export declare const getStyles: (props: IPieChartStyleProps) => IPieChartStyles;

package/lib/components/PieChart/PieChart.styles.js

@@ -0,0 +1,29 @@
+import { __assign } from "tslib";
+export var getStyles = function (props) {
+    var className = props.className, theme = props.theme, width = props.width, height = props.height;
+    var chartWidth = width + 30;
+    var chartPadding = 20;
+    var chartHeight = height + 10;
+    return {
+        root: [
+            theme.fonts.medium,
+            'ms-PieChart',
+            className,
+            {
+                width: chartWidth + 2 * chartPadding,
+            },
+        ],
+        chart: [
+            {
+                padding: chartPadding,
+                width: chartWidth,
+                height: chartHeight,
+                boxSizing: 'content-box',
+            },
+        ],
+        chartTitle: [
+            __assign({ textAlign: 'center' }, theme.fonts.mediumPlus),
+        ],
+    };
+};
+//# sourceMappingURL=PieChart.styles.js.map

package/lib/components/PieChart/PieChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.styles.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.styles.ts"],"names":[],"mappings":";AAEA,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAA0B;IAC1C,IAAA,SAAS,GAA2B,KAAK,UAAhC,EAAE,KAAK,GAAoB,KAAK,MAAzB,EAAE,KAAK,GAAa,KAAK,MAAlB,EAAE,MAAM,GAAK,KAAK,OAAV,CAAW;IAElD,IAAM,UAAU,GAAG,KAAK,GAAG,EAAE,CAAC;IAC9B,IAAM,YAAY,GAAG,EAAE,CAAC;IACxB,IAAM,WAAW,GAAG,MAAM,GAAG,EAAE,CAAC;IAEhC,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB,aAAa;YACb,SAAS;YACT;gBACE,KAAK,EAAE,UAAU,GAAG,CAAC,GAAG,YAAY;aACrC;SACF;QACD,KAAK,EAAE;YACL;gBACE,OAAO,EAAE,YAAY;gBACrB,KAAK,EAAE,UAAU;gBACjB,MAAM,EAAE,WAAW;gBACnB,SAAS,EAAE,aAAa;aACzB;SACF;QACD,UAAU,EAAE;uBAER,SAAS,EAAE,QAAQ,IAChB,KAAK,CAAC,KAAK,CAAC,UAAU;SAE5B;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { IPieChartStyleProps, IPieChartStyles } from './PieChart.types';\n\nexport const getStyles = (props: IPieChartStyleProps): IPieChartStyles => {\n  const { className, theme, width, height } = props;\n\n  const chartWidth = width + 30;\n  const chartPadding = 20;\n  const chartHeight = height + 10;\n\n  return {\n    root: [\n      theme.fonts.medium,\n      'ms-PieChart',\n      className,\n      {\n        width: chartWidth + 2 * chartPadding,\n      },\n    ],\n    chart: [\n      {\n        padding: chartPadding,\n        width: chartWidth,\n        height: chartHeight,\n        boxSizing: 'content-box',\n      },\n    ],\n    chartTitle: [\n      {\n        textAlign: 'center',\n        ...theme.fonts.mediumPlus,\n      },\n    ],\n  };\n};\n"]}

package/lib/components/PieChart/PieChart.types.d.ts

@@ -0,0 +1,75 @@
+import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
+import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { IDataPoint } from '../../types/IDataPoint';
+export type { IDataPoint } from '../../types/IDataPoint';
+export interface IPieChart {
+}
+/**
+ * Pie Chart properties
+ * {@docCategory PieChart}
+ */
+export interface IPieChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data?: IDataPoint[];
+    /**
+     * Width of the chart.
+     */
+    width?: number;
+    /**
+     * Height of the chart.
+     */
+    height?: number;
+    /**
+     * colors to render in the chart.
+     */
+    colors?: string[];
+    /**
+     * Title to apply to the whole chart.
+     */
+    chartTitle?: string;
+    /**
+     * Additional CSS class(es) to apply to the PieChart.
+     */
+    className?: string;
+    /**
+     * Theme (provided through customization.)
+     */
+    theme?: ITheme;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<IPieChartStyleProps, IPieChartStyles>;
+    /**
+     * Width of line stroke
+     */
+    strokeWidth?: number;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+}
+/**
+ * Pie Chart style properties
+ * {@docCategory PieChart}
+ */
+export type IPieChartStyleProps = Required<Pick<IPieChartProps, 'theme' | 'width' | 'height'>> & Pick<IPieChartProps, 'className'>;
+/**
+ * Pie Chart styles
+ * {@docCategory PieChart}
+ */
+export interface IPieChartStyles {
+    /**
+     *  Style for the root element.
+     */
+    root?: IStyle;
+    /**
+     * Style for the chart.
+     */
+    chart?: IStyle;
+    /**
+     * Style for the chart Title.
+     */
+    chartTitle?: IStyle;
+}

package/lib/components/PieChart/PieChart.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PieChart.types.js.map

package/lib/components/PieChart/PieChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.types.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IDataPoint } from '../../types/IDataPoint';\nexport type { IDataPoint } from '../../types/IDataPoint';\nexport interface IPieChart {}\n\n/**\n * Pie Chart properties\n * {@docCategory PieChart}\n */\nexport interface IPieChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: IDataPoint[];\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of the chart.\n   */\n  height?: number;\n\n  /**\n   * colors to render in the chart.\n   */\n  colors?: string[];\n\n  /**\n   * Title to apply to the whole chart.\n   */\n  chartTitle?: string;\n\n  /**\n   * Additional CSS class(es) to apply to the PieChart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IPieChartStyleProps, IPieChartStyles>;\n\n  /**\n   * Width of line stroke\n   */\n  strokeWidth?: number;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n}\n\n/**\n * Pie Chart style properties\n * {@docCategory PieChart}\n */\nexport type IPieChartStyleProps = Required<Pick<IPieChartProps, 'theme' | 'width' | 'height'>> &\n  Pick<IPieChartProps, 'className'>;\n\n/**\n * Pie Chart styles\n * {@docCategory PieChart}\n */\nexport interface IPieChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Style for the chart.\n   */\n  chart?: IStyle;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle?: IStyle;\n}\n"]}

package/lib/components/PieChart/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PieChart';
+export * from './PieChart.types';

package/lib/components/PieChart/index.js

@@ -0,0 +1,3 @@
+export * from './PieChart';
+export * from './PieChart.types';
+//# sourceMappingURL=index.js.map

package/lib/components/PieChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/PieChart/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './PieChart';\nexport * from './PieChart.types';\n"]}

package/lib/components/ResponsiveContainer/ResponsiveContainer.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IResponsiveContainerProps } from './ResponsiveContainer.types';
+/**
+ * Responsive Container component
+ * {@docCategory ResponsiveContainer}
+ */
+export declare const ResponsiveContainer: React.FC<IResponsiveContainerProps>;

package/lib/components/ResponsiveContainer/ResponsiveContainer.js

@@ -0,0 +1,83 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { getWindow } from '@fluentui/react';
+/**
+ * Responsive Container component
+ * {@docCategory ResponsiveContainer}
+ */
+export var ResponsiveContainer = function (props) {
+    var _a, _b;
+    var containerRef = React.useRef(null);
+    var onResizeRef = React.useRef();
+    var _c = React.useState({}), size = _c[0], setSize = _c[1];
+    onResizeRef.current = props.onResize;
+    React.useEffect(function () {
+        var _window = getWindow(containerRef.current);
+        var animationFrameId;
+        var resizeObserver;
+        var resizeCallback = function (entries) {
+            var _a;
+            var _b = entries[0].contentRect, containerWidth = _b.width, containerHeight = _b.height;
+            // rAF is an alternative to the throttle function. For more info, see:
+            // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf
+            animationFrameId = _window === null || _window === void 0 ? void 0 : _window.requestAnimationFrame(function () {
+                setSize(function (prevSize) {
+                    var roundedWidth = Math.floor(containerWidth);
+                    var roundedHeight = Math.floor(containerHeight);
+                    if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {
+                        return prevSize;
+                    }
+                    return { containerWidth: roundedWidth, containerHeight: roundedHeight };
+                });
+            });
+            (_a = onResizeRef.current) === null || _a === void 0 ? void 0 : _a.call(onResizeRef, containerWidth, containerHeight);
+        };
+        if (_window && _window.ResizeObserver) {
+            resizeObserver = new _window.ResizeObserver(resizeCallback);
+            if (containerRef.current) {
+                resizeObserver.observe(containerRef.current);
+            }
+        }
+        return function () {
+            if (animationFrameId) {
+                _window === null || _window === void 0 ? void 0 : _window.cancelAnimationFrame(animationFrameId);
+            }
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        };
+    }, []);
+    var chartContent = React.useMemo(function () {
+        var calculatedWidth = size.containerWidth;
+        var calculatedHeight = size.containerHeight;
+        if (typeof props.aspect === 'number' && props.aspect > 0) {
+            if (calculatedWidth) {
+                calculatedHeight = calculatedWidth / props.aspect;
+            }
+            else if (calculatedHeight) {
+                calculatedWidth = calculatedHeight * props.aspect;
+            }
+            if (typeof props.maxHeight === 'number' && calculatedHeight && calculatedHeight > props.maxHeight) {
+                calculatedHeight = props.maxHeight;
+            }
+        }
+        return React.Children.map(props.children, function (child) {
+            var _a;
+            return React.cloneElement(child, {
+                width: calculatedWidth,
+                height: calculatedHeight,
+                shouldResize: (calculatedWidth !== null && calculatedWidth !== void 0 ? calculatedWidth : 0) + (calculatedHeight !== null && calculatedHeight !== void 0 ? calculatedHeight : 0),
+                styles: __assign(__assign({}, child.props.styles), { root: __assign(__assign({}, (_a = child.props.styles) === null || _a === void 0 ? void 0 : _a.root), { 
+                        // Ensure the child element fills the parent container
+                        // https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height
+                        width: calculatedWidth, height: calculatedHeight }) }),
+            });
+        });
+    }, [size, props.aspect, props.maxHeight, props.children]);
+    return (React.createElement("div", { ref: containerRef, style: {
+            width: (_a = props.width) !== null && _a !== void 0 ? _a : '100%',
+            height: (_b = props.height) !== null && _b !== void 0 ? _b : '100%',
+            minWidth: props.minWidth,
+            minHeight: props.minHeight,
+            maxHeight: props.maxHeight,
+        } }, chartContent));
+};
+//# sourceMappingURL=ResponsiveContainer.js.map

package/lib/components/ResponsiveContainer/ResponsiveContainer.js.map

@@ -0,0 +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"]}

package/lib/components/ResponsiveContainer/ResponsiveContainer.types.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { IStyle, IStyleFunctionOrObject } from '@fluentui/react';
+/**
+ * Responsive Child props
+ * {@docCategory ResponsiveContainer}
+ */
+export interface IResponsiveChildProps {
+    width?: number;
+    height?: number;
+    shouldResize?: number;
+    styles?: IStyleFunctionOrObject<{}, {
+        root: IStyle;
+    }>;
+}
+/**
+ * Responsive Container props
+ * {@docCategory ResponsiveContainer}
+ */
+export interface IResponsiveContainerProps {
+    /**
+     * Aspect ratio (width / height) of the container. If specified, the height will be calculated by width / aspect.
+     */
+    aspect?: number;
+    /**
+     * Width of the container
+     */
+    width?: number | string;
+    /**
+     * Height of the container
+     */
+    height?: number | string;
+    /**
+     * Minimum width of the container
+     */
+    minWidth?: number | string;
+    /**
+     * Minimum height of the container
+     */
+    minHeight?: number | string;
+    /**
+     * Maximum height of the container
+     */
+    maxHeight?: number;
+    /**
+     * Callback providing the updated chart width and height values when the container is resized
+     */
+    onResize?: (width: number, height: number) => void;
+    /**
+     * Child component to be rendered within the container
+     */
+    children: React.ReactElement<IResponsiveChildProps>;
+}

package/lib/components/ResponsiveContainer/ResponsiveContainer.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ResponsiveContainer.types.js.map

package/lib/components/ResponsiveContainer/ResponsiveContainer.types.js.map

@@ -0,0 +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"]}

package/lib/components/ResponsiveContainer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ResponsiveContainer';
+export * from './ResponsiveContainer.types';
+export * from './withResponsiveContainer';

package/lib/components/ResponsiveContainer/index.js

@@ -0,0 +1,4 @@
+export * from './ResponsiveContainer';
+export * from './ResponsiveContainer.types';
+export * from './withResponsiveContainer';
+//# sourceMappingURL=index.js.map

package/lib/components/ResponsiveContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ResponsiveContainer/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './ResponsiveContainer';\nexport * from './ResponsiveContainer.types';\nexport * from './withResponsiveContainer';\n"]}

package/lib/components/ResponsiveContainer/withResponsiveContainer.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IResponsiveContainerProps } from './ResponsiveContainer.types';
+/**
+ * An HOC to update wrapped component on container resize.
+ * {@docCategory ResponsiveContainer}
+ */
+export declare function withResponsiveContainer<TProps extends Omit<IResponsiveContainerProps, 'children'>>(WrappedComponent: React.ComponentType<TProps>): React.FC<TProps>;

package/lib/components/ResponsiveContainer/withResponsiveContainer.js

@@ -0,0 +1,17 @@
+import { __assign, __rest } from "tslib";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react';
+import { ResponsiveContainer } from './ResponsiveContainer';
+/**
+ * An HOC to update wrapped component on container resize.
+ * {@docCategory ResponsiveContainer}
+ */
+export function withResponsiveContainer(WrappedComponent) {
+    var ComponentWithResponsiveContainer = function (_a) {
+        var aspect = _a.aspect, width = _a.width, height = _a.height, minWidth = _a.minWidth, minHeight = _a.minHeight, maxHeight = _a.maxHeight, onResize = _a.onResize, restProps = __rest(_a, ["aspect", "width", "height", "minWidth", "minHeight", "maxHeight", "onResize"]);
+        return (React.createElement(ResponsiveContainer, { aspect: aspect, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxHeight: maxHeight, onResize: onResize },
+            React.createElement(WrappedComponent, __assign({}, restProps))));
+    };
+    return ComponentWithResponsiveContainer;
+}
+//# sourceMappingURL=withResponsiveContainer.js.map

package/lib/components/ResponsiveContainer/withResponsiveContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withResponsiveContainer.js","sourceRoot":"../src/","sources":["components/ResponsiveContainer/withResponsiveContainer.tsx"],"names":[],"mappings":";AAAA,uDAAuD;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D;;;GAGG;AACH,MAAM,UAAU,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,cAR8C,+EAS3D,CADa;QAEZ,OAAO,CACL,oBAAC,mBAAmB,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,eAAM,SAAiB,EAAI,CACxB,CACvB,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,gCAAgC,CAAC;AAC1C,CAAC","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"]}

package/lib/components/SankeyChart/SankeyChart.base.d.ts

@@ -0,0 +1,91 @@
+import { SankeyGraph, SankeyLayout } from 'd3-sankey';
+import * as React from 'react';
+import { IBasestate, IChart, IImageExportOptions, SLink, SNode } from '../../types/IDataPoint';
+import { IChartHoverCardProps } from '../../utilities/ChartHoverCard/ChartHoverCard.types';
+import { IMargins } from '../../utilities/utilities';
+import { ISankeyChartData, ISankeyChartProps } from './SankeyChart.types';
+type NodesInColumns = {
+    [key: number]: SNode[];
+};
+type SankeyLayoutGenerator = SankeyLayout<SankeyGraph<{}, {}>, {}, {}>;
+export interface ISankeyChartState extends IBasestate, IChartHoverCardProps {
+    containerWidth: number;
+    containerHeight: number;
+    selectedState: boolean;
+    selectedLinks: Set<Number>;
+    selectedNodes: Set<Number>;
+    selectedNode?: SNode;
+    refSelected?: any;
+    selectedLink?: SLink;
+    shouldOverflow: boolean;
+}
+/**
+ * This is used to group nodes by column index.
+ */
+export declare function groupNodesByColumn(graph: ISankeyChartData): NodesInColumns;
+/**
+ * This is used to introduce dynamic padding for cases where the number of nodes in a column is huge
+ * so that we maintain a node to space ratio for such columns as if we fail to do so the
+ * chart is devoid of nodes and only shows links.
+ */
+export declare function adjustPadding(sankey: SankeyLayoutGenerator, height: number, nodesInColumn: NodesInColumns): void;
+export declare function preRenderLayout(margins: IMargins, containerWidth: number, containerHeight: number, isRtl: boolean): {
+    sankey: SankeyLayoutGenerator;
+    height: number;
+    width: number;
+};
+export declare class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyChartState> implements IChart {
+    static defaultProps: Partial<ISankeyChartProps>;
+    chartContainer: HTMLDivElement;
+    private _reqID;
+    private readonly _calloutId;
+    private readonly _linkId;
+    private readonly _chartId;
+    private readonly _emptyChartId;
+    private readonly _labelTooltipId;
+    private readonly _margins;
+    private readonly _isRtl;
+    private _numColumns;
+    private readonly _computeClassNamesProps;
+    private readonly _computeClassNames;
+    private readonly _normalizeData;
+    private readonly _fetchTooltip;
+    private readonly _nodeAttributes;
+    private readonly _linkAttributes;
+    private readonly _fetchNodes;
+    private readonly _fetchLinks;
+    private readonly _strings;
+    private readonly _accessibility;
+    constructor(props: ISankeyChartProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ISankeyChartProps): void;
+    componentWillUnmount(): void;
+    render(): React.ReactNode;
+    toImage: (opts?: IImageExportOptions) => Promise<string>;
+    private _computeNodeAttributes;
+    private _linkCalloutAttributes;
+    private _normalizeSankeyData;
+    private _labelTooltipDiv;
+    private _createLinks;
+    private _createNodes;
+    private _onLeave;
+    private _onHover;
+    private _formatNumber;
+    private _onStreamHover;
+    private _onStreamLeave;
+    private _onFocusLink;
+    private _onCloseCallout;
+    private _onBlur;
+    private _fillNodeColors;
+    private _fillStreamColors;
+    private _fillStreamBorder;
+    private _fillNodeBorder;
+    private _getOpacityStream;
+    private _getOpacityStreamBorder;
+    private _fitParentContainer;
+    private _showTooltip;
+    private _hideTooltip;
+    private _isChartEmpty;
+    private _calculateChartMinWidth;
+}
+export {};