@fluentui/react-charts 9.3.7 → 9.3.9

package/lib-commonjs/components/CommonComponents/CartesianChart.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CommonComponents/CartesianChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { LegendsProps } from '../Legends/index';\nimport {\n  AccessibilityProps,\n  Chart,\n  Margins,\n  DataPoint,\n  ChartAnnotation,\n  HorizontalBarChartWithAxisDataPoint,\n  GroupedVerticalBarChartData,\n  HeatMapChartDataPoint,\n  LineChartPoints,\n  VerticalBarChartDataPoint,\n  VerticalStackedBarDataPoint,\n  ScatterChartPoints,\n  GanttChartDataPoint,\n  AxisCategoryOrder,\n  AxisProps,\n  AxisScaleType,\n} from '../../types/index';\nimport { TimeLocaleDefinition } from 'd3-time-format';\nimport { ChartPopoverProps } from './ChartPopover.types';\nimport { ChartTypes, IAxisData, IDomainNRange, IYAxisParams, XAxisTypes, YAxisType } from '../../utilities/utilities';\nimport { ScaleBand, ScaleLinear } from 'd3-scale';\n/**\n * Cartesian Chart style properties\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartStyleProps {\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of the chart.\n   */\n  height?: number;\n\n  /**\n   * Color of the chart.\n   */\n  color?: string;\n\n  /**\n   * Link to redirect if click action for graph\n   */\n  href?: string;\n\n  /**\n   * prop to check if the chart is selected or hovered upon to determine opacity\n   */\n  shouldHighlight?: boolean;\n\n  /**\n   * prop to check if the Page is in Rtl\n   */\n  useRtl?: boolean;\n\n  /**\n   * color of the line\n   */\n  lineColor?: string;\n\n  /**\n   * boolean flag which determines if shape is drawn in callout\n   */\n  toDrawShape?: boolean;\n\n  /**\n   * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows\n   * @deprecated Use `reflowProps` instead.\n   */\n  enableReflow?: boolean;\n}\n\n/**\n * Cartesian Chart styles\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: string;\n\n  /**\n   * Style for the element containing the x-axis.\n   */\n  xAxis?: string;\n\n  /**\n   * Style for the element containing the y-axis.\n   */\n  yAxis?: string;\n\n  /**\n   * Style for legend container\n   */\n  legendContainer?: string;\n\n  /**\n   * line hover box css\n   */\n  hover?: string;\n\n  /**\n   * styles for description message\n   */\n  descriptionMessage?: string;\n\n  /**\n   * styles for tooltip\n   */\n  tooltip?: string;\n\n  /**\n   * styles for axis title\n   */\n  axisTitle?: string;\n\n  /**\n   * styles for axis annotation\n   */\n  axisAnnotation?: string;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle?: string;\n\n  /**\n   * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n   */\n  opacityChangeOnHover?: string;\n\n  /**\n   * styles for the shape object in the callout\n   */\n  shapeStyles?: string;\n\n  /**\n   * Styles for the chart wrapper div\n   */\n  chartWrapper?: string;\n\n  /**\n   * Styles for the element wrapping the svg and overlays for annotation\n   */\n  plotContainer?: string;\n\n  /**\n   * Styles for the svg tooltip\n   */\n  svgTooltip?: string;\n\n  /**\n   * Styles applied to the annotation layer root element\n   */\n  annotationLayer?: string;\n\n  /**\n   * Styles for the chart svg element\n   */\n  chart?: string;\n}\n\n/**\n * Cartesian Chart properties\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartProps {\n  /**\n   * Below height used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  height?: number;\n\n  /**\n   * Below width used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  width?: number;\n\n  /**\n   * this prop takes its parent as a HTML element to define the width and height of the chart\n   */\n  parentRef?: HTMLElement | null;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  /**\n   * Margins for the chart\n   * @default `{ top: 20, bottom: 35, left: 40, right: 20 }`\n   * To avoid edge cuttings to the chart, we recommend you use default values or greater then default values\n   */\n  margins?: Margins;\n\n  /** decides wether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Do not show tooltips in chart\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * this prop takes values that you want the chart to render on x-axis\n   * This is a optional parameter if not specified D3 will decide which values appear on the x-axis for you\n   * Please look at https://github.com/d3/d3-scale for more information on how D3 decides what data to appear on the axis of chart\n   */\n  tickValues?: number[] | Date[] | string[] | undefined;\n\n  /**\n   * the format for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d'\n   * Please look at https://github.com/d3/d3-time-format for all the formats supported for date axis\n   * Only applicable for date axis. For y-axis format use yAxisTickFormat prop.\n   */\n  tickFormat?: string;\n\n  /**\n   * Width of line stroke\n   */\n  strokeWidth?: number;\n\n  /**\n   * x Axis labels tick padding. This defines the gap between tick labels and tick lines.\n   * @default 10\n   */\n  xAxisTickPadding?: number;\n\n  /**\n   * the format in for the data on y-axis. For data object this can be specified to your requirement.\n   *  Eg: d3.format(\".0%\")(0.123),d3.format(\"+20\")(42);\n   * Please look at https://github.com/d3/d3-format for all the formats supported\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yAxisTickFormat?: any;\n\n  /**\n   * Secondary y-scale options\n   * By default this is not defined, meaning there will be no secondary y-scale.\n   */\n  secondaryYScaleOptions?: {\n    /** Minimum value (0 by default) */\n    yMinValue?: number;\n    /** Maximum value (100 by default) */\n    yMaxValue?: number;\n  };\n\n  /**\n   * minimum  data value point in y-axis\n   */\n  yMinValue?: number;\n\n  /**\n   * maximum data value point in y-axis\n   */\n  yMaxValue?: number;\n\n  /**\n   * minimum data value point in x-axis (for numeric x-axis)\n   */\n  xMinValue?: number;\n\n  /**\n   * maximum data value point in x-axis (for numeric x-axis)\n   */\n  xMaxValue?: number;\n\n  /**\n   * Number of ticks on the y-axis.\n   * Tick count should be factor of difference between (yMinValue, yMaxValue)?\n   * @default 4\n   */\n  yAxisTickCount?: number;\n\n  /**\n   * defines the number of ticks on the x-axis. Tries to match the nearest interval satisfying the count.\n   * Does not work for string axis.\n   * @default 6\n   */\n  xAxisTickCount?: number;\n\n  /**\n   * define the size of the tick lines on the x-axis\n   * @default 10\n   */\n  xAxistickSize?: number;\n\n  /**\n   * Text annotations rendered on top of the chart area\n   */\n  annotations?: ChartAnnotation[];\n\n  /**\n   * defines the space between the tick line and the data label\n   * @default 10\n   */\n  tickPadding?: number;\n\n  /**\n   * Url that the data-viz needs to redirect to upon clicking on it\n   */\n  href?: string;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  legendsOverflowText?: any;\n\n  /**\n   * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n   */\n  enabledLegendsWrapLines?: boolean;\n\n  /*\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<LegendsProps>;\n\n  /**\n   *@default false\n   *Used for to elipse x axis labes and show tooltip on x axis labels\n   */\n  showXAxisLablesTooltip?: boolean;\n\n  /**\n   * @default 4\n   * Used for X axis labels\n   * While Giving showXAxisLablesTooltip prop, need to define after how many chars, we need to truncate the word.\n   */\n  noOfCharsToTruncate?: number;\n\n  /**\n   * @default false\n   * Used to wrap x axis labels values (whole value)\n   */\n  wrapXAxisLables?: boolean;\n\n  /**\n   * @default false\n   * Used to rotate x axis labels by 45 degrees\n   */\n  rotateXAxisLables?: boolean;\n\n  /**\n   * The prop used to define the date time localization options\n   */\n  dateLocalizeOptions?: Intl.DateTimeFormatOptions;\n\n  /**\n   * The prop used to define a custom locale for the date time format.\n   */\n  timeFormatLocale?: TimeLocaleDefinition;\n\n  /**\n   * The prop used to define a custom datetime formatter for date axis.\n   */\n  customDateTimeFormatter?: (dateTime: Date) => string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: CartesianChartStyles;\n\n  /**\n   * Callout customization props\n   */\n  calloutProps?: Partial<ChartPopoverProps>;\n\n  /**\n   * props for the svg; use this to include aria-* or other attributes on the tag\n   */\n  svgProps?: React.SVGProps<SVGSVGElement>;\n\n  /**\n   * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows\n   * @deprecated Use `reflowProps` instead.\n   */\n  enableReflow?: boolean;\n\n  /**\n   * Props related to reflow behavior of the chart\n   */\n  reflowProps?: {\n    /**\n     * Determines the reflow behavior of the chart.\n     * When set to `'min-width'`, the chart will not shrink below a certain width and will enable scrolling if it overflows.\n     * @default 'none'\n     */\n    mode: 'none' | 'min-width';\n  };\n\n  /**\n   * Prop to set the x axis title\n   * @default undefined\n   * Minimum bottom margin required for x axis title is 55px\n   */\n\n  xAxisTitle?: string;\n\n  /**\n   * Prop to set the y axis title\n   * @default undefined\n   * Minimum left margin required for y axis title is 60px and for RTL is 40px\n   * Minimum right margin required for y axis title is 40px and for RTL is 60px\n   */\n  yAxisTitle?: string;\n\n  /**\n   * Prop to set the secondary y axis title\n   * @default undefined\n   * If RTL is enabled, minimum left and right margins required for secondary y axis title is 60px\n   */\n  secondaryYAxistitle?: string;\n\n  /**\n   * Whether to use UTC time for axis scale, ticks, and the time display in callouts.\n   * When set to `true`, time is displayed equally, regardless of the user's timezone settings.\n   * @default true\n   */\n  useUTC?: string | boolean;\n\n  /**\n   * @default false\n   * The prop used to decide rounded ticks on y axis\n   */\n  roundedTicks?: boolean;\n\n  /**\n   * Determines whether overlapping x-axis tick labels should be hidden.\n   * @default true\n   */\n  hideTickOverlap?: boolean;\n\n  /**\n   * Define a custom callout props override\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  calloutPropsPerDataPoint?: (dataPointCalloutProps: any) => ChartPopoverProps;\n\n  /**\n   * Optional callback to access the Chart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.Ref<Chart>;\n\n  /**\n   * Prop to set the x axis annotation. Used to display additional information on the x-axis.\n   * This is shown on the top of the chart.\n   * @default undefined\n   */\n  xAxisAnnotation?: string;\n\n  /**\n   * Prop to set the y axis annotation. Used to display additional information on the y-axis.\n   * This is shown on the right side of the chart. Not shown if secondary y-axis is enabled.\n   * @default undefined\n   */\n  yAxisAnnotation?: string;\n\n  /**\n   * Specifies the ordering logic for categories (or string tick labels) on the x-axis.\n   * @default 'default'\n   */\n  xAxisCategoryOrder?: AxisCategoryOrder;\n\n  /**\n   * Specifies the ordering logic for categories (or string tick labels) on the y-axis.\n   * @default 'default'\n   */\n  yAxisCategoryOrder?: AxisCategoryOrder;\n\n  /**\n   * Defines the scale type for the x-axis.\n   * @default 'default'\n   */\n  xScaleType?: AxisScaleType;\n\n  /**\n   * Defines the scale type for the primary y-axis.\n   * @default 'default'\n   */\n  yScaleType?: AxisScaleType;\n\n  /**\n   * Defines the scale type for the secondary y-axis.\n   * @default 'default'\n   */\n  secondaryYScaleType?: AxisScaleType;\n\n  /**\n   * Explicit set of tick values for the y-axis.\n   * If provided, these values override automatic tick generation.\n   */\n  yAxisTickValues?: number[] | Date[] | string[];\n\n  /**\n   * Configuration for the x-axis.\n   * Use this to control `tickStep`, `tick0`, etc.\n   */\n  xAxis?: AxisProps;\n\n  /**\n   * Configuration for the y-axis.\n   * Use this to control `tickStep`, `tick0`, etc.\n   */\n  yAxis?: AxisProps;\n\n  /**\n   *@default false\n   *Used for showing complete y axis lables   */\n  showYAxisLables?: boolean;\n\n  /**\n   *@default false\n   *Used for to elipse y axis labes and show tooltip on x axis labels\n   */\n  showYAxisLablesTooltip?: boolean;\n}\n\nexport interface YValueHover {\n  legend?: string;\n  y?: number | string;\n  color?: string;\n  data?: string | number;\n  shouldDrawBorderBottom?: boolean;\n  yAxisCalloutData?: string | { [id: string]: number };\n  index?: number;\n  callOutAccessibilityData?: AccessibilityProps;\n}\n\nexport interface ChildProps {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  xScale?: any;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScalePrimary?: any;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScaleSecondary?: any;\n  containerHeight?: number;\n  containerWidth?: number;\n  optimizeLargeData?: boolean;\n}\n\n// Only used for Cartesian chart base\nexport interface ModifiedCartesianChartProps extends CartesianChartProps {\n  /**\n   * Define the chart title\n   */\n  chartTitle?: string;\n\n  /**\n   * Only used for Area chart\n   * Value used to draw y axis of that chart.\n   */\n  maxOfYVal?: number;\n\n  /**\n   * Data of the chart\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  points: any;\n\n  /**\n   * Define type of the chart\n   */\n  chartType: ChartTypes;\n\n  /** X axis type */\n  xAxisType: XAxisTypes;\n\n  /** Y axis type */\n  yAxisType?: YAxisType;\n\n  /**\n   * Legends of the chart.\n   */\n  legendBars: JSXElement | null;\n\n  /**\n   * Callout props\n   */\n  calloutProps?: ChartPopoverProps;\n\n  /**\n   * Callback method used for to get margins to the chart.\n   */\n  getmargins?: (margins: Margins) => void;\n\n  /**\n   * This is a call back method to the chart from cartesian chart.\n   * params are xScale, yScale, containerHeight, containerWidth. These values were used to draw the graph.\n   * It also contians an optional param xAxisElement - defines as x axis scale element.\n   * This param used to enable feature word wrap of Xaxis.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  getGraphData?: any;\n\n  /**\n   * Used for bar chart graphs.\n   * To define width of the bar\n   */\n  barwidth?: number;\n\n  /**\n   * Used for tick styles of the x axis of the chart\n   * Tick params are applicable for date axis only.\n   */\n  tickParams?: {\n    tickValues?: number[] | Date[] | string[];\n    tickFormat?: string;\n  };\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  xAxisPadding?: number;\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  yAxisPadding?: number;\n\n  /**\n   * Children elements specific to derived chart types.\n   */\n  children(props: ChildProps): React.ReactNode;\n\n  /**\n   * To enable callout for individual bar or complete stack. Using for only Vertical stacked bar chart.\n   * @default false\n   * @type \\{boolean \\}\n   */\n  isCalloutForStack?: boolean;\n\n  /** dataset values to find out domain of the String axis\n   * Present using for only vertical stacked bar chart and grouped vertical bar chart\n   */\n  datasetForXAxisDomain?: string[];\n\n  /** Own callout design */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  customizedCallout?: any;\n\n  /**\n   * if the data points for the y-axis is of type string, then we need to give this\n   * prop to construct the y-axis\n   */\n  stringDatasetForYAxisDomain?: string[];\n\n  /**\n   * The prop used to define the culture to localize the numbers and date\n   */\n  culture?: string;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  getAxisData?: any;\n\n  /**\n   * Callback method used when mouse leaves the chart boundary.\n   */\n  onChartMouseLeave?: () => void;\n\n  /** Callback method to get extra margins for domain */\n  getDomainMargins?: (containerWidth: number) => Margins;\n\n  /** Callback method to get extra margins for Y-axis domain */\n  getYDomainMargins?: (containerHeight: number) => Margins;\n\n  /** Padding between each bar/line-point */\n  xAxisInnerPadding?: number;\n\n  /** Padding before first bar/line-point and after last bar/line-point */\n  xAxisOuterPadding?: number;\n\n  /**\n   *@default false\n   *Used for to elipse y axis labes and show tooltip on x axis labels\n   */\n  showYAxisLablesTooltip?: boolean;\n\n  /**\n   *@default false\n   *Used for showing complete y axis lables   */\n  showYAxisLables?: boolean;\n\n  /**\n   * @default false\n   * Used to control the first render cycle Performance optimization code.\n   */\n  enableFirstRenderOptimization?: boolean;\n\n  /**\n   * Get the min and max values of the y-axis\n   */\n  getMinMaxOfYAxis: (\n    points:\n      | LineChartPoints[]\n      | HorizontalBarChartWithAxisDataPoint[]\n      | VerticalBarChartDataPoint[]\n      | DataPoint[]\n      | ScatterChartPoints[]\n      | GanttChartDataPoint[],\n    yAxisType: YAxisType | undefined,\n    useSecondaryYScale?: boolean,\n  ) => { startValue: number; endValue: number };\n\n  /**\n   * Create the y-axis\n   */\n  createYAxis: (\n    yAxisParams: IYAxisParams,\n    isRtl: boolean,\n    axisData: IAxisData,\n    isIntegralDataset: boolean,\n    chartType: ChartTypes,\n    useSecondaryYScale?: boolean,\n    roundedTicks?: boolean,\n    scaleType?: AxisScaleType,\n    _useRtl?: boolean,\n  ) => ScaleLinear<number, number, never>;\n\n  /**\n   * Get the domain and range values\n   */\n  getDomainNRangeValues: (\n    points:\n      | LineChartPoints[]\n      | VerticalBarChartDataPoint[]\n      | VerticalStackedBarDataPoint[]\n      | HorizontalBarChartWithAxisDataPoint[]\n      | GroupedVerticalBarChartData[]\n      | HeatMapChartDataPoint[]\n      | GanttChartDataPoint[],\n    margins: Margins,\n    width: number,\n    chartType: ChartTypes,\n    isRTL: boolean,\n    xAxisType: XAxisTypes,\n    barWidth: number,\n    tickValues: Date[] | number[] | string[] | undefined,\n  ) => IDomainNRange;\n\n  /**\n   * Create the string y-axis\n   */\n  createStringYAxis: (\n    yAxisParams: IYAxisParams,\n    dataPoints: string[],\n    isRtl: boolean,\n    axisData: IAxisData,\n    barWidth: number | undefined,\n    chartType?: ChartTypes,\n  ) => ScaleBand<string>;\n\n  /**\n   * Controls whether the numeric x-axis domain should be extended to start and end at nice rounded values.\n   * @default true\n   */\n  showRoundOffXTickValues?: boolean;\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/CommonComponents/CartesianChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { LegendsProps } from '../Legends/index';\nimport type { TitleStyles } from '../../utilities/Common.styles';\nimport {\n  AccessibilityProps,\n  Chart,\n  Margins,\n  DataPoint,\n  ChartAnnotation,\n  HorizontalBarChartWithAxisDataPoint,\n  GroupedVerticalBarChartData,\n  HeatMapChartDataPoint,\n  LineChartPoints,\n  VerticalBarChartDataPoint,\n  VerticalStackedBarDataPoint,\n  ScatterChartPoints,\n  GanttChartDataPoint,\n  AxisCategoryOrder,\n  AxisProps,\n  AxisScaleType,\n} from '../../types/index';\nimport { TimeLocaleDefinition } from 'd3-time-format';\nimport { ChartPopoverProps } from './ChartPopover.types';\nimport { ChartTypes, IAxisData, IDomainNRange, IYAxisParams, XAxisTypes, YAxisType } from '../../utilities/utilities';\nimport { ScaleBand, ScaleLinear } from 'd3-scale';\n/**\n * Cartesian Chart style properties\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartStyleProps {\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of the chart.\n   */\n  height?: number;\n\n  /**\n   * Color of the chart.\n   */\n  color?: string;\n\n  /**\n   * Link to redirect if click action for graph\n   */\n  href?: string;\n\n  /**\n   * prop to check if the chart is selected or hovered upon to determine opacity\n   */\n  shouldHighlight?: boolean;\n\n  /**\n   * prop to check if the Page is in Rtl\n   */\n  useRtl?: boolean;\n\n  /**\n   * color of the line\n   */\n  lineColor?: string;\n\n  /**\n   * boolean flag which determines if shape is drawn in callout\n   */\n  toDrawShape?: boolean;\n\n  /**\n   * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows\n   * @deprecated Use `reflowProps` instead.\n   */\n  enableReflow?: boolean;\n}\n\n/**\n * Cartesian Chart styles\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: string;\n\n  /**\n   * Style for the element containing the x-axis.\n   */\n  xAxis?: string;\n\n  /**\n   * Style for the element containing the y-axis.\n   */\n  yAxis?: string;\n\n  /**\n   * Style for legend container\n   */\n  legendContainer?: string;\n\n  /**\n   * line hover box css\n   */\n  hover?: string;\n\n  /**\n   * styles for description message\n   */\n  descriptionMessage?: string;\n\n  /**\n   * styles for tooltip\n   */\n  tooltip?: string;\n\n  /**\n   * styles for axis title\n   */\n  axisTitle?: string;\n\n  /**\n   * styles for axis annotation\n   */\n  axisAnnotation?: string;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle?: string;\n\n  /**\n   * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n   */\n  opacityChangeOnHover?: string;\n\n  /**\n   * styles for the shape object in the callout\n   */\n  shapeStyles?: string;\n\n  /**\n   * Styles for the chart wrapper div\n   */\n  chartWrapper?: string;\n\n  /**\n   * Styles for the element wrapping the svg and overlays for annotation\n   */\n  plotContainer?: string;\n\n  /**\n   * Styles for the svg tooltip\n   */\n  svgTooltip?: string;\n\n  /**\n   * Styles applied to the annotation layer root element\n   */\n  annotationLayer?: string;\n\n  /**\n   * Styles for the chart svg element\n   */\n  chart?: string;\n}\n\n/**\n * Cartesian Chart properties\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartProps {\n  /**\n   * Title styles configuration for the chart title\n   */\n  titleStyles?: TitleStyles;\n\n  /**\n   * Below height used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  height?: number;\n\n  /**\n   * Below width used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  width?: number;\n\n  /**\n   * this prop takes its parent as a HTML element to define the width and height of the chart\n   */\n  parentRef?: HTMLElement | null;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  /**\n   * Margins for the chart\n   * @default `{ top: 20, bottom: 35, left: 40, right: 20 }`\n   * To avoid edge cuttings to the chart, we recommend you use default values or greater then default values\n   */\n  margins?: Margins;\n\n  /** decides wether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Do not show tooltips in chart\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * this prop takes values that you want the chart to render on x-axis\n   * This is a optional parameter if not specified D3 will decide which values appear on the x-axis for you\n   * Please look at https://github.com/d3/d3-scale for more information on how D3 decides what data to appear on the axis of chart\n   */\n  tickValues?: number[] | Date[] | string[] | undefined;\n\n  /**\n   * the format for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d'\n   * Please look at https://github.com/d3/d3-time-format for all the formats supported for date axis\n   * Only applicable for date axis. For y-axis format use yAxisTickFormat prop.\n   */\n  tickFormat?: string;\n\n  /**\n   * Width of line stroke\n   */\n  strokeWidth?: number;\n\n  /**\n   * x Axis labels tick padding. This defines the gap between tick labels and tick lines.\n   * @default 10\n   */\n  xAxisTickPadding?: number;\n\n  /**\n   * the format in for the data on y-axis. For data object this can be specified to your requirement.\n   *  Eg: d3.format(\".0%\")(0.123),d3.format(\"+20\")(42);\n   * Please look at https://github.com/d3/d3-format for all the formats supported\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yAxisTickFormat?: any;\n\n  /**\n   * Secondary y-scale options\n   * By default this is not defined, meaning there will be no secondary y-scale.\n   */\n  secondaryYScaleOptions?: {\n    /** Minimum value (0 by default) */\n    yMinValue?: number;\n    /** Maximum value (100 by default) */\n    yMaxValue?: number;\n  };\n\n  /**\n   * minimum  data value point in y-axis\n   */\n  yMinValue?: number;\n\n  /**\n   * maximum data value point in y-axis\n   */\n  yMaxValue?: number;\n\n  /**\n   * minimum data value point in x-axis (for numeric x-axis)\n   */\n  xMinValue?: number;\n\n  /**\n   * maximum data value point in x-axis\n   */\n  xMaxValue?: number;\n\n  /**\n   * Number of ticks on the y-axis.\n   * Tick count should be factor of difference between (yMinValue, yMaxValue)?\n   * @default 4\n   */\n  yAxisTickCount?: number;\n\n  /**\n   * defines the number of ticks on the x-axis. Tries to match the nearest interval satisfying the count.\n   * Does not work for string axis.\n   * @default 6\n   */\n  xAxisTickCount?: number;\n\n  /**\n   * define the size of the tick lines on the x-axis\n   * @default 10\n   */\n  xAxistickSize?: number;\n\n  /**\n   * Text annotations rendered on top of the chart area\n   */\n  annotations?: ChartAnnotation[];\n\n  /**\n   * defines the space between the tick line and the data label\n   * @default 10\n   */\n  tickPadding?: number;\n\n  /**\n   * Url that the data-viz needs to redirect to upon clicking on it\n   */\n  href?: string;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  legendsOverflowText?: any;\n\n  /**\n   * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n   */\n  enabledLegendsWrapLines?: boolean;\n\n  /*\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<LegendsProps>;\n\n  /**\n   *@default false\n   *Used for to elipse x axis labes and show tooltip on x axis labels\n   */\n  showXAxisLablesTooltip?: boolean;\n\n  /**\n   * @default 4\n   * Used for X axis labels\n   * While Giving showXAxisLablesTooltip prop, need to define after how many chars, we need to truncate the word.\n   */\n  noOfCharsToTruncate?: number;\n\n  /**\n   * @default false\n   * Used to wrap x axis labels values (whole value)\n   */\n  wrapXAxisLables?: boolean;\n\n  /**\n   * @default false\n   * Used to rotate x axis labels by 45 degrees\n   */\n  rotateXAxisLables?: boolean;\n\n  /**\n   * The prop used to define the date time localization options\n   */\n  dateLocalizeOptions?: Intl.DateTimeFormatOptions;\n\n  /**\n   * The prop used to define a custom locale for the date time format.\n   */\n  timeFormatLocale?: TimeLocaleDefinition;\n\n  /**\n   * The prop used to define a custom datetime formatter for date axis.\n   */\n  customDateTimeFormatter?: (dateTime: Date) => string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: CartesianChartStyles;\n\n  /**\n   * Callout customization props\n   */\n  calloutProps?: Partial<ChartPopoverProps>;\n\n  /**\n   * props for the svg; use this to include aria-* or other attributes on the tag\n   */\n  svgProps?: React.SVGProps<SVGSVGElement>;\n\n  /**\n   * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows\n   * @deprecated Use `reflowProps` instead.\n   */\n  enableReflow?: boolean;\n\n  /**\n   * Props related to reflow behavior of the chart\n   */\n  reflowProps?: {\n    /**\n     * Determines the reflow behavior of the chart.\n     * When set to `'min-width'`, the chart will not shrink below a certain width and will enable scrolling if it overflows.\n     * @default 'none'\n     */\n    mode: 'none' | 'min-width';\n  };\n\n  /**\n   * Prop to set the x axis title\n   * @default undefined\n   * Minimum bottom margin required for x axis title is 55px\n   */\n\n  xAxisTitle?: string;\n\n  /**\n   * Prop to set the y axis title\n   * @default undefined\n   * Minimum left margin required for y axis title is 60px and for RTL is 40px\n   * Minimum right margin required for y axis title is 40px and for RTL is 60px\n   */\n  yAxisTitle?: string;\n\n  /**\n   * Prop to set the secondary y axis title\n   * @default undefined\n   * If RTL is enabled, minimum left and right margins required for secondary y axis title is 60px\n   */\n  secondaryYAxistitle?: string;\n\n  /**\n   * Whether to use UTC time for axis scale, ticks, and the time display in callouts.\n   * When set to `true`, time is displayed equally, regardless of the user's timezone settings.\n   * @default true\n   */\n  useUTC?: string | boolean;\n\n  /**\n   * @default false\n   * The prop used to decide rounded ticks on y axis\n   */\n  roundedTicks?: boolean;\n\n  /**\n   * Determines whether overlapping x-axis tick labels should be hidden.\n   * @default true\n   */\n  hideTickOverlap?: boolean;\n\n  /**\n   * Define a custom callout props override\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  calloutPropsPerDataPoint?: (dataPointCalloutProps: any) => ChartPopoverProps;\n\n  /**\n   * Optional callback to access the Chart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.Ref<Chart>;\n\n  /**\n   * Prop to set the x axis annotation. Used to display additional information on the x-axis.\n   * This is shown on the top of the chart.\n   * @default undefined\n   */\n  xAxisAnnotation?: string;\n\n  /**\n   * Prop to set the y axis annotation. Used to display additional information on the y-axis.\n   * This is shown on the right side of the chart. Not shown if secondary y-axis is enabled.\n   * @default undefined\n   */\n  yAxisAnnotation?: string;\n\n  /**\n   * Specifies the ordering logic for categories (or string tick labels) on the x-axis.\n   * @default 'default'\n   */\n  xAxisCategoryOrder?: AxisCategoryOrder;\n\n  /**\n   * Specifies the ordering logic for categories (or string tick labels) on the y-axis.\n   * @default 'default'\n   */\n  yAxisCategoryOrder?: AxisCategoryOrder;\n\n  /**\n   * Defines the scale type for the x-axis.\n   * @default 'default'\n   */\n  xScaleType?: AxisScaleType;\n\n  /**\n   * Defines the scale type for the primary y-axis.\n   * @default 'default'\n   */\n  yScaleType?: AxisScaleType;\n\n  /**\n   * Defines the scale type for the secondary y-axis.\n   * @default 'default'\n   */\n  secondaryYScaleType?: AxisScaleType;\n\n  /**\n   * Explicit set of tick values for the y-axis.\n   * If provided, these values override automatic tick generation.\n   */\n  yAxisTickValues?: number[] | Date[] | string[];\n\n  /**\n   * Configuration for the x-axis.\n   * Use this to control `tickStep`, `tick0`, etc.\n   */\n  xAxis?: AxisProps & {\n    /**\n     * Controls how x-axis tick labels are laid out.\n     *\n     * - `'auto'`: Tick labels are automatically wrapped, truncated, and staggered\n     *   across alternating levels based on the available space to prevent overlap.\n     *\n     * @default 'default'\n     */\n    tickLayout?: 'default' | 'auto';\n  };\n\n  /**\n   * Configuration for the y-axis.\n   * Use this to control `tickStep`, `tick0`, etc.\n   */\n  yAxis?: AxisProps;\n\n  /**\n   *@default false\n   *Used for showing complete y axis lables   */\n  showYAxisLables?: boolean;\n\n  /**\n   *@default false\n   *Used for to elipse y axis labes and show tooltip on x axis labels\n   */\n  showYAxisLablesTooltip?: boolean;\n}\n\nexport interface YValueHover {\n  legend?: string;\n  y?: number | string;\n  color?: string;\n  data?: string | number;\n  shouldDrawBorderBottom?: boolean;\n  yAxisCalloutData?: string | { [id: string]: number };\n  index?: number;\n  callOutAccessibilityData?: AccessibilityProps;\n}\n\nexport interface ChildProps {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  xScale?: any;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScalePrimary?: any;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScaleSecondary?: any;\n  containerHeight?: number;\n  containerWidth?: number;\n  optimizeLargeData?: boolean;\n}\n\n// Only used for Cartesian chart base\nexport interface ModifiedCartesianChartProps extends CartesianChartProps {\n  /**\n   * Define the chart title\n   */\n  chartTitle?: string;\n\n  /**\n   * Only used for Area chart\n   * Value used to draw y axis of that chart.\n   */\n  maxOfYVal?: number;\n\n  /**\n   * Data of the chart\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  points: any;\n\n  /**\n   * Define type of the chart\n   */\n  chartType: ChartTypes;\n\n  /** X axis type */\n  xAxisType: XAxisTypes;\n\n  /** Y axis type */\n  yAxisType?: YAxisType;\n\n  /**\n   * Legends of the chart.\n   */\n  legendBars: JSXElement | null;\n\n  /**\n   * Callout props\n   */\n  calloutProps?: ChartPopoverProps;\n\n  /**\n   * Callback method used for to get margins to the chart.\n   */\n  getmargins?: (margins: Margins) => void;\n\n  /**\n   * This is a call back method to the chart from cartesian chart.\n   * params are xScale, yScale, containerHeight, containerWidth. These values were used to draw the graph.\n   * It also contians an optional param xAxisElement - defines as x axis scale element.\n   * This param used to enable feature word wrap of Xaxis.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  getGraphData?: any;\n\n  /**\n   * Used for bar chart graphs.\n   * To define width of the bar\n   */\n  barwidth?: number;\n\n  /**\n   * Used for tick styles of the x axis of the chart\n   * Tick params are applicable for date axis only.\n   */\n  tickParams?: {\n    tickValues?: number[] | Date[] | string[];\n    tickFormat?: string;\n  };\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  xAxisPadding?: number;\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  yAxisPadding?: number;\n\n  /**\n   * Children elements specific to derived chart types.\n   */\n  children(props: ChildProps): React.ReactNode;\n\n  /**\n   * To enable callout for individual bar or complete stack. Using for only Vertical stacked bar chart.\n   * @default false\n   * @type \\{boolean \\}\n   */\n  isCalloutForStack?: boolean;\n\n  /** dataset values to find out domain of the String axis\n   * Present using for only vertical stacked bar chart and grouped vertical bar chart\n   */\n  datasetForXAxisDomain?: string[];\n\n  /** Own callout design */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  customizedCallout?: any;\n\n  /**\n   * if the data points for the y-axis is of type string, then we need to give this\n   * prop to construct the y-axis\n   */\n  stringDatasetForYAxisDomain?: string[];\n\n  /**\n   * The prop used to define the culture to localize the numbers and date\n   */\n  culture?: string;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  getAxisData?: any;\n\n  /**\n   * Callback method used when mouse leaves the chart boundary.\n   */\n  onChartMouseLeave?: () => void;\n\n  /** Callback method to get extra margins for domain */\n  getDomainMargins?: (containerWidth: number) => Margins;\n\n  /** Callback method to get extra margins for Y-axis domain */\n  getYDomainMargins?: (containerHeight: number) => Margins;\n\n  /** Padding between each bar/line-point */\n  xAxisInnerPadding?: number;\n\n  /** Padding before first bar/line-point and after last bar/line-point */\n  xAxisOuterPadding?: number;\n\n  /**\n   *@default false\n   *Used for to elipse y axis labes and show tooltip on x axis labels\n   */\n  showYAxisLablesTooltip?: boolean;\n\n  /**\n   *@default false\n   *Used for showing complete y axis lables   */\n  showYAxisLables?: boolean;\n\n  /**\n   * @default false\n   * Used to control the first render cycle Performance optimization code.\n   */\n  enableFirstRenderOptimization?: boolean;\n\n  /**\n   * Get the min and max values of the y-axis\n   */\n  getMinMaxOfYAxis: (\n    points:\n      | LineChartPoints[]\n      | HorizontalBarChartWithAxisDataPoint[]\n      | VerticalBarChartDataPoint[]\n      | DataPoint[]\n      | ScatterChartPoints[]\n      | GanttChartDataPoint[],\n    yAxisType: YAxisType | undefined,\n    useSecondaryYScale?: boolean,\n  ) => { startValue: number; endValue: number };\n\n  /**\n   * Create the y-axis\n   */\n  createYAxis: (\n    yAxisParams: IYAxisParams,\n    isRtl: boolean,\n    axisData: IAxisData,\n    isIntegralDataset: boolean,\n    chartType: ChartTypes,\n    useSecondaryYScale?: boolean,\n    roundedTicks?: boolean,\n    scaleType?: AxisScaleType,\n    _useRtl?: boolean,\n  ) => ScaleLinear<number, number, never>;\n\n  /**\n   * Get the domain and range values\n   */\n  getDomainNRangeValues: (\n    points:\n      | LineChartPoints[]\n      | VerticalBarChartDataPoint[]\n      | VerticalStackedBarDataPoint[]\n      | HorizontalBarChartWithAxisDataPoint[]\n      | GroupedVerticalBarChartData[]\n      | HeatMapChartDataPoint[]\n      | GanttChartDataPoint[],\n    margins: Margins,\n    width: number,\n    chartType: ChartTypes,\n    isRTL: boolean,\n    xAxisType: XAxisTypes,\n    barWidth: number,\n    tickValues: Date[] | number[] | string[] | undefined,\n  ) => IDomainNRange;\n\n  /**\n   * Create the string y-axis\n   */\n  createStringYAxis: (\n    yAxisParams: IYAxisParams,\n    dataPoints: string[],\n    isRtl: boolean,\n    axisData: IAxisData,\n    barWidth: number | undefined,\n    chartType?: ChartTypes,\n  ) => ScaleBand<string>;\n\n  /**\n   * Controls whether the numeric x-axis domain should be extended to start and end at nice rounded values.\n   * @default true\n   */\n  showRoundOffXTickValues?: boolean;\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js

@@ -24,7 +24,7 @@ const cartesianchartClassNames = {
     chartWrapper: 'fui-cart__chartWrapper',
     plotContainer: 'fui-cart__plotContainer',
     axisTitle: 'fui-cart__axisTitle',
-    xAxis: 'fui-cart__xAxis',
+    xAxis: _utilities.CARTESIAN_XAXIS_CLASSNAME,
     yAxis: 'fui-cart__yAxis',
     opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',
     legendContainer: 'fui-cart__legendContainer',
@@ -56,7 +56,8 @@ const cartesianchartClassNames = {
         fsow6f: [
             "f1o700av",
             "fes3tcz"
-        ]
+        ],
+        qhf8xq: "f10pi13n"
     },
     chartWrapper: {
         qhf8xq: "f10pi13n"
@@ -154,7 +155,6 @@ const cartesianchartClassNames = {
         B0ocmuz: "f1bnz8pu",
         qhf8xq: "f1euv43f",
         fsow6f: "f17mccla",
-        Bhzewxz: "fr6rvge",
         De3pzq: "fxugw4r",
         Beyfa6y: 0,
         Bbmb7ep: 0,
@@ -222,7 +222,6 @@ const cartesianchartClassNames = {
             }
         ],
         ".f1euv43f{position:absolute;}",
-        ".fr6rvge{top:var(--spacingVerticalNone);}",
         ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
         [
             ".fq9zq91{border-radius:var(--borderRadiusSmall);}",

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n/**\n * @internal\n */ export const cartesianchartClassNames = {\n    root: 'fui-cart__root',\n    chartWrapper: 'fui-cart__chartWrapper',\n    plotContainer: 'fui-cart__plotContainer',\n    axisTitle: 'fui-cart__axisTitle',\n    xAxis: 'fui-cart__xAxis',\n    yAxis: 'fui-cart__yAxis',\n    opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n    legendContainer: 'fui-cart__legendContainer',\n    svgTooltip: 'fui-cart_svgTooltip',\n    shapeStyles: 'fui-cart__shapeStyles',\n    descriptionMessage: 'fui-cart__descriptionMessage',\n    hover: 'fui-cart__hover',\n    tooltip: 'fui-cart__tooltip',\n    axisAnnotation: 'fui-cart__axisAnnotation',\n    chartTitle: 'fui-cart__chartTitle',\n    chart: 'fui-cart__chart',\n    annotationLayer: 'fui-cart__annotationLayer'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n        flexDirection: 'column',\n        overflow: 'hidden',\n        textAlign: 'left'\n    },\n    chartWrapper: {\n        position: 'relative'\n    },\n    chartWrapperMinWidth: {\n        overflow: 'auto'\n    },\n    plotContainer: {\n        position: 'relative',\n        width: '100%',\n        height: '100%'\n    },\n    axisTitle: getAxisTitleStyle(),\n    axisAnnotation: getAxisTitleStyle(),\n    xAxis: {\n        '& text': {\n            fill: tokens.colorNeutralForeground1,\n            ...typographyStyles.caption2Strong,\n            forcedColorAdjust: 'auto'\n        },\n        '& line': {\n            opacity: 0.2,\n            stroke: tokens.colorNeutralForeground1,\n            width: '1px',\n            forcedColorAdjust: 'auto'\n        },\n        '& path': {\n            display: 'none'\n        }\n    },\n    yAxis: {\n        '& text': {\n            ...typographyStyles.caption2Strong,\n            fill: tokens.colorNeutralForeground1,\n            forcedColorAdjust: 'auto'\n        },\n        '& line': {\n            opacity: 0.2,\n            stroke: tokens.colorNeutralForeground1,\n            forcedColorAdjust: 'auto'\n        },\n        '& path': {\n            display: 'none'\n        }\n    },\n    rtl: {\n        '& g': {\n            textAnchor: 'end'\n        }\n    },\n    ltr: {},\n    opacityChangeOnHover: {\n        opacity: '0.1',\n        cursor: 'default'\n    },\n    legendContainer: {\n        marginTop: tokens.spacingVerticalS,\n        marginLeft: tokens.spacingHorizontalXL\n    },\n    svgTooltip: {\n        fill: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\n    },\n    annotationLayer: {\n        pointerEvents: 'none'\n    },\n    tooltip: getTooltipStyle()\n});\n/**\n *\n * Apply styling to the Carousel slots based on the state\n */ export const useCartesianChartStyles = (props)=>{\n    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;\n    const _useRtl = useRtl();\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, baseStyles.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapperMinWidth : undefined, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n        plotContainer: mergeClasses(cartesianchartClassNames.plotContainer, baseStyles.plotContainer /*props.styles?.plotContainer*/ ),\n        axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/ ),\n        xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),\n        yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/ ),\n        opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/ ),\n        svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),\n        annotationLayer: mergeClasses(cartesianchartClassNames.annotationLayer, baseStyles.annotationLayer /*props.styles?.annotationLayer*/ ),\n        tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        axisAnnotation: mergeClasses(cartesianchartClassNames.axisAnnotation, baseStyles.axisAnnotation),\n        chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chart)\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","plotContainer","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","annotationLayer","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","qhf8xq","chartWrapperMinWidth","B80ckks","sj55zd","Bkfmm31","Bxms50k","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","Bkecrkj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","m","useCartesianChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","_props_styles3","_useRtl","baseStyles","styles","reflowProps","mode","undefined"],"mappings":"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"}
+{"version":3,"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { CARTESIAN_XAXIS_CLASSNAME, HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n/**\n * @internal\n */ export const cartesianchartClassNames = {\n    root: 'fui-cart__root',\n    chartWrapper: 'fui-cart__chartWrapper',\n    plotContainer: 'fui-cart__plotContainer',\n    axisTitle: 'fui-cart__axisTitle',\n    xAxis: CARTESIAN_XAXIS_CLASSNAME,\n    yAxis: 'fui-cart__yAxis',\n    opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n    legendContainer: 'fui-cart__legendContainer',\n    svgTooltip: 'fui-cart_svgTooltip',\n    shapeStyles: 'fui-cart__shapeStyles',\n    descriptionMessage: 'fui-cart__descriptionMessage',\n    hover: 'fui-cart__hover',\n    tooltip: 'fui-cart__tooltip',\n    axisAnnotation: 'fui-cart__axisAnnotation',\n    chartTitle: 'fui-cart__chartTitle',\n    chart: 'fui-cart__chart',\n    annotationLayer: 'fui-cart__annotationLayer'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n        flexDirection: 'column',\n        overflow: 'hidden',\n        textAlign: 'left',\n        position: 'relative'\n    },\n    chartWrapper: {\n        position: 'relative'\n    },\n    chartWrapperMinWidth: {\n        overflow: 'auto'\n    },\n    plotContainer: {\n        position: 'relative',\n        width: '100%',\n        height: '100%'\n    },\n    axisTitle: getAxisTitleStyle(),\n    axisAnnotation: getAxisTitleStyle(),\n    xAxis: {\n        '& text': {\n            fill: tokens.colorNeutralForeground1,\n            ...typographyStyles.caption2Strong,\n            forcedColorAdjust: 'auto'\n        },\n        '& line': {\n            opacity: 0.2,\n            stroke: tokens.colorNeutralForeground1,\n            width: '1px',\n            forcedColorAdjust: 'auto'\n        },\n        '& path': {\n            display: 'none'\n        }\n    },\n    yAxis: {\n        '& text': {\n            ...typographyStyles.caption2Strong,\n            fill: tokens.colorNeutralForeground1,\n            forcedColorAdjust: 'auto'\n        },\n        '& line': {\n            opacity: 0.2,\n            stroke: tokens.colorNeutralForeground1,\n            forcedColorAdjust: 'auto'\n        },\n        '& path': {\n            display: 'none'\n        }\n    },\n    rtl: {\n        '& g': {\n            textAnchor: 'end'\n        }\n    },\n    ltr: {},\n    opacityChangeOnHover: {\n        opacity: '0.1',\n        cursor: 'default'\n    },\n    legendContainer: {\n        marginTop: tokens.spacingVerticalS,\n        marginLeft: tokens.spacingHorizontalXL\n    },\n    svgTooltip: {\n        fill: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\n    },\n    annotationLayer: {\n        pointerEvents: 'none'\n    },\n    tooltip: getTooltipStyle()\n});\n/**\n *\n * Apply styling to the Carousel slots based on the state\n */ export const useCartesianChartStyles = (props)=>{\n    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;\n    const _useRtl = useRtl();\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, baseStyles.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapperMinWidth : undefined, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n        plotContainer: mergeClasses(cartesianchartClassNames.plotContainer, baseStyles.plotContainer /*props.styles?.plotContainer*/ ),\n        axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/ ),\n        xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),\n        yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/ ),\n        opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/ ),\n        svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),\n        annotationLayer: mergeClasses(cartesianchartClassNames.annotationLayer, baseStyles.annotationLayer /*props.styles?.annotationLayer*/ ),\n        tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        axisAnnotation: mergeClasses(cartesianchartClassNames.axisAnnotation, baseStyles.axisAnnotation),\n        chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chart)\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","CARTESIAN_XAXIS_CLASSNAME","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","plotContainer","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","annotationLayer","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","qhf8xq","chartWrapperMinWidth","B80ckks","sj55zd","Bkfmm31","Bxms50k","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","Bkecrkj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","m","useCartesianChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","_props_styles3","_useRtl","baseStyles","styles","reflowProps","mode","undefined"],"mappings":"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"}

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js

@@ -26,7 +26,7 @@ const cartesianchartClassNames = {
     chartWrapper: 'fui-cart__chartWrapper',
     plotContainer: 'fui-cart__plotContainer',
     axisTitle: 'fui-cart__axisTitle',
-    xAxis: 'fui-cart__xAxis',
+    xAxis: _utilities.CARTESIAN_XAXIS_CLASSNAME,
     yAxis: 'fui-cart__yAxis',
     opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',
     legendContainer: 'fui-cart__legendContainer',
@@ -50,7 +50,8 @@ const cartesianchartClassNames = {
         height: '100%',
         flexDirection: 'column',
         overflow: 'hidden',
-        textAlign: 'left'
+        textAlign: 'left',
+        position: 'relative'
     },
     chartWrapper: {
         position: 'relative'

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { CartesianChartProps, CartesianChartStyles } from './CartesianChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const cartesianchartClassNames: SlotClassNames<CartesianChartStyles> = {\n  root: 'fui-cart__root',\n  chartWrapper: 'fui-cart__chartWrapper',\n  plotContainer: 'fui-cart__plotContainer',\n  axisTitle: 'fui-cart__axisTitle',\n  xAxis: 'fui-cart__xAxis',\n  yAxis: 'fui-cart__yAxis',\n  opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n  legendContainer: 'fui-cart__legendContainer',\n  svgTooltip: 'fui-cart_svgTooltip',\n  shapeStyles: 'fui-cart__shapeStyles',\n  descriptionMessage: 'fui-cart__descriptionMessage',\n  hover: 'fui-cart__hover',\n  tooltip: 'fui-cart__tooltip',\n  axisAnnotation: 'fui-cart__axisAnnotation',\n  chartTitle: 'fui-cart__chartTitle',\n  chart: 'fui-cart__chart',\n  annotationLayer: 'fui-cart__annotationLayer',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    textAlign: 'left',\n  },\n  chartWrapper: {\n    position: 'relative',\n  },\n  chartWrapperMinWidth: {\n    overflow: 'auto',\n  },\n  plotContainer: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\n  },\n  axisTitle: getAxisTitleStyle() as GriffelStyle,\n  axisAnnotation: getAxisTitleStyle() as GriffelStyle,\n  xAxis: {\n    '& text': {\n      fill: tokens.colorNeutralForeground1,\n      ...typographyStyles.caption2Strong,\n      forcedColorAdjust: 'auto',\n    },\n    '& line': {\n      opacity: 0.2,\n      stroke: tokens.colorNeutralForeground1,\n      width: '1px',\n      forcedColorAdjust: 'auto',\n    },\n    '& path': {\n      display: 'none',\n    },\n  },\n  yAxis: {\n    '& text': {\n      ...typographyStyles.caption2Strong,\n      fill: tokens.colorNeutralForeground1,\n      forcedColorAdjust: 'auto',\n    },\n    '& line': {\n      opacity: 0.2,\n      stroke: tokens.colorNeutralForeground1,\n      forcedColorAdjust: 'auto',\n    },\n    '& path': {\n      display: 'none',\n    },\n  },\n  rtl: {\n    '& g': {\n      textAnchor: 'end',\n    },\n  },\n  ltr: {},\n  opacityChangeOnHover: {\n    opacity: '0.1', //supports custom opacity ??\n    cursor: 'default', //supports custom cursor ??\n  },\n  legendContainer: {\n    marginTop: tokens.spacingVerticalS,\n    marginLeft: tokens.spacingHorizontalXL,\n  },\n  svgTooltip: {\n    fill: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  annotationLayer: {\n    pointerEvents: 'none',\n  },\n  tooltip: getTooltipStyle() as GriffelStyle,\n});\n/**\n *\n * Apply styling to the Carousel slots based on the state\n */\nexport const useCartesianChartStyles = (props: CartesianChartProps): CartesianChartStyles => {\n  const _useRtl = useRtl();\n  const baseStyles = useStyles();\n  return {\n    root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, props.styles?.root),\n    chartWrapper: mergeClasses(\n      cartesianchartClassNames.chartWrapper,\n      baseStyles.chartWrapper,\n      props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapperMinWidth : undefined,\n      props.styles?.chartWrapper,\n    ),\n    plotContainer: mergeClasses(\n      cartesianchartClassNames.plotContainer,\n      baseStyles.plotContainer /*props.styles?.plotContainer*/,\n    ),\n    axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/),\n    xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/),\n    yAxis: mergeClasses(\n      cartesianchartClassNames.yAxis,\n      baseStyles.yAxis,\n      _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/,\n    ),\n    opacityChangeOnHover: mergeClasses(\n      cartesianchartClassNames.opacityChangeOnHover,\n      baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/,\n    ),\n    legendContainer: mergeClasses(\n      cartesianchartClassNames.legendContainer,\n      baseStyles.legendContainer /*props.styles?.legendContainer*/,\n    ),\n    svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, props.styles?.svgTooltip),\n    annotationLayer: mergeClasses(\n      cartesianchartClassNames.annotationLayer,\n      baseStyles.annotationLayer /*props.styles?.annotationLayer*/,\n    ),\n    tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    axisAnnotation: mergeClasses(\n      cartesianchartClassNames.axisAnnotation,\n      baseStyles.axisAnnotation,\n      /*props.styles?.axisAnnotation,*/\n    ),\n    chart: mergeClasses(cartesianchartClassNames.chart, props.styles?.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","plotContainer","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","annotationLayer","useStyles","body1","display","width","height","flexDirection","overflow","textAlign","position","chartWrapperMinWidth","fill","colorNeutralForeground1","caption2Strong","forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","pointerEvents","useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode","undefined"],"mappings":"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"}
+{"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { CartesianChartProps, CartesianChartStyles } from './CartesianChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { CARTESIAN_XAXIS_CLASSNAME, HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const cartesianchartClassNames: SlotClassNames<CartesianChartStyles> = {\n  root: 'fui-cart__root',\n  chartWrapper: 'fui-cart__chartWrapper',\n  plotContainer: 'fui-cart__plotContainer',\n  axisTitle: 'fui-cart__axisTitle',\n  xAxis: CARTESIAN_XAXIS_CLASSNAME,\n  yAxis: 'fui-cart__yAxis',\n  opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n  legendContainer: 'fui-cart__legendContainer',\n  svgTooltip: 'fui-cart_svgTooltip',\n  shapeStyles: 'fui-cart__shapeStyles',\n  descriptionMessage: 'fui-cart__descriptionMessage',\n  hover: 'fui-cart__hover',\n  tooltip: 'fui-cart__tooltip',\n  axisAnnotation: 'fui-cart__axisAnnotation',\n  chartTitle: 'fui-cart__chartTitle',\n  chart: 'fui-cart__chart',\n  annotationLayer: 'fui-cart__annotationLayer',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    textAlign: 'left',\n    position: 'relative',\n  },\n  chartWrapper: {\n    position: 'relative',\n  },\n  chartWrapperMinWidth: {\n    overflow: 'auto',\n  },\n  plotContainer: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\n  },\n  axisTitle: getAxisTitleStyle() as GriffelStyle,\n  axisAnnotation: getAxisTitleStyle() as GriffelStyle,\n  xAxis: {\n    '& text': {\n      fill: tokens.colorNeutralForeground1,\n      ...typographyStyles.caption2Strong,\n      forcedColorAdjust: 'auto',\n    },\n    '& line': {\n      opacity: 0.2,\n      stroke: tokens.colorNeutralForeground1,\n      width: '1px',\n      forcedColorAdjust: 'auto',\n    },\n    '& path': {\n      display: 'none',\n    },\n  },\n  yAxis: {\n    '& text': {\n      ...typographyStyles.caption2Strong,\n      fill: tokens.colorNeutralForeground1,\n      forcedColorAdjust: 'auto',\n    },\n    '& line': {\n      opacity: 0.2,\n      stroke: tokens.colorNeutralForeground1,\n      forcedColorAdjust: 'auto',\n    },\n    '& path': {\n      display: 'none',\n    },\n  },\n  rtl: {\n    '& g': {\n      textAnchor: 'end',\n    },\n  },\n  ltr: {},\n  opacityChangeOnHover: {\n    opacity: '0.1', //supports custom opacity ??\n    cursor: 'default', //supports custom cursor ??\n  },\n  legendContainer: {\n    marginTop: tokens.spacingVerticalS,\n    marginLeft: tokens.spacingHorizontalXL,\n  },\n  svgTooltip: {\n    fill: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  annotationLayer: {\n    pointerEvents: 'none',\n  },\n  tooltip: getTooltipStyle() as GriffelStyle,\n});\n/**\n *\n * Apply styling to the Carousel slots based on the state\n */\nexport const useCartesianChartStyles = (props: CartesianChartProps): CartesianChartStyles => {\n  const _useRtl = useRtl();\n  const baseStyles = useStyles();\n  return {\n    root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, props.styles?.root),\n    chartWrapper: mergeClasses(\n      cartesianchartClassNames.chartWrapper,\n      baseStyles.chartWrapper,\n      props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapperMinWidth : undefined,\n      props.styles?.chartWrapper,\n    ),\n    plotContainer: mergeClasses(\n      cartesianchartClassNames.plotContainer,\n      baseStyles.plotContainer /*props.styles?.plotContainer*/,\n    ),\n    axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/),\n    xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/),\n    yAxis: mergeClasses(\n      cartesianchartClassNames.yAxis,\n      baseStyles.yAxis,\n      _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/,\n    ),\n    opacityChangeOnHover: mergeClasses(\n      cartesianchartClassNames.opacityChangeOnHover,\n      baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/,\n    ),\n    legendContainer: mergeClasses(\n      cartesianchartClassNames.legendContainer,\n      baseStyles.legendContainer /*props.styles?.legendContainer*/,\n    ),\n    svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, props.styles?.svgTooltip),\n    annotationLayer: mergeClasses(\n      cartesianchartClassNames.annotationLayer,\n      baseStyles.annotationLayer /*props.styles?.annotationLayer*/,\n    ),\n    tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    axisAnnotation: mergeClasses(\n      cartesianchartClassNames.axisAnnotation,\n      baseStyles.axisAnnotation,\n      /*props.styles?.axisAnnotation,*/\n    ),\n    chart: mergeClasses(cartesianchartClassNames.chart, props.styles?.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","CARTESIAN_XAXIS_CLASSNAME","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","plotContainer","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","annotationLayer","useStyles","body1","display","width","height","flexDirection","overflow","textAlign","position","chartWrapperMinWidth","fill","colorNeutralForeground1","caption2Strong","forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","pointerEvents","useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode","undefined"],"mappings":"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"}

package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js

@@ -17,40 +17,42 @@ const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _tokens = require("@fluentui/tokens");
 const _d3color = /*#__PURE__*/ _interop_require_wildcard._(require("d3-color"));
 const _PlotlySchemaAdapter = require("./PlotlySchemaAdapter");
+const _index = require("../../utilities/index");
 const _AnnotationOnlyChart = require("../AnnotationOnlyChart/AnnotationOnlyChart");
-const _index = require("../DonutChart/index");
-const _index1 = require("../VerticalStackedBarChart/index");
-const _index2 = require("../LineChart/index");
-const _index3 = require("../HorizontalBarChartWithAxis/index");
-const _index4 = require("../AreaChart/index");
-const _index5 = require("../HeatMapChart/index");
+const _index1 = require("../DonutChart/index");
+const _index2 = require("../VerticalStackedBarChart/index");
+const _index3 = require("../LineChart/index");
+const _index4 = require("../HorizontalBarChartWithAxis/index");
+const _index5 = require("../AreaChart/index");
+const _index6 = require("../HeatMapChart/index");
 const _SankeyChart = require("../SankeyChart/SankeyChart");
-const _index6 = require("../GaugeChart/index");
-const _index7 = require("../GroupedVerticalBarChart/index");
-const _index8 = require("../VerticalBarChart/index");
-const _index9 = require("../ScatterChart/index");
+const _index7 = require("../GaugeChart/index");
+const _index8 = require("../GroupedVerticalBarChart/index");
+const _index9 = require("../VerticalBarChart/index");
+const _index10 = require("../ScatterChart/index");
 const _FunnelChart = require("../FunnelChart/FunnelChart");
-const _index10 = require("../GanttChart/index");
+const _index11 = require("../GanttChart/index");
+const _index12 = require("../PolarChart/index");
 const _withResponsiveContainer = require("../ResponsiveContainer/withResponsiveContainer");
-const _index11 = require("../ChartTable/index");
-const _index12 = require("../Legends/index");
-const _index13 = require("../../utilities/index");
+const _index13 = require("../ChartTable/index");
+const _index14 = require("../Legends/index");
 const _imageexportutils = require("../../utilities/image-export-utils");
-const ResponsiveDonutChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index.DonutChart);
-const ResponsiveVerticalStackedBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index1.VerticalStackedBarChart);
-const ResponsiveLineChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index2.LineChart);
-const ResponsiveHorizontalBarChartWithAxis = (0, _withResponsiveContainer.withResponsiveContainer)(_index3.HorizontalBarChartWithAxis);
-const ResponsiveAreaChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index4.AreaChart);
-const ResponsiveHeatMapChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index5.HeatMapChart);
+const ResponsiveDonutChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index1.DonutChart);
+const ResponsiveVerticalStackedBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index2.VerticalStackedBarChart);
+const ResponsiveLineChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index3.LineChart);
+const ResponsiveHorizontalBarChartWithAxis = (0, _withResponsiveContainer.withResponsiveContainer)(_index4.HorizontalBarChartWithAxis);
+const ResponsiveAreaChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index5.AreaChart);
+const ResponsiveHeatMapChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index6.HeatMapChart);
 const ResponsiveSankeyChart = (0, _withResponsiveContainer.withResponsiveContainer)(_SankeyChart.SankeyChart);
-const ResponsiveGaugeChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index6.GaugeChart);
-const ResponsiveGroupedVerticalBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index7.GroupedVerticalBarChart);
-const ResponsiveVerticalBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index8.VerticalBarChart);
-const ResponsiveScatterChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index9.ScatterChart);
-const ResponsiveChartTable = (0, _withResponsiveContainer.withResponsiveContainer)(_index11.ChartTable);
-const ResponsiveGanttChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index10.GanttChart);
+const ResponsiveGaugeChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index7.GaugeChart);
+const ResponsiveGroupedVerticalBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index8.GroupedVerticalBarChart);
+const ResponsiveVerticalBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index9.VerticalBarChart);
+const ResponsiveScatterChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index10.ScatterChart);
+const ResponsiveChartTable = (0, _withResponsiveContainer.withResponsiveContainer)(_index13.ChartTable);
+const ResponsiveGanttChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index11.GanttChart);
 // Removing responsive wrapper for FunnelChart as responsive container is not working with FunnelChart
 //const ResponsiveFunnelChart = withResponsiveContainer(FunnelChart);
+const ResponsivePolarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index12.PolarChart);
 // Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.
 const DEFAULT_XAXIS = 'x';
 const useColorMapping = ()=>{
@@ -155,6 +157,10 @@ const chartMap = {
         transformer: _PlotlySchemaAdapter.transformPlotlyJsonToFunnelChartProps,
         renderer: _FunnelChart.FunnelChart
     },
+    scatterpolar: {
+        transformer: _PlotlySchemaAdapter.transformPlotlyJsonToPolarChartProps,
+        renderer: ResponsivePolarChart
+    },
     fallback: {
         transformer: _PlotlySchemaAdapter.transformPlotlyJsonToVSBCProps,
         renderer: ResponsiveVerticalStackedBarChart
@@ -170,6 +176,7 @@ const useIsDarkTheme = ()=>{
     return isDarkTheme;
 };
 const DeclarativeChart = /*#__PURE__*/ _react.forwardRef(({ colorwayType = 'default', ...props }, forwardedRef)=>{
+    var _plotlyInputWithValidData_layout;
     const { plotlySchema } = (0, _chartutilities.sanitizeJson)(props.chartSchema);
     const chart = (0, _chartutilities.mapFluentChart)(plotlySchema);
     if (!chart.isValid) {
@@ -196,7 +203,7 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef(({ colorwayType = 'defa
     const isMultiPlot = _react.useRef(false);
     const legendsRef = _react.useRef(null);
     const containerRef = _react.useRef(null);
-    const isRTL = (0, _index13.useRtl)();
+    const isRTL = (0, _index.useRtl)();
     if (!(0, _chartutilities.isArrayOrTypedArray)(selectedLegends)) {
         selectedLegends = [];
     }
@@ -231,7 +238,7 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef(({ colorwayType = 'defa
     };
     function createLegends(legendProps) {
         // eslint-disable-next-line react/jsx-no-bind
-        return /*#__PURE__*/ _react.createElement(_index12.Legends, {
+        return /*#__PURE__*/ _react.createElement(_index14.Legends, {
             ...legendProps,
             selectedLegends: activeLegends,
             onChange: onActiveLegendsChange,
@@ -244,7 +251,7 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef(({ colorwayType = 'defa
             throw new Error('Container reference is null');
         }
         const imgExpOpts = {
-            background: (0, _index13.resolveCSSVariables)(containerRef.current, _reacttheme.tokens.colorNeutralBackground1),
+            background: (0, _index.resolveCSSVariables)(containerRef.current, _reacttheme.tokens.colorNeutralBackground1),
             scale: 5,
             ...opts
         };
@@ -271,25 +278,6 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef(({ colorwayType = 'defa
         }), [
         exportAsImage
     ]);
-    if (chart.type === 'scatterpolar') {
-        const cartesianProjection = (0, _PlotlySchemaAdapter.projectPolarToCartesian)(plotlyInputWithValidData);
-        plotlyInputWithValidData.data = cartesianProjection.data;
-        plotlyInputWithValidData.layout = cartesianProjection.layout;
-        validTracesFilteredIndex.forEach((trace, index)=>{
-            if (trace.type === 'scatterpolar') {
-                var _plotlyInputWithValidData_data_index;
-                var _plotlyInputWithValidData_data_index_mode;
-                const mode = (_plotlyInputWithValidData_data_index_mode = (_plotlyInputWithValidData_data_index = plotlyInputWithValidData.data[index]) === null || _plotlyInputWithValidData_data_index === void 0 ? void 0 : _plotlyInputWithValidData_data_index.mode) !== null && _plotlyInputWithValidData_data_index_mode !== void 0 ? _plotlyInputWithValidData_data_index_mode : '';
-                if (mode.includes('line')) {
-                    validTracesFilteredIndex[index].type = 'line';
-                } else if (mode.includes('markers') || mode === 'text') {
-                    validTracesFilteredIndex[index].type = 'scatter';
-                } else {
-                    validTracesFilteredIndex[index].type = 'line';
-                }
-            }
-        });
-    }
     const groupedTraces = {};
     let nonCartesianTraceCount = 0;
     // For annotation-only charts, create a single group entry
@@ -302,8 +290,8 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef(({ colorwayType = 'defa
                 traceKey = `${_PlotlySchemaAdapter.NON_PLOT_KEY_PREFIX}${nonCartesianTraceCount + 1}`;
                 nonCartesianTraceCount++;
             } else {
-                var _trace_xaxis;
-                traceKey = (_trace_xaxis = trace.xaxis) !== null && _trace_xaxis !== void 0 ? _trace_xaxis : DEFAULT_XAXIS;
+                var _trace_subplot, _trace_xaxis;
+                traceKey = chart.validTracesInfo[index].type === 'scatterpolar' ? (_trace_subplot = trace.subplot) !== null && _trace_subplot !== void 0 ? _trace_subplot : _PlotlySchemaAdapter.DEFAULT_POLAR_SUBPLOT : (_trace_xaxis = trace.xaxis) !== null && _trace_xaxis !== void 0 ? _trace_xaxis : DEFAULT_XAXIS;
             }
             if (!groupedTraces[traceKey]) {
                 groupedTraces[traceKey] = [];
@@ -333,8 +321,21 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef(({ colorwayType = 'defa
         isMultiPlot.current = false;
     }
     const allupLegendsProps = (0, _PlotlySchemaAdapter.getAllupLegendsProps)(plotlyInputWithValidData, colorMap, colorwayType, chart.validTracesInfo, isDarkTheme);
+    const titleObj = (_plotlyInputWithValidData_layout = plotlyInputWithValidData.layout) === null || _plotlyInputWithValidData_layout === void 0 ? void 0 : _plotlyInputWithValidData_layout.title;
+    var _titleObj_text;
+    const chartTitle = typeof titleObj === 'string' ? titleObj : (_titleObj_text = titleObj === null || titleObj === void 0 ? void 0 : titleObj.text) !== null && _titleObj_text !== void 0 ? _titleObj_text : '';
+    const titleFont = typeof titleObj === 'object' ? titleObj === null || titleObj === void 0 ? void 0 : titleObj.font : undefined;
+    const titleStyle = {
+        ..._reacttheme.typographyStyles.caption1,
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        textAlign: 'center',
+        marginBottom: _reacttheme.tokens.spacingVerticalS,
+        ...(0, _index.getChartTitleInlineStyles)(titleFont)
+    };
     // map through the grouped traces and render the appropriate chart
-    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("div", {
+    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, isMultiPlot.current && chartTitle && /*#__PURE__*/ _react.createElement("div", {
+        style: titleStyle
+    }, chartTitle), /*#__PURE__*/ _react.createElement("div", {
         style: {
             display: 'grid',
             gridTemplateRows: gridProperties.templateRows,
@@ -360,9 +361,7 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef(({ colorwayType = 'defa
                 const transformedInput = preTransformOperation ? preTransformOperation(plotlyInputForGroup) : plotlyInputForGroup;
                 const cellProperties = gridProperties.layout[xAxisKey];
                 const resolvedCommonProps = chartType === 'annotation' ? {} : {
-                    ...interactiveCommonProps,
-                    xAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.xAnnotation,
-                    yAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.yAnnotation
+                    ...interactiveCommonProps
                 };
                 var _cellProperties_row, _cellProperties_column;
                 return renderChart(renderer, transformer, [
@@ -373,8 +372,12 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef(({ colorwayType = 'defa
                     isDarkTheme
                 ], {
                     ...resolvedCommonProps,
-                    xAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.xAnnotation,
-                    yAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.yAnnotation,
+                    ...(cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.xAnnotation) && {
+                        xAxisAnnotation: cellProperties.xAnnotation
+                    },
+                    ...(cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.yAnnotation) && {
+                        yAxisAnnotation: cellProperties.yAnnotation
+                    },
                     componentRef: (ref)=>{
                         var _cellProperties_row, _cellProperties_column;
                         chartRefs.current[chartIdx] = {