@fluentui/react-charting 5.16.22 → 5.16.23

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

@@ -1,23 +0,0 @@
-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 +0,0 @@
-{"version":3,"file":"TreeChart.types.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.types.ts"],"names":[],"mappings":"AA8BA,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;\n  /**\n   * Bodytext value (optional)\n   */\n  bodytext?: string;\n  /**\n   * Metric text value (optional)\n   */\n  metric?: string;\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;\n  /**\n   * Node Width Size for the Tree Layout\n   * * @default 75\n   */\n  layoutWidth?: number;\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;\n  /**\n   * Bodytext value (optional)\n   */\n  bodyText?: string;\n  /**\n   * Metric text value (optional)\n   */\n  metricName?: string;\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 body Text\n   */\n  rectBodyText: IStyle;\n  /**\n   *  Style for the node metric value Text\n   */\n  rectMetricText: IStyle;\n}\n"]}

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

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

package/lib/components/TreeChart/index.js

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

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

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

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import { IAccessibilityProps, IBasestate, IVerticalBarChartProps, IVerticalBarChartDataPoint, IYValueHover } from '../../index';
-export interface IVerticalBarChartState extends IBasestate {
-    dataPointCalloutProps?: IVerticalBarChartDataPoint;
-    /**
-     * data point of x, where rectangle is hovered or focused
-     */
-    activeXdataPoint: number | string | null;
-    YValueHover: IYValueHover[];
-    hoverXValue?: string | number | null;
-    callOutAccessibilityData?: IAccessibilityProps;
-    calloutLegend: string;
-    emptyChart?: boolean;
-}
-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;
-    private _domainMargin;
-    constructor(props: IVerticalBarChartProps);
-    componentDidMount(): void;
-    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;
-    /**
-     * This function checks if the given legend is highlighted or not.
-     * A legend can be highlighted in 2 ways:
-     * 1. selection: if the user clicks on it
-     * 2. hovering: if there is no selected legend and the user hovers over it
-     */
-    private _legendHighlighted;
-    /**
-     * This function checks if none of the legends is selected or hovered.
-     */
-    private _noLegendHighlighted;
-    private _getAriaLabel;
-    private _renderBarLabel;
-    private _getDomainMargins;
-}

package/lib/components/VerticalBarChart/VerticalBarChart.base.js

@@ -1,536 +0,0 @@
-import { __assign, __extends } from "tslib";
-import * as React from 'react';
-import { max as d3Max, min as d3Min } from 'd3-array';
-import { line as d3Line } from 'd3-shape';
-import { select as d3Select } from 'd3-selection';
-import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand } from 'd3-scale';
-import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
-import { DirectionalHint } from '@fluentui/react/lib/Callout';
-import { CartesianChart, ChartHoverCard, Legends, } from '../../index';
-import { FocusZoneDirection } from '@fluentui/react-focus';
-import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfXAxislabels, } from '../../utilities/index';
-import { formatPrefix as d3FormatPrefix } from 'd3-format';
-var CircleVisbility;
-(function (CircleVisbility) {
-    CircleVisbility["show"] = "visibility";
-    CircleVisbility["hide"] = "hidden";
-})(CircleVisbility || (CircleVisbility = {}));
-var getClassNames = classNamesFunction();
-var MIN_DOMAIN_MARGIN = 8;
-var VerticalBarChartBase = /** @class */ (function (_super) {
-    __extends(VerticalBarChartBase, _super);
-    function VerticalBarChartBase(props) {
-        var _this = _super.call(this, props) || this;
-        _this._isRtl = getRTL();
-        _this._createLine = function (
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        xScale, 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        yScale, containerHeight, containerWidth) {
-            var _a;
-            if (containerHeight === void 0) { containerHeight = 0; }
-            if (containerWidth === void 0) { containerWidth = 0; }
-            var isNumericAxis = _this._xAxisType === XAxisTypes.NumericAxis;
-            var xBarScale = _this._getScales(containerHeight, containerWidth, isNumericAxis).xBarScale;
-            var colorScale = _this._createColors();
-            var theme = _this.props.theme;
-            var _b = _this.props, data = _b.data, _c = _b.lineLegendColor, lineLegendColor = _c === void 0 ? theme.palette.yellow : _c, lineLegendText = _b.lineLegendText;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var lineData = [];
-            var line = [];
-            data &&
-                data.forEach(function (item, index) {
-                    if (item.lineData && item.lineData.y) {
-                        lineData.push({ x: item.x, y: item.lineData.y, point: item, index: index });
-                    }
-                });
-            var linePath = d3Line()
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                .x(function (d) { return (!isNumericAxis ? xBarScale(d.x) + 0.5 * xBarScale.bandwidth() : xScale(d.x)); })
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                .y(function (d) { return yScale(d.y); });
-            var shouldHighlight = _this._legendHighlighted(lineLegendText) || _this._noLegendHighlighted() ? true : false;
-            var lineBorderWidth = ((_a = _this.props.lineOptions) === null || _a === void 0 ? void 0 : _a.lineBorderWidth)
-                ? Number.parseFloat(_this.props.lineOptions.lineBorderWidth.toString())
-                : 0;
-            if (lineBorderWidth > 0) {
-                line.push(React.createElement("path", { opacity: shouldHighlight ? 1 : 0.1, d: linePath(lineData), fill: "transparent", strokeLinecap: "square", strokeWidth: 3 + lineBorderWidth * 2, stroke: theme.palette.white }));
-            }
-            line.push(React.createElement("path", { opacity: shouldHighlight ? 1 : 0.1, d: linePath(lineData), fill: "transparent", strokeLinecap: "square", strokeWidth: 3, stroke: lineLegendColor }));
-            var dots = lineData.map(function (item, index) {
-                var _a;
-                return (React.createElement("circle", { key: index, cx: !isNumericAxis ? xBarScale(item.x) + 0.5 * xBarScale.bandwidth() : xScale(item.x), cy: yScale(item.y), onMouseOver: _this._onBarHover.bind(_this, item.point, colorScale(item.y)), onMouseOut: _this._onBarLeave, r: 8, stroke: lineLegendColor, fill: _this.props.theme.palette.white, strokeWidth: 3, visibility: _this.state.activeXdataPoint === item.x ? CircleVisbility.show : CircleVisbility.hide, onClick: (_a = item.point.lineData) === null || _a === void 0 ? void 0 : _a.onClick }));
-            });
-            return (React.createElement(React.Fragment, null,
-                line,
-                dots));
-        };
-        _this._checkForLine = function () {
-            var data = _this.props.data;
-            return data.some(function (item) { var _a; return ((_a = item === null || item === void 0 ? void 0 : item.lineData) === null || _a === void 0 ? void 0 : _a.y) !== undefined; });
-        };
-        _this._getMargins = function (margins) {
-            _this.margins = margins;
-        };
-        _this._renderContentForBothLineAndBars = function (point) {
-            var _a = _this._getCalloutContentForLineAndBar(point), YValueHover = _a.YValueHover, hoverXValue = _a.hoverXValue;
-            var content = YValueHover.map(function (item, index) {
-                return (React.createElement(ChartHoverCard, __assign({ key: index, Legend: item.legend }, (index === 0 && { XValue: "" + (hoverXValue || item.data) }), { color: item.color, YValue: item.data || item.y, culture: _this.props.culture })));
-            });
-            return React.createElement(React.Fragment, null, content);
-        };
-        _this._renderContentForOnlyBars = function (props) {
-            var _a = _this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
-            return (React.createElement(React.Fragment, null,
-                React.createElement(ChartHoverCard, { XValue: props.xAxisCalloutData || props.x, Legend: props.legend, YValue: props.yAxisCalloutData || props.y, color: !useSingleColor && props.color ? props.color : _this._createColors()(props.y), culture: _this.props.culture })));
-        };
-        _this._renderCallout = function (props) {
-            return props
-                ? _this._isHavingLine
-                    ? _this._renderContentForBothLineAndBars(props)
-                    : _this._renderContentForOnlyBars(props)
-                : null;
-        };
-        _this._getCustomizedCallout = function () {
-            return _this.props.onRenderCalloutPerDataPoint
-                ? _this.props.onRenderCalloutPerDataPoint(_this.state.dataPointCalloutProps, _this._renderCallout)
-                : null;
-        };
-        _this._getGraphData = function (xScale, yScale, containerHeight, containerWidth, xElement) {
-            return (_this._bars =
-                _this._xAxisType === XAxisTypes.NumericAxis
-                    ? _this._createNumericBars(containerHeight, containerWidth, xElement)
-                    : _this._createStringBars(containerHeight, containerWidth, xElement));
-        };
-        _this._refCallback = function (element, legendTitle) {
-            _this._refArray.push({ index: legendTitle, refElement: element });
-        };
-        _this._getCalloutContentForLineAndBar = function (point) {
-            var _a, _b, _c, _d;
-            var YValueHover = [];
-            var _e = _this.props, theme = _e.theme, _f = _e.useSingleColor, useSingleColor = _f === void 0 ? false : _f;
-            var _g = _this.props, data = _g.data, lineLegendText = _g.lineLegendText, _h = _g.lineLegendColor, lineLegendColor = _h === void 0 ? theme.palette.yellow : _h;
-            var selectedPoint = data.filter(function (xDataPoint) { return xDataPoint.x === point.x; });
-            // there might be no y value of the line for the hovered bar. so we need to check this condition
-            if (_this._isHavingLine && ((_a = selectedPoint[0].lineData) === null || _a === void 0 ? void 0 : _a.y) !== undefined) {
-                // callout data for the  line
-                YValueHover.push({
-                    legend: lineLegendText,
-                    color: lineLegendColor,
-                    y: (_b = selectedPoint[0].lineData) === null || _b === void 0 ? void 0 : _b.y,
-                    data: (_c = selectedPoint[0].lineData) === null || _c === void 0 ? void 0 : _c.yAxisCalloutData,
-                    yAxisCalloutData: (_d = selectedPoint[0].lineData) === null || _d === void 0 ? void 0 : _d.yAxisCalloutData,
-                });
-            }
-            // callout data for the bar
-            YValueHover.push({
-                legend: selectedPoint[0].legend,
-                y: selectedPoint[0].y,
-                color: !useSingleColor
-                    ? selectedPoint[0].color
-                        ? selectedPoint[0].color
-                        : _this._createColors()(selectedPoint[0].y)
-                    : _this._createColors()(1),
-                data: selectedPoint[0].yAxisCalloutData,
-                yAxisCalloutData: selectedPoint[0].yAxisCalloutData,
-            });
-            return { YValueHover: YValueHover, hoverXValue: point.xAxisCalloutData || point.x.toString() };
-        };
-        _this._onBarLeave = function () {
-            /**/
-        };
-        _this._handleChartMouseLeave = function () {
-            _this._calloutAnchorPoint = null;
-            _this.setState({
-                isCalloutVisible: false,
-                activeXdataPoint: null,
-                YValueHover: [],
-                hoverXValue: '',
-            });
-        };
-        _this._onBarFocus = function (point, refArrayIndexNumber, color) {
-            var _a = _this._getCalloutContentForLineAndBar(point), YValueHover = _a.YValueHover, hoverXValue = _a.hoverXValue;
-            _this._refArray.forEach(function (obj, index) {
-                if (obj.index === point.legend && refArrayIndexNumber === index) {
-                    _this.setState({
-                        refSelected: obj.refElement,
-                        /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
-                        isCalloutVisible: _this.state.selectedLegend === '' || _this.state.selectedLegend === point.legend,
-                        calloutLegend: point.legend,
-                        dataForHoverCard: point.y,
-                        color: point.color || color,
-                        xCalloutValue: point.xAxisCalloutData || point.x.toString(),
-                        yCalloutValue: point.yAxisCalloutData,
-                        dataPointCalloutProps: point,
-                        activeXdataPoint: point.x,
-                        YValueHover: YValueHover,
-                        hoverXValue: hoverXValue,
-                        callOutAccessibilityData: point.callOutAccessibilityData,
-                    });
-                }
-            });
-        };
-        _this._getScales = function (containerHeight, containerWidth, isNumericScale) {
-            if (isNumericScale) {
-                var xMax = d3Max(_this._points, function (point) { return point.x; });
-                var xMin = d3Min(_this._points, function (point) { return point.x; });
-                var xBarScale = d3ScaleLinear()
-                    .domain(_this._isRtl ? [xMax, xMin] : [xMin, xMax])
-                    .nice()
-                    .range([
-                    _this.margins.left + _this._domainMargin,
-                    containerWidth - _this.margins.right - _this._barWidth - _this._domainMargin,
-                ]);
-                var yBarScale = d3ScaleLinear()
-                    .domain([0, _this._yMax])
-                    .range([0, containerHeight - _this.margins.bottom - _this.margins.top]);
-                return { xBarScale: xBarScale, yBarScale: yBarScale };
-            }
-            else {
-                var xBarScale = d3ScaleBand()
-                    .domain(_this._xAxisLabels)
-                    .range([_this.margins.left + _this._domainMargin, containerWidth - _this.margins.right - _this._domainMargin])
-                    .paddingInner(2 / 3);
-                var yBarScale = d3ScaleLinear()
-                    .domain([0, _this._yMax])
-                    .range([0, containerHeight - _this.margins.bottom - _this.margins.top]);
-                return { xBarScale: xBarScale, yBarScale: yBarScale };
-            }
-        };
-        _this._closeCallout = function () {
-            _this.setState({
-                isCalloutVisible: false,
-            });
-        };
-        _this._getLegendData = function (data, palette) {
-            var _a = _this.props, theme = _a.theme, useSingleColor = _a.useSingleColor;
-            var _b = _this.props, lineLegendText = _b.lineLegendText, _c = _b.lineLegendColor, lineLegendColor = _c === void 0 ? theme.palette.yellow : _c;
-            var actions = [];
-            data.forEach(function (point, _index) {
-                var color = !useSingleColor ? point.color : _this._createColors()(1);
-                // mapping data to the format Legends component needs
-                var legend = {
-                    title: point.legend,
-                    color: color,
-                    action: function () {
-                        _this._onLegendClick(point.legend);
-                    },
-                    hoverAction: function () {
-                        _this._handleChartMouseLeave();
-                        _this._onLegendHover(point.legend);
-                    },
-                    onMouseOutAction: function () {
-                        _this._onLegendLeave();
-                    },
-                };
-                actions.push(legend);
-            });
-            if (_this._isHavingLine && lineLegendText && lineLegendColor) {
-                var lineLegend = {
-                    title: lineLegendText,
-                    color: lineLegendColor,
-                    action: function () {
-                        _this._onLegendClick(lineLegendText);
-                    },
-                    hoverAction: function () {
-                        _this._handleChartMouseLeave();
-                        _this._onLegendHover(lineLegendText);
-                    },
-                    onMouseOutAction: function () {
-                        _this._onLegendLeave();
-                    },
-                    isLineLegendInBarChart: true,
-                };
-                actions.unshift(lineLegend);
-            }
-            var legends = (React.createElement(Legends, __assign({ legends: actions, enabledWrapLines: _this.props.enabledLegendsWrapLines, overflowProps: _this.props.legendsOverflowProps, focusZonePropsInHoverCard: _this.props.focusZonePropsForLegendsInHoverCard, overflowText: _this.props.legendsOverflowText }, _this.props.legendProps)));
-            return legends;
-        };
-        _this._getAxisData = function (yAxisData) {
-            if (yAxisData && yAxisData.yAxisDomainValues.length) {
-                var domainValue = yAxisData.yAxisDomainValues;
-                _this._yMax = Math.max(domainValue[domainValue.length - 1], _this.props.yMaxValue || 0);
-            }
-        };
-        /**
-         * This function checks if the given legend is highlighted or not.
-         * A legend can be highlighted in 2 ways:
-         * 1. selection: if the user clicks on it
-         * 2. hovering: if there is no selected legend and the user hovers over it
-         */
-        _this._legendHighlighted = function (legendTitle) {
-            return (_this.state.selectedLegend === legendTitle ||
-                (_this.state.selectedLegend === '' && _this.state.activeLegend === legendTitle));
-        };
-        /**
-         * This function checks if none of the legends is selected or hovered.
-         */
-        _this._noLegendHighlighted = function () {
-            return _this.state.selectedLegend === '' && _this.state.activeLegend === '';
-        };
-        _this._getAriaLabel = function (point) {
-            var _a, _b, _c;
-            var xValue = point.xAxisCalloutData || point.x;
-            var legend = point.legend;
-            var yValue = point.yAxisCalloutData || point.y;
-            var lineLegend = _this.props.lineLegendText || 'Line';
-            var lineYValue = ((_a = point.lineData) === null || _a === void 0 ? void 0 : _a.yAxisCalloutData) || ((_b = point.lineData) === null || _b === void 0 ? void 0 : _b.y);
-            return (((_c = point.callOutAccessibilityData) === null || _c === void 0 ? void 0 : _c.ariaLabel) ||
-                xValue + ". " +
-                    (legend ? legend + ", " : '') +
-                    (yValue + ".") +
-                    (typeof lineYValue !== 'undefined' ? " " + lineLegend + ", " + lineYValue + "." : ''));
-        };
-        _this._getDomainMargins = function (containerWidth) {
-            if (_this._xAxisType !== XAxisTypes.NumericAxis) {
-                /** Total width available to render the bars */
-                var totalWidth = containerWidth - (_this.margins.left + MIN_DOMAIN_MARGIN) - (_this.margins.right + MIN_DOMAIN_MARGIN);
-                var barWidth = Math.min(_this.props.barWidth || 16, 24);
-                /** Total width required to render the bars. Directly proportional to bar width */
-                var reqWidth = (3 * _this._xAxisLabels.length - 2) * barWidth;
-                _this._domainMargin = MIN_DOMAIN_MARGIN;
-                if (totalWidth >= reqWidth) {
-                    // Center align the chart by setting equal left and right margins for domain
-                    _this._domainMargin += (totalWidth - reqWidth) / 2;
-                }
-                else {
-                    /** Maximum possible bar width to maintain 2:1 spacing */
-                    var maxBandwidth = totalWidth / (3 * _this._xAxisLabels.length - 2);
-                    barWidth = maxBandwidth;
-                }
-                _this._barWidth = barWidth;
-            }
-            return __assign(__assign({}, _this.margins), { left: _this.margins.left + _this._domainMargin, right: _this.margins.right + _this._domainMargin });
-        };
-        _this.state = {
-            color: '',
-            dataForHoverCard: 0,
-            isCalloutVisible: false,
-            refSelected: null,
-            selectedLegend: '',
-            activeLegend: '',
-            xCalloutValue: '',
-            yCalloutValue: '',
-            activeXdataPoint: null,
-            YValueHover: [],
-            hoverXValue: '',
-            calloutLegend: '',
-            emptyChart: false,
-        };
-        _this._isHavingLine = _this._checkForLine();
-        _this._calloutId = getId('callout');
-        _this._tooltipId = getId('VCTooltipID_');
-        _this._refArray = [];
-        _this._xAxisType =
-            _this.props.data && _this.props.data.length > 0
-                ? getTypeOfAxis(_this.props.data[0].x, true)
-                : XAxisTypes.StringAxis;
-        _this._domainMargin = MIN_DOMAIN_MARGIN;
-        return _this;
-    }
-    VerticalBarChartBase.prototype.componentDidMount = function () {
-        var isChartEmpty = this.state.emptyChart ||
-            this._points.length === 0 ||
-            (d3Max(this._points, function (point) { return point.y; }) <= 0 && !this._isHavingLine);
-        if (this.state.emptyChart !== isChartEmpty) {
-            this.setState({ emptyChart: isChartEmpty });
-        }
-    };
-    VerticalBarChartBase.prototype.render = function () {
-        var _this = this;
-        this._adjustProps();
-        this._xAxisLabels = this._points.map(function (point) { return point.x; });
-        this._yMax = Math.max(d3Max(this._points, function (point) { return point.y; }), this.props.yMaxValue || 0);
-        var legendBars = this._getLegendData(this._points, this.props.theme.palette);
-        this._classNames = getClassNames(this.props.styles, {
-            theme: this.props.theme,
-            legendColor: this.state.color,
-        });
-        var calloutProps = __assign(__assign(__assign(__assign({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: DirectionalHint.topAutoEdge, id: "toolTip" + this._calloutId, target: this.state.refSelected, isBeakVisible: false }, (this._isHavingLine && {
-            YValueHover: this.state.YValueHover,
-            hoverXValue: this.state.hoverXValue,
-        })), { gapSpace: 15, color: this.state.color, legend: this.state.calloutLegend, XValue: this.state.xCalloutValue, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard, onDismiss: this._closeCallout, preventDismissOnLostFocus: true }), this.props.calloutProps), getAccessibleDataObject(this.state.callOutAccessibilityData));
-        var tickParams = {
-            tickValues: this.props.tickValues,
-            tickFormat: this.props.tickFormat,
-        };
-        return !this.state.emptyChart ? (React.createElement(CartesianChart, __assign({}, this.props, { points: this._points, chartType: ChartTypes.VerticalBarChart, xAxisType: this._xAxisType, calloutProps: calloutProps, tickParams: tickParams }, (this._isHavingLine && { isCalloutForStack: true }), { legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, barwidth: this._barWidth, focusZoneDirection: FocusZoneDirection.horizontal, customizedCallout: this._getCustomizedCallout(), getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType !== XAxisTypes.NumericAxis && { xAxisInnerPadding: 2 / 3, xAxisOuterPadding: 0 }), { 
-            /* eslint-disable react/jsx-no-bind */
-            // eslint-disable-next-line react/no-children-prop
-            children: function (props) {
-                return (React.createElement(React.Fragment, null,
-                    React.createElement("g", null, _this._bars),
-                    _this._isHavingLine && (React.createElement("g", null, _this._createLine(props.xScale, props.yScale, props.containerHeight, props.containerWidth)))));
-            } }))) : (React.createElement("div", { id: getId('_VBC_'), role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
-    };
-    VerticalBarChartBase.prototype._adjustProps = function () {
-        this._points = this.props.data || [];
-        this._barWidth = this.props.barWidth || 16;
-        var palette = this.props.theme.palette;
-        this._colors = this.props.colors || [palette.blueLight, palette.blue, palette.blueMid, palette.blueDark];
-        this._isHavingLine = this._checkForLine();
-    };
-    VerticalBarChartBase.prototype._createColors = function () {
-        var _this = this;
-        var increment = this._colors.length <= 1 ? 1 : 1 / (this._colors.length - 1);
-        var _a = this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
-        if (useSingleColor) {
-            return function (_p) {
-                var _a = _this.props, theme = _a.theme, colors = _a.colors;
-                return colors && colors.length > 0 ? colors[0] : theme.palette.blueLight;
-            };
-        }
-        var domainValues = [];
-        for (var i = 0; i < this._colors.length; i++) {
-            domainValues.push(increment * i * this._yMax);
-        }
-        var colorScale = d3ScaleLinear().domain(domainValues).range(this._colors);
-        return colorScale;
-    };
-    VerticalBarChartBase.prototype._onBarHover = function (point, color, mouseEvent) {
-        mouseEvent.persist();
-        var _a = this._getCalloutContentForLineAndBar(point), YValueHover = _a.YValueHover, hoverXValue = _a.hoverXValue;
-        if (this._calloutAnchorPoint !== point) {
-            this._calloutAnchorPoint = point;
-            this.setState({
-                refSelected: mouseEvent,
-                /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
-                isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === point.legend,
-                dataForHoverCard: point.y,
-                calloutLegend: point.legend,
-                color: point.color || color,
-                // To display callout value, if no callout value given, taking given point.x value as a string.
-                xCalloutValue: point.xAxisCalloutData || point.x.toString(),
-                yCalloutValue: point.yAxisCalloutData,
-                dataPointCalloutProps: point,
-                activeXdataPoint: point.x,
-                YValueHover: YValueHover,
-                hoverXValue: hoverXValue,
-                callOutAccessibilityData: point.callOutAccessibilityData,
-            });
-        }
-    };
-    VerticalBarChartBase.prototype._createNumericBars = function (containerHeight, containerWidth, xElement) {
-        var _this = this;
-        var _a = this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
-        var _b = this._getScales(containerHeight, containerWidth, true), xBarScale = _b.xBarScale, yBarScale = _b.yBarScale;
-        var colorScale = this._createColors();
-        var bars = this._points.map(function (point, index) {
-            var shouldHighlight = _this._legendHighlighted(point.legend) || _this._noLegendHighlighted() ? true : false;
-            _this._classNames = getClassNames(_this.props.styles, {
-                theme: _this.props.theme,
-                legendColor: _this.state.color,
-                shouldHighlight: shouldHighlight,
-            });
-            var barHeight = Math.max(yBarScale(point.y), 0);
-            if (barHeight < 1) {
-                return React.createElement(React.Fragment, { key: point.x }, " ");
-            }
-            var xPoint = xBarScale(point.x);
-            var yPoint = containerHeight - _this.margins.bottom - yBarScale(point.y);
-            return (React.createElement("g", { key: point.x },
-                React.createElement("rect", { x: xPoint, className: _this._classNames.opacityChangeOnHover, y: yPoint, width: _this._barWidth, "data-is-focusable": !_this.props.hideTooltip, height: barHeight, ref: function (e) {
-                        _this._refCallback(e, point.legend);
-                    }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, colorScale(point.y)), "aria-label": _this._getAriaLabel(point), role: "img", onMouseLeave: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, point, index, colorScale(point.y)), onBlur: _this._onBarLeave, fill: point.color && !useSingleColor ? point.color : colorScale(point.y) }),
-                _this._renderBarLabel(xPoint, yPoint, point.y)));
-        });
-        // Removing un wanted tooltip div from DOM, when prop not provided.
-        if (!this.props.showXAxisLablesTooltip) {
-            try {
-                document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
-                // eslint-disable-next-line no-empty
-            }
-            catch (e) { }
-        }
-        // Used to display tooltip at x axis labels.
-        if (!this.props.wrapXAxisLables && this.props.showXAxisLablesTooltip) {
-            var xAxisElement = d3Select(xElement).call(xBarScale);
-            try {
-                document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
-                // eslint-disable-next-line no-empty
-            }
-            catch (e) { }
-            var tooltipProps = {
-                tooltipCls: this._classNames.tooltip,
-                id: this._tooltipId,
-                xAxis: xAxisElement,
-            };
-            xAxisElement && tooltipOfXAxislabels(tooltipProps);
-        }
-        return bars;
-    };
-    VerticalBarChartBase.prototype._createStringBars = function (containerHeight, containerWidth, xElement) {
-        var _this = this;
-        var _a = this._getScales(containerHeight, containerWidth, false), xBarScale = _a.xBarScale, yBarScale = _a.yBarScale;
-        var colorScale = this._createColors();
-        var bars = this._points.map(function (point, index) {
-            var barHeight = Math.max(yBarScale(point.y), 0);
-            if (barHeight < 1) {
-                return React.createElement(React.Fragment, { key: point.x }, " ");
-            }
-            var xPoint = xBarScale(point.x);
-            var yPoint = containerHeight - _this.margins.bottom - yBarScale(point.y);
-            return (React.createElement("g", { key: point.x, transform: "translate(" + 0.5 * (xBarScale.bandwidth() - _this._barWidth) + ", 0)" },
-                React.createElement("rect", { x: xPoint, y: yPoint, width: _this._barWidth, height: barHeight, "aria-label": _this._getAriaLabel(point), role: "img", ref: function (e) {
-                        _this._refCallback(e, point.legend);
-                    }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, colorScale(point.y)), onMouseLeave: _this._onBarLeave, onBlur: _this._onBarLeave, "data-is-focusable": !_this.props.hideTooltip, onFocus: _this._onBarFocus.bind(_this, point, index, colorScale(point.y)), fill: point.color ? point.color : colorScale(point.y) }),
-                _this._renderBarLabel(xPoint, yPoint, point.y)));
-        });
-        // Removing un wanted tooltip div from DOM, when prop not provided.
-        if (!this.props.showXAxisLablesTooltip) {
-            try {
-                document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
-                // eslint-disable-next-line no-empty
-            }
-            catch (e) { }
-        }
-        // Used to display tooltip at x axis labels.
-        if (!this.props.wrapXAxisLables && this.props.showXAxisLablesTooltip) {
-            var xAxisElement = d3Select(xElement).call(xBarScale);
-            try {
-                document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
-                // eslint-disable-next-line no-empty
-            }
-            catch (e) { }
-            var tooltipProps = {
-                tooltipCls: this._classNames.tooltip,
-                id: this._tooltipId,
-                xAxis: xAxisElement,
-                showTooltip: this.props.showXAxisLablesTooltip,
-            };
-            xAxisElement && tooltipOfXAxislabels(tooltipProps);
-        }
-        return bars;
-    };
-    VerticalBarChartBase.prototype._onLegendClick = function (legendTitle) {
-        if (this.state.selectedLegend === legendTitle) {
-            this.setState({
-                selectedLegend: '',
-            });
-        }
-        else {
-            this.setState({
-                selectedLegend: legendTitle,
-            });
-        }
-    };
-    VerticalBarChartBase.prototype._onLegendHover = function (legendTitle) {
-        this.setState({
-            activeLegend: legendTitle,
-        });
-    };
-    VerticalBarChartBase.prototype._onLegendLeave = function () {
-        this.setState({
-            activeLegend: '',
-        });
-    };
-    VerticalBarChartBase.prototype._renderBarLabel = function (xPoint, yPoint, barValue) {
-        if (this.props.hideLabels || this._barWidth < 16) {
-            return null;
-        }
-        return (React.createElement("text", { x: xPoint + this._barWidth / 2, y: yPoint - 6, textAnchor: "middle", className: this._classNames.barLabel, "aria-hidden": true }, d3FormatPrefix(barValue < 1000 ? '.2~' : '.1', barValue)(barValue)));
-    };
-    return VerticalBarChartBase;
-}(React.Component));
-export { VerticalBarChartBase };
-//# sourceMappingURL=VerticalBarChart.base.js.map