@fluentui/react-charting 5.12.1 → 5.12.4

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

@@ -1,18 +1,45 @@
 import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
 import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 export interface ITreeChartDataPoint {
+    /**
+     * Node main text
+     */
     name: string;
-    subname: 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 declare enum NodesComposition {
+    /**
+     * NodeComposition enum val for long: number = 1
+     */
     long = 1,
+    /**
+     * NodeComposition enum val for compact: number = 0
+     */
     compact = 0
 }
 export declare enum TreeTraverse {
+    /**
+     * TreeTraverse enum val for preOrder: number = 1
+     */
     preOrder = 1,
+    /**
+     * TreeTraverse enum val for levelOrder: number = 0
+     */
     levelOrder = 0
 }
 export interface ITreeProps {
@@ -24,13 +51,18 @@ export interface ITreeProps {
      * 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 1200
+     * * @default 1500
      */
     width?: number;
     /**
@@ -61,28 +93,93 @@ export interface ITreeProps {
     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;
-    subName: 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;
 }

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

@@ -1,11 +1,23 @@
 export var NodesComposition;
 (function (NodesComposition) {
+    /**
+     * NodeComposition enum val for long: number = 1
+     */
     NodesComposition[NodesComposition["long"] = 1] = "long";
+    /**
+     * NodeComposition enum val for compact: number = 0
+     */
     NodesComposition[NodesComposition["compact"] = 0] = "compact";
 })(NodesComposition || (NodesComposition = {}));
 export var TreeTraverse;
 (function (TreeTraverse) {
+    /**
+     * TreeTraverse enum val for preOrder: number = 1
+     */
     TreeTraverse[TreeTraverse["preOrder"] = 1] = "preOrder";
+    /**
+     * TreeTraverse enum val for levelOrder: number = 0
+     */
     TreeTraverse[TreeTraverse["levelOrder"] = 0] = "levelOrder";
 })(TreeTraverse || (TreeTraverse = {}));
 //# sourceMappingURL=TreeChart.types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeChart.types.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.types.ts"],"names":[],"mappings":"AAWA,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC1B,uDAAQ,CAAA;IACR,6DAAW,CAAA;AACb,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,uDAAY,CAAA;IACZ,2DAAc,CAAA;AAChB,CAAC,EAHW,YAAY,KAAZ,YAAY,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"]}
+{"version":3,"file":"TreeChart.types.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.types.ts"],"names":[],"mappings":"AA0BA,MAAM,CAAN,IAAY,gBASX;AATD,WAAY,gBAAgB;IAC1B;;OAEG;IACH,uDAAQ,CAAA;IACR;;OAEG;IACH,6DAAW,CAAA;AACb,CAAC,EATW,gBAAgB,KAAhB,gBAAgB,QAS3B;AAED,MAAM,CAAN,IAAY,YASX;AATD,WAAY,YAAY;IACtB;;OAEG;IACH,uDAAY,CAAA;IACZ;;OAEG;IACH,2DAAc,CAAA;AAChB,CAAC,EATW,YAAY,KAAZ,YAAY,QASvB","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\n\nexport interface ITreeChartDataPoint {\n  /**\n   * Node main text\n   */\n  name: string;\n  /**\n   * Subtext value (optional)\n   */\n  subname?: string | undefined;\n  /**\n   * Metric text value (optional)\n   */\n  metric?: string | undefined;\n  /**\n   * Color of the rectangular box\n   */\n  fill: string;\n  /**\n   * Recursive datastructure for child node object\n   */\n  children?: Array<ITreeChartDataPoint>;\n}\n\nexport enum NodesComposition {\n  /**\n   * NodeComposition enum val for long: number = 1\n   */\n  long = 1,\n  /**\n   * NodeComposition enum val for compact: number = 0\n   */\n  compact = 0,\n}\n\nexport enum TreeTraverse {\n  /**\n   * TreeTraverse enum val for preOrder: number = 1\n   */\n  preOrder = 1,\n  /**\n   * TreeTraverse enum val for levelOrder: number = 0\n   */\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   * Node Width Size for the Tree Layout\n   * * @default 75\n   */\n  layoutWidth?: number | 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 1500\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  /**\n   * Width of SVG tree chart\n   * * @default 1500\n   */\n  _width: number;\n  /**\n   * Height of SVG tree chart\n   * * @default 700\n   */\n  _height: number;\n  /**\n   * Layout Width of SVG tree chart\n   * * @default 75\n   */\n  _layoutWidth?: number;\n}\n\nexport interface ITreeDataStructure {\n  /**\n   * Node id of each node\n   */\n  id: number;\n  /**\n   * Children node object\n   */\n  children: unknown;\n  /**\n   * Node main text\n   */\n  dataName: string;\n  /**\n   * Subtext value (optional)\n   */\n  subName?: string | undefined;\n  /**\n   * Metric text value (optional)\n   */\n  metricName?: string | undefined;\n  /**\n   * Color of the rectangular box\n   */\n  fill: string;\n  /**\n   * X-coordindate of node\n   */\n  x: number;\n  /**\n   * Y-coordindate of node\n   */\n  y: number;\n  /**\n   * Node id of each node's parent\n   */\n  parentID: number;\n}\n\nexport interface ITreeStyleProps {\n  /**\n   * Theme (provided through customization.)\n   */\n  theme: ITheme;\n  /**\n   * Additional CSS class(es) to apply to the TreeChart.\n   */\n  className?: string;\n}\nexport interface ITreeStyles {\n  /**\n   *  Style for the root element.\n   */\n  root: IStyle;\n  /**\n   *  Style for the Link/Path element.\n   */\n  link: IStyle;\n  /**\n   *  Style for rectangular Node\n   */\n  rectNode: IStyle;\n  /**\n   *  Style for the node main Text\n   */\n  rectText: IStyle;\n  /**\n   *  Style for the node sub Text\n   */\n  rectSubText: IStyle;\n  /**\n   *  Style for the node metric value Text\n   */\n  rectMetricText: IStyle;\n}\n"]}

package/lib/version.js

@@ -1,5 +1,5 @@
 // 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.
 import { setVersion } from '@fluentui/set-version';
-setVersion('@fluentui/react-charting', '5.12.1');
+setVersion('@fluentui/react-charting', '5.12.4');
 //# sourceMappingURL=version.js.map

package/lib/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,UAAU,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.1');"]}
+{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,UAAU,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.4');"]}

package/lib-amd/components/Sparkline/Sparkline.base.d.ts

@@ -5,12 +5,14 @@ export interface ISparklineState {
     _points: ILineChartDataPoint[] | null;
     _width: number;
     _height: number;
+    _valueTextWidth: number;
 }
 export declare class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {
     private margin;
     private x;
     private y;
     private area;
+    private line;
     constructor(props: ISparklineProps);
     componentDidMount(): void;
     drawSparkline(): JSX.Element;

package/lib-amd/components/Sparkline/Sparkline.base.js

@@ -16,7 +16,8 @@ define(["require", "exports", "tslib", "react", "d3-scale", "d3-shape", "d3-arra
             _this.state = {
                 _points: null,
                 _width: _this.props.width || 80,
-                _height: _this.props.height || 20 + _this.margin.bottom + _this.margin.top,
+                _height: _this.props.height || 20,
+                _valueTextWidth: _this.props.valueTextWidth || 80,
             };
             return _this;
         }
@@ -28,8 +29,15 @@ define(["require", "exports", "tslib", "react", "d3-scale", "d3-shape", "d3-arra
                 .y0(this.state._height)
                 /* eslint-disable @typescript-eslint/no-explicit-any */
                 .y1(function (d) { return _this.y(d.y); })
-                .curve(d3_shape_1.curveMonotoneX);
+                .curve(d3_shape_1.curveLinear);
             this.area = area;
+            var line = d3_shape_1.line()
+                /* eslint-disable @typescript-eslint/no-explicit-any */
+                .x(function (d) { return _this.x(d.x); })
+                /* eslint-disable @typescript-eslint/no-explicit-any */
+                .y(function (d) { return _this.y(d.y); })
+                .curve(d3_shape_1.curveLinear);
+            this.line = line;
             var points = this.props.data.lineChartData[0].data;
             /* eslint-disable @typescript-eslint/no-explicit-any */
             var _a = d3_array_1.extent(points, function (d) { return d.x; }), xMin = _a[0], xMax = _a[1];
@@ -45,7 +53,9 @@ define(["require", "exports", "tslib", "react", "d3-scale", "d3-shape", "d3-arra
             });
         };
         SparklineBase.prototype.drawSparkline = function () {
-            return (React.createElement("path", { className: "area", d: this.area(this.state._points), opacity: 1, fillOpacity: 0.2, fill: this.props.data.lineChartData[0].color, strokeWidth: 2, stroke: this.props.data.lineChartData[0].color, "aria-label": "Sparkline with label " + this.props.data.lineChartData[0].legend }));
+            return (React.createElement(React.Fragment, null,
+                React.createElement("path", { className: "line", d: this.line(this.state._points), fill: 'transparent', opacity: 1, strokeWidth: 2, stroke: this.props.data.lineChartData[0].color }),
+                React.createElement("path", { className: "area", d: this.area(this.state._points), opacity: 1, fillOpacity: 0.2, fill: this.props.data.lineChartData[0].color, "aria-label": "Sparkline with label " + this.props.data.lineChartData[0].legend })));
         };
         SparklineBase.prototype.render = function () {
             var classNames = getClassNames(this.props.styles, {
@@ -53,8 +63,9 @@ define(["require", "exports", "tslib", "react", "d3-scale", "d3-shape", "d3-arra
             });
             return (React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal, isCircularNavigation: true, className: classNames.inlineBlock },
                 React.createElement("div", { className: classNames.inlineBlock },
-                    this.state._width >= 50 && this.state._height >= 16 ? (React.createElement("svg", { width: this.state._width, height: this.state._height, tabIndex: 0 }, this.state._points ? this.drawSparkline() : null)) : (React.createElement(React.Fragment, null)),
-                    this.props.showLegend && this.props.data.lineChartData[0].legend ? (React.createElement("span", { role: "text", className: classNames.titleText, tabIndex: 0 }, this.props.data.lineChartData[0].legend)) : (React.createElement(React.Fragment, null)))));
+                    this.state._width >= 50 && this.state._height >= 16 ? (React.createElement("svg", { width: this.state._width, height: this.state._height, "data-is-focusable": true }, this.state._points ? this.drawSparkline() : null)) : (React.createElement(React.Fragment, null)),
+                    this.props.showLegend && this.props.data.lineChartData[0].legend ? (React.createElement("svg", { width: this.state._valueTextWidth, height: this.state._height, "data-is-focusable": true },
+                        React.createElement("text", { x: "0%", dx: 8, y: "100%", dy: -5, className: classNames.valueText }, this.props.data.lineChartData[0].legend))) : (React.createElement(React.Fragment, null)))));
         };
         return SparklineBase;
     }(React.Component));

package/lib-amd/components/Sparkline/Sparkline.base.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sparkline.base.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, curveMonotoneX as d3CurveMonotoneX } from 'd3-shape';\nimport { max as d3Max, extent as d3Extent } from 'd3-array';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ILineChartDataPoint } from '../../types/IDataPoint';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { ISparklineProps, ISparklineStyleProps, ISparklineStyles } from '../../index';\nconst getClassNames = classNamesFunction<ISparklineStyleProps, ISparklineStyles>();\n\nexport interface ISparklineState {\n  _points: ILineChartDataPoint[] | null;\n  _width: number;\n  _height: number;\n}\n\nexport class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {\n  private margin = {\n    top: 2,\n    right: 0,\n    bottom: 0,\n    left: 0,\n  };\n\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  private x: any;\n\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  private y: any;\n  private area: any;\n\n  constructor(props: ISparklineProps) {\n    super(props);\n    this.state = {\n      _points: null,\n      _width: this.props.width! || 80,\n      _height: this.props.height! || 20 + this.margin.bottom + this.margin.top,\n    };\n  }\n\n  public componentDidMount() {\n    const area = d3Area()\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .x((d: any) => this.x(d.x))\n      .y0(this.state._height)\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .y1((d: any) => this.y(d.y))\n      .curve(d3CurveMonotoneX);\n    this.area = area;\n\n    const points = this.props.data!.lineChartData![0].data;\n\n    /* eslint-disable @typescript-eslint/no-explicit-any */\n    const [xMin, xMax] = d3Extent(points, (d: any) => d.x);\n\n    this.x = d3ScaleLinear()\n      .domain([xMin, xMax])\n      .range([this.margin.left!, this.state._width - this.margin.right!]);\n    this.y = d3ScaleLinear()\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .domain([0, d3Max(points, (d: any) => d.y)])\n      .range([this.state._height - this.margin.bottom!, this.margin.top!]);\n\n    this.setState({\n      _points: points,\n    });\n  }\n\n  public drawSparkline() {\n    return (\n      <path\n        className=\"area\"\n        d={this.area(this.state._points)}\n        opacity={1}\n        fillOpacity={0.2}\n        fill={this.props.data!.lineChartData![0].color!}\n        strokeWidth={2}\n        stroke={this.props.data!.lineChartData![0].color!}\n        aria-label={`Sparkline with label ${this.props.data!.lineChartData![0].legend!}`}\n      />\n    );\n  }\n\n  public render() {\n    const classNames = getClassNames(this.props.styles!, {\n      theme: this.props.theme!,\n    });\n    return (\n      <FocusZone\n        direction={FocusZoneDirection.horizontal}\n        isCircularNavigation={true}\n        className={classNames.inlineBlock}\n      >\n        <div className={classNames.inlineBlock}>\n          {this.state._width >= 50 && this.state._height >= 16 ? (\n            <svg width={this.state._width} height={this.state._height} tabIndex={0}>\n              {this.state._points ? this.drawSparkline() : null}\n            </svg>\n          ) : (\n            <></>\n          )}\n          {this.props.showLegend && this.props.data!.lineChartData![0].legend ? (\n            <span role=\"text\" className={classNames.titleText} tabIndex={0}>\n              {this.props.data!.lineChartData![0].legend!}\n            </span>\n          ) : (\n            <></>\n          )}\n        </div>\n      </FocusZone>\n    );\n  }\n}\n"]}
+{"version":3,"file":"Sparkline.base.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport { max as d3Max, extent as d3Extent } from 'd3-array';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ILineChartDataPoint } from '../../types/IDataPoint';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { ISparklineProps, ISparklineStyleProps, ISparklineStyles } from '../../index';\nconst getClassNames = classNamesFunction<ISparklineStyleProps, ISparklineStyles>();\n\nexport interface ISparklineState {\n  _points: ILineChartDataPoint[] | null;\n  _width: number;\n  _height: number;\n  _valueTextWidth: number;\n}\n\nexport class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {\n  private margin = {\n    top: 2,\n    right: 0,\n    bottom: 0,\n    left: 0,\n  };\n\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  private x: any;\n\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  private y: any;\n  private area: any;\n  private line: any;\n\n  constructor(props: ISparklineProps) {\n    super(props);\n    this.state = {\n      _points: null,\n      _width: this.props.width! || 80,\n      _height: this.props.height! || 20,\n      _valueTextWidth: this.props.valueTextWidth! || 80,\n    };\n  }\n\n  public componentDidMount() {\n    const area = d3Area()\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .x((d: any) => this.x(d.x))\n      .y0(this.state._height)\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .y1((d: any) => this.y(d.y))\n      .curve(d3curveLinear);\n    this.area = area;\n\n    const line = d3Line()\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .x((d: any) => this.x(d.x))\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .y((d: any) => this.y(d.y))\n      .curve(d3curveLinear);\n    this.line = line;\n\n    const points = this.props.data!.lineChartData![0].data;\n\n    /* eslint-disable @typescript-eslint/no-explicit-any */\n    const [xMin, xMax] = d3Extent(points, (d: any) => d.x);\n\n    this.x = d3ScaleLinear()\n      .domain([xMin, xMax])\n      .range([this.margin.left!, this.state._width - this.margin.right!]);\n    this.y = d3ScaleLinear()\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .domain([0, d3Max(points, (d: any) => d.y)])\n      .range([this.state._height - this.margin.bottom!, this.margin.top!]);\n\n    this.setState({\n      _points: points,\n    });\n  }\n\n  public drawSparkline() {\n    return (\n      <>\n        <path\n          className=\"line\"\n          d={this.line(this.state._points)}\n          fill={'transparent'}\n          opacity={1}\n          strokeWidth={2}\n          stroke={this.props.data!.lineChartData![0].color!}\n        />\n        <path\n          className=\"area\"\n          d={this.area(this.state._points)}\n          opacity={1}\n          fillOpacity={0.2}\n          fill={this.props.data!.lineChartData![0].color!}\n          aria-label={`Sparkline with label ${this.props.data!.lineChartData![0].legend!}`}\n        />\n      </>\n    );\n  }\n\n  public render() {\n    const classNames = getClassNames(this.props.styles!, {\n      theme: this.props.theme!,\n    });\n    return (\n      <FocusZone\n        direction={FocusZoneDirection.horizontal}\n        isCircularNavigation={true}\n        className={classNames.inlineBlock}\n      >\n        <div className={classNames.inlineBlock}>\n          {this.state._width >= 50 && this.state._height >= 16 ? (\n            <svg width={this.state._width} height={this.state._height} data-is-focusable={true}>\n              {this.state._points ? this.drawSparkline() : null}\n            </svg>\n          ) : (\n            <></>\n          )}\n          {this.props.showLegend && this.props.data!.lineChartData![0].legend ? (\n            <svg width={this.state._valueTextWidth} height={this.state._height} data-is-focusable={true}>\n              <text x=\"0%\" dx={8} y=\"100%\" dy={-5} className={classNames.valueText}>\n                {this.props.data!.lineChartData![0].legend!}\n              </text>\n            </svg>\n          ) : (\n            <></>\n          )}\n        </div>\n      </FocusZone>\n    );\n  }\n}\n"]}

package/lib-amd/components/Sparkline/Sparkline.styles.js

@@ -7,7 +7,7 @@ define(["require", "exports", "tslib"], function (require, exports, tslib_1) {
             inlineBlock: {
                 display: 'inline',
             },
-            titleText: tslib_1.__assign({ marginLeft: '8px', textAlign: 'center' }, props.theme.fonts.smallPlus),
+            valueText: tslib_1.__assign({}, props.theme.fonts.smallPlus),
         };
     };
     exports.getStyles = getStyles;

package/lib-amd/components/Sparkline/Sparkline.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sparkline.styles.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAA2B;QACnD,OAAO;YACL,WAAW,EAAE;gBACX,OAAO,EAAE,QAAQ;aAClB;YACD,SAAS,qBACP,UAAU,EAAE,KAAK,EACjB,SAAS,EAAE,QAAQ,IAChB,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,SAAS,CAChC;SACF,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,SAAS,aAWpB","sourcesContent":["import { ISparklineStyleProps, ISparklineStyles } from './Sparkline.types';\n\nexport const getStyles = (props: ISparklineStyleProps): ISparklineStyles => {\n  return {\n    inlineBlock: {\n      display: 'inline',\n    },\n    titleText: {\n      marginLeft: '8px',\n      textAlign: 'center',\n      ...props.theme!.fonts.smallPlus,\n    },\n  };\n};\n"]}
+{"version":3,"file":"Sparkline.styles.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAA2B;QACnD,OAAO;YACL,WAAW,EAAE;gBACX,OAAO,EAAE,QAAQ;aAClB;YACD,SAAS,uBACJ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,SAAS,CAChC;SACF,CAAC;IACJ,CAAC,CAAC;IATW,QAAA,SAAS,aASpB","sourcesContent":["import { ISparklineStyleProps, ISparklineStyles } from './Sparkline.types';\n\nexport const getStyles = (props: ISparklineStyleProps): ISparklineStyles => {\n  return {\n    inlineBlock: {\n      display: 'inline',\n    },\n    valueText: {\n      ...props.theme!.fonts.smallPlus,\n    },\n  };\n};\n"]}

package/lib-amd/components/Sparkline/Sparkline.types.d.ts

@@ -19,6 +19,11 @@ export interface ISparklineProps {
      * @default 20
      */
     height?: number;
+    /**
+     * Width of value text
+     * * @default 80
+     */
+    valueTextWidth?: number;
     /**
      * Additional CSS class(es) to apply to the SparklineChart.
      */
@@ -42,5 +47,5 @@ export interface ISparklineProps {
 }
 export interface ISparklineStyles {
     inlineBlock?: IStyle;
-    titleText?: IStyle;
+    valueText?: IStyle;
 }

package/lib-amd/components/Sparkline/Sparkline.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sparkline.types.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IChartProps } from '../../types/IDataPoint';\nimport { ICartesianChartStyleProps } from '../CommonComponents/index';\n\nexport interface ISparklineStyleProps extends ICartesianChartStyleProps {}\n\nexport interface ISparklineProps {\n  /**\n   * An array of chart data points for the Sparkline chart\n   */\n  data?: IChartProps;\n\n  /**\n   * Width of chart\n   * * @default 80\n   */\n  width?: number;\n\n  /**\n   * Height of chart\n   * @default 20\n   */\n  height?: number;\n\n  /**\n   * Additional CSS class(es) to apply to the SparklineChart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * Prop used to determine whether to show the legend or not\n   */\n  showLegend?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ISparklineStyleProps, ISparklineStyles>;\n}\n\nexport interface ISparklineStyles {\n  inlineBlock?: IStyle;\n  titleText?: IStyle;\n}\n"]}
+{"version":3,"file":"Sparkline.types.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IChartProps } from '../../types/IDataPoint';\nimport { ICartesianChartStyleProps } from '../CommonComponents/index';\n\nexport interface ISparklineStyleProps extends ICartesianChartStyleProps {}\n\nexport interface ISparklineProps {\n  /**\n   * An array of chart data points for the Sparkline chart\n   */\n  data?: IChartProps;\n\n  /**\n   * Width of chart\n   * * @default 80\n   */\n  width?: number;\n\n  /**\n   * Height of chart\n   * @default 20\n   */\n  height?: number;\n\n  /**\n   * Width of value text\n   * * @default 80\n   */\n  valueTextWidth?: number;\n\n  /**\n   * Additional CSS class(es) to apply to the SparklineChart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * Prop used to determine whether to show the legend or not\n   */\n  showLegend?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ISparklineStyleProps, ISparklineStyles>;\n}\n\nexport interface ISparklineStyles {\n  inlineBlock?: IStyle;\n  valueText?: IStyle;\n}\n"]}

package/lib-amd/components/TreeChart/TreeChart.base.d.ts

@@ -6,13 +6,13 @@ export declare class TreeChartBase extends React.Component<ITreeProps, ITreeStat
     private _height;
     private _composition;
     private _classNames;
-    private _rootElem;
     private _margin;
     private _nodeElements;
     private _linkElements;
     private _treeTraversal;
     constructor(props: ITreeProps);
     componentDidMount(): void;
+    componentDidUpdate(prevProps: ITreeProps): void;
     createTreeChart(): void;
     render(): JSX.Element;
 }

package/lib-amd/components/TreeChart/TreeChart.base.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy", "@fluentui/react/lib/Utilities", "@fluentui/react-focus"], function (require, exports, tslib_1, React, d3_selection_1, d3_hierarchy_1, Utilities_1, react_focus_1) {
+define(["require", "exports", "tslib", "react", "d3-hierarchy", "@fluentui/react/lib/Utilities", "d3-selection", "@fluentui/react-focus"], function (require, exports, tslib_1, React, d3_hierarchy_1, Utilities_1, d3_selection_1, react_focus_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.TreeChartBase = void 0;
@@ -15,18 +15,56 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy",
             this._nodeElements = _nodeElements;
             this._linkElements = _linkElements;
         }
+        StandardTree.prototype.truncateText = function (text, rectangleWidth, padding, styleClass) {
+            var truncatedText = '';
+            var words = text.split(/\s+/).reverse();
+            var word = '';
+            var tspan = d3_selection_1.select('.svgTree').append('text').attr('class', 'tempText').append('tspan').text(null);
+            if (styleClass !== undefined) {
+                tspan.attr('class', styleClass);
+            }
+            var line = [];
+            while ((word = words.pop())) {
+                line.push(word);
+                tspan.text(line.join(' ') + ' ');
+                if (tspan.node() !== null) {
+                    var w = tspan.node().getComputedTextLength();
+                    if (w > rectangleWidth - padding) {
+                        line.pop();
+                        line.push('...');
+                        break;
+                    }
+                }
+            }
+            truncatedText = line.join(' ') + ' ';
+            tspan.text(null);
+            d3_selection_1.selectAll('.tempText').remove();
+            return truncatedText;
+        };
         // Append node elements
         // nodeId to create unique key
         StandardTree.prototype.addNodeShapetoSVG = function (name, subname, metricName, xCoordinate, yCoordinate, fillColor, rectangleWidth, rectangleHeight, nodeId, parentInfo) {
             var ariaLabel = "nodeId: " + nodeId + " \nnodeMainText: " + name + "\nsubText " + subname + " " + parentInfo;
             this._nodeElements.push(React.createElement("rect", { width: rectangleWidth, height: rectangleHeight, x: xCoordinate, y: yCoordinate, tabIndex: 0, role: 'text', "data-is-focusable": true, "aria-label": ariaLabel, className: this.styleClassNames.rectNode, stroke: fillColor, key: "" + nodeId + this.styleClassNames.rectNode }));
+            if (subname !== undefined) {
+                subname = this.truncateText(subname, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectSubText);
+            }
+            if (metricName !== undefined) {
+                metricName = this.truncateText(metricName, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectmetricText);
+            }
+            name = this.truncateText(name, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectText);
             // Text position y = y + rectHeight/2, 2 is ratio for depth
             // Text position x = x + rectWidth/2, 2 is ratio for length
             // Sub-text position x = x + rectWidth/2, 2 is ratio for length
             var subValue = metricName !== undefined ? (React.createElement("tspan", { className: this.styleClassNames.rectmetricText, dy: "1.4em", x: xCoordinate + rectangleWidth / 2 }, metricName)) : (React.createElement("tspan", { className: this.styleClassNames.rectSubText, dy: "1.4em", x: xCoordinate + rectangleWidth / 2 }, subname));
-            this._nodeElements.push(React.createElement("text", { textAnchor: "middle", className: metricName !== undefined ? this.styleClassNames.rectSubText : this.styleClassNames.rectText, dy: metricName !== undefined ? yCoordinate + rectangleHeight / 2.5 : yCoordinate + rectangleHeight / 2, x: xCoordinate + rectangleWidth / 2, key: "" + nodeId + this.styleClassNames.rectText },
-                name,
-                subValue));
+            if (subname === undefined && metricName === undefined) {
+                this._nodeElements.push(React.createElement("text", { textAnchor: "middle", className: this.styleClassNames.rectmetricText, dy: yCoordinate + rectangleHeight / 1.6, x: xCoordinate + rectangleWidth / 2, key: "" + nodeId + this.styleClassNames.rectText }, name));
+            }
+            else {
+                this._nodeElements.push(React.createElement("text", { textAnchor: "middle", className: metricName !== undefined ? this.styleClassNames.rectSubText : this.styleClassNames.rectText, dy: metricName !== undefined ? yCoordinate + rectangleHeight / 2.5 : yCoordinate + rectangleHeight / 2, x: xCoordinate + rectangleWidth / 2, key: "" + nodeId + this.styleClassNames.rectText },
+                    name,
+                    subValue));
+            }
         };
         // Create a rectangular path from parent to the child nodes
         StandardTree.prototype.createPathLink = function (parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap) {
@@ -53,16 +91,25 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy",
             _this._treeTraversal = _treeTraversal;
             return _this;
         }
-        LayeredTree.prototype.createTree = function () {
+        LayeredTree.prototype.createTree = function (givenLayoutWidth, screenWidth) {
             var _a, _b, _c, _d;
+            if (givenLayoutWidth !== undefined) {
+                if (givenLayoutWidth < 65) {
+                    givenLayoutWidth = 65;
+                }
+                if (givenLayoutWidth > 90) {
+                    givenLayoutWidth = 90;
+                }
+            }
+            var layoutWidth = givenLayoutWidth || 75;
             var root = d3_hierarchy_1.hierarchy(this.treeData, function (d) {
                 return d.children;
             });
             // Find tree Height
             var treeHeight = (root === null || root === void 0 ? void 0 : root.height) + 1;
-            // Create tree layout, width: 70, height: 90 and add node separation
+            // Create tree layout, width: layoutWidth, height: layoutWidth/1.5 and add node separation
             var treemap = d3_hierarchy_1.tree()
-                .nodeSize([75, 50])
+                .nodeSize([layoutWidth, layoutWidth / 1.5])
                 .separation(function (a, b) {
                 return a.parent === root && b.parent === root ? 3.5 : 1;
             });
@@ -72,10 +119,10 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy",
             var nodes = treeData.descendants();
             // Normalize for fixed-depth and width
             // Normalise y coordinate by depth of each node by a factor of 130
-            // Normalise x coordinate by start coordinate 0 with 450
+            // Normalise x coordinate by start coordinate 0 with screenSize/3
             nodes.forEach(function (d) {
                 d.y = d.depth === 0 ? 10 : d.depth * 130;
-                d.x += 400;
+                d.x += screenWidth / 3;
             });
             // <------------------ Traversal section ------------------>
             // Create tree data structure
@@ -105,8 +152,8 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy",
                 : root.eachBefore(function (d) {
                     createTreeDataStructure(d);
                 });
-            var rectHeight = 70;
-            var rectWidth = 220;
+            var rectWidth = layoutWidth * 3;
+            var rectHeight = rectWidth / 3.45;
             var gap = 20;
             var parentSet = new Set();
             for (var _i = 0, treeDataStructure_1 = treeDataStructure; _i < treeDataStructure_1.length; _i++) {
@@ -117,7 +164,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy",
                 // check for leaf nodes
                 if (!d.children && !parentSet.has(d.parentID) && treeHeight === 3) {
                     var newWidth = (rectWidth - gap) / 2;
-                    var newHeight = 70;
+                    var newHeight = rectHeight;
                     parentSet.add(d.parentID);
                     // <------------------ Links section ------------------>
                     this.addLinktoSVG(d.id, treeDataStructure[d.parentID].x, treeDataStructure[d.parentID].y, treeDataStructure[d.id].x, treeDataStructure[d.id].y, true, rectWidth, rectHeight, gap);
@@ -179,14 +226,14 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy",
             _this._nodeElements = [];
             _this._linkElements = [];
             _this._margin = { top: 30, right: 20, bottom: 30, left: 50 };
-            _this._width = _this.props.width || 1200;
+            _this._width = _this.props.width || 1500;
             _this._height = _this.props.height || 700;
             _this._treeData = _this.props.treeData;
             _this._composition = (_a = _this.props) === null || _a === void 0 ? void 0 : _a.composition;
             _this._treeTraversal = _this.props.treeTraversal;
             _this.state = {
-                _width: _this._width || 1000,
-                _height: _this._height || 700,
+                _width: _this._width,
+                _height: _this._height,
             };
             return _this;
         }
@@ -199,18 +246,27 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy",
             });
             // Call createTreeChart function in componentDidMount
             this.createTreeChart();
-            var reducedHeight = this._rootElem && this._rootElem.offsetHeight / 5;
             this.setState({
-                _width: (this._rootElem && this._rootElem.offsetWidth),
-                _height: (this._rootElem && this._rootElem.offsetHeight - reducedHeight),
+                _width: this.props.width || 1500,
+                _height: this.props.height || 700,
             });
         };
+        TreeChartBase.prototype.componentDidUpdate = function (prevProps) {
+            if (prevProps.layoutWidth !== this.props.layoutWidth) {
+                var svgText = d3_selection_1.selectAll('text');
+                var svgRect = d3_selection_1.selectAll('rect');
+                var svgLink = d3_selection_1.selectAll('path');
+                if (this._nodeElements.length === 0 && this._linkElements.length === 0) {
+                    svgText.remove();
+                    svgRect.remove();
+                    svgLink.remove();
+                }
+                this.createTreeChart();
+            }
+        };
         TreeChartBase.prototype.createTreeChart = function () {
-            var svg = d3_selection_1.select('.svgTree');
-            // Set SVG width and height
-            svg
-                .attr('width', this.state._width - this._margin.left - this._margin.right)
-                .attr('height', this.state._height - this._margin.top - this._margin.bottom);
+            var nodeElements = [];
+            var linkElements = [];
             // Create styleClass object to access it in parent class
             var styleClassNames = {
                 link: this._classNames.link,
@@ -220,14 +276,16 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy",
                 rectmetricText: this._classNames.rectMetricText,
             };
             // Instantiate inherited class and call createTree function for the object
-            var treeObject = new LayeredTree(this._treeData, this._composition, styleClassNames, this._nodeElements, this._linkElements, this._treeTraversal);
-            treeObject.createTree();
+            var treeObject = new LayeredTree(this._treeData, this._composition, styleClassNames, nodeElements, linkElements, this._treeTraversal);
+            treeObject.createTree(this.props.layoutWidth, this._width);
+            this._nodeElements = nodeElements;
+            this._linkElements = linkElements;
         };
         TreeChartBase.prototype.render = function () {
-            var _this = this;
+            var _a;
             return (React.createElement(react_focus_1.FocusZone, null,
-                React.createElement("div", { className: "svgTreeDiv", ref: function (rootElem) { return (_this._rootElem = rootElem); } },
-                    React.createElement("svg", { className: "svgTree" },
+                React.createElement("div", { className: (_a = this._classNames) === null || _a === void 0 ? void 0 : _a.root },
+                    React.createElement("svg", { className: "svgTree", width: this.state._width - this._margin.left - this._margin.right, height: this.state._height - this._margin.top - this._margin.bottom },
                         React.createElement("g", { className: "svgNode" }, this._nodeElements.map(function (element) { return element; })),
                         React.createElement("g", { className: "svgLink" }, this._linkElements.map(function (element) { return element; }))))));
         };