From ac46b1e690afc9580c9cf9457adac504486fdb64 Mon Sep 17 00:00:00 2001 From: srmukher Date: Fri, 23 Jun 2023 17:20:58 +0530 Subject: [PATCH 01/32] Fixing re-render issue for area chart --- .../src/components/AreaChart/AreaChart.base.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx index 1d90524d49dd7..cd9246a94140b 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -137,6 +137,20 @@ export class AreaChartBase extends React.Component 0 && + this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0 + ) + // if all the data sets have no data + // filtering all items which have no data and checking if the length of the filtered array is 0 + // which means chart is not empty + ); + if (this.state.emptyChart !== isChartEmpty) { + this.setState({ emptyChart: isChartEmpty }); + } if (this.state.isShowCalloutPending) { this.setState({ refSelected: `#${this._highlightedCircleId}`, @@ -222,7 +236,7 @@ export class AreaChartBase extends React.Component Date: Fri, 23 Jun 2023 21:13:54 +0530 Subject: [PATCH 02/32] Area chart re-render fix --- .../components/AreaChart/AreaChart.test.tsx | 4 +- .../AreaChart/AreaChartRTL.test.tsx | 140 +++++ .../__snapshots__/AreaChartRTL.test.tsx.snap | 497 ++++++++++++++++++ 3 files changed, 639 insertions(+), 2 deletions(-) create mode 100644 packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx create mode 100644 packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx index 11ed79e424f94..9a3d5277fb5a7 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx @@ -39,7 +39,7 @@ const points: ILineChartPoints[] = [ color: 'red', }, ]; -const chartPoints = { +export const chartPoints = { chartTitle: 'AreaChart', lineChartData: points, }; @@ -63,7 +63,7 @@ const emptyPoint = [ color: 'red', }, ]; -const emptyChartPoints = { +export const emptyChartPoints = { chartTitle: 'EmptyAreaChart', lineChartData: emptyPoint, }; diff --git a/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx new file mode 100644 index 0000000000000..c0c9e40f3b6fb --- /dev/null +++ b/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx @@ -0,0 +1,140 @@ +import * as React from 'react'; +import { queryAllByAttribute, render, waitFor } from '@testing-library/react'; +import { AreaChart } from '../../index'; + +const chart1Points = [ + { + x: 20, + y: 7000, + xAxisCalloutData: '2018/01/01', + yAxisCalloutData: '10%', + }, + { + x: 25, + y: 9000, + xAxisCalloutData: '2018/01/15', + yAxisCalloutData: '18%', + }, + { + x: 30, + y: 13000, + xAxisCalloutData: '2018/01/28', + yAxisCalloutData: '24%', + }, + { + x: 35, + y: 15000, + xAxisCalloutData: '2018/02/01', + yAxisCalloutData: '25%', + }, + { + x: 40, + y: 11000, + xAxisCalloutData: '2018/03/01', + yAxisCalloutData: '15%', + }, + { + x: 45, + y: 8760, + xAxisCalloutData: '2018/03/15', + yAxisCalloutData: '30%', + }, + { + x: 50, + y: 3500, + xAxisCalloutData: '2018/03/28', + yAxisCalloutData: '18%', + }, + { + x: 55, + y: 20000, + xAxisCalloutData: '2018/04/04', + yAxisCalloutData: '32%', + }, + { + x: 60, + y: 17000, + xAxisCalloutData: '2018/04/15', + yAxisCalloutData: '29%', + }, + { + x: 65, + y: 1000, + xAxisCalloutData: '2018/05/05', + yAxisCalloutData: '43%', + }, + { + x: 70, + y: 12000, + xAxisCalloutData: '2018/06/01', + yAxisCalloutData: '45%', + }, + { + x: 75, + y: 6876, + xAxisCalloutData: '2018/01/15', + yAxisCalloutData: '18%', + }, + { + x: 80, + y: 12000, + xAxisCalloutData: '2018/04/30', + yAxisCalloutData: '55%', + }, + { + x: 85, + y: 7000, + xAxisCalloutData: '2018/05/04', + yAxisCalloutData: '12%', + }, + { + x: 90, + y: 10000, + xAxisCalloutData: '2018/06/01', + yAxisCalloutData: '45%', + }, +]; + +const chartPoints = [ + { + legend: 'legend1', + data: chart1Points, + color: '#0099BC', + }, +]; + +const emptyChartPoints = [ + { + legend: 'legend1', + data: [], + color: '#0099BC', + }, +]; + +const chartData = { + chartTitle: 'Area chart basic example', + lineChartData: chartPoints, +}; + +const emptyChartData = { + chartTitle: 'Area chart basic example', + lineChartData: emptyChartPoints, +}; + +describe('Vertical bar chart rendering', () => { + test('Should re-render the vertical bar chart with data', async () => { + // Arrange + const { container, rerender } = render(); + const getById = queryAllByAttribute.bind(null, 'id'); + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_AreaChart_empty/i)).toHaveLength(1); + // Act + rerender(); + await waitFor(() => { + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_AreaChart_empty/i)).toHaveLength(0); + }); + }); +}); diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap new file mode 100644 index 0000000000000..95406950a677c --- /dev/null +++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap @@ -0,0 +1,497 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Vertical bar chart rendering Should re-render the vertical bar chart with data 1`] = ` +
+ +`; + +exports[`Vertical bar chart rendering Should re-render the vertical bar chart with data 2`] = ` +
+ +
+`; From bf3c9b93f7412da6e5e9c464c4ea0d28ce7ca4cf Mon Sep 17 00:00:00 2001 From: srmukher Date: Mon, 26 Jun 2023 15:29:15 +0530 Subject: [PATCH 03/32] Fixing re-rendering for GVBC, HBC, Donut and HeatMap --- .../AreaChart/AreaChartRTL.test.tsx | 4 +- .../__snapshots__/AreaChartRTL.test.tsx.snap | 4 +- .../components/DonutChart/DonutChart.base.tsx | 4 +- .../components/DonutChart/DonutChart.test.tsx | 2 +- .../DonutChart/DonutChartRTL.test.tsx | 22 +- .../__snapshots__/DonutChartRTL.test.tsx.snap | 450 ++++ .../GroupedVerticalBarChart.base.tsx | 18 +- .../GroupedVerticalBarChart.test.tsx | 4 +- .../GroupedVerticalBarChartRTL.tsx | 22 + .../HeatMapChart/HeatMapChart.base.tsx | 9 +- .../HeatMapChart/HeatMapChart.test.tsx | 2 +- .../HeatMapChart/HeatMapChartRTL.test..tsx | 34 + .../HorizontalBarChart.base.tsx | 14 +- .../HorizontalBarChart.test.tsx | 2 +- .../HorizontalBarChartRTL.test.tsx | 22 + .../HorizontalBarChartRTL.test.tsx.snap | 1847 +++++++++++++++++ 16 files changed, 2445 insertions(+), 15 deletions(-) create mode 100644 packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.tsx create mode 100644 packages/react-charting/src/components/HeatMapChart/HeatMapChartRTL.test..tsx create mode 100644 packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx create mode 100644 packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap diff --git a/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx index c0c9e40f3b6fb..3b6e5bfe643e5 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx @@ -121,8 +121,8 @@ const emptyChartData = { lineChartData: emptyChartPoints, }; -describe('Vertical bar chart rendering', () => { - test('Should re-render the vertical bar chart with data', async () => { +describe('Area chart rendering', () => { + test('Should re-render the Area chart with data', async () => { // Arrange const { container, rerender } = render(); const getById = queryAllByAttribute.bind(null, 'id'); diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap index 95406950a677c..f9581b785ca3f 100644 --- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Vertical bar chart rendering Should re-render the vertical bar chart with data 1`] = ` +exports[`Area chart rendering Should re-render the Area chart with data 1`] = `
`; -exports[`Vertical bar chart rendering Should re-render the vertical bar chart with data 2`] = ` +exports[`Area chart rendering Should re-render the Area chart with data 2`] = `
) : (
{ + test('Should re-render the Donut chart with data', async () => { + // Arrange + const { container, rerender } = render(); + const getById = queryAllByAttribute.bind(null, 'id'); + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_DonutChart_empty/i)).toHaveLength(1); + // Act + rerender(); + await waitFor(() => { + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_DonutChart_empty/i)).toHaveLength(0); + }); + }); +}); diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap index b9f297997253d..8a143a8b1152d 100644 --- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap @@ -1,5 +1,455 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Donut chart rendering Should re-render the Donut chart with data 1`] = ` +
+ +`; + +exports[`Donut chart rendering Should re-render the Donut chart with data 2`] = ` +
+
+
+
+ + + + + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+`; + exports[`DonutChart - mouse events Should render callout correctly on mouseover 1`] = `
0 && + this.props.data.filter((item: IGroupedVerticalBarChartData) => item.series.length).length > 0 + ); + if (this.state.emptyChart !== isChartEmpty) { + this.setState({ emptyChart: isChartEmpty }); + } + } + public render(): React.ReactNode { const points = this.props.data; const { keys, xAxisLabels, datasetForBars } = this._createSet(points); @@ -196,7 +207,12 @@ export class GroupedVerticalBarChartBase extends React.Component< }} /> ) : ( -
+
); } diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx index 6261ae544d0ba..2d7954c9ea64a 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx @@ -31,7 +31,7 @@ function sharedAfterEach() { } } -const chartPoints = [ +export const chartPoints = [ { name: '2000', series: [ @@ -80,7 +80,7 @@ const chartPoints = [ }, ]; -const emptyChartPoints = [ +export const emptyChartPoints = [ { name: 'Empty chart', series: [], diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.tsx new file mode 100644 index 0000000000000..4c2495b345457 --- /dev/null +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { queryAllByAttribute, render, waitFor } from '@testing-library/react'; +import { GroupedVerticalBarChart } from '../../index'; +import { chartPoints, emptyChartPoints } from './GroupedVerticalBarChart.test'; + +describe('Grouped Vertical Bar chart rendering', () => { + test('Should re-render the Grouped Vertical Bar chart with data', async () => { + // Arrange + const { container, rerender } = render(); + const getById = queryAllByAttribute.bind(null, 'id'); + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_GVBC_empty/i)).toHaveLength(1); + // Act + rerender(); + await waitFor(() => { + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_GVBC_empty/i)).toHaveLength(0); + }); + }); +}); diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx index 007a2361cafa8..2b924abab58b0 100644 --- a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx +++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx @@ -162,6 +162,13 @@ export class HeatMapChartBase extends React.Component 0); + if (this.state.emptyChart !== isChartEmpty) { + this.setState({ emptyChart: isChartEmpty }); + } + } + public render(): React.ReactNode { const { data, xAxisDateFormatString, xAxisNumberFormatString, yAxisDateFormatString, yAxisNumberFormatString } = this.props; @@ -230,7 +237,7 @@ export class HeatMapChartBase extends React.Component ) : (
{ + test('Should re-render the Grouped Vertical Bar chart with data', async () => { + // Arrange + const { container, rerender } = render( + , + ); + const getById = queryAllByAttribute.bind(null, 'id'); + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_HeatMap_empty/i)).toHaveLength(1); + // Act + rerender( + , + ); + await waitFor(() => { + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_HeatMap_empty/i)).toHaveLength(0); + }); + }); +}); diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx index d9dbd7ac34425..ee54f96f9eaac 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx +++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx @@ -69,6 +69,13 @@ export class HorizontalBarChartBase extends React.Component 0); + if (this.state.emptyChart !== isChartEmpty) { + this.setState({ emptyChart: isChartEmpty }); + } + } + public render(): JSX.Element { const { data, theme } = this.props; this._adjustProps(); @@ -171,7 +178,12 @@ export class HorizontalBarChartBase extends React.Component
) : ( -
+
); } diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx index 804d52e7100a3..f8a8a6bd829fb 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx +++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx @@ -28,7 +28,7 @@ function sharedAfterEach() { } } -const chartPoints: IChartProps[] = [ +export const chartPoints: IChartProps[] = [ { chartTitle: 'one', chartData: [ diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx new file mode 100644 index 0000000000000..acdaa8da8c5ab --- /dev/null +++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { queryAllByAttribute, render, waitFor } from '@testing-library/react'; +import { chartPoints } from './HorizontalBarChart.test'; +import { HorizontalBarChart } from '../../index'; + +describe('Area chart rendering', () => { + test('Should re-render the Area chart with data', async () => { + // Arrange + const { container, rerender } = render(); + const getById = queryAllByAttribute.bind(null, 'id'); + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_HBC_empty/i)).toHaveLength(1); + // Act + rerender(); + await waitFor(() => { + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_HBC_empty/i)).toHaveLength(0); + }); + }); +}); diff --git a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap new file mode 100644 index 0000000000000..3dc3f61aee551 --- /dev/null +++ b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap @@ -0,0 +1,1847 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Area chart rendering Should re-render the Area chart with data 1`] = ` +
+ +`; + +exports[`Area chart rendering Should re-render the Area chart with data 2`] = ` +
+
+
+
+
+
+
+ + one + + +
+
+ 1,543 +
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+ + two + + +
+
+ 800 +
+
+
+
+ + + + + + +
+
+
+ +
+
+`; + +exports[`HorizontalBarChart - mouse events Should render callout correctly on mouseover 1`] = ` +
+
+
+
+
+
+ + one + + +
+
+ 1,543 +
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+ + two + + +
+
+ 800 +
+
+
+
+ + + + + + +
+
+
+
+ +
+
+`; + +exports[`HorizontalBarChart - mouse events Should render customized callout on mouseover 1`] = ` +
+
+
+
+
+
+ + one + + +
+
+ 1,543 +
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+ + two + + +
+
+ 800 +
+
+
+
+ + + + + + +
+
+
+
+ +
+
+`; + +exports[`HorizontalBarChart snapShot testing Should not render bar labels in absolute-scale variant 1`] = ` +
+
+
+
+
+
+ + one + + +
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+ + two + + +
+
+
+
+ + + + + + +
+
+
+ +
+`; + +exports[`HorizontalBarChart snapShot testing Should render absolute-scale variant correctly 1`] = ` +
+
+
+
+
+
+ + one + + +
+
+
+
+ + + + + 1.5k + + + +
+
+
+
+
+
+
+
+ + two + + +
+
+
+
+ + + + + 800 + + + +
+
+
+ +
+`; From f06dca464df342f0e6e31accd1ea15e5207e50c9 Mon Sep 17 00:00:00 2001 From: srmukher Date: Mon, 26 Jun 2023 18:43:35 +0530 Subject: [PATCH 04/32] Fixing the re-render issue for other charts --- .../GroupedVerticalBarChartRTL.tsx | 2 +- .../HeatMapChart/HeatMapChartRTL.test..tsx | 4 +- .../HorizontalBarChartRTL.test.tsx | 4 +- .../HorizontalBarChartRTL.test.tsx.snap | 8 +- .../components/LineChart/LineChart.base.tsx | 11 +- .../components/LineChart/LineChart.test.tsx | 4 +- .../LineChart/LineChartRTL.test.tsx | 22 + .../__snapshots__/LineChartRTL.test.tsx.snap | 4201 ++++++++ .../src/components/PieChart/PieChart.base.tsx | 13 +- .../src/components/PieChart/PieChart.test.tsx | 4 +- .../components/PieChart/PieChartRTL.test.tsx | 22 + .../__snapshots__/PieChartRTL.test.tsx.snap | 288 + .../SankeyChart/SankeyChart.base.tsx | 11 +- .../SankeyChart/SankeyChart.test.tsx | 2 +- .../SankeyChart/SankeyChartRTL.test.tsx | 26 + .../SankeyChartRTL.test.tsx.snap | 8780 +++++++++++++++++ .../components/Sparkline/Sparkline.base.tsx | 17 +- .../components/Sparkline/Sparkline.test.tsx | 4 +- .../Sparkline/SparklineRTL.test.tsx | 22 + .../__snapshots__/SparklineRTL.test.tsx.snap | 178 + .../MultiStackedBarChart.base.tsx | 18 +- .../MultiStackedBarChart.test.tsx | 4 +- .../MultiStackedBarChartRTL.test.tsx | 22 + .../StackedBarChart/StackedBarChart.base.tsx | 18 +- .../StackedBarChart/StackedBarChart.test.tsx | 4 +- .../StackedBarChartRTL.test.tsx | 22 + .../MultiStackedBarChartRTL.test.tsx.snap | 5133 ++++++++++ .../StackedBarChartRTL.test.tsx.snap | 2490 +++++ 28 files changed, 21307 insertions(+), 27 deletions(-) create mode 100644 packages/react-charting/src/components/LineChart/LineChartRTL.test.tsx create mode 100644 packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap create mode 100644 packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx create mode 100644 packages/react-charting/src/components/PieChart/__snapshots__/PieChartRTL.test.tsx.snap create mode 100644 packages/react-charting/src/components/SankeyChart/SankeyChartRTL.test.tsx create mode 100644 packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChartRTL.test.tsx.snap create mode 100644 packages/react-charting/src/components/Sparkline/SparklineRTL.test.tsx create mode 100644 packages/react-charting/src/components/Sparkline/__snapshots__/SparklineRTL.test.tsx.snap create mode 100644 packages/react-charting/src/components/StackedBarChart/MultiStackedBarChartRTL.test.tsx create mode 100644 packages/react-charting/src/components/StackedBarChart/StackedBarChartRTL.test.tsx create mode 100644 packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap create mode 100644 packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChartRTL.test.tsx.snap diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.tsx index 4c2495b345457..60911e280ad24 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.tsx +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { queryAllByAttribute, render, waitFor } from '@testing-library/react'; -import { GroupedVerticalBarChart } from '../../index'; import { chartPoints, emptyChartPoints } from './GroupedVerticalBarChart.test'; +import { GroupedVerticalBarChart } from './index'; describe('Grouped Vertical Bar chart rendering', () => { test('Should re-render the Grouped Vertical Bar chart with data', async () => { diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChartRTL.test..tsx b/packages/react-charting/src/components/HeatMapChart/HeatMapChartRTL.test..tsx index 0c55e8531227e..4cca1e6ab3a08 100644 --- a/packages/react-charting/src/components/HeatMapChart/HeatMapChartRTL.test..tsx +++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChartRTL.test..tsx @@ -3,8 +3,8 @@ import { queryAllByAttribute, render, waitFor } from '@testing-library/react'; import { HeatMapChart } from './index'; import { HeatMapData } from './HeatMapChart.test'; -describe('Grouped Vertical Bar chart rendering', () => { - test('Should re-render the Grouped Vertical Bar chart with data', async () => { +describe('HeatMap chart rendering', () => { + test('Should re-render the HeatMap chart with data', async () => { // Arrange const { container, rerender } = render( { - test('Should re-render the Area chart with data', async () => { +describe('Horizontal Bar chart rendering', () => { + test('Should re-render the Horizontal Bar chart with data', async () => { // Arrange const { container, rerender } = render(); const getById = queryAllByAttribute.bind(null, 'id'); diff --git a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap index 3dc3f61aee551..a376811ad5f62 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Area chart rendering Should re-render the Area chart with data 1`] = ` +exports[`Horizontal Bar chart rendering Should re-render the Horizontal Bar chart with data 1`] = `
`; -exports[`Area chart rendering Should re-render the Area chart with data 2`] = ` +exports[`Horizontal Bar chart rendering Should re-render the Horizontal Bar chart with data 2`] = `
0 && + this.props.data.lineChartData.filter((item: ILineChartPoints) => item.data.length).length > 0 + ); + if (this.state.emptyChart !== isChartEmpty) { + this.setState({ emptyChart: isChartEmpty }); + } /** note that height and width are not used to resize or set as dimesions of the chart, * fitParentContainer is responisble for setting the height and width or resizing of the svg/chart */ @@ -330,7 +339,7 @@ export class LineChartBase extends React.Component ) : (
{ + test('Should re-render the Line chart with data', async () => { + // Arrange + const { container, rerender } = render(); + const getById = queryAllByAttribute.bind(null, 'id'); + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_LineChart_empty/i)).toHaveLength(1); + // Act + rerender(); + await waitFor(() => { + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_LineChart_empty/i)).toHaveLength(0); + }); + }); +}); diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap new file mode 100644 index 0000000000000..95371d287080b --- /dev/null +++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap @@ -0,0 +1,4201 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Line chart rendering Should re-render the Line chart with data 1`] = ` +
+ +`; + +exports[`Line chart rendering Should re-render the Line chart with data 2`] = ` +
+ +
+`; + +exports[`LineChart - mouse events Should render callout correctly on mouseover 1`] = ` + +`; + +exports[`LineChart - mouse events Should render customized callout on mouseover 1`] = ` + +`; + +exports[`LineChart - mouse events Should render customized callout per stack on mouseover 1`] = ` + +`; + +exports[`LineChart snapShot testing Should render with default colors when line color is not provided 1`] = ` + +`; + +exports[`LineChart snapShot testing renders LineChart correctly 1`] = ` + +`; + +exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = ` + +`; + +exports[`LineChart snapShot testing renders hideLegend correctly 1`] = ` + +`; + +exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = ` + +`; + +exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`] = ` + +`; + +exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = ` + +`; + +exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = ` + +`; diff --git a/packages/react-charting/src/components/PieChart/PieChart.base.tsx b/packages/react-charting/src/components/PieChart/PieChart.base.tsx index 9b500672680c1..bf848bb5ad634 100644 --- a/packages/react-charting/src/components/PieChart/PieChart.base.tsx +++ b/packages/react-charting/src/components/PieChart/PieChart.base.tsx @@ -35,6 +35,17 @@ export class PieChartBase extends React.Component 0 && + this.props.data.filter(item => item.y > 0).length > 0 + ); + if (this.state.emptyChart !== isChartEmpty) { + this.setState({ emptyChart: isChartEmpty }); + } + } + public render(): JSX.Element { const { data, width, height, colors, chartTitle } = this.props; @@ -64,7 +75,7 @@ export class PieChartBase extends React.Component ) : (
{ it('renders PieChart correctly', () => { diff --git a/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx b/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx new file mode 100644 index 0000000000000..3d5cd25ebe576 --- /dev/null +++ b/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { queryAllByAttribute, render, waitFor } from '@testing-library/react'; +import { PieChart } from './index'; +import { chartPoints, colors } from './PieChart.test'; + +describe('Pie chart rendering', () => { + test('Should re-render the Pie chart with data', async () => { + // Arrange + const { container, rerender } = render(); + const getById = queryAllByAttribute.bind(null, 'id'); + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_PieChart_empty/i)).toHaveLength(1); + // Act + rerender(); + await waitFor(() => { + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_PieChart_empty/i)).toHaveLength(0); + }); + }); +}); diff --git a/packages/react-charting/src/components/PieChart/__snapshots__/PieChartRTL.test.tsx.snap b/packages/react-charting/src/components/PieChart/__snapshots__/PieChartRTL.test.tsx.snap new file mode 100644 index 0000000000000..da385daae74fd --- /dev/null +++ b/packages/react-charting/src/components/PieChart/__snapshots__/PieChartRTL.test.tsx.snap @@ -0,0 +1,288 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Pie chart rendering Should re-render the Pie chart with data 1`] = ` +
+ +`; + +exports[`Pie chart rendering Should re-render the Pie chart with data 2`] = ` +
+
+ + + + + + A + - + 50 + + + + + + B + - + 25 + + + + + + C + - + 25 + + + + +
+
+`; + +exports[`PieChart snapShot testing renders PieChart correctly 1`] = ` +
+ + + + + + A + - + 50 + + + + + + B + - + 25 + + + + + + C + - + 25 + + + + +
+`; + +exports[`PieChart snapShot testing renders with colors, width and height data correctly 1`] = ` +
+ + + + + + A + - + 50 + + + + + + B + - + 25 + + + + + + C + - + 25 + + + + +
+`; diff --git a/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx b/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx index f75f01b507b95..1b513dc242236 100644 --- a/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx +++ b/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx @@ -95,6 +95,15 @@ export class SankeyChartBase extends React.Component 0 && + this.props.data.SankeyChartData.links.length > 0 + ); + if (this.state.emptyChart !== isChartEmpty) { + this.setState({ emptyChart: isChartEmpty }); + } if (prevProps.shouldResize !== this.props.shouldResize) { this._fitParentContainer(); } @@ -173,7 +182,7 @@ export class SankeyChartBase extends React.Component { + test('Should re-render the Sankey chart with data', async () => { + // Arrange + const { container, rerender } = render(); + const getById = queryAllByAttribute.bind(null, 'id'); + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_SankeyChart_empty/i)).toHaveLength(1); + // Act + rerender(); + await waitFor(() => { + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_SankeyChart_empty/i)).toHaveLength(0); + }); + }); +}); diff --git a/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChartRTL.test.tsx.snap b/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChartRTL.test.tsx.snap new file mode 100644 index 0000000000000..47c0be3f274fd --- /dev/null +++ b/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChartRTL.test.tsx.snap @@ -0,0 +1,8780 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = ` +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+`; + +exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nodecolors and border colors 1`] = ` +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+`; + +exports[`Sankey chart rendering Should re-render the Sankey chart with data 1`] = ` +
+ +`; + +exports[`Sankey chart rendering Should re-render the Sankey chart with data 2`] = ` +
+ +
+`; + +exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on providing height less than onepercent of total height 1`] = ` +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+`; + +exports[`SankeyChart - mouse events Should render callout correctly on mouseover when height of node is less than 24px 1`] = ` +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+`; + +exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`] = ` +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+`; + +exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`] = ` +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+`; + +exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover when node description is large 1`] = ` +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+`; diff --git a/packages/react-charting/src/components/Sparkline/Sparkline.base.tsx b/packages/react-charting/src/components/Sparkline/Sparkline.base.tsx index 62a20b9cdbfec..56c051f0fc4dd 100644 --- a/packages/react-charting/src/components/Sparkline/Sparkline.base.tsx +++ b/packages/react-charting/src/components/Sparkline/Sparkline.base.tsx @@ -53,7 +53,8 @@ export class SparklineBase extends React.Component this.x(d.x)) @@ -90,6 +91,18 @@ export class SparklineBase extends React.Component 0 && + this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0 + ); + if (this.state._emptyChart !== isChartEmpty) { + this.setState({ _emptyChart: isChartEmpty }); + } + } + public drawSparkline() { return ( <> @@ -144,7 +157,7 @@ export class SparklineBase extends React.Component ) : (
| undefined; -const sparkline1Points: IChartProps = { +export const sparkline1Points: IChartProps = { chartTitle: '10.21', lineChartData: [ { @@ -89,7 +89,7 @@ const sparkline2Points: IChartProps = { ], }; -const emptySparklinePoints: IChartProps = { +export const emptySparklinePoints: IChartProps = { chartTitle: 'Empty sparkline chart', lineChartData: [ { diff --git a/packages/react-charting/src/components/Sparkline/SparklineRTL.test.tsx b/packages/react-charting/src/components/Sparkline/SparklineRTL.test.tsx new file mode 100644 index 0000000000000..264467b29faae --- /dev/null +++ b/packages/react-charting/src/components/Sparkline/SparklineRTL.test.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { queryAllByAttribute, render, waitFor } from '@testing-library/react'; +import { emptySparklinePoints, sparkline1Points } from './Sparkline.test'; +import { Sparkline } from './index'; + +describe('Sparkline chart rendering', () => { + test('Should re-render the Sparkline chart with data', async () => { + // Arrange + const { container, rerender } = render(); + const getById = queryAllByAttribute.bind(null, 'id'); + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_SparklineChart_empty/i)).toHaveLength(1); + // Act + rerender(); + await waitFor(() => { + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_SparklineChart_empty/i)).toHaveLength(0); + }); + }); +}); diff --git a/packages/react-charting/src/components/Sparkline/__snapshots__/SparklineRTL.test.tsx.snap b/packages/react-charting/src/components/Sparkline/__snapshots__/SparklineRTL.test.tsx.snap new file mode 100644 index 0000000000000..87c4435dcf9d7 --- /dev/null +++ b/packages/react-charting/src/components/Sparkline/__snapshots__/SparklineRTL.test.tsx.snap @@ -0,0 +1,178 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Sparkline chart rendering Should re-render the Sparkline chart with data 1`] = ` +
+ +`; + +exports[`Sparkline chart rendering Should re-render the Sparkline chart with data 2`] = ` +
+
+
+ + + + +
+
+
+`; + +exports[`Sparkline snapShot testing renders Sparkline correctly 1`] = ` +
+
+ + + + + + + 19.64 + + +
+
+`; + +exports[`Sparkline snapShot testing renders Sparkline correctly with no legend 1`] = ` +
+
+ + + + +
+
+`; diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx index 4905b1e16ba62..383f52317e13d 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx @@ -85,6 +85,17 @@ export class MultiStackedBarChartBase extends React.Component 0 && + this.props.data.filter(item => item.chartData && item.chartData.length === 0).length === 0 + ); + if (this.state.emptyChart !== isChartEmpty) { + this.setState({ emptyChart: isChartEmpty }); + } + } + public render(): JSX.Element { if (!this.state.emptyChart) { const { data, theme, culture } = this.props; @@ -147,7 +158,12 @@ export class MultiStackedBarChartBase extends React.Component +
); } diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.test.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.test.tsx index cd88dbdeb14d5..b6632c0b21523 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.test.tsx +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.test.tsx @@ -69,7 +69,7 @@ const secondChartPoints: IChartDataPoint[] = [ }, ]; -const chartPoints: IChartProps[] = [ +export const chartPoints: IChartProps[] = [ { chartTitle: 'Monitored', chartData: firstChartPoints, @@ -80,7 +80,7 @@ const chartPoints: IChartProps[] = [ }, ]; -const emptyChartPoints: IChartProps[] = [ +export const emptyChartPoints: IChartProps[] = [ { chartTitle: 'Monitored', chartData: [], diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChartRTL.test.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChartRTL.test.tsx new file mode 100644 index 0000000000000..55d60da1b8e44 --- /dev/null +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChartRTL.test.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { queryAllByAttribute, render, waitFor } from '@testing-library/react'; +import { chartPoints, emptyChartPoints } from './MultiStackedBarChart.test'; +import { MultiStackedBarChart } from './index'; + +describe('Multi Stacked Bar chart rendering', () => { + test('Should re-render the Multi Stacked Bar chart with data', async () => { + // Arrange + const { container, rerender } = render(); + const getById = queryAllByAttribute.bind(null, 'id'); + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_MSBC_empty/i)).toHaveLength(1); + // Act + rerender(); + await waitFor(() => { + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_MSBC_empty/i)).toHaveLength(0); + }); + }); +}); diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx index 43b50ea8a25cc..989f50ecf4401 100644 --- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx @@ -70,6 +70,17 @@ export class StackedBarChartBase extends React.Component 0 + ); + if (this.state.emptyChart !== isChartEmpty) { + this.setState({ emptyChart: isChartEmpty }); + } + } + public render(): JSX.Element { if (!this.state.emptyChart) { this._adjustProps(); @@ -194,7 +205,12 @@ export class StackedBarChartBase extends React.Component +
); } diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.test.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.test.tsx index 6b9b30be98245..e89a300b9771f 100644 --- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.test.tsx +++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.test.tsx @@ -35,12 +35,12 @@ const points: IChartDataPoint[] = [ ]; const chartTitle = 'Stacked bar chart 2nd example'; -const chartPoints: IChartProps = { +export const chartPoints: IChartProps = { chartTitle: chartTitle, chartData: points, }; -const emptyChartPoints: IChartProps = { +export const emptyChartPoints: IChartProps = { chartTitle: chartTitle, chartData: [], }; diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChartRTL.test.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChartRTL.test.tsx new file mode 100644 index 0000000000000..074d167bb38ae --- /dev/null +++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChartRTL.test.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { queryAllByAttribute, render, waitFor } from '@testing-library/react'; +import { chartPoints, emptyChartPoints } from './StackedBarChart.test'; +import { StackedBarChart } from './index'; + +describe('Stacked Bar chart rendering', () => { + test('Should re-render the Stacked Bar chart with data', async () => { + // Arrange + const { container, rerender } = render(); + const getById = queryAllByAttribute.bind(null, 'id'); + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_SBC_empty/i)).toHaveLength(1); + // Act + rerender(); + await waitFor(() => { + // Assert + expect(container).toMatchSnapshot(); + expect(getById(container, /_SBC_empty/i)).toHaveLength(0); + }); + }); +}); diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap new file mode 100644 index 0000000000000..e27a16996a1c2 --- /dev/null +++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap @@ -0,0 +1,5133 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Multi Stacked Bar chart rendering Should re-render the Multi Stacked Bar chart with data 1`] = ` +
+ +`; + +exports[`Multi Stacked Bar chart rendering Should re-render the Multi Stacked Bar chart with data 2`] = ` +
+
+
+
+
+
+
+ + Monitored + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+ + Unmonitored + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+`; + +exports[`MultiStackedBarChart - mouse events Should render callout correctly on mouseover 1`] = ` +
+
+
+
+
+
+ + Monitored + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+ + Unmonitored + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+`; + +exports[`MultiStackedBarChart - mouse events Should render customized callout on mouseover 1`] = ` +
+
+
+
+
+
+ + Monitored + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+ + Unmonitored + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+`; + +exports[`MultiStackedBarChart snapShot testing Should not render bar labels in absolute-scale variant 1`] = ` +
+
+
+
+
+
+ + Monitored + + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+ + Unmonitored + + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+`; + +exports[`MultiStackedBarChart snapShot testing Should render absolute-scale variant correctly 1`] = ` +
+
+
+
+
+
+ + Monitored + + +
+
+
+
+
+ + + + + + + + + 63 + + +
+
+
+
+
+
+
+
+
+ + Unmonitored + + +
+
+
+
+
+ + + + + + + + + 63 + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+`; + +exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart correctly 1`] = ` +
+
+
+
+
+
+ + Monitored + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+ + Unmonitored + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+`; + +exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly 1`] = ` +
+
+
+
+
+
+ + Monitored + + +
+
+ + 40 + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+ + Unmonitored + + +
+
+ + 40 + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+`; + +exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`] = ` +
+
+
+
+
+
+ + Monitored + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+ + Unmonitored + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + +
+
+
+
+ +
+`; + +exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] = ` +
+
+
+
+
+
+ + Monitored + + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+ + Unmonitored + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+ +
+`; + +exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`] = ` +
+
+
+
+
+
+ + Monitored + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+ + Unmonitored + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+`; diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChartRTL.test.tsx.snap new file mode 100644 index 0000000000000..46108f0bba3f1 --- /dev/null +++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChartRTL.test.tsx.snap @@ -0,0 +1,2490 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Stacked Bar chart rendering Should re-render the Stacked Bar chart with data 1`] = ` +
+ +`; + +exports[`Stacked Bar chart rendering Should re-render the Stacked Bar chart with data 2`] = ` +
+
+
+
+
+ + Stacked bar chart 2nd example + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + + + + +
+
+
+
+`; + +exports[`StackedBarChart - mouse events Should render callout correctly on mouseover 1`] = ` +
+
+
+
+ + Stacked bar chart 2nd example + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + + +
+ +
+ +
+
+
+`; + +exports[`StackedBarChart - mouse events Should render customized callout on mouseover 1`] = ` +
+
+
+
+ + Stacked bar chart 2nd example + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + + +
+ +
+ +
+
+
+`; + +exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`] = ` +
+
+
+
+ + Stacked bar chart 2nd example + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + + + + +
+
+
+`; + +exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = ` +
+
+
+
+ + Stacked bar chart 2nd example + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + + + + +
+
+
+`; + +exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`] = ` +
+
+
+
+ + Stacked bar chart 2nd example + + +
+
+ + 40 + +
+
+
+
+
+ + + + + + + + + + + +
+
+
+`; + +exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = ` +
+
+
+
+ + Stacked bar chart 2nd example + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + + + + +
+
+
+`; + +exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`] = ` +
+
+
+
+ + Stacked bar chart 2nd example + + +
+
+
+
+
+ + + + + + + + + + + +
+
+
+`; + +exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = ` +
+
+
+
+ + Stacked bar chart 2nd example + + +
+
+ + 40 + + + / 63 + +
+
+
+
+
+ + + + + + + + + + + +
+
+
+`; + +exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] = ` +
+
+
+
+ + Stacked bar chart 2nd example + + +
+
+
+
+
+ + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; From f0889a7d859b4ae9c2f00038bc7a5efb4fd5da63 Mon Sep 17 00:00:00 2001 From: srmukher Date: Mon, 26 Jun 2023 18:47:32 +0530 Subject: [PATCH 05/32] Change file --- ...-556f2e0e-35f0-44cd-9bd6-aa9b24aaa57e.json | 7 + .../AreaChart/AreaChartRTL.test.tsx | 126 +- .../__snapshots__/AreaChartRTL.test.tsx.snap | 4963 ++++++++++++++++- .../HorizontalBarChartRTL.test.tsx.snap | 4 +- 4 files changed, 4775 insertions(+), 325 deletions(-) create mode 100644 change/@fluentui-react-charting-556f2e0e-35f0-44cd-9bd6-aa9b24aaa57e.json diff --git a/change/@fluentui-react-charting-556f2e0e-35f0-44cd-9bd6-aa9b24aaa57e.json b/change/@fluentui-react-charting-556f2e0e-35f0-44cd-9bd6-aa9b24aaa57e.json new file mode 100644 index 0000000000000..f6d32fb738f20 --- /dev/null +++ b/change/@fluentui-react-charting-556f2e0e-35f0-44cd-9bd6-aa9b24aaa57e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Fixing re-render issue for all charts when empty", + "packageName": "@fluentui/react-charting", + "email": "srmukher@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx index 3b6e5bfe643e5..69b422bd6cfa8 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx @@ -1,136 +1,18 @@ import * as React from 'react'; import { queryAllByAttribute, render, waitFor } from '@testing-library/react'; -import { AreaChart } from '../../index'; - -const chart1Points = [ - { - x: 20, - y: 7000, - xAxisCalloutData: '2018/01/01', - yAxisCalloutData: '10%', - }, - { - x: 25, - y: 9000, - xAxisCalloutData: '2018/01/15', - yAxisCalloutData: '18%', - }, - { - x: 30, - y: 13000, - xAxisCalloutData: '2018/01/28', - yAxisCalloutData: '24%', - }, - { - x: 35, - y: 15000, - xAxisCalloutData: '2018/02/01', - yAxisCalloutData: '25%', - }, - { - x: 40, - y: 11000, - xAxisCalloutData: '2018/03/01', - yAxisCalloutData: '15%', - }, - { - x: 45, - y: 8760, - xAxisCalloutData: '2018/03/15', - yAxisCalloutData: '30%', - }, - { - x: 50, - y: 3500, - xAxisCalloutData: '2018/03/28', - yAxisCalloutData: '18%', - }, - { - x: 55, - y: 20000, - xAxisCalloutData: '2018/04/04', - yAxisCalloutData: '32%', - }, - { - x: 60, - y: 17000, - xAxisCalloutData: '2018/04/15', - yAxisCalloutData: '29%', - }, - { - x: 65, - y: 1000, - xAxisCalloutData: '2018/05/05', - yAxisCalloutData: '43%', - }, - { - x: 70, - y: 12000, - xAxisCalloutData: '2018/06/01', - yAxisCalloutData: '45%', - }, - { - x: 75, - y: 6876, - xAxisCalloutData: '2018/01/15', - yAxisCalloutData: '18%', - }, - { - x: 80, - y: 12000, - xAxisCalloutData: '2018/04/30', - yAxisCalloutData: '55%', - }, - { - x: 85, - y: 7000, - xAxisCalloutData: '2018/05/04', - yAxisCalloutData: '12%', - }, - { - x: 90, - y: 10000, - xAxisCalloutData: '2018/06/01', - yAxisCalloutData: '45%', - }, -]; - -const chartPoints = [ - { - legend: 'legend1', - data: chart1Points, - color: '#0099BC', - }, -]; - -const emptyChartPoints = [ - { - legend: 'legend1', - data: [], - color: '#0099BC', - }, -]; - -const chartData = { - chartTitle: 'Area chart basic example', - lineChartData: chartPoints, -}; - -const emptyChartData = { - chartTitle: 'Area chart basic example', - lineChartData: emptyChartPoints, -}; +import { chartPoints, emptyChartPoints } from './AreaChart.test'; +import { AreaChart } from './index'; describe('Area chart rendering', () => { test('Should re-render the Area chart with data', async () => { // Arrange - const { container, rerender } = render(); + const { container, rerender } = render(); const getById = queryAllByAttribute.bind(null, 'id'); // Assert expect(container).toMatchSnapshot(); expect(getById(container, /_AreaChart_empty/i)).toHaveLength(1); // Act - rerender(); + rerender(); await waitFor(() => { // Assert expect(container).toMatchSnapshot(); diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap index f9581b785ca3f..53f443bc34a6b 100644 --- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap @@ -4,7 +4,7 @@ exports[`Area chart rendering Should re-render the Area chart with data 1`] = `
`; + +exports[`AreaChart - mouse events Should render callout correctly on mouseover 1`] = ` + +`; + +exports[`AreaChart - mouse events Should render customized callout on mouseover 1`] = ` + +`; + +exports[`AreaChart - mouse events Should render customized callout per stack on mouseover 1`] = ` + +`; + +exports[`AreaChart snapShot testing Should not render circles when optimizeLargeData is true 1`] = ` + +`; + +exports[`AreaChart snapShot testing Should render with default colors when line color is not provided 1`] = ` + +`; + +exports[`AreaChart snapShot testing renders Areachart correctly 1`] = ` + +`; + +exports[`AreaChart snapShot testing renders Areachart with single point correctly 1`] = ` + +`; + +exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = ` + +`; + +exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = ` + +`; + +exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = ` + +`; + +exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`] = ` + +`; + +exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = ` + +`; + +exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = ` + +`; diff --git a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap index a376811ad5f62..a1c34fa6fd44c 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap @@ -120,7 +120,7 @@ exports[`Horizontal Bar chart rendering Should re-render the Horizontal Bar char focusable="false" > Date: Fri, 7 Jul 2023 12:33:29 +0530 Subject: [PATCH 06/32] Updating snapshots --- .../__snapshots__/AreaChartRTL.test.tsx.snap | 4 +- .../HorizontalBarChartRTL.test.tsx.snap | 4 +- .../__snapshots__/PieChartRTL.test.tsx.snap | 18 +- .../SankeyChartRTL.test.tsx.snap | 180 +++++++++--------- .../__snapshots__/SparklineRTL.test.tsx.snap | 8 +- 5 files changed, 107 insertions(+), 107 deletions(-) diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap index 53f443bc34a6b..dd6b7c568e986 100644 --- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap @@ -2886,7 +2886,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl Date: Fri, 7 Jul 2023 13:50:23 +0530 Subject: [PATCH 07/32] Resolving build error --- packages/react-charting/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json index 97b8b9582841d..9d8ad274ca582 100644 --- a/packages/react-charting/package.json +++ b/packages/react-charting/package.json @@ -67,6 +67,7 @@ "@fluentui/react": "^8.110.7", "@types/react": ">=16.8.0 <19.0.0", "@types/react-dom": ">=16.8.0 <19.0.0", + "@testing-library/react": "12.1.2", "react": ">=16.8.0 <19.0.0", "react-dom": ">=16.8.0 <19.0.0" }, From 4847827033a9603a642093d2ae0a4a444afc52a9 Mon Sep 17 00:00:00 2001 From: srmukher Date: Fri, 7 Jul 2023 17:44:57 +0530 Subject: [PATCH 08/32] Updating the charts to reduce re-renders --- .../components/AreaChart/AreaChart.base.tsx | 42 +++------ .../__snapshots__/AreaChartRTL.test.tsx.snap | 10 +- .../components/DonutChart/DonutChart.base.tsx | 22 ++--- .../__snapshots__/DonutChartRTL.test.tsx.snap | 70 +++++++------- .../GroupedVerticalBarChart.base.tsx | 34 ++----- .../HeatMapChart/HeatMapChart.base.tsx | 26 +---- .../HorizontalBarChart.base.tsx | 22 +---- .../HorizontalBarChartRTL.test.tsx.snap | 16 ++-- .../components/LineChart/LineChart.base.tsx | 35 ++----- .../__snapshots__/LineChartRTL.test.tsx.snap | 20 ++-- .../src/components/PieChart/PieChart.base.tsx | 36 ++----- .../SankeyChart/SankeyChart.base.tsx | 27 ++---- .../SankeyChartRTL.test.tsx.snap | 94 +++++++++---------- .../components/Sparkline/Sparkline.base.tsx | 33 ++----- .../__snapshots__/Sparkline.test.tsx.snap | 38 +------- .../__snapshots__/SparklineRTL.test.tsx.snap | 59 +----------- .../MultiStackedBarChart.base.tsx | 34 ++----- .../StackedBarChart/StackedBarChart.base.tsx | 30 +----- .../MultiStackedBarChartRTL.test.tsx.snap | 16 ++-- .../StackedBarChartRTL.test.tsx.snap | 8 +- 20 files changed, 217 insertions(+), 455 deletions(-) diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx index 37489270c1550..ffedc251e3696 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -70,7 +70,6 @@ export interface IAreaChartState extends IBasestate { nearestCircleToHighlight: number | string | Date | null; xAxisCalloutAccessibilityData?: IAccessibilityProps; isShowCalloutPending: boolean; - emptyChart?: boolean; /** focused point */ activePoint: string; } @@ -122,17 +121,6 @@ export class AreaChartBase extends React.Component 0 && - this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0 - ) - // if all the data sets have no data - // filtering all items which have no data and checking if the length of the filtered array is 0 - // which means chart is not empty - ), activePoint: '', }; warnDeprecations(COMPONENT_NAME, props, { @@ -147,20 +135,6 @@ export class AreaChartBase extends React.Component 0 && - this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0 - ) - // if all the data sets have no data - // filtering all items which have no data and checking if the length of the filtered array is 0 - // which means chart is not empty - ); - if (this.state.emptyChart !== isChartEmpty) { - this.setState({ emptyChart: isChartEmpty }); - } if (this.state.isShowCalloutPending) { this.setState({ refSelected: `#${this._highlightedCircleId}`, @@ -171,7 +145,7 @@ export class AreaChartBase extends React.Component 0 && + this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0 + ) + // if all the data sets have no data + // filtering all items which have no data and checking if the length of the filtered array is 0 + // which means chart is not empty + ); + } } diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap index dd6b7c568e986..e83e46a9f78d4 100644 --- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap @@ -28,7 +28,7 @@ exports[`Area chart rendering Should re-render the Area chart with data 2`] = ` overflow: hidden; width: 100%; } - id="chart_13" + id="chart_12" role="presentation" >
@@ -213,7 +213,7 @@ exports[`Area chart rendering Should re-render the Area chart with data 2`] = ` &:focus { outline: none; } - data-focuszone-id="FocusZone15" + data-focuszone-id="FocusZone14" role="listbox" >
{ @@ -74,7 +73,6 @@ export class DonutChartBase extends React.Component d.data! > 0).length > 0 - ); - if (this.state.emptyChart !== isChartEmpty) { - this.setState({ emptyChart: isChartEmpty }); - } - } public render(): JSX.Element { const { data, hideLegend = false } = this.props; @@ -120,7 +108,7 @@ export class DonutChartBase extends React.Component d.data! > 0); const valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut!, chartData!); - return !this.state.emptyChart ? ( + return !this.isChartEmpty() ? (
(this._rootElem = rootElem)} @@ -333,4 +321,12 @@ export class DonutChartBase extends React.Component d.data! > 0).length > 0 + ); + } } diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap index f283f6a25bd58..d2af7da3c6bec 100644 --- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap @@ -4,7 +4,7 @@ exports[`Donut chart rendering Should re-render the Donut chart with data 1`] =