@fluentui/react-charting 5.24.5 → 5.24.7

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

@@ -1,9 +1,8 @@
-define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function (require, exports, tslib_1, Styling_1) {
+define(["require", "exports", "../../utilities/index"], function (require, exports, index_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.getStyles = void 0;
     var getStyles = function (props) {
-        var _a;
         var shouldHighlight = props.shouldHighlight, theme = props.theme;
         return {
             opacityChangeOnHover: {
@@ -20,17 +19,8 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function
                     transform: 'scaleX(-1)',
                 },
             ],
-            tooltip: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none', color: theme.semanticColors.bodyText }),
-            barLabel: {
-                fontSize: Styling_1.FontSizes.small,
-                fontWeight: Styling_1.FontWeights.semibold,
-                fill: theme.palette.neutralPrimary,
-                selectors: (_a = {},
-                    _a[Styling_1.HighContrastSelector] = {
-                        fill: 'CanvasText',
-                    },
-                    _a),
-            },
+            tooltip: (0, index_1.getTooltipStyle)(theme),
+            barLabel: (0, index_1.getBarLabelStyle)(theme),
         };
     };
     exports.getStyles = getStyles;

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalBarChart.styles.js","sourceRoot":"../src/","sources":["components/VerticalBarChart/VerticalBarChart.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,SAAS,GAAG,UAAC,KAAkC;;QAClD,IAAA,eAAe,GAAY,KAAK,gBAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QACzC,OAAO;YACL,oBAAoB,EAAE;gBACpB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;aACtC;YAED,UAAU,EAAE,EAAE;YAEd,UAAU,EAAE;gBACV;oBACE,SAAS,EAAE,YAAY;iBACxB;aACF;YACD,WAAW,EAAE;gBACX;oBACE,SAAS,EAAE,YAAY;iBACxB;aACF;YAED,OAAO,wCACF,KAAK,CAAC,KAAK,CAAC,MAAM,KACrB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,EAC/C,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,GACrC;YAED,QAAQ,EAAE;gBACR,QAAQ,EAAE,mBAAS,CAAC,KAAK;gBACzB,UAAU,EAAE,qBAAW,CAAC,QAAQ;gBAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;gBAClC,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,IAAI,EAAE,YAAY;qBACnB;uBACF;aACF;SACF,CAAC;IACJ,CAAC,CAAC;IA7CW,QAAA,SAAS,aA6CpB","sourcesContent":["import { FontSizes, FontWeights, HighContrastSelector } from '@fluentui/react/lib/Styling';\nimport { IVerticalBarChartStyleProps, IVerticalBarChartStyles } from '../../index';\n\nexport const getStyles = (props: IVerticalBarChartStyleProps): IVerticalBarChartStyles => {\n  const { shouldHighlight, theme } = props;\n  return {\n    opacityChangeOnHover: {\n      opacity: shouldHighlight ? '' : '0.1',\n    },\n\n    xAxisTicks: [],\n\n    yAxisTicks: [\n      {\n        transform: 'scaleX(-1)',\n      },\n    ],\n    yAxisDomain: [\n      {\n        transform: 'scaleX(-1)',\n      },\n    ],\n\n    tooltip: {\n      ...theme.fonts.medium,\n      display: 'flex',\n      flexDirection: 'column',\n      padding: '8px',\n      position: 'absolute',\n      textAlign: 'center',\n      top: '0px',\n      background: theme.semanticColors.bodyBackground,\n      borderRadius: '2px',\n      pointerEvents: 'none',\n      color: theme.semanticColors.bodyText,\n    },\n\n    barLabel: {\n      fontSize: FontSizes.small,\n      fontWeight: FontWeights.semibold,\n      fill: theme.palette.neutralPrimary,\n      selectors: {\n        [HighContrastSelector]: {\n          fill: 'CanvasText',\n        },\n      },\n    },\n  };\n};\n"]}
+{"version":3,"file":"VerticalBarChart.styles.js","sourceRoot":"../src/","sources":["components/VerticalBarChart/VerticalBarChart.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,SAAS,GAAG,UAAC,KAAkC;QAClD,IAAA,eAAe,GAAY,KAAK,gBAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QACzC,OAAO;YACL,oBAAoB,EAAE;gBACpB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;aACtC;YAED,UAAU,EAAE,EAAE;YAEd,UAAU,EAAE;gBACV;oBACE,SAAS,EAAE,YAAY;iBACxB;aACF;YACD,WAAW,EAAE;gBACX;oBACE,SAAS,EAAE,YAAY;iBACxB;aACF;YACD,OAAO,EAAE,IAAA,uBAAe,EAAC,KAAK,CAAC;YAC/B,QAAQ,EAAE,IAAA,wBAAgB,EAAC,KAAK,CAAC;SAClC,CAAC;IACJ,CAAC,CAAC;IAtBW,QAAA,SAAS,aAsBpB","sourcesContent":["import { IVerticalBarChartStyleProps, IVerticalBarChartStyles } from '../../index';\nimport { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';\n\nexport const getStyles = (props: IVerticalBarChartStyleProps): IVerticalBarChartStyles => {\n  const { shouldHighlight, theme } = props;\n  return {\n    opacityChangeOnHover: {\n      opacity: shouldHighlight ? '' : '0.1',\n    },\n\n    xAxisTicks: [],\n\n    yAxisTicks: [\n      {\n        transform: 'scaleX(-1)',\n      },\n    ],\n    yAxisDomain: [\n      {\n        transform: 'scaleX(-1)',\n      },\n    ],\n    tooltip: getTooltipStyle(theme),\n    barLabel: getBarLabelStyle(theme),\n  };\n};\n"]}

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

@@ -256,7 +256,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     if (!barsToDisplay.length) {
                         return undefined;
                     }
-                    var _a = _this._getBarGapAndScale(barsToDisplay, yBarScale), gapHeight = _a.gapHeight, heightValueScale = _a.heightValueScale, adjustedTotalHeight = _a.adjustedTotalHeight;
+                    var _a = _this._getBarGapAndScale(barsToDisplay, yBarScale), gapHeight = _a.gapHeight, heightValueScale = _a.heightValueScale, absStackTotal = _a.absStackTotal;
                     if (heightValueScale < 0) {
                         return undefined;
                     }
@@ -307,7 +307,8 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         }
                         else {
                             barHeight = Math.abs(heightValueScale * point.data);
-                            var minHeight = Math.max((heightValueScale * adjustedTotalHeight) / 100.0, barMinimumHeight);
+                            // FIXME: The current scaling logic may produce different min and gap heights for each bar stack.
+                            var minHeight = Math.max((heightValueScale * absStackTotal) / 100.0, barMinimumHeight);
                             if (barHeight < minHeight) {
                                 barHeight = minHeight;
                             }
@@ -519,9 +520,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 var _a;
                 _this._domainMargin = MIN_DOMAIN_MARGIN;
                 /** Total width available to render the bars */
-                var totalWidth = containerWidth - (_this.margins.left + MIN_DOMAIN_MARGIN) - (_this.margins.right + MIN_DOMAIN_MARGIN);
-                /** Rate at which the space between the bars changes wrt the bar width */
-                var barGapRate = _this._xAxisInnerPadding / (1 - _this._xAxisInnerPadding);
+                var totalWidth = (0, index_3.calcTotalWidth)(containerWidth, _this.margins, MIN_DOMAIN_MARGIN);
                 if (_this._xAxisType === index_3.XAxisTypes.StringAxis) {
                     if ((0, index_3.isScalePaddingDefined)(_this.props.xAxisOuterPadding, _this.props.xAxisPadding)) {
                         // Setting the domain margin for string x-axis to 0 because the xAxisOuterPadding prop is now available
@@ -533,7 +532,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         // the following calculations don't use the previous bar width.
                         _this._barWidth = (0, index_3.getBarWidth)(_this.props.barWidth, _this.props.maxBarWidth);
                         /** Total width required to render the bars. Directly proportional to bar width */
-                        var reqWidth = (_this._xAxisLabels.length + (_this._xAxisLabels.length - 1) * barGapRate) * _this._barWidth;
+                        var reqWidth = (0, index_3.calcRequiredWidth)(_this._barWidth, _this._xAxisLabels.length, _this._xAxisInnerPadding);
                         if (totalWidth >= reqWidth) {
                             // Center align the chart by setting equal left and right margins for domain
                             _this._domainMargin = MIN_DOMAIN_MARGIN + (totalWidth - reqWidth) / 2;
@@ -541,17 +540,14 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     }
                     else if (_this.props.mode === 'plotly' && _this._xAxisLabels.length > 1) {
                         // Calculate the remaining width after rendering bars at their maximum allowable width
-                        var bandwidth = totalWidth / (_this._xAxisLabels.length + (_this._xAxisLabels.length - 1) * barGapRate);
+                        var bandwidth = (0, index_3.calcBandwidth)(totalWidth, _this._xAxisLabels.length, _this._xAxisInnerPadding);
                         var barWidth = (0, index_3.getBarWidth)(_this.props.barWidth, _this.props.maxBarWidth, bandwidth);
-                        var reqWidth = (_this._xAxisLabels.length + (_this._xAxisLabels.length - 1) * barGapRate) * barWidth;
+                        var reqWidth = (0, index_3.calcRequiredWidth)(barWidth, _this._xAxisLabels.length, _this._xAxisInnerPadding);
                         var margin1 = (totalWidth - reqWidth) / 2;
-                        var margin2 = Number.POSITIVE_INFINITY;
-                        if (!_this.props.hideTickOverlap) {
-                            // Calculate the remaining width after accounting for the space required to render x-axis labels
-                            var step = (0, index_3.calculateLongestLabelWidth)(_this._xAxisLabels) + 20;
-                            reqWidth = (_this._xAxisLabels.length - _this._xAxisInnerPadding) * step;
-                            margin2 = (totalWidth - reqWidth) / 2;
-                        }
+                        // Calculate the remaining width after accounting for the space required to render x-axis labels
+                        var step = (0, index_3.calculateLongestLabelWidth)(_this._xAxisLabels) + 20;
+                        reqWidth = (_this._xAxisLabels.length - _this._xAxisInnerPadding) * step;
+                        var margin2 = (totalWidth - reqWidth) / 2;
                         _this._domainMargin = MIN_DOMAIN_MARGIN + Math.max(0, Math.min(margin1, margin2));
                     }
                 }
@@ -985,7 +981,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             return {
                 gapHeight: gapHeight,
                 heightValueScale: heightValueScale,
-                adjustedTotalHeight: sumOfPercent,
+                absStackTotal: totalData,
             };
         };
         VerticalStackedBarChartBase.prototype._isChartEmpty = function () {