@fluentui/react-charting 5.12.24 → 5.12.27

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

@@ -0,0 +1,2 @@
+import { ITreeStyleProps, ITreeStyles } from './TreeChart.types';
+export declare const getStyles: (props: ITreeStyleProps) => ITreeStyles;

package/lib/components/TreeChart/TreeChart.styles.js

@@ -0,0 +1,28 @@
+import { __assign } from "tslib";
+export var getStyles = function (props) {
+    return {
+        root: [
+            props.theme.spacing,
+            'ms-TreeChart',
+            props.className,
+            {
+                overflow: 'scroll',
+            },
+        ],
+        link: {
+            fill: 'none',
+            stroke: '#A1A1A1',
+            strokeWidth: '2px',
+        },
+        rectNode: {
+            strokeWidth: '2px',
+            fill: 'white',
+            padding: '10px',
+            rx: '2px',
+        },
+        rectText: __assign({ fill: 'black' }, props.theme.fonts.large),
+        rectSubText: __assign({ fill: '#484644' }, props.theme.fonts.medium),
+        rectMetricText: __assign({ fill: '#000000' }, props.theme.fonts.xLarge),
+    };
+};
+//# sourceMappingURL=TreeChart.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeChart.styles.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.styles.ts"],"names":[],"mappings":";AAEA,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAsB;IAC9C,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,OAAO;YACnB,cAAc;YACd,KAAK,CAAC,SAAS;YACf;gBACE,QAAQ,EAAE,QAAQ;aACnB;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,KAAK;SACnB;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,KAAK;YAClB,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,EAAE,EAAE,KAAK;SACV;QACD,QAAQ,aACN,IAAI,EAAE,OAAO,IACV,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,KAAK,CAC5B;QACD,WAAW,aACT,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;QACD,cAAc,aACZ,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { ITreeStyleProps, ITreeStyles } from './TreeChart.types';\n\nexport const getStyles = (props: ITreeStyleProps): ITreeStyles => {\n  return {\n    root: [\n      props.theme.spacing,\n      'ms-TreeChart',\n      props.className,\n      {\n        overflow: 'scroll',\n      },\n    ],\n    link: {\n      fill: 'none',\n      stroke: '#A1A1A1',\n      strokeWidth: '2px',\n    },\n    rectNode: {\n      strokeWidth: '2px',\n      fill: 'white',\n      padding: '10px',\n      rx: '2px',\n    },\n    rectText: {\n      fill: 'black',\n      ...props.theme!.fonts.large,\n    },\n    rectSubText: {\n      fill: '#484644',\n      ...props.theme!.fonts.medium,\n    },\n    rectMetricText: {\n      fill: '#000000',\n      ...props.theme!.fonts.xLarge,\n    },\n  };\n};\n"]}

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

@@ -0,0 +1,185 @@
+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 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 {
+    /**
+     * 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: Array<ITreeDataStructure>;
+    /**
+     * 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;
+}

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

@@ -0,0 +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

@@ -0,0 +1 @@
+{"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: Array<ITreeDataStructure>;\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/components/TreeChart/index.d.ts

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

package/lib/components/TreeChart/index.js

@@ -0,0 +1,3 @@
+export * from './TreeChart';
+export * from './TreeChart.types';
+//# sourceMappingURL=index.js.map

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

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

package/lib/components/VerticalBarChart/VerticalBarChart.base.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { IAccessibilityProps, IBasestate, IVerticalBarChartProps, IVerticalBarChartDataPoint, IYValueHover } from '../../index';
+export interface IVerticalBarChartState extends IBasestate {
+    selectedLegendTitle: string;
+    dataPointCalloutProps?: IVerticalBarChartDataPoint;
+    /**
+     * data point of x, where rectangle is hovered or focused
+     */
+    activeXdataPoint: number | string | null;
+    YValueHover: IYValueHover[];
+    hoverXValue?: string | number | null;
+    callOutAccessibilityData?: IAccessibilityProps;
+}
+export declare class VerticalBarChartBase extends React.Component<IVerticalBarChartProps, IVerticalBarChartState> {
+    private _points;
+    private _barWidth;
+    private _colors;
+    private _classNames;
+    private _refArray;
+    private _calloutId;
+    private margins;
+    private _isRtl;
+    private _bars;
+    private _xAxisLabels;
+    private _yMax;
+    private _isHavingLine;
+    private _tooltipId;
+    private _xAxisType;
+    private _calloutAnchorPoint;
+    constructor(props: IVerticalBarChartProps);
+    render(): JSX.Element;
+    private _createLine;
+    private _checkForLine;
+    private _adjustProps;
+    private _getMargins;
+    private _renderContentForBothLineAndBars;
+    private _renderContentForOnlyBars;
+    private _renderCallout;
+    private _getCustomizedCallout;
+    private _getGraphData;
+    private _createColors;
+    private _refCallback;
+    private _getCalloutContentForLineAndBar;
+    private _onBarHover;
+    private _onBarLeave;
+    private _handleChartMouseLeave;
+    private _onBarFocus;
+    private _getScales;
+    private _createNumericBars;
+    private _createStringBars;
+    private _closeCallout;
+    private _onLegendClick;
+    private _onLegendHover;
+    private _onLegendLeave;
+    private _getLegendData;
+    private _getAxisData;
+}