@fluentui/react-charting 5.24.1 → 5.24.2

package/lib-commonjs/components/LineChart/LineChart.styles.js

@@ -2,9 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyles = void 0;
 var tslib_1 = require("tslib");
+var Styling_1 = require("@fluentui/react/lib/Styling");
 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: {
+            selectors: (_a = {},
+                _a[Styling_1.HighContrastSelector] = {
+                    fill: 'CanvasText',
+                },
+                _a),
+        },
     };
 };
 exports.getStyles = getStyles;

package/lib-commonjs/components/LineChart/LineChart.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.styles.js","sourceRoot":"../src/","sources":["components/LineChart/LineChart.styles.ts"],"names":[],"mappings":";;;;AAEO,IAAM,SAAS,GAAG,UAAC,KAA2B;IACnD,OAAO;QACL,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;KACF,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,SAAS,aAgBpB","sourcesContent":["import { ILineChartStyleProps, ILineChartStyles } from './LineChart.types';\n\nexport const getStyles = (props: ILineChartStyleProps): ILineChartStyles => {\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  };\n};\n"]}
+{"version":3,"file":"LineChart.styles.js","sourceRoot":"../src/","sources":["components/LineChart/LineChart.styles.ts"],"names":[],"mappings":";;;;AAAA,uDAAmE;AAG5D,IAAM,SAAS,GAAG,UAAC,KAA2B;;IACnD,OAAO;QACL,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;QACD,WAAW,EAAE;YACX,SAAS;gBACP,GAAC,8BAAoB,IAAG;oBACtB,IAAI,EAAE,YAAY;iBACnB;mBACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AAvBW,QAAA,SAAS,aAuBpB","sourcesContent":["import { HighContrastSelector } from '@fluentui/react/lib/Styling';\nimport { ILineChartStyleProps, ILineChartStyles } from './LineChart.types';\n\nexport const getStyles = (props: ILineChartStyleProps): ILineChartStyles => {\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      selectors: {\n        [HighContrastSelector]: {\n          fill: 'CanvasText',\n        },\n      },\n    },\n  };\n};\n"]}

package/lib-commonjs/components/LineChart/LineChart.types.d.ts

@@ -2,6 +2,7 @@ import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Uti
 import { IChartProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData, ICustomizedCalloutData } from '../../types/index';
 import { IEventAnnotation } from '../../types/IEventAnnotation';
 import { ICartesianChartProps, ICartesianChartStyleProps, ICartesianChartStyles, IChildProps } from '../CommonComponents/index';
+import { IStyle } from '@fluentui/react/lib/Styling';
 export type { IChildProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData };
 /**
  * Line Chart properties
@@ -77,6 +78,7 @@ export interface IEventsAnnotationProps {
  * {@docCategory LineChart}
  */
 export interface ILineChartStyles extends ICartesianChartStyles {
+    markerLabel?: IStyle;
 }
 /**
  * Line Chart style properties

package/lib-commonjs/components/LineChart/LineChart.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.types.js","sourceRoot":"../src/","sources":["components/LineChart/LineChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport {\n  IChartProps,\n  ILineChartPoints,\n  IMargins,\n  IBasestate,\n  IRefArrayData,\n  ICustomizedCalloutData,\n} from '../../types/index';\nimport { IEventAnnotation } from '../../types/IEventAnnotation';\nimport {\n  ICartesianChartProps,\n  ICartesianChartStyleProps,\n  ICartesianChartStyles,\n  IChildProps,\n} from '../CommonComponents/index';\n\nexport type { IChildProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData };\n\n/**\n * Line Chart properties\n * {@docCategory LineChart}\n */\nexport interface ILineChartProps 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?: IStyleFunctionOrObject<ILineChartStyleProps, ILineChartStyles>;\n\n  /**\n   * Show event annotation\n   */\n  eventAnnotationProps?: IEventsAnnotationProps;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;\n\n  /**\n   * Define a custom callout renderer for a stack; default is to render per data point\n   */\n  onRenderCalloutPerStack?: IRenderFunction<ICustomizedCalloutData>;\n\n  /**\n   * Callback for getting callout description message\n   */\n  getCalloutDescriptionMessage?: (calloutDataProps: ICustomizedCalloutData) => string | undefined;\n\n  /*\n   * Color fill bars for the chart,\n   */\n  colorFillBars?: IColorFillBarsProps[];\n\n  /**\n   * if this is set to true, then for each line there will be a unique shape assigned to the point,\n   * there are total 8 shapes which are as follow circle, square, triangele, diamond, pyramid,\n   *  hexagon, pentagon and octagon, which will get assigned as respectively, if there are more\n   * than 8 lines in the line chart then it will again start from cicle to octagon.\n   * setting this flag to true will also change the behavior of the points, like for a\n   * line, last point shape and first point shape will be visible all the times, and all\n   * other points will get enlarge only when hovered over them\n   * if set to false default shape will be circle, with the existing behavior\n   * @default false\n   */\n  allowMultipleShapesForPoints?: boolean;\n\n  /*\n   * Optimize line chart rendering for large data set. If this prop is enabled, line chart\n   * can easily render over 10K datapoints with multiple lines smoothly.\n   * This rendering mechanism does not support gaps in lines.\n   */\n  optimizeLargeData?: boolean;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * @default false\n   * The prop used to enable the perf optimization\n   */\n  enablePerfOptimization?: boolean;\n\n  /**\n   * The prop used to define line chart mode(default or scatter)\n   * @deprecated this prop no longer used to identify scatter mode\n   */\n  lineMode?: 'default' | 'scatter';\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IEventsAnnotationProps {\n  events: IEventAnnotation[];\n  strokeColor?: string;\n  labelColor?: string;\n  labelHeight?: number;\n  labelWidth?: number;\n  mergedLabel: (count: number) => string;\n}\n\n/**\n * Line Chart styles\n * {@docCategory LineChart}\n */\nexport interface ILineChartStyles extends ICartesianChartStyles {}\n\n/**\n * Line Chart style properties\n * {@docCategory LineChart}\n */\nexport interface ILineChartStyleProps extends ICartesianChartStyleProps {}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IColorFillBarsProps {\n  legend: string;\n  color: string;\n  data: IColorFillBarData[];\n  applyPattern?: boolean;\n  onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IColorFillBarData {\n  startX: number | Date;\n  endX: number | Date;\n}\n"]}
+{"version":3,"file":"LineChart.types.js","sourceRoot":"../src/","sources":["components/LineChart/LineChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport {\n  IChartProps,\n  ILineChartPoints,\n  IMargins,\n  IBasestate,\n  IRefArrayData,\n  ICustomizedCalloutData,\n} from '../../types/index';\nimport { IEventAnnotation } from '../../types/IEventAnnotation';\nimport {\n  ICartesianChartProps,\n  ICartesianChartStyleProps,\n  ICartesianChartStyles,\n  IChildProps,\n} from '../CommonComponents/index';\nimport { IStyle } from '@fluentui/react/lib/Styling';\n\nexport type { IChildProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData };\n\n/**\n * Line Chart properties\n * {@docCategory LineChart}\n */\nexport interface ILineChartProps 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?: IStyleFunctionOrObject<ILineChartStyleProps, ILineChartStyles>;\n\n  /**\n   * Show event annotation\n   */\n  eventAnnotationProps?: IEventsAnnotationProps;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;\n\n  /**\n   * Define a custom callout renderer for a stack; default is to render per data point\n   */\n  onRenderCalloutPerStack?: IRenderFunction<ICustomizedCalloutData>;\n\n  /**\n   * Callback for getting callout description message\n   */\n  getCalloutDescriptionMessage?: (calloutDataProps: ICustomizedCalloutData) => string | undefined;\n\n  /*\n   * Color fill bars for the chart,\n   */\n  colorFillBars?: IColorFillBarsProps[];\n\n  /**\n   * if this is set to true, then for each line there will be a unique shape assigned to the point,\n   * there are total 8 shapes which are as follow circle, square, triangele, diamond, pyramid,\n   *  hexagon, pentagon and octagon, which will get assigned as respectively, if there are more\n   * than 8 lines in the line chart then it will again start from cicle to octagon.\n   * setting this flag to true will also change the behavior of the points, like for a\n   * line, last point shape and first point shape will be visible all the times, and all\n   * other points will get enlarge only when hovered over them\n   * if set to false default shape will be circle, with the existing behavior\n   * @default false\n   */\n  allowMultipleShapesForPoints?: boolean;\n\n  /*\n   * Optimize line chart rendering for large data set. If this prop is enabled, line chart\n   * can easily render over 10K datapoints with multiple lines smoothly.\n   * This rendering mechanism does not support gaps in lines.\n   */\n  optimizeLargeData?: boolean;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * @default false\n   * The prop used to enable the perf optimization\n   */\n  enablePerfOptimization?: boolean;\n\n  /**\n   * The prop used to define line chart mode(default or scatter)\n   * @deprecated this prop no longer used to identify scatter mode\n   */\n  lineMode?: 'default' | 'scatter';\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IEventsAnnotationProps {\n  events: IEventAnnotation[];\n  strokeColor?: string;\n  labelColor?: string;\n  labelHeight?: number;\n  labelWidth?: number;\n  mergedLabel: (count: number) => string;\n}\n\n/**\n * Line Chart styles\n * {@docCategory LineChart}\n */\nexport interface ILineChartStyles extends ICartesianChartStyles {\n  markerLabel?: IStyle;\n}\n\n/**\n * Line Chart style properties\n * {@docCategory LineChart}\n */\nexport interface ILineChartStyleProps extends ICartesianChartStyleProps {}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IColorFillBarsProps {\n  legend: string;\n  color: string;\n  data: IColorFillBarData[];\n  applyPattern?: boolean;\n  onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IColorFillBarData {\n  startX: number | Date;\n  endX: number | Date;\n}\n"]}

package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js

@@ -878,8 +878,14 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         if (((_a = this._calloutAnchorPoint) === null || _a === void 0 ? void 0 : _a.chartDataPoint) !== point || ((_b = this._calloutAnchorPoint) === null || _b === void 0 ? void 0 : _b.xAxisDataPoint) !== xAxisPoint) {
             this._calloutAnchorPoint = {
                 chartDataPoint: point,
-                xAxisDataPoint: xAxisPoint,
+                xAxisDataPoint: xAxisPoint instanceof Date
+                    ? (0, chart_utilities_1.formatDateToLocaleString)(xAxisPoint, this.props.culture, this.props.useUTC)
+                    : xAxisPoint.toString(),
             };
+            var xCalloutValue = point.xAxisCalloutData ||
+                (xAxisPoint instanceof Date
+                    ? (0, chart_utilities_1.formatDateToLocaleString)(xAxisPoint, this.props.culture, this.props.useUTC)
+                    : xAxisPoint.toString());
             this.setState({
                 refSelected: refSelected,
                 /**
@@ -890,7 +896,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 calloutLegend: point.legend,
                 dataForHoverCard: point.data,
                 color: color,
-                xCalloutValue: point.xAxisCalloutData ? point.xAxisCalloutData : xAxisPoint,
+                xCalloutValue: xCalloutValue,
                 yCalloutValue: point.yAxisCalloutData,
                 dataPointCalloutProps: point,
                 callOutAccessibilityData: point.callOutAccessibilityData,