@fluentui/react-charting 5.24.9 → 5.24.11

package/lib/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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAsB,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,IAAM,aAAa,GAAG,kBAAkB,EAAoD,CAAC;AAC7F;IAAwC,sCAAyC;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,oBAAoB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAO;oBACjG,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,IAAG,oBAAoB,CAAC,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,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAQ;;wBAC7F,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,IAAG,oBAAoB,CAAC,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","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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAsB,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,IAAM,aAAa,GAAG,kBAAkB,EAAoD,CAAC;AAC7F;IAAwC,sCAAyC;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,oBAAoB,CAAC,MAAM,EAAE,OAAO,CAAoB,CACrD;oBACN,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,IAC7C,oBAAoB,CAAC,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,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,CAAoB,CACtD;;wBAEP,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,IAC1C,oBAAoB,CAAC,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","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/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/utilities/utilities.js

@@ -11,6 +11,7 @@ import { formatPrefix as d3FormatPrefix } from 'd3-format';
 import { getId } from '@fluentui/react';
 import { curveLinear as d3CurveLinear, curveNatural as d3CurveNatural, curveStep as d3CurveStep, curveStepAfter as d3CurveStepAfter, curveStepBefore as d3CurveStepBefore, } from 'd3-shape';
 import { formatDateToLocaleString, formatToLocaleString, getMultiLevelDateTimeFormatOptions, handleFloatingPointPrecisionError, } from '@fluentui/chart-utilities';
+import { getColorContrast } from './colors';
 export var MIN_DOMAIN_MARGIN = 8;
 export var MIN_DONUT_RADIUS = 1;
 export var ChartTypes;
@@ -1463,4 +1464,17 @@ export var sortAxisCategories = function (categoryToValues, categoryOrder) {
     }
     return Object.keys(categoryToValues);
 };
+export var getInvertedTextColor = function (color, theme) {
+    return color === theme.semanticColors.bodyText
+        ? theme.semanticColors.bodyBackground
+        : theme.semanticColors.bodyText;
+};
+export function getContrastTextColor(backgroundColor, theme) {
+    var textColor = theme.semanticColors.bodyText;
+    var contrastRatio = getColorContrast(textColor, backgroundColor);
+    if (contrastRatio < 3) {
+        textColor = getInvertedTextColor(textColor, theme);
+    }
+    return textColor;
+}
 //# sourceMappingURL=utilities.js.map