npm - @fluentui/react-charting - Versions diffs - 5.23.58 → 5.23.60 - Mend

@fluentui/react-charting 5.23.58 → 5.23.60

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 (186) hide show

package/lib-amd/components/Legends/Legends.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Legends.styles.js","sourceRoot":"../src/","sources":["components/Legends/Legends.styles.ts"],"names":[],"mappings":";;;;~~IAGO~~,IAAM,SAAS,GAAG,UAAC,KAAwB;;QACxC,IAAA,SAAS,GAA4C,KAAK,UAAjD,EAAE,KAAK,GAAqC,KAAK,MAA1C,EAAE,KAAmC,KAAK,uBAAV,EAA9B,sBAAsB,mBAAG,KAAK,KAAA,CAAW;QAC7D,IAAA,KAAqB,KAAM,EAAzB,OAAO,aAAA,EAAE,KAAK,WAAW,CAAC;QAClC,IAAM,OAAO,GAA2B;YACtC,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,SAAS;YACnB,iBAAiB,EAAE;gBACjB,YAAY,EAAE,KAAM,CAAC,cAAc,CAAC,WAAW;aAChD;YACD,WAAW,EAAE,aAAa;YAC1B,YAAY,EAAE,SAAS;SACxB,CAAC;QACF,OAAO;YACL,IAAI,EAAE;gBACJ;oBACE,UAAU,EAAE,QAAQ;oBACpB,KAAK,EAAE,MAAM;oBACb,UAAU,EAAE,QAAQ;oBACpB,MAAM,EAAE,eAAe;iBACxB;gBACD,SAAS;aACV;YACD,MAAM,EAAE;gBACN,IAAA,uBAAa,EAAC,KAAM,EAAE,OAAO,CAAC;gBAC9B;oBACE,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;oBACpB,MAAM,EAAE,SAAS;oBACjB,MAAM,EAAE,MAAM;oBACd,OAAO,EAAE,~~KAAK~~;~~oBACd~~,UAAU,EAAE,MAAM;oBAClB,aAAa,EAAE,YAAY;iBAC5B;aACF;YACD,IAAI,EAAE;gBACJ,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,OAAO,EAAE,oCAA6B,KAAK,CAAC,oBAAoB,eAAK,KAAK,CAAC,oBAAoB,MAAG;wBAClG,OAAO,EAAE,KAAK,CAAC,oBAAoB,KAAK,KAAM,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;qBAC5F;uBACF;gBACD,KAAK,EAAE,~~MAAM~~;~~gBACb~~,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,~~MAAM~~;~~gBAC/C~~,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,oBAAoB;gBACtE,WAAW,EAAE,~~KAAK~~;~~gBAClB~~,MAAM,EAAE,~~WAAW~~;~~gBACnB~~,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,CAAC,YAAY;gBACvF,OAAO,EAAE,KAAK,CAAC,aAAa;oBAC1B,CAAC,CAAC,6CAA6C;wBAC7C,0EAAmE,KAAK,CAAC,oBAAoB,mBAAS,KAAK,CAAC,oBAAoB,UAAO;oBACzI,CAAC,CAAC,EAAE;aACP;YACD,KAAK,EAAE;gBACL;oBACE,WAAW,EAAE,~~KAAK~~;~~iBACnB~~;aACF;YACD,QAAQ,EAAE;gBACR,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;gBACX,UAAU,EAAE,uBAAuB;gBACnC,WAAW,EAAE,uBAAuB;gBACpC,SAAS,EAAE,cAAc;gBACzB,cAAc,EAAE,KAAK,CAAC,oBAAoB;gBAC1C,WAAW,EAAE,KAAK;gBAClB,OAAO,EACL,KAAK,CAAC,oBAAoB,KAAK,KAAM,CAAC,cAAc,CAAC,gBAAgB;oBACnE,CAAC,CAAC,KAAK;oBACP,CAAC,CAAC,KAAK,CAAC,OAAO;wBACf,CAAC,CAAC,KAAK,CAAC,OAAO;wBACf,CAAC,CAAC,EAAE;gBACR,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,MAAM,EAAE,KAAK;wBACb,MAAM,EAAE,QAAQ;wBAChB,KAAK,EAAE,QAAQ;wBACf,QAAQ,EAAE,gCAAgC;wBAC1C,eAAe,EAAE,oCAA6B,KAAK,CAAC,oBAAoB,eAAK,KAAK,CAAC,oBAAoB,MAAG;qBACjG;uBACZ;aACF;YACD,IAAI,wCACC,KAAK,CAAC,KAAK,KACd,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,CAAC,QAAQ,EACrC,OAAO,~~EAAE~~,KAAK,CAAC,oBAAoB,KAAK,KAAM,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC,~~MAAM~~,CAAC,CAAC,CAAC,EAAE,~~GAC7F~~;YACD,WAAW,EAAE;gBACX,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,eAAe,EAAE,KAAM,CAAC,cAAc,CAAC,gBAAgB;gBACvD,WAAW,EAAE,KAAK;gBAClB,MAAM,EAAE,WAAW;gBACnB,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK;aACnE;YACD,2BAA2B,EAAE;gBAC3B,IAAA,uBAAa,EAAC,KAAM,EAAE,OAAO,CAAC;oDAE5B,MAAM,EAAE,SAAS,EACjB,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,CAAC,QAAQ,IAClC,KAAK,CAAC,KAAK,KACd,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,~~KAAK~~;~~aAEjB~~;YACD,aAAa,EAAE;gBACb,OAAO,EAAE,KAAK;aACf;YACD,kBAAkB,EAAE;gBAClB,eAAe,EAAE;oBACf,IAAI,EAAE,CAAC,IAAA,uBAAa,EAAC,KAAM,EAAE,OAAO,CAAC,CAAC;iBACvC;aACF;SACF,CAAC;IACJ,CAAC,CAAC;~~IAlHW~~,QAAA,SAAS,~~aAkHpB~~","sourcesContent":["import { ILegendsStyles, ILegendStyleProps } from './Legends.types';\nimport { HighContrastSelector, getFocusStyle, IGetFocusStylesOptions, IStyle } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: ILegendStyleProps): ILegendsStyles => {\n const { className, theme, isLineLegendInBarChart = false } = props;\n const { palette, fonts } = theme!;\n const options: IGetFocusStylesOptions = {\n inset: undefined,\n position: undefined,\n highContrastStyle: {\n outlineColor: theme!.semanticColors.focusBorder,\n },\n borderColor: 'transparent',\n outlineColor: undefined,\n };\n return {\n root: [\n {\n whiteSpace: 'nowrap',\n width: '100%',\n alignItems: 'center',\n margin: '-8px 0 0 -8px',\n },\n className,\n ],\n legend: [\n getFocusStyle(theme!, options),\n {\n display: 'flex',\n alignItems: 'center',\n cursor: 'pointer',\n border: 'none',\n padding: ~~'8px',\~~n background: 'none',\n textTransform: 'capitalize',\n },\n ],\n rect: {\n selectors: {\n [HighContrastSelector]: {\n content: `linear-gradient(to right, ${props.colorOnSelectedState}, ${props.colorOnSelectedState})`,\n opacity: props.colorOnSelectedState === theme!.semanticColors.buttonBackground ? '0.6' : '',\n },\n },\n width: ~~'12px',\~~n height: isLineLegendInBarChart ? '4px' : ~~'12px',\~~n backgroundColor: props.stripePattern ? '' : props.colorOnSelectedState,\n marginRight: ~~'8px',\~~n border: ~~'1px~~ solid~~',\~~n borderColor: props.borderColor ? props.borderColor : theme?.semanticColors.buttonBorder,\n content: props.stripePattern\n ? // eslint-disable-next-line @fluentui/max-len\n `repeating-linear-gradient(135deg, transparent, transparent 3px, ${props.colorOnSelectedState} 1px, ${props.colorOnSelectedState} 4px)`\n : '',\n },\n shape: [\n {\n marginRight: ~~'8px',\~~n },\n ],\n triangle: {\n width: '0',\n height: '0',\n borderLeft: '6px solid transparent',\n borderRight: '6px solid transparent',\n borderTop: '10.4px solid',\n borderTopColor: props.colorOnSelectedState,\n marginRight: '8px',\n opacity:\n props.colorOnSelectedState === theme!.semanticColors.buttonBackground\n ? '0.6'\n : props.opacity\n ? props.opacity\n : '',\n selectors: {\n [HighContrastSelector]: {\n border: '0px',\n height: '10.4px',\n width: '10.4px',\n clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n backgroundImage: `linear-gradient(to right, ${props.colorOnSelectedState}, ${props.colorOnSelectedState})`,\n } as IStyle,\n },\n },\n text: {\n ...fonts.small,\n lineHeight: '16px',\n color: theme?.semanticColors.bodyText,\n opacity: props.colorOnSelectedState === theme!.semanticColors.buttonBackground ? ~~'0.67'~~ : '',\n },\n hoverChange: {\n width: '12px',\n height: '12px',\n backgroundColor: theme!.semanticColors.buttonBackground,\n marginRight: '8px',\n border: '1px solid',\n borderColor: props.borderColor ? props.borderColor : palette.black,\n },\n overflowIndicationTextStyle: [\n getFocusStyle(theme!, options),\n {\n cursor: 'pointer',\n color: theme?.semanticColors.bodyText,\n ...fonts.small,\n lineHeight: '16px',\n padding: ~~'8px',\~~n },\n ],\n hoverCardRoot: {\n padding: '8px',\n },\n subComponentStyles: {\n hoverCardStyles: {\n host: [getFocusStyle(theme!, options)],\n },\n },\n };\n};\n"]}
1	+ {"version":3,"file":"Legends.styles.js","sourceRoot":"../src/","sources":["components/Legends/Legends.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { ILegendsStyles, ILegendStyleProps } from './Legends.types';\nimport { HighContrastSelector, getFocusStyle, IGetFocusStylesOptions, IStyle } from '@fluentui/react/lib/Styling';\n\n// Constants needed to create legends using SVG for image export\nexport const LEGEND_CONTAINER_MARGIN_TOP = 8;\nexport const LEGEND_CONTAINER_MARGIN_START = 12;\nexport const LEGEND_PADDING = 8;\nexport const LEGEND_HEIGHT = 32;\nexport const LEGEND_SHAPE_BORDER = 1;\nconst LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;\n// SVG strokes are drawn centered around the path, with half of the stroke width extending inward\n// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,\n// expand the shape accordingly.\nexport const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;\nexport const LEGEND_SHAPE_MARGIN_END = 8;\nexport const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;\n\nexport const getStyles = (props: ILegendStyleProps): ILegendsStyles => {\n const { className, theme, isLineLegendInBarChart = false } = props;\n const { palette, fonts } = theme!;\n const options: IGetFocusStylesOptions = {\n inset: undefined,\n position: undefined,\n highContrastStyle: {\n outlineColor: theme!.semanticColors.focusBorder,\n },\n borderColor: 'transparent',\n outlineColor: undefined,\n };\n return {\n root: [\n {\n whiteSpace: 'nowrap',\n width: '100%',\n alignItems: 'center',\n margin: '-8px 0 0 -8px',\n },\n className,\n ],\n legend: [\n getFocusStyle(theme!, options),\n {\n display: 'flex',\n alignItems: 'center',\n cursor: 'pointer',\n border: 'none',\n padding: `${LEGEND_PADDING}px`,\n background: 'none',\n textTransform: 'capitalize',\n },\n ],\n rect: {\n selectors: {\n [HighContrastSelector]: {\n content: `linear-gradient(to right, ${props.colorOnSelectedState}, ${props.colorOnSelectedState})`,\n opacity: props.colorOnSelectedState === theme!.semanticColors.buttonBackground ? '0.6' : '',\n },\n },\n width: `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,\n height: isLineLegendInBarChart ? '4px' : `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,\n backgroundColor: props.stripePattern ? '' : props.colorOnSelectedState,\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n border: `${LEGEND_SHAPE_BORDER}px solid`,\n borderColor: props.borderColor ? props.borderColor : theme?.semanticColors.buttonBorder,\n content: props.stripePattern\n ? // eslint-disable-next-line @fluentui/max-len\n `repeating-linear-gradient(135deg, transparent, transparent 3px, ${props.colorOnSelectedState} 1px, ${props.colorOnSelectedState} 4px)`\n : '',\n },\n shape: [\n {\n marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n },\n ],\n triangle: {\n width: '0',\n height: '0',\n borderLeft: '6px solid transparent',\n borderRight: '6px solid transparent',\n borderTop: '10.4px solid',\n borderTopColor: props.colorOnSelectedState,\n marginRight: '8px',\n opacity:\n props.colorOnSelectedState === theme!.semanticColors.buttonBackground\n ? '0.6'\n : props.opacity\n ? props.opacity\n : '',\n selectors: {\n [HighContrastSelector]: {\n border: '0px',\n height: '10.4px',\n width: '10.4px',\n clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n backgroundImage: `linear-gradient(to right, ${props.colorOnSelectedState}, ${props.colorOnSelectedState})`,\n } as IStyle,\n },\n },\n text: {\n ...fonts.small,\n lineHeight: '16px',\n color: theme?.semanticColors.bodyText,\n opacity:\n props.colorOnSelectedState === theme!.semanticColors.buttonBackground ? `${INACTIVE_LEGEND_TEXT_OPACITY}` : '',\n },\n hoverChange: {\n width: '12px',\n height: '12px',\n backgroundColor: theme!.semanticColors.buttonBackground,\n marginRight: '8px',\n border: '1px solid',\n borderColor: props.borderColor ? props.borderColor : palette.black,\n },\n overflowIndicationTextStyle: [\n getFocusStyle(theme!, options),\n {\n cursor: 'pointer',\n color: theme?.semanticColors.bodyText,\n ...fonts.small,\n lineHeight: '16px',\n padding: `${LEGEND_PADDING}px`,\n },\n ],\n hoverCardRoot: {\n padding: '8px',\n },\n subComponentStyles: {\n hoverCardStyles: {\n host: [getFocusStyle(theme!, options)],\n },\n },\n };\n};\n"]}

package/lib-amd/components/Legends/Legends.types.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
-import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 import { IHoverCardStyleProps, IHoverCardStyles } from '@fluentui/react/lib/HoverCard';
 import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';
 import { IFocusZoneProps } from '@fluentui/react-focus';
@@ -234,6 +234,10 @@ export interface ILegendsProps {
      * The shape for the legend.
      */
     shape?: LegendShape;
+    /**
+     * Callback to access the public methods and properties of the component.
+     */
+    ref?: IRefObject<ILegendContainer>;
 }
 /**
  * @public
@@ -243,3 +247,13 @@ export interface ILegendsProps {
  * {@docCategory Legends}
  */
 export type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints;
+/**
+ * {@docCategory Legends}
+ */
+export interface ILegendContainer {
+    toSVG: (svgWidth: number, isRTL?: boolean) => {
+        node: SVGGElement | null;
+        width: number;
+        height: number;
+    };
+}

package/lib-amd/components/Legends/Legends.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Legends.types.js","sourceRoot":"../src/","sources":["components/Legends/Legends.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IHoverCardStyleProps, IHoverCardStyles } from '@fluentui/react/lib/HoverCard';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { CustomPoints, Points } from '../../utilities/utilities';\n\nexport interface ILegendOverflowData {\n primary: ILegend[];\n\n overflow?: ILegend[];\n}\n\n/*\n @public\n * {@docCategory Legends}\n /\nexport interface ILegendSubComponentStyles {\n hoverCardStyles: IStyleFunctionOrObject<IHoverCardStyleProps, IHoverCardStyles>;\n}\n\n/\n @public\n * Legends styles\n * {@docCategory Legends}\n /\nexport interface ILegendsStyles {\n /\n Style set for the root of the legend component\n /\n root: IStyle;\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: IStyle;\n\n /\n Style set for the rectangle that represents a legend\n /\n rect: IStyle;\n\n /\n styles set for the shape that represents a legend\n /\n shape: IStyle;\n\n /\n Style set for the triangle that represents a legend\n /\n triangle: IStyle;\n\n /\n Style for the legend text\n /\n text: IStyle;\n\n /\n Style for the legend text\n /\n hoverChange: IStyle;\n\n /\n Style for the text that indicates the no.of legends that are in hovercard due to lack of space\n /\n overflowIndicationTextStyle: IStyle;\n\n /\n Style for the overflow container\n /\n hoverCardRoot: IStyle;\n\n /\n sub component styles\n /\n subComponentStyles: ILegendSubComponentStyles;\n}\n\n/\n @public\n * ILegend interface\n * {@docCategory Legends}\n /\nexport interface ILegend {\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/\n @public\n * Legend style properties\n * {@docCategory Legends}\n /\nexport interface ILegendStyleProps {\n theme?: ITheme;\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 ILegendsProps {\n /\n Prop that takes list of legends\n /\n legends: ILegend[];\n\n /\n Additional CSS class(es) to apply to the legneds component.\n /\n className?: string;\n\n /\n Theme (provided through customization.)\n /\n theme?: ITheme;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: IStyleFunctionOrObject<ILegendStyleProps, ILegendsStyles>;\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 props for the overflow set component\n /\n overflowProps?: Partial<IOverflowSetProps>;\n\n /\n focus zone props in hover card\n /\n focusZonePropsInHoverCard?: IFocusZoneProps;\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 Defines the function that is executed upon hiding of hover card\n * make sure to send prop when the prop is canSelectMultipleLegends is set to true\n * and empty the selected state legends\n /\n onLegendHoverCardLeave?: VoidFunction;\n\n /\n Callback issued when the selected option changes.\n /\n onChange?: (selectedLegends: string[], event: React.MouseEvent<HTMLButtonElement>, currentLegend?: ILegend) => 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/\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"]}
1	+ {"version":3,"file":"Legends.types.js","sourceRoot":"../src/","sources":["components/Legends/Legends.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IHoverCardStyleProps, IHoverCardStyles } from '@fluentui/react/lib/HoverCard';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { CustomPoints, Points } from '../../utilities/utilities';\n\nexport interface ILegendOverflowData {\n primary: ILegend[];\n\n overflow?: ILegend[];\n}\n\n/*\n @public\n * {@docCategory Legends}\n /\nexport interface ILegendSubComponentStyles {\n hoverCardStyles: IStyleFunctionOrObject<IHoverCardStyleProps, IHoverCardStyles>;\n}\n\n/\n @public\n * Legends styles\n * {@docCategory Legends}\n /\nexport interface ILegendsStyles {\n /\n Style set for the root of the legend component\n /\n root: IStyle;\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: IStyle;\n\n /\n Style set for the rectangle that represents a legend\n /\n rect: IStyle;\n\n /\n styles set for the shape that represents a legend\n /\n shape: IStyle;\n\n /\n Style set for the triangle that represents a legend\n /\n triangle: IStyle;\n\n /\n Style for the legend text\n /\n text: IStyle;\n\n /\n Style for the legend text\n /\n hoverChange: IStyle;\n\n /\n Style for the text that indicates the no.of legends that are in hovercard due to lack of space\n /\n overflowIndicationTextStyle: IStyle;\n\n /\n Style for the overflow container\n /\n hoverCardRoot: IStyle;\n\n /\n sub component styles\n /\n subComponentStyles: ILegendSubComponentStyles;\n}\n\n/\n @public\n * ILegend interface\n * {@docCategory Legends}\n /\nexport interface ILegend {\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/\n @public\n * Legend style properties\n * {@docCategory Legends}\n /\nexport interface ILegendStyleProps {\n theme?: ITheme;\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 ILegendsProps {\n /\n Prop that takes list of legends\n /\n legends: ILegend[];\n\n /\n Additional CSS class(es) to apply to the legneds component.\n /\n className?: string;\n\n /\n Theme (provided through customization.)\n /\n theme?: ITheme;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: IStyleFunctionOrObject<ILegendStyleProps, ILegendsStyles>;\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 props for the overflow set component\n /\n overflowProps?: Partial<IOverflowSetProps>;\n\n /\n focus zone props in hover card\n /\n focusZonePropsInHoverCard?: IFocusZoneProps;\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 Defines the function that is executed upon hiding of hover card\n * make sure to send prop when the prop is canSelectMultipleLegends is set to true\n * and empty the selected state legends\n /\n onLegendHoverCardLeave?: VoidFunction;\n\n /\n Callback issued when the selected option changes.\n /\n onChange?: (selectedLegends: string[], event: React.MouseEvent<HTMLButtonElement>, currentLegend?: ILegend) => 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 ref?: IRefObject<ILegendContainer>;\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 ILegendContainer {\n toSVG: (\n svgWidth: number,\n isRTL?: boolean,\n ) => {\n node: SVGGElement \| null;\n width: number;\n height: number;\n };\n}\n"]}

package/lib-amd/components/LineChart/LineChart.base.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IAccessibilityProps, IBasestate, ILineChartProps, ILineChartPoints, ICustomizedCalloutData, IColorFillBarsProps, ILineChartDataPoint } from '../../index';
-import { IChart } from '../../types/index';
+import { IChart, IImageExportOptions } from '../../types/index';
 type LineChartDataWithIndex = ILineChartPoints & {
     index: number;
 };
@@ -41,13 +41,21 @@ export declare class LineChartBase extends React.Component<ILineChartProps, ILin
     private _emptyChartId;
     private _isRTL;
     private _cartesianChartRef;
+    private _legendsRef;
+    private _xMin;
+    private _yMin;
+    private _xMax;
+    private _xPadding;
+    private _yPadding;
     constructor(props: ILineChartProps);
     componentDidUpdate(prevProps: ILineChartProps): void;
     render(): JSX.Element;
     get chartContainer(): HTMLElement | null;
+    toImage: (opts?: IImageExportOptions) => Promise<string>;
     private _getDomainNRangeValues;
     private _injectIndexPropertyInLineChartData;
     private _getCustomizedCallout;
+    private _getNumericMinMaxOfY;
     private _getMargins;
     private _initializeLineChartData;
     private _handleSingleLegendSelectionAction;
@@ -57,6 +65,7 @@ export declare class LineChartBase extends React.Component<ILineChartProps, ILin
     private _getBoxWidthOfShape;
     private _getPath;
     private _getPointFill;
+    private _getRangeForScatterMarkerSize;
     private _createLines;
     private _createColorFillBars;
     private _getStripePattern;
@@ -89,6 +98,7 @@ export declare class LineChartBase extends React.Component<ILineChartProps, ILin
     private _noLegendHighlighted;
     private _getColorFillBarOpacity;
     private _getAriaLabel;
+    private _getDomainNRangeValuesWithPadding;
     private _isChartEmpty;
     private _getChartTitle;
 }

package/lib-amd/components/LineChart/LineChart.base.js CHANGED Viewed

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../Legends/index", "d3-shape", "@fluentui/react/lib/Utilities", "../../index", "@fluentui/react/lib/Callout", "./eventAnnotation/EventAnnotation", "../../utilities/index"], function (require, exports, tslib_1, React, d3_selection_1, d3_array_1, index_1, d3_shape_1, Utilities_1, index_2, Callout_1, EventAnnotation_1, index_3) {
+define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../Legends/index", "d3-shape", "d3-array", "@fluentui/react/lib/Utilities", "../../index", "@fluentui/react/lib/Callout", "./eventAnnotation/EventAnnotation", "../../utilities/index", "../../utilities/image-export-utils"], function (require, exports, tslib_1, React, d3_selection_1, d3_array_1, index_1, d3_shape_1, d3_array_2, Utilities_1, index_2, Callout_1, EventAnnotation_1, index_3, image_export_utils_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.LineChartBase = void 0;
@@ -52,9 +52,21 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             _this_1._yAxisScale = '';
             _this_1.eventLabelHeight = 36;
             _this_1._isRTL = (0, Utilities_1.getRTL)();
+            _this_1._xMin = Number.NEGATIVE_INFINITY;
+            _this_1._yMin = Number.NEGATIVE_INFINITY;
+            _this_1._xMax = Number.POSITIVE_INFINITY;
+            _this_1._xPadding = 0;
+            _this_1._yPadding = 0;
+            _this_1.toImage = function (opts) {
+                var _a, _b;
+                return (0, image_export_utils_1.toImage)((_a = _this_1._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this_1._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, _this_1._isRTL, opts);
+            };
             _this_1._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
                 var domainNRangeValue;
-                if (xAxisType === index_3.XAxisTypes.NumericAxis) {
+                if (_this_1.props.lineMode === 'scatter' && xAxisType === index_3.XAxisTypes.NumericAxis) {
+                    domainNRangeValue = _this_1._getDomainNRangeValuesWithPadding(points, margins, width, isRTL);
+                }
+                else if (xAxisType === index_3.XAxisTypes.NumericAxis) {
                     domainNRangeValue = (0, index_3.domainRangeOfNumericForAreaChart)(points, margins, width, isRTL);
                 }
                 else if (xAxisType === index_3.XAxisTypes.DateAxis) {
@@ -98,6 +110,18 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         ? _this_1.props.onRenderCalloutPerDataPoint(_this_1.state.dataPointCalloutProps)
                         : null;
             };
+            _this_1._getNumericMinMaxOfY = function (points) {
+                // eslint-disable-next-line @typescript-eslint/no-shadow
+                var _a = (0, index_3.findNumericMinMaxOfY)(points), startValue = _a.startValue, endValue = _a.endValue;
+                _this_1._yMin = startValue;
+                if (_this_1.props.lineMode === 'scatter') {
+                    _this_1._yPadding = (endValue - startValue) * 0.1;
+                }
+                return {
+                    startValue: startValue - _this_1._yPadding,
+                    endValue: endValue + _this_1._yPadding,
+                };
+            };
             _this_1._getMargins = function (margins) {
                 _this_1.margins = margins;
             };
@@ -541,6 +565,34 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 var yValue = point.yAxisCalloutData || point.y;
                 return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || "".concat(xValue, ". ").concat(legend, ", ").concat(yValue, ".");
             };
+            _this_1._getDomainNRangeValuesWithPadding = function (points, margins, width, isRTL) {
+                _this_1._xMin = (0, d3_array_2.min)(points, function (point) {
+                    return (0, d3_array_2.min)(point.data, function (item) { return item.x; });
+                });
+                _this_1._xMax = (0, d3_array_2.max)(points, function (point) {
+                    return (0, d3_array_2.max)(point.data, function (item) {
+                        return item.x;
+                    });
+                });
+                if (_this_1.props.lineMode === 'scatter') {
+                    _this_1._xPadding = (_this_1._xMax - _this_1._xMin) * 0.1;
+                }
+                var rStartValue = margins.left;
+                var rEndValue = width - margins.right;
+                return isRTL
+                    ? {
+                        dStartValue: _this_1._xMax + _this_1._xPadding,
+                        dEndValue: _this_1._xMin - _this_1._xPadding,
+                        rStartValue: rStartValue,
+                        rEndValue: rEndValue,
+                    }
+                    : {
+                        dStartValue: _this_1._xMin - _this_1._xPadding,
+                        dEndValue: _this_1._xMax + _this_1._xPadding,
+                        rStartValue: rStartValue,
+                        rEndValue: rEndValue,
+                    };
+            };
             _this_1._getChartTitle = function () {
                 var _a = _this_1.props.data, chartTitle = _a.chartTitle, lineChartData = _a.lineChartData;
                 return (chartTitle ? "".concat(chartTitle, ". ") : '') + "Line chart with ".concat((lineChartData === null || lineChartData === void 0 ? void 0 : lineChartData.length) || 0, " lines. ");
@@ -576,6 +628,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             _this_1._firstRenderOptimization = true;
             _this_1._emptyChartId = (0, Utilities_1.getId)('_LineChart_empty');
             _this_1._cartesianChartRef = React.createRef();
+            _this_1._legendsRef = React.createRef();
             props.eventAnnotationProps &&
                 props.eventAnnotationProps.labelHeight &&
                 (_this_1.eventLabelHeight = props.eventAnnotationProps.labelHeight);
@@ -625,7 +678,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 tickValues: tickValues,
                 tickFormat: tickFormat,
             };
-            return !this._isChartEmpty() ? (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: index_3.ChartTypes.LineChart, isCalloutForStack: true, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: index_3.createNumericYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: index_3.findNumericMinMaxOfY, getGraphData: this._initializeLineChartData, xAxisType: isXAxisDateType ? index_3.XAxisTypes.DateAxis : index_3.XAxisTypes.NumericAxis, customizedCallout: this._getCustomizedCallout(), getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: index_3.createStringYAxis, onChartMouseLeave: this._handleChartMouseLeave, enableFirstRenderOptimization: this.props.enablePerfOptimization && this._firstRenderOptimization, ref: this._cartesianChartRef,
+            return !this._isChartEmpty() ? (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: index_3.ChartTypes.LineChart, isCalloutForStack: true, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: index_3.createNumericYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: this._getNumericMinMaxOfY, getGraphData: this._initializeLineChartData, xAxisType: isXAxisDateType ? index_3.XAxisTypes.DateAxis : index_3.XAxisTypes.NumericAxis, customizedCallout: this._getCustomizedCallout(), getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: index_3.createStringYAxis, onChartMouseLeave: this._handleChartMouseLeave, enableFirstRenderOptimization: this.props.enablePerfOptimization && this._firstRenderOptimization, ref: this._cartesianChartRef,
                 /* eslint-disable react/jsx-no-bind */
                 // eslint-disable-next-line react/no-children-prop
                 children: function (props) {
@@ -705,7 +758,14 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                     return legend;
                 })
                 : [];
-            return (React.createElement(index_1.Legends, tslib_1.__assign({ legends: tslib_1.__spreadArray(tslib_1.__spreadArray([], legendDataItems, true), colorFillBarsLegendDataItems, true), enabledWrapLines: this.props.enabledLegendsWrapLines, overflowProps: this.props.legendsOverflowProps, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, (isLegendMultiSelectEnabled && { onLegendHoverCardLeave: this._onHoverCardHide }), this.props.legendProps)));
+            return (React.createElement(index_1.Legends, tslib_1.__assign({ legends: tslib_1.__spreadArray(tslib_1.__spreadArray([], legendDataItems, true), colorFillBarsLegendDataItems, true), enabledWrapLines: this.props.enabledLegendsWrapLines, overflowProps: this.props.legendsOverflowProps, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, (isLegendMultiSelectEnabled && { onLegendHoverCardLeave: this._onHoverCardHide }), this.props.legendProps, { ref: this._legendsRef })));
+        };
+        LineChartBase.prototype._getRangeForScatterMarkerSize = function () {
+            var extraXPixels = this._isRTL
+                ? this._xAxisScale(this._xMax - this._xPadding) - this._xAxisScale(this._xMax)
+                : this._xAxisScale(this._xMin + this._xPadding) - this._xAxisScale(this._xMin);
+            var extraYPixels = this._yAxisScale(this._yMin) - this._yAxisScale(this._yMin + this._yPadding);
+            return Math.min(extraXPixels, extraYPixels);
         };
         LineChartBase.prototype._createLines = function (xElement, containerHeight) {
             var _this_1 = this;
@@ -717,6 +777,12 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             else {
                 this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
             }
+            var extraMaxPixels = this.props.lineMode === 'scatter' ? this._getRangeForScatterMarkerSize() : 0;
+            var maxMarkerSize = (0, d3_array_2.max)(this._points, function (point) {
+                return (0, d3_array_2.max)(point.data, function (item) {
+                    return item.markerSize;
+                });
+            });
             var _loop_1 = function (i) {
                 var linesForLine = [];
                 var bordersForLine = [];
@@ -730,7 +796,12 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                     var _2 = this_1._points[i].data[0], x1_1 = _2.x, y1 = _2.y, xAxisCalloutData_1 = _2.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _2.xAxisCalloutAccessibilityData;
                     var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
                     var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
-                    pointsForLine.push(React.createElement("circle", tslib_1.__assign({ id: circleId_1, key: circleId_1, r: activePoint === circleId_1 ? 5.5 : 3.5, cx: this_1._xAxisScale(x1_1), cy: this_1._yAxisScale(y1), fill: activePoint === circleId_1 ? theme.semanticColors.bodyBackground : lineColor, opacity: isLegendSelected ? 1 : 0.1, onMouseOver: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, strokeWidth: activePoint === circleId_1 ? DEFAULT_LINE_STROKE_SIZE : 0, stroke: activePoint === circleId_1 ? lineColor : '', role: "img", "aria-label": this_1._getAriaLabel(i, 0), "data-is-focusable": isLegendSelected, ref: function (e) {
+                    var currentMarkerSize = this_1._points[i].data[0].markerSize;
+                    pointsForLine.push(React.createElement("circle", tslib_1.__assign({ id: circleId_1, key: circleId_1, r: currentMarkerSize
+                            ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize
+                            : activePoint === circleId_1
+                                ? 5.5
+                                : 3.5, cx: this_1._xAxisScale(x1_1), cy: this_1._yAxisScale(y1), fill: activePoint === circleId_1 ? theme.semanticColors.bodyBackground : lineColor, opacity: isLegendSelected ? 1 : 0.1, onMouseOver: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, strokeWidth: activePoint === circleId_1 ? DEFAULT_LINE_STROKE_SIZE : 0, stroke: activePoint === circleId_1 ? lineColor : '', role: "img", "aria-label": this_1._getAriaLabel(i, 0), "data-is-focusable": isLegendSelected, ref: function (e) {
                             _this_1._refCallback(e, circleId_1);
                         }, onFocus: function () { return _this_1._handleFocus(circleId_1, x1_1, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[0].onDataPointClick))));
                 }
@@ -786,7 +857,8 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         var strokeWidth = ((_p = this_1._points[i].lineOptions) === null || _p === void 0 ? void 0 : _p.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
                         var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
                         var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
-                        pointsForLine.push(React.createElement("path", tslib_1.__assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, onFocus: function () { return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j - 1) })));
+                        var currentMarkerSize = this_1._points[i].data[j - 1].markerSize;
+                        pointsForLine.push(this_1.props.lineMode === 'scatter' ? (React.createElement("circle", tslib_1.__assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x1), cy: this_1._yAxisScale(y1), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, onFocus: function () { return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j - 1) }))) : (React.createElement("path", tslib_1.__assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, onFocus: function () { return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j - 1) }))));
                         if (j + 1 === this_1._points[i].data.length) {
                             // If this is last point of the line segment.
                             var lastCircleId_1 = "".concat(circleId).concat(j, "L");
@@ -794,30 +866,34 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                             var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
                             path = this_1._getPath(this_1._xAxisScale(x2), this_1._yAxisScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
                             var _5 = this_1._points[i].data[j], lastCirlceXCallout_1 = _5.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _5.xAxisCalloutAccessibilityData;
+                            currentMarkerSize = this_1._points[i].data[j].markerSize;
                             pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
-                                React.createElement("path", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, onFocus: function () {
+                                this_1.props.lineMode === 'scatter' ? (React.createElement("circle", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x2), cy: this_1._yAxisScale(y2), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, onFocus: function () {
+                                        return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
+                                    }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j) }))) : (React.createElement("path", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, onFocus: function () {
                                         return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
-                                    }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j) })),
+                                    }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j) }))),
                                 React.createElement("circle", { id: hiddenHoverCircleId, key: hiddenHoverCircleId, r: 8, cx: this_1._xAxisScale(x2), cy: this_1._yAxisScale(y2), opacity: 0, width: 0, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, strokeWidth: 0, focusable: false, onBlur: this_1._handleMouseOut })));
-                            /* eslint-enable react/jsx-no-bind */
                         }
-                        if (isLegendSelected) {
-                            // don't draw line if it is in a gap
-                            if (!isInGap) {
-                                var lineBorderWidth = ((_q = this_1._points[i].lineOptions) === null || _q === void 0 ? void 0 : _q.lineBorderWidth)
-                                    ? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
-                                    : 0;
-                                if (lineBorderWidth > 0) {
-                                    bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeLinecap: (_s = (_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.strokeLinecap) !== null && _s !== void 0 ? _s : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_t = this_1._points[i].lineOptions) === null || _t === void 0 ? void 0 : _t.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
+                        if (this_1.props.lineMode !== 'scatter') {
+                            if (isLegendSelected) {
+                                // don't draw line if it is in a gap
+                                if (!isInGap) {
+                                    var lineBorderWidth = ((_q = this_1._points[i].lineOptions) === null || _q === void 0 ? void 0 : _q.lineBorderWidth)
+                                        ? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
+                                        : 0;
+                                    if (lineBorderWidth > 0) {
+                                        bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeLinecap: (_s = (_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.strokeLinecap) !== null && _s !== void 0 ? _s : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_t = this_1._points[i].lineOptions) === null || _t === void 0 ? void 0 : _t.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
+                                    }
+                                    linesForLine.push(React.createElement("line", tslib_1.__assign({ id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, ref: function (e) {
+                                            _this_1._refCallback(e, lineId);
+                                        }, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_v = (_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.strokeLinecap) !== null && _v !== void 0 ? _v : 'round', strokeDasharray: (_w = this_1._points[i].lineOptions) === null || _w === void 0 ? void 0 : _w.strokeDasharray, strokeDashoffset: (_x = this_1._points[i].lineOptions) === null || _x === void 0 ? void 0 : _x.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
                                 }
-                                linesForLine.push(React.createElement("line", tslib_1.__assign({ id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, ref: function (e) {
-                                        _this_1._refCallback(e, lineId);
-                                    }, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_v = (_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.strokeLinecap) !== null && _v !== void 0 ? _v : 'round', strokeDasharray: (_w = this_1._points[i].lineOptions) === null || _w === void 0 ? void 0 : _w.strokeDasharray, strokeDashoffset: (_x = this_1._points[i].lineOptions) === null || _x === void 0 ? void 0 : _x.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
                             }
-                        }
-                        else {
-                            if (!isInGap) {
-                                linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_z = (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.strokeLinecap) !== null && _z !== void 0 ? _z : 'round', strokeDasharray: (_0 = this_1._points[i].lineOptions) === null || _0 === void 0 ? void 0 : _0.strokeDasharray, strokeDashoffset: (_1 = this_1._points[i].lineOptions) === null || _1 === void 0 ? void 0 : _1.strokeDashoffset, opacity: 0.1 }));
+                            else {
+                                if (!isInGap) {
+                                    linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_z = (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.strokeLinecap) !== null && _z !== void 0 ? _z : 'round', strokeDasharray: (_0 = this_1._points[i].lineOptions) === null || _0 === void 0 ? void 0 : _0.strokeDasharray, strokeDashoffset: (_1 = this_1._points[i].lineOptions) === null || _1 === void 0 ? void 0 : _1.strokeDashoffset, opacity: 0.1 }));
+                                }
                             }
                         }
                     };