@fluentui/react-charts 9.3.13 → 9.3.15

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Legends/Legends.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { CustomPoints, Points } from '../../utilities/utilities';\n\n/**\n * @public\n * Legends styles\n * {@docCategory Legends}\n */\nexport interface LegendsStyles {\n  /**\n   * Style set for the root of the legend component\n   */\n  root?: string;\n\n  /**\n   * Style set for Legend. This is a wrapping class for text of legend and the rectange box that represents a legend\n   */\n  legend?: string;\n\n  /**\n   * Style set for the rectangle that represents a legend\n   */\n  rect?: string;\n\n  /**\n   * styles set for the shape that represents a legend\n   */\n  shape?: string;\n\n  /**\n   * Style set for the triangle that represents a legend\n   */\n  triangle?: string;\n\n  /**\n   * Style for the legend text\n   */\n  text?: string;\n\n  /**\n   * Style for the legend text\n   */\n  hoverChange?: string;\n\n  /**\n   * Style for the area that is resizable\n   */\n  resizableArea?: string;\n\n  /*\n   * Style for the container that holds the legend and any optional JSX annotation from client is used\n   */\n  legendContainer?: string;\n\n  /**\n   * Style for the annotation that is used in the legend\n   */\n  annotation?: string;\n}\n\n/**\n * @public\n * ILegend interface\n * {@docCategory Legends}\n */\nexport interface Legend {\n  /**\n   * Defines the title of the legend\n   */\n  title: string;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  action?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverAction?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon moving the mouse away from the legend\n   */\n  onMouseOutAction?: (isLegendFocused?: boolean) => void;\n\n  /**\n   * The color for the legend\n   */\n  color: string;\n\n  /**\n   * The opacity of the legend color\n   */\n  opacity?: number;\n\n  /**\n   * The shape for the legend\n   */\n  shape?: LegendShape;\n\n  /**\n   * Indicated whether or not to apply stripe pattern\n   */\n  stripePattern?: boolean;\n\n  /**\n   * Indicates if the legend belongs to a line in the Bar Chart\n   */\n  isLineLegendInBarChart?: boolean;\n\n  /*\n   *  native button props for the legend button\n   */\n  nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n  /**\n   * The annotation for the legend, function returning a React node\n   */\n  legendAnnotation?: () => React.ReactNode;\n}\n\n/**\n * @public\n * Legend style properties\n * {@docCategory Legends}\n */\nexport interface LegendStyleProps {\n  className?: string;\n  colorOnSelectedState?: string;\n  borderColor?: string;\n  opacity?: number;\n  overflow?: boolean;\n  stripePattern?: boolean;\n  isLineLegendInBarChart?: boolean;\n}\n\n/**\n * @public\n * Legend properties\n * {@docCategory Legends}\n */\nexport interface LegendsProps {\n  /**\n   * Prop that takes list of legends\n   */\n  legends: Legend[];\n\n  /**\n   * Additional CSS class(es) to apply to the legneds component.\n   */\n  className?: string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: LegendsStyles;\n\n  /**\n   * This prop makes the legends component align itself to the center in the container it is sitting in\n   */\n  centerLegends?: boolean;\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  enabledWrapLines?: boolean;\n\n  /**\n   * style for the overflow component\n   */\n  overflowStyles?: React.CSSProperties;\n\n  /**\n   * text for overflow legends string\n   */\n  overflowText?: string;\n\n  /**\n   * prop that decides if legends are focusable\n   * @default true\n   */\n  allowFocusOnLegends?: boolean;\n\n  /**\n   * prop that decide if we can select multiple legends or single legend at a time\n   * @default false\n   */\n  canSelectMultipleLegends?: boolean;\n\n  /**\n   * Callback issued when the selected option changes.\n   */\n  onChange?: (selectedLegends: string[], event: React.MouseEvent<HTMLButtonElement>, currentLegend?: Legend) => void;\n\n  /**\n   * Keys (title) that will be initially used to set selected items. This prop is used for multi-select scenarios when\n   * canSelectMultipleLegends is true; for single-select, use defaultSelectedLegend.\n   *\n   * Updating this prop does not change the selection after the component has been initialized. For controlled\n   * selections, use selectedLegends instead.\n   *\n   * @see selectedLegends for setting the selected legends in controlled mode.\n   * @see defaultSelectedLegend for setting the initially selected legend when canSelectMultipleLegends is false.\n   */\n  defaultSelectedLegends?: string[];\n\n  /**\n   * Key that will be initially used to set selected item. This prop is used for single-select scenarios when\n   * canSelectMultipleLegends is false or unspecified; for multi-select, use defaultSelectedLegends.\n   *\n   * Updating this prop does not change the selection after the component has been initialized. For controlled\n   * selections, use selectedLegend instead.\n   *\n   * @see selectedLegend for setting the selected legend in controlled mode.\n   * @see defaultSelectedLegends for setting the initially selected legends when canSelectMultipleLegends is true.\n   */\n  defaultSelectedLegend?: string;\n\n  /**\n   * Keys (title) that will be used to set selected items in multi-select scenarios when canSelectMultipleLegends is\n   * true. For single-select, use selectedLegend.\n   *\n   * When this prop is provided, the component is controlled and does not automatically update the selection based on\n   * user interactions; the parent component must update the value passed to this property by handling the onChange\n   * event.\n   *\n   * @see defaultSelectedLegends for setting the initially-selected legends in uncontrolled mode.\n   * @see selectedLegends for setting the selected legends when `canSelectMultipleLegends` is `true`.\n   */\n  selectedLegends?: string[];\n\n  /**\n   * Key (title) that will be used to set the selected item in single-select scenarios when canSelectMultipleLegends is\n   * false or unspecified. For multi-select, use selectedLegends.\n   *\n   * When this prop is provided, the component is controlled and does not automatically update the selection based on\n   * user interactions; the parent component must update the value passed to this property by handling the onChange\n   * event.\n   *\n   * @see defaultSelectedLegend for setting the initially-selected legend in uncontrolled mode.\n   * @see selectedLegend for setting the selected legend when `canSelectMultipleLegends` is `false`.\n   */\n  selectedLegend?: string;\n\n  /**\n   * The shape for the legend.\n   */\n  shape?: LegendShape;\n\n  /**\n   * Callback to access the public methods and properties of the component.\n   */\n  legendRef?: React.Ref<LegendContainer>;\n}\n\n/**\n * @public\n * The shape for the legend\n * default: show the rect legend\n * triangle: show the triangle legend\n * {@docCategory Legends}\n */\nexport type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints;\n\n/**\n * {@docCategory Legends}\n */\nexport interface LegendContainer {\n  toSVG: (\n    svgWidth: number,\n    isRTL?: boolean,\n  ) => {\n    node: SVGSVGElement | null;\n    width: number;\n    height: number;\n  };\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/Legends/Legends.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { CustomPoints, Points } from '../../utilities/utilities';\n\n/**\n * Legends styles\n * {@docCategory Legends}\n *\n * @public\n */\nexport interface LegendsStyles {\n  /**\n   * Style set for the root of the legend component\n   */\n  root?: string;\n\n  /**\n   * Style set for Legend. This is a wrapping class for text of legend and the rectange box that represents a legend\n   */\n  legend?: string;\n\n  /**\n   * Style set for the rectangle that represents a legend\n   */\n  rect?: string;\n\n  /**\n   * styles set for the shape that represents a legend\n   */\n  shape?: string;\n\n  /**\n   * Style set for the triangle that represents a legend\n   */\n  triangle?: string;\n\n  /**\n   * Style for the legend text\n   */\n  text?: string;\n\n  /**\n   * Style for the legend text\n   */\n  hoverChange?: string;\n\n  /**\n   * Style for the area that is resizable\n   */\n  resizableArea?: string;\n\n  /*\n   * Style for the container that holds the legend and any optional JSX annotation from client is used\n   */\n  legendContainer?: string;\n\n  /**\n   * Style for the annotation that is used in the legend\n   */\n  annotation?: string;\n}\n\n/**\n * ILegend interface\n * {@docCategory Legends}\n *\n * @public\n */\nexport interface Legend {\n  /**\n   * Defines the title of the legend\n   */\n  title: string;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  action?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverAction?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon moving the mouse away from the legend\n   */\n  onMouseOutAction?: (isLegendFocused?: boolean) => void;\n\n  /**\n   * The color for the legend\n   */\n  color: string;\n\n  /**\n   * The opacity of the legend color\n   */\n  opacity?: number;\n\n  /**\n   * The shape for the legend\n   */\n  shape?: LegendShape;\n\n  /**\n   * Indicated whether or not to apply stripe pattern\n   */\n  stripePattern?: boolean;\n\n  /**\n   * Indicates if the legend belongs to a line in the Bar Chart\n   */\n  isLineLegendInBarChart?: boolean;\n\n  /*\n   *  native button props for the legend button\n   */\n  nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n  /**\n   * The annotation for the legend, function returning a React node\n   */\n  legendAnnotation?: () => React.ReactNode;\n}\n\n/**\n * Legend style properties\n * {@docCategory Legends}\n *\n * @public\n */\nexport interface LegendStyleProps {\n  className?: string;\n  colorOnSelectedState?: string;\n  borderColor?: string;\n  opacity?: number;\n  overflow?: boolean;\n  stripePattern?: boolean;\n  isLineLegendInBarChart?: boolean;\n}\n\n/**\n * Legend properties\n * {@docCategory Legends}\n *\n * @public\n */\nexport interface LegendsProps {\n  /**\n   * Prop that takes list of legends\n   */\n  legends: Legend[];\n\n  /**\n   * Additional CSS class(es) to apply to the legneds component.\n   */\n  className?: string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: LegendsStyles;\n\n  /**\n   * This prop makes the legends component align itself to the center in the container it is sitting in\n   */\n  centerLegends?: boolean;\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  enabledWrapLines?: boolean;\n\n  /**\n   * style for the overflow component\n   */\n  overflowStyles?: React.CSSProperties;\n\n  /**\n   * text for overflow legends string\n   */\n  overflowText?: string;\n\n  /**\n   * prop that decides if legends are focusable\n   * @default true\n   */\n  allowFocusOnLegends?: boolean;\n\n  /**\n   * prop that decide if we can select multiple legends or single legend at a time\n   * @default false\n   */\n  canSelectMultipleLegends?: boolean;\n\n  /**\n   * Callback issued when the selected option changes.\n   */\n  onChange?: (selectedLegends: string[], event: React.MouseEvent<HTMLButtonElement>, currentLegend?: Legend) => void;\n\n  /**\n   * Keys (title) that will be initially used to set selected items. This prop is used for multi-select scenarios when\n   * canSelectMultipleLegends is true; for single-select, use defaultSelectedLegend.\n   *\n   * Updating this prop does not change the selection after the component has been initialized. For controlled\n   * selections, use selectedLegends instead.\n   *\n   * @see selectedLegends for setting the selected legends in controlled mode.\n   * @see defaultSelectedLegend for setting the initially selected legend when canSelectMultipleLegends is false.\n   */\n  defaultSelectedLegends?: string[];\n\n  /**\n   * Key that will be initially used to set selected item. This prop is used for single-select scenarios when\n   * canSelectMultipleLegends is false or unspecified; for multi-select, use defaultSelectedLegends.\n   *\n   * Updating this prop does not change the selection after the component has been initialized. For controlled\n   * selections, use selectedLegend instead.\n   *\n   * @see selectedLegend for setting the selected legend in controlled mode.\n   * @see defaultSelectedLegends for setting the initially selected legends when canSelectMultipleLegends is true.\n   */\n  defaultSelectedLegend?: string;\n\n  /**\n   * Keys (title) that will be used to set selected items in multi-select scenarios when canSelectMultipleLegends is\n   * true. For single-select, use selectedLegend.\n   *\n   * When this prop is provided, the component is controlled and does not automatically update the selection based on\n   * user interactions; the parent component must update the value passed to this property by handling the onChange\n   * event.\n   *\n   * @see defaultSelectedLegends for setting the initially-selected legends in uncontrolled mode.\n   * @see selectedLegends for setting the selected legends when `canSelectMultipleLegends` is `true`.\n   */\n  selectedLegends?: string[];\n\n  /**\n   * Key (title) that will be used to set the selected item in single-select scenarios when canSelectMultipleLegends is\n   * false or unspecified. For multi-select, use selectedLegends.\n   *\n   * When this prop is provided, the component is controlled and does not automatically update the selection based on\n   * user interactions; the parent component must update the value passed to this property by handling the onChange\n   * event.\n   *\n   * @see defaultSelectedLegend for setting the initially-selected legend in uncontrolled mode.\n   * @see selectedLegend for setting the selected legend when `canSelectMultipleLegends` is `false`.\n   */\n  selectedLegend?: string;\n\n  /**\n   * The shape for the legend.\n   */\n  shape?: LegendShape;\n\n  /**\n   * Callback to access the public methods and properties of the component.\n   */\n  legendRef?: React.Ref<LegendContainer>;\n}\n\n/**\n * The shape for the legend\n * default: show the rect legend\n * triangle: show the triangle legend\n * {@docCategory Legends}\n *\n * @public\n */\nexport type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints;\n\n/**\n * {@docCategory Legends}\n */\nexport interface LegendContainer {\n  toSVG: (\n    svgWidth: number,\n    isRTL?: boolean,\n  ) => {\n    node: SVGSVGElement | null;\n    width: number;\n    height: number;\n  };\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

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

@@ -451,7 +451,14 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                     }, /*#__PURE__*/ _react.createElement("circle", {
                         id: circleId,
                         key: circleId,
-                        r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : activePoint === circleId ? 5.5 : 3.5,
+                        r: (0, _index1.calculateMarkerRadius)({
+                            pointMarkerSize: currentMarkerSize,
+                            minMarkerSize: 0,
+                            maxMarkerSize,
+                            extraMaxPixels,
+                            isContinuousXY: true,
+                            isActive: activePoint === circleId
+                        }),
                         cx: xPoint,
                         cy: yPoint,
                         fill: activePoint === circleId ? _reacttheme.tokens.colorNeutralBackground1 : lineColor,
@@ -583,7 +590,14 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                             var _points_i_data_k_text;
                             pointsForLine.push(/*#__PURE__*/ _react.createElement("circle", {
                                 key: `${_circleId}_${i}_${k}_marker`,
-                                r: markerSize ? markerSize * extraMaxPixels * 0.3 / maxMarkerSize : activePoint === _circleId ? 5.5 : 3.5,
+                                r: (0, _index1.calculateMarkerRadius)({
+                                    pointMarkerSize: markerSize,
+                                    minMarkerSize: 0,
+                                    maxMarkerSize,
+                                    extraMaxPixels,
+                                    isContinuousXY: true,
+                                    isActive: activePoint === _circleId
+                                }),
                                 cx: xPoint,
                                 cy: yPoint,
                                 fill: activePoint === _circleId ? _reacttheme.tokens.colorNeutralBackground1 : perPointColor || ((_points_i = _points[i]) === null || _points_i === void 0 ? void 0 : _points_i.color) || lineColor,
@@ -630,7 +644,14 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                         pointsForLine.push(((_points_i_lineOptions15 = _points[i].lineOptions) === null || _points_i_lineOptions15 === void 0 ? void 0 : (_points_i_lineOptions_mode3 = _points_i_lineOptions15.mode) === null || _points_i_lineOptions_mode3 === void 0 ? void 0 : _points_i_lineOptions_mode3.includes('markers')) || supportsTextMode ? /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("circle", {
                             id: circleId,
                             key: circleId,
-                            r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
+                            r: (0, _index1.calculateMarkerRadius)({
+                                pointMarkerSize: currentMarkerSize,
+                                minMarkerSize: 0,
+                                maxMarkerSize,
+                                extraMaxPixels,
+                                isContinuousXY: true,
+                                isActive: activePoint === circleId
+                            }),
                             cx: xPoint1,
                             cy: yPoint1,
                             tabIndex: isLegendSelected ? 0 : undefined,
@@ -649,7 +670,13 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                         }), !_isScatterPolar && supportsTextMode && text && /*#__PURE__*/ _react.createElement("text", {
                             key: `${circleId}-label`,
                             x: xPoint1,
-                            y: yPoint1 + Math.max(currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4, 4) + 12,
+                            y: yPoint1 + (0, _index1.calculateMarkerRadius)({
+                                pointMarkerSize: currentMarkerSize,
+                                minMarkerSize: 0,
+                                maxMarkerSize,
+                                extraMaxPixels,
+                                isContinuousXY: true
+                            }) + 12,
                             className: classes.markerLabel,
                             opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01
                         }, text)) : /*#__PURE__*/ _react.createElement("path", {
@@ -691,7 +718,14 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                             }, ((_points_i_lineOptions17 = _points[i].lineOptions) === null || _points_i_lineOptions17 === void 0 ? void 0 : (_points_i_lineOptions_mode5 = _points_i_lineOptions17.mode) === null || _points_i_lineOptions_mode5 === void 0 ? void 0 : _points_i_lineOptions_mode5.includes('markers')) || lastSupportsTextMode ? /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("circle", {
                                 id: lastCircleId,
                                 key: lastCircleId,
-                                r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
+                                r: (0, _index1.calculateMarkerRadius)({
+                                    pointMarkerSize: currentMarkerSize,
+                                    minMarkerSize: 0,
+                                    maxMarkerSize,
+                                    extraMaxPixels,
+                                    isContinuousXY: true,
+                                    isActive: activePoint === lastCircleId
+                                }),
                                 cx: xPoint2,
                                 cy: yPoint2,
                                 tabIndex: isLegendSelected ? 0 : undefined,
@@ -710,7 +744,13 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                             }), !_isScatterPolar && lastSupportsTextMode && lastText && /*#__PURE__*/ _react.createElement("text", {
                                 key: `${lastCircleId}-label`,
                                 x: xPoint2,
-                                y: yPoint2 + Math.max(currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4, 4) + 12,
+                                y: yPoint2 + (0, _index1.calculateMarkerRadius)({
+                                    pointMarkerSize: currentMarkerSize,
+                                    minMarkerSize: 0,
+                                    maxMarkerSize,
+                                    extraMaxPixels,
+                                    isContinuousXY: true
+                                }) + 12,
                                 className: classes.markerLabel
                             }, text)) : /*#__PURE__*/ _react.createElement("path", {
                                 id: lastCircleId,