@fluentui/react-charting 5.24.2 → 5.24.4

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

@@ -0,0 +1,23 @@
+define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function (require, exports, tslib_1, Styling_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStyles = void 0;
+    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-amd/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":";;;;IAGO,IAAM,SAAS,GAAG,UAAC,KAA8B;;QACtD,OAAO;YACL,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;YACD,WAAW,EAAE;gBACX,QAAQ,EAAE,mBAAS,CAAC,MAAM;gBAC1B,IAAI,EAAE,KAAK,CAAC,KAAM,CAAC,cAAc,CAAC,QAAQ;gBAC1C,UAAU,EAAE,QAAQ;gBACpB,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,IAAI,EAAE,YAAY;qBACnB;uBACF;aACF;SACF,CAAC;IACJ,CAAC,CAAC;IA1BW,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-amd/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-amd/components/ScatterChart/ScatterChart.types.js

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

package/lib-amd/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-amd/components/ScatterChart/index.d.ts

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

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

@@ -0,0 +1,7 @@
+define(["require", "exports", "tslib", "./ScatterChart", "./ScatterChart.types"], function (require, exports, tslib_1, ScatterChart_1, ScatterChart_types_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(ScatterChart_1, exports);
+    tslib_1.__exportStar(ScatterChart_types_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

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

package/lib-amd/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-amd/components/VerticalBarChart/VerticalBarChart.base.js

@@ -479,6 +479,26 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                     (_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: '',
@@ -498,10 +518,6 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
             _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();
@@ -519,7 +535,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
         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);
@@ -557,6 +573,10 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
             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;
@@ -902,6 +922,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
         VerticalBarChartBase.defaultProps = {
             maxBarWidth: 24,
             useUTC: true,
+            xAxisCategoryOrder: 'default',
         };
         return VerticalBarChartBase;
     }(React.Component));