@fluentui/react-charting 5.24.9 → 5.24.11

package/lib-amd/utilities/ChartHoverCard/ChartHoverCard.base.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartHoverCard.base.js","sourceRoot":"../src/","sources":["utilities/ChartHoverCard/ChartHoverCard.base.tsx"],"names":[],"mappings":";;;;IAKA,IAAM,aAAa,GAAG,IAAA,0BAAkB,GAAoD,CAAC;IAC7F;QAAwC,8CAAyC;QAAjF;;QAmCA,CAAC;QAjCQ,mCAAM,GAAb;YACQ,IAAA,KAAuF,IAAI,CAAC,KAAK,EAA/F,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,kBAAkB,wBAAA,EAAE,OAAO,aAAe,CAAC;YACxG,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAO,EAAE;gBACxC,KAAK,EAAE,KAAM;gBACb,KAAK,OAAA;gBACL,MAAM,QAAA;gBACN,cAAc,EAAE,CAAC,CAAC,KAAK;aACxB,CAAC,CAAC;YACH,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,kBAAkB;gBACjD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,wBAAwB;oBACvD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe;wBAAG,MAAM;4BAAQ,CAG7D;gBACN,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,oBAAoB;oBACnD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,qBAAqB;wBACpD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,iBAAiB,IAAG,IAAA,sCAAoB,EAAC,MAAM,EAAE,OAAO,CAAC,CAAO;wBACjG,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,IAAG,IAAA,sCAAoB,EAAC,MAAM,EAAE,OAAO,CAAC,CAAO,CAC3F;oBACL,CAAC,CAAC,KAAK,IAAI,CACV,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK;wBACpC;4BACE,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,SAAS,IAAG,IAAA,sCAAoB,EAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAQ;;4BAC7F,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,IAAG,IAAA,sCAAoB,EAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAQ,CAC9F,CACC,CACP,CACG;gBACL,CAAC,CAAC,kBAAkB,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,kBAAkB,IAAG,kBAAkB,CAAO,CACpG,CACP,CAAC;QACJ,CAAC;QACH,yBAAC;IAAD,CAAC,AAnCD,CAAwC,KAAK,CAAC,SAAS,GAmCtD;IAnCY,gDAAkB","sourcesContent":["import * as React from 'react';\nimport { IChartHoverCardStyles, IChartHoverCardStyleProps, IChartHoverCardProps } from './ChartHoverCard.types';\nimport { classNamesFunction, IProcessedStyleSet } from '@fluentui/react';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\n\nconst getClassNames = classNamesFunction<IChartHoverCardStyleProps, IChartHoverCardStyles>();\nexport class ChartHoverCardBase extends React.Component<IChartHoverCardProps, {}> {\n  private _classNames: IProcessedStyleSet<IChartHoverCardStyles>;\n  public render(): React.ReactNode {\n    const { color, Legend, XValue, YValue, styles, theme, ratio, descriptionMessage, culture } = this.props;\n    this._classNames = getClassNames(styles!, {\n      theme: theme!,\n      color,\n      XValue,\n      isRatioPresent: !!ratio,\n    });\n    return (\n      <div className={this._classNames.calloutContentRoot}>\n        <div className={this._classNames.calloutDateTimeContainer}>\n          <div className={this._classNames.calloutContentX}>{XValue} </div>\n          {/*TO DO  if we add time for callout then will use this */}\n          {/* <div className={this._classNames.calloutContentX}>07:00am</div> */}\n        </div>\n        <div className={this._classNames.calloutInfoContainer}>\n          <div className={this._classNames.calloutBlockContainer}>\n            <div className={this._classNames.calloutlegendText}>{formatToLocaleString(Legend, culture)}</div>\n            <div className={this._classNames.calloutContentY}>{formatToLocaleString(YValue, culture)}</div>\n          </div>\n          {!!ratio && (\n            <div className={this._classNames.ratio}>\n              <>\n                <span className={this._classNames.numerator}>{formatToLocaleString(ratio[0], culture)}</span>/\n                <span className={this._classNames.denominator}>{formatToLocaleString(ratio[1], culture)}</span>\n              </>\n            </div>\n          )}\n        </div>\n        {!!descriptionMessage && <div className={this._classNames.descriptionMessage}>{descriptionMessage}</div>}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ChartHoverCard.base.js","sourceRoot":"../src/","sources":["utilities/ChartHoverCard/ChartHoverCard.base.tsx"],"names":[],"mappings":";;;;IAKA,IAAM,aAAa,GAAG,IAAA,0BAAkB,GAAoD,CAAC;IAC7F;QAAwC,8CAAyC;QAAjF;;QA4CA,CAAC;QA1CQ,mCAAM,GAAb;YACQ,IAAA,KAAuF,IAAI,CAAC,KAAK,EAA/F,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,kBAAkB,wBAAA,EAAE,OAAO,aAAe,CAAC;YACxG,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAO,EAAE;gBACxC,KAAK,EAAE,KAAM;gBACb,KAAK,OAAA;gBACL,MAAM,QAAA;gBACN,cAAc,EAAE,CAAC,CAAC,KAAK;aACxB,CAAC,CAAC;YACH,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,kBAAkB;gBACjD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,wBAAwB;oBACvD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe;wBAAG,MAAM;4BAAQ,CAG7D;gBACN,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,oBAAoB;oBACnD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,qBAAqB;wBACpD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,iBAAiB,IAC/C,IAAA,sCAAoB,EAAC,MAAM,EAAE,OAAO,CAAoB,CACrD;wBACN,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,IAC7C,IAAA,sCAAoB,EAAC,MAAM,EAAE,OAAO,CAAoB,CACrD,CACF;oBACL,CAAC,CAAC,KAAK,IAAI,CACV,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK;wBACpC;4BACE,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,SAAS,IACxC,IAAA,sCAAoB,EAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,CAAoB,CACtD;;4BAEP,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,IAC1C,IAAA,sCAAoB,EAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,CAAoB,CACtD,CACN,CACC,CACP,CACG;gBACL,CAAC,CAAC,kBAAkB,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,kBAAkB,IAAG,kBAAkB,CAAO,CACpG,CACP,CAAC;QACJ,CAAC;QACH,yBAAC;IAAD,CAAC,AA5CD,CAAwC,KAAK,CAAC,SAAS,GA4CtD;IA5CY,gDAAkB","sourcesContent":["import * as React from 'react';\nimport { IChartHoverCardStyles, IChartHoverCardStyleProps, IChartHoverCardProps } from './ChartHoverCard.types';\nimport { classNamesFunction, IProcessedStyleSet } from '@fluentui/react';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\n\nconst getClassNames = classNamesFunction<IChartHoverCardStyleProps, IChartHoverCardStyles>();\nexport class ChartHoverCardBase extends React.Component<IChartHoverCardProps, {}> {\n  private _classNames: IProcessedStyleSet<IChartHoverCardStyles>;\n  public render(): React.ReactNode {\n    const { color, Legend, XValue, YValue, styles, theme, ratio, descriptionMessage, culture } = this.props;\n    this._classNames = getClassNames(styles!, {\n      theme: theme!,\n      color,\n      XValue,\n      isRatioPresent: !!ratio,\n    });\n    return (\n      <div className={this._classNames.calloutContentRoot}>\n        <div className={this._classNames.calloutDateTimeContainer}>\n          <div className={this._classNames.calloutContentX}>{XValue} </div>\n          {/*TO DO  if we add time for callout then will use this */}\n          {/* <div className={this._classNames.calloutContentX}>07:00am</div> */}\n        </div>\n        <div className={this._classNames.calloutInfoContainer}>\n          <div className={this._classNames.calloutBlockContainer}>\n            <div className={this._classNames.calloutlegendText}>\n              {formatToLocaleString(Legend, culture) as React.ReactNode}\n            </div>\n            <div className={this._classNames.calloutContentY}>\n              {formatToLocaleString(YValue, culture) as React.ReactNode}\n            </div>\n          </div>\n          {!!ratio && (\n            <div className={this._classNames.ratio}>\n              <>\n                <span className={this._classNames.numerator}>\n                  {formatToLocaleString(ratio[0], culture) as React.ReactNode}\n                </span>\n                /\n                <span className={this._classNames.denominator}>\n                  {formatToLocaleString(ratio[1], culture) as React.ReactNode}\n                </span>\n              </>\n            </div>\n          )}\n        </div>\n        {!!descriptionMessage && <div className={this._classNames.descriptionMessage}>{descriptionMessage}</div>}\n      </div>\n    );\n  }\n}\n"]}

package/lib-amd/utilities/utilities.d.ts

@@ -1,6 +1,7 @@
 import { Axis as D3Axis } from 'd3-axis';
 import { TimeLocaleDefinition as d3TimeLocaleDefinition } from 'd3-time-format';
 import { IAccessibilityProps, IEventsAnnotationProps, ILineChartPoints, IDataPoint, IVerticalStackedBarDataPoint, IVerticalBarChartDataPoint, IHorizontalBarChartWithAxisDataPoint, ILineChartLineOptions, AxisCategoryOrder } from '../index';
+import { ITheme } from '@fluentui/react';
 import { CurveFactory } from 'd3-shape';
 import { IScatterChartPoints } from '../types/IDataPoint';
 export declare const MIN_DOMAIN_MARGIN = 8;
@@ -470,3 +471,5 @@ export declare const truncateString: (str: string, maxLength: number, ellipsis?:
  * @see {@link https://github.com/plotly/plotly.js/blob/master/src/plots/plots.js#L3041}
  */
 export declare const sortAxisCategories: (categoryToValues: Record<string, number[]>, categoryOrder: AxisCategoryOrder | undefined) => string[];
+export declare const getInvertedTextColor: (color: string, theme: ITheme | undefined) => string;
+export declare function getContrastTextColor(backgroundColor: string, theme: ITheme): string;

package/lib-amd/utilities/utilities.js

@@ -1,8 +1,8 @@
-define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-selection", "d3-format", "d3-time-format", "d3-time", "d3-format", "@fluentui/react", "d3-shape", "@fluentui/chart-utilities"], function (require, exports, tslib_1, d3_axis_1, d3_array_1, d3_scale_1, d3_selection_1, d3_format_1, d3_time_format_1, d3_time_1, d3_format_2, react_1, d3_shape_1, chart_utilities_1) {
+define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-selection", "d3-format", "d3-time-format", "d3-time", "d3-format", "@fluentui/react", "d3-shape", "@fluentui/chart-utilities", "./colors"], function (require, exports, tslib_1, d3_axis_1, d3_array_1, d3_scale_1, d3_selection_1, d3_format_1, d3_time_format_1, d3_time_1, d3_format_2, react_1, d3_shape_1, chart_utilities_1, colors_1) {
     "use strict";
     var _a;
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.sortAxisCategories = exports.truncateString = exports.domainRangeOfNumericForScatterChart = exports.domainRangeOfDateForScatterChart = exports.getCurveFactory = exports.createMeasurementSpan = exports.copyStyle = exports.resolveCSSVariables = exports.areArraysEqual = exports.getSecureProps = exports.isScalePaddingDefined = exports.getScalePadding = exports.getBarWidth = exports.formatScientificLimitWidth = exports.wrapTextInsideDonut = exports.rotateXAxisLabels = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.findHBCWANumericMinMaxOfY = exports.findVerticalNumericMinMaxOfY = exports.findVSBCNumericMinMaxOfY = exports.findNumericMinMaxOfY = exports.domainRageOfVerticalNumeric = exports.domainRangeOfDateForAreaLineVerticalBarChart = exports.domainRangeOfVSBCNumeric = exports.domainRangeOfXStringAxis = exports.domainRangeOfNumericForHorizontalBarChartWithAxis = exports.computeLongestBars = exports.groupChartDataByYValue = exports.domainRangeOfNumericForAreaChart = exports.getXAxisType = exports.tooltipOfAxislabels = exports.calculateLongestLabelWidth = exports.wrapContent = exports.createYAxisLabels = exports.createWrapOfXLabels = exports.DEFAULT_WRAP_WIDTH = exports.silceOrAppendToArray = exports.getUnique = exports.calloutData = exports.createStringYAxis = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.createNumericYAxis = exports.createYAxisForHorizontalBarChartWithAxis = exports.prepareDatapoints = exports.createStringXAxis = exports.createDateXAxis = exports.createNumericXAxis = exports.defaultYAxisTickFormatter = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = exports.MIN_DONUT_RADIUS = exports.MIN_DOMAIN_MARGIN = void 0;
+    exports.getContrastTextColor = exports.getInvertedTextColor = exports.sortAxisCategories = exports.truncateString = exports.domainRangeOfNumericForScatterChart = exports.domainRangeOfDateForScatterChart = exports.getCurveFactory = exports.createMeasurementSpan = exports.copyStyle = exports.resolveCSSVariables = exports.areArraysEqual = exports.getSecureProps = exports.isScalePaddingDefined = exports.getScalePadding = exports.getBarWidth = exports.formatScientificLimitWidth = exports.wrapTextInsideDonut = exports.rotateXAxisLabels = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.findHBCWANumericMinMaxOfY = exports.findVerticalNumericMinMaxOfY = exports.findVSBCNumericMinMaxOfY = exports.findNumericMinMaxOfY = exports.domainRageOfVerticalNumeric = exports.domainRangeOfDateForAreaLineVerticalBarChart = exports.domainRangeOfVSBCNumeric = exports.domainRangeOfXStringAxis = exports.domainRangeOfNumericForHorizontalBarChartWithAxis = exports.computeLongestBars = exports.groupChartDataByYValue = exports.domainRangeOfNumericForAreaChart = exports.getXAxisType = exports.tooltipOfAxislabels = exports.calculateLongestLabelWidth = exports.wrapContent = exports.createYAxisLabels = exports.createWrapOfXLabels = exports.DEFAULT_WRAP_WIDTH = exports.silceOrAppendToArray = exports.getUnique = exports.calloutData = exports.createStringYAxis = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.createNumericYAxis = exports.createYAxisForHorizontalBarChartWithAxis = exports.prepareDatapoints = exports.createStringXAxis = exports.createDateXAxis = exports.createNumericXAxis = exports.defaultYAxisTickFormatter = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = exports.MIN_DONUT_RADIUS = exports.MIN_DOMAIN_MARGIN = void 0;
     exports.MIN_DOMAIN_MARGIN = 8;
     exports.MIN_DONUT_RADIUS = 1;
     var ChartTypes;
@@ -1503,5 +1503,20 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         return Object.keys(categoryToValues);
     };
     exports.sortAxisCategories = sortAxisCategories;
+    var getInvertedTextColor = function (color, theme) {
+        return color === theme.semanticColors.bodyText
+            ? theme.semanticColors.bodyBackground
+            : theme.semanticColors.bodyText;
+    };
+    exports.getInvertedTextColor = getInvertedTextColor;
+    function getContrastTextColor(backgroundColor, theme) {
+        var textColor = theme.semanticColors.bodyText;
+        var contrastRatio = (0, colors_1.getColorContrast)(textColor, backgroundColor);
+        if (contrastRatio < 3) {
+            textColor = (0, exports.getInvertedTextColor)(textColor, theme);
+        }
+        return textColor;
+    }
+    exports.getContrastTextColor = getContrastTextColor;
 });
 //# sourceMappingURL=utilities.js.map