@fluentui/react-charting 5.11.0 → 5.12.0

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

@@ -0,0 +1,88 @@
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
+import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+export interface ITreeChartDataPoint {
+    name: string;
+    subname: string;
+    metric?: string | undefined;
+    fill: string;
+    children?: Array<ITreeChartDataPoint>;
+}
+export declare enum NodesComposition {
+    long = 1,
+    compact = 0
+}
+export declare enum TreeTraverse {
+    preOrder = 1,
+    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;
+    /**
+     * traversal order for tree chart, preOrder = 1, levelOrder = 0
+     */
+    treeTraversal?: TreeTraverse.preOrder | TreeTraverse.levelOrder;
+    /**
+     * Width of SVG tree chart
+     * * @default 1200
+     */
+    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: number;
+    _height: number;
+}
+export interface ITreeDataStructure {
+    id: number;
+    children: unknown;
+    dataName: string;
+    subName: string;
+    metricName?: string | undefined;
+    fill: string;
+    x: number;
+    y: number;
+    parentID: number;
+}
+export interface ITreeStyleProps {
+    theme: ITheme;
+    className?: string;
+}
+export interface ITreeStyles {
+    link: IStyle;
+    rectNode: IStyle;
+    rectText: IStyle;
+    rectSubText: IStyle;
+    rectMetricText: IStyle;
+}

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeTraverse = exports.NodesComposition = void 0;
+var NodesComposition;
+(function (NodesComposition) {
+    NodesComposition[NodesComposition["long"] = 1] = "long";
+    NodesComposition[NodesComposition["compact"] = 0] = "compact";
+})(NodesComposition = exports.NodesComposition || (exports.NodesComposition = {}));
+var TreeTraverse;
+(function (TreeTraverse) {
+    TreeTraverse[TreeTraverse["preOrder"] = 1] = "preOrder";
+    TreeTraverse[TreeTraverse["levelOrder"] = 0] = "levelOrder";
+})(TreeTraverse = exports.TreeTraverse || (exports.TreeTraverse = {}));
+//# sourceMappingURL=TreeChart.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeChart.types.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.types.ts"],"names":[],"mappings":";;;AAWA,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC1B,uDAAQ,CAAA;IACR,6DAAW,CAAA;AACb,CAAC,EAHW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAG3B;AAED,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,uDAAY,CAAA;IACZ,2DAAc,CAAA;AAChB,CAAC,EAHW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAGvB","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\n\nexport interface ITreeChartDataPoint {\n  name: string;\n  subname: string;\n  metric?: string | undefined;\n  fill: string;\n  children?: Array<ITreeChartDataPoint>;\n}\n\nexport enum NodesComposition {\n  long = 1,\n  compact = 0,\n}\n\nexport enum TreeTraverse {\n  preOrder = 1,\n  levelOrder = 0,\n}\n\nexport interface ITreeProps {\n  /**\n   * An object of chart data points for the Tree chart\n   */\n  treeData: ITreeChartDataPoint;\n  /**\n   * compostion for three layer chart, long: composition = 1; compact: composition = 0\n   */\n  composition?: NodesComposition.long | NodesComposition.compact | undefined;\n  /**\n   * traversal order for tree chart, preOrder = 1, levelOrder = 0\n   */\n  treeTraversal?: TreeTraverse.preOrder | TreeTraverse.levelOrder;\n  /**\n   * Width of SVG tree chart\n   * * @default 1200\n   */\n  width?: number;\n  /**\n   * Height of SVG tree chart\n   * * @default 700\n   */\n  height?: number;\n  /**\n   * Margin for the SVG tree chart\n   */\n  marign?: { left: number; right: number; top: number; bottom: number };\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ITreeStyleProps, ITreeStyles>;\n  /**\n   * Additional CSS class(es) to apply to the TreeChart.\n   */\n  className?: string;\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n}\nexport interface ITreeState {\n  _width: number;\n  _height: number;\n}\n\nexport interface ITreeDataStructure {\n  id: number;\n  children: unknown;\n  dataName: string;\n  subName: string;\n  metricName?: string | undefined;\n  fill: string;\n  x: number;\n  y: number;\n  parentID: number;\n}\n\nexport interface ITreeStyleProps {\n  theme: ITheme;\n  className?: string;\n}\nexport interface ITreeStyles {\n  link: IStyle;\n  rectNode: IStyle;\n  rectText: IStyle;\n  rectSubText: IStyle;\n  rectMetricText: IStyle;\n}\n"]}

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.0');
 //# 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.0');"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.11.0",
+  "version": "5.12.0",
   "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.80.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.80.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,89 @@
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
+import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+
+export interface ITreeChartDataPoint {
+  name: string;
+  subname: string;
+  metric?: string | undefined;
+  fill: string;
+  children?: Array<ITreeChartDataPoint>;
+}
+
+export enum NodesComposition {
+  long = 1,
+  compact = 0,
+}
+
+export enum TreeTraverse {
+  preOrder = 1,
+  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;
+  /**
+   * traversal order for tree chart, preOrder = 1, levelOrder = 0
+   */
+  treeTraversal?: TreeTraverse.preOrder | TreeTraverse.levelOrder;
+  /**
+   * Width of SVG tree chart
+   * * @default 1200
+   */
+  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: number;
+  _height: number;
+}
+
+export interface ITreeDataStructure {
+  id: number;
+  children: unknown;
+  dataName: string;
+  subName: string;
+  metricName?: string | undefined;
+  fill: string;
+  x: number;
+  y: number;
+  parentID: number;
+}
+
+export interface ITreeStyleProps {
+  theme: ITheme;
+  className?: string;
+}
+export interface ITreeStyles {
+  link: IStyle;
+  rectNode: IStyle;
+  rectText: IStyle;
+  rectSubText: IStyle;
+  rectMetricText: IStyle;
+}