@fluentui/react-charting 5.7.13 → 5.7.17

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 (120) hide show
  1. package/CHANGELOG.json +67 -1
  2. package/CHANGELOG.md +39 -2
  3. package/dist/react-charting.js +1 -1
  4. package/dist/react-charting.min.js +1 -1
  5. package/lib/components/AreaChart/AreaChart.base.d.ts +2 -0
  6. package/lib/components/AreaChart/AreaChart.base.js +44 -11
  7. package/lib/components/AreaChart/AreaChart.base.js.map +1 -1
  8. package/lib/components/CommonComponents/CartesianChart.base.js +1 -1
  9. package/lib/components/CommonComponents/CartesianChart.base.js.map +1 -1
  10. package/lib/components/CommonComponents/CartesianChart.styles.js +2 -0
  11. package/lib/components/CommonComponents/CartesianChart.styles.js.map +1 -1
  12. package/lib/components/CommonComponents/CartesianChart.types.d.ts +4 -0
  13. package/lib/components/CommonComponents/CartesianChart.types.js.map +1 -1
  14. package/lib/components/DonutChart/DonutChart.base.d.ts +2 -0
  15. package/lib/components/DonutChart/DonutChart.base.js +22 -15
  16. package/lib/components/DonutChart/DonutChart.base.js.map +1 -1
  17. package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.d.ts +2 -0
  18. package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js +12 -4
  19. package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js.map +1 -1
  20. package/lib/components/HeatMapChart/HeatMapChart.base.d.ts +2 -0
  21. package/lib/components/HeatMapChart/HeatMapChart.base.js +19 -12
  22. package/lib/components/HeatMapChart/HeatMapChart.base.js.map +1 -1
  23. package/lib/components/HorizontalBarChart/HorizontalBarChart.base.d.ts +2 -0
  24. package/lib/components/HorizontalBarChart/HorizontalBarChart.base.js +16 -11
  25. package/lib/components/HorizontalBarChart/HorizontalBarChart.base.js.map +1 -1
  26. package/lib/components/LineChart/LineChart.base.d.ts +1 -0
  27. package/lib/components/LineChart/LineChart.base.js +36 -27
  28. package/lib/components/LineChart/LineChart.base.js.map +1 -1
  29. package/lib/components/StackedBarChart/MultiStackedBarChart.base.d.ts +2 -0
  30. package/lib/components/StackedBarChart/MultiStackedBarChart.base.js +12 -6
  31. package/lib/components/StackedBarChart/MultiStackedBarChart.base.js.map +1 -1
  32. package/lib/components/StackedBarChart/StackedBarChart.base.d.ts +2 -0
  33. package/lib/components/StackedBarChart/StackedBarChart.base.js +12 -6
  34. package/lib/components/StackedBarChart/StackedBarChart.base.js.map +1 -1
  35. package/lib/components/VerticalBarChart/VerticalBarChart.base.d.ts +2 -0
  36. package/lib/components/VerticalBarChart/VerticalBarChart.base.js +9 -3
  37. package/lib/components/VerticalBarChart/VerticalBarChart.base.js.map +1 -1
  38. package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.base.d.ts +2 -0
  39. package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +9 -3
  40. package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
  41. package/lib/version.js +1 -1
  42. package/lib/version.js.map +1 -1
  43. package/lib-amd/components/AreaChart/AreaChart.base.d.ts +2 -0
  44. package/lib-amd/components/AreaChart/AreaChart.base.js +44 -11
  45. package/lib-amd/components/AreaChart/AreaChart.base.js.map +1 -1
  46. package/lib-amd/components/CommonComponents/CartesianChart.base.js +1 -1
  47. package/lib-amd/components/CommonComponents/CartesianChart.base.js.map +1 -1
  48. package/lib-amd/components/CommonComponents/CartesianChart.styles.js +2 -0
  49. package/lib-amd/components/CommonComponents/CartesianChart.styles.js.map +1 -1
  50. package/lib-amd/components/CommonComponents/CartesianChart.types.d.ts +4 -0
  51. package/lib-amd/components/CommonComponents/CartesianChart.types.js.map +1 -1
  52. package/lib-amd/components/DonutChart/DonutChart.base.d.ts +2 -0
  53. package/lib-amd/components/DonutChart/DonutChart.base.js +22 -15
  54. package/lib-amd/components/DonutChart/DonutChart.base.js.map +1 -1
  55. package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.d.ts +2 -0
  56. package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js +12 -4
  57. package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js.map +1 -1
  58. package/lib-amd/components/HeatMapChart/HeatMapChart.base.d.ts +2 -0
  59. package/lib-amd/components/HeatMapChart/HeatMapChart.base.js +19 -12
  60. package/lib-amd/components/HeatMapChart/HeatMapChart.base.js.map +1 -1
  61. package/lib-amd/components/HorizontalBarChart/HorizontalBarChart.base.d.ts +2 -0
  62. package/lib-amd/components/HorizontalBarChart/HorizontalBarChart.base.js +16 -11
  63. package/lib-amd/components/HorizontalBarChart/HorizontalBarChart.base.js.map +1 -1
  64. package/lib-amd/components/LineChart/LineChart.base.d.ts +1 -0
  65. package/lib-amd/components/LineChart/LineChart.base.js +35 -26
  66. package/lib-amd/components/LineChart/LineChart.base.js.map +1 -1
  67. package/lib-amd/components/StackedBarChart/MultiStackedBarChart.base.d.ts +2 -0
  68. package/lib-amd/components/StackedBarChart/MultiStackedBarChart.base.js +12 -6
  69. package/lib-amd/components/StackedBarChart/MultiStackedBarChart.base.js.map +1 -1
  70. package/lib-amd/components/StackedBarChart/StackedBarChart.base.d.ts +2 -0
  71. package/lib-amd/components/StackedBarChart/StackedBarChart.base.js +12 -6
  72. package/lib-amd/components/StackedBarChart/StackedBarChart.base.js.map +1 -1
  73. package/lib-amd/components/VerticalBarChart/VerticalBarChart.base.d.ts +2 -0
  74. package/lib-amd/components/VerticalBarChart/VerticalBarChart.base.js +9 -3
  75. package/lib-amd/components/VerticalBarChart/VerticalBarChart.base.js.map +1 -1
  76. package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.base.d.ts +2 -0
  77. package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +9 -3
  78. package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
  79. package/lib-amd/version.js +1 -1
  80. package/lib-amd/version.js.map +1 -1
  81. package/lib-commonjs/components/AreaChart/AreaChart.base.d.ts +2 -0
  82. package/lib-commonjs/components/AreaChart/AreaChart.base.js +44 -11
  83. package/lib-commonjs/components/AreaChart/AreaChart.base.js.map +1 -1
  84. package/lib-commonjs/components/CommonComponents/CartesianChart.base.js +1 -1
  85. package/lib-commonjs/components/CommonComponents/CartesianChart.base.js.map +1 -1
  86. package/lib-commonjs/components/CommonComponents/CartesianChart.styles.js +2 -0
  87. package/lib-commonjs/components/CommonComponents/CartesianChart.styles.js.map +1 -1
  88. package/lib-commonjs/components/CommonComponents/CartesianChart.types.d.ts +4 -0
  89. package/lib-commonjs/components/CommonComponents/CartesianChart.types.js.map +1 -1
  90. package/lib-commonjs/components/DonutChart/DonutChart.base.d.ts +2 -0
  91. package/lib-commonjs/components/DonutChart/DonutChart.base.js +22 -15
  92. package/lib-commonjs/components/DonutChart/DonutChart.base.js.map +1 -1
  93. package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.d.ts +2 -0
  94. package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js +12 -4
  95. package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js.map +1 -1
  96. package/lib-commonjs/components/HeatMapChart/HeatMapChart.base.d.ts +2 -0
  97. package/lib-commonjs/components/HeatMapChart/HeatMapChart.base.js +19 -12
  98. package/lib-commonjs/components/HeatMapChart/HeatMapChart.base.js.map +1 -1
  99. package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.base.d.ts +2 -0
  100. package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.base.js +16 -11
  101. package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.base.js.map +1 -1
  102. package/lib-commonjs/components/LineChart/LineChart.base.d.ts +1 -0
  103. package/lib-commonjs/components/LineChart/LineChart.base.js +35 -26
  104. package/lib-commonjs/components/LineChart/LineChart.base.js.map +1 -1
  105. package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.base.d.ts +2 -0
  106. package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.base.js +12 -6
  107. package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.base.js.map +1 -1
  108. package/lib-commonjs/components/StackedBarChart/StackedBarChart.base.d.ts +2 -0
  109. package/lib-commonjs/components/StackedBarChart/StackedBarChart.base.js +12 -6
  110. package/lib-commonjs/components/StackedBarChart/StackedBarChart.base.js.map +1 -1
  111. package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.base.d.ts +2 -0
  112. package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.base.js +9 -3
  113. package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.base.js.map +1 -1
  114. package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.base.d.ts +2 -0
  115. package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +9 -3
  116. package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
  117. package/lib-commonjs/version.js +1 -1
  118. package/lib-commonjs/version.js.map +1 -1
  119. package/package.json +4 -4
  120. package/src/components/CommonComponents/CartesianChart.types.ts +5 -0
package/lib-amd/components/HorizontalBarChart/HorizontalBarChart.base.js CHANGED
@@ -7,6 +7,18 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
7
7
  tslib_1.__extends(HorizontalBarChartBase, _super);
8
8
  function HorizontalBarChartBase(props) {
9
9
  var _this = _super.call(this, props) || this;
10
+ _this._handleChartMouseLeave = function () {
11
+ _this._calloutAnchorPoint = null;
12
+ if (_this.state.isCalloutVisible) {
13
+ _this.setState({
14
+ isCalloutVisible: false,
15
+ hoverValue: '',
16
+ refSelected: null,
17
+ lineColor: '',
18
+ legend: '',
19
+ });
20
+ }
21
+ };
10
22
  _this._adjustProps = function () {
11
23
  _this._barHeight = _this.props.barHeight || 8;
12
24
  _this._classNames = getClassNames(_this.props.styles, {
@@ -59,7 +71,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
59
71
  this._adjustProps();
60
72
  var palette = theme.palette;
61
73
  var datapoint = 0;
62
- return (React.createElement("div", { className: this._classNames.root },
74
+ return (React.createElement("div", { className: this._classNames.root, onMouseLeave: this._handleChartMouseLeave },
63
75
  data.map(function (points, index) {
64
76
  if (points.chartData && points.chartData[0] && points.chartData[0].horizontalBarChartdata.x) {
65
77
  datapoint = points.chartData[0].horizontalBarChartdata.x;
@@ -105,8 +117,9 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
105
117
  this._refArray.push({ index: legendTitle, refElement: element });
106
118
  };
107
119
  HorizontalBarChartBase.prototype._hoverOn = function (hoverValue, point) {
108
- if (!this.state.isCalloutVisible || this.state.legend !== point.legend) {
120
+ if ((!this.state.isCalloutVisible || this.state.legend !== point.legend) && this._calloutAnchorPoint !== point) {
109
121
  var currentHoveredElement = Utilities_1.find(this._refArray, function (currentElement) { return currentElement.index === point.legend; });
122
+ this._calloutAnchorPoint = point;
110
123
  this.setState({
111
124
  isCalloutVisible: true,
112
125
  hoverValue: hoverValue,
@@ -121,15 +134,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
121
134
  }
122
135
  };
123
136
  HorizontalBarChartBase.prototype._hoverOff = function () {
124
- if (this.state.isCalloutVisible) {
125
- this.setState({
126
- isCalloutVisible: false,
127
- hoverValue: '',
128
- refSelected: null,
129
- lineColor: '',
130
- legend: '',
131
- });
132
- }
137
+ /**/
133
138
  };
134
139
  HorizontalBarChartBase.prototype._getDefaultTextData = function (data) {
135
140
  var culture = this.props.culture;
package/lib-amd/components/HorizontalBarChart/HorizontalBarChart.base.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"HorizontalBarChart.base.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, find, getId } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport {\n IAccessibilityProps,\n IChartProps,\n IHorizontalBarChartProps,\n IHorizontalBarChartStyleProps,\n IHorizontalBarChartStyles,\n IChartDataPoint,\n IRefArrayData,\n} from './index';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { ChartHoverCard, convertToLocaleString } from '../../utilities/index';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\n\nconst getClassNames = classNamesFunction<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>();\n\nexport interface IHorizontalBarChartState {\n isCalloutVisible: boolean;\n refSelected: SVGGElement | null | undefined;\n color: string;\n hoverValue: string | number | Date | null;\n lineColor: string;\n legend: string | null;\n xCalloutValue?: string;\n yCalloutValue?: string;\n barCalloutProps?: IChartDataPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport class HorizontalBarChartBase extends React.Component<IHorizontalBarChartProps, IHorizontalBarChartState> {\n private _barHeight: number;\n private _classNames: IProcessedStyleSet<IHorizontalBarChartStyles>;\n private _uniqLineText: string;\n private _calloutId: string;\n private _refArray: IRefArrayData[];\n\n constructor(props: IHorizontalBarChartProps) {\n super(props);\n this.state = {\n isCalloutVisible: false,\n hoverValue: '',\n lineColor: '',\n legend: '',\n refSelected: null,\n // eslint-disable-next-line react/no-unused-state\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\n };\n this._refArray = [];\n this._uniqLineText = '_HorizontalLine_' + Math.random().toString(36).substring(7);\n this._hoverOff = this._hoverOff.bind(this);\n this._calloutId = getId('callout');\n }\n\n public render(): JSX.Element {\n const { data, theme } = this.props;\n this._adjustProps();\n const { palette } = theme!;\n let datapoint: number | undefined = 0;\n return (\n <div className={this._classNames.root}>\n {data!.map((points: IChartProps, index: number) => {\n if (points.chartData && points.chartData![0] && points.chartData![0].horizontalBarChartdata!.x) {\n datapoint = points.chartData![0].horizontalBarChartdata!.x;\n } else {\n datapoint = 0;\n }\n points.chartData![1] = {\n legend: '',\n horizontalBarChartdata: {\n x: points.chartData![0].horizontalBarChartdata!.y - datapoint!,\n y: points.chartData![0].horizontalBarChartdata!.y,\n },\n color: palette.neutralTertiaryAlt,\n };\n\n const chartDataText = this._getChartDataText(points!);\n const bars = this._createBars(points!, palette);\n const keyVal = this._uniqLineText + '_' + index;\n\n return (\n <div key={index} className={this._classNames.items}>\n <div className={this._classNames.items}>\n <FocusZone direction={FocusZoneDirection.horizontal}>\n <div className={this._classNames.chartTitle}>\n {points!.chartTitle && (\n <div\n className={this._classNames.chartDataText}\n {...this._getAccessibleDataObject(points!.chartTitleAccessibilityData)}\n >\n {points!.chartTitle}\n </div>\n )}\n {chartDataText}\n </div>\n </FocusZone>\n {points!.chartData![0].data && this._createBenchmark(points!)}\n <FocusZone direction={FocusZoneDirection.horizontal}>\n <svg className={this._classNames.chart} aria-label={points!.chartTitle}>\n <g\n id={keyVal}\n key={keyVal}\n ref={(e: SVGGElement) => {\n this._refCallback(e, points!.chartData![0].legend);\n }}\n // NOTE: points.chartData![0] contains current data value\n onClick={() => {\n const p = points!.chartData![0];\n if (p && p.onClick) {\n p.onClick();\n }\n }}\n className={this._classNames.barWrapper}\n >\n {bars}\n </g>\n </svg>\n </FocusZone>\n </div>\n </div>\n );\n })}\n <Callout\n target={this.state.refSelected}\n coverTarget={true}\n isBeakVisible={false}\n gapSpace={30}\n hidden={!(!this.props.hideTooltip && this.state.isCalloutVisible)}\n directionalHint={DirectionalHint.rightTopEdge}\n id={this._calloutId}\n onDismiss={this._closeCallout}\n preventDismissOnLostFocus={true}\n {...this.props.calloutProps!}\n {...this._getAccessibleDataObject(this.state.callOutAccessibilityData)}\n >\n <>\n {this.props.onRenderCalloutPerHorizontalBar ? (\n this.props.onRenderCalloutPerHorizontalBar(this.state.barCalloutProps)\n ) : (\n <ChartHoverCard\n Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend!}\n YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.hoverValue!}\n color={this.state.lineColor}\n culture={this.props.culture}\n />\n )}\n </>\n </Callout>\n </div>\n );\n }\n\n private _refCallback(element: SVGGElement, legendTitle: string | undefined): void {\n this._refArray.push({ index: legendTitle, refElement: element });\n }\n\n private _hoverOn(hoverValue: string | number | Date | null, point: IChartDataPoint): void {\n if (!this.state.isCalloutVisible || this.state.legend !== point.legend!) {\n const currentHoveredElement = find(\n this._refArray,\n (currentElement: IRefArrayData) => currentElement.index === point.legend,\n );\n this.setState({\n isCalloutVisible: true,\n hoverValue: hoverValue,\n lineColor: point.color!,\n legend: point.legend!,\n refSelected: currentHoveredElement!.refElement,\n xCalloutValue: point.xAxisCalloutData!,\n yCalloutValue: point.yAxisCalloutData!,\n barCalloutProps: point,\n callOutAccessibilityData: point.callOutAccessibilityData,\n });\n }\n }\n\n private _hoverOff(): void {\n if (this.state.isCalloutVisible) {\n this.setState({\n isCalloutVisible: false,\n hoverValue: '',\n refSelected: null,\n lineColor: '',\n legend: '',\n });\n }\n }\n\n private _adjustProps = (): void => {\n this._barHeight = this.props.barHeight || 8;\n this._classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n width: this.props.width,\n className: this.props.className,\n barHeight: this._barHeight,\n color: this.state.lineColor,\n });\n };\n\n private _getChartDataText = (data: IChartProps) => {\n return this.props.barChartCustomData ? (\n <div data-is-focusable={true} role=\"text\">\n {this.props.barChartCustomData(data)}\n </div>\n ) : (\n this._getDefaultTextData(data)\n );\n };\n\n private _getDefaultTextData(data: IChartProps): JSX.Element {\n const { culture } = this.props;\n const chartDataMode = this.props.chartDataMode || 'default';\n const chartData: IChartDataPoint = data!.chartData![0];\n const x = chartData.horizontalBarChartdata!.x;\n const y = chartData.horizontalBarChartdata!.y;\n\n const accessibilityData = this._getAccessibleDataObject(data.chartDataAccessibilityData!);\n switch (chartDataMode) {\n case 'default':\n return (\n <div className={this._classNames.chartDataText} {...accessibilityData}>\n {convertToLocaleString(x, culture)}\n </div>\n );\n case 'fraction':\n return (\n <div {...accessibilityData}>\n <span className={this._classNames.chartDataText}>{convertToLocaleString(x, culture)}</span>\n <span className={this._classNames.chartDataTextDenominator}>{'/' + convertToLocaleString(y, culture)}</span>\n </div>\n );\n case 'percentage':\n const dataRatioPercentage = `${convertToLocaleString(Math.round((x / y) * 100), culture)}%`;\n return (\n <div className={this._classNames.chartDataText} {...accessibilityData}>\n {dataRatioPercentage}\n </div>\n );\n }\n }\n\n private _createBenchmark(data: IChartProps): JSX.Element {\n const totalData = data.chartData![0].horizontalBarChartdata!.y;\n const benchmarkData = data.chartData![0].data;\n const benchmarkRatio = Math.round(((benchmarkData ? benchmarkData : 0) / totalData) * 100);\n\n const benchmarkStyles = {\n marginLeft: 'calc(' + benchmarkRatio + '% - 4px)',\n marginRight: 'calc(' + (100 - benchmarkRatio) + '% - 4px)',\n };\n\n return <div className={this._classNames.triangle} style={benchmarkStyles} />;\n }\n\n private _createBars(data: IChartProps, palette: IPalette): JSX.Element[] {\n const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n // calculating starting point of each bar and it's range\n const startingPoint: number[] = [];\n const total = data.chartData!.reduce(\n (acc: number, point: IChartDataPoint) =>\n acc + (point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0),\n 0,\n );\n let prevPosition = 0;\n let value = 0;\n\n const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {\n const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n if (index > 0) {\n prevPosition += value;\n }\n value = (pointData / total) * 100;\n if (value < 0) {\n value = 0;\n } else if (value < 1 && value !== 0) {\n value = 1;\n }\n startingPoint.push(prevPosition);\n if (value < 1) {\n return <React.Fragment key={index}> </React.Fragment>;\n }\n const xValue = point.horizontalBarChartdata!.x;\n return (\n <rect\n key={index}\n x={startingPoint[index] + '%'}\n y={0}\n data-is-focusable={point.legend !== '' ? true : false}\n width={value + '%'}\n height={this._barHeight}\n fill={color}\n onMouseOver={point.legend !== '' ? this._hoverOn.bind(this, xValue, point) : undefined}\n onFocus={point.legend !== '' ? this._hoverOn.bind(this, xValue, point) : undefined}\n aria-labelledby={this._calloutId}\n role=\"img\"\n aria-label=\"Horizontal bar chart\"\n onBlur={this._hoverOff}\n onMouseLeave={this._hoverOff}\n />\n );\n });\n return bars;\n }\n\n private _closeCallout = () => {\n this.setState({\n isCalloutVisible: false,\n });\n };\n\n private _getAccessibleDataObject = (accessibleData?: IAccessibilityProps, role: string = 'text') => {\n accessibleData = accessibleData ?? {};\n return {\n role,\n 'data-is-focusable': true,\n 'aria-label': accessibleData!.ariaLabel,\n 'aria-labelledby': accessibleData!.ariaLabelledBy,\n 'aria-describedby': accessibleData!.ariaDescribedBy,\n };\n };\n}\n"]}
1
+ {"version":3,"file":"HorizontalBarChart.base.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.base.tsx"],"names":[],"mappings":";;;;IAgBA,IAAM,aAAa,GAAG,8BAAkB,EAA4D,CAAC;IAerG;QAA4C,kDAAmE;QAQ7G,gCAAY,KAA+B;YAA3C,YACE,kBAAM,KAAK,CAAC,SAgBb;YAiIO,4BAAsB,GAAG;gBAC/B,KAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;gBAChC,IAAI,KAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;oBAC/B,KAAI,CAAC,QAAQ,CAAC;wBACZ,gBAAgB,EAAE,KAAK;wBACvB,UAAU,EAAE,EAAE;wBACd,WAAW,EAAE,IAAI;wBACjB,SAAS,EAAE,EAAE;wBACb,MAAM,EAAE,EAAE;qBACX,CAAC,CAAC;iBACJ;YACH,CAAC,CAAC;YAEM,kBAAY,GAAG;gBACrB,KAAI,CAAC,UAAU,GAAG,KAAI,CAAC,KAAK,CAAC,SAAS,IAAI,CAAC,CAAC;gBAC5C,KAAI,CAAC,WAAW,GAAG,aAAa,CAAC,KAAI,CAAC,KAAK,CAAC,MAAO,EAAE;oBACnD,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAM;oBACxB,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK;oBACvB,SAAS,EAAE,KAAI,CAAC,KAAK,CAAC,SAAS;oBAC/B,SAAS,EAAE,KAAI,CAAC,UAAU;oBAC1B,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,SAAS;iBAC5B,CAAC,CAAC;YACL,CAAC,CAAC;YAEM,uBAAiB,GAAG,UAAC,IAAiB;gBAC5C,OAAO,KAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACrC,kDAAwB,IAAI,EAAE,IAAI,EAAC,MAAM,IACtC,KAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAChC,CACP,CAAC,CAAC,CAAC,CACF,KAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAC/B,CAAC;YACJ,CAAC,CAAC;YAkGM,mBAAa,GAAG;gBACtB,KAAI,CAAC,QAAQ,CAAC;oBACZ,gBAAgB,EAAE,KAAK;iBACxB,CAAC,CAAC;YACL,CAAC,CAAC;YAEM,8BAAwB,GAAG,UAAC,cAAoC,EAAE,IAAqB;gBAArB,qBAAA,EAAA,aAAqB;gBAC7F,cAAc,GAAG,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC;gBACtC,OAAO;oBACL,IAAI,MAAA;oBACJ,mBAAmB,EAAE,IAAI;oBACzB,YAAY,EAAE,cAAe,CAAC,SAAS;oBACvC,iBAAiB,EAAE,cAAe,CAAC,cAAc;oBACjD,kBAAkB,EAAE,cAAe,CAAC,eAAe;iBACpD,CAAC;YACJ,CAAC,CAAC;YAjSA,KAAI,CAAC,KAAK,GAAG;gBACX,gBAAgB,EAAE,KAAK;gBACvB,UAAU,EAAE,EAAE;gBACd,SAAS,EAAE,EAAE;gBACb,MAAM,EAAE,EAAE;gBACV,WAAW,EAAE,IAAI;gBACjB,iDAAiD;gBACjD,KAAK,EAAE,EAAE;gBACT,aAAa,EAAE,EAAE;gBACjB,aAAa,EAAE,EAAE;aAClB,CAAC;YACF,KAAI,CAAC,SAAS,GAAG,EAAE,CAAC;YACpB,KAAI,CAAC,aAAa,GAAG,kBAAkB,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;YAClF,KAAI,CAAC,SAAS,GAAG,KAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;YAC3C,KAAI,CAAC,UAAU,GAAG,iBAAK,CAAC,SAAS,CAAC,CAAC;;QACrC,CAAC;QAEM,uCAAM,GAAb;YAAA,iBAgGC;YA/FO,IAAA,KAAkB,IAAI,CAAC,KAAK,EAA1B,IAAI,UAAA,EAAE,KAAK,WAAe,CAAC;YACnC,IAAI,CAAC,YAAY,EAAE,CAAC;YACZ,IAAA,OAAO,GAAK,KAAM,QAAX,CAAY;YAC3B,IAAI,SAAS,GAAuB,CAAC,CAAC;YACtC,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,sBAAsB;gBAC7E,IAAK,CAAC,GAAG,CAAC,UAAC,MAAmB,EAAE,KAAa;oBAC5C,IAAI,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,sBAAuB,CAAC,CAAC,EAAE;wBAC9F,SAAS,GAAG,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,sBAAuB,CAAC,CAAC,CAAC;qBAC5D;yBAAM;wBACL,SAAS,GAAG,CAAC,CAAC;qBACf;oBACD,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,GAAG;wBACrB,MAAM,EAAE,EAAE;wBACV,sBAAsB,EAAE;4BACtB,CAAC,EAAE,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,sBAAuB,CAAC,CAAC,GAAG,SAAU;4BAC9D,CAAC,EAAE,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,sBAAuB,CAAC,CAAC;yBAClD;wBACD,KAAK,EAAE,OAAO,CAAC,kBAAkB;qBAClC,CAAC;oBAEF,IAAM,aAAa,GAAG,KAAI,CAAC,iBAAiB,CAAC,MAAO,CAAC,CAAC;oBACtD,IAAM,IAAI,GAAG,KAAI,CAAC,WAAW,CAAC,MAAO,EAAE,OAAO,CAAC,CAAC;oBAChD,IAAM,MAAM,GAAG,KAAI,CAAC,aAAa,GAAG,GAAG,GAAG,KAAK,CAAC;oBAEhD,OAAO,CACL,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,KAAK;wBAChD,6BAAK,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,KAAK;4BACpC,oBAAC,uBAAS,IAAC,SAAS,EAAE,gCAAkB,CAAC,UAAU;gCACjD,6BAAK,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,UAAU;oCACxC,MAAO,CAAC,UAAU,IAAI,CACrB,8CACE,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,aAAa,IACrC,KAAI,CAAC,wBAAwB,CAAC,MAAO,CAAC,2BAA2B,CAAC,GAErE,MAAO,CAAC,UAAU,CACf,CACP;oCACA,aAAa,CACV,CACI;4BACX,MAAO,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,KAAI,CAAC,gBAAgB,CAAC,MAAO,CAAC;4BAC7D,oBAAC,uBAAS,IAAC,SAAS,EAAE,gCAAkB,CAAC,UAAU;gCACjD,6BAAK,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,KAAK,gBAAc,MAAO,CAAC,UAAU;oCACpE,2BACE,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,UAAC,CAAc;4CAClB,KAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAO,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;wCACrD,CAAC;wCACD,yDAAyD;wCACzD,OAAO,EAAE;4CACP,IAAM,CAAC,GAAG,MAAO,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC;4CAChC,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE;gDAClB,CAAC,CAAC,OAAO,EAAE,CAAC;6CACb;wCACH,CAAC,EACD,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,UAAU,IAErC,IAAI,CACH,CACA,CACI,CACR,CACF,CACP,CAAC;gBACJ,CAAC,CAAC;gBACF,oBAAC,iBAAO,qBACN,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,EAAE,EACZ,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,EACjE,eAAe,EAAE,yBAAe,CAAC,YAAY,EAC7C,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,yBAAyB,EAAE,IAAI,IAC3B,IAAI,CAAC,KAAK,CAAC,YAAa,EACxB,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC;oBAEtE,0CACG,IAAI,CAAC,KAAK,CAAC,+BAA+B,CAAC,CAAC,CAAC,CAC5C,IAAI,CAAC,KAAK,CAAC,+BAA+B,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CACvE,CAAC,CAAC,CAAC,CACF,oBAAC,sBAAc,IACb,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAO,EAChF,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAW,EACpF,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC3B,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAC3B,CACH,CACA,CACK,CACN,CACP,CAAC;QACJ,CAAC;QAEO,6CAAY,GAApB,UAAqB,OAAoB,EAAE,WAA+B;YACxE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC;QACnE,CAAC;QAEO,yCAAQ,GAAhB,UAAiB,UAAyC,EAAE,KAAsB;YAChF,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,MAAO,CAAC,IAAI,IAAI,CAAC,mBAAmB,KAAK,KAAK,EAAE;gBAC/G,IAAM,qBAAqB,GAAG,gBAAI,CAChC,IAAI,CAAC,SAAS,EACd,UAAC,cAA6B,IAAK,OAAA,cAAc,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,EAArC,CAAqC,CACzE,CAAC;gBACF,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;gBACjC,IAAI,CAAC,QAAQ,CAAC;oBACZ,gBAAgB,EAAE,IAAI;oBACtB,UAAU,EAAE,UAAU;oBACtB,SAAS,EAAE,KAAK,CAAC,KAAM;oBACvB,MAAM,EAAE,KAAK,CAAC,MAAO;oBACrB,WAAW,EAAE,qBAAsB,CAAC,UAAU;oBAC9C,aAAa,EAAE,KAAK,CAAC,gBAAiB;oBACtC,aAAa,EAAE,KAAK,CAAC,gBAAiB;oBACtC,eAAe,EAAE,KAAK;oBACtB,wBAAwB,EAAE,KAAK,CAAC,wBAAwB;iBACzD,CAAC,CAAC;aACJ;QACH,CAAC;QAEO,0CAAS,GAAjB;YACE,IAAI;QACN,CAAC;QAoCO,oDAAmB,GAA3B,UAA4B,IAAiB;YACnC,IAAA,OAAO,GAAK,IAAI,CAAC,KAAK,QAAf,CAAgB;YAC/B,IAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,SAAS,CAAC;YAC5D,IAAM,SAAS,GAAoB,IAAK,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC;YACvD,IAAM,CAAC,GAAG,SAAS,CAAC,sBAAuB,CAAC,CAAC,CAAC;YAC9C,IAAM,CAAC,GAAG,SAAS,CAAC,sBAAuB,CAAC,CAAC,CAAC;YAE9C,IAAM,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,0BAA2B,CAAC,CAAC;YAC1F,QAAQ,aAAa,EAAE;gBACrB,KAAK,SAAS;oBACZ,OAAO,CACL,8CAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,aAAa,IAAM,iBAAiB,GAClE,6BAAqB,CAAC,CAAC,EAAE,OAAO,CAAC,CAC9B,CACP,CAAC;gBACJ,KAAK,UAAU;oBACb,OAAO,CACL,gDAAS,iBAAiB;wBACxB,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,aAAa,IAAG,6BAAqB,CAAC,CAAC,EAAE,OAAO,CAAC,CAAQ;wBAC3F,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,wBAAwB,IAAG,GAAG,GAAG,6BAAqB,CAAC,CAAC,EAAE,OAAO,CAAC,CAAQ,CACxG,CACP,CAAC;gBACJ,KAAK,YAAY;oBACf,IAAM,mBAAmB,GAAM,6BAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,OAAO,CAAC,MAAG,CAAC;oBAC5F,OAAO,CACL,8CAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,aAAa,IAAM,iBAAiB,GAClE,mBAAmB,CAChB,CACP,CAAC;aACL;QACH,CAAC;QAEO,iDAAgB,GAAxB,UAAyB,IAAiB;YACxC,IAAM,SAAS,GAAG,IAAI,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,sBAAuB,CAAC,CAAC,CAAC;YAC/D,IAAM,aAAa,GAAG,IAAI,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAC9C,IAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,GAAG,CAAC,CAAC;YAE3F,IAAM,eAAe,GAAG;gBACtB,UAAU,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU;gBACjD,WAAW,EAAE,OAAO,GAAG,CAAC,GAAG,GAAG,cAAc,CAAC,GAAG,UAAU;aAC3D,CAAC;YAEF,OAAO,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,EAAE,eAAe,GAAI,CAAC;QAC/E,CAAC;QAEO,4CAAW,GAAnB,UAAoB,IAAiB,EAAE,OAAiB;YAAxD,iBAiDC;YAhDC,IAAM,cAAc,GAAa,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;YAChH,wDAAwD;YACxD,IAAM,aAAa,GAAa,EAAE,CAAC;YACnC,IAAM,KAAK,GAAG,IAAI,CAAC,SAAU,CAAC,MAAM,CAClC,UAAC,GAAW,EAAE,KAAsB;gBAClC,OAAA,GAAG,GAAG,CAAC,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAA7E,CAA6E,EAC/E,CAAC,CACF,CAAC;YACF,IAAI,YAAY,GAAG,CAAC,CAAC;YACrB,IAAI,KAAK,GAAG,CAAC,CAAC;YAEd,IAAM,IAAI,GAAG,IAAI,CAAC,SAAU,CAAC,GAAG,CAAC,UAAC,KAAsB,EAAE,KAAa;gBACrE,IAAM,KAAK,GAAW,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;gBACpG,IAAM,SAAS,GAAG,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACxF,IAAI,KAAK,GAAG,CAAC,EAAE;oBACb,YAAY,IAAI,KAAK,CAAC;iBACvB;gBACD,KAAK,GAAG,CAAC,SAAS,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;gBAClC,IAAI,KAAK,GAAG,CAAC,EAAE;oBACb,KAAK,GAAG,CAAC,CAAC;iBACX;qBAAM,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,KAAK,CAAC,EAAE;oBACnC,KAAK,GAAG,CAAC,CAAC;iBACX;gBACD,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;gBACjC,IAAI,KAAK,GAAG,CAAC,EAAE;oBACb,OAAO,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,KAAK,QAAoB,CAAC;iBACvD;gBACD,IAAM,MAAM,GAAG,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC;gBAC/C,OAAO,CACL,8BACE,GAAG,EAAE,KAAK,EACV,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,GAAG,EAC7B,CAAC,EAAE,CAAC,uBACe,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACrD,KAAK,EAAE,KAAK,GAAG,GAAG,EAClB,MAAM,EAAE,KAAI,CAAC,UAAU,EACvB,IAAI,EAAE,KAAK,EACX,WAAW,EAAE,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,KAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAI,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EACtF,OAAO,EAAE,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,KAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAI,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,qBACjE,KAAI,CAAC,UAAU,EAChC,IAAI,EAAC,KAAK,gBACC,sBAAsB,EACjC,MAAM,EAAE,KAAI,CAAC,SAAS,EACtB,YAAY,EAAE,KAAI,CAAC,SAAS,GAC5B,CACH,CAAC;YACJ,CAAC,CAAC,CAAC;YACH,OAAO,IAAI,CAAC;QACd,CAAC;QAkBH,6BAAC;IAAD,CAAC,AA5SD,CAA4C,KAAK,CAAC,SAAS,GA4S1D;IA5SY,wDAAsB","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, find, getId } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport {\n IAccessibilityProps,\n IChartProps,\n IHorizontalBarChartProps,\n IHorizontalBarChartStyleProps,\n IHorizontalBarChartStyles,\n IChartDataPoint,\n IRefArrayData,\n} from './index';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { ChartHoverCard, convertToLocaleString } from '../../utilities/index';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\n\nconst getClassNames = classNamesFunction<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>();\n\nexport interface IHorizontalBarChartState {\n isCalloutVisible: boolean;\n refSelected: SVGGElement | null | undefined;\n color: string;\n hoverValue: string | number | Date | null;\n lineColor: string;\n legend: string | null;\n xCalloutValue?: string;\n yCalloutValue?: string;\n barCalloutProps?: IChartDataPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport class HorizontalBarChartBase extends React.Component<IHorizontalBarChartProps, IHorizontalBarChartState> {\n private _barHeight: number;\n private _classNames: IProcessedStyleSet<IHorizontalBarChartStyles>;\n private _uniqLineText: string;\n private _calloutId: string;\n private _refArray: IRefArrayData[];\n private _calloutAnchorPoint: IChartDataPoint | null;\n\n constructor(props: IHorizontalBarChartProps) {\n super(props);\n this.state = {\n isCalloutVisible: false,\n hoverValue: '',\n lineColor: '',\n legend: '',\n refSelected: null,\n // eslint-disable-next-line react/no-unused-state\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\n };\n this._refArray = [];\n this._uniqLineText = '_HorizontalLine_' + Math.random().toString(36).substring(7);\n this._hoverOff = this._hoverOff.bind(this);\n this._calloutId = getId('callout');\n }\n\n public render(): JSX.Element {\n const { data, theme } = this.props;\n this._adjustProps();\n const { palette } = theme!;\n let datapoint: number | undefined = 0;\n return (\n <div className={this._classNames.root} onMouseLeave={this._handleChartMouseLeave}>\n {data!.map((points: IChartProps, index: number) => {\n if (points.chartData && points.chartData![0] && points.chartData![0].horizontalBarChartdata!.x) {\n datapoint = points.chartData![0].horizontalBarChartdata!.x;\n } else {\n datapoint = 0;\n }\n points.chartData![1] = {\n legend: '',\n horizontalBarChartdata: {\n x: points.chartData![0].horizontalBarChartdata!.y - datapoint!,\n y: points.chartData![0].horizontalBarChartdata!.y,\n },\n color: palette.neutralTertiaryAlt,\n };\n\n const chartDataText = this._getChartDataText(points!);\n const bars = this._createBars(points!, palette);\n const keyVal = this._uniqLineText + '_' + index;\n\n return (\n <div key={index} className={this._classNames.items}>\n <div className={this._classNames.items}>\n <FocusZone direction={FocusZoneDirection.horizontal}>\n <div className={this._classNames.chartTitle}>\n {points!.chartTitle && (\n <div\n className={this._classNames.chartDataText}\n {...this._getAccessibleDataObject(points!.chartTitleAccessibilityData)}\n >\n {points!.chartTitle}\n </div>\n )}\n {chartDataText}\n </div>\n </FocusZone>\n {points!.chartData![0].data && this._createBenchmark(points!)}\n <FocusZone direction={FocusZoneDirection.horizontal}>\n <svg className={this._classNames.chart} aria-label={points!.chartTitle}>\n <g\n id={keyVal}\n key={keyVal}\n ref={(e: SVGGElement) => {\n this._refCallback(e, points!.chartData![0].legend);\n }}\n // NOTE: points.chartData![0] contains current data value\n onClick={() => {\n const p = points!.chartData![0];\n if (p && p.onClick) {\n p.onClick();\n }\n }}\n className={this._classNames.barWrapper}\n >\n {bars}\n </g>\n </svg>\n </FocusZone>\n </div>\n </div>\n );\n })}\n <Callout\n target={this.state.refSelected}\n coverTarget={true}\n isBeakVisible={false}\n gapSpace={30}\n hidden={!(!this.props.hideTooltip && this.state.isCalloutVisible)}\n directionalHint={DirectionalHint.rightTopEdge}\n id={this._calloutId}\n onDismiss={this._closeCallout}\n preventDismissOnLostFocus={true}\n {...this.props.calloutProps!}\n {...this._getAccessibleDataObject(this.state.callOutAccessibilityData)}\n >\n <>\n {this.props.onRenderCalloutPerHorizontalBar ? (\n this.props.onRenderCalloutPerHorizontalBar(this.state.barCalloutProps)\n ) : (\n <ChartHoverCard\n Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend!}\n YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.hoverValue!}\n color={this.state.lineColor}\n culture={this.props.culture}\n />\n )}\n </>\n </Callout>\n </div>\n );\n }\n\n private _refCallback(element: SVGGElement, legendTitle: string | undefined): void {\n this._refArray.push({ index: legendTitle, refElement: element });\n }\n\n private _hoverOn(hoverValue: string | number | Date | null, point: IChartDataPoint): void {\n if ((!this.state.isCalloutVisible || this.state.legend !== point.legend!) && this._calloutAnchorPoint !== point) {\n const currentHoveredElement = find(\n this._refArray,\n (currentElement: IRefArrayData) => currentElement.index === point.legend,\n );\n this._calloutAnchorPoint = point;\n this.setState({\n isCalloutVisible: true,\n hoverValue: hoverValue,\n lineColor: point.color!,\n legend: point.legend!,\n refSelected: currentHoveredElement!.refElement,\n xCalloutValue: point.xAxisCalloutData!,\n yCalloutValue: point.yAxisCalloutData!,\n barCalloutProps: point,\n callOutAccessibilityData: point.callOutAccessibilityData,\n });\n }\n }\n\n private _hoverOff(): void {\n /**/\n }\n\n private _handleChartMouseLeave = () => {\n this._calloutAnchorPoint = null;\n if (this.state.isCalloutVisible) {\n this.setState({\n isCalloutVisible: false,\n hoverValue: '',\n refSelected: null,\n lineColor: '',\n legend: '',\n });\n }\n };\n\n private _adjustProps = (): void => {\n this._barHeight = this.props.barHeight || 8;\n this._classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n width: this.props.width,\n className: this.props.className,\n barHeight: this._barHeight,\n color: this.state.lineColor,\n });\n };\n\n private _getChartDataText = (data: IChartProps) => {\n return this.props.barChartCustomData ? (\n <div data-is-focusable={true} role=\"text\">\n {this.props.barChartCustomData(data)}\n </div>\n ) : (\n this._getDefaultTextData(data)\n );\n };\n\n private _getDefaultTextData(data: IChartProps): JSX.Element {\n const { culture } = this.props;\n const chartDataMode = this.props.chartDataMode || 'default';\n const chartData: IChartDataPoint = data!.chartData![0];\n const x = chartData.horizontalBarChartdata!.x;\n const y = chartData.horizontalBarChartdata!.y;\n\n const accessibilityData = this._getAccessibleDataObject(data.chartDataAccessibilityData!);\n switch (chartDataMode) {\n case 'default':\n return (\n <div className={this._classNames.chartDataText} {...accessibilityData}>\n {convertToLocaleString(x, culture)}\n </div>\n );\n case 'fraction':\n return (\n <div {...accessibilityData}>\n <span className={this._classNames.chartDataText}>{convertToLocaleString(x, culture)}</span>\n <span className={this._classNames.chartDataTextDenominator}>{'/' + convertToLocaleString(y, culture)}</span>\n </div>\n );\n case 'percentage':\n const dataRatioPercentage = `${convertToLocaleString(Math.round((x / y) * 100), culture)}%`;\n return (\n <div className={this._classNames.chartDataText} {...accessibilityData}>\n {dataRatioPercentage}\n </div>\n );\n }\n }\n\n private _createBenchmark(data: IChartProps): JSX.Element {\n const totalData = data.chartData![0].horizontalBarChartdata!.y;\n const benchmarkData = data.chartData![0].data;\n const benchmarkRatio = Math.round(((benchmarkData ? benchmarkData : 0) / totalData) * 100);\n\n const benchmarkStyles = {\n marginLeft: 'calc(' + benchmarkRatio + '% - 4px)',\n marginRight: 'calc(' + (100 - benchmarkRatio) + '% - 4px)',\n };\n\n return <div className={this._classNames.triangle} style={benchmarkStyles} />;\n }\n\n private _createBars(data: IChartProps, palette: IPalette): JSX.Element[] {\n const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n // calculating starting point of each bar and it's range\n const startingPoint: number[] = [];\n const total = data.chartData!.reduce(\n (acc: number, point: IChartDataPoint) =>\n acc + (point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0),\n 0,\n );\n let prevPosition = 0;\n let value = 0;\n\n const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {\n const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n if (index > 0) {\n prevPosition += value;\n }\n value = (pointData / total) * 100;\n if (value < 0) {\n value = 0;\n } else if (value < 1 && value !== 0) {\n value = 1;\n }\n startingPoint.push(prevPosition);\n if (value < 1) {\n return <React.Fragment key={index}> </React.Fragment>;\n }\n const xValue = point.horizontalBarChartdata!.x;\n return (\n <rect\n key={index}\n x={startingPoint[index] + '%'}\n y={0}\n data-is-focusable={point.legend !== '' ? true : false}\n width={value + '%'}\n height={this._barHeight}\n fill={color}\n onMouseOver={point.legend !== '' ? this._hoverOn.bind(this, xValue, point) : undefined}\n onFocus={point.legend !== '' ? this._hoverOn.bind(this, xValue, point) : undefined}\n aria-labelledby={this._calloutId}\n role=\"img\"\n aria-label=\"Horizontal bar chart\"\n onBlur={this._hoverOff}\n onMouseLeave={this._hoverOff}\n />\n );\n });\n return bars;\n }\n\n private _closeCallout = () => {\n this.setState({\n isCalloutVisible: false,\n });\n };\n\n private _getAccessibleDataObject = (accessibleData?: IAccessibilityProps, role: string = 'text') => {\n accessibleData = accessibleData ?? {};\n return {\n role,\n 'data-is-focusable': true,\n 'aria-label': accessibleData!.ariaLabel,\n 'aria-labelledby': accessibleData!.ariaLabelledBy,\n 'aria-describedby': accessibleData!.ariaDescribedBy,\n };\n };\n}\n"]}
package/lib-amd/components/LineChart/LineChart.base.d.ts CHANGED
@@ -55,6 +55,7 @@ export declare class LineChartBase extends React.Component<ILineChartProps, ILin
55
55
  private _onLineClick;
56
56
  private _onDataPointClick;
57
57
  private _handleMouseOut;
58
+ private _handleChartMouseLeave;
58
59
  private _handleLegendClick;
59
60
  private _handleMultipleLineLegendSelectionAction;
60
61
  private _handleMultipleColorFillBarLegendSelectionAction;
package/lib-amd/components/LineChart/LineChart.base.js CHANGED
@@ -68,7 +68,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
68
68
  _this_1._xAxisScale = xScale;
69
69
  _this_1._yAxisScale = yScale;
70
70
  _this_1._renderedColorFillBars = _this_1.props.colorFillBars ? _this_1._createColorFillBars(containerHeight) : [];
71
- _this_1.lines = _this_1._createLines(xElement);
71
+ _this_1.lines = _this_1._createLines(xElement, containerHeight);
72
72
  };
73
73
  _this_1._handleSingleLegendSelectionAction = function (lineChartItem) {
74
74
  if (_this_1.state.selectedLegend === lineChartItem.legend) {
@@ -164,6 +164,8 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
164
164
  else {
165
165
  _this_1._colorFillBars = _this_1.props.colorFillBars;
166
166
  }
167
+ var yMinMaxValues = index_3.getMinMaxOfYAxis(_this_1._points, index_3.ChartTypes.LineChart);
168
+ var FILL_Y_PADDING = 3;
167
169
  for (var i = 0; i < _this_1._colorFillBars.length; i++) {
168
170
  var colorFillBar = _this_1._colorFillBars[i];
169
171
  var colorFillBarId = Utilities_1.getId(colorFillBar.legend.replace(/\W/g, ''));
@@ -179,7 +181,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
179
181
  _this_1.state.isSelectedLegend
180
182
  ? _this_1._colorFillBarsOpacity
181
183
  : 0.1;
182
- colorFillBars.push(React.createElement("rect", { fill: colorFillBar.applyPattern ? "url(#" + _this_1._colorFillBarPatternId + i + ")" : colorFillBar.color, fillOpacity: opacity, x: _this_1._xAxisScale(startX), y: _this_1._yAxisScale(0) - containerHeight, width: Math.abs(_this_1._xAxisScale(endX) - _this_1._xAxisScale(startX)), height: containerHeight, key: "" + colorFillBarId + j }));
184
+ colorFillBars.push(React.createElement("rect", { fill: colorFillBar.applyPattern ? "url(#" + _this_1._colorFillBarPatternId + i + ")" : colorFillBar.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 }));
183
185
  }
184
186
  }
185
187
  return colorFillBars;
@@ -189,7 +191,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
189
191
  // For more information: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
190
192
  var stripePath = 'M-4,4 l8,-8 M0,16 l16,-16 M12,20 l8,-8';
191
193
  return (React.createElement("pattern", { id: "" + _this_1._colorFillBarPatternId + id, width: 16, height: 16, key: "" + _this_1._colorFillBarPatternId + id, patternUnits: 'userSpaceOnUse' },
192
- React.createElement("path", { d: stripePath, stroke: color, strokeWidth: 2 })));
194
+ React.createElement("path", { d: stripePath, stroke: color, strokeWidth: 1.25 })));
193
195
  };
194
196
  _this_1._checkInGap = function (pointIndex, gaps, currentGapIndex) {
195
197
  var gapIndex = currentGapIndex;
@@ -235,9 +237,8 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
235
237
  });
236
238
  }
237
239
  };
238
- _this_1._handleHover = function (x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent) {
240
+ _this_1._handleHover = function (x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent) {
239
241
  mouseEvent.persist();
240
- _this_1._uniqueCallOutID = circleId;
241
242
  var formattedData = x instanceof Date ? x.toLocaleDateString() : x;
242
243
  var xVal = x instanceof Date ? x.getTime() : x;
243
244
  var _this = _this_1;
@@ -245,18 +246,22 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
245
246
  // if no points need to be called out then don't show vertical line and callout card
246
247
  if (found) {
247
248
  d3_selection_1.select("#" + _this_1._verticalLine)
248
- .attr('transform', function () { return "translate(" + _this._xAxisScale(x) + ", 0)"; })
249
- .attr('visibility', 'visibility');
250
- _this_1.setState({
251
- isCalloutVisible: true,
252
- refSelected: mouseEvent,
253
- hoverXValue: xAxisCalloutData ? xAxisCalloutData : '' + formattedData,
254
- YValueHover: found.values,
255
- stackCalloutProps: found,
256
- dataPointCalloutProps: found,
257
- activePoint: circleId,
258
- xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
259
- });
249
+ .attr('transform', function () { return "translate(" + _this._xAxisScale(x) + ", " + _this._yAxisScale(y) + ")"; })
250
+ .attr('visibility', 'visibility')
251
+ .attr('y2', "" + (lineHeight - _this._yAxisScale(y)));
252
+ if (_this_1._uniqueCallOutID !== circleId) {
253
+ _this_1._uniqueCallOutID = circleId;
254
+ _this_1.setState({
255
+ isCalloutVisible: true,
256
+ refSelected: "#" + circleId,
257
+ hoverXValue: xAxisCalloutData ? xAxisCalloutData : '' + formattedData,
258
+ YValueHover: found.values,
259
+ stackCalloutProps: found,
260
+ dataPointCalloutProps: found,
261
+ activePoint: circleId,
262
+ xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
263
+ });
264
+ }
260
265
  }
261
266
  else {
262
267
  _this_1.setState({
@@ -276,6 +281,9 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
276
281
  };
277
282
  _this_1._handleMouseOut = function () {
278
283
  d3_selection_1.select("#" + _this_1._verticalLine).attr('visibility', 'hidden');
284
+ };
285
+ _this_1._handleChartMouseLeave = function () {
286
+ _this_1._uniqueCallOutID = null;
279
287
  _this_1.setState({
280
288
  isCalloutVisible: false,
281
289
  activePoint: '',
@@ -388,7 +396,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
388
396
  _this_1._refArray = [];
389
397
  _this_1._points = _this_1._injectIndexPropertyInLineChartData(_this_1.props.data.lineChartData);
390
398
  _this_1._colorFillBars = [];
391
- _this_1._colorFillBarsOpacity = 0.4;
399
+ _this_1._colorFillBarsOpacity = 0.5;
392
400
  _this_1._calloutPoints = index_3.calloutData(_this_1._points) || [];
393
401
  _this_1._circleId = Utilities_1.getId('circle');
394
402
  _this_1._lineId = Utilities_1.getId('lineID');
@@ -430,7 +438,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
430
438
  tickValues: tickValues,
431
439
  tickFormat: tickFormat,
432
440
  };
433
- return (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: data.chartTitle, points: points, chartType: index_3.ChartTypes.LineChart, isCalloutForStack: true, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, getmargins: this._getMargins, getGraphData: this._initializeLineChartData, xAxisType: isXAxisDateType ? index_3.XAxisTypes.DateAxis : index_3.XAxisTypes.NumericAxis, customizedCallout: this._getCustomizedCallout(),
441
+ return (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: data.chartTitle, points: points, chartType: index_3.ChartTypes.LineChart, isCalloutForStack: true, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, getmargins: this._getMargins, getGraphData: this._initializeLineChartData, xAxisType: isXAxisDateType ? index_3.XAxisTypes.DateAxis : index_3.XAxisTypes.NumericAxis, customizedCallout: this._getCustomizedCallout(), onChartMouseLeave: this._handleChartMouseLeave,
434
442
  /* eslint-disable react/jsx-no-bind */
435
443
  // eslint-disable-next-line react/no-children-prop
436
444
  children: function (props) {
@@ -438,7 +446,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
438
446
  _this_1._yAxisScale = props.yScale;
439
447
  return (React.createElement(React.Fragment, null,
440
448
  React.createElement("g", null,
441
- React.createElement("line", { x1: 0, y1: 0, x2: 0, y2: props.containerHeight, stroke: 'steelblue', id: _this_1._verticalLine, visibility: 'hidden', strokeDasharray: '5,5' }),
449
+ React.createElement("line", { x1: 0, y1: 0, x2: 0, y2: props.containerHeight, stroke: '#C8C8C8', id: _this_1._verticalLine, visibility: 'hidden', strokeDasharray: '5,5' }),
442
450
  React.createElement("g", null,
443
451
  _this_1._renderedColorFillBars,
444
452
  _this_1.lines),
@@ -499,7 +507,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
499
507
  var legends = (React.createElement(index_1.Legends, tslib_1.__assign({ legends: tslib_1.__spreadArray(tslib_1.__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)));
500
508
  return legends;
501
509
  };
502
- LineChartBase.prototype._createLines = function (xElement) {
510
+ LineChartBase.prototype._createLines = function (xElement, containerHeight) {
503
511
  var _this_1 = this;
504
512
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
505
513
  var lines = [];
@@ -517,10 +525,11 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
517
525
  var lineColor = this._points[i].color;
518
526
  var activePoint = this.state.activePoint;
519
527
  var theme = this.props.theme;
528
+ var verticaLineHeight = containerHeight - this.margins.bottom + 6;
520
529
  if (this._points[i].data.length === 1) {
521
530
  var _r = this._points[i].data[0], x1 = _r.x, y1 = _r.y, xAxisCalloutData = _r.xAxisCalloutData, xAxisCalloutAccessibilityData = _r.xAxisCalloutAccessibilityData;
522
531
  var circleId = "" + this._circleId + i;
523
- pointsForLine.push(React.createElement("circle", { id: "" + this._circleId + i, key: "" + this._circleId + i, r: activePoint === circleId ? 5.5 : 3.5, cx: this._xAxisScale(x1), cy: this._yAxisScale(y1), fill: activePoint === circleId ? theme.palette.white : lineColor, onMouseOver: this._handleHover.bind(this, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this._handleHover.bind(this, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this._handleMouseOut, strokeWidth: activePoint === circleId ? 2 : 0, stroke: activePoint === circleId ? lineColor : '' }));
532
+ pointsForLine.push(React.createElement("circle", { id: "" + this._circleId + i, key: "" + this._circleId + i, r: activePoint === circleId ? 5.5 : 3.5, cx: this._xAxisScale(x1), cy: this._yAxisScale(y1), fill: activePoint === circleId ? theme.palette.white : lineColor, onMouseOver: this._handleHover.bind(this, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this._handleHover.bind(this, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this._handleMouseOut, strokeWidth: activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0, stroke: activePoint === circleId ? lineColor : '' }));
524
533
  }
525
534
  var gapIndex = 0;
526
535
  var gaps = (_b = (_a = this._points[i].gaps) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) { return a.startIndex - b.startIndex; })) !== null && _b !== void 0 ? _b : [];
@@ -537,15 +546,15 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
537
546
  var strokeWidth = ((_c = this_1._points[i].lineOptions) === null || _c === void 0 ? void 0 : _c.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
538
547
  var isLegendSelected = this_1.state.activeLegend === legendVal || this_1.state.activeLegend === '' || this_1.state.isSelectedLegend;
539
548
  var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
540
- pointsForLine.push(React.createElement("path", { id: circleId, key: circleId, d: path, "data-is-focusable": i === 0 ? true : false, onMouseOver: this_1._handleHover.bind(this_1, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, onFocus: function () { return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, onBlur: this_1._handleMouseOut, onClick: this_1._onDataPointClick.bind(this_1, 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: 2 }));
549
+ pointsForLine.push(React.createElement("path", { id: circleId, key: circleId, d: path, "data-is-focusable": i === 0 ? true : false, 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, onClick: this_1._onDataPointClick.bind(this_1, 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 }));
541
550
  if (j + 1 === this_1._points[i].data.length) {
542
551
  var lastCircleId_1 = "" + circleId + j + "L";
543
552
  var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
544
553
  path = this_1._getPath(this_1._xAxisScale(x2), this_1._yAxisScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
545
554
  var _u = this_1._points[i].data[j], lastCirlceXCallout_1 = _u.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _u.xAxisCalloutAccessibilityData;
546
- pointsForLine.push(React.createElement("path", { id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": i === 0 ? true : false, onMouseOver: this_1._handleHover.bind(this_1, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, onFocus: function () {
555
+ pointsForLine.push(React.createElement("path", { id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": i === 0 ? true : false, 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 () {
547
556
  return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
548
- }, onBlur: this_1._handleMouseOut, onClick: this_1._onDataPointClick.bind(this_1, 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: 2 }));
557
+ }, onBlur: this_1._handleMouseOut, onClick: this_1._onDataPointClick.bind(this_1, 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 }));
549
558
  /* eslint-enable react/jsx-no-bind */
550
559
  }
551
560
  if (isLegendSelected) {
@@ -559,7 +568,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
559
568
  }
560
569
  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, ref: function (e) {
561
570
  _this_1._refCallback(e, lineId);
562
- }, onMouseOver: this_1._handleHover.bind(this_1, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_j = (_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.strokeLinecap) !== null && _j !== void 0 ? _j : 'round', strokeDasharray: (_k = this_1._points[i].lineOptions) === null || _k === void 0 ? void 0 : _k.strokeDasharray, strokeDashoffset: (_l = this_1._points[i].lineOptions) === null || _l === void 0 ? void 0 : _l.strokeDashoffset, opacity: 1, onClick: this_1._onLineClick.bind(this_1, this_1._points[i].onLineClick) }));
571
+ }, 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: (_j = (_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.strokeLinecap) !== null && _j !== void 0 ? _j : 'round', strokeDasharray: (_k = this_1._points[i].lineOptions) === null || _k === void 0 ? void 0 : _k.strokeDasharray, strokeDashoffset: (_l = this_1._points[i].lineOptions) === null || _l === void 0 ? void 0 : _l.strokeDashoffset, opacity: 1, onClick: this_1._onLineClick.bind(this_1, this_1._points[i].onLineClick) }));
563
572
  }
564
573
  }
565
574
  else {