npm - @fluentui/react-charts - Versions diffs - 9.1.0 → 9.1.2 - Mend

@fluentui/react-charts 9.1.0 → 9.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,45 @@
 # Change Log - @fluentui/react-charts
-This log was last generated on Thu, 12 Jun 2025 09:39:10 GMT and should not be manually modified.
+This log was last generated on Wed, 18 Jun 2025 17:29:27 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.1.2)
+Wed, 18 Jun 2025 17:29:27 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.1.1..@fluentui/react-charts_v9.1.2)
+### Patches
+- chore (react-charts): Remove enzyme dependency for tests ([PR #34595](https://github.com/microsoft/fluentui/pull/34595) by 98592573+AtishayMsft@users.noreply.github.com)
+- fix (react-charts): Update traceinfo property structure ([PR #34652](https://github.com/microsoft/fluentui/pull/34652) by 98592573+AtishayMsft@users.noreply.github.com)
+- fix(react-charts): Consume y axis tick format for bar labels ([PR #34653](https://github.com/microsoft/fluentui/pull/34653) by 98592573+AtishayMsft@users.noreply.github.com)
+- fix(react-charts): Fix svg tooltip background alignment ([PR #34663](https://github.com/microsoft/fluentui/pull/34663) by 98592573+AtishayMsft@users.noreply.github.com)
+- port v8 fixes to v9 ([PR #34670](https://github.com/microsoft/fluentui/pull/34670) by anushgupta@microsoft.com)
+- Charts made responsive ([PR #34641](https://github.com/microsoft/fluentui/pull/34641) by anushgupta@microsoft.com)
+- Bump @fluentui/react-button to v9.5.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
+- Bump @fluentui/react-overflow to v9.4.2 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
+- Bump @fluentui/react-popover to v9.11.2 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.24.0 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
+- Bump @fluentui/react-tabster to v9.25.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
+- Bump @fluentui/react-tooltip to v9.7.2 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
+- Bump @fluentui/react-utilities to v9.21.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
+## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.1.1)
+Fri, 13 Jun 2025 12:32:53 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.1.0..@fluentui/react-charts_v9.1.1)
+### Patches
+- Bump @fluentui/react-overflow to v9.4.1 ([PR #34639](https://github.com/microsoft/fluentui/pull/34639) by beachball)
+- Bump @fluentui/react-popover to v9.11.1 ([PR #34639](https://github.com/microsoft/fluentui/pull/34639) by beachball)
+- Bump @fluentui/react-tooltip to v9.7.1 ([PR #34639](https://github.com/microsoft/fluentui/pull/34639) by beachball)
 ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.1.0)
-Thu, 12 Jun 2025 09:39:10 GMT
+Thu, 12 Jun 2025 09:43:29 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.0.7..@fluentui/react-charts_v9.1.0)
 ### Minor changes

package/dist/index.d.ts CHANGED Viewed

@@ -343,6 +343,11 @@ export declare interface CartesianChartProps {
      * props for the svg; use this to include aria-* or other attributes on the tag
      */
     svgProps?: React_2.SVGProps<SVGSVGElement>;
+    /**
+     * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows
+     * @default True for LineChart but False for other charts
+     */
+    enableReflow?: boolean;
     /**
      * Props related to reflow behavior of the chart
      */
@@ -441,6 +446,10 @@ export declare interface CartesianChartStyleProps {
      * boolean flag which determines if shape is drawn in callout
      */
     toDrawShape?: boolean;
+    /**
+     * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows
+     */
+    enableReflow?: boolean;
 }
 /**
@@ -2536,13 +2545,59 @@ declare interface RenderFunction<P> {
     (props?: P, defaultRender?: (props?: P) => JSX.Element | null): JSX.Element | null;
 }
+/**
+ * Responsive Child props
+ * {@docCategory ResponsiveContainer}
+ */
+export declare interface ResponsiveChildProps {
+    width?: number;
+    height?: number;
+    shouldResize?: number;
+}
+/**
+ * Responsive Container component
+ * {@docCategory ResponsiveContainer}
+ */
 export declare const ResponsiveContainer: React_2.FC<ResponsiveContainerProps>;
-declare interface ResponsiveContainerProps {
-    children: React_2.ReactElement;
-    onResize?: (width: number, height: number) => void;
+/**
+ * Responsive Container props
+ * {@docCategory ResponsiveContainer}
+ */
+export declare interface ResponsiveContainerProps {
+    /**
+     * Aspect ratio (width / height) of the container. If specified, the height will be calculated by width / aspect.
+     */
+    aspect?: number;
+    /**
+     * Width of the container
+     */
     width?: number | string;
+    /**
+     * Height of the container
+     */
     height?: number | string;
+    /**
+     * Minimum width of the container
+     */
+    minWidth?: number | string;
+    /**
+     * Minimum height of the container
+     */
+    minHeight?: number | string;
+    /**
+     * Maximum height of the container
+     */
+    maxHeight?: number;
+    /**
+     * Callback providing the updated chart width and height values when the container is resized
+     */
+    onResize?: (width: number, height: number) => void;
+    /**
+     * Child component to be rendered within the container
+     */
+    children: React_2.ReactElement<ResponsiveChildProps>;
 }
 export declare const SankeyChart: React_2.FunctionComponent<SankeyChartProps>;
@@ -3128,9 +3183,9 @@ export declare interface VerticalStackedBarChartProps extends CartesianChartProp
      */
     onRenderCalloutPerDataPoint?: RenderFunction<VSChartDataPoint>;
     /**
-     * yMinValue is not supported for bar charts, so only allow "undefined"
+     * yMinValue is supported for bar charts that has only lines
      */
-    yMinValue?: undefined;
+    yMinValue?: number | undefined;
     /**
      * Allow hover actions on the legend
      * @default true
@@ -3289,6 +3344,12 @@ export declare interface VSChartDataPoint {
     culture?: string;
 }
+/**
+ * An HOC to update wrapped component on container resize.
+ * {@docCategory ResponsiveContainer}
+ */
+export declare function withResponsiveContainer<TProps extends Omit<ResponsiveContainerProps, 'children'>>(WrappedComponent: React_2.ComponentType<TProps>): React_2.FC<TProps>;
 declare enum XAxisTypes {
     NumericAxis = 0,
     DateAxis = 1,

package/lib/components/CommonComponents/CartesianChart.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CartesianChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { LegendsProps } from '../Legends/index';\nimport { AccessibilityProps, Chart, Margins } from '../../types/index';\nimport { ChartTypes, XAxisTypes, YAxisType } from '../../utilities/index';\nimport { TimeLocaleDefinition } from 'd3-time-format';\nimport { ChartPopoverProps } from './ChartPopover.types';\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/\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 tooltip\n /\n axisTitle?: 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 svg tooltip\n /\n svgTooltip?: 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 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 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 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.RefObject<Chart>;\n}\n\nexport interface YValueHover {\n legend?: string;\n y?: number;\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 yScale?: 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: JSX.Element \| 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 /* 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"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
1	+ {"version":3,"sources":["CartesianChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { LegendsProps } from '../Legends/index';\nimport { AccessibilityProps, Chart, Margins } from '../../types/index';\nimport { ChartTypes, XAxisTypes, YAxisType } from '../../utilities/index';\nimport { TimeLocaleDefinition } from 'd3-time-format';\nimport { ChartPopoverProps } from './ChartPopover.types';\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 /\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 tooltip\n /\n axisTitle?: 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 svg tooltip\n /\n svgTooltip?: 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 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 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 * @default True for LineChart but False for other charts\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.RefObject<Chart>;\n}\n\nexport interface YValueHover {\n legend?: string;\n y?: number;\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 yScale?: 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: JSX.Element \| 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 /* 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"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/CommonComponents/useCartesianChartStyles.styles.js CHANGED Viewed

@@ -29,8 +29,8 @@ const useStyles = /*#__PURE__*/__styles({
     Bhrd7zp: "figsok6",
     Bg96gwp: "f1i3iumi",
     mc9l5x: "f22iagw",
-    a9b677: "fly5x3f",
-    Bqenvij: "f1l02sjl",
+    a9b677: "fsr8r2d",
+    Bqenvij: "f50j5g9",
     Beiy3e4: "f1vx9l62",
     B68tc82: 0,
     Bmxbyg5: 0,
@@ -94,7 +94,7 @@ const useStyles = /*#__PURE__*/__styles({
     a6j6cd: "f14egcv9"
   }
 }, {
-  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f22iagw{display:flex;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1vx9l62{flex-direction:column;}", [".f1a3p1vp{overflow:hidden;}", {
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f22iagw{display:flex;}", ".fsr8r2d{width:var(--root-width, 100%);}", ".f50j5g9{height:var(--root-height, 100%);}", ".f1vx9l62{flex-direction:column;}", [".f1a3p1vp{overflow:hidden;}", {
     p: -1
   }], [".f1enuhaj{overflow:auto;}", {
     p: -1
@@ -113,7 +113,7 @@ export const useCartesianChartStyles = props => {
   const baseStyles = useStyles();
   return {
     root: mergeClasses(cartesianchartClassNames.root, baseStyles.root /*props.styles?.root*/),
-    chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, baseStyles.chartWrapper /*props.styles?.chartWrapper*/),
+    chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, props.enableReflow ? baseStyles.chartWrapper : ''),
     axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/),
     xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/),
     yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/),

package/lib/components/CommonComponents/useCartesianChartStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","chartTitle","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","B80ckks","fsow6f","sj55zd","Bkfmm31","a6j6cd","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","d","p","m","useCartesianChartStyles","props","_useRtl","baseStyles"],"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\n/*\n @internal\n / export const cartesianchartClassNames = {\n root: 'fui-cart__root',\n chartWrapper: 'fui-cart__chartWrapper',\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 chartTitle: 'fui-cart__chartTitle'\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 },\n chartWrapper: {\n overflow: 'auto'\n },\n axisTitle: {\n ...typographyStyles.caption2Strong,\n fontStyle: 'normal',\n textAlign: 'center',\n color: tokens.colorNeutralForeground2,\n fill: tokens.colorNeutralForeground1,\n [HighContrastSelector]: {\n fill: 'CanvasText'\n }\n },\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});\n/\n Apply styling to the Carousel slots based on the state\n / export const useCartesianChartStyles = (props)=>{\n const _useRtl = useRtl();\n const baseStyles = useStyles();\n return {\n root: mergeClasses(cartesianchartClassNames.root, baseStyles.root /props.styles?.root/ ),\n chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, ~~baseStyles~~.~~chartWrapper~~ ~~/props~~.~~styles?.~~chartWrapper/ ),\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.styles?.svgTooltip*/ )\n };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,EAAEC,MAAM,QAAQ,2BAA2B;AACxE;AACA;AACA;AAAI,OAAO,MAAMC,wBAAwB,GAAG;EACxCC,IAAI,EAAE,gBAAgB;EACtBC,YAAY,EAAE,wBAAwB;EACtCC,SAAS,EAAE,qBAAqB;EAChCC,KAAK,EAAE,iBAAiB;EACxBC,KAAK,EAAE,iBAAiB;EACxBC,oBAAoB,EAAE,gCAAgC;EACtDC,eAAe,EAAE,2BAA2B;EAC5CC,UAAU,EAAE,qBAAqB;EACjCC,WAAW,EAAE,uBAAuB;EACpCC,kBAAkB,EAAE,8BAA8B;EAClDC,KAAK,EAAE,iBAAiB;EACxBC,OAAO,EAAE,mBAAmB;EAC5BC,UAAU,EAAE;AAChB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGpB,QAAA;EAAAO,IAAA;IAAAc,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAvB,YAAA;IAAAqB,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAtB,SAAA;IAAAY,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAQ,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA1B,KAAA;IAAA2B,OAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAApC,KAAA;IAAA2B,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAJ,OAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;EAAAtC,oBAAA;IAAAuC,MAAA;IAAAC,OAAA;EAAA;EAAAvC,eAAA;IAAAwC,OAAA;IAAAC,MAAA;EAAA;EAAAxC,UAAA;IAAAqB,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAmB,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyErB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAChD,MAAMC,OAAO,GAAGvD,MAAM,CAAC,CAAC;EACxB,MAAMwD,UAAU,GAAGzC,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHb,IAAI,EAAEN,YAAY,CAACK,wBAAwB,CAACC,IAAI,EAAEsD,UAAU,CAACtD,IAAI,CAAC,sBAAuB,CAAC;IAC1FC,YAAY,EAAEP,YAAY,CAACK,wBAAwB,CAACE,YAAY,~~EAAEqD~~,UAAU,CAACrD,YAAY,~~CAAC~~,~~8BAA+B~~,CAAC;~~IAC1HC~~,SAAS,EAAER,YAAY,CAACK,wBAAwB,CAACG,SAAS,EAAEoD,UAAU,CAACpD,SAAS,CAAC,2BAA4B,CAAC;IAC9GC,KAAK,EAAET,YAAY,CAACK,wBAAwB,CAACI,KAAK,EAAEmD,UAAU,CAACnD,KAAK,CAAC,uBAAwB,CAAC;IAC9FC,KAAK,EAAEV,YAAY,CAACK,wBAAwB,CAACK,KAAK,EAAEkD,UAAU,CAAClD,KAAK,EAAEiD,OAAO,GAAGC,UAAU,CAACb,GAAG,GAAGa,UAAU,CAACX,GAAG,CAAC,uBAAwB,CAAC;IACzItC,oBAAoB,EAAEX,YAAY,CAACK,wBAAwB,CAACM,oBAAoB,EAAEiD,UAAU,CAACjD,oBAAoB,CAAC,sCAAuC,CAAC;IAC1JC,eAAe,EAAEZ,YAAY,CAACK,wBAAwB,CAACO,eAAe,EAAEgD,UAAU,CAAChD,eAAe,CAAC,iCAAkC,CAAC;IACtIC,UAAU,EAAEb,YAAY,CAACK,wBAAwB,CAACQ,UAAU,EAAE+C,UAAU,CAAC/C,UAAU,CAAC,4BAA6B;EACrH,CAAC;AACL,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","chartTitle","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","B80ckks","fsow6f","sj55zd","Bkfmm31","a6j6cd","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","d","p","m","useCartesianChartStyles","props","_useRtl","baseStyles","enableReflow"],"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\n/*\n @internal\n / export const cartesianchartClassNames = {\n root: 'fui-cart__root',\n chartWrapper: 'fui-cart__chartWrapper',\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 chartTitle: 'fui-cart__chartTitle'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n root: {\n ...typographyStyles.body1,\n display: 'flex',\n width: 'var(--root-width, 100%)',\n height: 'var(--root-height, 100%)',\n flexDirection: 'column',\n overflow: 'hidden'\n },\n chartWrapper: {\n overflow: 'auto'\n },\n axisTitle: {\n ...typographyStyles.caption2Strong,\n fontStyle: 'normal',\n textAlign: 'center',\n color: tokens.colorNeutralForeground2,\n fill: tokens.colorNeutralForeground1,\n [HighContrastSelector]: {\n fill: 'CanvasText'\n }\n },\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});\n/\n Apply styling to the Carousel slots based on the state\n / export const useCartesianChartStyles = (props)=>{\n const _useRtl = useRtl();\n const baseStyles = useStyles();\n return {\n root: mergeClasses(cartesianchartClassNames.root, baseStyles.root /props.styles?.root/ ),\n chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, props.enableReflow ? baseStyles.chartWrapper : ''),\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.styles?.svgTooltip*/ )\n };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,EAAEC,MAAM,QAAQ,2BAA2B;AACxE;AACA;AACA;AAAI,OAAO,MAAMC,wBAAwB,GAAG;EACxCC,IAAI,EAAE,gBAAgB;EACtBC,YAAY,EAAE,wBAAwB;EACtCC,SAAS,EAAE,qBAAqB;EAChCC,KAAK,EAAE,iBAAiB;EACxBC,KAAK,EAAE,iBAAiB;EACxBC,oBAAoB,EAAE,gCAAgC;EACtDC,eAAe,EAAE,2BAA2B;EAC5CC,UAAU,EAAE,qBAAqB;EACjCC,WAAW,EAAE,uBAAuB;EACpCC,kBAAkB,EAAE,8BAA8B;EAClDC,KAAK,EAAE,iBAAiB;EACxBC,OAAO,EAAE,mBAAmB;EAC5BC,UAAU,EAAE;AAChB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGpB,QAAA;EAAAO,IAAA;IAAAc,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAvB,YAAA;IAAAqB,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAtB,SAAA;IAAAY,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAQ,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA1B,KAAA;IAAA2B,OAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAApC,KAAA;IAAA2B,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAJ,OAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;EAAAtC,oBAAA;IAAAuC,MAAA;IAAAC,OAAA;EAAA;EAAAvC,eAAA;IAAAwC,OAAA;IAAAC,MAAA;EAAA;EAAAxC,UAAA;IAAAqB,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAmB,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyErB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAChD,MAAMC,OAAO,GAAGvD,MAAM,CAAC,CAAC;EACxB,MAAMwD,UAAU,GAAGzC,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHb,IAAI,EAAEN,YAAY,CAACK,wBAAwB,CAACC,IAAI,EAAEsD,UAAU,CAACtD,IAAI,CAAC,sBAAuB,CAAC;IAC1FC,YAAY,EAAEP,YAAY,CAACK,wBAAwB,CAACE,YAAY,EAAEmD,KAAK,CAACG,YAAY,GAAGD,UAAU,CAACrD,YAAY,GAAG,EAAE,CAAC;IACpHC,SAAS,EAAER,YAAY,CAACK,wBAAwB,CAACG,SAAS,EAAEoD,UAAU,CAACpD,SAAS,CAAC,2BAA4B,CAAC;IAC9GC,KAAK,EAAET,YAAY,CAACK,wBAAwB,CAACI,KAAK,EAAEmD,UAAU,CAACnD,KAAK,CAAC,uBAAwB,CAAC;IAC9FC,KAAK,EAAEV,YAAY,CAACK,wBAAwB,CAACK,KAAK,EAAEkD,UAAU,CAAClD,KAAK,EAAEiD,OAAO,GAAGC,UAAU,CAACb,GAAG,GAAGa,UAAU,CAACX,GAAG,CAAC,uBAAwB,CAAC;IACzItC,oBAAoB,EAAEX,YAAY,CAACK,wBAAwB,CAACM,oBAAoB,EAAEiD,UAAU,CAACjD,oBAAoB,CAAC,sCAAuC,CAAC;IAC1JC,eAAe,EAAEZ,YAAY,CAACK,wBAAwB,CAACO,eAAe,EAAEgD,UAAU,CAAChD,eAAe,CAAC,iCAAkC,CAAC;IACtIC,UAAU,EAAEb,YAAY,CAACK,wBAAwB,CAACQ,UAAU,EAAE+C,UAAU,CAAC/C,UAAU,CAAC,4BAA6B;EACrH,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/DeclarativeChart/DeclarativeChart.js CHANGED Viewed

@@ -17,6 +17,18 @@ import { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';
 import { VerticalBarChart } from '../VerticalBarChart/index';
 import { toImage } from './imageExporter';
 import { ScatterChart } from '../ScatterChart/index';
+import { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';
+const ResponsiveDonutChart = withResponsiveContainer(DonutChart);
+const ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);
+const ResponsiveLineChart = withResponsiveContainer(LineChart);
+const ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);
+const ResponsiveAreaChart = withResponsiveContainer(AreaChart);
+const ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);
+const ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);
+const ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);
+const ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);
+const ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);
+const ResponsiveScatterChart = withResponsiveContainer(ScatterChart);
 const useColorMapping = ()=>{
     const colorMap = React.useRef(new Map());
     return colorMap;
@@ -47,7 +59,7 @@ const useIsDarkTheme = ()=>{
     }
     const plotlyInputWithValidData = {
         ...plotlyInput,
-        data: chart.validTracesInfo.map((trace)=>plotlyInput.data[trace[0]])
+        data: chart.validTracesInfo.map((trace)=>plotlyInput.data[trace.index])
     };
     let { selectedLegends } = plotlySchema;
     const colorMap = useColorMapping();
@@ -97,12 +109,12 @@ const useIsDarkTheme = ()=>{
             ...commonProps
         };
         if (isAreaChart) {
-            return /*#__PURE__*/ React.createElement(AreaChart, chartProps);
+            return /*#__PURE__*/ React.createElement(ResponsiveAreaChart, chartProps);
         }
         if (isScatterMarkers) {
-            return /*#__PURE__*/ React.createElement(ScatterChart, chartProps);
+            return /*#__PURE__*/ React.createElement(ResponsiveScatterChart, chartProps);
         }
-        return /*#__PURE__*/ React.createElement(LineChart, chartProps);
+        return /*#__PURE__*/ React.createElement(ResponsiveLineChart, chartProps);
     };
     const checkAndRenderChart = (isAreaChart = false)=>{
         let fallbackVSBC = false;
@@ -126,7 +138,7 @@ const useIsDarkTheme = ()=>{
         }
         // Unsupported schema, render as VerticalStackedBarChart
         fallbackVSBC = true;
-        return /*#__PURE__*/ React.createElement(VerticalStackedBarChart, {
+        return /*#__PURE__*/ React.createElement(ResponsiveVerticalStackedBarChart, {
             ...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme, fallbackVSBC),
             ...commonProps
         });
@@ -147,43 +159,43 @@ const useIsDarkTheme = ()=>{
     ]);
     switch(chart.type){
         case 'donut':
-            return /*#__PURE__*/ React.createElement(DonutChart, {
+            return /*#__PURE__*/ React.createElement(ResponsiveDonutChart, {
                 ...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, isDarkTheme),
                 ...commonProps
             });
         case 'horizontalbar':
-            return /*#__PURE__*/ React.createElement(HorizontalBarChartWithAxis, {
+            return /*#__PURE__*/ React.createElement(ResponsiveHorizontalBarChartWithAxis, {
                 ...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlyInputWithValidData, colorMap, isDarkTheme),
                 ...commonProps
             });
         case 'groupedverticalbar':
-            return /*#__PURE__*/ React.createElement(GroupedVerticalBarChart, {
+            return /*#__PURE__*/ React.createElement(ResponsiveGroupedVerticalBarChart, {
                 ...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme),
                 ...commonProps
             });
         case 'verticalstackedbar':
-            return /*#__PURE__*/ React.createElement(VerticalStackedBarChart, {
+            return /*#__PURE__*/ React.createElement(ResponsiveVerticalStackedBarChart, {
                 ...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme),
                 ...commonProps
             });
         case 'heatmap':
-            return /*#__PURE__*/ React.createElement(HeatMapChart, {
+            return /*#__PURE__*/ React.createElement(ResponsiveHeatMapChart, {
                 ...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData),
                 ...commonProps,
                 legendProps: {}
             });
         case 'sankey':
-            return /*#__PURE__*/ React.createElement(SankeyChart, {
+            return /*#__PURE__*/ React.createElement(ResponsiveSankeyChart, {
                 ...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, isDarkTheme),
                 ...commonProps
             });
         case 'gauge':
-            return /*#__PURE__*/ React.createElement(GaugeChart, {
+            return /*#__PURE__*/ React.createElement(ResponsiveGaugeChart, {
                 ...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, isDarkTheme),
                 ...commonProps
             });
         case 'verticalbar':
-            return /*#__PURE__*/ React.createElement(VerticalBarChart, {
+            return /*#__PURE__*/ React.createElement(ResponsiveVerticalBarChart, {
                 ...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme),
                 ...commonProps
             });

package/lib/components/DeclarativeChart/DeclarativeChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\nimport as React from 'react';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n decodeBase64Fields,\n isArrayOrTypedArray,\n isDateArray,\n isMonthArray,\n isNumberArray,\n isYearArray,\n mapFluentChart,\n sanitizeJson,\n} from '@fluentui/chart-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';\nimport { Theme, webLightTheme } from '@fluentui/tokens';\nimport * as d3Color from 'd3-color';\n\nimport {\n correctYearMonth,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { LineChart, LineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, AreaChartProps } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { ImageExportOptions, toImage } from './imageExporter';\nimport { Chart } from '../../types/index';\nimport { ScatterChart } from '../ScatterChart/index';\n// TODO\n// import { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\n\n// const ResponsiveDonutChart = withResponsiveContainer(DonutChart);\n// const ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\n// const ResponsiveLineChart = withResponsiveContainer(LineChart);\n// const ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\n// const ResponsiveAreaChart = withResponsiveContainer(AreaChart);\n// const ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\n// const ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\n// const ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\n// const ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\n// const ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\n\n/*\n DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n /\nexport interface Schema {\n /\n Plotly schema represented as JSON object\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n plotlySchema: any;\n}\n\n/\n DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n /\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n /\n The schema representing the chart data, layout and configuration\n /\n chartSchema: Schema;\n\n /\n Callback when an event occurs\n /\n onSchemaChange?: (eventData: Schema) => void;\n\n /\n Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: React.RefObject<IDeclarativeChart>;\n}\n\n/\n {@docCategory DeclarativeChart}\n /\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: ImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\nconst useIsDarkTheme = (): boolean => {\n const parentV9Theme = React.useContext(V9ThemeContext) as Theme;\n const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;\n\n // Get background and foreground colors\n const backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1);\n const foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1);\n\n const isDarkTheme = backgroundColor.l < foregroundColor.l;\n\n return isDarkTheme;\n};\n\n/\n DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n const chart: OutputChartType = mapFluentChart(plotlySchema);\n if (!chart.isValid) {\n throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n }\n let plotlyInput = plotlySchema as PlotlySchema;\n try {\n plotlyInput = decodeBase64Fields(plotlyInput);\n } catch (error) {\n throw new Error(`Failed to decode plotly schema: ${error}`);\n }\n const plotlyInputWithValidData: PlotlySchema = {\n ...plotlyInput,\n data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace[0]]),\n };\n\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const isDarkTheme = useIsDarkTheme();\n const chartRef = React.useRef<Chart>(null);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n };\n\n const renderLineAreaScatter = (plotlyData: Data[], isAreaChart: boolean): JSX.Element => {\n const isScatterMarkers = (plotlyData[0] as PlotData)?.mode === 'markers';\n const chartProps: LineChartProps \| AreaChartProps = {\n ...transformPlotlyJsonToScatterChartProps(\n { data: plotlyData, layout: plotlyInput.layout },\n isAreaChart,\n colorMap,\n isDarkTheme,\n ),\n ...commonProps,\n };\n if (isAreaChart) {\n return <AreaChart {...chartProps} />;\n }\n if (isScatterMarkers) {\n return <ScatterChart {...chartProps} />;\n }\n return <LineChart {...chartProps} />;\n };\n\n const checkAndRenderChart = (isAreaChart: boolean = false) => {\n let fallbackVSBC = false;\n const xValues = (plotlyInputWithValidData.data[0] as PlotData).x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\n\n // Consider year as categorical variable not numeric continuous variable\n // Also year is not considered a date variable as it is represented as a point\n // in time and brings additional complexity of handling timezone and locale\n // formatting given the current design of the charting library\n const isXYear = isYearArray(xValues);\n\n if ((isXDate \|\| isXNumber) && !isXYear) {\n return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart);\n } else if (isXMonth) {\n const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: correctYearMonth(dataPoint.x),\n }));\n return renderLineAreaScatter(updatedData, isAreaChart);\n }\n // Unsupported schema, render as VerticalStackedBarChart\n fallbackVSBC = true;\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme, fallbackVSBC)}\n {...commonProps}\n />\n );\n };\n\n // TODO\n const exportAsImage = React.useCallback((opts?: ImageExportOptions) => {\n return toImage(chartRef.current?.chartContainer, {\n background: tokens.colorNeutralBackground1,\n scale: 5,\n ...opts,\n });\n }, []);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n switch (chart.type) {\n case 'donut':\n return (\n <DonutChart\n {...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'horizontalbar':\n return (\n <HorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'groupedverticalbar':\n return (\n <GroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'verticalstackedbar':\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'heatmap':\n return (\n <HeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData)}\n {...commonProps}\n legendProps={{}}\n />\n );\n case 'sankey':\n return (\n <SankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'gauge':\n return (\n <GaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'verticalbar':\n return (\n <VerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n // TODO: Add 'scatter' as a separate chart type\n case 'area':\n case 'line':\n case 'fallback':\n // Need recheck for area chart as we don't have ability to check for valid months in previous step\n const isAreaChart = plotlyInputWithValidData.data.some(\n (series: PlotData) => series.fill === 'tonexty' \|\| series.fill === 'tozeroy' \|\| !!series.stackgroup,\n );\n return checkAndRenderChart(isAreaChart);\n default:\n throw new Error(`Unsupported chart type :${plotlyInputWithValidData.data[0]?.type}`);\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"],"names":["React","decodeBase64Fields","isArrayOrTypedArray","isDateArray","isMonthArray","isNumberArray","isYearArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToScatterChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","toImage","ScatterChart","useColorMapping","colorMap","useRef","Map","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","props","forwardedRef","plotlySchema","chartSchema","chart","isValid","Error","errorMessage","plotlyInput","error","plotlyInputWithValidData","data","validTracesInfo","map","trace","selectedLegends","chartRef","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","commonProps","legendProps","componentRef","renderLineAreaScatter","plotlyData","isAreaChart","isScatterMarkers","mode","chartProps","layout","checkAndRenderChart","fallbackVSBC","xValues","x","isXDate","isXNumber","isXMonth","isXYear","updatedData","dataPoint","exportAsImage","useCallback","opts","current","chartContainer","background","scale","useImperativeHandle","type","some","series","fill","stackgroup","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\nimport as React from 'react';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n decodeBase64Fields,\n isArrayOrTypedArray,\n isDateArray,\n isMonthArray,\n isNumberArray,\n isYearArray,\n mapFluentChart,\n sanitizeJson,\n} from '@fluentui/chart-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';\nimport { Theme, webLightTheme } from '@fluentui/tokens';\nimport * as d3Color from 'd3-color';\n\nimport {\n correctYearMonth,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { LineChart, LineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, AreaChartProps } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { ImageExportOptions, toImage } from './imageExporter';\nimport { Chart } from '../../types/index';\nimport { ScatterChart } from '../ScatterChart/index';\n\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\n\n/*\n DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n /\nexport interface Schema {\n /\n Plotly schema represented as JSON object\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n plotlySchema: any;\n}\n\n/\n DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n /\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n /\n The schema representing the chart data, layout and configuration\n /\n chartSchema: Schema;\n\n /\n Callback when an event occurs\n /\n onSchemaChange?: (eventData: Schema) => void;\n\n /\n Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: React.RefObject<IDeclarativeChart>;\n}\n\n/\n {@docCategory DeclarativeChart}\n /\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: ImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\nconst useIsDarkTheme = (): boolean => {\n const parentV9Theme = React.useContext(V9ThemeContext) as Theme;\n const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;\n\n // Get background and foreground colors\n const backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1);\n const foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1);\n\n const isDarkTheme = backgroundColor.l < foregroundColor.l;\n\n return isDarkTheme;\n};\n\n/\n DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n const chart: OutputChartType = mapFluentChart(plotlySchema);\n if (!chart.isValid) {\n throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n }\n let plotlyInput = plotlySchema as PlotlySchema;\n try {\n plotlyInput = decodeBase64Fields(plotlyInput);\n } catch (error) {\n throw new Error(`Failed to decode plotly schema: ${error}`);\n }\n const plotlyInputWithValidData: PlotlySchema = {\n ...plotlyInput,\n data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace.index]),\n };\n\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const isDarkTheme = useIsDarkTheme();\n const chartRef = React.useRef<Chart>(null);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n };\n\n const renderLineAreaScatter = (plotlyData: Data[], isAreaChart: boolean): JSX.Element => {\n const isScatterMarkers = (plotlyData[0] as PlotData)?.mode === 'markers';\n const chartProps: LineChartProps \| AreaChartProps = {\n ...transformPlotlyJsonToScatterChartProps(\n { data: plotlyData, layout: plotlyInput.layout },\n isAreaChart,\n colorMap,\n isDarkTheme,\n ),\n ...commonProps,\n };\n if (isAreaChart) {\n return <ResponsiveAreaChart {...chartProps} />;\n }\n if (isScatterMarkers) {\n return <ResponsiveScatterChart {...chartProps} />;\n }\n return <ResponsiveLineChart {...chartProps} />;\n };\n\n const checkAndRenderChart = (isAreaChart: boolean = false) => {\n let fallbackVSBC = false;\n const xValues = (plotlyInputWithValidData.data[0] as PlotData).x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\n\n // Consider year as categorical variable not numeric continuous variable\n // Also year is not considered a date variable as it is represented as a point\n // in time and brings additional complexity of handling timezone and locale\n // formatting given the current design of the charting library\n const isXYear = isYearArray(xValues);\n\n if ((isXDate \|\| isXNumber) && !isXYear) {\n return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart);\n } else if (isXMonth) {\n const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: correctYearMonth(dataPoint.x),\n }));\n return renderLineAreaScatter(updatedData, isAreaChart);\n }\n // Unsupported schema, render as VerticalStackedBarChart\n fallbackVSBC = true;\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme, fallbackVSBC)}\n {...commonProps}\n />\n );\n };\n\n // TODO\n const exportAsImage = React.useCallback((opts?: ImageExportOptions) => {\n return toImage(chartRef.current?.chartContainer, {\n background: tokens.colorNeutralBackground1,\n scale: 5,\n ...opts,\n });\n }, []);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n switch (chart.type) {\n case 'donut':\n return (\n <ResponsiveDonutChart\n {...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'horizontalbar':\n return (\n <ResponsiveHorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'groupedverticalbar':\n return (\n <ResponsiveGroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'verticalstackedbar':\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'heatmap':\n return (\n <ResponsiveHeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData)}\n {...commonProps}\n legendProps={{}}\n />\n );\n case 'sankey':\n return (\n <ResponsiveSankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'gauge':\n return (\n <ResponsiveGaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'verticalbar':\n return (\n <ResponsiveVerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n // TODO: Add 'scatter' as a separate chart type\n case 'area':\n case 'line':\n case 'fallback':\n // Need recheck for area chart as we don't have ability to check for valid months in previous step\n const isAreaChart = plotlyInputWithValidData.data.some(\n (series: PlotData) => series.fill === 'tonexty' \|\| series.fill === 'tozeroy' \|\| !!series.stackgroup,\n );\n return checkAndRenderChart(isAreaChart);\n default:\n throw new Error(`Unsupported chart type :${plotlyInputWithValidData.data[0]?.type}`);\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"],"names":["React","decodeBase64Fields","isArrayOrTypedArray","isDateArray","isMonthArray","isNumberArray","isYearArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToScatterChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","toImage","ScatterChart","withResponsiveContainer","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","useColorMapping","colorMap","useRef","Map","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","props","forwardedRef","plotlySchema","chartSchema","chart","isValid","Error","errorMessage","plotlyInput","error","plotlyInputWithValidData","data","validTracesInfo","map","trace","index","selectedLegends","chartRef","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","commonProps","legendProps","componentRef","renderLineAreaScatter","plotlyData","isAreaChart","isScatterMarkers","mode","chartProps","layout","checkAndRenderChart","fallbackVSBC","xValues","x","isXDate","isXNumber","isXMonth","isXYear","updatedData","dataPoint","exportAsImage","useCallback","opts","current","chartContainer","background","scale","useImperativeHandle","type","some","series","fill","stackgroup","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js CHANGED Viewed

@@ -165,6 +165,7 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fal
     var _input_layout, _input_layout1;
     const mapXToDataPoints = {};
     let yMaxValue = 0;
+    let yMinValue = 0;
     let secondaryYAxisValues = {};
     input.data.forEach((series, index1)=>{
         var _series_x;
@@ -201,6 +202,7 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fal
                 });
             }
             yMaxValue = Math.max(yMaxValue, yVal);
+            yMinValue = Math.min(yMinValue, yVal);
         });
         secondaryYAxisValues = getSecondaryYAxisValues(series, input.layout);
     });
@@ -212,6 +214,7 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fal
         height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         barWidth: 'auto',
         yMaxValue,
+        yMinValue,
         chartTitle,
         xAxisTitle,
         yAxisTitle,
@@ -416,7 +419,10 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap,
     var _input_layout_margin_pad;
     const padding = (_input_layout_margin_pad = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_margin1 = _input_layout2.margin) === null || _input_layout_margin1 === void 0 ? void 0 : _input_layout_margin1.pad) !== null && _input_layout_margin_pad !== void 0 ? _input_layout_margin_pad : 0;
     const availableHeight = chartHeight - margin - padding;
-    const numberOfBars = input.data[0].y.length;
+    const numberOfBars = input.data.reduce((total, item)=>{
+        var _item_y;
+        return total + (((_item_y = item.y) === null || _item_y === void 0 ? void 0 : _item_y.length) || 0);
+    }, 0);
     const scalingFactor = 0.01;
     const gapFactor = 1 / (1 + scalingFactor * numberOfBars);
     const barHeight = availableHeight / (numberOfBars * (1 + gapFactor));