@fluentui/react-charting 5.23.97 → 5.24.0

package/lib/types/IDataPoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"IDataPoint.js","sourceRoot":"../src/","sources":["types/IDataPoint.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SankeyLink, SankeyNode } from 'd3-sankey';\nimport { LegendShape } from '../components/Legends/Legends.types';\nimport { CurveFactory } from 'd3-shape';\n\nexport interface IBasestate {\n  _width?: number;\n  _height?: number;\n  activeLegend?: string;\n  color?: string;\n  dataForHoverCard?: number;\n  isCalloutVisible: boolean;\n  isLegendSelected?: boolean;\n  isLegendHovered?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  refSelected?: any;\n  YValueHover?: { legend?: string; y?: number; color?: string }[];\n  hoverYValue?: string | number | null;\n  hoverXValue?: string | number | null;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  lineColor?: string;\n  hoveredLineColor?: string;\n  selectedLegend?: string;\n  containerWidth?: number;\n  containerHeight?: number;\n}\n\nexport interface IRefArrayData {\n  index?: string;\n  refElement?: SVGGElement;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IMargins {\n  /**\n   * left margin for the chart.\n   */\n  left?: number;\n  /**\n   * Right margin for the chart.\n   */\n  right?: number;\n  /**\n   * Top margin for the chart.\n   */\n  top?: number;\n  /**\n   * Bottom margin for the chart.\n   */\n  bottom?: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  // NOTE: VerticalStackedBarChart, PieChart\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalStackedBarDataPoint extends Omit<IDataPoint, 'x'> {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale.\n   */\n  x: number | string | Date;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IChartDataPoint {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * data the datapoint in the chart\n   */\n  data?: number;\n\n  /**\n   * data the datapoint in the chart\n   */\n  horizontalBarChartdata?: IHorizontalDataPoint;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Color for the legend in the chart. If not provided, it will fallback on the default color palette.\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * placeholder data point\n   */\n  placeHolder?: boolean;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalBarChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * data to render the line along with bars\n   */\n  lineData?: ILineDataInVerticalBarChart;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalBarChartWithAxisDataPoint {\n  /**\n   * Dependent value of the data point, rendered along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Independent value of the data point, rendered along the y-axis.\n   * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n   * If y is a string, then the data is evenly spaced along the y-axis.\n   */\n  y: number | string;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalBarChart {\n  y: IVerticalBarChartDataPoint['y'];\n  yAxisCalloutData?: string | undefined;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale\n   */\n  x: number | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onDataPointClick?: () => void;\n\n  /**\n   * Callout data for x axis\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   */\n  yAxisCalloutData?: string | { [id: string]: number };\n\n  /**\n   * Whether to hide callout data for the point.\n   */\n  hideCallout?: boolean;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * X axis Accessibility data for callout\n   */\n  xAxisCalloutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * Marker size of the points\n   */\n  markerSize?: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartGap {\n  /**\n   * Starting index of the gap.\n   */\n  startIndex: number;\n\n  /**\n   * Ending index of the gap.\n   */\n  endIndex: number;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface ILineChartLineOptions extends React.SVGProps<SVGPathElement> {\n  /**\n   * Width of the line/stroke.\n   * Overrides the strokeWidth set on ICartesianChartProps level.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width\n   */\n  strokeWidth?: number | string;\n\n  /**\n   * Pattern of dashes and gaps.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\n   */\n  strokeDasharray?: string | number;\n\n  /**\n   * Offset on rendering of stroke dash array.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset\n   */\n  strokeDashoffset?: string | number;\n\n  /**\n   * Shape at the end of a subpath.\n   * Default round.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap\n   */\n  strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';\n\n  /**\n   * Width of border around the line. Default no border.\n   */\n  lineBorderWidth?: string | number;\n\n  /**\n   * Color of border around the line. Default white.\n   */\n  lineBorderColor?: string;\n\n  /**\n   * Defines the type of interpolation used to render the line.\n   * @default 'linear'\n   */\n  curve?: 'linear' | 'natural' | 'step' | 'stepAfter' | 'stepBefore' | CurveFactory;\n\n  /**\n   * Defines the mode of points to be rendered.\n   */\n  mode?:\n    | 'lines'\n    | 'markers'\n    | 'text'\n    | 'lines+markers'\n    | 'text+markers'\n    | 'text+lines'\n    | 'text+lines+markers'\n    | 'none'\n    | 'gauge'\n    | 'number'\n    | 'delta'\n    | 'number+delta'\n    | 'gauge+number'\n    | 'gauge+number+delta'\n    | 'gauge+delta'\n    | 'markers+text';\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartPoints {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * The shape for the legend\n   * default: show the rect legend\n   */\n  legendShape?: LegendShape;\n\n  /**\n   * dataPoints for the line chart\n   */\n  data: ILineChartDataPoint[];\n\n  /**\n   * gaps in the line chart where a line is not drawn\n   */\n  gaps?: ILineChartGap[];\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * opacity for chart fill color\n   */\n  opacity?: number;\n\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: ILineChartLineOptions;\n\n  /**\n   * hide dots for points that are not active\n   */\n  hideNonActiveDots?: boolean;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onLineClick?: () => void;\n\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IChartProps {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Accessibility data for chart title\n   */\n  chartTitleAccessibilityData?: IAccessibilityProps;\n  /**\n   * data for the points in the chart\n   */\n  chartData?: IChartDataPoint[];\n\n  /**\n   * Accessibility data for chart data\n   */\n  chartDataAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * data for the points in the line chart\n   */\n  lineChartData?: ILineChartPoints[];\n\n  /**\n   * data for the points in the line chart\n   */\n  SankeyChartData?: ISankeyChartData;\n\n  /**\n   * data for the points in the line chart\n   */\n  pointOptions?: React.SVGProps<SVGCircleElement>;\n\n  /**\n   * data for the dotted line on hovering the point\n   */\n  pointLineOptions?: React.SVGProps<SVGLineElement>;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ISankeyChartData {\n  nodes: SNode[];\n  links: SLink[];\n}\n\ninterface ISNodeExtra {\n  /**\n   * A unique identifier for this node.\n   */\n  nodeId: number | string;\n  /**\n   * The display name for this node in the UX.\n   */\n  name: string;\n  color?: string;\n  borderColor?: string;\n  actualValue?: number;\n  layer?: number;\n}\n\ninterface ISLinkExtra {\n  /**\n   * The index within `ISankeyChartData.nodes` of the source node.\n   */\n  source: number;\n  /**\n   * The index within `ISankeyChartData.nodes` of the target node.\n   */\n  target: number;\n  /**\n   * The weight of this link between the two nodes.\n   */\n  value: number;\n  unnormalizedValue?: number;\n}\n\nexport type SNode = SankeyNode<ISNodeExtra, ISLinkExtra>;\nexport type SLink = SankeyLink<ISNodeExtra, ISLinkExtra>;\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IAccessibilityProps {\n  /**\n   * Accessibility aria-label\n   */\n  ariaLabel?: string;\n\n  /**\n   * Accessibility aria-labelledBy\n   */\n  ariaLabelledBy?: string;\n\n  /**\n   * Accessibility aria-describedBy\n   */\n  ariaDescribedBy?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVSChartDataPoint {\n  /**\n   * data the datapoint in the chart\n   */\n  data: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IVerticalStackedChartProps {\n  /**\n   * data for the points in the chart\n   */\n  chartData: IVSChartDataPoint[];\n\n  /**\n   * Data for x axis label for multistacked Vertical bar chart\n   */\n  xAxisPoint: number | string | Date;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven't given, legend will take\n   */\n  xAxisCalloutData?: string;\n  /**\n   * line data to render lines on stacked bar chart\n   */\n  lineData?: ILineDataInVerticalStackedBarChart[];\n  /**\n   * Accessibility data for Whole stack callout\n   */\n  stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalStackedBarChart {\n  y: number;\n  color: string;\n  legend: string;\n  /**\n   * The shape for the legend\n   * default: show the rect legend\n   */\n  legendShape?: LegendShape;\n  /**\n   * Data to show in callout\n   */\n  data?: number;\n  yAxisCalloutData?: string;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: ILineChartLineOptions;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGVBarChartSeriesPoint {\n  /**\n   * Text for // need to check use of this\n   */\n  key: string;\n\n  /**\n   * Data for bar height of Grouped vertical bar chart\n   */\n  data: number;\n\n  /**\n   * Color for the legend in the chart\n   */\n  color: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Legend text in the chart\n   */\n  legend: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGroupedVerticalBarChartData {\n  /**\n   * Data for X axis label\n   */\n  name: string;\n\n  /**\n   * Data points for Grouped vertical bar chart\n   */\n  series: IGVBarChartSeriesPoint[];\n\n  /**\n   * Accessibility data for Group Bars Stack Callout\n   */\n  stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IGVDataPoint {\n  /**\n   * This interface used for - While forming datapoints from given prop \"data\" in code\n   * datapoints are used for to draw graph\n   */\n  [key: string]: number | string;\n}\n\nexport interface IGVSingleDataPoint {\n  /**\n   * While forming datapoints from given prop \"data\" in code.\n   * These datapoints are used for to draw graph easily.\n   */\n  [key: string]: IGVDataPoint;\n}\n\nexport interface IGVForBarChart {\n  /**\n   * While forming datapoints from given prop \"data\"\n   * These datapoints are used for to draw graph.\n   */\n  [key: string]: IGVBarChartSeriesPoint;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartDataPoint {\n  x: string | Date | number;\n  y: string | Date | number;\n  value: number;\n  /**\n   * The value/ text to be rendered in the rectange\n   */\n  rectText?: string | number;\n  /**\n   * denomination to show in the callout\n   */\n  ratio?: [number, number];\n  /**\n   * description message to the callout\n   */\n  descriptionMessage?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartData {\n  /**\n   * name of the legend\n   */\n  legend: string;\n  data: IHeatMapChartDataPoint[];\n  /**\n   * This  number will be used to get the color for the legend\n   */\n  value: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutDataPoint {\n  legend: string;\n  y: number;\n  color: string;\n  xAxisCalloutData?: string;\n  yAxisCalloutData?: string | { [id: string]: number };\n}\n\n/**\n * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,\n * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutData {\n  x: number | string | Date;\n  values: ICustomizedCalloutDataPoint[];\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface IChart {\n  chartContainer: HTMLElement | null;\n  toImage?: (opts?: IImageExportOptions) => Promise<string>;\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface IImageExportOptions {\n  width?: number;\n  height?: number;\n  scale?: number;\n  background?: string;\n}\n"]}
+{"version":3,"file":"IDataPoint.js","sourceRoot":"../src/","sources":["types/IDataPoint.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SankeyLink, SankeyNode } from 'd3-sankey';\nimport { LegendShape } from '../components/Legends/Legends.types';\nimport { CurveFactory } from 'd3-shape';\n\nexport interface IBasestate {\n  _width?: number;\n  _height?: number;\n  activeLegend?: string;\n  color?: string;\n  dataForHoverCard?: number | string;\n  isCalloutVisible: boolean;\n  isLegendSelected?: boolean;\n  isLegendHovered?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  refSelected?: any;\n  YValueHover?: { legend?: string; y?: number | string; color?: string }[];\n  hoverYValue?: string | number | null;\n  hoverXValue?: string | number | null;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  lineColor?: string;\n  hoveredLineColor?: string;\n  selectedLegend?: string;\n  containerWidth?: number;\n  containerHeight?: number;\n}\n\nexport interface IRefArrayData {\n  index?: string;\n  refElement?: SVGGElement;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IMargins {\n  /**\n   * left margin for the chart.\n   */\n  left?: number;\n  /**\n   * Right margin for the chart.\n   */\n  right?: number;\n  /**\n   * Top margin for the chart.\n   */\n  top?: number;\n  /**\n   * Bottom margin for the chart.\n   */\n  bottom?: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  // NOTE: VerticalStackedBarChart, PieChart\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalStackedBarDataPoint extends Omit<IDataPoint, 'x'> {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale.\n   */\n  x: number | string | Date;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IChartDataPoint {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * data the datapoint in the chart\n   */\n  data?: number;\n\n  /**\n   * data the datapoint in the chart\n   */\n  horizontalBarChartdata?: IHorizontalDataPoint;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Color for the legend in the chart. If not provided, it will fallback on the default color palette.\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * placeholder data point\n   */\n  placeHolder?: boolean;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalBarChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * data to render the line along with bars\n   */\n  lineData?: ILineDataInVerticalBarChart;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalBarChartWithAxisDataPoint {\n  /**\n   * Dependent value of the data point, rendered along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Independent value of the data point, rendered along the y-axis.\n   * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n   * If y is a string, then the data is evenly spaced along the y-axis.\n   */\n  y: number | string;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalBarChart {\n  y: IVerticalBarChartDataPoint['y'];\n  yAxisCalloutData?: string | undefined;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale\n   */\n  x: number | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onDataPointClick?: () => void;\n\n  /**\n   * Callout data for x axis\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   */\n  yAxisCalloutData?: string | { [id: string]: number };\n\n  /**\n   * Whether to hide callout data for the point.\n   */\n  hideCallout?: boolean;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * X axis Accessibility data for callout\n   */\n  xAxisCalloutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * Marker size of the points\n   */\n  markerSize?: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartGap {\n  /**\n   * Starting index of the gap.\n   */\n  startIndex: number;\n\n  /**\n   * Ending index of the gap.\n   */\n  endIndex: number;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface ILineChartLineOptions extends React.SVGProps<SVGPathElement> {\n  /**\n   * Width of the line/stroke.\n   * Overrides the strokeWidth set on ICartesianChartProps level.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width\n   */\n  strokeWidth?: number | string;\n\n  /**\n   * Pattern of dashes and gaps.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\n   */\n  strokeDasharray?: string | number;\n\n  /**\n   * Offset on rendering of stroke dash array.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset\n   */\n  strokeDashoffset?: string | number;\n\n  /**\n   * Shape at the end of a subpath.\n   * Default round.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap\n   */\n  strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';\n\n  /**\n   * Width of border around the line. Default no border.\n   */\n  lineBorderWidth?: string | number;\n\n  /**\n   * Color of border around the line. Default white.\n   */\n  lineBorderColor?: string;\n\n  /**\n   * Defines the type of interpolation used to render the line.\n   * @default 'linear'\n   */\n  curve?: 'linear' | 'natural' | 'step' | 'stepAfter' | 'stepBefore' | CurveFactory;\n\n  /**\n   * Defines the mode of points to be rendered.\n   */\n  mode?:\n    | 'lines'\n    | 'markers'\n    | 'text'\n    | 'lines+markers'\n    | 'text+markers'\n    | 'text+lines'\n    | 'text+lines+markers'\n    | 'none'\n    | 'gauge'\n    | 'number'\n    | 'delta'\n    | 'number+delta'\n    | 'gauge+number'\n    | 'gauge+number+delta'\n    | 'gauge+delta'\n    | 'markers+text';\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartPoints {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * The shape for the legend\n   * default: show the rect legend\n   */\n  legendShape?: LegendShape;\n\n  /**\n   * dataPoints for the line chart\n   */\n  data: ILineChartDataPoint[];\n\n  /**\n   * gaps in the line chart where a line is not drawn\n   */\n  gaps?: ILineChartGap[];\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * opacity for chart fill color\n   */\n  opacity?: number;\n\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: ILineChartLineOptions;\n\n  /**\n   * hide dots for points that are not active\n   */\n  hideNonActiveDots?: boolean;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onLineClick?: () => void;\n\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IChartProps {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Accessibility data for chart title\n   */\n  chartTitleAccessibilityData?: IAccessibilityProps;\n  /**\n   * data for the points in the chart\n   */\n  chartData?: IChartDataPoint[];\n\n  /**\n   * Accessibility data for chart data\n   */\n  chartDataAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * data for the points in the line chart\n   */\n  lineChartData?: ILineChartPoints[];\n\n  /**\n   * data for the points in the line chart\n   */\n  SankeyChartData?: ISankeyChartData;\n\n  /**\n   * data for the points in the line chart\n   */\n  pointOptions?: React.SVGProps<SVGCircleElement>;\n\n  /**\n   * data for the dotted line on hovering the point\n   */\n  pointLineOptions?: React.SVGProps<SVGLineElement>;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ISankeyChartData {\n  nodes: SNode[];\n  links: SLink[];\n}\n\ninterface ISNodeExtra {\n  /**\n   * A unique identifier for this node.\n   */\n  nodeId: number | string;\n  /**\n   * The display name for this node in the UX.\n   */\n  name: string;\n  color?: string;\n  borderColor?: string;\n  actualValue?: number;\n  layer?: number;\n}\n\ninterface ISLinkExtra {\n  /**\n   * The index within `ISankeyChartData.nodes` of the source node.\n   */\n  source: number;\n  /**\n   * The index within `ISankeyChartData.nodes` of the target node.\n   */\n  target: number;\n  /**\n   * The weight of this link between the two nodes.\n   */\n  value: number;\n  unnormalizedValue?: number;\n}\n\nexport type SNode = SankeyNode<ISNodeExtra, ISLinkExtra>;\nexport type SLink = SankeyLink<ISNodeExtra, ISLinkExtra>;\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IAccessibilityProps {\n  /**\n   * Accessibility aria-label\n   */\n  ariaLabel?: string;\n\n  /**\n   * Accessibility aria-labelledBy\n   */\n  ariaLabelledBy?: string;\n\n  /**\n   * Accessibility aria-describedBy\n   */\n  ariaDescribedBy?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVSChartDataPoint {\n  /**\n   * data the datapoint in the chart\n   */\n  data: number | string;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IVerticalStackedChartProps {\n  /**\n   * data for the points in the chart\n   */\n  chartData: IVSChartDataPoint[];\n\n  /**\n   * Data for x axis label for multistacked Vertical bar chart\n   */\n  xAxisPoint: number | string | Date;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven't given, legend will take\n   */\n  xAxisCalloutData?: string;\n  /**\n   * line data to render lines on stacked bar chart\n   */\n  lineData?: ILineDataInVerticalStackedBarChart[];\n  /**\n   * Accessibility data for Whole stack callout\n   */\n  stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalStackedBarChart {\n  y: number | string;\n  color: string;\n  legend: string;\n  /**\n   * The shape for the legend\n   * default: show the rect legend\n   */\n  legendShape?: LegendShape;\n  /**\n   * Data to show in callout\n   */\n  data?: number | string;\n  yAxisCalloutData?: string;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: ILineChartLineOptions;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGVBarChartSeriesPoint {\n  /**\n   * Text for // need to check use of this\n   */\n  key: string;\n\n  /**\n   * Data for bar height of Grouped vertical bar chart\n   */\n  data: number;\n\n  /**\n   * Color for the legend in the chart\n   */\n  color: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Legend text in the chart\n   */\n  legend: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGroupedVerticalBarChartData {\n  /**\n   * Data for X axis label\n   */\n  name: string;\n\n  /**\n   * Data points for Grouped vertical bar chart\n   */\n  series: IGVBarChartSeriesPoint[];\n\n  /**\n   * Accessibility data for Group Bars Stack Callout\n   */\n  stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IGVDataPoint {\n  /**\n   * This interface used for - While forming datapoints from given prop \"data\" in code\n   * datapoints are used for to draw graph\n   */\n  [key: string]: number | string;\n}\n\nexport interface IGVSingleDataPoint {\n  /**\n   * While forming datapoints from given prop \"data\" in code.\n   * These datapoints are used for to draw graph easily.\n   */\n  [key: string]: IGVDataPoint;\n}\n\nexport interface IGVForBarChart {\n  /**\n   * While forming datapoints from given prop \"data\"\n   * These datapoints are used for to draw graph.\n   */\n  [key: string]: IGVBarChartSeriesPoint;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartDataPoint {\n  x: string | Date | number;\n  y: string | Date | number;\n  value: number;\n  /**\n   * The value/ text to be rendered in the rectange\n   */\n  rectText?: string | number;\n  /**\n   * denomination to show in the callout\n   */\n  ratio?: [number, number];\n  /**\n   * description message to the callout\n   */\n  descriptionMessage?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartData {\n  /**\n   * name of the legend\n   */\n  legend: string;\n  data: IHeatMapChartDataPoint[];\n  /**\n   * This  number will be used to get the color for the legend\n   */\n  value: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutDataPoint {\n  legend: string;\n  y: number;\n  color: string;\n  xAxisCalloutData?: string;\n  yAxisCalloutData?: string | { [id: string]: number };\n}\n\n/**\n * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,\n * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutData {\n  x: number | string | Date;\n  values: ICustomizedCalloutDataPoint[];\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface IChart {\n  chartContainer: HTMLElement | null;\n  toImage?: (opts?: IImageExportOptions) => Promise<string>;\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface IImageExportOptions {\n  width?: number;\n  height?: number;\n  scale?: number;\n  background?: string;\n}\n"]}

package/lib/utilities/ChartHoverCard/ChartHoverCard.base.js

@@ -1,7 +1,7 @@
 import { __extends } from "tslib";
 import * as React from 'react';
 import { classNamesFunction } from '@fluentui/react';
-import { convertToLocaleString } from '../locale-util';
+import { formatToLocaleString } from '@fluentui/chart-utilities';
 var getClassNames = classNamesFunction();
 var ChartHoverCardBase = /** @class */ (function (_super) {
     __extends(ChartHoverCardBase, _super);
@@ -23,13 +23,13 @@ var ChartHoverCardBase = /** @class */ (function (_super) {
                     " ")),
             React.createElement("div", { className: this._classNames.calloutInfoContainer },
                 React.createElement("div", { className: this._classNames.calloutBlockContainer },
-                    React.createElement("div", { className: this._classNames.calloutlegendText }, convertToLocaleString(Legend, culture)),
-                    React.createElement("div", { className: this._classNames.calloutContentY }, convertToLocaleString(YValue, culture))),
+                    React.createElement("div", { className: this._classNames.calloutlegendText }, formatToLocaleString(Legend, culture)),
+                    React.createElement("div", { className: this._classNames.calloutContentY }, formatToLocaleString(YValue, culture))),
                 !!ratio && (React.createElement("div", { className: this._classNames.ratio },
                     React.createElement(React.Fragment, null,
-                        React.createElement("span", { className: this._classNames.numerator }, convertToLocaleString(ratio[0], culture)),
+                        React.createElement("span", { className: this._classNames.numerator }, formatToLocaleString(ratio[0], culture)),
                         "/",
-                        React.createElement("span", { className: this._classNames.denominator }, convertToLocaleString(ratio[1], culture)))))),
+                        React.createElement("span", { className: this._classNames.denominator }, formatToLocaleString(ratio[1], culture)))))),
             !!descriptionMessage && React.createElement("div", { className: this._classNames.descriptionMessage }, descriptionMessage)));
     };
     return ChartHoverCardBase;

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,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,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,qBAAqB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAO;oBAClG,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,IAAG,qBAAqB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAO,CAC5F;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,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAQ;;wBAC9F,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,IAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAQ,CAC/F,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 { convertToLocaleString } from '../locale-util';\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}>{convertToLocaleString(Legend, culture)}</div>\n            <div className={this._classNames.calloutContentY}>{convertToLocaleString(YValue, culture)}</div>\n          </div>\n          {!!ratio && (\n            <div className={this._classNames.ratio}>\n              <>\n                <span className={this._classNames.numerator}>{convertToLocaleString(ratio[0], culture)}</span>/\n                <span className={this._classNames.denominator}>{convertToLocaleString(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;;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"]}

package/lib/utilities/utilities.d.ts

@@ -3,6 +3,7 @@ import { TimeLocaleDefinition as d3TimeLocaleDefinition } from 'd3-time-format';
 import { IAccessibilityProps, IEventsAnnotationProps, ILineChartPoints, IDataPoint, IVerticalStackedBarDataPoint, IVerticalBarChartDataPoint, IHorizontalBarChartWithAxisDataPoint, ILineChartLineOptions } from '../index';
 import { CurveFactory } from 'd3-shape';
 export declare const MIN_DOMAIN_MARGIN = 8;
+export declare const MIN_DONUT_RADIUS = 1;
 export type NumericAxis = D3Axis<number | {
     valueOf(): number;
 }>;
@@ -168,7 +169,7 @@ export declare const createStringYAxisForHorizontalBarChartWithAxis: (yAxisParam
  * @param dataPoints
  * @param isRtl
  */
-export declare const createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean) => import("d3-scale").ScaleBand<string>;
+export declare const createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, barWidth?: number, chartType?: ChartTypes) => import("d3-scale").ScaleBand<string>;
 /**
  * For area chart and line chart, while displaying stackCallout, Need to form a callout data object.
  * This methos creates an object for those 2 charts.
@@ -426,15 +427,12 @@ export declare const getAccessibleDataObject: (accessibleData?: IAccessibilityPr
     'aria-labelledby': string | undefined;
     'aria-describedby': string | undefined;
 };
-type LocaleStringDataProps = number | string | Date | undefined;
-export declare const convertToLocaleString: (data: LocaleStringDataProps, culture?: string) => LocaleStringDataProps;
 export declare function rotateXAxisLabels(rotateLabelProps: IRotateLabelProps): number | undefined;
 export declare function wrapTextInsideDonut(selectorClass: string, maxWidth: number): void;
-export declare function formatValueLimitWidth(value: number): string;
+export declare function formatScientificLimitWidth(value: number): string;
 export declare const getBarWidth: (barWidthProp: number | 'default' | 'auto' | undefined, maxBarWidthProp: number | undefined, adjustedValue?: number, modeProp?: string) => number;
 export declare const getScalePadding: (prop: number | undefined, shorthandProp?: number, defaultValue?: number) => number;
 export declare const isScalePaddingDefined: (prop: number | undefined, shorthandProp?: number) => boolean;
-export declare const formatDate: (date: Date, useUTC?: boolean) => string;
 export declare function getSecureProps(props?: Record<string, any>): Record<string, any>;
 export declare function areArraysEqual(arr1?: string[], arr2?: string[]): boolean;
 export declare function resolveCSSVariables(chartContainer: HTMLElement, styleRules: string): string;
@@ -442,4 +440,3 @@ export declare function copyStyle(properties: string[] | Record<string, string>,
 export declare const createMeasurementSpan: (text: string | number, className: string, parentElement?: HTMLElement | null) => HTMLElement;
 export declare function getCurveFactory(curve: ILineChartLineOptions['curve'], defaultFactory?: CurveFactory): CurveFactory;
 export declare const truncateString: (str: string, maxLength: number, ellipsis?: string) => string;
-export {};

package/lib/utilities/utilities.js

@@ -10,7 +10,9 @@ import { timeSecond as d3TimeSecond, timeMinute as d3TimeMinute, timeHour as d3T
 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';
 export var MIN_DOMAIN_MARGIN = 8;
+export var MIN_DONUT_RADIUS = 1;
 export var ChartTypes;
 (function (ChartTypes) {
     ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
@@ -78,7 +80,7 @@ export function createNumericXAxis(xAxisParams, tickParams, chartType, culture)
             return d3Format(tickParams.tickFormat)(domainValue);
         }
         var xAxisValue = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
-        return convertToLocaleString(xAxisValue, culture);
+        return formatToLocaleString(xAxisValue, culture);
     };
     if (hideTickOverlap && typeof xAxisCount === 'undefined') {
         var longestLabelWidth = calculateLongestLabelWidth(xAxisScale.ticks().map(tickFormat), '[class^="xAxis-"] text') + 20;
@@ -115,7 +117,7 @@ export function createNumericXAxis(xAxisParams, tickParams, chartType, culture)
  * @param useUTC
  * @returns
  */
-function getMultiLevelDateFormatter(startLevel, endLevel, locale, useUTC) {
+function getMultiLevelD3DateFormatter(startLevel, endLevel, locale, useUTC) {
     var timeFormat = locale ? (useUTC ? locale.utcFormat : locale.format) : useUTC ? d3UtcFormat : d3TimeFormat;
     // Refer to https://d3js.org/d3-time-format#locale_format to see explanation about each format specifier
     var DEFAULT = '%c';
@@ -198,11 +200,6 @@ function isPowerOf10(num) {
     var roundedfinalYMax = handleFloatingPointPrecisionError(num);
     return Math.log10(roundedfinalYMax) % 1 === 0;
 }
-//for reference, go through this 'https://docs.python.org/release/2.5.1/tut/node16.html'
-function handleFloatingPointPrecisionError(num) {
-    var rounded = Math.round(num);
-    return Math.abs(num - rounded) < 1e-6 ? rounded : num;
-}
 /**
  * Creating Date x axis of the Chart
  * @export
@@ -230,14 +227,12 @@ export function createDateXAxis(xAxisParams, tickParams, culture, options, timeF
             lowestFormatLevel = formatLevel;
         }
     });
-    var formatFn = getMultiLevelDateFormatter(lowestFormatLevel, highestFormatLevel, locale, useUTC);
+    var formatOptions = options !== null && options !== void 0 ? options : getMultiLevelDateTimeFormatOptions(lowestFormatLevel, highestFormatLevel);
+    var formatFn = getMultiLevelD3DateFormatter(lowestFormatLevel, highestFormatLevel, locale, useUTC);
     var tickFormat = function (domainValue, _index) {
         if (customDateTimeFormatter) {
             return customDateTimeFormatter(domainValue);
         }
-        if (culture && options) {
-            return domainValue.toLocaleString(culture, options);
-        }
         if (timeFormatLocale) {
             return formatFn(domainValue);
         }
@@ -249,12 +244,12 @@ export function createDateXAxis(xAxisParams, tickParams, culture, options, timeF
                 return d3TimeFormat(tickParams.tickFormat)(domainValue);
             }
         }
-        return formatFn(domainValue);
+        return formatDateToLocaleString(domainValue, culture, useUTC, false, formatOptions);
     };
     var longestLabelWidth = calculateLongestLabelWidth(xAxisScale.ticks().map(tickFormat), '[class^="xAxis-"] text') + 40;
     var _d = xAxisScale.range(), start = _d[0], end = _d[1];
-    tickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
-    tickCount = Math.min(tickCount, xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : tickCount);
+    var maxPossibleTickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
+    tickCount = Math.min(maxPossibleTickCount, xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : tickCount);
     var xAxis = d3AxisBottom(xAxisScale)
         .tickSize(xAxistickSize)
         .tickPadding(tickPadding)
@@ -450,14 +445,20 @@ export var createStringYAxisForHorizontalBarChartWithAxis = function (yAxisParam
  * @param dataPoints
  * @param isRtl
  */
-export var createStringYAxis = function (yAxisParams, dataPoints, isRtl) {
-    var containerHeight = yAxisParams.containerHeight, _a = yAxisParams.tickPadding, tickPadding = _a === void 0 ? 12 : _a, margins = yAxisParams.margins, yAxisTickFormat = yAxisParams.yAxisTickFormat, yAxisElement = yAxisParams.yAxisElement, _b = yAxisParams.yAxisPadding, yAxisPadding = _b === void 0 ? 0 : _b;
+export var createStringYAxis = function (yAxisParams, dataPoints, isRtl, barWidth, chartType) {
+    var containerHeight = yAxisParams.containerHeight, _a = yAxisParams.tickPadding, tickPadding = _a === void 0 ? 12 : _a, margins = yAxisParams.margins, yAxisTickFormat = yAxisParams.yAxisTickFormat, yAxisElement = yAxisParams.yAxisElement, _b = yAxisParams.yAxisPadding, yAxisPadding = _b === void 0 ? 0 : _b, containerWidth = yAxisParams.containerWidth;
     var yAxisScale = d3ScaleBand()
         .domain(dataPoints)
         .range([containerHeight - margins.bottom, margins.top])
         .padding(yAxisPadding);
+    if (chartType === ChartTypes.VerticalStackedBarChart) {
+        yAxisScale.paddingInner(1).paddingOuter(0);
+    }
     var axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
     var yAxis = axis.tickPadding(tickPadding).tickValues(dataPoints).tickSize(0);
+    if (chartType === ChartTypes.VerticalStackedBarChart) {
+        axis.tickSizeInner(-(containerWidth - margins.left - margins.right));
+    }
     if (yAxisTickFormat) {
         yAxis.tickFormat(yAxisTickFormat);
     }
@@ -664,7 +665,7 @@ yAxis, noOfCharsToTruncate, truncateLabel, isRtl) {
             ? "...".concat(text.text().slice(0, noOfCharsToTruncate))
             : "".concat(text.text().slice(0, noOfCharsToTruncate), "...");
         var totalWordLength = text.text().length;
-        var padding = truncateLabel ? 1.5 : 1; // ems
+        var padding = 0; // ems
         var y = text.attr('y');
         var x = text.attr('x');
         var dy = parseFloat(text.attr('dy'));
@@ -681,18 +682,17 @@ yAxis, noOfCharsToTruncate, truncateLabel, isRtl) {
             text
                 .append('tspan')
                 .attr('id', 'showDots')
-                .attr('x', isRtl ? 0 : x)
+                .attr('x', x)
                 .attr('y', y)
-                .attr('dy', dy)
+                .attr('dy', dy + 'em')
                 .attr('dx', padding + dx + 'em')
                 .text(truncatedWord);
         }
         else {
             text
-                .attr('text-align', 'start')
                 .append('tspan')
                 .attr('id', 'LessLength')
-                .attr('x', isRtl ? 0 : x)
+                .attr('x', x)
                 .attr('y', y)
                 .attr('dx', padding + dx + 'em')
                 .text(totalWord);
@@ -1139,29 +1139,6 @@ export var getAccessibleDataObject = function (accessibleData, role, isDataFocus
         'aria-describedby': accessibleData.ariaDescribedBy,
     };
 };
-export var convertToLocaleString = function (data, culture) {
-    if (data === undefined || data === null || Number.isNaN(data)) {
-        return data;
-    }
-    culture = culture || undefined;
-    if (typeof data === 'number') {
-        if (Math.abs(data) < 10000) {
-            return data.toString();
-        }
-        return data.toLocaleString(culture);
-    }
-    else if (typeof data === 'string' && !window.isNaN(Number(data))) {
-        var num = Number(data);
-        if (Math.abs(num) < 10000) {
-            return num.toString();
-        }
-        return num.toLocaleString(culture);
-    }
-    else if (data instanceof Date) {
-        return data.toLocaleDateString(culture);
-    }
-    return data;
-};
 export function rotateXAxisLabels(rotateLabelProps) {
     var node = rotateLabelProps.node, xAxis = rotateLabelProps.xAxis;
     if (node === null || xAxis === null) {
@@ -1237,7 +1214,7 @@ export function wrapTextInsideDonut(selectorClass, maxWidth) {
         idx += 1;
     });
 }
-export function formatValueLimitWidth(value) {
+export function formatScientificLimitWidth(value) {
     return yAxisTickFormatterInternal(value, true);
 }
 var DEFAULT_BAR_WIDTH = 16;
@@ -1269,10 +1246,6 @@ export var getScalePadding = function (prop, shorthandProp, defaultValue) {
 export var isScalePaddingDefined = function (prop, shorthandProp) {
     return typeof prop === 'number' || typeof shorthandProp === 'number';
 };
-export var formatDate = function (date, useUTC) {
-    var timeFormat = useUTC ? d3UtcFormat : d3TimeFormat;
-    return timeFormat('%-e %b %Y, %H:%M')(date) + (useUTC ? ' GMT' : '');
-};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function getSecureProps(props) {
     if (props === void 0) { props = {}; }