@fluentui/react-charting 5.11.0 → 5.12.2

package/lib-commonjs/components/TreeChart/index.d.ts

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

package/lib-commonjs/components/TreeChart/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./TreeChart"), exports);
+tslib_1.__exportStar(require("./TreeChart.types"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/components/TreeChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/TreeChart/index.ts"],"names":[],"mappings":";;;AAAA,sDAA4B;AAC5B,4DAAkC","sourcesContent":["export * from './TreeChart';\nexport * from './TreeChart.types';\n"]}

package/lib-commonjs/index.d.ts

@@ -13,5 +13,6 @@ export * from './types/index';
 export * from './utilities/ChartHoverCard/index';
 export * from './HeatMapChart';
 export * from './SankeyChart';
+export * from './TreeChart';
 export * from './Sparkline';
 import './version';

package/lib-commonjs/index.js

@@ -16,6 +16,7 @@ tslib_1.__exportStar(require("./types/index"), exports);
 tslib_1.__exportStar(require("./utilities/ChartHoverCard/index"), exports);
 tslib_1.__exportStar(require("./HeatMapChart"), exports);
 tslib_1.__exportStar(require("./SankeyChart"), exports);
+tslib_1.__exportStar(require("./TreeChart"), exports);
 tslib_1.__exportStar(require("./Sparkline"), exports);
 require("./version");
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;AAAA,+DAAqC;AACrC,uDAA6B;AAC7B,oDAA0B;AAC1B,sDAA4B;AAC5B,sDAA4B;AAC5B,qDAA2B;AAC3B,4DAAkC;AAClC,6DAAmC;AACnC,oEAA0C;AAC1C,oEAA0C;AAC1C,2DAAiC;AACjC,wDAA8B;AAC9B,2EAAiD;AACjD,yDAA+B;AAC/B,wDAA8B;AAC9B,sDAA4B;AAE5B,qBAAmB","sourcesContent":["export * from './HorizontalBarChart';\nexport * from './DonutChart';\nexport * from './Legends';\nexport * from './LineChart';\nexport * from './AreaChart';\nexport * from './PieChart';\nexport * from './StackedBarChart';\nexport * from './VerticalBarChart';\nexport * from './VerticalStackedBarChart';\nexport * from './GroupedVerticalBarChart';\nexport * from './CartesianChart';\nexport * from './types/index';\nexport * from './utilities/ChartHoverCard/index';\nexport * from './HeatMapChart';\nexport * from './SankeyChart';\nexport * from './Sparkline';\n\nimport './version';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;AAAA,+DAAqC;AACrC,uDAA6B;AAC7B,oDAA0B;AAC1B,sDAA4B;AAC5B,sDAA4B;AAC5B,qDAA2B;AAC3B,4DAAkC;AAClC,6DAAmC;AACnC,oEAA0C;AAC1C,oEAA0C;AAC1C,2DAAiC;AACjC,wDAA8B;AAC9B,2EAAiD;AACjD,yDAA+B;AAC/B,wDAA8B;AAC9B,sDAA4B;AAC5B,sDAA4B;AAE5B,qBAAmB","sourcesContent":["export * from './HorizontalBarChart';\nexport * from './DonutChart';\nexport * from './Legends';\nexport * from './LineChart';\nexport * from './AreaChart';\nexport * from './PieChart';\nexport * from './StackedBarChart';\nexport * from './VerticalBarChart';\nexport * from './VerticalStackedBarChart';\nexport * from './GroupedVerticalBarChart';\nexport * from './CartesianChart';\nexport * from './types/index';\nexport * from './utilities/ChartHoverCard/index';\nexport * from './HeatMapChart';\nexport * from './SankeyChart';\nexport * from './TreeChart';\nexport * from './Sparkline';\n\nimport './version';\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");
-set_version_1.setVersion('@fluentui/react-charting', '5.11.0');
+set_version_1.setVersion('@fluentui/react-charting', '5.12.2');
 //# 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,wBAAU,CAAC,0BAA0B,EAAE,QAAQ,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.11.0');"]}
+{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,qDAAmD;AACnD,wBAAU,CAAC,0BAA0B,EAAE,QAAQ,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.12.2');"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.11.0",
+  "version": "5.12.2",
   "description": "Experimental React charting components for building experiences for Microsoft 365.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,17 +28,18 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react": "^8.79.0",
+    "@fluentui/react": "^8.81.0",
     "@types/react-addons-test-utils": "0.14.18",
     "@fluentui/scripts": "^1.0.0",
     "@fluentui/jest-serializer-merge-styles": "^8.0.19"
   },
   "dependencies": {
-    "@fluentui/react-focus": "^8.7.2",
+    "@fluentui/react-focus": "^8.7.3",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/d3-array": "1.2.1",
     "@types/d3-axis": "1.0.10",
     "@types/d3-format": "^1.3.1",
+    "@types/d3-hierarchy": "2.0.0",
     "@types/d3-sankey": "^0.11.0",
     "@types/d3-scale": "2.0.0",
     "@types/d3-selection": "1.4.1",
@@ -48,6 +49,7 @@
     "d3-array": "1.2.1",
     "d3-axis": "1.0.8",
     "d3-format": "^1.4.4",
+    "d3-hierarchy": "2.0.0",
     "d3-sankey": "^0.12.3",
     "d3-scale": "2.0.0",
     "d3-selection": "1.3.0",
@@ -56,7 +58,7 @@
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@fluentui/react": "^8.79.0",
+    "@fluentui/react": "^8.81.0",
     "@types/react": ">=16.8.0 <18.0.0",
     "@types/react-dom": ">=16.8.0 <18.0.0",
     "react": ">=16.8.0 <18.0.0",

package/src/components/TreeChart/TreeChart.types.ts

@@ -0,0 +1,186 @@
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
+import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+
+export interface ITreeChartDataPoint {
+  /**
+   * Node main text
+   */
+  name: string;
+  /**
+   * Subtext value (optional)
+   */
+  subname?: string | undefined;
+  /**
+   * Metric text value (optional)
+   */
+  metric?: string | undefined;
+  /**
+   * Color of the rectangular box
+   */
+  fill: string;
+  /**
+   * Recursive datastructure for child node object
+   */
+  children?: Array<ITreeChartDataPoint>;
+}
+
+export enum NodesComposition {
+  /**
+   * NodeComposition enum val for long: number = 1
+   */
+  long = 1,
+  /**
+   * NodeComposition enum val for compact: number = 0
+   */
+  compact = 0,
+}
+
+export enum TreeTraverse {
+  /**
+   * TreeTraverse enum val for preOrder: number = 1
+   */
+  preOrder = 1,
+  /**
+   * TreeTraverse enum val for levelOrder: number = 0
+   */
+  levelOrder = 0,
+}
+
+export interface ITreeProps {
+  /**
+   * An object of chart data points for the Tree chart
+   */
+  treeData: ITreeChartDataPoint;
+  /**
+   * compostion for three layer chart, long: composition = 1; compact: composition = 0
+   */
+  composition?: NodesComposition.long | NodesComposition.compact | undefined;
+  /**
+   * Node Width Size for the Tree Layout
+   * * @default 75
+   */
+  layoutWidth?: number | undefined;
+  /**
+   * traversal order for tree chart, preOrder = 1, levelOrder = 0
+   */
+  treeTraversal?: TreeTraverse.preOrder | TreeTraverse.levelOrder;
+  /**
+   * Width of SVG tree chart
+   * * @default 1500
+   */
+  width?: number;
+  /**
+   * Height of SVG tree chart
+   * * @default 700
+   */
+  height?: number;
+  /**
+   * Margin for the SVG tree chart
+   */
+  marign?: { left: number; right: number; top: number; bottom: number };
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules.
+   */
+  styles?: IStyleFunctionOrObject<ITreeStyleProps, ITreeStyles>;
+  /**
+   * Additional CSS class(es) to apply to the TreeChart.
+   */
+  className?: string;
+  /**
+   * Theme (provided through customization.)
+   */
+  theme?: ITheme;
+}
+export interface ITreeState {
+  /**
+   * Width of SVG tree chart
+   * * @default 1500
+   */
+  _width: number;
+  /**
+   * Height of SVG tree chart
+   * * @default 700
+   */
+  _height: number;
+  /**
+   * Layout Width of SVG tree chart
+   * * @default 75
+   */
+  _layoutWidth?: number;
+}
+
+export interface ITreeDataStructure {
+  /**
+   * Node id of each node
+   */
+  id: number;
+  /**
+   * Children node object
+   */
+  children: unknown;
+  /**
+   * Node main text
+   */
+  dataName: string;
+  /**
+   * Subtext value (optional)
+   */
+  subName?: string | undefined;
+  /**
+   * Metric text value (optional)
+   */
+  metricName?: string | undefined;
+  /**
+   * Color of the rectangular box
+   */
+  fill: string;
+  /**
+   * X-coordindate of node
+   */
+  x: number;
+  /**
+   * Y-coordindate of node
+   */
+  y: number;
+  /**
+   * Node id of each node's parent
+   */
+  parentID: number;
+}
+
+export interface ITreeStyleProps {
+  /**
+   * Theme (provided through customization.)
+   */
+  theme: ITheme;
+  /**
+   * Additional CSS class(es) to apply to the TreeChart.
+   */
+  className?: string;
+}
+export interface ITreeStyles {
+  /**
+   *  Style for the root element.
+   */
+  root: IStyle;
+  /**
+   *  Style for the Link/Path element.
+   */
+  link: IStyle;
+  /**
+   *  Style for rectangular Node
+   */
+  rectNode: IStyle;
+  /**
+   *  Style for the node main Text
+   */
+  rectText: IStyle;
+  /**
+   *  Style for the node sub Text
+   */
+  rectSubText: IStyle;
+  /**
+   *  Style for the node metric value Text
+   */
+  rectMetricText: IStyle;
+}