@fluentui/react-charting 5.24.5 → 5.24.7

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

@@ -1,7 +1,5 @@
-import { __assign } from "tslib";
-import { FontSizes, FontWeights, HighContrastSelector } from '@fluentui/react/lib/Styling';
+import { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';
 export var getStyles = function (props) {
-    var _a;
     var shouldHighlight = props.shouldHighlight, theme = props.theme;
     return {
         opacityChangeOnHover: {
@@ -18,17 +16,8 @@ export var getStyles = function (props) {
                 transform: 'scaleX(-1)',
             },
         ],
-        tooltip: __assign(__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: FontSizes.small,
-            fontWeight: FontWeights.semibold,
-            fill: theme.palette.neutralPrimary,
-            selectors: (_a = {},
-                _a[HighContrastSelector] = {
-                    fill: 'CanvasText',
-                },
-                _a),
-        },
+        tooltip: getTooltipStyle(theme),
+        barLabel: getBarLabelStyle(theme),
     };
 };
 //# sourceMappingURL=VerticalBarChart.styles.js.map

package/lib/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,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAG3F,MAAM,CAAC,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,wBACF,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,SAAS,CAAC,KAAK;YACzB,UAAU,EAAE,WAAW,CAAC,QAAQ;YAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;YAClC,SAAS;gBACP,GAAC,oBAAoB,IAAG;oBACtB,IAAI,EAAE,YAAY;iBACnB;mBACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","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,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE1E,MAAM,CAAC,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,eAAe,CAAC,KAAK,CAAC;QAC/B,QAAQ,EAAE,gBAAgB,CAAC,KAAK,CAAC;KAClC,CAAC;AACJ,CAAC,CAAC","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/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js

@@ -9,7 +9,7 @@ import { Legends } from '../Legends/index';
 import { CartesianChart, ChartHoverCard, } from '../../index';
 import { FocusZoneDirection } from '@fluentui/react-focus';
 import { formatDateToLocaleString } from '@fluentui/chart-utilities';
-import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, findVSBCNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, getNextGradient, areArraysEqual, calculateLongestLabelWidth, YAxisType, sortAxisCategories, } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, findVSBCNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, getNextGradient, areArraysEqual, calculateLongestLabelWidth, YAxisType, sortAxisCategories, calcTotalWidth, calcBandwidth, calcRequiredWidth, } from '../../utilities/index';
 import { toImage } from '../../utilities/image-export-utils';
 var getClassNames = classNamesFunction();
 var COMPONENT_NAME = 'VERTICAL STACKED BAR CHART';
@@ -265,7 +265,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;
                 }
@@ -316,7 +316,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;
                         }
@@ -528,9 +529,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 = calcTotalWidth(containerWidth, _this.margins, MIN_DOMAIN_MARGIN);
             if (_this._xAxisType === XAxisTypes.StringAxis) {
                 if (isScalePaddingDefined(_this.props.xAxisOuterPadding, _this.props.xAxisPadding)) {
                     // Setting the domain margin for string x-axis to 0 because the xAxisOuterPadding prop is now available
@@ -542,7 +541,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     // the following calculations don't use the previous bar width.
                     _this._barWidth = 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 = 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;
@@ -550,17 +549,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 = calcBandwidth(totalWidth, _this._xAxisLabels.length, _this._xAxisInnerPadding);
                     var barWidth = getBarWidth(_this.props.barWidth, _this.props.maxBarWidth, bandwidth);
-                    var reqWidth = (_this._xAxisLabels.length + (_this._xAxisLabels.length - 1) * barGapRate) * barWidth;
+                    var reqWidth = 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 = 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 = 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));
                 }
             }
@@ -994,7 +990,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         return {
             gapHeight: gapHeight,
             heightValueScale: heightValueScale,
-            adjustedTotalHeight: sumOfPercent,
+            absStackTotal: totalData,
         };
     };
     VerticalStackedBarChartBase.prototype._isChartEmpty = function () {