From c918d7f045e427cde13c39a98d811f07a6c53355 Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Thu, 22 Sep 2022 14:52:46 +0530 Subject: [PATCH 1/6] fix wrong narration when legend selected --- .../src/components/DonutChart/Arc/Arc.tsx | 4 +- .../components/DonutChart/DonutChart.base.tsx | 13 ++-- .../__snapshots__/DonutChart.test.tsx.snap | 8 +-- .../GroupedVerticalBarChart.base.tsx | 61 +++++++++---------- .../HeatMapChart/HeatMapChart.base.tsx | 8 ++- .../MultiStackedBarChart.base.tsx | 54 ++++++++-------- .../StackedBarChart/StackedBarChart.base.tsx | 58 +++++++++--------- .../VerticalBarChart.base.tsx | 61 +++++++++---------- .../VerticalStackedBarChart.base.tsx | 16 ++--- 9 files changed, 136 insertions(+), 147 deletions(-) diff --git a/packages/react-charting/src/components/DonutChart/Arc/Arc.tsx b/packages/react-charting/src/components/DonutChart/Arc/Arc.tsx index 5e15cd26b7dc1..d267f9483dbf1 100644 --- a/packages/react-charting/src/components/DonutChart/Arc/Arc.tsx +++ b/packages/react-charting/src/components/DonutChart/Arc/Arc.tsx @@ -86,9 +86,7 @@ export class Arc extends React.Component { private _hoverOn(data: IChartDataPoint, mouseEvent: React.MouseEvent): void { mouseEvent.persist(); - if (this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === '') { - this.props.hoverOnCallback!(data, mouseEvent); - } + this.props.hoverOnCallback!(data, mouseEvent); } private _hoverOff = (): void => { diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx index e19ac9ea195c8..d46944828cfa8 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx +++ b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx @@ -144,6 +144,7 @@ export class DonutChartBase extends React.Component @@ -237,12 +238,10 @@ export class DonutChartBase extends React.Component { this._currentHoverElement = element; this.setState({ - showHover: true, + showHover: this.state.activeLegend === data.legend || this.state.activeLegend === '', value: data.data!.toString(), legend: data.legend, - activeLegend: data.legend, color: data.color!, - selectedLegend: data.legend!, xCalloutValue: data.xAxisCalloutData!, yCalloutValue: data.yAxisCalloutData!, focusedArcId: id, @@ -256,25 +255,23 @@ export class DonutChartBase extends React.Component { - this.setState({ showHover: false, focusedArcId: '', activeLegend: '', selectedLegend: 'none' }); + this.setState({ focusedArcId: '' }); }; private _hoverLeave(): void { - this.setState({ activeLegend: '', selectedLegend: 'none', focusedArcId: '' }); + /**/ } private _handleChartMouseLeave = () => { diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap index 0ae06e0d48fee..1e9cfcff7395b 100644 --- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap +++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap @@ -106,7 +106,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover onMouseLeave={[Function]} onMouseMove={[Function]} onMouseOver={[Function]} - opacity={0.1} + opacity={1} role="text" /> , ): void => { mouseEvent.persist(); - if ( - (this.state.isLegendSelected === false || - (this.state.isLegendSelected && this.state.titleForHoverCard === pointData.legend)) && - this._calloutAnchorPoint !== pointData - ) { + if (this._calloutAnchorPoint !== pointData) { this._calloutAnchorPoint = pointData; this.setState({ refSelected: mouseEvent, - isCalloutVisible: true, - titleForHoverCard: pointData.legend, + isCalloutVisible: + this.state.isLegendSelected === false || + (this.state.isLegendSelected === true && this.state.titleForHoverCard === pointData.legend), + calloutLegend: pointData.legend, dataForHoverCard: pointData.data, color: pointData.color, xCalloutValue: pointData.xAxisCalloutData, @@ -266,30 +266,27 @@ export class GroupedVerticalBarChartBase extends React.Component< groupData: any, refArrayIndexNumber: number, ): void => { - if ( - this.state.isLegendSelected === false || - (this.state.isLegendSelected && this.state.titleForHoverCard === pointData.legend) - ) { - this._refArray.forEach((obj: IRefArrayData, index: number) => { - if (obj.index === pointData.legend && refArrayIndexNumber === index) { - this.setState({ - refSelected: obj.refElement, - isCalloutVisible: true, - titleForHoverCard: pointData.legend, - dataForHoverCard: pointData.data, - color: pointData.color, - xCalloutValue: pointData.xAxisCalloutData, - yCalloutValue: pointData.yAxisCalloutData, - dataPointCalloutProps: pointData, - callOutAccessibilityData: this.props.isCalloutForStack - ? groupData.stackCallOutAccessibilityData - : pointData.callOutAccessibilityData, - YValueHover: groupData.groupSeries, - hoverXValue: pointData.xAxisCalloutData, - }); - } - }); - } + this._refArray.forEach((obj: IRefArrayData, index: number) => { + if (obj.index === pointData.legend && refArrayIndexNumber === index) { + this.setState({ + refSelected: obj.refElement, + isCalloutVisible: + this.state.isLegendSelected === false || + (this.state.isLegendSelected === true && this.state.titleForHoverCard === pointData.legend), + calloutLegend: pointData.legend, + dataForHoverCard: pointData.data, + color: pointData.color, + xCalloutValue: pointData.xAxisCalloutData, + yCalloutValue: pointData.yAxisCalloutData, + dataPointCalloutProps: pointData, + callOutAccessibilityData: this.props.isCalloutForStack + ? groupData.stackCallOutAccessibilityData + : pointData.callOutAccessibilityData, + YValueHover: groupData.groupSeries, + hoverXValue: pointData.xAxisCalloutData, + }); + } + }); }; private _redirectToUrl = (href: string | undefined): void => { diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx index 2cfb39e29e6a5..9a654a438a23e 100644 --- a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx +++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx @@ -257,7 +257,9 @@ export class HeatMapChartBase extends React.Component { this.setState({ target: this._rectRefArray[id].refElement, - isCalloutVisible: true, + isCalloutVisible: + this.state.isLegendSelected === false || + (this.state.isLegendSelected === true && this.state.activeLegend === data.legend), calloutYValue: `${data.rectText}`, calloutTextColor: this._colorScale(data.value), calloutLegend: data.legend, @@ -274,7 +276,9 @@ export class HeatMapChartBase extends React.Component { @@ -61,6 +62,7 @@ export class MultiStackedBarChartBase extends React.Component { @@ -108,6 +110,7 @@ export class MultiStackedBarChartBase extends React.Component @@ -266,26 +269,23 @@ export class MultiStackedBarChartBase extends React.Component { - if (obj.legendText === point.legend!) { - this.setState({ - refSelected: obj.refElement, - isCalloutVisible: true, - selectedLegendTitle: point.legend!, - dataForHoverCard: pointData, - color: color, - xCalloutValue: point.xAxisCalloutData!, - yCalloutValue: point.yAxisCalloutData!, - dataPointCalloutProps: point, - callOutAccessibilityData: point.callOutAccessibilityData!, - }); - } - }); - } + this.state.refArray.forEach((obj: IRefArrayData) => { + if (obj.legendText === point.legend!) { + this.setState({ + refSelected: obj.refElement, + isCalloutVisible: + this.state.isLegendSelected === false || + (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!), + calloutLegend: point.legend!, + dataForHoverCard: pointData, + color: color, + xCalloutValue: point.xAxisCalloutData!, + yCalloutValue: point.yAxisCalloutData!, + dataPointCalloutProps: point, + callOutAccessibilityData: point.callOutAccessibilityData!, + }); + } + }); } private _refCallback(element: SVGGElement, legendTitle: string): void { @@ -419,16 +419,14 @@ export class MultiStackedBarChartBase extends React.Component { @@ -48,6 +49,7 @@ export class StackedBarChartBase extends React.Component @@ -154,7 +157,7 @@ export class StackedBarChartBase extends React.Component { - if (obj.index === point.legend!) { - this.setState({ - refSelected: obj.refElement, - isCalloutVisible: true, - selectedLegendTitle: point.legend!, - dataForHoverCard: pointData, - color: color, - xCalloutValue: point.xAxisCalloutData!, - yCalloutValue: point.yAxisCalloutData!, - dataPointCalloutProps: point, - callOutAccessibilityData: point.callOutAccessibilityData!, - }); - } - }); - } + this._refArray.forEach((obj: IRefArrayData) => { + if (obj.index === point.legend!) { + this.setState({ + refSelected: obj.refElement, + isCalloutVisible: + this.state.isLegendSelected === false || + (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!), + calloutLegend: point.legend!, + dataForHoverCard: pointData, + color: color, + xCalloutValue: point.xAxisCalloutData! || point.legend!, + yCalloutValue: point.yAxisCalloutData! || pointData.toString(), + dataPointCalloutProps: point, + callOutAccessibilityData: point.callOutAccessibilityData!, + }); + } + }); } private _addLegend(legendDataItems: ILegend[], data?: IChartDataPoint): void { @@ -409,20 +409,18 @@ export class StackedBarChartBase extends React.Component, ): void { mouseEvent.persist(); - if ( - (this.state.isLegendSelected === false || - (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!)) && - this._calloutAnchorPoint !== point - ) { + if (this._calloutAnchorPoint !== point) { this._calloutAnchorPoint = point; this.setState({ refSelected: mouseEvent, - isCalloutVisible: true, - selectedLegendTitle: point.legend!, + isCalloutVisible: + this.state.isLegendSelected === false || + (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!), + calloutLegend: point.legend!, dataForHoverCard: pointData, color: color, - xCalloutValue: point.xAxisCalloutData!, - yCalloutValue: point.yAxisCalloutData!, + xCalloutValue: point.xAxisCalloutData! || point.legend!, + yCalloutValue: point.yAxisCalloutData! || pointData.toString(), dataPointCalloutProps: point, callOutAccessibilityData: point.callOutAccessibilityData!, }); diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx index 14d8ff291d987..f6996759ab4bb 100644 --- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx @@ -49,6 +49,7 @@ export interface IVerticalBarChartState extends IBasestate { YValueHover: IYValueHover[]; hoverXValue?: string | number | null; callOutAccessibilityData?: IAccessibilityProps; + calloutLegend: string; } type ColorScale = (_p?: number) => string; @@ -85,6 +86,7 @@ export class VerticalBarChartBase extends React.Component { - if ( - this.state.isLegendSelected === false || - (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend) - ) { - const { YValueHover, hoverXValue } = this._getCalloutContentForLineAndBar(point); - this._refArray.forEach((obj: IRefArrayData, index: number) => { - if (obj.index === point.legend! && refArrayIndexNumber === index) { - this.setState({ - refSelected: obj.refElement, - isCalloutVisible: true, - selectedLegendTitle: point.legend!, - dataForHoverCard: point.y, - color: point.color || color, - xCalloutValue: point.xAxisCalloutData || point.x.toString(), - yCalloutValue: point.yAxisCalloutData!, - dataPointCalloutProps: point, - activeXdataPoint: point.x, - YValueHover, - hoverXValue, - callOutAccessibilityData: point.callOutAccessibilityData, - }); - } - }); - } + const { YValueHover, hoverXValue } = this._getCalloutContentForLineAndBar(point); + this._refArray.forEach((obj: IRefArrayData, index: number) => { + if (obj.index === point.legend! && refArrayIndexNumber === index) { + this.setState({ + refSelected: obj.refElement, + isCalloutVisible: + this.state.isLegendSelected === false || + (this.state.isLegendSelected === true && this.state.selectedLegendTitle === point.legend), + calloutLegend: point.legend!, + dataForHoverCard: point.y, + color: point.color || color, + xCalloutValue: point.xAxisCalloutData || point.x.toString(), + yCalloutValue: point.yAxisCalloutData!, + dataPointCalloutProps: point, + activeXdataPoint: point.x, + YValueHover, + hoverXValue, + callOutAccessibilityData: point.callOutAccessibilityData, + }); + } + }); }; private _getScales = ( diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index 988c1b6b6f374..535d926d738d6 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -65,6 +65,7 @@ export interface IVerticalStackedBarChartState extends IBasestate { stackCalloutProps?: IVerticalStackedChartProps; activeXAxisDataPoint: number | string; callOutAccessibilityData?: IAccessibilityProps; + calloutLegend: string; } export class VerticalStackedBarChartBase extends React.Component< IVerticalStackedBarChartProps, @@ -102,6 +103,7 @@ export class VerticalStackedBarChartBase extends React.Component< xCalloutValue: '', yCalloutValue: '', activeXAxisDataPoint: '', + calloutLegend: '', }; warnDeprecations(COMPONENT_NAME, props, { colors: 'IVSChartDataPoint.color', @@ -148,7 +150,7 @@ export class VerticalStackedBarChartBase extends React.Component< isBeakVisible: false, gapSpace: 15, color: this.state.color, - legend: this.state.selectedLegendTitle, + legend: this.state.calloutLegend, XValue: this.state.xCalloutValue!, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard, YValueHover: this.state.YValueHover, @@ -570,16 +572,14 @@ export class VerticalStackedBarChartBase extends React.Component< color: string, refSelected: React.MouseEvent | SVGGElement, ): void { - if ( - (this.state.isLegendSelected === false || - (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)) && - this._calloutAnchorPoint !== point - ) { + if (this._calloutAnchorPoint !== point) { this._calloutAnchorPoint = point; this.setState({ refSelected, - isCalloutVisible: true, - selectedLegendTitle: point.legend, + isCalloutVisible: + this.state.isLegendSelected === false || + (this.state.isLegendSelected === true && this.state.selectedLegendTitle === point.legend), + calloutLegend: point.legend, dataForHoverCard: point.data, color, xCalloutValue: point.xAxisCalloutData ? point.xAxisCalloutData : xAxisPoint, From 99aaee1b5a648b0e2567ebb37dd3bf7d0b00b1e0 Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Thu, 22 Sep 2022 14:54:43 +0530 Subject: [PATCH 2/6] add change file --- ...eact-charting-1216d12c-7b19-41b7-bbde-99ed3b330d78.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charting-1216d12c-7b19-41b7-bbde-99ed3b330d78.json diff --git a/change/@fluentui-react-charting-1216d12c-7b19-41b7-bbde-99ed3b330d78.json b/change/@fluentui-react-charting-1216d12c-7b19-41b7-bbde-99ed3b330d78.json new file mode 100644 index 0000000000000..a5358d1785a62 --- /dev/null +++ b/change/@fluentui-react-charting-1216d12c-7b19-41b7-bbde-99ed3b330d78.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Fix wrong narration when legend selected", + "packageName": "@fluentui/react-charting", + "email": "kumarkshitij@microsoft.com", + "dependentChangeType": "patch" +} From 17bb0ffa77296a8de6b8ab612581a619b17b018a Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Thu, 13 Oct 2022 22:35:38 +0530 Subject: [PATCH 3/6] show/hide callout instead of mount/unmount --- .../__snapshots__/AreaChart.test.tsx.snap | 24 +++++++++++ .../CommonComponents/CartesianChart.base.tsx | 40 ++++++++++--------- .../GroupedVerticalBarChart.test.tsx.snap | 23 +++++++++++ .../__snapshots__/HeatMapChart.test.tsx.snap | 16 ++++++++ .../__snapshots__/LineChart.test.tsx.snap | 21 ++++++++++ .../VerticalBarChart.test.tsx.snap | 23 +++++++++++ .../VerticalStackedBarChart.test.tsx.snap | 27 +++++++++++++ 7 files changed, 155 insertions(+), 19 deletions(-) diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap index 0e2e1a6b19f50..d935277729521 100644 --- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap +++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap @@ -376,6 +376,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1 border: 0px; } data-is-focusable={true} + hidden={false} id="toolTipundefined" style={ Object { @@ -907,6 +908,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover border: 0px; } data-is-focusable={true} + hidden={false} id="toolTipundefined" style={ Object { @@ -1335,6 +1337,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on border: 0px; } data-is-focusable={true} + hidden={false} id="toolTipundefined" style={ Object { @@ -1725,6 +1728,9 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = ` + `; @@ -2046,6 +2052,9 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1` + `; @@ -2228,6 +2237,9 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = ` + `; @@ -2569,6 +2581,9 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = ` + `; @@ -2910,6 +2925,9 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`] + `; @@ -3251,6 +3269,9 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = ` + `; @@ -3592,5 +3613,8 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = ` + `; diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index ef04080c0c4a3..f335d512455d0 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -318,25 +318,27 @@ export class CartesianChartBase extends React.Component )} - {!this.props.hideTooltip && calloutProps!.isCalloutVisible && ( - - {/** Given custom callout, then it will render */} - {this.props.customizedCallout && this.props.customizedCallout} - {/** single x point its corresponding y points of all the bars/lines in chart will render in callout */} - {!this.props.customizedCallout && this.props.isCalloutForStack && this._multiValueCallout(calloutProps)} - {/** single x point its corresponding y point of single line/bar in the chart will render in callout */} - {!this.props.customizedCallout && !this.props.isCalloutForStack && ( - - )} - - )} + ); } diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap index fb4896075789d..3f700f1719720 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap @@ -618,6 +618,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly border: 0px; } data-is-focusable={false} + hidden={false} id="toolTipcallout0" style={ Object { @@ -1365,6 +1366,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout border: 0px; } data-is-focusable={false} + hidden={false} id="toolTipcallout0" style={ Object { @@ -1988,6 +1990,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar + `; @@ -2545,6 +2550,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine + `; @@ -2783,6 +2791,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1 + `; @@ -3360,6 +3371,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly + `; @@ -3937,6 +3951,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip + `; @@ -4514,6 +4531,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc + `; @@ -5091,5 +5111,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc + `; diff --git a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap index c153cafa51b24..6c0b6359f1648 100644 --- a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap +++ b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap @@ -363,6 +363,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove border: 0px; } data-is-focusable={false} + hidden={false} id="10" style={ Object { @@ -873,6 +874,9 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = ` + `; @@ -1290,6 +1294,9 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr + `; @@ -1458,6 +1465,9 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = ` + `; @@ -1785,6 +1795,9 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = ` + `; @@ -2112,5 +2125,8 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = ` + `; diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap index 51097312ff665..db3e2e223ec4b 100644 --- a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap +++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap @@ -1679,6 +1679,9 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = ` + `; @@ -1988,6 +1991,9 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1` + `; @@ -2158,6 +2164,9 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = ` + `; @@ -2487,6 +2496,9 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = ` + `; @@ -2816,6 +2828,9 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`] + `; @@ -3145,6 +3160,9 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = ` + `; @@ -3474,5 +3492,8 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = ` + `; diff --git a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap index 282f183e2222d..fbcb6c599ba9a 100644 --- a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap @@ -519,6 +519,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous border: 0px; } data-is-focusable={true} + hidden={false} id="toolTipcallout0" style={ Object { @@ -1170,6 +1171,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou border: 0px; } data-is-focusable={true} + hidden={false} id="toolTipcallout0" style={ Object { @@ -1664,6 +1666,9 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1` + `; @@ -2090,6 +2095,9 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre + `; @@ -2197,6 +2205,9 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = ` + `; @@ -2643,6 +2654,9 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = ` + `; @@ -3089,6 +3103,9 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc + `; @@ -3535,6 +3552,9 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`] + `; @@ -3981,5 +4001,8 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`] + `; diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap index 7ce6cf7d83a1d..1a9532f03cbfd 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap @@ -472,6 +472,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly border: 0px; } data-is-focusable={true} + hidden={false} id="toolTipcallout0" style={ Object { @@ -1076,6 +1077,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout border: 0px; } data-is-focusable={true} + hidden={false} id="toolTipcallout0" style={ Object { @@ -1712,6 +1714,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout border: 0px; } data-is-focusable={true} + hidden={false} id="toolTipcallout0" style={ Object { @@ -2133,6 +2136,9 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar + `; @@ -2466,6 +2472,9 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine + `; @@ -2570,6 +2579,9 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1 + `; @@ -2923,6 +2935,9 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly + `; @@ -3276,6 +3291,9 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr + `; @@ -3629,6 +3647,9 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip + `; @@ -3982,6 +4003,9 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc + `; @@ -4335,5 +4359,8 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc + `; From 3bda6cbf8d47fbf25515bfafb83be20ad9cb29db Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Fri, 14 Oct 2022 00:33:50 +0530 Subject: [PATCH 4/6] fill transparent inside focusRing --- .../react-charting/src/components/DonutChart/Arc/Arc.styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-charting/src/components/DonutChart/Arc/Arc.styles.ts b/packages/react-charting/src/components/DonutChart/Arc/Arc.styles.ts index 6711f517b6034..ffd932bb78a69 100644 --- a/packages/react-charting/src/components/DonutChart/Arc/Arc.styles.ts +++ b/packages/react-charting/src/components/DonutChart/Arc/Arc.styles.ts @@ -18,6 +18,7 @@ export const getStyles = (props: IArcProps): IArcStyles => { focusRing: { stroke: theme.semanticColors.focusBorder, strokeWidth: 4, + fill: 'transparent', }, insideDonutString: { fontSize: FontSizes.large, From 3eef252420b19809a8f311bd36c2b243908e446d Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Mon, 17 Oct 2022 10:42:44 +0530 Subject: [PATCH 5/6] minor --- .../components/StackedBarChart/StackedBarChart.base.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx index 9eb95b4221c3f..c9493f86ac4de 100644 --- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx @@ -330,8 +330,8 @@ export class StackedBarChartBase extends React.Component Date: Tue, 25 Oct 2022 11:40:45 +0530 Subject: [PATCH 6/6] add comments --- .../src/components/CommonComponents/CartesianChart.base.tsx | 2 ++ .../src/components/DonutChart/DonutChart.base.tsx | 3 +++ .../GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx | 2 ++ .../src/components/HeatMapChart/HeatMapChart.base.tsx | 2 ++ .../components/StackedBarChart/MultiStackedBarChart.base.tsx | 3 +++ .../src/components/StackedBarChart/StackedBarChart.base.tsx | 3 +++ .../src/components/VerticalBarChart/VerticalBarChart.base.tsx | 2 ++ .../VerticalStackedBarChart/VerticalStackedBarChart.base.tsx | 4 ++++ 8 files changed, 21 insertions(+) diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index f335d512455d0..cb47c0b116109 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -318,8 +318,10 @@ export class CartesianChartBase extends React.Component )} + {/** The callout is used for narration, so keep it mounted on the DOM */}