@fluentui/react-charts 9.1.5 → 9.1.7

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

@@ -1 +1 @@
-{"version":3,"sources":["ResponsiveContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getWindow } from '../../utilities/getWindow';\nimport { ResponsiveChildProps, ResponsiveContainerProps } from './ResponsiveContainer.types';\n\n/**\n * Responsive Container component\n * {@docCategory ResponsiveContainer}\n */\nexport const ResponsiveContainer: React.FC<ResponsiveContainerProps> = props => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const onResizeRef = React.useRef<ResponsiveContainerProps['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 (\n      <div\n        ref={containerRef}\n        style={\n          {\n            width: props.width ?? '100%',\n            height: props.height ?? '100%',\n            minWidth: props.minWidth,\n            minHeight: props.minHeight,\n            maxHeight: props.maxHeight,\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            '--root-width': calculatedWidth + 'px',\n            '--root-height': calculatedHeight + 'px',\n          } as React.CSSProperties\n        }\n      >\n        {React.Children.map(props.children, child => {\n          return React.cloneElement<ResponsiveChildProps>(child, {\n            width: calculatedWidth,\n            height: calculatedHeight,\n            shouldResize: (calculatedWidth ?? 0) + (calculatedHeight ?? 0),\n          });\n        })}\n      </div>\n    );\n  }, [size, props.aspect, props.maxHeight, props.children, props.width, props.height, props.minHeight, props.minWidth]);\n\n  return chartContent;\n};\nResponsiveContainer.displayName = 'ResponsiveContainer';\n"],"names":["React","getWindow","ResponsiveContainer","props","containerRef","useRef","onResizeRef","size","setSize","useState","current","onResize","useEffect","_window","animationFrameId","resizeObserver","resizeCallback","entries","width","containerWidth","height","containerHeight","contentRect","requestAnimationFrame","prevSize","roundedWidth","Math","floor","roundedHeight","ResizeObserver","observe","cancelAnimationFrame","disconnect","chartContent","useMemo","calculatedWidth","calculatedHeight","aspect","maxHeight","div","ref","style","minWidth","minHeight","Children","map","children","child","cloneElement","shouldResize","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["ResponsiveContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getWindow } from '../../utilities/getWindow';\nimport { ResponsiveChildProps, ResponsiveContainerProps } from './ResponsiveContainer.types';\nimport { useResponsiveChildStyles } from './useResponsiveChildStyles.styles';\nimport { mergeClasses } from '@griffel/react';\n\n/**\n * Responsive Container component\n * {@docCategory ResponsiveContainer}\n */\nexport const ResponsiveContainer: React.FC<ResponsiveContainerProps> = props => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const onResizeRef = React.useRef<ResponsiveContainerProps['onResize']>();\n  const childClasses = useResponsiveChildStyles();\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<ResponsiveChildProps>(child, {\n        width: calculatedWidth,\n        height: calculatedHeight,\n        // For SankeyChart\n        shouldResize: (calculatedWidth ?? 0) + (calculatedHeight ?? 0),\n        styles: {\n          root: mergeClasses(child.props.styles?.root, childClasses.root),\n          chartWrapper: mergeClasses(child.props.styles?.chartWrapper, childClasses.chartWrapper),\n          chart: mergeClasses(child.props.styles?.chart, childClasses.chart),\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};\nResponsiveContainer.displayName = 'ResponsiveContainer';\n"],"names":["React","getWindow","useResponsiveChildStyles","mergeClasses","ResponsiveContainer","props","containerRef","useRef","onResizeRef","childClasses","size","setSize","useState","current","onResize","useEffect","_window","animationFrameId","resizeObserver","resizeCallback","entries","width","containerWidth","height","containerHeight","contentRect","requestAnimationFrame","prevSize","roundedWidth","Math","floor","roundedHeight","ResizeObserver","observe","cancelAnimationFrame","disconnect","chartContent","useMemo","calculatedWidth","calculatedHeight","aspect","maxHeight","Children","map","children","child","cloneElement","shouldResize","styles","root","chartWrapper","chart","div","ref","style","minWidth","minHeight","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["ResponsiveContainer.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Responsive Child props\n * {@docCategory ResponsiveContainer}\n */\nexport interface ResponsiveChildProps {\n  width?: number;\n  height?: number;\n  shouldResize?: number;\n}\n\n/**\n * Responsive Container props\n * {@docCategory ResponsiveContainer}\n */\nexport interface ResponsiveContainerProps {\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<ResponsiveChildProps>;\n}\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["ResponsiveContainer.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Responsive Child styles\n * {@docCategory ResponsiveContainer}\n */\nexport interface ResponsiveChildStyles {\n  root?: string;\n  chartWrapper?: string;\n  chart?: string;\n}\n\n/**\n * Responsive Child props\n * {@docCategory ResponsiveContainer}\n */\nexport interface ResponsiveChildProps {\n  width?: number;\n  height?: number;\n  shouldResize?: number;\n  styles?: ResponsiveChildStyles;\n}\n\n/**\n * Responsive Container props\n * {@docCategory ResponsiveContainer}\n */\nexport interface ResponsiveContainerProps {\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<ResponsiveChildProps>;\n}\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/ResponsiveContainer/useResponsiveChildStyles.styles.js

@@ -0,0 +1,29 @@
+import { __styles, mergeClasses } from '@griffel/react';
+export const responsiveChildClassNames = {
+  root: 'fui-charts-resp-child__root',
+  chartWrapper: 'fui-charts-resp-child__chartWrapper',
+  chart: 'fui-charts-resp-child__chart'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    a9b677: "fly5x3f",
+    Bqenvij: "f1l02sjl"
+  },
+  chartWrapper: {
+    a9b677: "fly5x3f"
+  },
+  chart: {
+    a9b677: "fly5x3f"
+  }
+}, {
+  d: [".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}"]
+});
+export const useResponsiveChildStyles = () => {
+  const baseStyles = useStyles();
+  return {
+    root: mergeClasses(responsiveChildClassNames.root, baseStyles.root),
+    chartWrapper: mergeClasses(responsiveChildClassNames.chartWrapper, baseStyles.chartWrapper),
+    chart: mergeClasses(responsiveChildClassNames.chart, baseStyles.chart)
+  };
+};
+//# sourceMappingURL=useResponsiveChildStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","responsiveChildClassNames","root","chartWrapper","chart","useStyles","a9b677","Bqenvij","d","useResponsiveChildStyles","baseStyles"],"sources":["useResponsiveChildStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const responsiveChildClassNames = {\n    root: 'fui-charts-resp-child__root',\n    chartWrapper: 'fui-charts-resp-child__chartWrapper',\n    chart: 'fui-charts-resp-child__chart'\n};\nconst useStyles = makeStyles({\n    root: {\n        width: '100%',\n        height: '100%'\n    },\n    chartWrapper: {\n        width: '100%'\n    },\n    chart: {\n        // This overrides the pixel width of svg allowing it to resize properly within a flexbox or grid layout.\n        // Note: height is not set to 100% because that causes the charts to resize vertically in an infinite loop.\n        width: '100%'\n    }\n});\nexport const useResponsiveChildStyles = ()=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(responsiveChildClassNames.root, baseStyles.root),\n        chartWrapper: mergeClasses(responsiveChildClassNames.chartWrapper, baseStyles.chartWrapper),\n        chart: mergeClasses(responsiveChildClassNames.chart, baseStyles.chart)\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,6BAA6B;EACnCC,YAAY,EAAE,qCAAqC;EACnDC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAG,IAAA;IAAAI,MAAA;IAAAC,OAAA;EAAA;EAAAJ,YAAA;IAAAG,MAAA;EAAA;EAAAF,KAAA;IAAAE,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAajB,CAAC;AACF,OAAO,MAAMC,wBAAwB,GAAGA,CAAA,KAAI;EACxC,MAAMC,UAAU,GAAGL,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHH,IAAI,EAAEF,YAAY,CAACC,yBAAyB,CAACC,IAAI,EAAEQ,UAAU,CAACR,IAAI,CAAC;IACnEC,YAAY,EAAEH,YAAY,CAACC,yBAAyB,CAACE,YAAY,EAAEO,UAAU,CAACP,YAAY,CAAC;IAC3FC,KAAK,EAAEJ,YAAY,CAACC,yBAAyB,CAACG,KAAK,EAAEM,UAAU,CAACN,KAAK;EACzE,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/SankeyChart/SankeyChart.js

@@ -286,22 +286,20 @@ function linkValue(originalLinks, link) {
 // This is exported for unit tests.
 export function preRenderLayout(margins, containerWidth, containerHeight, isRtl) {
     const { left, right, top, bottom } = margins;
-    const width = containerWidth - right;
-    const height = containerHeight - bottom > 0 ? containerHeight - bottom : 0;
     const sankey = d3Sankey().nodeWidth(NODE_WIDTH).extent([
         [
             left,
             top
         ],
         [
-            width - 1,
-            height - 6
+            containerWidth - right,
+            containerHeight - bottom
         ]
     ]).nodeAlign(isRtl ? sankeyRight : sankeyJustify);
     return {
         sankey,
-        height,
-        width
+        height: containerHeight,
+        width: containerWidth
     };
 }
 const elipsis = '...';
@@ -428,6 +426,7 @@ function nodeTextColor(state, singleNode) {
     return !(!state.selectedState || state.selectedNodes.has(singleNode.index) && state.selectedNode || !state.selectedNode) ? DEFAULT_TEXT_COLOR : NON_SELECTED_TEXT_COLOR;
 }
 export const SankeyChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    var _props_reflowProps;
     const classes = useSankeyChartStyles(props);
     const chartContainer = React.useRef(null);
     const _reqID = React.useRef();
@@ -474,7 +473,8 @@ export const SankeyChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
             // NOTE: Calls to this method trigger a re-render.
             const container = props.parentRef ? props.parentRef : chartContainer.current;
             if (container) {
-                const currentContainerWidth = props.enableReflow ? Math.max(container.getBoundingClientRect().width, _calculateChartMinWidth()) : container.getBoundingClientRect().width;
+                var _props_reflowProps;
+                const currentContainerWidth = ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? Math.max(container.getBoundingClientRect().width, _calculateChartMinWidth()) : container.getBoundingClientRect().width;
                 const currentContainerHeight = container.getBoundingClientRect().height;
                 setContainerWidth(currentContainerWidth);
                 setContainerHeight(currentContainerHeight);
@@ -482,7 +482,7 @@ export const SankeyChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
         });
     }, [
         _window,
-        props.enableReflow,
+        (_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode,
         props.parentRef
     ]);
     React.useEffect(()=>{
@@ -591,7 +591,7 @@ export const SankeyChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
         const nodeValues = valuesOfNodes(transformed.nodes);
         const linkValues = valuesOfLinks(transformed.links);
         adjustOnePercentHeightNodes(nodesInColumn, nodeValues, linkValues);
-        adjustPadding(sankey, height - 6, nodesInColumn);
+        adjustPadding(sankey, containerHeight - _margins.current.top - _margins.current.bottom, nodesInColumn);
         // `sankey` is called a second time, probably to re-layout the nodes with the one-percent adjusted weights.
         // NOTE: The second call to `sankey` is required to allow links to be hoverable.
         // Without the second call, the links are not hoverable.
@@ -734,32 +734,28 @@ export const SankeyChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
     const _onHover = (singleNode, mouseEvent)=>{
         mouseEvent.persist();
         _onCloseCallout();
-        if (!selectedState) {
-            const _selectedLinks = getSelectedLinks(singleNode);
-            const _selectedNodes = getSelectedNodes(_selectedLinks);
-            _selectedNodes.push(singleNode);
-            setSelectedState(true);
-            setSelectedNodes(new Set(Array.from(_selectedNodes).map((node)=>node.index)));
-            setSelectedLinks(new Set(Array.from(_selectedLinks).map((link)=>link.index)));
-            setSelectedNode(singleNode);
-            updatePosition(mouseEvent.clientX, mouseEvent.clientY);
-            setCalloutVisible(singleNode.y1 - singleNode.y0 < MIN_HEIGHT_FOR_TYPE);
-            setColor(singleNode.color);
-            setXCalloutValue(singleNode.name);
-            setYCalloutValue(_formatNumber(singleNode.actualValue));
-        }
+        const _selectedLinks = getSelectedLinks(singleNode);
+        const _selectedNodes = getSelectedNodes(_selectedLinks);
+        _selectedNodes.push(singleNode);
+        setSelectedState(true);
+        setSelectedNodes(new Set(Array.from(_selectedNodes).map((node)=>node.index)));
+        setSelectedLinks(new Set(Array.from(_selectedLinks).map((link)=>link.index)));
+        setSelectedNode(singleNode);
+        updatePosition(mouseEvent.clientX, mouseEvent.clientY);
+        setCalloutVisible(singleNode.y1 - singleNode.y0 < MIN_HEIGHT_FOR_TYPE);
+        setColor(singleNode.color);
+        setXCalloutValue(singleNode.name);
+        setYCalloutValue(_formatNumber(singleNode.actualValue));
     };
     const _onStreamHover = (mouseEvent, singleLink, from)=>{
         mouseEvent.persist();
         _onCloseCallout();
-        if (!selectedState) {
-            const { selectedLinks: _selectedLinks, selectedNodes: _selectedNodes } = getSelectedLinksforStreamHover(singleLink);
-            setSelectedState(true);
-            setSelectedNodes(new Set(Array.from(_selectedNodes).map((node)=>node.index)));
-            setSelectedLinks(new Set(Array.from(_selectedLinks).map((link)=>link.index)));
-            updatePosition(mouseEvent.clientX, mouseEvent.clientY);
-            _linkCalloutAttributes(singleLink, from);
-        }
+        const { selectedLinks: _selectedLinks, selectedNodes: _selectedNodes } = getSelectedLinksforStreamHover(singleLink);
+        setSelectedState(true);
+        setSelectedNodes(new Set(Array.from(_selectedNodes).map((node)=>node.index)));
+        setSelectedLinks(new Set(Array.from(_selectedLinks).map((link)=>link.index)));
+        updatePosition(mouseEvent.clientX, mouseEvent.clientY);
+        _linkCalloutAttributes(singleLink, from);
     };
     const _onStreamLeave = (singleLink)=>{
         if (selectedState) {
@@ -984,7 +980,8 @@ export const SankeyChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
         }, /*#__PURE__*/ React.createElement("svg", {
             width: width,
             height: height,
-            id: _chartId
+            id: _chartId,
+            className: classes.chart
         }, nodeLinkDomOrderArray.map((item)=>{
             if (item.type === 'node') {
                 return /*#__PURE__*/ React.createElement("g", {
@@ -1018,6 +1015,3 @@ export const SankeyChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
     });
 });
 SankeyChart.displayName = 'SankeyChart';
-SankeyChart.defaultProps = {
-    enableReflow: true
-};