@fluentui/react-charting 5.24.2 → 5.24.4

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

@@ -0,0 +1,19 @@
+import { __assign } from "tslib";
+import { FontSizes, HighContrastSelector } from '@fluentui/react/lib/Styling';
+export var getStyles = function (props) {
+    var _a;
+    return {
+        tooltip: __assign(__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: FontSizes.medium,
+            fill: props.theme.semanticColors.bodyText,
+            textAnchor: 'middle',
+            selectors: (_a = {},
+                _a[HighContrastSelector] = {
+                    fill: 'CanvasText',
+                },
+                _a),
+        },
+    };
+};
+//# sourceMappingURL=ScatterChart.styles.js.map

package/lib/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,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAG9E,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAA8B;;IACtD,OAAO;QACL,OAAO,wBACF,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,SAAS,CAAC,MAAM;YAC1B,IAAI,EAAE,KAAK,CAAC,KAAM,CAAC,cAAc,CAAC,QAAQ;YAC1C,UAAU,EAAE,QAAQ;YACpB,SAAS;gBACP,GAAC,oBAAoB,IAAG;oBACtB,IAAI,EAAE,YAAY;iBACnB;mBACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","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/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/components/ScatterChart/ScatterChart.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ScatterChart.types.js.map

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

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

package/lib/components/ScatterChart/index.js

@@ -0,0 +1,3 @@
+export * from './ScatterChart';
+export * from './ScatterChart.types';
+//# sourceMappingURL=index.js.map

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

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

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

@@ -9,7 +9,7 @@ import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { CartesianChart, ChartHoverCard, Legends, } 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, findVerticalNumericMinMaxOfY, createNumericYAxis, domainRageOfVerticalNumeric, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfXStringAxis, createStringYAxis, getNextGradient, areArraysEqual, calculateLongestLabelWidth, } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, findVerticalNumericMinMaxOfY, createNumericYAxis, domainRageOfVerticalNumeric, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfXStringAxis, createStringYAxis, getNextGradient, areArraysEqual, calculateLongestLabelWidth, sortAxisCategories, } from '../../utilities/index';
 import { toImage } from '../../utilities/image-export-utils';
 var CircleVisbility;
 (function (CircleVisbility) {
@@ -488,6 +488,26 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                 (_this._isHavingLine ? ' and 1 line' : '') +
                 '. ');
         };
+        _this._getOrderedXAxisLabels = function () {
+            if (_this._xAxisType !== XAxisTypes.StringAxis) {
+                return [];
+            }
+            return 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;
+        };
         initializeComponentRef(_this);
         _this.state = {
             color: '',
@@ -507,10 +527,6 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
         _this._calloutId = getId('callout');
         _this._tooltipId = getId('VCTooltipID_');
         _this._refArray = [];
-        _this._xAxisType =
-            _this.props.data && _this.props.data.length > 0
-                ? getTypeOfAxis(_this.props.data[0].x, true)
-                : XAxisTypes.StringAxis;
         _this._emptyChartId = getId('_VBC_empty');
         _this._domainMargin = MIN_DOMAIN_MARGIN;
         _this._cartesianChartRef = React.createRef();
@@ -528,7 +544,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(d3Max(this._points, function (point) { return point.y; }), this.props.yMaxValue || 0);
         this._yMin = Math.min(d3Min(this._points, function (point) { return point.y; }), this.props.yMinValue || 0);
         var legendBars = this._getLegendData(this._points, this.props.theme.palette);
@@ -566,6 +582,10 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
         configurable: true
     });
     VerticalBarChartBase.prototype._adjustProps = function () {
+        this._xAxisType =
+            this.props.data && this.props.data.length > 0
+                ? getTypeOfAxis(this.props.data[0].x, true)
+                : XAxisTypes.StringAxis;
         this._points = this.props.data || [];
         this._barWidth = getBarWidth(this.props.barWidth, this.props.maxBarWidth, undefined, this.props.mode);
         var palette = this.props.theme.palette;
@@ -911,6 +931,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
     VerticalBarChartBase.defaultProps = {
         maxBarWidth: 24,
         useUTC: true,
+        xAxisCategoryOrder: 'default',
     };
     return VerticalBarChartBase;
 }(React.Component));