@fluentui/react-charts 0.0.0-nightly-20250423-0405.1 → 0.0.0-nightly-20250423-1415.1

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

@@ -0,0 +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 callout root-content\n   */\n  calloutContentRoot?: string;\n\n  /**\n   * styles for callout x-content\n   */\n  calloutContentX?: string;\n\n  /**\n   * styles for callout y-content\n   */\n  calloutContentY?: string;\n\n  /**\n   * styles for description message\n   */\n  descriptionMessage?: string;\n\n  /**\n   * styles for callout Date time container\n   */\n  calloutDateTimeContainer?: string;\n\n  /**\n   * styles for callout info container\n   */\n  calloutInfoContainer?: string;\n\n  /**\n   * styles for callout block container\n   */\n  calloutBlockContainer?: string;\n\n  /**\n   * Styles for callout block container when toDrawShape is false\n   */\n  calloutBlockContainertoDrawShapefalse?: string;\n\n  /**\n   * Styles for callout block container when toDrawShape is true\n   */\n  calloutBlockContainertoDrawShapetrue?: string;\n\n  /**\n   * styles for callout legend text\n   */\n  calloutlegendText?: 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/**\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 false\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":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}

package/lib-commonjs/components/CommonComponents/ChartPopover.js

@@ -0,0 +1,197 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ChartPopover", {
+    enumerable: true,
+    get: function() {
+        return ChartPopover;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactpopover = require("@fluentui/react-popover");
+const _react1 = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reactutilities = require("@fluentui/react-utilities");
+const _index = require("../../utilities/index");
+const _localeutil = require("../../utilities/locale-util");
+const _shape = require("../Legends/shape");
+const _useChartPopoverStylesstyles = require("./useChartPopoverStyles.styles");
+const ChartPopover = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+    var _props_customCallout;
+    const virtualElement = {
+        getBoundingClientRect: ()=>({
+                top: props.clickPosition.y,
+                left: props.clickPosition.x,
+                right: props.clickPosition.x,
+                bottom: props.clickPosition.y,
+                x: props.clickPosition.x,
+                y: props.clickPosition.y,
+                width: 0,
+                height: 0
+            })
+    };
+    props = {
+        ...props,
+        ...(_props_customCallout = props.customCallout) === null || _props_customCallout === void 0 ? void 0 : _props_customCallout.customCalloutProps
+    };
+    const classes = (0, _useChartPopoverStylesstyles.usePopoverStyles_unstable)(props);
+    const legend = props.xCalloutValue ? props.xCalloutValue : props.legend;
+    const YValue = props.yCalloutValue ? props.yCalloutValue : props.YValue;
+    return /*#__PURE__*/ _react.createElement("div", {
+        id: (0, _reactutilities.useId)('callout'),
+        ref: forwardedRef,
+        className: classes.calloutContainer
+    }, /*#__PURE__*/ _react.createElement(_reactpopover.Popover, {
+        positioning: {
+            target: virtualElement,
+            autoSize: 'always',
+            offset: 20,
+            coverTarget: false
+        },
+        open: props.isPopoverOpen,
+        inline: true
+    }, /*#__PURE__*/ _react.createElement(_reactpopover.PopoverSurface, null, props.customCallout && props.customCallout.customizedCallout && props.customCallout.customizedCallout, (!props.customCallout || !props.customCallout.customizedCallout) && props.isCalloutForStack && _multiValueCallout(), (!props.customCallout || !props.customCallout.customizedCallout) && !props.isCalloutForStack && /*#__PURE__*/ _react.createElement("div", {
+        className: classes.calloutContentRoot
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: classes.calloutDateTimeContainer
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: classes.calloutContentX
+    }, props.XValue, " ")), /*#__PURE__*/ _react.createElement("div", {
+        className: classes.calloutInfoContainer,
+        style: {
+            ...props.ratio && {
+                display: 'flex',
+                alignItems: 'flex-end'
+            },
+            borderLeft: `4px solid ${props.color}`
+        }
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: classes.calloutBlockContainer
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: classes.calloutlegendText
+    }, (0, _localeutil.convertToLocaleString)(legend, props.culture)), /*#__PURE__*/ _react.createElement("div", {
+        className: classes.calloutContentY,
+        style: {
+            color: props.color ? props.color : _reacttheme.tokens.colorNeutralForeground1
+        }
+    }, (0, _localeutil.convertToLocaleString)(YValue, props.culture))), !!props.ratio && /*#__PURE__*/ _react.createElement("div", {
+        className: classes.ratio
+    }, /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("span", {
+        className: classes.numerator
+    }, (0, _localeutil.convertToLocaleString)(props.ratio[0], props.culture)), "/", /*#__PURE__*/ _react.createElement("span", {
+        className: classes.denominator
+    }, (0, _localeutil.convertToLocaleString)(props.ratio[1], props.culture))))), !!props.descriptionMessage && /*#__PURE__*/ _react.createElement("div", {
+        className: classes.descriptionMessage
+    }, props.descriptionMessage)))));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function _multiValueCallout() {
+        var _yValueHoverSubCountsExists1;
+        const yValueHoverSubCountsExists = (_yValueHoverSubCountsExists1 = _yValueHoverSubCountsExists(props.YValueHover)) !== null && _yValueHoverSubCountsExists1 !== void 0 ? _yValueHoverSubCountsExists1 : false;
+        return /*#__PURE__*/ _react.createElement("div", {
+            className: classes.calloutContentRoot
+        }, /*#__PURE__*/ _react.createElement("div", {
+            className: classes.calloutDateTimeContainer,
+            style: yValueHoverSubCountsExists ? {
+                marginBottom: '11px'
+            } : {}
+        }, /*#__PURE__*/ _react.createElement("div", {
+            className: classes.calloutContentX,
+            ...(0, _index.getAccessibleDataObject)(props.xAxisCalloutAccessibilityData, 'text', false)
+        }, (0, _localeutil.convertToLocaleString)(props.hoverXValue, props.culture))), /*#__PURE__*/ _react.createElement("div", {
+            style: yValueHoverSubCountsExists ? {
+                display: 'flex'
+            } : {}
+        }, props.YValueHover && props.YValueHover.map((yValue, index, yValues)=>{
+            const isLast = index + 1 === yValues.length;
+            const { shouldDrawBorderBottom = false } = yValue;
+            return /*#__PURE__*/ _react.createElement("div", {
+                ...(0, _index.getAccessibleDataObject)(yValue.callOutAccessibilityData, 'text', false),
+                key: `callout-content-${index}`,
+                style: yValueHoverSubCountsExists ? {
+                    display: 'inline-block',
+                    ...shouldDrawBorderBottom && {
+                        borderBottom: `1px solid ${_reacttheme.tokens.colorNeutralStroke2}`,
+                        paddingBottom: '10px'
+                    }
+                } : {
+                    ...shouldDrawBorderBottom && {
+                        borderBottom: `1px solid ${_reacttheme.tokens.colorNeutralStroke2}`,
+                        paddingBottom: '10px'
+                    }
+                }
+            }, _getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast));
+        }), !!props.descriptionMessage && /*#__PURE__*/ _react.createElement("div", {
+            className: classes.descriptionMessage
+        }, props.descriptionMessage)));
+    }
+    function _yValueHoverSubCountsExists(yValueHover) {
+        return yValueHover && yValueHover.some((yValue)=>yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string');
+    }
+    function _getCalloutContent(xValue, index, yValueHoverSubCountsExists, isLast) {
+        const marginStyle = isLast ? {} : {
+            marginRight: '16px'
+        };
+        const toDrawShape = xValue.index !== undefined && xValue.index !== -1;
+        const { culture } = props;
+        const yValue = (0, _localeutil.convertToLocaleString)(xValue.y, culture);
+        if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {
+            var _xValue_y;
+            return /*#__PURE__*/ _react.createElement("div", {
+                style: yValueHoverSubCountsExists ? marginStyle : {}
+            }, yValueHoverSubCountsExists && /*#__PURE__*/ _react.createElement("div", {
+                className: "ms-fontWeight-semibold",
+                style: {
+                    fontSize: '12pt'
+                }
+            }, xValue.legend, " (", yValue, ")"), /*#__PURE__*/ _react.createElement("div", {
+                id: `${index}_${xValue.y}`,
+                className: classes.calloutBlockContainer,
+                style: {
+                    marginTop: props.XValue ? '13px' : 'unset',
+                    ...!toDrawShape ? {
+                        borderLeft: `4px solid ${xValue.color}`
+                    } : {}
+                }
+            }, toDrawShape && /*#__PURE__*/ _react.createElement(_shape.Shape, {
+                svgProps: {
+                    className: classes.shapeStyles
+                },
+                pathProps: {
+                    fill: xValue.color
+                },
+                shape: _index.Points[xValue.index % Object.keys(_index.pointTypes).length]
+            }), /*#__PURE__*/ _react.createElement("div", {
+                className: (0, _react1.mergeClasses)(classes.calloutBlockContainer, toDrawShape ? classes.calloutBlockContainertoDrawShapetrue : classes.calloutBlockContainertoDrawShapefalse)
+            }, /*#__PURE__*/ _react.createElement("div", {
+                className: classes.calloutlegendText
+            }, " ", xValue.legend), /*#__PURE__*/ _react.createElement("div", {
+                className: classes.calloutContentY
+            }, (0, _localeutil.convertToLocaleString)(xValue.yAxisCalloutData ? xValue.yAxisCalloutData : (_xValue_y = xValue.y) !== null && _xValue_y !== void 0 ? _xValue_y : xValue.data, culture)))));
+        } else {
+            const subcounts = xValue.yAxisCalloutData;
+            return /*#__PURE__*/ _react.createElement("div", {
+                style: marginStyle
+            }, /*#__PURE__*/ _react.createElement("div", {
+                className: "ms-fontWeight-semibold",
+                style: {
+                    fontSize: '12pt'
+                }
+            }, xValue.legend, " (", yValue, ")"), Object.keys(subcounts).map((subcountName)=>{
+                return /*#__PURE__*/ _react.createElement("div", {
+                    key: subcountName,
+                    className: classes.calloutBlockContainer
+                }, /*#__PURE__*/ _react.createElement("div", {
+                    className: classes.calloutlegendText
+                }, " ", (0, _localeutil.convertToLocaleString)(subcountName, culture)), /*#__PURE__*/ _react.createElement("div", {
+                    className: classes.calloutContentY,
+                    style: {
+                        color: props.color ? props.color : _reacttheme.tokens.colorNeutralForeground1
+                    }
+                }, (0, _localeutil.convertToLocaleString)(subcounts[subcountName], culture)));
+            }));
+        }
+    }
+});
+ChartPopover.displayName = 'ChartPopover';

package/lib-commonjs/components/CommonComponents/ChartPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ChartPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { mergeClasses } from '@griffel/react';\nimport type { PositioningVirtualElement } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { useId } from '@fluentui/react-utilities';\nimport { getAccessibleDataObject, Points, pointTypes } from '../../utilities/index';\nimport { convertToLocaleString } from '../../utilities/locale-util';\nimport { Shape } from '../Legends/shape';\nimport { usePopoverStyles_unstable } from './useChartPopoverStyles.styles';\nimport { YValueHover } from './CartesianChart.types';\nimport { LegendShape } from '../Legends/Legends.types';\nimport { ChartPopoverProps } from './ChartPopover.types';\n\n/* This component is a wrapper over Popover component which implements the logic for rendering popovers for any chart\ncombining the logic for Callout and ChartHoverCard in v8 charts. */\nexport const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.forwardRef<\n  HTMLDivElement,\n  ChartPopoverProps\n>((props, forwardedRef) => {\n  const virtualElement: PositioningVirtualElement = {\n    getBoundingClientRect: () => ({\n      top: props.clickPosition!.y,\n      left: props.clickPosition!.x,\n      right: props.clickPosition!.x,\n      bottom: props.clickPosition!.y,\n      x: props.clickPosition!.x,\n      y: props.clickPosition!.y,\n      width: 0,\n      height: 0,\n    }),\n  };\n  props = { ...props, ...props.customCallout?.customCalloutProps };\n  const classes = usePopoverStyles_unstable(props);\n  const legend = props.xCalloutValue ? props.xCalloutValue : props.legend;\n  const YValue = props.yCalloutValue ? props.yCalloutValue : props.YValue;\n  return (\n    <div id={useId('callout')} ref={forwardedRef} className={classes.calloutContainer}>\n      <Popover\n        positioning={{ target: virtualElement, autoSize: 'always', offset: 20, coverTarget: false }}\n        open={props.isPopoverOpen}\n        inline\n      >\n        <PopoverSurface>\n          {/** Given custom callout, then it will render */}\n          {props.customCallout && props.customCallout.customizedCallout && props.customCallout.customizedCallout}\n          {/** single x point its corresponding y points of all the bars/lines in chart will render in callout */}\n          {(!props.customCallout || !props.customCallout.customizedCallout) &&\n            props.isCalloutForStack &&\n            _multiValueCallout()}\n          {/** single x point its corresponding y point of single line/bar in the chart will render in callout */}\n          {(!props.customCallout || !props.customCallout.customizedCallout) && !props.isCalloutForStack && (\n            <div className={classes.calloutContentRoot}>\n              <div className={classes.calloutDateTimeContainer}>\n                <div className={classes.calloutContentX}>{props.XValue} </div>\n                {/*TO DO  if we add time for callout then will use this */}\n                {/* <div className={classNames.calloutContentX}>07:00am</div> */}\n              </div>\n              <div\n                className={classes.calloutInfoContainer}\n                style={{\n                  ...(props.ratio && {\n                    display: 'flex',\n                    alignItems: 'flex-end',\n                  }),\n                  borderLeft: `4px solid ${props.color}`,\n                }}\n              >\n                <div className={classes.calloutBlockContainer}>\n                  <div className={classes.calloutlegendText}>{convertToLocaleString(legend, props.culture)}</div>\n                  <div\n                    className={classes.calloutContentY}\n                    style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n                  >\n                    {convertToLocaleString(YValue, props.culture)}\n                  </div>\n                </div>\n                {!!props.ratio && (\n                  <div className={classes.ratio}>\n                    <>\n                      <span className={classes.numerator}>{convertToLocaleString(props.ratio[0], props.culture)}</span>/\n                      <span className={classes.denominator}>\n                        {convertToLocaleString(props.ratio[1], props.culture)}\n                      </span>\n                    </>\n                  </div>\n                )}\n              </div>\n              {!!props.descriptionMessage && (\n                <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>\n              )}\n            </div>\n          )}\n        </PopoverSurface>\n      </Popover>\n    </div>\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  function _multiValueCallout() {\n    const yValueHoverSubCountsExists: boolean = _yValueHoverSubCountsExists(props.YValueHover) ?? false;\n    return (\n      <div className={classes.calloutContentRoot}>\n        <div\n          className={classes.calloutDateTimeContainer}\n          style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}\n        >\n          <div\n            className={classes.calloutContentX}\n            {...getAccessibleDataObject(props!.xAxisCalloutAccessibilityData, 'text', false)}\n          >\n            {convertToLocaleString(props!.hoverXValue, props.culture)}\n          </div>\n        </div>\n        <div style={yValueHoverSubCountsExists ? { display: 'flex' } : {}}>\n          {props!.YValueHover &&\n            props!.YValueHover.map((yValue: YValueHover, index: number, yValues: YValueHover[]) => {\n              const isLast: boolean = index + 1 === yValues.length;\n              const { shouldDrawBorderBottom = false } = yValue;\n              return (\n                <div\n                  {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}\n                  key={`callout-content-${index}`}\n                  style={\n                    yValueHoverSubCountsExists\n                      ? {\n                          display: 'inline-block',\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                      : {\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                  }\n                >\n                  {_getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}\n                </div>\n              );\n            })}\n          {!!props.descriptionMessage && <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>}\n        </div>\n      </div>\n    );\n  }\n\n  function _yValueHoverSubCountsExists(yValueHover?: YValueHover[]): boolean | undefined {\n    return (\n      yValueHover &&\n      yValueHover.some(\n        (yValue: {\n          legend?: string;\n          y?: number;\n          color?: string;\n          yAxisCalloutData?: string | { [id: string]: number };\n        }) => yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string',\n      )\n    );\n  }\n\n  function _getCalloutContent(\n    xValue: YValueHover,\n    index: number,\n    yValueHoverSubCountsExists: boolean,\n    isLast: boolean,\n  ): React.ReactNode {\n    const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };\n    const toDrawShape = xValue.index !== undefined && xValue.index !== -1;\n    const { culture } = props;\n    const yValue = convertToLocaleString(xValue.y, culture);\n    if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {\n      return (\n        <div style={yValueHoverSubCountsExists ? marginStyle : {}}>\n          {yValueHoverSubCountsExists && (\n            <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n              {xValue.legend!} ({yValue})\n            </div>\n          )}\n          <div\n            id={`${index}_${xValue.y}`}\n            className={classes.calloutBlockContainer}\n            style={{\n              marginTop: props.XValue ? '13px' : 'unset',\n              ...(!toDrawShape\n                ? {\n                    borderLeft: `4px solid ${xValue.color}`,\n                  }\n                : {}),\n            }}\n          >\n            {toDrawShape && (\n              <Shape\n                svgProps={{\n                  className: classes.shapeStyles,\n                }}\n                pathProps={{ fill: xValue.color }}\n                shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}\n              />\n            )}\n            <div\n              className={mergeClasses(\n                classes.calloutBlockContainer,\n                toDrawShape\n                  ? classes.calloutBlockContainertoDrawShapetrue\n                  : classes.calloutBlockContainertoDrawShapefalse,\n              )}\n            >\n              <div className={classes.calloutlegendText}> {xValue.legend}</div>\n              <div className={classes.calloutContentY}>\n                {convertToLocaleString(\n                  xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y ?? xValue.data,\n                  culture,\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    } else {\n      const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };\n      return (\n        <div style={marginStyle}>\n          <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n            {xValue.legend!} ({yValue})\n          </div>\n          {Object.keys(subcounts).map((subcountName: string) => {\n            return (\n              <div key={subcountName} className={classes.calloutBlockContainer}>\n                <div className={classes.calloutlegendText}> {convertToLocaleString(subcountName, culture)}</div>\n                <div\n                  className={classes.calloutContentY}\n                  style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n                >\n                  {convertToLocaleString(subcounts[subcountName], culture)}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      );\n    }\n  }\n});\nChartPopover.displayName = 'ChartPopover';\n"],"names":["ChartPopover","React","forwardRef","props","forwardedRef","virtualElement","getBoundingClientRect","top","clickPosition","y","left","x","right","bottom","width","height","customCallout","customCalloutProps","classes","usePopoverStyles_unstable","legend","xCalloutValue","YValue","yCalloutValue","createElement","div","id","useId","ref","className","calloutContainer","Popover","positioning","target","autoSize","offset","coverTarget","open","isPopoverOpen","inline","PopoverSurface","customizedCallout","isCalloutForStack","_multiValueCallout","calloutContentRoot","calloutDateTimeContainer","calloutContentX","XValue","calloutInfoContainer","style","ratio","display","alignItems","borderLeft","color","calloutBlockContainer","calloutlegendText","convertToLocaleString","culture","calloutContentY","tokens","colorNeutralForeground1","Fragment","span","numerator","denominator","descriptionMessage","_yValueHoverSubCountsExists","yValueHoverSubCountsExists","YValueHover","marginBottom","getAccessibleDataObject","xAxisCalloutAccessibilityData","hoverXValue","map","yValue","index","yValues","isLast","length","shouldDrawBorderBottom","callOutAccessibilityData","key","borderBottom","colorNeutralStroke2","paddingBottom","_getCalloutContent","yValueHover","some","yAxisCalloutData","xValue","marginStyle","marginRight","toDrawShape","undefined","fontSize","marginTop","Shape","svgProps","shapeStyles","pathProps","fill","shape","Points","Object","keys","pointTypes","mergeClasses","calloutBlockContainertoDrawShapetrue","calloutBlockContainertoDrawShapefalse","data","subcounts","subcountName","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/CommonComponents/ChartPopover.types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ChartPopover.types.ts"],"sourcesContent":["import { YValueHover } from '../../index';\n\nexport interface ChartPopoverProps {\n  clickPosition?: { x: number; y: number };\n  isPopoverOpen?: boolean;\n  xCalloutValue?: string;\n  legend?: string | number | Date;\n  yCalloutValue?: string;\n  YValue?: string | number | Date;\n  XValue?: string;\n  color?: string;\n  culture?: string;\n  customCallout?: {\n    customizedCallout?: JSX.Element;\n    customCalloutProps?: ChartPopoverProps;\n  };\n  isCalloutForStack?: boolean;\n  xAxisCalloutAccessibilityData?: { ariaLabel?: string; data?: string };\n  hoverXValue?: string | number;\n  YValueHover?: YValueHover[];\n  descriptionMessage?: string;\n  ratio?: [number, number];\n  isCartesian?: boolean;\n}\n\nexport interface PopoverComponentStyles {\n  calloutContentRoot: string;\n  calloutDateTimeContainer: string;\n  calloutContentX: string;\n  calloutBlockContainer: string;\n  calloutBlockContainertoDrawShapefalse: string;\n  calloutBlockContainertoDrawShapetrue: string;\n  shapeStyles: string;\n  calloutlegendText: string;\n  calloutContentY: string;\n  descriptionMessage: string;\n  ratio: string;\n  numerator: string;\n  denominator: string;\n  calloutInfoContainer: string;\n  calloutContainer: string;\n}\n"],"names":[],"rangeMappings":"","mappings":""}

package/lib-commonjs/components/CommonComponents/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./CartesianChart"), exports);
+_export_star._(require("./CartesianChart.types"), exports);
+_export_star._(require("./ChartPopover"), exports);
+_export_star._(require("./ChartPopover.types"), exports);

package/lib-commonjs/components/CommonComponents/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CartesianChart';\nexport * from './CartesianChart.types';\nexport * from './ChartPopover';\nexport * from './ChartPopover.types';\n"],"names":[],"rangeMappings":";;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA"}