@fluentui/react-charting 5.24.2 → 5.24.4

package/lib-commonjs/components/ScatterChart/ScatterChart.styles.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyles = void 0;
+var tslib_1 = require("tslib");
+var Styling_1 = require("@fluentui/react/lib/Styling");
+var getStyles = function (props) {
+    var _a;
+    return {
+        tooltip: tslib_1.__assign(tslib_1.__assign({}, props.theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: props.theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none', color: props.theme.semanticColors.bodyText }),
+        markerLabel: {
+            fontSize: Styling_1.FontSizes.medium,
+            fill: props.theme.semanticColors.bodyText,
+            textAnchor: 'middle',
+            selectors: (_a = {},
+                _a[Styling_1.HighContrastSelector] = {
+                    fill: 'CanvasText',
+                },
+                _a),
+        },
+    };
+};
+exports.getStyles = getStyles;
+//# sourceMappingURL=ScatterChart.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterChart.styles.js","sourceRoot":"../src/","sources":["components/ScatterChart/ScatterChart.styles.ts"],"names":[],"mappings":";;;;AAAA,uDAA8E;AAGvE,IAAM,SAAS,GAAG,UAAC,KAA8B;;IACtD,OAAO;QACL,OAAO,wCACF,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,KAC5B,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,KAAM,CAAC,cAAc,CAAC,cAAc,EACtD,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,KAAK,CAAC,KAAM,CAAC,cAAc,CAAC,QAAQ,GAC5C;QACD,WAAW,EAAE;YACX,QAAQ,EAAE,mBAAS,CAAC,MAAM;YAC1B,IAAI,EAAE,KAAK,CAAC,KAAM,CAAC,cAAc,CAAC,QAAQ;YAC1C,UAAU,EAAE,QAAQ;YACpB,SAAS;gBACP,GAAC,8BAAoB,IAAG;oBACtB,IAAI,EAAE,YAAY;iBACnB;mBACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AA1BW,QAAA,SAAS,aA0BpB","sourcesContent":["import { FontSizes, HighContrastSelector } from '@fluentui/react/lib/Styling';\nimport { IScatterChartStyleProps, IScatterChartStyles } from './ScatterChart.types';\n\nexport const getStyles = (props: IScatterChartStyleProps): IScatterChartStyles => {\n  return {\n    tooltip: {\n      ...props.theme!.fonts.medium,\n      display: 'flex',\n      flexDirection: 'column',\n      padding: '8px',\n      position: 'absolute',\n      textAlign: 'center',\n      top: '0px',\n      background: props.theme!.semanticColors.bodyBackground,\n      borderRadius: '2px',\n      pointerEvents: 'none',\n      color: props.theme!.semanticColors.bodyText,\n    },\n    markerLabel: {\n      fontSize: FontSizes.medium,\n      fill: props.theme!.semanticColors.bodyText,\n      textAnchor: 'middle',\n      selectors: {\n        [HighContrastSelector]: {\n          fill: 'CanvasText',\n        },\n      },\n    },\n  };\n};\n"]}

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

@@ -0,0 +1,47 @@
+import { IRenderFunction } from '@fluentui/react/lib/Utilities';
+import { IChartProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData, ICustomizedCalloutData } from '../../types/index';
+import { ICartesianChartProps, ICartesianChartStyleProps, ICartesianChartStyles, IChildProps } from '../CommonComponents/index';
+import { IStyle } from '@fluentui/react';
+export type { IChildProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData };
+/**
+ * Line Chart properties
+ * {@docCategory LineChart}
+ */
+export interface IScatterChartProps extends ICartesianChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data: IChartProps;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IScatterChartStyles;
+    /**
+     * Define a custom callout renderer for a data point
+     */
+    onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;
+    /**
+     * Callback for getting callout description message
+     */
+    getCalloutDescriptionMessage?: (calloutDataProps: ICustomizedCalloutData) => string | undefined;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+}
+/**
+ * Scatter Chart styles
+ * {@docCategory ScatterChart}
+ */
+export interface IScatterChartStyles extends ICartesianChartStyles {
+    /**
+     * Style for the marker label
+     */
+    markerLabel?: IStyle;
+}
+/**
+ * Scatter Chart style properties
+ * {@docCategory ScatterChart}
+ */
+export interface IScatterChartStyleProps extends ICartesianChartStyleProps {
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterChart.types.js","sourceRoot":"../src/","sources":["components/ScatterChart/ScatterChart.types.ts"],"names":[],"mappings":"","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport { IRenderFunction } from '@fluentui/react/lib/Utilities';\nimport {\n  IChartProps,\n  ILineChartPoints,\n  IMargins,\n  IBasestate,\n  IRefArrayData,\n  ICustomizedCalloutData,\n} from '../../types/index';\nimport {\n  ICartesianChartProps,\n  ICartesianChartStyleProps,\n  ICartesianChartStyles,\n  IChildProps,\n} from '../CommonComponents/index';\nimport { IStyle } from '@fluentui/react';\n\nexport type { IChildProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData };\n\n/**\n * Line Chart properties\n * {@docCategory LineChart}\n */\nexport interface IScatterChartProps extends ICartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: IChartProps;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IScatterChartStyles;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;\n\n  /**\n   * Callback for getting callout description message\n   */\n  getCalloutDescriptionMessage?: (calloutDataProps: ICustomizedCalloutData) => string | undefined;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n}\n\n/**\n * Scatter Chart styles\n * {@docCategory ScatterChart}\n */\nexport interface IScatterChartStyles extends ICartesianChartStyles {\n  /**\n   * Style for the marker label\n   */\n  markerLabel?: IStyle;\n}\n\n/**\n * Scatter Chart style properties\n * {@docCategory ScatterChart}\n */\nexport interface IScatterChartStyleProps extends ICartesianChartStyleProps {}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ScatterChart/index.ts"],"names":[],"mappings":";;;AAAA,yDAA+B;AAC/B,+DAAqC","sourcesContent":["export * from './ScatterChart';\nexport * from './ScatterChart.types';\n"]}

package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.base.d.ts

@@ -91,4 +91,6 @@ export declare class VerticalBarChartBase extends React.Component<IVerticalBarCh
     private _getDomainMargins;
     private _isChartEmpty;
     private _getChartTitle;
+    private _getOrderedXAxisLabels;
+    private _mapCategoryToValues;
 }

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

@@ -491,6 +491,26 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                 (_this._isHavingLine ? ' and 1 line' : '') +
                 '. ');
         };
+        _this._getOrderedXAxisLabels = function () {
+            if (_this._xAxisType !== index_2.XAxisTypes.StringAxis) {
+                return [];
+            }
+            return (0, index_2.sortAxisCategories)(_this._mapCategoryToValues(), _this.props.xAxisCategoryOrder);
+        };
+        _this._mapCategoryToValues = function () {
+            var categoryToValues = {};
+            _this._points.forEach(function (point) {
+                var xValue = point.x;
+                if (!categoryToValues[xValue]) {
+                    categoryToValues[xValue] = [];
+                }
+                categoryToValues[xValue].push(point.y);
+                if (point.lineData) {
+                    categoryToValues[xValue].push(point.lineData.y);
+                }
+            });
+            return categoryToValues;
+        };
         (0, Utilities_1.initializeComponentRef)(_this);
         _this.state = {
             color: '',
@@ -510,10 +530,6 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
         _this._calloutId = (0, Utilities_1.getId)('callout');
         _this._tooltipId = (0, Utilities_1.getId)('VCTooltipID_');
         _this._refArray = [];
-        _this._xAxisType =
-            _this.props.data && _this.props.data.length > 0
-                ? (0, index_2.getTypeOfAxis)(_this.props.data[0].x, true)
-                : index_2.XAxisTypes.StringAxis;
         _this._emptyChartId = (0, Utilities_1.getId)('_VBC_empty');
         _this._domainMargin = MIN_DOMAIN_MARGIN;
         _this._cartesianChartRef = React.createRef();
@@ -531,7 +547,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
     VerticalBarChartBase.prototype.render = function () {
         var _this = this;
         this._adjustProps();
-        this._xAxisLabels = this._points.map(function (point) { return point.x; });
+        this._xAxisLabels = this._getOrderedXAxisLabels();
         this._yMax = Math.max((0, d3_array_1.max)(this._points, function (point) { return point.y; }), this.props.yMaxValue || 0);
         this._yMin = Math.min((0, d3_array_1.min)(this._points, function (point) { return point.y; }), this.props.yMinValue || 0);
         var legendBars = this._getLegendData(this._points, this.props.theme.palette);
@@ -569,6 +585,10 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
         configurable: true
     });
     VerticalBarChartBase.prototype._adjustProps = function () {
+        this._xAxisType =
+            this.props.data && this.props.data.length > 0
+                ? (0, index_2.getTypeOfAxis)(this.props.data[0].x, true)
+                : index_2.XAxisTypes.StringAxis;
         this._points = this.props.data || [];
         this._barWidth = (0, index_2.getBarWidth)(this.props.barWidth, this.props.maxBarWidth, undefined, this.props.mode);
         var palette = this.props.theme.palette;
@@ -914,6 +934,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
     VerticalBarChartBase.defaultProps = {
         maxBarWidth: 24,
         useUTC: true,
+        xAxisCategoryOrder: 'default',
     };
     return VerticalBarChartBase;
 }(React.Component));