@fluentui/react-charting 5.16.34 → 5.16.35

package/lib/components/Legends/Legends.styles.js

@@ -38,7 +38,7 @@ export var getStyles = function (props) {
         rect: {
             selectors: (_a = {},
                 _a[HighContrastSelector] = {
-                    content: "linear-gradient(to right, " + props.colorOnSelectedState + ", " + props.colorOnSelectedState + ")",
+                    content: "linear-gradient(to right, ".concat(props.colorOnSelectedState, ", ").concat(props.colorOnSelectedState, ")"),
                     opacity: props.colorOnSelectedState === palette.white ? '0.6' : '',
                 },
                 _a),
@@ -50,7 +50,7 @@ export var getStyles = function (props) {
             borderColor: props.borderColor ? props.borderColor : theme === null || theme === void 0 ? void 0 : theme.semanticColors.buttonBorder,
             content: props.stripePattern
                 ? // eslint-disable-next-line @fluentui/max-len
-                    "repeating-linear-gradient(135deg, transparent, transparent 3px, " + props.colorOnSelectedState + " 1px, " + props.colorOnSelectedState + " 4px)"
+                    "repeating-linear-gradient(135deg, transparent, transparent 3px, ".concat(props.colorOnSelectedState, " 1px, ").concat(props.colorOnSelectedState, " 4px)")
                 : '',
         },
         shape: [
@@ -73,7 +73,7 @@ export var getStyles = function (props) {
                     height: '10.4px',
                     width: '10.4px',
                     clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
-                    backgroundImage: "linear-gradient(to right, " + props.colorOnSelectedState + ", " + props.colorOnSelectedState + ")",
+                    backgroundImage: "linear-gradient(to right, ".concat(props.colorOnSelectedState, ", ").concat(props.colorOnSelectedState, ")"),
                 },
                 _b),
         },

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

@@ -1 +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\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 === palette.white ? '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: props.colorOnSelectedState === palette.white ? '0.6' : props.opacity ? props.opacity : '',\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 === palette.white ? '0.67' : '',\n    },\n    hoverChange: {\n      width: '12px',\n      height: '12px',\n      backgroundColor: 'white',\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"]}
+{"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\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 === palette.white ? '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: props.colorOnSelectedState === palette.white ? '0.6' : props.opacity ? props.opacity : '',\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 === palette.white ? '0.67' : '',\n    },\n    hoverChange: {\n      width: '12px',\n      height: '12px',\n      backgroundColor: 'white',\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"]}

package/lib/components/Legends/shape.js

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

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

@@ -1 +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,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAajE,IAAM,SAAS;IACb,GAAC,KAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAG,IAAG,6CAA6C;IAC3E,GAAC,KAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAG,IAAG,iCAAiC;IAC/D,GAAC,KAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAG,IAAG,2CAA2C;IAC3E,GAAC,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAG,IAAG,2CAA2C;IAC1E,GAAC,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAG,IAAG,iCAAiC;IAChE,GAAC,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAG,IAAG,6BAA6B;IAC5D,GAAC,KAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAG,IAAG,+DAA+D;IAC/F,GAAC,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAG,IAC1B,uFAAuF;IACzF,GAAC,KAAG,YAAY,CAAC,YAAY,CAAC,UAAU,CAAG,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;QAChD,OAAO,6BAAK,SAAS,EAAE,kBAAkB,GAAI,CAAC;KAC/C;IACD,OAAO,CACL,sCACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,aAAa,IAClB,QAAQ,IACZ,SAAS,EAAE,aAAU,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,aAAS;QAEhH,uCAAM,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,IAAM,SAAS,EAAI,CACxC,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { LegendShape } from './Legends.types';\nimport { CustomPoints, 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      {...svgProps}\n      transform={`rotate(${shape === Points[Points.diamond] ? 45 : shape === Points[Points.pyramid] ? 180 : 0}, 0, 0)`}\n    >\n      <path d={pointPath[shape]} {...pathProps} />\n    </svg>\n  );\n};\n"]}
+{"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,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAajE,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;QAChD,OAAO,6BAAK,SAAS,EAAE,kBAAkB,GAAI,CAAC;KAC/C;IACD,OAAO,CACL,sCACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,aAAa,IAClB,QAAQ,IACZ,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,SAAS,EAAI,CACxC,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { LegendShape } from './Legends.types';\nimport { CustomPoints, 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      {...svgProps}\n      transform={`rotate(${shape === Points[Points.diamond] ? 45 : shape === Points[Points.pyramid] ? 180 : 0}, 0, 0)`}\n    >\n      <path d={pointPath[shape]} {...pathProps} />\n    </svg>\n  );\n};\n"]}

package/lib/components/LineChart/LineChart.base.js

@@ -30,21 +30,21 @@ var PATH_MULTIPLY_SIZE = 2.5;
 var _getPointPath = function (x, y, w, index) {
     var allPointPaths = [
         // circle path
-        "M" + (x - w / 2) + " " + y + "\n     A" + w / 2 + " " + w / 2 + " 0 1 0 " + (x + w / 2) + " " + y + "\n     M" + (x - w / 2) + " " + y + "\n     A " + w / 2 + " " + w / 2 + " 0 1 1 " + (x + w / 2) + " " + y + "\n     ",
+        "M".concat(x - w / 2, " ").concat(y, "\n     A").concat(w / 2, " ").concat(w / 2, " 0 1 0 ").concat(x + w / 2, " ").concat(y, "\n     M").concat(x - w / 2, " ").concat(y, "\n     A ").concat(w / 2, " ").concat(w / 2, " 0 1 1 ").concat(x + w / 2, " ").concat(y, "\n     "),
         //square
-        "M" + (x - w / 2) + " " + (y - w / 2) + "\n     L" + (x + w / 2) + " " + (y - w / 2) + "\n     L" + (x + w / 2) + " " + (y + w / 2) + "\n     L" + (x - w / 2) + " " + (y + w / 2) + "\n     Z",
+        "M".concat(x - w / 2, " ").concat(y - w / 2, "\n     L").concat(x + w / 2, " ").concat(y - w / 2, "\n     L").concat(x + w / 2, " ").concat(y + w / 2, "\n     L").concat(x - w / 2, " ").concat(y + w / 2, "\n     Z"),
         //triangle
-        "M" + (x - w / 2) + " " + (y - 0.2886 * w) + "\n     H " + (x + w / 2) + "\n     L" + x + " " + (y + 0.5774 * w) + " Z",
+        "M".concat(x - w / 2, " ").concat(y - 0.2886 * w, "\n     H ").concat(x + w / 2, "\n     L").concat(x, " ").concat(y + 0.5774 * w, " Z"),
         //diamond
-        "M" + x + " " + (y - w / 2) + "\n     L" + (x + w / 2) + " " + y + "\n     L" + x + " " + (y + w / 2) + "\n     L" + (x - w / 2) + " " + y + "\n     Z",
+        "M".concat(x, " ").concat(y - w / 2, "\n     L").concat(x + w / 2, " ").concat(y, "\n     L").concat(x, " ").concat(y + w / 2, "\n     L").concat(x - w / 2, " ").concat(y, "\n     Z"),
         //pyramid
-        "M" + x + " " + (y - 0.5774 * w) + "\n     L" + (x + w / 2) + " " + (y + 0.2886 * w) + "\n     L" + (x - w / 2) + " " + (y + 0.2886 * w) + " Z",
+        "M".concat(x, " ").concat(y - 0.5774 * w, "\n     L").concat(x + w / 2, " ").concat(y + 0.2886 * w, "\n     L").concat(x - w / 2, " ").concat(y + 0.2886 * w, " Z"),
         //hexagon
-        "M" + (x - 0.5 * w) + " " + (y - 0.866 * w) + "\n     L" + (x + 0.5 * w) + " " + (y - 0.866 * w) + "\n     L" + (x + w) + " " + y + "\n     L" + (x + 0.5 * w) + " " + (y + 0.866 * w) + "\n     L" + (x - 0.5 * w) + " " + (y + 0.866 * w) + "\n     L" + (x - w) + " " + y + "\n     Z",
+        "M".concat(x - 0.5 * w, " ").concat(y - 0.866 * w, "\n     L").concat(x + 0.5 * w, " ").concat(y - 0.866 * w, "\n     L").concat(x + w, " ").concat(y, "\n     L").concat(x + 0.5 * w, " ").concat(y + 0.866 * w, "\n     L").concat(x - 0.5 * w, " ").concat(y + 0.866 * w, "\n     L").concat(x - w, " ").concat(y, "\n     Z"),
         //pentagon
-        "M" + x + " " + (y - 0.851 * w) + "\n     L" + (x + 0.6884 * w) + " " + (y - 0.2633 * w) + "\n     L" + (x + 0.5001 * w) + " " + (y + 0.6884 * w) + "\n     L" + (x - 0.5001 * w) + " " + (y + 0.6884 * w) + "\n     L" + (x - 0.6884 * w) + " " + (y - 0.2633 * w) + "\n     Z",
+        "M".concat(x, " ").concat(y - 0.851 * w, "\n     L").concat(x + 0.6884 * w, " ").concat(y - 0.2633 * w, "\n     L").concat(x + 0.5001 * w, " ").concat(y + 0.6884 * w, "\n     L").concat(x - 0.5001 * w, " ").concat(y + 0.6884 * w, "\n     L").concat(x - 0.6884 * w, " ").concat(y - 0.2633 * w, "\n     Z"),
         //octagon
-        "M" + (x - 0.5001 * w) + " " + (y - 1.207 * w) + "\n     L" + (x + 0.5001 * w) + " " + (y - 1.207 * w) + "\n     L" + (x + 1.207 * w) + " " + (y - 0.5001 * w) + "\n     L" + (x + 1.207 * w) + " " + (y + 0.5001 * w) + "\n     L" + (x + 0.5001 * w) + " " + (y + 1.207 * w) + "\n     L" + (x - 0.5001 * w) + " " + (y + 1.207 * w) + "\n     L" + (x - 1.207 * w) + " " + (y + 0.5001 * w) + "\n     L" + (x - 1.207 * w) + " " + (y - 0.5001 * w) + "\n     Z",
+        "M".concat(x - 0.5001 * w, " ").concat(y - 1.207 * w, "\n     L").concat(x + 0.5001 * w, " ").concat(y - 1.207 * w, "\n     L").concat(x + 1.207 * w, " ").concat(y - 0.5001 * w, "\n     L").concat(x + 1.207 * w, " ").concat(y + 0.5001 * w, "\n     L").concat(x + 0.5001 * w, " ").concat(y + 1.207 * w, "\n     L").concat(x - 0.5001 * w, " ").concat(y + 1.207 * w, "\n     L").concat(x - 1.207 * w, " ").concat(y + 0.5001 * w, "\n     L").concat(x - 1.207 * w, " ").concat(y - 0.5001 * w, "\n     Z"),
     ];
     return allPointPaths[index];
 };
@@ -199,7 +199,7 @@ var LineChartBase = /** @class */ (function (_super) {
                     var opacity = _this_1._legendHighlighted(colorFillBar.legend) || _this_1._noLegendHighlighted() || _this_1.state.isSelectedLegend
                         ? _this_1._getColorFillBarOpacity(colorFillBar)
                         : 0.1;
-                    colorFillBars.push(React.createElement("rect", { fill: colorFillBar.applyPattern ? "url(#" + _this_1._colorFillBarPatternId + "_" + i + ")" : color, fillOpacity: opacity, x: _this_1._xAxisScale(startX), y: _this_1._yAxisScale(yMinMaxValues.endValue) - FILL_Y_PADDING, width: Math.abs(_this_1._xAxisScale(endX) - _this_1._xAxisScale(startX)), height: _this_1._yAxisScale(_this_1.props.yMinValue || 0) - _this_1._yAxisScale(yMinMaxValues.endValue) + FILL_Y_PADDING, key: "" + colorFillBarId + j }));
+                    colorFillBars.push(React.createElement("rect", { fill: colorFillBar.applyPattern ? "url(#".concat(_this_1._colorFillBarPatternId, "_").concat(i, ")") : color, fillOpacity: opacity, x: _this_1._xAxisScale(startX), y: _this_1._yAxisScale(yMinMaxValues.endValue) - FILL_Y_PADDING, width: Math.abs(_this_1._xAxisScale(endX) - _this_1._xAxisScale(startX)), height: _this_1._yAxisScale(_this_1.props.yMinValue || 0) - _this_1._yAxisScale(yMinMaxValues.endValue) + FILL_Y_PADDING, key: "".concat(colorFillBarId).concat(j) }));
                 }
             }
             return colorFillBars;
@@ -208,7 +208,7 @@ var LineChartBase = /** @class */ (function (_super) {
             // This describes a tile pattern that resembles diagonal stripes
             // For more information: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
             var stripePath = 'M-4,4 l8,-8 M0,16 l16,-16 M12,20 l8,-8';
-            return (React.createElement("pattern", { id: _this_1._colorFillBarPatternId + "_" + id, width: 16, height: 16, key: _this_1._colorFillBarPatternId + "_" + id, patternUnits: 'userSpaceOnUse' },
+            return (React.createElement("pattern", { id: "".concat(_this_1._colorFillBarPatternId, "_").concat(id), width: 16, height: 16, key: "".concat(_this_1._colorFillBarPatternId, "_").concat(id), patternUnits: 'userSpaceOnUse' },
                 React.createElement("path", { d: stripePath, stroke: color, strokeWidth: 1.25 })));
         };
         _this_1._checkInGap = function (pointIndex, gaps, currentGapIndex) {
@@ -281,19 +281,19 @@ var LineChartBase = /** @class */ (function (_super) {
                         _this_1.state.nearestCircleToHighlight.y !== pointToHighlight.y));
             // if no points need to be called out then don't show vertical line and callout card
             if (found && pointToHighlightUpdated) {
-                _this_1._uniqueCallOutID = "#" + _this_1._staticHighlightCircle + "_" + linenumber;
-                d3Select("#" + _this_1._staticHighlightCircle + "_" + linenumber)
-                    .attr('cx', "" + _this_1._xAxisScale(pointToHighlight.x))
-                    .attr('cy', "" + _this_1._yAxisScale(pointToHighlight.y))
+                _this_1._uniqueCallOutID = "#".concat(_this_1._staticHighlightCircle, "_").concat(linenumber);
+                d3Select("#".concat(_this_1._staticHighlightCircle, "_").concat(linenumber))
+                    .attr('cx', "".concat(_this_1._xAxisScale(pointToHighlight.x)))
+                    .attr('cy', "".concat(_this_1._yAxisScale(pointToHighlight.y)))
                     .attr('visibility', 'visibility');
-                d3Select("#" + _this_1._verticalLine)
-                    .attr('transform', function () { return "translate(" + _this_1._xAxisScale(pointToHighlight.x) + ", " + _this_1._yAxisScale(pointToHighlight.y) + ")"; })
+                d3Select("#".concat(_this_1._verticalLine))
+                    .attr('transform', function () { return "translate(".concat(_this_1._xAxisScale(pointToHighlight.x), ", ").concat(_this_1._yAxisScale(pointToHighlight.y), ")"); })
                     .attr('visibility', 'visibility')
-                    .attr('y2', "" + (lineHeight - _this_1._yAxisScale(pointToHighlight.y)));
+                    .attr('y2', "".concat(lineHeight - _this_1._yAxisScale(pointToHighlight.y)));
                 _this_1.setState({
                     nearestCircleToHighlight: pointToHighlight,
                     isCalloutVisible: true,
-                    refSelected: "#" + _this_1._staticHighlightCircle + "_" + linenumber,
+                    refSelected: "#".concat(_this_1._staticHighlightCircle, "_").concat(linenumber),
                     stackCalloutProps: found,
                     YValueHover: found.values,
                     dataPointCalloutProps: found,
@@ -320,8 +320,8 @@ var LineChartBase = /** @class */ (function (_super) {
             // if no points need to be called out then don't show vertical line and callout card
             if (found) {
                 var _this_2 = _this_1;
-                d3Select("#" + _this_1._verticalLine)
-                    .attr('transform', function () { return "translate(" + _this_2._xAxisScale(x) + ", 0)"; })
+                d3Select("#".concat(_this_1._verticalLine))
+                    .attr('transform', function () { return "translate(".concat(_this_2._xAxisScale(x), ", 0)"); })
                     .attr('visibility', 'visibility');
                 _this_1._refArray.forEach(function (obj) {
                     if (obj.index === lineId) {
@@ -352,15 +352,15 @@ var LineChartBase = /** @class */ (function (_super) {
             var found = find(_this_1._calloutPoints, function (element) { return element.x === xVal; });
             // if no points need to be called out then don't show vertical line and callout card
             if (found) {
-                d3Select("#" + _this_1._verticalLine)
-                    .attr('transform', function () { return "translate(" + _this._xAxisScale(x) + ", " + _this._yAxisScale(y) + ")"; })
+                d3Select("#".concat(_this_1._verticalLine))
+                    .attr('transform', function () { return "translate(".concat(_this._xAxisScale(x), ", ").concat(_this._yAxisScale(y), ")"); })
                     .attr('visibility', 'visibility')
-                    .attr('y2', "" + (lineHeight - _this._yAxisScale(y)));
+                    .attr('y2', "".concat(lineHeight - _this._yAxisScale(y)));
                 if (_this_1._uniqueCallOutID !== circleId) {
                     _this_1._uniqueCallOutID = circleId;
                     _this_1.setState({
                         isCalloutVisible: true,
-                        refSelected: "#" + circleId,
+                        refSelected: "#".concat(circleId),
                         hoverXValue: xAxisCalloutData ? xAxisCalloutData : '' + formattedData,
                         YValueHover: found.values,
                         stackCalloutProps: found,
@@ -393,7 +393,7 @@ var LineChartBase = /** @class */ (function (_super) {
             return {};
         };
         _this_1._handleMouseOut = function () {
-            d3Select("#" + _this_1._verticalLine).attr('visibility', 'hidden');
+            d3Select("#".concat(_this_1._verticalLine)).attr('visibility', 'hidden');
         };
         _this_1._handleChartMouseLeave = function () {
             _this_1._uniqueCallOutID = null;
@@ -419,7 +419,7 @@ var LineChartBase = /** @class */ (function (_super) {
             }, -1);
             var selectedLines;
             if (selectedLineIndex === -1) {
-                selectedLines = __spreadArray(__spreadArray([], _this_1.state.selectedLegendPoints), [selectedLine]);
+                selectedLines = __spreadArray(__spreadArray([], _this_1.state.selectedLegendPoints, true), [selectedLine], false);
             }
             else {
                 selectedLines = _this_1.state.selectedLegendPoints
@@ -459,7 +459,7 @@ var LineChartBase = /** @class */ (function (_super) {
             }, -1);
             var selectedColorFillBars;
             if (selectedColorFillBarIndex === -1) {
-                selectedColorFillBars = __spreadArray(__spreadArray([], _this_1.state.selectedColorBarLegend), [selectedColorFillBar]);
+                selectedColorFillBars = __spreadArray(__spreadArray([], _this_1.state.selectedColorBarLegend, true), [selectedColorFillBar], false);
             }
             else {
                 selectedColorFillBars = _this_1.state.selectedColorBarLegend
@@ -521,7 +521,7 @@ var LineChartBase = /** @class */ (function (_super) {
             var xValue = point.xAxisCalloutData || formattedDate;
             var legend = line.legend;
             var yValue = point.yAxisCalloutData || point.y;
-            return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || xValue + ". " + legend + ", " + yValue + ".";
+            return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || "".concat(xValue, ". ").concat(legend, ", ").concat(yValue, ".");
         };
         _this_1.state = {
             hoverXValue: '',
@@ -576,7 +576,7 @@ var LineChartBase = /** @class */ (function (_super) {
             this._calloutPoints = calloutData(points);
         }
         var legendBars = this._createLegends(this._points);
-        var calloutProps = __assign({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: DirectionalHint.topAutoEdge, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, id: "toolTip" + this._uniqueCallOutID, target: this.state.refSelected, isBeakVisible: false, gapSpace: 15, onDismiss: this._closeCallout, preventDismissOnEvent: function () { return true; }, hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible), descriptionMessage: this.props.getCalloutDescriptionMessage && this.state.stackCalloutProps
+        var calloutProps = __assign({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: DirectionalHint.topAutoEdge, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, id: "toolTip".concat(this._uniqueCallOutID), target: this.state.refSelected, isBeakVisible: false, gapSpace: 15, onDismiss: this._closeCallout, preventDismissOnEvent: function () { return true; }, hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible), descriptionMessage: this.props.getCalloutDescriptionMessage && this.state.stackCalloutProps
                 ? this.props.getCalloutDescriptionMessage(this.state.stackCalloutProps)
                 : undefined, 'data-is-focusable': true, xAxisCalloutAccessibilityData: this.state.xAxisCalloutAccessibilityData }, this.props.calloutProps);
         var tickParams = {
@@ -655,7 +655,7 @@ var LineChartBase = /** @class */ (function (_super) {
                 return legend;
             })
             : [];
-        var legends = (React.createElement(Legends, __assign({ legends: __spreadArray(__spreadArray([], legendDataItems), colorFillBarsLegendDataItems), enabledWrapLines: this.props.enabledLegendsWrapLines, overflowProps: this.props.legendsOverflowProps, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, (isLegendMultiSelectEnabled && { onLegendHoverCardLeave: this._onHoverCardHide }), this.props.legendProps)));
+        var legends = (React.createElement(Legends, __assign({ legends: __spreadArray(__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 legends;
     };
     LineChartBase.prototype._createLines = function (xElement, containerHeight) {
@@ -679,7 +679,7 @@ var LineChartBase = /** @class */ (function (_super) {
             var verticaLineHeight = containerHeight - this_1.margins.bottom + 6;
             if (this_1._points[i].data.length === 1) {
                 var _0 = this_1._points[i].data[0], x1_1 = _0.x, y1 = _0.y, xAxisCalloutData_1 = _0.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _0.xAxisCalloutAccessibilityData;
-                var circleId_1 = this_1._circleId + "_" + i;
+                var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
                 pointsForLine.push(React.createElement("circle", __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.palette.white : lineColor, 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": true, 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))));
@@ -694,8 +694,8 @@ var LineChartBase = /** @class */ (function (_super) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     .y(function (d) { return _this_1._yAxisScale(d[1]); })
                     .curve(d3curveLinear);
-                var lineId = this_1._lineId + "_" + i;
-                var borderId = this_1._borderId + "_" + i;
+                var lineId = "".concat(this_1._lineId, "_").concat(i);
+                var borderId = "".concat(this_1._borderId, "_").concat(i);
                 var strokeWidth = ((_c = this_1._points[i].lineOptions) === null || _c === void 0 ? void 0 : _c.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
                 var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
                 var lineData = [];
@@ -714,22 +714,22 @@ var LineChartBase = /** @class */ (function (_super) {
                     if (lineBorderWidth > 0) {
                         bordersForLine.push(React.createElement("path", { id: borderId, key: borderId, d: line(lineData), fill: "transparent", strokeLinecap: (_f = (_e = this_1._points[i].lineOptions) === null || _e === void 0 ? void 0 : _e.strokeLinecap) !== null && _f !== void 0 ? _f : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_g = this_1._points[i].lineOptions) === null || _g === void 0 ? void 0 : _g.lineBorderColor) || theme.palette.white, opacity: 1 }));
                     }
-                    linesForLine.push(React.createElement("path", __assign({ id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_j = (_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.strokeLinecap) !== null && _j !== void 0 ? _j : 'round', onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOut: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].onLineClick), { opacity: 1, role: "img", "aria-label": legendVal + ", series " + (i + 1) + " of " + this_1._points.length + " with " + this_1._points[i].data.length + " data points." })));
+                    linesForLine.push(React.createElement("path", __assign({ id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_j = (_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.strokeLinecap) !== null && _j !== void 0 ? _j : 'round', onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOut: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].onLineClick), { opacity: 1, role: "img", "aria-label": "".concat(legendVal, ", series ").concat(i + 1, " of ").concat(this_1._points.length, " with ").concat(this_1._points[i].data.length, " data points.") })));
                 }
                 else {
-                    linesForLine.push(React.createElement("path", { id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_l = (_k = this_1._points[i].lineOptions) === null || _k === void 0 ? void 0 : _k.strokeLinecap) !== null && _l !== void 0 ? _l : 'round', opacity: 0.1, role: "img", "aria-label": legendVal + ", series " + (i + 1) + " of " + this_1._points.length + " with " + this_1._points[i].data.length + " data points." }));
+                    linesForLine.push(React.createElement("path", { id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_l = (_k = this_1._points[i].lineOptions) === null || _k === void 0 ? void 0 : _k.strokeLinecap) !== null && _l !== void 0 ? _l : 'round', opacity: 0.1, role: "img", "aria-label": "".concat(legendVal, ", series ").concat(i + 1, " of ").concat(this_1._points.length, " with ").concat(this_1._points[i].data.length, " data points.") }));
                 }
                 var isPointHighlighted = this_1.state.activeLine !== null && this_1.state.activeLine === i;
-                pointsForLine.push(React.createElement("circle", { id: this_1._staticHighlightCircle + "_" + i, key: this_1._staticHighlightCircle + "_" + i, r: 5.5, cx: 0, cy: 0, fill: theme.palette.white, strokeWidth: DEFAULT_LINE_STROKE_SIZE, stroke: lineColor, visibility: isPointHighlighted ? 'visibility' : 'hidden', onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOut: this_1._handleMouseOut }));
+                pointsForLine.push(React.createElement("circle", { id: "".concat(this_1._staticHighlightCircle, "_").concat(i), key: "".concat(this_1._staticHighlightCircle, "_").concat(i), r: 5.5, cx: 0, cy: 0, fill: theme.palette.white, strokeWidth: DEFAULT_LINE_STROKE_SIZE, stroke: lineColor, visibility: isPointHighlighted ? 'visibility' : 'hidden', onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOut: this_1._handleMouseOut }));
             }
             else if (!this_1.props.optimizeLargeData) {
                 var _loop_2 = function (j) {
                     var gapResult = this_1._checkInGap(j, gaps, gapIndex);
                     var isInGap = gapResult.isInGap;
                     gapIndex = gapResult.gapIndex;
-                    var lineId = this_1._lineId + "_" + i + "_" + j;
-                    var borderId = this_1._borderId + "_" + i + "_" + j;
-                    var circleId = this_1._circleId + "_" + i + "_" + j;
+                    var lineId = "".concat(this_1._lineId, "_").concat(i, "_").concat(j);
+                    var borderId = "".concat(this_1._borderId, "_").concat(i, "_").concat(j);
+                    var circleId = "".concat(this_1._circleId, "_").concat(i, "_").concat(j);
                     var _1 = this_1._points[i].data[j - 1], x1 = _1.x, y1 = _1.y, xAxisCalloutData = _1.xAxisCalloutData, xAxisCalloutAccessibilityData = _1.xAxisCalloutAccessibilityData;
                     var _2 = this_1._points[i].data[j], x2 = _2.x, y2 = _2.y;
                     var path = this_1._getPath(this_1._xAxisScale(x1), this_1._yAxisScale(y1), circleId, j, false, this_1._points[i].index);
@@ -739,7 +739,7 @@ var LineChartBase = /** @class */ (function (_super) {
                     pointsForLine.push(React.createElement("path", __assign({ id: circleId, key: circleId, d: path, "data-is-focusable": true, 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 = "" + circleId + j + "L";
+                        var lastCircleId_1 = "".concat(circleId).concat(j, "L");
                         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 _3 = this_1._points[i].data[j], lastCirlceXCallout_1 = _3.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _3.xAxisCalloutAccessibilityData;
@@ -772,7 +772,7 @@ var LineChartBase = /** @class */ (function (_super) {
                     _loop_2(j);
                 }
             }
-            lines.push.apply(lines, __spreadArray(__spreadArray(__spreadArray([], bordersForLine), linesForLine), pointsForLine));
+            lines.push.apply(lines, __spreadArray(__spreadArray(__spreadArray([], bordersForLine, false), linesForLine, false), pointsForLine, false));
         };
         var this_1 = this;
         for (var i = this._points.length - 1; i >= 0; i--) {