@fluentui/react-charting 5.24.9 → 5.24.11

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

@@ -1 +1 @@
-{"version":3,"file":"ChartHoverCard.base.js","sourceRoot":"../src/","sources":["utilities/ChartHoverCard/ChartHoverCard.base.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAE/B,yCAAyE;AACzE,6DAAiE;AAEjE,IAAM,aAAa,GAAG,IAAA,0BAAkB,GAAoD,CAAC;AAC7F;IAAwC,8CAAyC;IAAjF;;IAmCA,CAAC;IAjCQ,mCAAM,GAAb;QACQ,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;QACxG,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAO,EAAE;YACxC,KAAK,EAAE,KAAM;YACb,KAAK,OAAA;YACL,MAAM,QAAA;YACN,cAAc,EAAE,CAAC,CAAC,KAAK;SACxB,CAAC,CAAC;QACH,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,kBAAkB;YACjD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,wBAAwB;gBACvD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe;oBAAG,MAAM;wBAAQ,CAG7D;YACN,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,oBAAoB;gBACnD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,qBAAqB;oBACpD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,iBAAiB,IAAG,IAAA,sCAAoB,EAAC,MAAM,EAAE,OAAO,CAAC,CAAO;oBACjG,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,IAAG,IAAA,sCAAoB,EAAC,MAAM,EAAE,OAAO,CAAC,CAAO,CAC3F;gBACL,CAAC,CAAC,KAAK,IAAI,CACV,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK;oBACpC;wBACE,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,SAAS,IAAG,IAAA,sCAAoB,EAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAQ;;wBAC7F,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,IAAG,IAAA,sCAAoB,EAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAQ,CAC9F,CACC,CACP,CACG;YACL,CAAC,CAAC,kBAAkB,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,kBAAkB,IAAG,kBAAkB,CAAO,CACpG,CACP,CAAC;IACJ,CAAC;IACH,yBAAC;AAAD,CAAC,AAnCD,CAAwC,KAAK,CAAC,SAAS,GAmCtD;AAnCY,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":";;;;AAAA,6BAA+B;AAE/B,yCAAyE;AACzE,6DAAiE;AAEjE,IAAM,aAAa,GAAG,IAAA,0BAAkB,GAAoD,CAAC;AAC7F;IAAwC,8CAAyC;IAAjF;;IA4CA,CAAC;IA1CQ,mCAAM,GAAb;QACQ,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;QACxG,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAO,EAAE;YACxC,KAAK,EAAE,KAAM;YACb,KAAK,OAAA;YACL,MAAM,QAAA;YACN,cAAc,EAAE,CAAC,CAAC,KAAK;SACxB,CAAC,CAAC;QACH,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,kBAAkB;YACjD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,wBAAwB;gBACvD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe;oBAAG,MAAM;wBAAQ,CAG7D;YACN,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,oBAAoB;gBACnD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,qBAAqB;oBACpD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,iBAAiB,IAC/C,IAAA,sCAAoB,EAAC,MAAM,EAAE,OAAO,CAAoB,CACrD;oBACN,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,IAC7C,IAAA,sCAAoB,EAAC,MAAM,EAAE,OAAO,CAAoB,CACrD,CACF;gBACL,CAAC,CAAC,KAAK,IAAI,CACV,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK;oBACpC;wBACE,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,SAAS,IACxC,IAAA,sCAAoB,EAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,CAAoB,CACtD;;wBAEP,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,IAC1C,IAAA,sCAAoB,EAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,CAAoB,CACtD,CACN,CACC,CACP,CACG;YACL,CAAC,CAAC,kBAAkB,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,kBAAkB,IAAG,kBAAkB,CAAO,CACpG,CACP,CAAC;IACJ,CAAC;IACH,yBAAC;AAAD,CAAC,AA5CD,CAAwC,KAAK,CAAC,SAAS,GA4CtD;AA5CY,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-commonjs/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-commonjs/utilities/utilities.js

@@ -2,7 +2,7 @@
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 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.sortAxisCategories = exports.truncateString = exports.domainRangeOfNumericForScatterChart = exports.domainRangeOfDateForScatterChart = exports.getCurveFactory = exports.createMeasurementSpan = exports.copyStyle = void 0;
+exports.getContrastTextColor = exports.getInvertedTextColor = exports.sortAxisCategories = exports.truncateString = exports.domainRangeOfNumericForScatterChart = exports.domainRangeOfDateForScatterChart = exports.getCurveFactory = exports.createMeasurementSpan = exports.copyStyle = void 0;
 var tslib_1 = require("tslib");
 var d3_axis_1 = require("d3-axis");
 var d3_array_1 = require("d3-array");
@@ -15,6 +15,7 @@ var d3_format_2 = require("d3-format");
 var react_1 = require("@fluentui/react");
 var d3_shape_1 = require("d3-shape");
 var chart_utilities_1 = require("@fluentui/chart-utilities");
+var colors_1 = require("./colors");
 exports.MIN_DOMAIN_MARGIN = 8;
 exports.MIN_DONUT_RADIUS = 1;
 var ChartTypes;
@@ -1515,4 +1516,19 @@ var sortAxisCategories = function (categoryToValues, categoryOrder) {
     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