@fluentui/react-charting 5.21.18 → 5.21.20

package/lib-commonjs/components/SankeyChart/SankeyChart.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SankeyChart.styles.js","sourceRoot":"../src/","sources":["components/SankeyChart/SankeyChart.styles.ts"],"names":[],"mappings":";;;;AACA,uDAAwE;AAEjE,IAAM,SAAS,GAAG,UAAC,KAA6B;;IAC7C,IAAA,SAAS,GAAuB,KAAK,UAA5B,EAAE,KAAK,GAAgB,KAAK,MAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAW;IACtC,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;IAC1B,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,OAAO,EAAE,MAAM;gBACf,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,aAAa,EAAE,QAAQ;gBACvB,QAAQ,EAAE,QAAQ;aACnB;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;YACnD,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS;YAC7D,WAAW,EAAE,CAAC;YACd,SAAS;gBACP,GAAC,mCAAyB,IAAG;oBAC3B,IAAI,EAAE,SAAS;iBAChB;mBACF;SACF;QACD,KAAK,EAAE;YACL,IAAI,EAAE,SAAS;YACf,SAAS;gBACP,GAAC,mCAAyB,IAAG;oBAC3B,IAAI,EAAE,SAAS;iBAChB;mBACF;SACF;QACD,OAAO,wCACF,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,KAC5B,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,CAAC,KAAM,CAAC,cAAc,CAAC,cAAc,EACtD,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,GACtB;QACD,iBAAiB,EAAE;YACjB,SAAS,EAAE;gBACT,IAAI,EAAE;oBACJ,SAAS;wBACP,GAAC,mCAAyB,IAAG;4BAC3B,IAAI,EAAE,oBAAoB;yBAC3B;2BACF;iBACF;aACF;YAED,SAAS,EAAE,KAAK;YAChB,UAAU,EAAE,KAAK;YACjB,YAAY,EAAE,KAAK;YACnB,WAAW,EAAE,KAAK;SACnB;QACD,kBAAkB,EAAE;YAClB,SAAS,EAAE,OAAO,CAAC,UAAU;SAC9B;KACF,CAAC;AACJ,CAAC,CAAC;AAjEW,QAAA,SAAS,aAiEpB","sourcesContent":["import { ISankeyChartStyleProps, ISankeyChartStyles } from './SankeyChart.types';\nimport { HighContrastSelectorBlack } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: ISankeyChartStyleProps): ISankeyChartStyles => {\n  const { className, theme, pathColor } = props;\n  const { effects } = theme;\n  return {\n    root: [\n      theme.fonts.medium,\n      {\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n        flexDirection: 'column',\n        overflow: 'hidden',\n      },\n      className,\n    ],\n    links: {\n      stroke: pathColor ? pathColor : theme.palette.black,\n      fill: theme ? theme.semanticColors.bodyBackground : '#F5F5F5',\n      strokeWidth: 3,\n      selectors: {\n        [HighContrastSelectorBlack]: {\n          fill: '#000000',\n        },\n      },\n    },\n    nodes: {\n      fill: '#F5F5F5',\n      selectors: {\n        [HighContrastSelectorBlack]: {\n          fill: '#000000',\n        },\n      },\n    },\n    toolTip: {\n      ...props.theme!.fonts.medium,\n      display: 'flex',\n      flexDirection: 'column',\n      padding: '8px',\n      position: 'absolute',\n      textAlign: 'center',\n      top: '0px',\n      background: props.theme!.semanticColors.bodyBackground,\n      borderRadius: '2px',\n      pointerEvents: 'none',\n    },\n    nodeTextContainer: {\n      selectors: {\n        text: {\n          selectors: {\n            [HighContrastSelectorBlack]: {\n              fill: 'rgb(179, 179, 179)',\n            },\n          },\n        },\n      },\n\n      marginTop: '4px',\n      marginLeft: '8px',\n      marginBottom: '4px',\n      marginRight: '8px',\n    },\n    calloutContentRoot: {\n      boxShadow: effects.elevation4,\n    },\n  };\n};\n"]}
+{"version":3,"file":"SankeyChart.styles.js","sourceRoot":"../src/","sources":["components/SankeyChart/SankeyChart.styles.ts"],"names":[],"mappings":";;;;AACA,uDAAwE;AAEjE,IAAM,SAAS,GAAG,UAAC,KAA6B;;IAC7C,IAAA,SAAS,GAAuB,KAAK,UAA5B,EAAE,KAAK,GAAgB,KAAK,MAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAW;IACtC,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;IAC1B,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,OAAO,EAAE,MAAM;gBACf,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,aAAa,EAAE,QAAQ;gBACvB,QAAQ,EAAE,QAAQ;aACnB;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;YACnD,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS;YAC7D,WAAW,EAAE,CAAC;YACd,SAAS;gBACP,GAAC,mCAAyB,IAAG;oBAC3B,IAAI,EAAE,SAAS;iBAChB;mBACF;SACF;QACD,KAAK,EAAE;YACL,IAAI,EAAE,SAAS;YACf,SAAS;gBACP,GAAC,mCAAyB,IAAG;oBAC3B,IAAI,EAAE,SAAS;iBAChB;mBACF;SACF;QACD,OAAO,wCACF,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,KAC5B,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,CAAC,KAAM,CAAC,cAAc,CAAC,cAAc,EACtD,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,GACtB;QACD,iBAAiB,EAAE;YACjB,SAAS,EAAE;gBACT,IAAI,EAAE;oBACJ,SAAS;wBACP,GAAC,mCAAyB,IAAG;4BAC3B,IAAI,EAAE,oBAAoB;yBAC3B;2BACF;iBACF;aACF;YAED,SAAS,EAAE,KAAK;YAChB,UAAU,EAAE,KAAK;YACjB,YAAY,EAAE,KAAK;YACnB,WAAW,EAAE,KAAK;SACnB;QACD,kBAAkB,EAAE;YAClB,SAAS,EAAE,OAAO,CAAC,UAAU;SAC9B;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,MAAM;SACjB;KACF,CAAC;AACJ,CAAC,CAAC;AApEW,QAAA,SAAS,aAoEpB","sourcesContent":["import { ISankeyChartStyleProps, ISankeyChartStyles } from './SankeyChart.types';\nimport { HighContrastSelectorBlack } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: ISankeyChartStyleProps): ISankeyChartStyles => {\n  const { className, theme, pathColor } = props;\n  const { effects } = theme;\n  return {\n    root: [\n      theme.fonts.medium,\n      {\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n        flexDirection: 'column',\n        overflow: 'hidden',\n      },\n      className,\n    ],\n    links: {\n      stroke: pathColor ? pathColor : theme.palette.black,\n      fill: theme ? theme.semanticColors.bodyBackground : '#F5F5F5',\n      strokeWidth: 3,\n      selectors: {\n        [HighContrastSelectorBlack]: {\n          fill: '#000000',\n        },\n      },\n    },\n    nodes: {\n      fill: '#F5F5F5',\n      selectors: {\n        [HighContrastSelectorBlack]: {\n          fill: '#000000',\n        },\n      },\n    },\n    toolTip: {\n      ...props.theme!.fonts.medium,\n      display: 'flex',\n      flexDirection: 'column',\n      padding: '8px',\n      position: 'absolute',\n      textAlign: 'center',\n      top: '0px',\n      background: props.theme!.semanticColors.bodyBackground,\n      borderRadius: '2px',\n      pointerEvents: 'none',\n    },\n    nodeTextContainer: {\n      selectors: {\n        text: {\n          selectors: {\n            [HighContrastSelectorBlack]: {\n              fill: 'rgb(179, 179, 179)',\n            },\n          },\n        },\n      },\n\n      marginTop: '4px',\n      marginLeft: '8px',\n      marginBottom: '4px',\n      marginRight: '8px',\n    },\n    calloutContentRoot: {\n      boxShadow: effects.elevation4,\n    },\n    chartWrapper: {\n      overflow: 'auto',\n    },\n  };\n};\n"]}

package/lib-commonjs/components/SankeyChart/SankeyChart.types.d.ts

@@ -63,6 +63,11 @@ export interface ISankeyChartProps {
      * Format node and link values.
      */
     formatNumberOptions?: Intl.NumberFormatOptions;
+    /**
+     * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows
+     * @default true
+     */
+    enableReflow?: boolean;
 }
 /**
  * Sankey Chart style properties
@@ -104,6 +109,10 @@ export interface ISankeyChartStyles {
      *  Style for the tooltip ,when user hover over the truncated node detail.
      */
     calloutContentRoot?: IStyle;
+    /**
+     * Styles for the chart wrapper div
+     */
+    chartWrapper?: IStyle;
 }
 /**
  * Set of strings which are used when rendering the chart.

package/lib-commonjs/components/SankeyChart/SankeyChart.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"SankeyChart.types.js","sourceRoot":"../src/","sources":["components/SankeyChart/SankeyChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IChartProps } from '../../types/IDataPoint';\n\nexport type { IChartProps, IDataPoint, ISankeyChartData } from '../../types/IDataPoint';\n\n/**\n * Sankey Chart properties\n * {@docCategory SankeyChart}\n */\nexport interface ISankeyChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: IChartProps;\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   * Additional CSS class(es) to apply to the SankeyChart.\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<ISankeyChartStyleProps, ISankeyChartStyles>;\n\n  /**\n   * this prop takes its parent as a HTML element to define the width and height of the Sankey chart\n   */\n  parentRef?: HTMLElement | null;\n\n  /**\n   * should chart resize when parent resize.\n   */\n  shouldResize?: number;\n\n  /**\n   * Color for path\n   */\n  pathColor?: string;\n\n  /**\n   * Colors for nodes\n   */\n  colorsForNodes?: string[];\n\n  /**\n   * Colors for nodes border\n   */\n  borderColorsForNodes?: string[];\n\n  /**\n   * Localized strings to show in the UX.\n   */\n  strings?: ISankeyChartStrings;\n\n  /**\n   * Localized strings to use for the chart's accessibility features.\n   */\n  accessibility?: ISankeyChartAccessibilityProps;\n\n  /**\n   * Format node and link values.\n   */\n  formatNumberOptions?: Intl.NumberFormatOptions;\n}\n\n/**\n * Sankey Chart style properties\n * {@docCategory SankeyChart}\n */\nexport interface ISankeyChartStyleProps {\n  theme: ITheme;\n  className?: string;\n  width: number;\n  height: number;\n  pathColor?: string;\n}\n\n/**\n * Sankey Chart styles\n * {@docCategory SankeyChart}\n */\nexport interface ISankeyChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   *  Style for the nodes.\n   */\n  nodes?: IStyle;\n\n  /**\n   *  Style for the links.\n   */\n  links?: IStyle;\n\n  /**\n   *  Style for the text inside node.\n   */\n  nodeTextContainer?: IStyle;\n\n  /**\n   *  Style for the tooltip ,when user hover over the truncated node detail.\n   */\n  toolTip?: IStyle;\n\n  /**\n   *  Style for the tooltip ,when user hover over the truncated node detail.\n   */\n\n  calloutContentRoot?: IStyle;\n}\n\n/**\n * Set of strings which are used when rendering the chart.\n */\nexport interface ISankeyChartStrings {\n  /**\n   * A value similar to \"from \\{0\\}\" where \\{0\\} is the name of the source node for a link.\n   * This is shown in the `ChartHoverCard` when the user hovers the mouse over a link.\n   */\n  linkFrom?: string;\n}\n\n/**\n * Set of strings which are used when rendering accessibility information within the chart.\n */\nexport interface ISankeyChartAccessibilityProps {\n  /**\n   * Aria label for when the chart is empty.\n   */\n  emptyAriaLabel?: string;\n  /**\n   * A value similar to \"node \\{0\\} with weight \\{1\\}\".\n   * \\{0\\} is the name of the node.\n   * \\{1\\} is the weight of the node (as computed by the sankey layout engine via the links to or from this node).\n   */\n  nodeAriaLabel?: string;\n  /**\n   * A value similar to \"link from \\{0\\} to $\\{1\\} with weight $\\{2\\}\".\n   * \\{0\\} is the source node, \\{1\\} is the target node, and \\{2\\} is the value of the link.\n   */\n  linkAriaLabel?: string;\n}\n"]}
+{"version":3,"file":"SankeyChart.types.js","sourceRoot":"../src/","sources":["components/SankeyChart/SankeyChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IChartProps } from '../../types/IDataPoint';\n\nexport type { IChartProps, IDataPoint, ISankeyChartData } from '../../types/IDataPoint';\n\n/**\n * Sankey Chart properties\n * {@docCategory SankeyChart}\n */\nexport interface ISankeyChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: IChartProps;\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   * Additional CSS class(es) to apply to the SankeyChart.\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<ISankeyChartStyleProps, ISankeyChartStyles>;\n\n  /**\n   * this prop takes its parent as a HTML element to define the width and height of the Sankey chart\n   */\n  parentRef?: HTMLElement | null;\n\n  /**\n   * should chart resize when parent resize.\n   */\n  shouldResize?: number;\n\n  /**\n   * Color for path\n   */\n  pathColor?: string;\n\n  /**\n   * Colors for nodes\n   */\n  colorsForNodes?: string[];\n\n  /**\n   * Colors for nodes border\n   */\n  borderColorsForNodes?: string[];\n\n  /**\n   * Localized strings to show in the UX.\n   */\n  strings?: ISankeyChartStrings;\n\n  /**\n   * Localized strings to use for the chart's accessibility features.\n   */\n  accessibility?: ISankeyChartAccessibilityProps;\n\n  /**\n   * Format node and link values.\n   */\n  formatNumberOptions?: Intl.NumberFormatOptions;\n\n  /**\n   * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows\n   * @default true\n   */\n  enableReflow?: boolean;\n}\n\n/**\n * Sankey Chart style properties\n * {@docCategory SankeyChart}\n */\nexport interface ISankeyChartStyleProps {\n  theme: ITheme;\n  className?: string;\n  width: number;\n  height: number;\n  pathColor?: string;\n}\n\n/**\n * Sankey Chart styles\n * {@docCategory SankeyChart}\n */\nexport interface ISankeyChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   *  Style for the nodes.\n   */\n  nodes?: IStyle;\n\n  /**\n   *  Style for the links.\n   */\n  links?: IStyle;\n\n  /**\n   *  Style for the text inside node.\n   */\n  nodeTextContainer?: IStyle;\n\n  /**\n   *  Style for the tooltip ,when user hover over the truncated node detail.\n   */\n  toolTip?: IStyle;\n\n  /**\n   *  Style for the tooltip ,when user hover over the truncated node detail.\n   */\n\n  calloutContentRoot?: IStyle;\n\n  /**\n   * Styles for the chart wrapper div\n   */\n  chartWrapper?: IStyle;\n}\n\n/**\n * Set of strings which are used when rendering the chart.\n */\nexport interface ISankeyChartStrings {\n  /**\n   * A value similar to \"from \\{0\\}\" where \\{0\\} is the name of the source node for a link.\n   * This is shown in the `ChartHoverCard` when the user hovers the mouse over a link.\n   */\n  linkFrom?: string;\n}\n\n/**\n * Set of strings which are used when rendering accessibility information within the chart.\n */\nexport interface ISankeyChartAccessibilityProps {\n  /**\n   * Aria label for when the chart is empty.\n   */\n  emptyAriaLabel?: string;\n  /**\n   * A value similar to \"node \\{0\\} with weight \\{1\\}\".\n   * \\{0\\} is the name of the node.\n   * \\{1\\} is the weight of the node (as computed by the sankey layout engine via the links to or from this node).\n   */\n  nodeAriaLabel?: string;\n  /**\n   * A value similar to \"link from \\{0\\} to $\\{1\\} with weight $\\{2\\}\".\n   * \\{0\\} is the source node, \\{1\\} is the target node, and \\{2\\} is the value of the link.\n   */\n  linkAriaLabel?: string;\n}\n"]}

package/lib-commonjs/version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = require("@fluentui/set-version");
-(0, set_version_1.setVersion)('@fluentui/react-charting', '5.21.18');
+(0, set_version_1.setVersion)('@fluentui/react-charting', '5.21.20');
 //# sourceMappingURL=version.js.map

package/lib-commonjs/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,qDAAmD;AACnD,IAAA,wBAAU,EAAC,0BAA0B,EAAE,SAAS,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.21.18');"]}
+{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,qDAAmD;AACnD,IAAA,wBAAU,EAAC,0BAA0B,EAAE,SAAS,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.21.20');"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.21.18",
+  "version": "5.21.20",
   "description": "React web charting controls for Microsoft fluentui system.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -40,8 +40,8 @@
     "jest-canvas-mock": "2.4.0"
   },
   "dependencies": {
-    "@fluentui/react-focus": "^8.9.7",
-    "@fluentui/theme-samples": "^8.7.157",
+    "@fluentui/react-focus": "^8.9.8",
+    "@fluentui/theme-samples": "^8.7.158",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/d3-array": "^2.0.0",
     "@types/d3-axis": "^2.0.0",
@@ -53,7 +53,7 @@
     "@types/d3-shape": "^3.0.0",
     "@types/d3-time-format": "^3.0.0",
     "@types/d3-time": "^2.0.0",
-    "@fluentui/set-version": "^8.2.22",
+    "@fluentui/set-version": "^8.2.23",
     "d3-array": "^2.0.0",
     "d3-axis": "^2.0.0",
     "d3-format": "^2.0.0",
@@ -67,7 +67,7 @@
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@fluentui/react": "^8.118.8",
+    "@fluentui/react": "^8.118.9",
     "@types/react": ">=16.8.0 <19.0.0",
     "@types/react-dom": ">=16.8.0 <19.0.0",
     "react": ">=16.8.0 <19.0.0",

package/src/components/SankeyChart/SankeyChart.types.ts

@@ -78,6 +78,12 @@ export interface ISankeyChartProps {
    * Format node and link values.
    */
   formatNumberOptions?: Intl.NumberFormatOptions;
+
+  /**
+   * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows
+   * @default true
+   */
+  enableReflow?: boolean;
 }
 
 /**
@@ -127,6 +133,11 @@ export interface ISankeyChartStyles {
    */
 
   calloutContentRoot?: IStyle;
+
+  /**
+   * Styles for the chart wrapper div
+   */
+  chartWrapper?: IStyle;
 }
 
 /**