@fluentui/react-charting 5.23.62 → 5.23.64

package/lib/components/Legends/Legends.types.d.ts

@@ -0,0 +1,259 @@
+import * as React from 'react';
+import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
+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';
+import { CustomPoints, Points } from '../../utilities/utilities';
+export interface ILegendOverflowData {
+    primary: ILegend[];
+    overflow?: ILegend[];
+}
+/**
+ * @public
+ * {@docCategory Legends}
+ */
+export interface ILegendSubComponentStyles {
+    hoverCardStyles: IStyleFunctionOrObject<IHoverCardStyleProps, IHoverCardStyles>;
+}
+/**
+ * @public
+ * Legends styles
+ * {@docCategory Legends}
+ */
+export interface ILegendsStyles {
+    /**
+     * Style set for the root of the legend component
+     */
+    root: IStyle;
+    /**
+     * Style set for Legend. This is a wrapping class for text of legend and the rectange box that represents a legend
+     */
+    legend: IStyle;
+    /**
+     * Style set for the rectangle that represents a legend
+     */
+    rect: IStyle;
+    /**
+     * styles set for the shape that represents a legend
+     */
+    shape: IStyle;
+    /**
+     * Style set for the triangle that represents a legend
+     */
+    triangle: IStyle;
+    /**
+     * Style for the legend text
+     */
+    text: IStyle;
+    /**
+     * Style for the legend text
+     */
+    hoverChange: IStyle;
+    /**
+     * Style for the text that indicates the no.of legends that are in hovercard due to lack of space
+     */
+    overflowIndicationTextStyle: IStyle;
+    /**
+     * Style for the overflow container
+     */
+    hoverCardRoot: IStyle;
+    /**
+     * sub component styles
+     */
+    subComponentStyles: ILegendSubComponentStyles;
+}
+/**
+ * @public
+ * ILegend interface
+ * {@docCategory Legends}
+ */
+export interface ILegend {
+    /**
+     * Defines the title of the legend
+     */
+    title: string;
+    /**
+     * Defines the function that is executed on clicking this legend
+     */
+    action?: VoidFunction;
+    /**
+     * Defines the function that is executed upon hovering over the legend
+     */
+    hoverAction?: VoidFunction;
+    /**
+     * Defines the function that is executed upon moving the mouse away from the legend
+     */
+    onMouseOutAction?: (isLegendFocused?: boolean) => void;
+    /**
+     * The color for the legend
+     */
+    color: string;
+    /**
+     * The opacity of the legend color
+     */
+    opacity?: number;
+    /**
+     * The shape for the legend
+     */
+    shape?: LegendShape;
+    /**
+     * Indicated whether or not to apply stripe pattern
+     */
+    stripePattern?: boolean;
+    /**
+     * Indicates if the legend belongs to a line in the Bar Chart
+     */
+    isLineLegendInBarChart?: boolean;
+    nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+/**
+ * @public
+ * Legend style properties
+ * {@docCategory Legends}
+ */
+export interface ILegendStyleProps {
+    theme?: ITheme;
+    className?: string;
+    colorOnSelectedState?: string;
+    borderColor?: string;
+    opacity?: number;
+    overflow?: boolean;
+    stripePattern?: boolean;
+    isLineLegendInBarChart?: boolean;
+}
+/**
+ * @public
+ * Legend properties
+ * {@docCategory Legends}
+ */
+export interface ILegendsProps {
+    /**
+     * Prop that takes list of legends
+     */
+    legends: ILegend[];
+    /**
+     * Additional CSS class(es) to apply to the legneds component.
+     */
+    className?: string;
+    /**
+     * Theme (provided through customization.)
+     */
+    theme?: ITheme;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<ILegendStyleProps, ILegendsStyles>;
+    /**
+     * This prop makes the legends component align itself to the center in the container it is sitting in
+     */
+    centerLegends?: boolean;
+    /**
+     * Enable the legends to wrap lines if there is not enough space to show all legends on a single line
+     */
+    enabledWrapLines?: boolean;
+    /**
+     * props for the overflow set component
+     */
+    overflowProps?: Partial<IOverflowSetProps>;
+    /**
+     * focus zone props in hover card
+     */
+    focusZonePropsInHoverCard?: IFocusZoneProps;
+    /**
+     * text for overflow legends string
+     */
+    overflowText?: string;
+    /**
+     * prop that decides if legends are focusable
+     * @default true
+     */
+    allowFocusOnLegends?: boolean;
+    /**
+     * prop that decide if we can select multiple legends or single legend at a time
+     * @default false
+     */
+    canSelectMultipleLegends?: boolean;
+    /**
+     * Defines the function that is executed upon hiding of hover card
+     * make sure to send prop  when  the prop  is canSelectMultipleLegends is set to true
+     * and empty the selected state legends
+     */
+    onLegendHoverCardLeave?: VoidFunction;
+    /**
+     * Callback issued when the selected option changes.
+     */
+    onChange?: (selectedLegends: string[], event: React.MouseEvent<HTMLButtonElement>, currentLegend?: ILegend) => void;
+    /**
+     * Keys (title) that will be initially used to set selected items. This prop is used for multi-select scenarios when
+     * canSelectMultipleLegends is true; for single-select, use defaultSelectedLegend.
+     *
+     * Updating this prop does not change the selection after the component has been initialized. For controlled
+     * selections, use selectedLegends instead.
+     *
+     * @see selectedLegends for setting the selected legends in controlled mode.
+     * @see defaultSelectedLegend for setting the initially selected legend when canSelectMultipleLegends is false.
+     */
+    defaultSelectedLegends?: string[];
+    /**
+     * Key that will be initially used to set selected item. This prop is used for single-select scenarios when
+     * canSelectMultipleLegends is false or unspecified; for multi-select, use defaultSelectedLegends.
+     *
+     * Updating this prop does not change the selection after the component has been initialized. For controlled
+     * selections, use selectedLegend instead.
+     *
+     * @see selectedLegend for setting the selected legend in controlled mode.
+     * @see defaultSelectedLegends for setting the initially selected legends when canSelectMultipleLegends is true.
+     */
+    defaultSelectedLegend?: string;
+    /**
+     * Keys (title) that will be used to set selected items in multi-select scenarios when canSelectMultipleLegends is
+     * true. For single-select, use selectedLegend.
+     *
+     * When this prop is provided, the component is controlled and does not automatically update the selection based on
+     * user interactions; the parent component must update the value passed to this property by handling the onChange
+     * event.
+     *
+     * @see defaultSelectedLegends for setting the initially-selected legends in uncontrolled mode.
+     * @see selectedLegends for setting the selected legends when `canSelectMultipleLegends` is `true`.
+     */
+    selectedLegends?: string[];
+    /**
+     * Key (title) that will be used to set the selected item in single-select scenarios when canSelectMultipleLegends is
+     * false or unspecified. For multi-select, use selectedLegends.
+     *
+     * When this prop is provided, the component is controlled and does not automatically update the selection based on
+     * user interactions; the parent component must update the value passed to this property by handling the onChange
+     * event.
+     *
+     * @see defaultSelectedLegend for setting the initially-selected legend in uncontrolled mode.
+     * @see selectedLegend for setting the selected legend when `canSelectMultipleLegends` is `false`.
+     */
+    selectedLegend?: string;
+    /**
+     * The shape for the legend.
+     */
+    shape?: LegendShape;
+    /**
+     * Callback to access the public methods and properties of the component.
+     */
+    ref?: IRefObject<ILegendContainer>;
+}
+/**
+ * @public
+ * The shape for the legend
+ * default: show the rect legend
+ * triangle: show the triangle legend
+ * {@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/components/Legends/Legends.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Legends.types.js.map

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

@@ -0,0 +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/components/Legends/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Legends';
+export * from './Legends.types';
+export * from './shape';

package/lib/components/Legends/index.js

@@ -0,0 +1,4 @@
+export * from './Legends';
+export * from './Legends.types';
+export * from './shape';
+//# sourceMappingURL=index.js.map

package/lib/components/Legends/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Legends/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC","sourcesContent":["export * from './Legends';\nexport * from './Legends.types';\nexport * from './shape';\n"]}

package/lib/components/Legends/shape.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { LegendShape } from './Legends.types';
+export interface IShapeProps {
+    svgProps: React.SVGAttributes<SVGElement>;
+    pathProps: React.SVGAttributes<SVGPathElement>;
+    shape: LegendShape;
+    classNameForNonSvg?: string;
+}
+export declare const Shape: React.FC<IShapeProps>;

package/lib/components/Legends/shape.js

@@ -0,0 +1,24 @@
+var _a;
+import { __assign } from "tslib";
+import * as React from 'react';
+import { CustomPoints, getSecureProps, Points } from '../../utilities/utilities';
+var pointPath = (_a = {},
+    _a["".concat(Points[Points.circle])] = 'M1 6 A5 5 0 1 0  12 6 M1 6 A5 5 0 0 1  12 6',
+    _a["".concat(Points[Points.square])] = 'M1 1 L12 1 L12 12  L1 12 L1 1 Z',
+    _a["".concat(Points[Points.triangle])] = 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',
+    _a["".concat(Points[Points.pyramid])] = 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',
+    _a["".concat(Points[Points.diamond])] = 'M2 2 L10 2 L10 10  L2 10 L2 2 Z',
+    _a["".concat(Points[Points.hexagon])] = 'M9 0H3L0 5L3 10H9L12 5L9 0Z',
+    _a["".concat(Points[Points.pentagon])] = 'M6.06061 0L0 4.21277L2.30303 11H9.69697L12 4.21277L6.06061 0Z',
+    _a["".concat(Points[Points.octagon])] = 'M7.08333 0H2.91667L0 2.91667V7.08333L2.91667 10H7.08333L10 7.08333V2.91667L7.08333 0Z',
+    _a["".concat(CustomPoints[CustomPoints.dottedLine])] = 'M0 6 H3 M5 6 H8 M10 6 H13',
+    _a);
+export var Shape = function (_a) {
+    var svgProps = _a.svgProps, pathProps = _a.pathProps, shape = _a.shape, classNameForNonSvg = _a.classNameForNonSvg;
+    if (Object.keys(pointPath).indexOf(shape) === -1) {
+        return React.createElement("div", { className: classNameForNonSvg });
+    }
+    return (React.createElement("svg", __assign({ width: 14, height: 14, viewBox: '-1 -1 14 14' }, getSecureProps(svgProps), { transform: "rotate(".concat(shape === Points[Points.diamond] ? 45 : shape === Points[Points.pyramid] ? 180 : 0, ", 0, 0)") }),
+        React.createElement("path", __assign({ d: pointPath[shape] }, getSecureProps(pathProps)))));
+};
+//# sourceMappingURL=shape.js.map

package/lib/components/Legends/shape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.js","sourceRoot":"../src/","sources":["components/Legends/shape.tsx"],"names":[],"mappings":";;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAajF,IAAM,SAAS;IACb,GAAC,UAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAE,IAAG,6CAA6C;IAC3E,GAAC,UAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAE,IAAG,iCAAiC;IAC/D,GAAC,UAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAE,IAAG,2CAA2C;IAC3E,GAAC,UAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAE,IAAG,2CAA2C;IAC1E,GAAC,UAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAE,IAAG,iCAAiC;IAChE,GAAC,UAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAE,IAAG,6BAA6B;IAC5D,GAAC,UAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAE,IAAG,+DAA+D;IAC/F,GAAC,UAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAE,IAC1B,uFAAuF;IACzF,GAAC,UAAG,YAAY,CAAC,YAAY,CAAC,UAAU,CAAC,CAAE,IAAG,2BAA2B;OAC1E,CAAC;AAEF,MAAM,CAAC,IAAM,KAAK,GAA0B,UAAC,EAAkD;QAAhD,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA,EAAE,kBAAkB,wBAAA;IAC3F,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;QACjD,OAAO,6BAAK,SAAS,EAAE,kBAAkB,GAAI,CAAC;IAChD,CAAC;IACD,OAAO,CACL,sCACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,aAAa,IAClB,cAAc,CAAC,QAAQ,CAAC,IAC5B,SAAS,EAAE,iBAAU,KAAK,KAAK,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,YAAS;QAEhH,uCAAM,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,IAAM,cAAc,CAAC,SAAS,CAAC,EAAI,CACxD,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { LegendShape } from './Legends.types';\nimport { CustomPoints, getSecureProps, Points } from '../../utilities/utilities';\n\nexport interface IShapeProps {\n  svgProps: React.SVGAttributes<SVGElement>;\n  pathProps: React.SVGAttributes<SVGPathElement>;\n  shape: LegendShape;\n  classNameForNonSvg?: string;\n}\n\ntype PointPathType = {\n  [key: string]: string;\n};\n\nconst pointPath: PointPathType = {\n  [`${Points[Points.circle]}`]: 'M1 6 A5 5 0 1 0  12 6 M1 6 A5 5 0 0 1  12 6',\n  [`${Points[Points.square]}`]: 'M1 1 L12 1 L12 12  L1 12 L1 1 Z',\n  [`${Points[Points.triangle]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',\n  [`${Points[Points.pyramid]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',\n  [`${Points[Points.diamond]}`]: 'M2 2 L10 2 L10 10  L2 10 L2 2 Z',\n  [`${Points[Points.hexagon]}`]: 'M9 0H3L0 5L3 10H9L12 5L9 0Z',\n  [`${Points[Points.pentagon]}`]: 'M6.06061 0L0 4.21277L2.30303 11H9.69697L12 4.21277L6.06061 0Z',\n  [`${Points[Points.octagon]}`]:\n    'M7.08333 0H2.91667L0 2.91667V7.08333L2.91667 10H7.08333L10 7.08333V2.91667L7.08333 0Z',\n  [`${CustomPoints[CustomPoints.dottedLine]}`]: 'M0 6 H3 M5 6 H8 M10 6 H13',\n};\n\nexport const Shape: React.FC<IShapeProps> = ({ svgProps, pathProps, shape, classNameForNonSvg }) => {\n  if (Object.keys(pointPath).indexOf(shape) === -1) {\n    return <div className={classNameForNonSvg} />;\n  }\n  return (\n    <svg\n      width={14}\n      height={14}\n      viewBox={'-1 -1 14 14'}\n      {...getSecureProps(svgProps)}\n      transform={`rotate(${shape === Points[Points.diamond] ? 45 : shape === Points[Points.pyramid] ? 180 : 0}, 0, 0)`}\n    >\n      <path d={pointPath[shape]} {...getSecureProps(pathProps)} />\n    </svg>\n  );\n};\n"]}

package/lib/components/LineChart/LineChart.base.d.ts

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { IAccessibilityProps, IBasestate, ILineChartProps, ILineChartPoints, ICustomizedCalloutData, IColorFillBarsProps, ILineChartDataPoint } from '../../index';
+import { IChart, IImageExportOptions } from '../../types/index';
+type LineChartDataWithIndex = ILineChartPoints & {
+    index: number;
+};
+export interface ILineChartState extends IBasestate {
+    selectedLegendPoints: LineChartDataWithIndex[];
+    selectedColorBarLegend: IColorFillBarsProps[];
+    isSelectedLegend: boolean;
+    dataPointCalloutProps?: ICustomizedCalloutData;
+    stackCalloutProps?: ICustomizedCalloutData;
+    activePoint?: string;
+    xAxisCalloutAccessibilityData?: IAccessibilityProps;
+    nearestCircleToHighlight: ILineChartDataPoint | null;
+    activeLine: number | null;
+}
+export declare class LineChartBase extends React.Component<ILineChartProps, ILineChartState> implements IChart {
+    static defaultProps: Partial<ILineChartProps>;
+    private _points;
+    private _calloutPoints;
+    private _xAxisScale;
+    private _yAxisScale;
+    private _circleId;
+    private _lineId;
+    private _borderId;
+    private _verticalLine;
+    private _colorFillBarPatternId;
+    private _uniqueCallOutID;
+    private _refArray;
+    private margins;
+    private eventLabelHeight;
+    private lines;
+    private _renderedColorFillBars;
+    private _colorFillBars;
+    private _tooltipId;
+    private _rectId;
+    private _staticHighlightCircle;
+    private _createLegendsMemoized;
+    private _firstRenderOptimization;
+    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;
+    private _onHoverCardHide;
+    private _createLegends;
+    private _closeCallout;
+    private _getBoxWidthOfShape;
+    private _getPath;
+    private _getPointFill;
+    private _getRangeForScatterMarkerSize;
+    private _createLines;
+    private _createColorFillBars;
+    private _getStripePattern;
+    private _checkInGap;
+    private _refCallback;
+    private _onMouseOverLargeDataset;
+    private _handleFocus;
+    private _handleHover;
+    /**
+     * Screen readers announce an element as clickable if the onClick attribute is set.
+     * This function sets the attribute only when a click event handler is provided.
+     */
+    private _getClickHandler;
+    private _handleMouseOut;
+    private _handleChartMouseLeave;
+    private _handleLegendClick;
+    private _handleMultipleLineLegendSelectionAction;
+    private _handleMultipleColorFillBarLegendSelectionAction;
+    private _clearMultipleLegendSelections;
+    /**
+     * This function checks if the given legend is highlighted or not.
+     * A legend can be highlighted in 2 ways:
+     * 1. selection: if the user clicks on it
+     * 2. hovering: if there is no selected legend and the user hovers over it
+     */
+    private _legendHighlighted;
+    /**
+     * This function checks if none of the legends is selected or hovered.
+     */
+    private _noLegendHighlighted;
+    private _getColorFillBarOpacity;
+    private _getAriaLabel;
+    private _getDomainNRangeValuesWithPadding;
+    private _isChartEmpty;
+    private _getChartTitle;
+}
+export {};