@fluentui/react-charting 5.24.5 → 5.24.7

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalBarChart.styles.js","sourceRoot":"../src/","sources":["components/VerticalBarChart/VerticalBarChart.styles.ts"],"names":[],"mappings":";;;;AAAA,uDAA2F;AAGpF,IAAM,SAAS,GAAG,UAAC,KAAkC;;IAClD,IAAA,eAAe,GAAY,KAAK,gBAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IACzC,OAAO;QACL,oBAAoB,EAAE;YACpB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;SACtC;QAED,UAAU,EAAE,EAAE;QAEd,UAAU,EAAE;YACV;gBACE,SAAS,EAAE,YAAY;aACxB;SACF;QACD,WAAW,EAAE;YACX;gBACE,SAAS,EAAE,YAAY;aACxB;SACF;QAED,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;QAED,QAAQ,EAAE;YACR,QAAQ,EAAE,mBAAS,CAAC,KAAK;YACzB,UAAU,EAAE,qBAAW,CAAC,QAAQ;YAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;YAClC,SAAS;gBACP,GAAC,8BAAoB,IAAG;oBACtB,IAAI,EAAE,YAAY;iBACnB;mBACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AA7CW,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":";;;AACA,+CAA0E;AAEnE,IAAM,SAAS,GAAG,UAAC,KAAkC;IAClD,IAAA,eAAe,GAAY,KAAK,gBAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IACzC,OAAO;QACL,oBAAoB,EAAE;YACpB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;SACtC;QAED,UAAU,EAAE,EAAE;QAEd,UAAU,EAAE;YACV;gBACE,SAAS,EAAE,YAAY;aACxB;SACF;QACD,WAAW,EAAE;YACX;gBACE,SAAS,EAAE,YAAY;aACxB;SACF;QACD,OAAO,EAAE,IAAA,uBAAe,EAAC,KAAK,CAAC;QAC/B,QAAQ,EAAE,IAAA,wBAAgB,EAAC,KAAK,CAAC;KAClC,CAAC;AACJ,CAAC,CAAC;AAtBW,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-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js

@@ -268,7 +268,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 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;
                 }
@@ -319,7 +319,8 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     }
                     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;
                         }
@@ -531,9 +532,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
             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
@@ -545,7 +544,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     // 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;
@@ -553,17 +552,14 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 }
                 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));
                 }
             }
@@ -997,7 +993,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         return {
             gapHeight: gapHeight,
             heightValueScale: heightValueScale,
-            adjustedTotalHeight: sumOfPercent,
+            absStackTotal: totalData,
         };
     };
     VerticalStackedBarChartBase.prototype._isChartEmpty = function () {