@fluentui/react-charts 0.0.0-nightly-20250704-0407.1 → 0.0.0-nightly-20250707-0406.1

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 (24) hide show
  1. package/CHANGELOG.md +28 -15
  2. package/lib/components/DonutChart/Arc/Arc.js +10 -3
  3. package/lib/components/DonutChart/Arc/Arc.js.map +1 -1
  4. package/lib/components/DonutChart/Arc/Arc.types.js.map +1 -1
  5. package/lib/components/DonutChart/Arc/useArcStyles.styles.js +7 -2
  6. package/lib/components/DonutChart/Arc/useArcStyles.styles.js.map +1 -1
  7. package/lib/components/HorizontalBarChart/HorizontalBarChart.js +14 -3
  8. package/lib/components/HorizontalBarChart/HorizontalBarChart.js.map +1 -1
  9. package/lib/components/VerticalBarChart/VerticalBarChart.js +11 -13
  10. package/lib/components/VerticalBarChart/VerticalBarChart.js.map +1 -1
  11. package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js +14 -11
  12. package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js.map +1 -1
  13. package/lib-commonjs/components/DonutChart/Arc/Arc.js +10 -3
  14. package/lib-commonjs/components/DonutChart/Arc/Arc.js.map +1 -1
  15. package/lib-commonjs/components/DonutChart/Arc/Arc.types.js.map +1 -1
  16. package/lib-commonjs/components/DonutChart/Arc/useArcStyles.styles.js +10 -2
  17. package/lib-commonjs/components/DonutChart/Arc/useArcStyles.styles.js.map +1 -1
  18. package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.js +14 -3
  19. package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.js.map +1 -1
  20. package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.js +11 -13
  21. package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.js.map +1 -1
  22. package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js +14 -11
  23. package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js.map +1 -1
  24. package/package.json +12 -12
package/CHANGELOG.md CHANGED
@@ -1,28 +1,41 @@
1
1
  # Change Log - @fluentui/react-charts
2
2
 
3
- This log was last generated on Fri, 04 Jul 2025 04:23:58 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 07 Jul 2025 04:23:00 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20250704-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20250704-0407.1)
7
+ ## [0.0.0-nightly-20250707-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20250707-0406.1)
8
8
 
9
- Fri, 04 Jul 2025 04:23:58 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.1.5..@fluentui/react-charts_v0.0.0-nightly-20250704-0407.1)
9
+ Mon, 07 Jul 2025 04:23:00 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.1.6..@fluentui/react-charts_v0.0.0-nightly-20250707-0406.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-button to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
16
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
17
- - Bump @fluentui/react-overflow to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
18
- - Bump @fluentui/react-popover to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
19
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
20
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
21
- - Bump @fluentui/react-theme to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
22
- - Bump @fluentui/react-tooltip to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
23
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
24
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
25
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
15
+ - Bump @fluentui/react-button to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
17
+ - Bump @fluentui/react-overflow to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
18
+ - Bump @fluentui/react-popover to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
19
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
20
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
21
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
22
+ - Bump @fluentui/react-tooltip to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
23
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
24
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
25
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
26
+
27
+ ## [9.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.1.6)
28
+
29
+ Fri, 04 Jul 2025 10:02:50 GMT
30
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.1.5..@fluentui/react-charts_v9.1.6)
31
+
32
+ ### Patches
33
+
34
+ - fix: ensure ResponsiveContainer resizes correctly within grid layout ([PR #34728](https://github.com/microsoft/fluentui/pull/34728) by kumarkshitij@microsoft.com)
35
+ - port v8 changes to v9 ([PR #34731](https://github.com/microsoft/fluentui/pull/34731) by anushgupta@microsoft.com)
36
+ - Bump @fluentui/react-overflow to v9.4.6 ([PR #34457](https://github.com/microsoft/fluentui/pull/34457) by beachball)
37
+ - Bump @fluentui/react-popover to v9.11.6 ([PR #34457](https://github.com/microsoft/fluentui/pull/34457) by beachball)
38
+ - Bump @fluentui/react-tooltip to v9.7.6 ([PR #34457](https://github.com/microsoft/fluentui/pull/34457) by beachball)
26
39
 
27
40
  ## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.1.5)
28
41
 
package/lib/components/DonutChart/Arc/Arc.js CHANGED
@@ -38,6 +38,11 @@ import { formatScientificLimitWidth, useRtl } from '../../../utilities/index';
38
38
  const yValue = point.yAxisCalloutData || point.data || 0;
39
39
  return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || (legend ? `${legend}, ` : '') + `${yValue}.`;
40
40
  }
41
+ function _shouldHighlightArc(legend) {
42
+ const { activeArc } = props;
43
+ // If no activeArc is provided, highlight all arcs. Otherwise, only highlight the arcs that are active.
44
+ return !activeArc || activeArc.length === 0 || legend === undefined || activeArc.includes(legend);
45
+ }
41
46
  function _renderArcLabel(className) {
42
47
  const { data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = props;
43
48
  if (hideLabels || Math.abs(data.endAngle - data.startAngle) < Math.PI / 12 || activeArc !== data.data.legend && activeArc !== '') {
@@ -71,13 +76,14 @@ import { formatScientificLimitWidth, useRtl } from '../../../utilities/index';
71
76
  //TO DO 'replace' is throwing error
72
77
  const id = props.uniqText + (typeof props.data.data.legend === 'string' ? props.data.data.legend.replace(/\s+/g, '') : '') + props.data.data.data;
73
78
  const opacity = props.activeArc === props.data.data.legend || props.activeArc === '' ? 1 : 0.1;
79
+ const cornerRadius = props.roundCorners ? 3 : 0;
74
80
  return /*#__PURE__*/ React.createElement("g", {
75
81
  ref: currentRef
76
82
  }, !!focusedArcId && focusedArcId === id && // TODO innerradius and outerradius were absent
77
83
  /*#__PURE__*/ React.createElement("path", {
78
84
  id: id + 'focusRing',
79
- d: arc({
80
- ...props.focusData,
85
+ d: arc.cornerRadius(cornerRadius)({
86
+ ...props.data,
81
87
  innerRadius: props.innerRadius,
82
88
  outerRadius: props.outerRadius
83
89
  }),
@@ -85,7 +91,7 @@ import { formatScientificLimitWidth, useRtl } from '../../../utilities/index';
85
91
  }), /*#__PURE__*/ React.createElement("path", {
86
92
  // TODO innerradius and outerradius were absent
87
93
  id: id,
88
- d: arc({
94
+ d: arc.cornerRadius(cornerRadius)({
89
95
  ...props.data,
90
96
  innerRadius: props.innerRadius,
91
97
  outerRadius: props.outerRadius
@@ -100,6 +106,7 @@ import { formatScientificLimitWidth, useRtl } from '../../../utilities/index';
100
106
  onMouseOver: _hoverOn.bind(this, props.data.data),
101
107
  onMouseMove: _hoverOn.bind(this, props.data.data),
102
108
  onMouseLeave: _hoverOff,
109
+ tabIndex: _shouldHighlightArc(props.data.data.legend) ? 0 : undefined,
103
110
  onBlur: _onBlur,
104
111
  opacity: opacity,
105
112
  onClick: (_props_data = props.data) === null || _props_data === void 0 ? void 0 : _props_data.data.onClick,
package/lib/components/DonutChart/Arc/Arc.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Arc.tsx"],"sourcesContent":["import * as React from 'react';\nimport { arc as d3Arc } from 'd3-shape';\nimport { useArcStyles } from './useArcStyles.styles';\nimport { ChartDataPoint } from '../index';\nimport { ArcProps } from './index';\nimport { format as d3Format } from 'd3-format';\nimport { formatScientificLimitWidth, useRtl } from '../../../utilities/index';\n\n// Create a Arc within Donut Chart variant which uses these default styles and this styled subcomponent.\n/**\n * Arc component within Donut Chart.\n * {@docCategory ArcDonutChart}\n */\nexport const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivElement, ArcProps>(\n (props, forwardedRef) => {\n const arc = d3Arc();\n const currentRef = React.createRef<SVGPathElement>();\n const _isRTL: boolean = useRtl();\n const classes = useArcStyles(props);\n\n React.useEffect(() => {\n _updateChart(props);\n }, [props]);\n\n function _onFocus(data: ChartDataPoint, id: string): void {\n props.onFocusCallback!(data, id, currentRef.current);\n }\n\n function _hoverOn(data: ChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n mouseEvent.persist();\n props.hoverOnCallback!(data, mouseEvent);\n }\n\n function _hoverOff(): void {\n props.hoverLeaveCallback!();\n }\n\n function _onBlur(): void {\n props.onBlurCallback!();\n }\n\n function _getAriaLabel(): string {\n const point = props.data!.data;\n const legend = point.xAxisCalloutData || point.legend;\n const yValue = point.yAxisCalloutData || point.data || 0;\n return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;\n }\n\n function _renderArcLabel(className: string) {\n const { data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = props;\n\n if (\n hideLabels ||\n Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 ||\n (activeArc !== data!.data.legend && activeArc !== '')\n ) {\n return null;\n }\n\n const [base, perp] = arc.centroid({ ...data!, innerRadius, outerRadius });\n const hyp = Math.sqrt(base * base + perp * perp);\n const labelRadius = Math.max(innerRadius!, outerRadius!) + 2;\n const angle = (data!.startAngle + data!.endAngle) / 2;\n const arcValue = data!.value;\n\n return (\n <text\n x={(hyp === 0 ? 0 : base / hyp) * labelRadius}\n y={(hyp === 0 ? 0 : perp / hyp) * labelRadius}\n textAnchor={angle > Math.PI !== _isRTL ? 'end' : 'start'}\n dominantBaseline={angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto'}\n className={className}\n aria-hidden={true}\n >\n {showLabelsInPercent\n ? d3Format('.0%')(totalValue! === 0 ? 0 : arcValue / totalValue!)\n : formatScientificLimitWidth(arcValue)}\n </text>\n );\n }\n\n function _updateChart(newProps: ArcProps): void {\n if (newProps.arc && newProps.innerRadius && newProps.outerRadius) {\n newProps.arc.innerRadius(newProps.innerRadius);\n newProps.arc.outerRadius(newProps.outerRadius);\n }\n }\n\n const { href, focusedArcId } = props;\n //TO DO 'replace' is throwing error\n const id =\n props.uniqText! +\n (typeof props.data!.data.legend === 'string' ? props.data!.data.legend.replace(/\\s+/g, '') : '') +\n props.data!.data.data;\n const opacity: number = props.activeArc === props.data!.data.legend || props.activeArc === '' ? 1 : 0.1;\n return (\n <g ref={currentRef}>\n {!!focusedArcId && focusedArcId === id && (\n // TODO innerradius and outerradius were absent\n <path\n id={id + 'focusRing'}\n d={arc({ ...props.focusData!, innerRadius: props.innerRadius, outerRadius: props.outerRadius })!}\n className={classes.focusRing}\n />\n )}\n <path\n // TODO innerradius and outerradius were absent\n id={id}\n d={arc({ ...props.data!, innerRadius: props.innerRadius, outerRadius: props.outerRadius })!}\n className={classes.root}\n style={{ fill: props.color, cursor: href ? 'pointer' : 'default' }}\n onFocus={_onFocus.bind(this, props.data!.data, id)}\n data-is-focusable={props.activeArc === props.data!.data.legend || props.activeArc === ''}\n onMouseOver={_hoverOn.bind(this, props.data!.data)}\n onMouseMove={_hoverOn.bind(this, props.data!.data)}\n onMouseLeave={_hoverOff}\n onBlur={_onBlur}\n opacity={opacity}\n onClick={props.data?.data.onClick}\n aria-label={_getAriaLabel()}\n role=\"img\"\n />\n {_renderArcLabel(classes.arcLabel)}\n </g>\n );\n },\n);\nArc.displayName = 'Arc';\n"],"names":["React","arc","d3Arc","useArcStyles","format","d3Format","formatScientificLimitWidth","useRtl","Arc","forwardRef","props","forwardedRef","currentRef","createRef","_isRTL","classes","useEffect","_updateChart","_onFocus","data","id","onFocusCallback","current","_hoverOn","mouseEvent","persist","hoverOnCallback","_hoverOff","hoverLeaveCallback","_onBlur","onBlurCallback","_getAriaLabel","point","legend","xAxisCalloutData","yValue","yAxisCalloutData","callOutAccessibilityData","ariaLabel","_renderArcLabel","className","innerRadius","outerRadius","showLabelsInPercent","totalValue","hideLabels","activeArc","Math","abs","endAngle","startAngle","PI","base","perp","centroid","hyp","sqrt","labelRadius","max","angle","arcValue","value","text","x","y","textAnchor","dominantBaseline","aria-hidden","newProps","href","focusedArcId","uniqText","replace","opacity","g","ref","path","d","focusData","focusRing","root","style","fill","color","cursor","onFocus","bind","data-is-focusable","onMouseOver","onMouseMove","onMouseLeave","onBlur","onClick","aria-label","role","arcLabel","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["Arc.tsx"],"sourcesContent":["import * as React from 'react';\nimport { arc as d3Arc } from 'd3-shape';\nimport { useArcStyles } from './useArcStyles.styles';\nimport { ChartDataPoint } from '../index';\nimport { ArcProps } from './index';\nimport { format as d3Format } from 'd3-format';\nimport { formatScientificLimitWidth, useRtl } from '../../../utilities/index';\n\n// Create a Arc within Donut Chart variant which uses these default styles and this styled subcomponent.\n/**\n * Arc component within Donut Chart.\n * {@docCategory ArcDonutChart}\n */\nexport const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivElement, ArcProps>(\n (props, forwardedRef) => {\n const arc = d3Arc();\n const currentRef = React.createRef<SVGPathElement>();\n const _isRTL: boolean = useRtl();\n const classes = useArcStyles(props);\n\n React.useEffect(() => {\n _updateChart(props);\n }, [props]);\n\n function _onFocus(data: ChartDataPoint, id: string): void {\n props.onFocusCallback!(data, id, currentRef.current);\n }\n\n function _hoverOn(data: ChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n mouseEvent.persist();\n props.hoverOnCallback!(data, mouseEvent);\n }\n\n function _hoverOff(): void {\n props.hoverLeaveCallback!();\n }\n\n function _onBlur(): void {\n props.onBlurCallback!();\n }\n\n function _getAriaLabel(): string {\n const point = props.data!.data;\n const legend = point.xAxisCalloutData || point.legend;\n const yValue = point.yAxisCalloutData || point.data || 0;\n return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;\n }\n\n function _shouldHighlightArc(legend?: string): boolean {\n const { activeArc } = props;\n // If no activeArc is provided, highlight all arcs. Otherwise, only highlight the arcs that are active.\n return !activeArc || activeArc.length === 0 || legend === undefined || activeArc.includes(legend);\n }\n\n function _renderArcLabel(className: string) {\n const { data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = props;\n\n if (\n hideLabels ||\n Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 ||\n (activeArc !== data!.data.legend && activeArc !== '')\n ) {\n return null;\n }\n\n const [base, perp] = arc.centroid({ ...data!, innerRadius, outerRadius });\n const hyp = Math.sqrt(base * base + perp * perp);\n const labelRadius = Math.max(innerRadius!, outerRadius!) + 2;\n const angle = (data!.startAngle + data!.endAngle) / 2;\n const arcValue = data!.value;\n\n return (\n <text\n x={(hyp === 0 ? 0 : base / hyp) * labelRadius}\n y={(hyp === 0 ? 0 : perp / hyp) * labelRadius}\n textAnchor={angle > Math.PI !== _isRTL ? 'end' : 'start'}\n dominantBaseline={angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto'}\n className={className}\n aria-hidden={true}\n >\n {showLabelsInPercent\n ? d3Format('.0%')(totalValue! === 0 ? 0 : arcValue / totalValue!)\n : formatScientificLimitWidth(arcValue)}\n </text>\n );\n }\n\n function _updateChart(newProps: ArcProps): void {\n if (newProps.arc && newProps.innerRadius && newProps.outerRadius) {\n newProps.arc.innerRadius(newProps.innerRadius);\n newProps.arc.outerRadius(newProps.outerRadius);\n }\n }\n\n const { href, focusedArcId } = props;\n //TO DO 'replace' is throwing error\n const id =\n props.uniqText! +\n (typeof props.data!.data.legend === 'string' ? props.data!.data.legend.replace(/\\s+/g, '') : '') +\n props.data!.data.data;\n const opacity: number = props.activeArc === props.data!.data.legend || props.activeArc === '' ? 1 : 0.1;\n const cornerRadius = props.roundCorners ? 3 : 0;\n return (\n <g ref={currentRef}>\n {!!focusedArcId && focusedArcId === id && (\n // TODO innerradius and outerradius were absent\n <path\n id={id + 'focusRing'}\n d={\n arc.cornerRadius(cornerRadius)({\n ...props.data!,\n innerRadius: props.innerRadius,\n outerRadius: props.outerRadius,\n })!\n }\n className={classes.focusRing}\n />\n )}\n <path\n // TODO innerradius and outerradius were absent\n id={id}\n d={\n arc.cornerRadius(cornerRadius)({\n ...props.data!,\n innerRadius: props.innerRadius,\n outerRadius: props.outerRadius,\n })!\n }\n className={classes.root}\n style={{ fill: props.color, cursor: href ? 'pointer' : 'default' }}\n onFocus={_onFocus.bind(this, props.data!.data, id)}\n data-is-focusable={props.activeArc === props.data!.data.legend || props.activeArc === ''}\n onMouseOver={_hoverOn.bind(this, props.data!.data)}\n onMouseMove={_hoverOn.bind(this, props.data!.data)}\n onMouseLeave={_hoverOff}\n tabIndex={_shouldHighlightArc(props.data!.data.legend!) ? 0 : undefined}\n onBlur={_onBlur}\n opacity={opacity}\n onClick={props.data?.data.onClick}\n aria-label={_getAriaLabel()}\n role=\"img\"\n />\n {_renderArcLabel(classes.arcLabel)}\n </g>\n );\n },\n);\nArc.displayName = 'Arc';\n"],"names":["React","arc","d3Arc","useArcStyles","format","d3Format","formatScientificLimitWidth","useRtl","Arc","forwardRef","props","forwardedRef","currentRef","createRef","_isRTL","classes","useEffect","_updateChart","_onFocus","data","id","onFocusCallback","current","_hoverOn","mouseEvent","persist","hoverOnCallback","_hoverOff","hoverLeaveCallback","_onBlur","onBlurCallback","_getAriaLabel","point","legend","xAxisCalloutData","yValue","yAxisCalloutData","callOutAccessibilityData","ariaLabel","_shouldHighlightArc","activeArc","length","undefined","includes","_renderArcLabel","className","innerRadius","outerRadius","showLabelsInPercent","totalValue","hideLabels","Math","abs","endAngle","startAngle","PI","base","perp","centroid","hyp","sqrt","labelRadius","max","angle","arcValue","value","text","x","y","textAnchor","dominantBaseline","aria-hidden","newProps","href","focusedArcId","uniqText","replace","opacity","cornerRadius","roundCorners","g","ref","path","d","focusRing","root","style","fill","color","cursor","onFocus","bind","data-is-focusable","onMouseOver","onMouseMove","onMouseLeave","tabIndex","onBlur","onClick","aria-label","role","arcLabel","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib/components/DonutChart/Arc/Arc.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Arc.types.ts"],"sourcesContent":["import { ChartDataPoint } from '../index';\nexport interface ArcProps {\n /**\n * Data to render in the Arc.\n */\n data?: ArcData;\n\n /**\n * Data to render focused Arc\n */\n focusData?: ArcData;\n\n /**\n * id of the focused arc\n */\n focusedArcId?: string;\n /**\n * shape for Arc.\n */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n arc?: any;\n\n /**\n * innerRadius of the Arc.\n */\n innerRadius: number;\n\n /**\n * outerRadius of the Arc.\n */\n outerRadius: number;\n\n /**\n * Color for the Arc.\n */\n color: string;\n\n /**\n * Defines the function that is executed upon hovering over the legend\n */\n hoverOnCallback?: Function;\n\n /**\n * Defines the function that is executed upon hovering over the legend\n */\n onFocusCallback?: Function;\n\n /**\n * Defines the function that is executed upon hovering Leave the legend\n */\n onBlurCallback?: Function;\n\n /**\n * Defines the function that is executed upon hovering Leave the legend\n */\n hoverLeaveCallback?: Function;\n\n /**\n * Uniq string for chart\n */\n uniqText?: string;\n\n /**\n * string for callout id\n */\n calloutId?: string;\n\n /**\n * Active Arc for chart\n */\n activeArc?: string;\n\n /**\n * internal prop for href\n */\n href?: string;\n\n /**\n * props for inside donut value\n */\n valueInsideDonut?: string | number;\n\n /**\n * Prop to show the arc labels in percentage format\n */\n showLabelsInPercent?: boolean;\n\n /**\n * Prop used to define the sum of all arc values\n */\n totalValue?: number;\n\n /**\n * Prop to hide the arc labels\n */\n hideLabels?: boolean;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: ArcStyles;\n\n /**\n * Additional CSS class(es) to apply to the Chart.\n */\n className?: string;\n}\n\nexport interface ArcData {\n /**\n * Data to render in the chart for individual arc.\n */\n data: ChartDataPoint;\n /**\n * endAngle of the Arc\n */\n endAngle: number;\n /**\n * index of the Arc\n */\n index: number;\n /**\n * padAngle of the Arc\n */\n padAngle: number;\n /**\n * startAngle of the Arc\n */\n startAngle: number;\n /**\n * value of the Arc\n */\n value: number;\n}\n\nexport interface ArcStyles {\n /**\n * Style set for the card header component root\n */\n root: string;\n\n /**\n * styles for the focus\n */\n focusRing: string;\n\n /**\n * Style for the arc labels\n */\n arcLabel: string;\n}\n"],"names":[],"rangeMappings":"","mappings":"AAuIA,WAeC"}
1
+ {"version":3,"sources":["Arc.types.ts"],"sourcesContent":["import { ChartDataPoint } from '../index';\nexport interface ArcProps {\n /**\n * Data to render in the Arc.\n */\n data?: ArcData;\n\n /**\n * Data to render focused Arc\n */\n focusData?: ArcData;\n\n /**\n * id of the focused arc\n */\n focusedArcId?: string;\n /**\n * shape for Arc.\n */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n arc?: any;\n\n /**\n * innerRadius of the Arc.\n */\n innerRadius: number;\n\n /**\n * outerRadius of the Arc.\n */\n outerRadius: number;\n\n /**\n * Color for the Arc.\n */\n color: string;\n\n /**\n * Defines the function that is executed upon hovering over the legend\n */\n hoverOnCallback?: Function;\n\n /**\n * Defines the function that is executed upon hovering over the legend\n */\n onFocusCallback?: Function;\n\n /**\n * Defines the function that is executed upon hovering Leave the legend\n */\n onBlurCallback?: Function;\n\n /**\n * Defines the function that is executed upon hovering Leave the legend\n */\n hoverLeaveCallback?: Function;\n\n /**\n * Uniq string for chart\n */\n uniqText?: string;\n\n /**\n * string for callout id\n */\n calloutId?: string;\n\n /**\n * Active Arc for chart\n */\n activeArc?: string;\n\n /**\n * internal prop for href\n */\n href?: string;\n\n /**\n * props for inside donut value\n */\n valueInsideDonut?: string | number;\n\n /**\n * Prop to show the arc labels in percentage format\n */\n showLabelsInPercent?: boolean;\n\n /**\n * Prop used to define the sum of all arc values\n */\n totalValue?: number;\n\n /**\n * Prop to hide the arc labels\n */\n hideLabels?: boolean;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: ArcStyles;\n\n /**\n * Additional CSS class(es) to apply to the Chart.\n */\n className?: string;\n\n /**\n * Prop to enable the round corners in the chart\n * @default false\n */\n roundCorners?: boolean;\n}\n\nexport interface ArcData {\n /**\n * Data to render in the chart for individual arc.\n */\n data: ChartDataPoint;\n /**\n * endAngle of the Arc\n */\n endAngle: number;\n /**\n * index of the Arc\n */\n index: number;\n /**\n * padAngle of the Arc\n */\n padAngle: number;\n /**\n * startAngle of the Arc\n */\n startAngle: number;\n /**\n * value of the Arc\n */\n value: number;\n}\n\nexport interface ArcStyles {\n /**\n * Style set for the card header component root\n */\n root: string;\n\n /**\n * styles for the focus\n */\n focusRing: string;\n\n /**\n * Style for the arc labels\n */\n arcLabel: string;\n}\n"],"names":[],"rangeMappings":"","mappings":"AA6IA,WAeC"}
package/lib/components/DonutChart/Arc/useArcStyles.styles.js CHANGED
@@ -14,7 +14,10 @@ export const donutArcClassNames = {
14
14
  const useStyles = /*#__PURE__*/__styles({
15
15
  root: {
16
16
  Bceei9c: "f158kwzp",
17
- Bpd4iqm: "f2cu5sd",
17
+ Bw0xxkn: 0,
18
+ oeaueh: 0,
19
+ Bpd4iqm: 0,
20
+ Befb4lg: "f1391ufr",
18
21
  ojy3ng: "f1yuyku4",
19
22
  B4ncu3z: "f138xzbb",
20
23
  zxy5zd: ["fny96iz", "fi0bkha"],
@@ -34,7 +37,9 @@ const useStyles = /*#__PURE__*/__styles({
34
37
  Bkfmm31: "fhuob2q"
35
38
  }
36
39
  }, {
37
- d: [".f158kwzp{cursor:default;}", ".f2cu5sd{outline-width:transparent;}", ".f1yuyku4{stroke:var(--colorNeutralBackground1);}", ".f138xzbb selectors::-moz-focus-inner{border-top-width:0;}", ".fny96iz selectors::-moz-focus-inner{border-right-width:0;}", ".fi0bkha selectors::-moz-focus-inner{border-left-width:0;}", ".f1jv8gm3 selectors::-moz-focus-inner{border-bottom-width:0;}", ".frcfrt5{stroke:var(--colorStrokeFocus2);}", ".f9nnx8l{stroke-width:var(--strokeWidthThickest);}", ".f1au8mb3{fill:transparent;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}"]
40
+ d: [".f158kwzp{cursor:default;}", [".f1391ufr{outline:transparent;}", {
41
+ p: -1
42
+ }], ".f1yuyku4{stroke:var(--colorNeutralBackground1);}", ".f138xzbb selectors::-moz-focus-inner{border-top-width:0;}", ".fny96iz selectors::-moz-focus-inner{border-right-width:0;}", ".fi0bkha selectors::-moz-focus-inner{border-left-width:0;}", ".f1jv8gm3 selectors::-moz-focus-inner{border-bottom-width:0;}", ".frcfrt5{stroke:var(--colorStrokeFocus2);}", ".f9nnx8l{stroke-width:var(--strokeWidthThickest);}", ".f1au8mb3{fill:transparent;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}"]
38
43
  });
39
44
  /**
40
45
  * Apply styling to the Arc components
package/lib/components/DonutChart/Arc/useArcStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","donutArcClassNames","root","focusRing","arcLabel","useStyles","Bceei9c","Bpd4iqm","ojy3ng","B4ncu3z","zxy5zd","bkw2yb","Bjksbd0","Be5yapy","Bkfmm31","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useArcStyles","props","_props_styles","_props_styles1","_props_styles2","className","baseStyles","styles"],"sources":["useArcStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const donutArcClassNames = {\n root: 'fui-donut-arc__root',\n focusRing: 'fui-donut-arc__focusRing',\n arcLabel: 'fui-donut-arc__arcLabel'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n root: {\n cursor: 'default',\n ...shorthands.outline('transparent'),\n stroke: tokens.colorNeutralBackground1,\n '& selectors': {\n '::-moz-focus-inner': {\n ...shorthands.border('0')\n }\n }\n },\n focusRing: {\n stroke: tokens.colorStrokeFocus2,\n strokeWidth: tokens.strokeWidthThickest,\n fill: 'transparent'\n },\n arcLabel: {\n ...typographyStyles.caption1Strong,\n fill: tokens.colorNeutralForeground1\n }\n});\n/**\n * Apply styling to the Arc components\n */ export const useArcStyles = (props)=>{\n var _props_styles, _props_styles1, _props_styles2;\n const { className } = props;\n const baseStyles = useStyles();\n return {\n root: mergeClasses(donutArcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n focusRing: mergeClasses(donutArcClassNames.focusRing, baseStyles.focusRing, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.focusRing),\n arcLabel: mergeClasses(donutArcClassNames.arcLabel, baseStyles.arcLabel, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.arcLabel)\n };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAG;EAClCC,IAAI,EAAE,qBAAqB;EAC3BC,SAAS,EAAE,0BAA0B;EACrCC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGT,QAAA;EAAAM,IAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAT,SAAA;IAAAK,MAAA;IAAAK,OAAA;IAAAC,OAAA;EAAA;EAAAV,QAAA;IAAAW,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAJ,OAAA;EAAA;AAAA;EAAAK,CAAA;AAAA,CAoBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,YAAY,GAAIC,KAAK,IAAG;EACrC,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc;EACjD,MAAM;IAAEC;EAAU,CAAC,GAAGJ,KAAK;EAC3B,MAAMK,UAAU,GAAGrB,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHH,IAAI,EAAEL,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAEwB,UAAU,CAACxB,IAAI,EAAEuB,SAAS,EAAE,CAACH,aAAa,GAAGD,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIL,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACpB,IAAI,CAAC;IAC1KC,SAAS,EAAEN,YAAY,CAACI,kBAAkB,CAACE,SAAS,EAAEuB,UAAU,CAACvB,SAAS,EAAE,CAACoB,cAAc,GAAGF,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACpB,SAAS,CAAC;IACtLC,QAAQ,EAAEP,YAAY,CAACI,kBAAkB,CAACG,QAAQ,EAAEsB,UAAU,CAACtB,QAAQ,EAAE,CAACoB,cAAc,GAAGH,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACpB,QAAQ;EACrL,CAAC;AACL,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","donutArcClassNames","root","focusRing","arcLabel","useStyles","Bceei9c","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","ojy3ng","B4ncu3z","zxy5zd","bkw2yb","Bjksbd0","Be5yapy","Bkfmm31","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useArcStyles","props","_props_styles","_props_styles1","_props_styles2","className","baseStyles","styles"],"sources":["useArcStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const donutArcClassNames = {\n root: 'fui-donut-arc__root',\n focusRing: 'fui-donut-arc__focusRing',\n arcLabel: 'fui-donut-arc__arcLabel'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n root: {\n cursor: 'default',\n outline: 'transparent',\n stroke: tokens.colorNeutralBackground1,\n '& selectors': {\n '::-moz-focus-inner': {\n ...shorthands.border('0')\n }\n }\n },\n focusRing: {\n stroke: tokens.colorStrokeFocus2,\n strokeWidth: tokens.strokeWidthThickest,\n fill: 'transparent'\n },\n arcLabel: {\n ...typographyStyles.caption1Strong,\n fill: tokens.colorNeutralForeground1\n }\n});\n/**\n * Apply styling to the Arc components\n */ export const useArcStyles = (props)=>{\n var _props_styles, _props_styles1, _props_styles2;\n const { className } = props;\n const baseStyles = useStyles();\n return {\n root: mergeClasses(donutArcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n focusRing: mergeClasses(donutArcClassNames.focusRing, baseStyles.focusRing, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.focusRing),\n arcLabel: mergeClasses(donutArcClassNames.arcLabel, baseStyles.arcLabel, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.arcLabel)\n };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAG;EAClCC,IAAI,EAAE,qBAAqB;EAC3BC,SAAS,EAAE,0BAA0B;EACrCC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGT,QAAA;EAAAM,IAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAZ,SAAA;IAAAQ,MAAA;IAAAK,OAAA;IAAAC,OAAA;EAAA;EAAAb,QAAA;IAAAc,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAJ,OAAA;EAAA;AAAA;EAAAK,CAAA;IAAAC,CAAA;EAAA;AAAA,CAoBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,YAAY,GAAIC,KAAK,IAAG;EACrC,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc;EACjD,MAAM;IAAEC;EAAU,CAAC,GAAGJ,KAAK;EAC3B,MAAMK,UAAU,GAAGzB,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHH,IAAI,EAAEL,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAE4B,UAAU,CAAC5B,IAAI,EAAE2B,SAAS,EAAE,CAACH,aAAa,GAAGD,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIL,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACxB,IAAI,CAAC;IAC1KC,SAAS,EAAEN,YAAY,CAACI,kBAAkB,CAACE,SAAS,EAAE2B,UAAU,CAAC3B,SAAS,EAAE,CAACwB,cAAc,GAAGF,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACxB,SAAS,CAAC;IACtLC,QAAQ,EAAEP,YAAY,CAACI,kBAAkB,CAACG,QAAQ,EAAE0B,UAAU,CAAC1B,QAAQ,EAAE,CAACwB,cAAc,GAAGH,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACxB,QAAQ;EACrL,CAAC;AACL,CAAC","ignoreList":[]}
package/lib/components/HorizontalBarChart/HorizontalBarChart.js CHANGED
@@ -47,7 +47,19 @@ import { Legends } from '../../index';
47
47
  function _hoverOn(event, hoverVal, point) {
48
48
  if ((!isPopoverOpen || legend !== point.legend) && _calloutAnchorPoint !== point && (_legendHighlighted(point.legend) || _noLegendHighlighted())) {
49
49
  _calloutAnchorPoint = point;
50
- updatePosition(event.clientX, event.clientY);
50
+ let x = 0;
51
+ let y = 0;
52
+ if ('clientX' in event && event.clientX && event.clientY) {
53
+ // Mouse event
54
+ x = event.clientX;
55
+ y = event.clientY;
56
+ } else {
57
+ // Focus event
58
+ const targetRect = event.target.getBoundingClientRect();
59
+ x = targetRect.left + targetRect.width / 2;
60
+ y = targetRect.top + targetRect.height / 2;
61
+ }
62
+ updatePosition(x, y);
51
63
  setHoverValue(hoverVal);
52
64
  setLineColor(point.color);
53
65
  setLegend(point.legend);
@@ -244,12 +256,11 @@ import { Legends } from '../../index';
244
256
  key: index,
245
257
  x: `${_isRTL ? 100 - startingPoint[index] - value - index * barSpacingInPercent : startingPoint[index] + index * barSpacingInPercent}%`,
246
258
  y: 0,
247
- "data-is-focusable": point.legend !== '' ? true : false,
248
259
  width: value + '%',
249
260
  height: _barHeight,
250
261
  fill: color,
251
262
  onMouseOver: point.legend !== '' ? (event)=>_hoverOn(event, xValue, point) : undefined,
252
- onFocus: point.legend !== '' ? (event)=>_hoverOn.bind(event, xValue, point) : undefined,
263
+ onFocus: point.legend !== '' ? (event)=>_hoverOn(event, xValue, point) : undefined,
253
264
  role: "img",
254
265
  "aria-label": _getAriaLabel(point),
255
266
  onBlur: _hoverOff,
package/lib/components/HorizontalBarChart/HorizontalBarChart.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["HorizontalBarChart.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useHorizontalBarChartStyles } from './useHorizontalBarChartStyles.styles';\nimport { ChartProps, HorizontalBarChartProps, ChartDataPoint, RefArrayData, HorizontalBarChartVariant } from './index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { formatScientificLimitWidth, getAccessibleDataObject, useRtl } from '../../utilities/index';\nimport { useId } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { FocusableTooltipText } from '../../utilities/FocusableTooltipText';\nimport { Legend, Legends } from '../../index';\n\n/**\n * HorizontalBarChart is the context wrapper and container for all HorizontalBarChart content/controls,\n * It has no direct style or slot opinions.\n *\n * HorizontalBarChart also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps> = React.forwardRef<\n HTMLDivElement,\n HorizontalBarChartProps\n>((props, forwardedRef) => {\n const legendContainer = React.useRef<HTMLDivElement | null>(null);\n const _uniqLineText: string = '_HorizontalLine_' + Math.random().toString(36).substring(7);\n const _refArray: RefArrayData[] = [];\n const _isRTL: boolean = useRtl();\n const barChartSvgRef: React.RefObject<SVGSVGElement> = React.createRef<SVGSVGElement>();\n const _emptyChartId: string = useId('_HBC_empty');\n let _barHeight: number;\n let _calloutAnchorPoint: ChartDataPoint | null;\n let isSingleBar: boolean = true;\n\n const [hoverValue, setHoverValue] = React.useState<string | number | Date | null>('');\n const [lineColor, setLineColor] = React.useState<string>('');\n const [legend, setLegend] = React.useState<string | null>('');\n const [xCalloutValue, setXCalloutValue] = React.useState<string | undefined>('');\n const [yCalloutValue, setYCalloutValue] = React.useState<string | undefined>('');\n const [barCalloutProps, setBarCalloutProps] = React.useState<ChartDataPoint>();\n const [barSpacingInPercent, setBarSpacingInPercent] = React.useState<number>(0);\n const [isPopoverOpen, setPopoverOpen] = React.useState<boolean>(false);\n const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n const [selectedLegend, setSelectedLegend] = React.useState<string>('');\n const [activeLegend, setActiveLegend] = React.useState<string>('');\n\n function _refCallback(element: SVGGElement, legendTitle: string | undefined): void {\n _refArray.push({ index: legendTitle, refElement: element });\n }\n\n function _hoverOn(\n event: React.MouseEvent<SVGRectElement, MouseEvent>,\n hoverVal: string | number | Date,\n point: ChartDataPoint,\n ): void {\n if (\n (!isPopoverOpen || legend !== point.legend!) &&\n _calloutAnchorPoint !== point &&\n (_legendHighlighted(point.legend) || _noLegendHighlighted())\n ) {\n _calloutAnchorPoint = point;\n updatePosition(event.clientX, event.clientY);\n setHoverValue(hoverVal);\n setLineColor(point.color!);\n setLegend(point.legend!);\n setXCalloutValue(point.xAxisCalloutData!);\n setYCalloutValue(point.yAxisCalloutData!);\n setBarCalloutProps(point);\n // ToDo - Confirm setting multiple state variables like this is performant.\n }\n }\n\n function _hoverOff(): void {\n /*ToDo. To fix*/\n }\n\n const _handleChartMouseLeave = () => {\n _calloutAnchorPoint = null;\n if (isPopoverOpen) {\n setPopoverOpen(false);\n setHoverValue('');\n setLineColor('');\n setLegend('');\n }\n };\n\n const _adjustProps = (): void => {\n _barHeight = props.barHeight || 12;\n };\n\n const _getChartDataText = (data: ChartProps) => {\n /* return props.barChartCustomData ? (\n <div role=\"text\">{props.barChartCustomData(data)}</div>\n ) : ( */\n return _getDefaultTextData(data);\n //)\n };\n\n function _createLegends(chartProps: ChartProps[]): JSX.Element {\n const legendItems: Legend[] = [];\n chartProps.forEach((point: ChartProps) => {\n point.chartData!.forEach((dataPoint: ChartDataPoint) => {\n const color: string = dataPoint.color!;\n // mapping data to the format Legends component needs\n const legendItem: Legend = {\n title: dataPoint.legend!,\n color,\n action: () => {\n if (selectedLegend === dataPoint.legend) {\n setSelectedLegend('');\n } else {\n setSelectedLegend(dataPoint.legend!);\n }\n },\n hoverAction: () => {\n _handleChartMouseLeave();\n setActiveLegend(dataPoint.legend!);\n },\n onMouseOutAction: () => {\n setActiveLegend('');\n },\n };\n legendItems.push(legendItem);\n });\n });\n const legends = (\n <Legends legends={legendItems} centerLegends overflowText={props.legendsOverflowText} {...props.legendProps} />\n );\n return legends;\n }\n\n function _getDefaultTextData(data: ChartProps): JSX.Element {\n const { culture } = props;\n const accessibilityData = getAccessibleDataObject(data.chartDataAccessibilityData!, 'text', false);\n if (!isSingleBar) {\n const total = data.chartData!.reduce(\n (acc: number, point: ChartDataPoint) =>\n acc + (point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0),\n 0,\n );\n return (\n <div className={classes.chartTitleRight} {...accessibilityData}>\n {formatToLocaleString(total, culture) as React.ReactNode}\n </div>\n );\n }\n const chartDataMode = props.chartDataMode || 'default';\n const chartData: ChartDataPoint = data!.chartData![0];\n const x = chartData.horizontalBarChartdata!.x;\n const y = chartData.horizontalBarChartdata!.total!;\n\n switch (chartDataMode) {\n case 'default':\n return (\n <div className={classes.chartTitleRight} {...accessibilityData}>\n {formatToLocaleString(x, culture) as React.ReactNode}\n </div>\n );\n case 'fraction':\n return (\n <div {...accessibilityData}>\n <span className={classes.chartTitleRight}>{formatToLocaleString(x, culture) as React.ReactNode}</span>\n <span className={classes.chartDataTextDenominator}>{' / ' + formatToLocaleString(y, culture)}</span>\n </div>\n );\n case 'percentage':\n const dataRatioPercentage = `${formatToLocaleString(Math.round((x / y) * 100), culture)}%`;\n return (\n <div className={classes.chartTitleRight} {...accessibilityData}>\n {dataRatioPercentage}\n </div>\n );\n }\n }\n\n function _createBenchmark(data: ChartProps): JSX.Element {\n if (data.chartData![0].horizontalBarChartdata!.total === undefined) {\n return <></>;\n }\n const totalData = data.chartData![0].horizontalBarChartdata!.total!;\n const benchmarkData = data.chartData![0].data;\n const benchmarkRatio = Math.round(((benchmarkData ? benchmarkData : 0) / totalData) * 100);\n\n const benchmarkStyles = {\n left: 'calc(' + benchmarkRatio + '% - 4px)',\n };\n\n return (\n <div className={classes.benchmarkContainer}>\n <div className={classes.triangle} style={benchmarkStyles} />\n </div>\n );\n }\n\n /**\n * This functions returns an array of <rect> elements, which form the bars\n * For each bar an x value, and a width needs to be specified\n * The computations are done based on percentages\n * Extra margin is also provided, in the x value to provide some spacing in between the bars\n */\n\n function _createBars(data: ChartProps): JSX.Element[] {\n const noOfBars =\n data.chartData?.reduce((count: number, point: ChartDataPoint) => (count += (point.data || 0) > 0 ? 1 : 0), 0) ||\n 1;\n const totalMarginPercent = barSpacingInPercent * (noOfBars - 1);\n const defaultColors: string[] = [\n tokens.colorPaletteBlueForeground2,\n tokens.colorPaletteCornflowerForeground2,\n tokens.colorPaletteDarkGreenForeground2,\n tokens.colorPaletteNavyForeground2,\n tokens.colorPaletteDarkOrangeForeground2,\n ];\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: ChartDataPoint) =>\n acc + (point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0),\n 0,\n );\n let prevPosition = 0;\n let value = 0;\n\n let sumOfPercent = 0;\n data.chartData!.map((point: ChartDataPoint, index: number) => {\n const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n value = (pointData / total) * 100;\n if (value < 0) {\n value = 0;\n } else if (value < 1 && value !== 0) {\n value = 1;\n }\n sumOfPercent += value;\n\n return sumOfPercent;\n });\n\n /**\n * The %age of the space occupied by the margin needs to subtracted\n * while computing the scaling ratio, since the margins are not being\n * scaled down, only the data is being scaled down from a higher percentage to lower percentage\n * Eg: 95% of the space is taken by the bars, 5% by the margins\n * Now if the sumOfPercent is 120% -> This needs to be scaled down to 95%, not 100%\n * since that's only space available to the bars\n */\n const scalingRatio = sumOfPercent !== 0 ? (sumOfPercent - totalMarginPercent) / 100 : 1;\n\n const bars = data.chartData!.map((point: ChartDataPoint, index: number) => {\n const color: string = point.color ? point.color : defaultColors[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 / scalingRatio;\n } else {\n value = value / scalingRatio;\n }\n startingPoint.push(prevPosition);\n\n const xValue = point.horizontalBarChartdata!.x;\n const placeholderIndex = 1;\n const isLegendSelected: boolean = _legendHighlighted(point.legend) || _noLegendHighlighted();\n\n // Render bar label instead of placeholder bar for absolute-scale variant\n if (index === placeholderIndex && props.variant === HorizontalBarChartVariant.AbsoluteScale) {\n if (props.hideLabels) {\n return <text key={index} />;\n }\n\n const barValue = data.chartData![0].horizontalBarChartdata!.x;\n\n return (\n <text\n key={index}\n x={`${_isRTL ? 100 - startingPoint[index] : startingPoint[index]}%`}\n y={_barHeight / 2}\n dominantBaseline=\"central\"\n transform={`translate(${_isRTL ? -4 : 4})`}\n className={classes.barLabel}\n aria-hidden={true}\n >\n {formatScientificLimitWidth(barValue)}\n </text>\n );\n }\n\n return (\n <rect\n key={index}\n x={`${\n _isRTL\n ? 100 - startingPoint[index] - value - index * barSpacingInPercent\n : startingPoint[index] + index * barSpacingInPercent\n }%`}\n y={0}\n data-is-focusable={point.legend !== '' ? true : false}\n width={value + '%'}\n height={_barHeight}\n fill={color}\n onMouseOver={point.legend !== '' ? event => _hoverOn(event, xValue, point) : undefined}\n onFocus={point.legend !== '' ? event => _hoverOn.bind(event, xValue, point) : undefined}\n role=\"img\"\n aria-label={_getAriaLabel(point)}\n onBlur={_hoverOff}\n onMouseLeave={_hoverOff}\n className={classes.barWrapper}\n opacity={isLegendSelected ? 1 : 0.1}\n tabIndex={point.legend !== '' ? 0 : undefined}\n />\n );\n });\n return bars;\n }\n\n const _getAriaLabel = (point: ChartDataPoint): string => {\n const legend = point.xAxisCalloutData || point.legend;\n const yValue =\n point.yAxisCalloutData ||\n (point.horizontalBarChartdata\n ? `${point.horizontalBarChartdata.x}/${point.horizontalBarChartdata.total ?? ''}`\n : 0);\n return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;\n };\n\n function _isChartEmpty(): boolean {\n return !(props.data && props.data.length > 0);\n }\n\n function updatePosition(newX: number, newY: number): void {\n const threshold = 1; // Set a threshold for movement\n const { x, y } = clickPosition;\n\n // Calculate the distance moved\n const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n // Update the position only if the distance moved is greater than the threshold\n if (distance > threshold) {\n setClickPosition({ x: newX, y: newY });\n setPopoverOpen(true);\n }\n }\n\n React.useEffect(() => {\n const svgWidth = barChartSvgRef?.current?.getBoundingClientRect().width || 0;\n const MARGIN_WIDTH_IN_PX = 3;\n if (svgWidth) {\n const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;\n setBarSpacingInPercent(currentBarSpacing);\n }\n }, [barChartSvgRef]);\n\n function _legendHighlighted(barLegend?: string) {\n if (barLegend === undefined) {\n return false;\n }\n return selectedLegend === barLegend || (selectedLegend === '' && activeLegend === barLegend);\n }\n\n /**\n * This function checks if none of the legends is selected or hovered.*/\n\n function _noLegendHighlighted() {\n return selectedLegend === '' && activeLegend === '';\n }\n\n const { data } = props;\n _adjustProps();\n const classes = useHorizontalBarChartStyles(props);\n const focusAttributes = useFocusableGroup();\n const legendButtons = _createLegends(data!);\n\n let datapoint: number | undefined = 0;\n return !_isChartEmpty() ? (\n <div className={classes.root} onMouseLeave={_handleChartMouseLeave}>\n {data!.map((points: ChartProps, 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 isSingleBar =\n points.chartData!.length === 1 || (points.chartData!.length > 1 && points.chartData![1].legend === '');\n if (isSingleBar) {\n points.chartData![1] = {\n legend: '',\n horizontalBarChartdata: {\n x: points.chartData![0].horizontalBarChartdata!.total! - datapoint!,\n total: points.chartData![0].horizontalBarChartdata!.total!,\n },\n color: tokens.colorBackgroundOverlay,\n };\n }\n\n // Hide right side text of chart title for absolute-scale variant\n const chartDataText =\n props.variant === HorizontalBarChartVariant.AbsoluteScale ? null : _getChartDataText(points!);\n const bars = _createBars(points!);\n const keyVal = _uniqLineText + '_' + index;\n // ToDo - Showtriangle property is per data series. How to account for it in the new stylesheet\n /* const classes = useHorizontalBarChartStyles(props.styles!, {\n width: props.width,\n showTriangle: !!points!.chartData![0].data,\n variant: props.variant,\n }); */\n\n return (\n <div key={index}>\n <div className={classes.items} {...focusAttributes}>\n <div className={classes.chartTitle}>\n {points!.chartTitle && (\n <FocusableTooltipText\n className={classes.chartTitleLeft}\n content={points!.chartTitle}\n accessibilityData={points!.chartTitleAccessibilityData}\n />\n )}\n {chartDataText}\n </div>\n {points!.chartData![0].data && _createBenchmark(points!)}\n <svg ref={barChartSvgRef} className={classes.chart} aria-label={points!.chartTitle}>\n <g\n id={keyVal}\n key={keyVal}\n ref={(e: SVGGElement) => {\n _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 >\n {bars}\n </g>\n </svg>\n </div>\n </div>\n );\n })}\n <ChartPopover\n xCalloutValue={xCalloutValue}\n yCalloutValue={yCalloutValue}\n culture={props.culture ?? 'en-us'}\n clickPosition={clickPosition}\n isPopoverOpen={isPopoverOpen}\n legend={legend!}\n YValue={hoverValue!}\n color={lineColor}\n isCalloutForStack={false}\n customCallout={{\n customizedCallout: props.onRenderCalloutPerHorizontalBar\n ? props.onRenderCalloutPerHorizontalBar(barCalloutProps!)\n : undefined,\n customCalloutProps: props.calloutPropsPerDataPoint\n ? props.calloutPropsPerDataPoint(barCalloutProps!)\n : undefined,\n }}\n isCartesian={false}\n />\n {!isSingleBar && (\n <div ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\n {legendButtons}\n </div>\n )}\n </div>\n ) : (\n <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n );\n //TODO validate and fix focus border for issue for popover\n});\nHorizontalBarChart.displayName = 'HorizontalBarChart';\n"],"names":["React","useHorizontalBarChartStyles","HorizontalBarChartVariant","formatToLocaleString","formatScientificLimitWidth","getAccessibleDataObject","useRtl","useId","tokens","useFocusableGroup","ChartPopover","FocusableTooltipText","Legends","HorizontalBarChart","forwardRef","props","forwardedRef","legendContainer","useRef","_uniqLineText","Math","random","toString","substring","_refArray","_isRTL","barChartSvgRef","createRef","_emptyChartId","_barHeight","_calloutAnchorPoint","isSingleBar","hoverValue","setHoverValue","useState","lineColor","setLineColor","legend","setLegend","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","barCalloutProps","setBarCalloutProps","barSpacingInPercent","setBarSpacingInPercent","isPopoverOpen","setPopoverOpen","clickPosition","setClickPosition","x","y","selectedLegend","setSelectedLegend","activeLegend","setActiveLegend","_refCallback","element","legendTitle","push","index","refElement","_hoverOn","event","hoverVal","point","_legendHighlighted","_noLegendHighlighted","updatePosition","clientX","clientY","color","xAxisCalloutData","yAxisCalloutData","_hoverOff","_handleChartMouseLeave","_adjustProps","barHeight","_getChartDataText","data","_getDefaultTextData","_createLegends","chartProps","legendItems","forEach","chartData","dataPoint","legendItem","title","action","hoverAction","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","legendProps","culture","accessibilityData","chartDataAccessibilityData","total","reduce","acc","horizontalBarChartdata","div","className","classes","chartTitleRight","chartDataMode","span","chartDataTextDenominator","dataRatioPercentage","round","_createBenchmark","undefined","totalData","benchmarkData","benchmarkRatio","benchmarkStyles","left","benchmarkContainer","triangle","style","_createBars","noOfBars","count","totalMarginPercent","defaultColors","colorPaletteBlueForeground2","colorPaletteCornflowerForeground2","colorPaletteDarkGreenForeground2","colorPaletteNavyForeground2","colorPaletteDarkOrangeForeground2","startingPoint","prevPosition","value","sumOfPercent","map","pointData","scalingRatio","bars","floor","xValue","placeholderIndex","isLegendSelected","variant","AbsoluteScale","hideLabels","text","key","barValue","dominantBaseline","transform","barLabel","aria-hidden","rect","data-is-focusable","width","height","fill","onMouseOver","onFocus","bind","role","aria-label","_getAriaLabel","onBlur","onMouseLeave","barWrapper","opacity","tabIndex","yValue","callOutAccessibilityData","ariaLabel","_isChartEmpty","length","newX","newY","threshold","distance","sqrt","pow","useEffect","svgWidth","current","getBoundingClientRect","MARGIN_WIDTH_IN_PX","currentBarSpacing","barLegend","focusAttributes","legendButtons","datapoint","root","points","colorBackgroundOverlay","chartDataText","keyVal","items","chartTitle","chartTitleLeft","content","chartTitleAccessibilityData","svg","ref","chart","g","id","e","onClick","p","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerHorizontalBar","customCalloutProps","calloutPropsPerDataPoint","isCartesian","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["HorizontalBarChart.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useHorizontalBarChartStyles } from './useHorizontalBarChartStyles.styles';\nimport { ChartProps, HorizontalBarChartProps, ChartDataPoint, RefArrayData, HorizontalBarChartVariant } from './index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { formatScientificLimitWidth, getAccessibleDataObject, useRtl } from '../../utilities/index';\nimport { useId } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { FocusableTooltipText } from '../../utilities/FocusableTooltipText';\nimport { Legend, Legends } from '../../index';\n\n/**\n * HorizontalBarChart is the context wrapper and container for all HorizontalBarChart content/controls,\n * It has no direct style or slot opinions.\n *\n * HorizontalBarChart also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps> = React.forwardRef<\n HTMLDivElement,\n HorizontalBarChartProps\n>((props, forwardedRef) => {\n const legendContainer = React.useRef<HTMLDivElement | null>(null);\n const _uniqLineText: string = '_HorizontalLine_' + Math.random().toString(36).substring(7);\n const _refArray: RefArrayData[] = [];\n const _isRTL: boolean = useRtl();\n const barChartSvgRef: React.RefObject<SVGSVGElement> = React.createRef<SVGSVGElement>();\n const _emptyChartId: string = useId('_HBC_empty');\n let _barHeight: number;\n let _calloutAnchorPoint: ChartDataPoint | null;\n let isSingleBar: boolean = true;\n\n const [hoverValue, setHoverValue] = React.useState<string | number | Date | null>('');\n const [lineColor, setLineColor] = React.useState<string>('');\n const [legend, setLegend] = React.useState<string | null>('');\n const [xCalloutValue, setXCalloutValue] = React.useState<string | undefined>('');\n const [yCalloutValue, setYCalloutValue] = React.useState<string | undefined>('');\n const [barCalloutProps, setBarCalloutProps] = React.useState<ChartDataPoint>();\n const [barSpacingInPercent, setBarSpacingInPercent] = React.useState<number>(0);\n const [isPopoverOpen, setPopoverOpen] = React.useState<boolean>(false);\n const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n const [selectedLegend, setSelectedLegend] = React.useState<string>('');\n const [activeLegend, setActiveLegend] = React.useState<string>('');\n\n function _refCallback(element: SVGGElement, legendTitle: string | undefined): void {\n _refArray.push({ index: legendTitle, refElement: element });\n }\n\n function _hoverOn(\n event: React.FocusEvent<SVGRectElement> | React.MouseEvent<SVGRectElement>,\n hoverVal: string | number | Date,\n point: ChartDataPoint,\n ): void {\n if (\n (!isPopoverOpen || legend !== point.legend!) &&\n _calloutAnchorPoint !== point &&\n (_legendHighlighted(point.legend) || _noLegendHighlighted())\n ) {\n _calloutAnchorPoint = point;\n let x = 0;\n let y = 0;\n\n if ('clientX' in event && event.clientX && event.clientY) {\n // Mouse event\n x = event.clientX;\n y = event.clientY;\n } else {\n // Focus event\n const targetRect = (event.target as SVGRectElement).getBoundingClientRect();\n x = targetRect.left + targetRect.width / 2;\n y = targetRect.top + targetRect.height / 2;\n }\n\n updatePosition(x, y);\n setHoverValue(hoverVal);\n setLineColor(point.color!);\n setLegend(point.legend!);\n setXCalloutValue(point.xAxisCalloutData!);\n setYCalloutValue(point.yAxisCalloutData!);\n setBarCalloutProps(point);\n // ToDo - Confirm setting multiple state variables like this is performant.\n }\n }\n\n function _hoverOff(): void {\n /*ToDo. To fix*/\n }\n\n const _handleChartMouseLeave = () => {\n _calloutAnchorPoint = null;\n if (isPopoverOpen) {\n setPopoverOpen(false);\n setHoverValue('');\n setLineColor('');\n setLegend('');\n }\n };\n\n const _adjustProps = (): void => {\n _barHeight = props.barHeight || 12;\n };\n\n const _getChartDataText = (data: ChartProps) => {\n /* return props.barChartCustomData ? (\n <div role=\"text\">{props.barChartCustomData(data)}</div>\n ) : ( */\n return _getDefaultTextData(data);\n //)\n };\n\n function _createLegends(chartProps: ChartProps[]): JSX.Element {\n const legendItems: Legend[] = [];\n chartProps.forEach((point: ChartProps) => {\n point.chartData!.forEach((dataPoint: ChartDataPoint) => {\n const color: string = dataPoint.color!;\n // mapping data to the format Legends component needs\n const legendItem: Legend = {\n title: dataPoint.legend!,\n color,\n action: () => {\n if (selectedLegend === dataPoint.legend) {\n setSelectedLegend('');\n } else {\n setSelectedLegend(dataPoint.legend!);\n }\n },\n hoverAction: () => {\n _handleChartMouseLeave();\n setActiveLegend(dataPoint.legend!);\n },\n onMouseOutAction: () => {\n setActiveLegend('');\n },\n };\n legendItems.push(legendItem);\n });\n });\n const legends = (\n <Legends legends={legendItems} centerLegends overflowText={props.legendsOverflowText} {...props.legendProps} />\n );\n return legends;\n }\n\n function _getDefaultTextData(data: ChartProps): JSX.Element {\n const { culture } = props;\n const accessibilityData = getAccessibleDataObject(data.chartDataAccessibilityData!, 'text', false);\n if (!isSingleBar) {\n const total = data.chartData!.reduce(\n (acc: number, point: ChartDataPoint) =>\n acc + (point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0),\n 0,\n );\n return (\n <div className={classes.chartTitleRight} {...accessibilityData}>\n {formatToLocaleString(total, culture) as React.ReactNode}\n </div>\n );\n }\n const chartDataMode = props.chartDataMode || 'default';\n const chartData: ChartDataPoint = data!.chartData![0];\n const x = chartData.horizontalBarChartdata!.x;\n const y = chartData.horizontalBarChartdata!.total!;\n\n switch (chartDataMode) {\n case 'default':\n return (\n <div className={classes.chartTitleRight} {...accessibilityData}>\n {formatToLocaleString(x, culture) as React.ReactNode}\n </div>\n );\n case 'fraction':\n return (\n <div {...accessibilityData}>\n <span className={classes.chartTitleRight}>{formatToLocaleString(x, culture) as React.ReactNode}</span>\n <span className={classes.chartDataTextDenominator}>{' / ' + formatToLocaleString(y, culture)}</span>\n </div>\n );\n case 'percentage':\n const dataRatioPercentage = `${formatToLocaleString(Math.round((x / y) * 100), culture)}%`;\n return (\n <div className={classes.chartTitleRight} {...accessibilityData}>\n {dataRatioPercentage}\n </div>\n );\n }\n }\n\n function _createBenchmark(data: ChartProps): JSX.Element {\n if (data.chartData![0].horizontalBarChartdata!.total === undefined) {\n return <></>;\n }\n const totalData = data.chartData![0].horizontalBarChartdata!.total!;\n const benchmarkData = data.chartData![0].data;\n const benchmarkRatio = Math.round(((benchmarkData ? benchmarkData : 0) / totalData) * 100);\n\n const benchmarkStyles = {\n left: 'calc(' + benchmarkRatio + '% - 4px)',\n };\n\n return (\n <div className={classes.benchmarkContainer}>\n <div className={classes.triangle} style={benchmarkStyles} />\n </div>\n );\n }\n\n /**\n * This functions returns an array of <rect> elements, which form the bars\n * For each bar an x value, and a width needs to be specified\n * The computations are done based on percentages\n * Extra margin is also provided, in the x value to provide some spacing in between the bars\n */\n\n function _createBars(data: ChartProps): JSX.Element[] {\n const noOfBars =\n data.chartData?.reduce((count: number, point: ChartDataPoint) => (count += (point.data || 0) > 0 ? 1 : 0), 0) ||\n 1;\n const totalMarginPercent = barSpacingInPercent * (noOfBars - 1);\n const defaultColors: string[] = [\n tokens.colorPaletteBlueForeground2,\n tokens.colorPaletteCornflowerForeground2,\n tokens.colorPaletteDarkGreenForeground2,\n tokens.colorPaletteNavyForeground2,\n tokens.colorPaletteDarkOrangeForeground2,\n ];\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: ChartDataPoint) =>\n acc + (point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0),\n 0,\n );\n let prevPosition = 0;\n let value = 0;\n\n let sumOfPercent = 0;\n data.chartData!.map((point: ChartDataPoint, index: number) => {\n const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n value = (pointData / total) * 100;\n if (value < 0) {\n value = 0;\n } else if (value < 1 && value !== 0) {\n value = 1;\n }\n sumOfPercent += value;\n\n return sumOfPercent;\n });\n\n /**\n * The %age of the space occupied by the margin needs to subtracted\n * while computing the scaling ratio, since the margins are not being\n * scaled down, only the data is being scaled down from a higher percentage to lower percentage\n * Eg: 95% of the space is taken by the bars, 5% by the margins\n * Now if the sumOfPercent is 120% -> This needs to be scaled down to 95%, not 100%\n * since that's only space available to the bars\n */\n const scalingRatio = sumOfPercent !== 0 ? (sumOfPercent - totalMarginPercent) / 100 : 1;\n\n const bars = data.chartData!.map((point: ChartDataPoint, index: number) => {\n const color: string = point.color ? point.color : defaultColors[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 / scalingRatio;\n } else {\n value = value / scalingRatio;\n }\n startingPoint.push(prevPosition);\n\n const xValue = point.horizontalBarChartdata!.x;\n const placeholderIndex = 1;\n const isLegendSelected: boolean = _legendHighlighted(point.legend) || _noLegendHighlighted();\n\n // Render bar label instead of placeholder bar for absolute-scale variant\n if (index === placeholderIndex && props.variant === HorizontalBarChartVariant.AbsoluteScale) {\n if (props.hideLabels) {\n return <text key={index} />;\n }\n\n const barValue = data.chartData![0].horizontalBarChartdata!.x;\n\n return (\n <text\n key={index}\n x={`${_isRTL ? 100 - startingPoint[index] : startingPoint[index]}%`}\n y={_barHeight / 2}\n dominantBaseline=\"central\"\n transform={`translate(${_isRTL ? -4 : 4})`}\n className={classes.barLabel}\n aria-hidden={true}\n >\n {formatScientificLimitWidth(barValue)}\n </text>\n );\n }\n\n return (\n <rect\n key={index}\n x={`${\n _isRTL\n ? 100 - startingPoint[index] - value - index * barSpacingInPercent\n : startingPoint[index] + index * barSpacingInPercent\n }%`}\n y={0}\n width={value + '%'}\n height={_barHeight}\n fill={color}\n onMouseOver={point.legend !== '' ? event => _hoverOn(event, xValue, point) : undefined}\n onFocus={point.legend !== '' ? event => _hoverOn(event, xValue, point) : undefined}\n role=\"img\"\n aria-label={_getAriaLabel(point)}\n onBlur={_hoverOff}\n onMouseLeave={_hoverOff}\n className={classes.barWrapper}\n opacity={isLegendSelected ? 1 : 0.1}\n tabIndex={point.legend !== '' ? 0 : undefined}\n />\n );\n });\n return bars;\n }\n\n const _getAriaLabel = (point: ChartDataPoint): string => {\n const legend = point.xAxisCalloutData || point.legend;\n const yValue =\n point.yAxisCalloutData ||\n (point.horizontalBarChartdata\n ? `${point.horizontalBarChartdata.x}/${point.horizontalBarChartdata.total ?? ''}`\n : 0);\n return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;\n };\n\n function _isChartEmpty(): boolean {\n return !(props.data && props.data.length > 0);\n }\n\n function updatePosition(newX: number, newY: number): void {\n const threshold = 1; // Set a threshold for movement\n const { x, y } = clickPosition;\n\n // Calculate the distance moved\n const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n // Update the position only if the distance moved is greater than the threshold\n if (distance > threshold) {\n setClickPosition({ x: newX, y: newY });\n setPopoverOpen(true);\n }\n }\n\n React.useEffect(() => {\n const svgWidth = barChartSvgRef?.current?.getBoundingClientRect().width || 0;\n const MARGIN_WIDTH_IN_PX = 3;\n if (svgWidth) {\n const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;\n setBarSpacingInPercent(currentBarSpacing);\n }\n }, [barChartSvgRef]);\n\n function _legendHighlighted(barLegend?: string) {\n if (barLegend === undefined) {\n return false;\n }\n return selectedLegend === barLegend || (selectedLegend === '' && activeLegend === barLegend);\n }\n\n /**\n * This function checks if none of the legends is selected or hovered.*/\n\n function _noLegendHighlighted() {\n return selectedLegend === '' && activeLegend === '';\n }\n\n const { data } = props;\n _adjustProps();\n const classes = useHorizontalBarChartStyles(props);\n const focusAttributes = useFocusableGroup();\n const legendButtons = _createLegends(data!);\n\n let datapoint: number | undefined = 0;\n return !_isChartEmpty() ? (\n <div className={classes.root} onMouseLeave={_handleChartMouseLeave}>\n {data!.map((points: ChartProps, 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 isSingleBar =\n points.chartData!.length === 1 || (points.chartData!.length > 1 && points.chartData![1].legend === '');\n if (isSingleBar) {\n points.chartData![1] = {\n legend: '',\n horizontalBarChartdata: {\n x: points.chartData![0].horizontalBarChartdata!.total! - datapoint!,\n total: points.chartData![0].horizontalBarChartdata!.total!,\n },\n color: tokens.colorBackgroundOverlay,\n };\n }\n\n // Hide right side text of chart title for absolute-scale variant\n const chartDataText =\n props.variant === HorizontalBarChartVariant.AbsoluteScale ? null : _getChartDataText(points!);\n const bars = _createBars(points!);\n const keyVal = _uniqLineText + '_' + index;\n // ToDo - Showtriangle property is per data series. How to account for it in the new stylesheet\n /* const classes = useHorizontalBarChartStyles(props.styles!, {\n width: props.width,\n showTriangle: !!points!.chartData![0].data,\n variant: props.variant,\n }); */\n\n return (\n <div key={index}>\n <div className={classes.items} {...focusAttributes}>\n <div className={classes.chartTitle}>\n {points!.chartTitle && (\n <FocusableTooltipText\n className={classes.chartTitleLeft}\n content={points!.chartTitle}\n accessibilityData={points!.chartTitleAccessibilityData}\n />\n )}\n {chartDataText}\n </div>\n {points!.chartData![0].data && _createBenchmark(points!)}\n <svg ref={barChartSvgRef} className={classes.chart} aria-label={points!.chartTitle}>\n <g\n id={keyVal}\n key={keyVal}\n ref={(e: SVGGElement) => {\n _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 >\n {bars}\n </g>\n </svg>\n </div>\n </div>\n );\n })}\n <ChartPopover\n xCalloutValue={xCalloutValue}\n yCalloutValue={yCalloutValue}\n culture={props.culture ?? 'en-us'}\n clickPosition={clickPosition}\n isPopoverOpen={isPopoverOpen}\n legend={legend!}\n YValue={hoverValue!}\n color={lineColor}\n isCalloutForStack={false}\n customCallout={{\n customizedCallout: props.onRenderCalloutPerHorizontalBar\n ? props.onRenderCalloutPerHorizontalBar(barCalloutProps!)\n : undefined,\n customCalloutProps: props.calloutPropsPerDataPoint\n ? props.calloutPropsPerDataPoint(barCalloutProps!)\n : undefined,\n }}\n isCartesian={false}\n />\n {!isSingleBar && (\n <div ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\n {legendButtons}\n </div>\n )}\n </div>\n ) : (\n <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n );\n //TODO validate and fix focus border for issue for popover\n});\nHorizontalBarChart.displayName = 'HorizontalBarChart';\n"],"names":["React","useHorizontalBarChartStyles","HorizontalBarChartVariant","formatToLocaleString","formatScientificLimitWidth","getAccessibleDataObject","useRtl","useId","tokens","useFocusableGroup","ChartPopover","FocusableTooltipText","Legends","HorizontalBarChart","forwardRef","props","forwardedRef","legendContainer","useRef","_uniqLineText","Math","random","toString","substring","_refArray","_isRTL","barChartSvgRef","createRef","_emptyChartId","_barHeight","_calloutAnchorPoint","isSingleBar","hoverValue","setHoverValue","useState","lineColor","setLineColor","legend","setLegend","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","barCalloutProps","setBarCalloutProps","barSpacingInPercent","setBarSpacingInPercent","isPopoverOpen","setPopoverOpen","clickPosition","setClickPosition","x","y","selectedLegend","setSelectedLegend","activeLegend","setActiveLegend","_refCallback","element","legendTitle","push","index","refElement","_hoverOn","event","hoverVal","point","_legendHighlighted","_noLegendHighlighted","clientX","clientY","targetRect","target","getBoundingClientRect","left","width","top","height","updatePosition","color","xAxisCalloutData","yAxisCalloutData","_hoverOff","_handleChartMouseLeave","_adjustProps","barHeight","_getChartDataText","data","_getDefaultTextData","_createLegends","chartProps","legendItems","forEach","chartData","dataPoint","legendItem","title","action","hoverAction","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","legendProps","culture","accessibilityData","chartDataAccessibilityData","total","reduce","acc","horizontalBarChartdata","div","className","classes","chartTitleRight","chartDataMode","span","chartDataTextDenominator","dataRatioPercentage","round","_createBenchmark","undefined","totalData","benchmarkData","benchmarkRatio","benchmarkStyles","benchmarkContainer","triangle","style","_createBars","noOfBars","count","totalMarginPercent","defaultColors","colorPaletteBlueForeground2","colorPaletteCornflowerForeground2","colorPaletteDarkGreenForeground2","colorPaletteNavyForeground2","colorPaletteDarkOrangeForeground2","startingPoint","prevPosition","value","sumOfPercent","map","pointData","scalingRatio","bars","floor","xValue","placeholderIndex","isLegendSelected","variant","AbsoluteScale","hideLabels","text","key","barValue","dominantBaseline","transform","barLabel","aria-hidden","rect","fill","onMouseOver","onFocus","role","aria-label","_getAriaLabel","onBlur","onMouseLeave","barWrapper","opacity","tabIndex","yValue","callOutAccessibilityData","ariaLabel","_isChartEmpty","length","newX","newY","threshold","distance","sqrt","pow","useEffect","svgWidth","current","MARGIN_WIDTH_IN_PX","currentBarSpacing","barLegend","focusAttributes","legendButtons","datapoint","root","points","colorBackgroundOverlay","chartDataText","keyVal","items","chartTitle","chartTitleLeft","content","chartTitleAccessibilityData","svg","ref","chart","g","id","e","onClick","p","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerHorizontalBar","customCalloutProps","calloutPropsPerDataPoint","isCartesian","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib/components/VerticalBarChart/VerticalBarChart.js CHANGED
@@ -159,8 +159,9 @@ const MIN_DOMAIN_MARGIN = 8;
159
159
  // and avoid conveying duplicate info, make these line points non-focusable.
160
160
  "data-is-focusable": _legendHighlighted(lineLegendText),
161
161
  ref: (e)=>circleRef.refElement = e,
162
- onFocus: _lineFocus.bind(item.point, circleRef),
163
- onBlur: _handleChartMouseLeave
162
+ onFocus: (event)=>_lineFocus(event, item.point, circleRef),
163
+ onBlur: _handleChartMouseLeave,
164
+ tabIndex: _legendHighlighted(lineLegendText) ? 0 : undefined
164
165
  });
165
166
  });
166
167
  return /*#__PURE__*/ React.createElement(React.Fragment, null, line, dots);
@@ -354,7 +355,7 @@ const MIN_DOMAIN_MARGIN = 8;
354
355
  setHoverXValue('');
355
356
  }
356
357
  // eslint-disable-next-line @typescript-eslint/no-shadow
357
- function _onBarFocus(point, refArrayIndexNumber, color) {
358
+ function _onBarFocus(event, point, refArrayIndexNumber, color) {
358
359
  // eslint-disable-next-line @typescript-eslint/no-shadow
359
360
  const { YValueHover, hoverXValue } = _getCalloutContentForLineAndBar(point);
360
361
  _refArray.forEach((obj, index)=>{
@@ -379,7 +380,7 @@ const MIN_DOMAIN_MARGIN = 8;
379
380
  mouseEvent.persist();
380
381
  _lineHoverFocus(point, mouseEvent);
381
382
  }
382
- function _lineFocus(point, ref) {
383
+ function _lineFocus(event, point, ref) {
383
384
  if (ref.refElement) {
384
385
  _lineHoverFocus(point, ref.refElement);
385
386
  }
@@ -482,7 +483,6 @@ const MIN_DOMAIN_MARGIN = 8;
482
483
  x: xPoint,
483
484
  y: !isHeightNegative ? yPoint : baselineHeight,
484
485
  width: _barWidth,
485
- "data-is-focusable": !props.hideTooltip && shouldHighlight,
486
486
  height: adjustedBarHeight,
487
487
  ref: (e)=>{
488
488
  _refCallback(e, point.legend);
@@ -492,10 +492,10 @@ const MIN_DOMAIN_MARGIN = 8;
492
492
  "aria-label": _getAriaLabel(point),
493
493
  role: "img",
494
494
  onMouseLeave: _onBarLeave,
495
- onFocus: _onBarFocus.bind(point, index, colorScale(point.y)),
495
+ onFocus: (event)=>_onBarFocus(event, point, index, colorScale(point.y)),
496
496
  onBlur: _onBarLeave,
497
497
  fill: point.color && !useSingleColor ? point.color : colorScale(point.y),
498
- tabIndex: point.legend !== '' ? 0 : undefined,
498
+ tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined,
499
499
  opacity: shouldHighlight ? 1 : 0.1,
500
500
  rx: props.roundCorners ? 3 : 0
501
501
  }), _renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative));
@@ -568,10 +568,9 @@ const MIN_DOMAIN_MARGIN = 8;
568
568
  onMouseOver: (event)=>_onBarHover(point, colorScale(point.y), event),
569
569
  onMouseLeave: _onBarLeave,
570
570
  onBlur: _onBarLeave,
571
- "data-is-focusable": !props.hideTooltip && shouldHighlight,
572
- onFocus: _onBarFocus.bind(point, index, colorScale(point.y)),
571
+ onFocus: (event)=>_onBarFocus(event, point, index, colorScale(point.y)),
573
572
  fill: point.color ? point.color : colorScale(point.y),
574
- tabIndex: point.legend !== '' ? 0 : undefined,
573
+ tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined,
575
574
  rx: props.roundCorners ? 3 : 0,
576
575
  opacity: shouldHighlight ? 1 : 0.1
577
576
  }), _renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative));
@@ -633,7 +632,6 @@ const MIN_DOMAIN_MARGIN = 8;
633
632
  className: classes.opacityChangeOnHover,
634
633
  y: !isHeightNegative ? yPoint : baselineHeight,
635
634
  width: _barWidth,
636
- "data-is-focusable": !props.hideTooltip && shouldHighlight,
637
635
  height: adjustedBarHeight,
638
636
  ref: (e)=>{
639
637
  _refCallback(e, point.legend);
@@ -643,10 +641,10 @@ const MIN_DOMAIN_MARGIN = 8;
643
641
  "aria-label": _getAriaLabel(point),
644
642
  role: "img",
645
643
  onMouseLeave: _onBarLeave,
646
- onFocus: _onBarFocus.bind(point, index, colorScale(point.y)),
644
+ onFocus: (event)=>_onBarFocus(event, point, index, colorScale(point.y)),
647
645
  onBlur: _onBarLeave,
648
646
  fill: point.color && !useSingleColor ? point.color : colorScale(point.y),
649
- tabIndex: point.legend !== '' ? 0 : undefined,
647
+ tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined,
650
648
  rx: props.roundCorners ? 3 : 0,
651
649
  opacity: shouldHighlight ? 1 : 0.1
652
650
  }), _renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative));