@fluentui/react-charting 5.12.25 → 5.12.28

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

@@ -0,0 +1,36 @@
+import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { IChartProps, IRefArrayData, IBasestate, ILineChartDataPoint, ILineChartPoints, ICustomizedCalloutData, IMargins } from '../../types/index';
+import { ICartesianChartStyles, ICartesianChartStyleProps, ICartesianChartProps, IChildProps } from '../CommonComponents/CartesianChart.types';
+export { IChildProps, IRefArrayData, IBasestate, ILineChartDataPoint, ILineChartPoints, IMargins };
+export interface IAreaChartProps extends ICartesianChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data: IChartProps;
+    /**
+     * This prop is used to draw Y axis grid lines on the chart. Default value will be false
+     * @deprecated now lines are shown by default
+     * no need to use this prop
+     */
+    showYAxisGridLines?: boolean;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;
+    /**
+     * Define a custom callout renderer for a data point
+     */
+    onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;
+    /**
+     * Define a custom callout renderer for a stack; default is to render per data point
+     */
+    onRenderCalloutPerStack?: IRenderFunction<ICustomizedCalloutData>;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+}
+export interface IAreaChartStyles extends ICartesianChartStyles {
+}
+export interface IAreaChartStyleProps extends ICartesianChartStyleProps {
+}

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=AreaChart.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AreaChart.types.js","sourceRoot":"../src/","sources":["components/AreaChart/AreaChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport {\n  IChartProps,\n  IRefArrayData,\n  IBasestate,\n  ILineChartDataPoint,\n  ILineChartPoints,\n  ICustomizedCalloutData,\n  IMargins,\n} from '../../types/index';\nimport {\n  ICartesianChartStyles,\n  ICartesianChartStyleProps,\n  ICartesianChartProps,\n  IChildProps,\n} from '../CommonComponents/CartesianChart.types';\n\nexport { IChildProps, IRefArrayData, IBasestate, ILineChartDataPoint, ILineChartPoints, IMargins };\nexport interface IAreaChartProps extends ICartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: IChartProps;\n\n  /**\n   * This prop is used to draw Y axis grid lines on the chart. Default value will be false\n   * @deprecated now lines are shown by default\n   * no need to use this prop\n   */\n  showYAxisGridLines?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;\n\n  /**\n   * Define a custom callout renderer for a stack; default is to render per data point\n   */\n  onRenderCalloutPerStack?: IRenderFunction<ICustomizedCalloutData>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n}\n\nexport interface IAreaChartStyles extends ICartesianChartStyles {}\n\nexport interface IAreaChartStyleProps extends ICartesianChartStyleProps {}\n"]}

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

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

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

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

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

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

package/lib-commonjs/components/CommonComponents/CartesianChart.base.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { IModifiedCartesianChartProps } from '../../index';
+export interface ICartesianChartState {
+    containerWidth: number;
+    containerHeight: number;
+    _width: number;
+    _height: number;
+    isRemoveValCalculated?: boolean;
+    _removalValueForTextTuncate?: number;
+}
+/**
+ * Cartesian chart used for
+ * 1.draw X and Y axis of the chart
+ * 2.Callout
+ * 3.Fit parent Continer
+ */
+export declare class CartesianChartBase extends React.Component<IModifiedCartesianChartProps, ICartesianChartState> {
+    private _classNames;
+    private chartContainer;
+    private legendContainer;
+    private minLegendContainerHeight;
+    private xAxisElement;
+    private yAxisElement;
+    private margins;
+    private idForGraph;
+    private _reqID;
+    private _isRtl;
+    private _xScale;
+    constructor(props: IModifiedCartesianChartProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: IModifiedCartesianChartProps): void;
+    render(): JSX.Element;
+    private _multiValueCallout;
+    private _yValueHoverSubCountsExists;
+    private _getCalloutContent;
+    /**
+     * When screen resizes, along with screen, chart also auto adjusted.
+     * This method used to adjust height and width of the charts.
+     */
+    private _fitParentContainer;
+    private _getData;
+}

package/lib-commonjs/components/CommonComponents/CartesianChart.base.js

@@ -0,0 +1,326 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CartesianChartBase = void 0;
+var tslib_1 = require("tslib");
+var React = require("react");
+var Utilities_1 = require("@fluentui/react/lib-commonjs/Utilities");
+var Callout_1 = require("@fluentui/react/lib-commonjs/Callout");
+var react_focus_1 = require("@fluentui/react-focus");
+var index_1 = require("../../utilities/index");
+var index_2 = require("../Legends/index");
+var getClassNames = Utilities_1.classNamesFunction();
+/**
+ * Cartesian chart used for
+ * 1.draw X and Y axis of the chart
+ * 2.Callout
+ * 3.Fit parent Continer
+ */
+var CartesianChartBase = /** @class */ (function (_super) {
+    tslib_1.__extends(CartesianChartBase, _super);
+    function CartesianChartBase(props) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _this = _super.call(this, props) || this;
+        _this.minLegendContainerHeight = 32;
+        _this._isRtl = Utilities_1.getRTL();
+        // TO DO: Write a common functional component for Multi value callout and divide sub count method
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _this._multiValueCallout = function (calloutProps) {
+            var yValueHoverSubCountsExists = _this._yValueHoverSubCountsExists(calloutProps.YValueHover);
+            return (React.createElement("div", { className: _this._classNames.calloutContentRoot },
+                React.createElement("div", { className: _this._classNames.calloutDateTimeContainer, style: yValueHoverSubCountsExists ? { marginBottom: '11px' } : {} },
+                    React.createElement("div", tslib_1.__assign({ className: _this._classNames.calloutContentX }, index_1.getAccessibleDataObject(calloutProps.xAxisCalloutAccessibilityData, 'text', false)), index_1.convertToLocaleString(calloutProps.hoverXValue, _this.props.culture))),
+                React.createElement("div", { className: _this._classNames.calloutInfoContainer, style: yValueHoverSubCountsExists ? { display: 'flex' } : {} },
+                    calloutProps.YValueHover &&
+                        calloutProps.YValueHover.map(function (yValue, index, yValues) {
+                            var isLast = index + 1 === yValues.length;
+                            var _a = yValue.shouldDrawBorderBottom, shouldDrawBorderBottom = _a === void 0 ? false : _a;
+                            return (React.createElement("div", tslib_1.__assign({}, index_1.getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false), { key: "callout-content-" + index, style: yValueHoverSubCountsExists
+                                    ? tslib_1.__assign({ display: 'inline-block' }, (shouldDrawBorderBottom && {
+                                        borderBottom: "1px solid " + _this.props.theme.semanticColors.menuDivider,
+                                        paddingBottom: '10px',
+                                    })) : tslib_1.__assign({}, (shouldDrawBorderBottom && {
+                                    borderBottom: "1px solid " + _this.props.theme.semanticColors.menuDivider,
+                                    paddingBottom: '10px',
+                                })) }), _this._getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)));
+                        }),
+                    !!calloutProps.descriptionMessage && (React.createElement("div", { className: _this._classNames.descriptionMessage }, calloutProps.descriptionMessage)))));
+        };
+        // Call back to the chart.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _this._getData = function (xScale, yScale) {
+            _this.props.getGraphData &&
+                _this.props.getGraphData(xScale, yScale, _this.state.containerHeight - _this.state._removalValueForTextTuncate, _this.state.containerWidth, _this.xAxisElement);
+        };
+        _this.state = {
+            containerHeight: 0,
+            containerWidth: 0,
+            _width: _this.props.width || 600,
+            _height: _this.props.height || 350,
+            _removalValueForTextTuncate: 0,
+            isRemoveValCalculated: true,
+        };
+        _this.idForGraph = Utilities_1.getId('chart_');
+        /**
+         * In RTL mode, Only graph will be rendered left/right. We need to provide left and right margins manually.
+         * So that, in RTL, left margins becomes right margins and viceversa.
+         * As graph needs to be drawn perfecty, these values consider as default values.
+         * Same margins using for all other cartesian charts. Can be accessible through 'getMargins' call back method.
+         */
+        _this.margins = {
+            top: (_b = (_a = _this.props.margins) === null || _a === void 0 ? void 0 : _a.top) !== null && _b !== void 0 ? _b : 20,
+            bottom: (_d = (_c = _this.props.margins) === null || _c === void 0 ? void 0 : _c.bottom) !== null && _d !== void 0 ? _d : 35,
+            right: _this._isRtl ? (_f = (_e = _this.props.margins) === null || _e === void 0 ? void 0 : _e.left) !== null && _f !== void 0 ? _f : 40 : (_h = (_g = _this.props.margins) === null || _g === void 0 ? void 0 : _g.right) !== null && _h !== void 0 ? _h : 20,
+            left: _this._isRtl ? (_k = (_j = _this.props.margins) === null || _j === void 0 ? void 0 : _j.right) !== null && _k !== void 0 ? _k : 20 : (_m = (_l = _this.props.margins) === null || _l === void 0 ? void 0 : _l.left) !== null && _m !== void 0 ? _m : 40,
+        };
+        return _this;
+    }
+    CartesianChartBase.prototype.componentDidMount = function () {
+        this._fitParentContainer();
+    };
+    CartesianChartBase.prototype.componentWillUnmount = function () {
+        cancelAnimationFrame(this._reqID);
+    };
+    CartesianChartBase.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps.height !== this.props.height || prevProps.width !== this.props.width) {
+            this._fitParentContainer();
+        }
+        if (!this.props.wrapXAxisLables &&
+            this.props.rotateXAxisLables &&
+            this.props.xAxisType === index_1.XAxisTypes.StringAxis) {
+            var rotateLabelProps = {
+                node: this.xAxisElement,
+                xAxis: this._xScale,
+            };
+            var rotatedHeight = index_1.rotateXAxisLabels(rotateLabelProps);
+            if (this.state.isRemoveValCalculated &&
+                this.state._removalValueForTextTuncate !== rotatedHeight + this.margins.bottom &&
+                rotatedHeight > 0) {
+                this.setState({
+                    _removalValueForTextTuncate: rotatedHeight + this.margins.bottom,
+                    isRemoveValCalculated: false,
+                });
+            }
+        }
+    };
+    CartesianChartBase.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, calloutProps = _a.calloutProps, points = _a.points, chartType = _a.chartType, chartHoverProps = _a.chartHoverProps, svgFocusZoneProps = _a.svgFocusZoneProps, svgProps = _a.svgProps, culture = _a.culture;
+        if (this.props.parentRef) {
+            this._fitParentContainer();
+        }
+        // Callback for margins to the chart
+        this.props.getmargins && this.props.getmargins(this.margins);
+        var XAxisParams = {
+            domainNRangeValues: index_1.getDomainNRangeValues(points, this.margins, this.state.containerWidth, chartType, this._isRtl, this.props.xAxisType, this.props.barwidth, this.props.tickValues),
+            xAxisElement: this.xAxisElement,
+            showRoundOffXTickValues: true,
+            xAxisCount: this.props.xAxisTickCount,
+            xAxistickSize: this.props.xAxistickSize,
+            tickPadding: this.props.tickPadding || this.props.showXAxisLablesTooltip ? 5 : 10,
+            xAxisPadding: this.props.xAxisPadding,
+        };
+        var YAxisParams = {
+            margins: this.margins,
+            containerWidth: this.state.containerWidth,
+            containerHeight: this.state.containerHeight - this.state._removalValueForTextTuncate,
+            yAxisElement: this.yAxisElement,
+            yAxisTickFormat: this.props.yAxisTickFormat,
+            yAxisTickCount: this.props.yAxisTickCount,
+            yMinValue: this.props.yMinValue || 0,
+            yMaxValue: this.props.yMaxValue || 0,
+            tickPadding: 10,
+            maxOfYVal: this.props.maxOfYVal,
+            yMinMaxValues: index_1.getMinMaxOfYAxis(points, chartType),
+            yAxisPadding: this.props.yAxisPadding,
+        };
+        /**
+         * These scales used for 2 purposes.
+         * 1. To create x and y axis
+         * 2. To draw the graph.
+         * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var xScale;
+        switch (this.props.xAxisType) {
+            case index_1.XAxisTypes.NumericAxis:
+                xScale = index_1.createNumericXAxis(XAxisParams, culture);
+                break;
+            case index_1.XAxisTypes.DateAxis:
+                xScale = index_1.createDateXAxis(XAxisParams, this.props.tickParams);
+                break;
+            case index_1.XAxisTypes.StringAxis:
+                xScale = index_1.createStringXAxis(XAxisParams, this.props.tickParams, this.props.datasetForXAxisDomain, culture);
+                break;
+            default:
+                xScale = index_1.createNumericXAxis(XAxisParams, culture);
+        }
+        this._xScale = xScale;
+        /*
+         * To enable wrapping of x axis tick values or to disaply complete x axis tick values,
+         * we need to calculate how much space it needed to render the text.
+         * No need to re-calculate every time the chart renders and same time need to get an update. So using setState.
+         * Required space will be calculated first time chart rendering and if any width/height of chart updated.
+         * */
+        if (this.props.wrapXAxisLables || this.props.showXAxisLablesTooltip) {
+            var wrapLabelProps = {
+                node: this.xAxisElement,
+                xAxis: xScale,
+                showXAxisLablesTooltip: this.props.showXAxisLablesTooltip || false,
+                noOfCharsToTruncate: this.props.noOfCharsToTruncate || 4,
+            };
+            var temp = xScale && index_1.createWrapOfXLabels(wrapLabelProps);
+            // this value need to be updated for draw graph updated. So instead of using private value, using set state.
+            if (this.state.isRemoveValCalculated && this.state._removalValueForTextTuncate !== temp) {
+                this.setState({ _removalValueForTextTuncate: temp, isRemoveValCalculated: false });
+            }
+        }
+        /**
+         * These scales used for 2 purposes.
+         * 1. To create x and y axis
+         * 2. To draw the graph.
+         * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var yScale;
+        var axisData = { yAxisDomainValues: [] };
+        if (this.props.yAxisType && this.props.yAxisType === index_1.YAxisType.StringAxis) {
+            yScale = index_1.createStringYAxis(YAxisParams, this.props.stringDatasetForYAxisDomain, this._isRtl);
+        }
+        else {
+            yScale = index_1.createYAxis(YAxisParams, this._isRtl, axisData);
+        }
+        this.props.getAxisData && this.props.getAxisData(axisData);
+        // Callback function for chart, returns axis
+        this._getData(xScale, yScale);
+        this._classNames = getClassNames(this.props.styles, {
+            theme: this.props.theme,
+            width: this.state._width,
+            height: this.state._height,
+            className: this.props.className,
+            isRtl: this._isRtl,
+        });
+        var svgDimensions = {
+            width: this.state.containerWidth,
+            height: this.state.containerHeight,
+        };
+        var children = this.props.children(tslib_1.__assign(tslib_1.__assign({}, this.state), { xScale: xScale, yScale: yScale }));
+        var focusDirection;
+        if (this.props.focusZoneDirection === react_focus_1.FocusZoneDirection.vertical) {
+            focusDirection = this.props.focusZoneDirection;
+        }
+        else if (this.props.focusZoneDirection) {
+            focusDirection = this.props.focusZoneDirection;
+        }
+        else {
+            focusDirection = react_focus_1.FocusZoneDirection.horizontal;
+        }
+        return (React.createElement("div", { id: this.idForGraph, className: this._classNames.root, role: 'presentation', ref: function (rootElem) { return (_this.chartContainer = rootElem); }, onMouseLeave: this.props.onChartMouseLeave },
+            React.createElement(react_focus_1.FocusZone, tslib_1.__assign({ direction: focusDirection }, svgFocusZoneProps),
+                React.createElement("svg", tslib_1.__assign({ width: svgDimensions.width, height: svgDimensions.height, "aria-label": this.props.chartTitle, style: { display: 'block' } }, svgProps),
+                    React.createElement("g", { ref: function (e) {
+                            _this.xAxisElement = e;
+                        }, id: "xAxisGElement" + this.idForGraph, 
+                        // To add wrap of x axis lables feature, need to remove word height from svg height.
+                        transform: "translate(0, " + (svgDimensions.height - this.margins.bottom - this.state._removalValueForTextTuncate) + ")", className: this._classNames.xAxis }),
+                    React.createElement("g", { ref: function (e) {
+                            _this.yAxisElement = e;
+                        }, id: "yAxisGElement" + this.idForGraph, transform: "translate(" + (this._isRtl ? svgDimensions.width - this.margins.right : this.margins.left) + ", 0)", className: this._classNames.yAxis }),
+                    children)),
+            !this.props.hideLegend && (React.createElement("div", { ref: function (e) { return (_this.legendContainer = e); }, className: this._classNames.legendContainer }, this.props.legendBars)),
+            !this.props.hideTooltip && calloutProps.isCalloutVisible && (React.createElement(Callout_1.Callout, tslib_1.__assign({}, calloutProps),
+                this.props.customizedCallout && this.props.customizedCallout,
+                !this.props.customizedCallout && this.props.isCalloutForStack && this._multiValueCallout(calloutProps),
+                !this.props.customizedCallout && !this.props.isCalloutForStack && (React.createElement(index_1.ChartHoverCard, tslib_1.__assign({ XValue: calloutProps.XValue, Legend: calloutProps.legend, YValue: calloutProps.YValue, color: calloutProps.color, culture: this.props.culture }, chartHoverProps)))))));
+    };
+    CartesianChartBase.prototype._yValueHoverSubCountsExists = function (yValueHover) {
+        if (yValueHover) {
+            return yValueHover.some(function (yValue) { return yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string'; });
+        }
+        return false;
+    };
+    CartesianChartBase.prototype._getCalloutContent = function (xValue, index, yValueHoverSubCountsExists, isLast) {
+        var marginStyle = isLast ? {} : { marginRight: '16px' };
+        var toDrawShape = xValue.index !== undefined && xValue.index !== -1;
+        var _classNames = getClassNames(this.props.styles, {
+            theme: this.props.theme,
+            width: this.state._width,
+            height: this.state._height,
+            className: this.props.className,
+            isRtl: this._isRtl,
+            lineColor: xValue.color,
+            toDrawShape: toDrawShape,
+        });
+        var culture = this.props.culture;
+        var yValue = index_1.convertToLocaleString(xValue.y, culture);
+        if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {
+            return (React.createElement("div", { style: yValueHoverSubCountsExists ? marginStyle : {} },
+                yValueHoverSubCountsExists && (React.createElement("div", { className: "ms-fontWeight-semibold", style: { fontSize: '12pt' } },
+                    xValue.legend,
+                    " (",
+                    yValue,
+                    ")")),
+                React.createElement("div", { id: index + "_" + xValue.y, className: _classNames.calloutBlockContainer },
+                    toDrawShape && (React.createElement(index_2.Shape, { svgProps: {
+                            className: _classNames.shapeStyles,
+                        }, pathProps: { fill: xValue.color }, shape: index_1.Points[xValue.index % Object.keys(index_1.pointTypes).length] })),
+                    React.createElement("div", null,
+                        React.createElement("div", { className: _classNames.calloutlegendText },
+                            " ",
+                            xValue.legend),
+                        React.createElement("div", { className: _classNames.calloutContentY }, index_1.convertToLocaleString(xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y || xValue.data, culture))))));
+        }
+        else {
+            var subcounts_1 = xValue.yAxisCalloutData;
+            return (React.createElement("div", { style: marginStyle },
+                React.createElement("div", { className: "ms-fontWeight-semibold", style: { fontSize: '12pt' } },
+                    xValue.legend,
+                    " (",
+                    yValue,
+                    ")"),
+                Object.keys(subcounts_1).map(function (subcountName) {
+                    return (React.createElement("div", { key: subcountName, className: _classNames.calloutBlockContainer },
+                        React.createElement("div", { className: _classNames.calloutlegendText },
+                            " ",
+                            index_1.convertToLocaleString(subcountName, culture)),
+                        React.createElement("div", { className: _classNames.calloutContentY }, index_1.convertToLocaleString(subcounts_1[subcountName], culture))));
+                })));
+        }
+    };
+    /**
+     * When screen resizes, along with screen, chart also auto adjusted.
+     * This method used to adjust height and width of the charts.
+     */
+    CartesianChartBase.prototype._fitParentContainer = function () {
+        var _this = this;
+        var _a = this.state, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight;
+        this._reqID = requestAnimationFrame(function () {
+            var legendContainerHeight;
+            if (_this.props.hideLegend) {
+                // If there is no legend, need not to allocate some space from total chart space.
+                legendContainerHeight = 0;
+            }
+            else {
+                var legendContainerComputedStyles = getComputedStyle(_this.legendContainer);
+                legendContainerHeight =
+                    (_this.legendContainer.getBoundingClientRect().height || _this.minLegendContainerHeight) +
+                        parseFloat(legendContainerComputedStyles.marginTop || '0') +
+                        parseFloat(legendContainerComputedStyles.marginBottom || '0');
+            }
+            var container = _this.props.parentRef ? _this.props.parentRef : _this.chartContainer;
+            var currentContainerWidth = container.getBoundingClientRect().width;
+            var currentContainerHeight = container.getBoundingClientRect().height > legendContainerHeight
+                ? container.getBoundingClientRect().height
+                : 350;
+            var shouldResize = containerWidth !== currentContainerWidth || containerHeight !== currentContainerHeight - legendContainerHeight;
+            if (shouldResize) {
+                _this.setState({
+                    containerWidth: currentContainerWidth,
+                    containerHeight: currentContainerHeight - legendContainerHeight,
+                });
+            }
+        });
+    };
+    return CartesianChartBase;
+}(React.Component));
+exports.CartesianChartBase = CartesianChartBase;
+//# sourceMappingURL=CartesianChart.base.js.map

package/lib-commonjs/components/CommonComponents/CartesianChart.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartesianChart.base.js","sourceRoot":"../src/","sources":["components/CommonComponents/CartesianChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { Callout } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport {\n  ICartesianChartStyles,\n  ICartesianChartStyleProps,\n  IModifiedCartesianChartProps,\n  IYValueHover,\n} from '../../index';\nimport {\n  ChartHoverCard,\n  convertToLocaleString,\n  createNumericXAxis,\n  createStringXAxis,\n  IAxisData,\n  getAccessibleDataObject,\n  getDomainNRangeValues,\n  createDateXAxis,\n  createYAxis,\n  createStringYAxis,\n  IMargins,\n  getMinMaxOfYAxis,\n  XAxisTypes,\n  YAxisType,\n  createWrapOfXLabels,\n  rotateXAxisLabels,\n  Points,\n  pointTypes,\n} from '../../utilities/index';\nimport { LegendShape, Shape } from '../Legends/index';\n\nconst getClassNames = classNamesFunction<ICartesianChartStyleProps, ICartesianChartStyles>();\n\nexport interface ICartesianChartState {\n  containerWidth: number;\n  containerHeight: number;\n  _width: number;\n  _height: number;\n  /* To update this values using setState in render method.\n   * To avoid multiple re renders, Only first time setting the value.\n   */\n  isRemoveValCalculated?: boolean;\n  /* Used for when WrapXAxisLabels props appeared.\n   * To display the total word (space separated words), Need to have more space than usual.\n   * This height will get total height need to disaply total word.\n   * These value need to be removed from actual svg height/graph height.\n   * Defalut value is 0. And this values calculted when 'wrapXAxisLables' or 'showXAxisLablesTooltip' is true.\n   */\n  _removalValueForTextTuncate?: number;\n}\n\n/**\n * Cartesian chart used for\n * 1.draw X and Y axis of the chart\n * 2.Callout\n * 3.Fit parent Continer\n */\nexport class CartesianChartBase extends React.Component<IModifiedCartesianChartProps, ICartesianChartState> {\n  private _classNames: IProcessedStyleSet<ICartesianChartStyles>;\n  private chartContainer: HTMLDivElement;\n  private legendContainer: HTMLDivElement;\n  private minLegendContainerHeight: number = 32;\n  private xAxisElement: SVGElement | null;\n  private yAxisElement: SVGElement | null;\n  private margins: IMargins;\n  private idForGraph: string;\n  private _reqID: number;\n  private _isRtl: boolean = getRTL();\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _xScale: any;\n\n  constructor(props: IModifiedCartesianChartProps) {\n    super(props);\n    this.state = {\n      containerHeight: 0,\n      containerWidth: 0,\n      _width: this.props.width || 600,\n      _height: this.props.height || 350,\n      _removalValueForTextTuncate: 0,\n      isRemoveValCalculated: true,\n    };\n    this.idForGraph = getId('chart_');\n    /**\n     * In RTL mode, Only graph will be rendered left/right. We need to provide left and right margins manually.\n     * So that, in RTL, left margins becomes right margins and viceversa.\n     * As graph needs to be drawn perfecty, these values consider as default values.\n     * Same margins using for all other cartesian charts. Can be accessible through 'getMargins' call back method.\n     */\n    this.margins = {\n      top: this.props.margins?.top ?? 20,\n      bottom: this.props.margins?.bottom ?? 35,\n      right: this._isRtl ? this.props.margins?.left ?? 40 : this.props.margins?.right ?? 20,\n      left: this._isRtl ? this.props.margins?.right ?? 20 : this.props.margins?.left ?? 40,\n    };\n  }\n\n  public componentDidMount(): void {\n    this._fitParentContainer();\n  }\n\n  public componentWillUnmount(): void {\n    cancelAnimationFrame(this._reqID);\n  }\n\n  public componentDidUpdate(prevProps: IModifiedCartesianChartProps): void {\n    if (prevProps.height !== this.props.height || prevProps.width !== this.props.width) {\n      this._fitParentContainer();\n    }\n\n    if (\n      !this.props.wrapXAxisLables &&\n      this.props.rotateXAxisLables &&\n      this.props.xAxisType! === XAxisTypes.StringAxis\n    ) {\n      const rotateLabelProps = {\n        node: this.xAxisElement,\n        xAxis: this._xScale,\n      };\n      const rotatedHeight = rotateXAxisLabels(rotateLabelProps);\n      if (\n        this.state.isRemoveValCalculated &&\n        this.state._removalValueForTextTuncate !== rotatedHeight! + this.margins.bottom! &&\n        rotatedHeight! > 0\n      ) {\n        this.setState({\n          _removalValueForTextTuncate: rotatedHeight! + this.margins.bottom!,\n          isRemoveValCalculated: false,\n        });\n      }\n    }\n  }\n\n  public render(): JSX.Element {\n    const { calloutProps, points, chartType, chartHoverProps, svgFocusZoneProps, svgProps, culture } = this.props;\n    if (this.props.parentRef) {\n      this._fitParentContainer();\n    }\n    // Callback for margins to the chart\n    this.props.getmargins && this.props.getmargins(this.margins);\n\n    const XAxisParams = {\n      domainNRangeValues: getDomainNRangeValues(\n        points,\n        this.margins,\n        this.state.containerWidth,\n        chartType,\n        this._isRtl,\n        this.props.xAxisType,\n        this.props.barwidth!,\n        this.props.tickValues!,\n      ),\n      xAxisElement: this.xAxisElement!,\n      showRoundOffXTickValues: true,\n      xAxisCount: this.props.xAxisTickCount,\n      xAxistickSize: this.props.xAxistickSize,\n      tickPadding: this.props.tickPadding || this.props.showXAxisLablesTooltip ? 5 : 10,\n      xAxisPadding: this.props.xAxisPadding,\n    };\n\n    const YAxisParams = {\n      margins: this.margins,\n      containerWidth: this.state.containerWidth,\n      containerHeight: this.state.containerHeight - this.state._removalValueForTextTuncate!,\n      yAxisElement: this.yAxisElement,\n      yAxisTickFormat: this.props.yAxisTickFormat!,\n      yAxisTickCount: this.props.yAxisTickCount!,\n      yMinValue: this.props.yMinValue || 0,\n      yMaxValue: this.props.yMaxValue || 0,\n      tickPadding: 10,\n      maxOfYVal: this.props.maxOfYVal,\n      yMinMaxValues: getMinMaxOfYAxis(points, chartType),\n      yAxisPadding: this.props.yAxisPadding,\n    };\n\n    /**\n     * These scales used for 2 purposes.\n     * 1. To create x and y axis\n     * 2. To draw the graph.\n     * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    let xScale: any;\n    switch (this.props.xAxisType!) {\n      case XAxisTypes.NumericAxis:\n        xScale = createNumericXAxis(XAxisParams, culture);\n        break;\n      case XAxisTypes.DateAxis:\n        xScale = createDateXAxis(XAxisParams, this.props.tickParams!);\n        break;\n      case XAxisTypes.StringAxis:\n        xScale = createStringXAxis(XAxisParams, this.props.tickParams!, this.props.datasetForXAxisDomain!, culture);\n        break;\n      default:\n        xScale = createNumericXAxis(XAxisParams, culture);\n    }\n    this._xScale = xScale;\n\n    /*\n     * To enable wrapping of x axis tick values or to disaply complete x axis tick values,\n     * we need to calculate how much space it needed to render the text.\n     * No need to re-calculate every time the chart renders and same time need to get an update. So using setState.\n     * Required space will be calculated first time chart rendering and if any width/height of chart updated.\n     * */\n    if (this.props.wrapXAxisLables || this.props.showXAxisLablesTooltip) {\n      const wrapLabelProps = {\n        node: this.xAxisElement,\n        xAxis: xScale,\n        showXAxisLablesTooltip: this.props.showXAxisLablesTooltip || false,\n        noOfCharsToTruncate: this.props.noOfCharsToTruncate || 4,\n      };\n      const temp = xScale && (createWrapOfXLabels(wrapLabelProps) as number);\n      // this value need to be updated for draw graph updated. So instead of using private value, using set state.\n      if (this.state.isRemoveValCalculated && this.state._removalValueForTextTuncate !== temp) {\n        this.setState({ _removalValueForTextTuncate: temp, isRemoveValCalculated: false });\n      }\n    }\n\n    /**\n     * These scales used for 2 purposes.\n     * 1. To create x and y axis\n     * 2. To draw the graph.\n     * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    let yScale: any;\n    const axisData: IAxisData = { yAxisDomainValues: [] };\n    if (this.props.yAxisType && this.props.yAxisType === YAxisType.StringAxis) {\n      yScale = createStringYAxis(YAxisParams, this.props.stringDatasetForYAxisDomain!, this._isRtl);\n    } else {\n      yScale = createYAxis(YAxisParams, this._isRtl, axisData);\n    }\n    this.props.getAxisData && this.props.getAxisData(axisData);\n    // Callback function for chart, returns axis\n    this._getData(xScale, yScale);\n\n    this._classNames = getClassNames(this.props.styles!, {\n      theme: this.props.theme!,\n      width: this.state._width,\n      height: this.state._height,\n      className: this.props.className,\n      isRtl: this._isRtl,\n    });\n\n    const svgDimensions = {\n      width: this.state.containerWidth,\n      height: this.state.containerHeight,\n    };\n\n    const children = this.props.children({\n      ...this.state,\n      xScale,\n      yScale,\n    });\n\n    let focusDirection;\n    if (this.props.focusZoneDirection === FocusZoneDirection.vertical) {\n      focusDirection = this.props.focusZoneDirection;\n    } else if (this.props.focusZoneDirection) {\n      focusDirection = this.props.focusZoneDirection;\n    } else {\n      focusDirection = FocusZoneDirection.horizontal;\n    }\n    return (\n      <div\n        id={this.idForGraph}\n        className={this._classNames.root}\n        role={'presentation'}\n        ref={(rootElem: HTMLDivElement) => (this.chartContainer = rootElem)}\n        onMouseLeave={this.props.onChartMouseLeave}\n      >\n        <FocusZone direction={focusDirection} {...svgFocusZoneProps}>\n          <svg\n            width={svgDimensions.width}\n            height={svgDimensions.height}\n            aria-label={this.props.chartTitle}\n            style={{ display: 'block' }}\n            {...svgProps}\n          >\n            <g\n              ref={(e: SVGElement | null) => {\n                this.xAxisElement = e;\n              }}\n              id={`xAxisGElement${this.idForGraph}`}\n              // To add wrap of x axis lables feature, need to remove word height from svg height.\n              transform={`translate(0, ${\n                svgDimensions.height - this.margins.bottom! - this.state._removalValueForTextTuncate!\n              })`}\n              className={this._classNames.xAxis}\n            />\n            <g\n              ref={(e: SVGElement | null) => {\n                this.yAxisElement = e;\n              }}\n              id={`yAxisGElement${this.idForGraph}`}\n              transform={`translate(${\n                this._isRtl ? svgDimensions.width - this.margins.right! : this.margins.left!\n              }, 0)`}\n              className={this._classNames.yAxis}\n            />\n            {children}\n          </svg>\n        </FocusZone>\n        {!this.props.hideLegend && (\n          <div ref={(e: HTMLDivElement) => (this.legendContainer = e)} className={this._classNames.legendContainer}>\n            {this.props.legendBars}\n          </div>\n        )}\n        {!this.props.hideTooltip && calloutProps!.isCalloutVisible && (\n          <Callout {...calloutProps}>\n            {/** Given custom callout, then it will render */}\n            {this.props.customizedCallout && this.props.customizedCallout}\n            {/** single x point its corresponding y points of all the bars/lines in chart will render in callout */}\n            {!this.props.customizedCallout && this.props.isCalloutForStack && this._multiValueCallout(calloutProps)}\n            {/** single x point its corresponding y point of single line/bar in the chart will render in callout */}\n            {!this.props.customizedCallout && !this.props.isCalloutForStack && (\n              <ChartHoverCard\n                XValue={calloutProps.XValue}\n                Legend={calloutProps.legend!}\n                YValue={calloutProps.YValue!}\n                color={calloutProps.color!}\n                culture={this.props.culture}\n                {...chartHoverProps}\n              />\n            )}\n          </Callout>\n        )}\n      </div>\n    );\n  }\n\n  // TO DO: Write a common functional component for Multi value callout and divide sub count method\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _multiValueCallout = (calloutProps: any) => {\n    const yValueHoverSubCountsExists: boolean = this._yValueHoverSubCountsExists(calloutProps.YValueHover);\n    return (\n      <div className={this._classNames.calloutContentRoot}>\n        <div\n          className={this._classNames.calloutDateTimeContainer}\n          style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}\n        >\n          <div\n            className={this._classNames.calloutContentX}\n            {...getAccessibleDataObject(calloutProps!.xAxisCalloutAccessibilityData, 'text', false)}\n          >\n            {convertToLocaleString(calloutProps!.hoverXValue, this.props.culture)}\n          </div>\n        </div>\n        <div\n          className={this._classNames.calloutInfoContainer}\n          style={yValueHoverSubCountsExists ? { display: 'flex' } : {}}\n        >\n          {calloutProps!.YValueHover &&\n            calloutProps!.YValueHover.map((yValue: IYValueHover, index: number, yValues: IYValueHover[]) => {\n              const isLast: boolean = index + 1 === yValues.length;\n              const { shouldDrawBorderBottom = false } = yValue;\n              return (\n                <div\n                  {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}\n                  key={`callout-content-${index}`}\n                  style={\n                    yValueHoverSubCountsExists\n                      ? {\n                          display: 'inline-block',\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${this.props.theme!.semanticColors.menuDivider}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                      : {\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${this.props.theme!.semanticColors.menuDivider}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                  }\n                >\n                  {this._getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}\n                </div>\n              );\n            })}\n          {!!calloutProps.descriptionMessage && (\n            <div className={this._classNames.descriptionMessage}>{calloutProps.descriptionMessage}</div>\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  private _yValueHoverSubCountsExists(yValueHover?: IYValueHover[]) {\n    if (yValueHover) {\n      return yValueHover.some(\n        (yValue: {\n          legend?: string;\n          y?: number;\n          color?: string;\n          yAxisCalloutData?: string | { [id: string]: number };\n        }) => yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string',\n      );\n    }\n    return false;\n  }\n\n  private _getCalloutContent(\n    xValue: IYValueHover,\n    index: number,\n    yValueHoverSubCountsExists: boolean,\n    isLast: boolean,\n  ): React.ReactNode {\n    const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };\n    const toDrawShape = xValue.index !== undefined && xValue.index !== -1;\n    const _classNames = getClassNames(this.props.styles!, {\n      theme: this.props.theme!,\n      width: this.state._width,\n      height: this.state._height,\n      className: this.props.className,\n      isRtl: this._isRtl,\n      lineColor: xValue.color,\n      toDrawShape,\n    });\n\n    const { culture } = this.props;\n    const yValue = convertToLocaleString(xValue.y, culture);\n    if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {\n      return (\n        <div style={yValueHoverSubCountsExists ? marginStyle : {}}>\n          {yValueHoverSubCountsExists && (\n            <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n              {xValue.legend!} ({yValue})\n            </div>\n          )}\n          <div id={`${index}_${xValue.y}`} className={_classNames.calloutBlockContainer}>\n            {toDrawShape && (\n              <Shape\n                svgProps={{\n                  className: _classNames.shapeStyles,\n                }}\n                pathProps={{ fill: xValue.color }}\n                shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}\n              />\n            )}\n            <div>\n              <div className={_classNames.calloutlegendText}> {xValue.legend}</div>\n              <div className={_classNames.calloutContentY}>\n                {convertToLocaleString(\n                  xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y || xValue.data,\n                  culture,\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    } else {\n      const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };\n      return (\n        <div style={marginStyle}>\n          <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n            {xValue.legend!} ({yValue})\n          </div>\n          {Object.keys(subcounts).map((subcountName: string) => {\n            return (\n              <div key={subcountName} className={_classNames.calloutBlockContainer}>\n                <div className={_classNames.calloutlegendText}> {convertToLocaleString(subcountName, culture)}</div>\n                <div className={_classNames.calloutContentY}>\n                  {convertToLocaleString(subcounts[subcountName], culture)}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      );\n    }\n  }\n\n  /**\n   * When screen resizes, along with screen, chart also auto adjusted.\n   * This method used to adjust height and width of the charts.\n   */\n  private _fitParentContainer(): void {\n    const { containerWidth, containerHeight } = this.state;\n    this._reqID = requestAnimationFrame(() => {\n      let legendContainerHeight;\n      if (this.props.hideLegend) {\n        // If there is no legend, need not to allocate some space from total chart space.\n        legendContainerHeight = 0;\n      } else {\n        const legendContainerComputedStyles = getComputedStyle(this.legendContainer);\n        legendContainerHeight =\n          (this.legendContainer.getBoundingClientRect().height || this.minLegendContainerHeight) +\n          parseFloat(legendContainerComputedStyles.marginTop || '0') +\n          parseFloat(legendContainerComputedStyles.marginBottom || '0');\n      }\n      const container = this.props.parentRef ? this.props.parentRef : this.chartContainer;\n      const currentContainerWidth = container.getBoundingClientRect().width;\n      const currentContainerHeight =\n        container.getBoundingClientRect().height > legendContainerHeight\n          ? container.getBoundingClientRect().height\n          : 350;\n      const shouldResize =\n        containerWidth !== currentContainerWidth || containerHeight !== currentContainerHeight - legendContainerHeight;\n      if (shouldResize) {\n        this.setState({\n          containerWidth: currentContainerWidth,\n          containerHeight: currentContainerHeight - legendContainerHeight,\n        });\n      }\n    });\n  }\n\n  // Call back to the chart.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _getData = (xScale: any, yScale: any) => {\n    this.props.getGraphData &&\n      this.props.getGraphData(\n        xScale,\n        yScale,\n        this.state.containerHeight - this.state._removalValueForTextTuncate!,\n        this.state.containerWidth,\n        this.xAxisElement,\n      );\n  };\n}\n"]}

package/lib-commonjs/components/CommonComponents/CartesianChart.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IModifiedCartesianChartProps } from './CartesianChart.types';
+export declare const CartesianChart: React.FunctionComponent<IModifiedCartesianChartProps>;

package/lib-commonjs/components/CommonComponents/CartesianChart.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CartesianChart = void 0;
+var Utilities_1 = require("@fluentui/react/lib-commonjs/Utilities");
+var CartesianChart_base_1 = require("./CartesianChart.base");
+var CartesianChart_styles_1 = require("./CartesianChart.styles");
+exports.CartesianChart = Utilities_1.styled(CartesianChart_base_1.CartesianChartBase, CartesianChart_styles_1.getStyles);
+//# sourceMappingURL=CartesianChart.js.map

package/lib-commonjs/components/CommonComponents/CartesianChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartesianChart.js","sourceRoot":"../src/","sources":["components/CommonComponents/CartesianChart.tsx"],"names":[],"mappings":";;;AACA,2DAAuD;AAEvD,6DAA2D;AAC3D,iEAAoD;AAEvC,QAAA,cAAc,GAA0D,kBAAM,CAIzF,wCAAkB,EAAE,iCAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { IModifiedCartesianChartProps, ICartesianChartStyleProps, ICartesianChartStyles } from './CartesianChart.types';\nimport { CartesianChartBase } from './CartesianChart.base';\nimport { getStyles } from './CartesianChart.styles';\n\nexport const CartesianChart: React.FunctionComponent<IModifiedCartesianChartProps> = styled<\n  IModifiedCartesianChartProps,\n  ICartesianChartStyleProps,\n  ICartesianChartStyles\n>(CartesianChartBase, getStyles);\n"]}

package/lib-commonjs/components/CommonComponents/CartesianChart.styles.d.ts

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