From 80237eeed52b6c907eb275d8b1686b2983d41364 Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Thu, 27 Apr 2023 21:01:56 +0530 Subject: [PATCH 01/11] Changes for Making first render cycle faster and fixing test cases --- .../components/AreaChart/AreaChart.test.tsx | 126 +++-- .../__snapshots__/AreaChart.test.tsx.snap | 472 ++++++++++-------- .../CommonComponents/CartesianChart.base.tsx | 323 ++++++------ .../GroupedVerticalBarChart.test.tsx | 91 +++- .../GroupedVerticalBarChart.test.tsx.snap | 410 ++++++++------- .../HeatMapChart/HeatMapChart.test.tsx | 65 ++- .../__snapshots__/HeatMapChart.test.tsx.snap | 161 +++--- .../components/LineChart/LineChart.test.tsx | 103 +++- .../__snapshots__/LineChart.test.tsx.snap | 373 +++++++------- .../VerticalBarChart.test.tsx.snap | 40 -- .../VerticalStackedBarChart.test.tsx.snap | 18 - 11 files changed, 1240 insertions(+), 942 deletions(-) diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx index 11ed79e424f94..068c675f59b70 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx @@ -1,7 +1,7 @@ jest.mock('react-dom'); import * as React from 'react'; import { resetIds } from '../../Utilities'; -import * as renderer from 'react-test-renderer'; +//import * as renderer from 'react-test-renderer'; import { mount, ReactWrapper } from 'enzyme'; import { IAreaChartProps, AreaChart } from './index'; import { IAreaChartState, AreaChartBase } from './AreaChart.base'; @@ -10,9 +10,15 @@ import toJson from 'enzyme-to-json'; // Wrapper of the AreaChart to be tested. let wrapper: ReactWrapper | undefined; +const originalRAF = window.requestAnimationFrame; function sharedBeforeEach() { resetIds(); + jest.useFakeTimers(); + Object.defineProperty(window, 'requestAnimationFrame', { + writable: true, + value: (callback: FrameRequestCallback) => callback(0), + }); } function sharedAfterEach() { @@ -27,6 +33,8 @@ function sharedAfterEach() { if ((global.setTimeout as any).mock) { jest.useRealTimers(); } + jest.useRealTimers(); + window.requestAnimationFrame = originalRAF; } const points: ILineChartPoints[] = [ @@ -69,68 +77,118 @@ const emptyChartPoints = { }; describe('AreaChart snapShot testing', () => { - it('renders Areachart correctly', () => { - const component = renderer.create(); - const tree = component.toJSON(); - expect(tree).toMatchSnapshot(); + beforeEach(() => { + resetIds(); }); + afterEach(() => { + if (wrapper) { + wrapper.unmount(); + wrapper = undefined; + } - it('renders hideLegend hhh correctly', () => { - const component = renderer.create(); - const tree = component.toJSON(); - expect(tree).toMatchSnapshot(); + // Do this after unmounting the wrapper to make sure if any timers cleaned up on unmount are + // cleaned up in fake timers world + // eslint-disable-next-line @typescript-eslint/no-explicit-any + if ((global.setTimeout as any).mock) { + jest.useRealTimers(); + } }); - it('renders hideTooltip correctly', () => { - const component = renderer.create(); - const tree = component.toJSON(); + it('renders Areachart correctly', async () => { + wrapper = mount(); + await new Promise(resolve => setTimeout(resolve)); + wrapper.update(); + const tree = toJson(wrapper, { mode: 'deep' }); expect(tree).toMatchSnapshot(); }); - it('renders enabledLegendsWrapLines correctly', () => { - const component = renderer.create(); - const tree = component.toJSON(); + it('renders hideLegend hhh correctly', async () => { + const component = mount(); + await new Promise(resolve => setTimeout(resolve)); + component.update(); + const tree = toJson(component, { mode: 'deep' }); expect(tree).toMatchSnapshot(); }); - it('renders showXAxisLablesTooltip correctly', () => { - const component = renderer.create(); - const tree = component.toJSON(); + it('renders hideTooltip correctly', async () => { + const component = mount(); + await new Promise(resolve => setTimeout(resolve)); + component.update(); + const tree = toJson(component, { mode: 'deep' }); expect(tree).toMatchSnapshot(); }); - it('renders wrapXAxisLables correctly', () => { - const component = renderer.create(); - const tree = component.toJSON(); + it('renders enabledLegendsWrapLines correctly', async () => { + const component = mount(); + await new Promise(resolve => setTimeout(resolve)); + component.update(); + const tree = toJson(component, { mode: 'deep' }); expect(tree).toMatchSnapshot(); }); - - it('renders yAxisTickFormat correctly', () => { - const component = renderer.create(); - const tree = component.toJSON(); + it('renders yAxisTickFormat correctly', async () => { + const component = mount(); + await new Promise(resolve => setTimeout(resolve)); + component.update(); + const tree = toJson(component, { mode: 'deep' }); expect(tree).toMatchSnapshot(); }); - it('renders Areachart with single point correctly', () => { - const component = renderer.create(); - const tree = component.toJSON(); + it('renders Areachart with single point correctly', async () => { + const component = mount(); + await new Promise(resolve => setTimeout(resolve)); + component.update(); + const tree = toJson(component, { mode: 'deep' }); expect(tree).toMatchSnapshot(); }); - it('Should render with default colors when line color is not provided', () => { + it('Should render with default colors when line color is not provided', async () => { const lineColor = points[0].color; delete points[0].color; - const component = renderer.create(); - const tree = component.toJSON(); + const component = mount(); + await new Promise(resolve => setTimeout(resolve)); + component.update(); + const tree = toJson(component, { mode: 'deep' }); expect(tree).toMatchSnapshot(); points[0].color = lineColor; }); - it('Should not render circles when optimizeLargeData is true', () => { - const component = renderer.create(); - const tree = component.toJSON(); + it('Should not render circles when optimizeLargeData is true', async () => { + const component = mount(); + await new Promise(resolve => setTimeout(resolve)); + component.update(); + const tree = toJson(component, { mode: 'deep' }); + expect(tree).toMatchSnapshot(); + }); + + it('renders showXAxisLablesTooltip correctly', async () => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + + wrapper = mount(); + await new Promise(resolve => setTimeout(resolve)); + wrapper.update(); + if (wrapper) { + const tree = toJson(wrapper, { mode: 'deep' }); + expect(tree).toMatchSnapshot(); + } + }); + + it('renders wrapXAxisLables correctly', async () => { + const mockGetComputedTextLength = jest.fn().mockReturnValue(100); + + // Replace the original method with the mock implementation + Object.defineProperty( + Object.getPrototypeOf(document.createElementNS('http://www.w3.org/2000/svg', 'tspan')), + 'getComputedTextLength', + { + value: mockGetComputedTextLength, + }, + ); + wrapper = mount(); + await new Promise(resolve => setTimeout(resolve)); + wrapper.update(); + const tree = toJson(wrapper!, { mode: 'deep' }); expect(tree).toMatchSnapshot(); }); }); 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 cbfdec4c2a65b..aea3556eb4900 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 @@ -36,7 +36,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1 > @@ -223,12 +223,6 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1 >
@@ -765,12 +765,6 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover >
- -
- -
- -
- -
Date: Thu, 27 Apr 2023 22:16:37 +0530 Subject: [PATCH 02/11] Change file and removing comment from Area chart --- ...-bda51650-008f-417c-ab0d-62e7dd4a22fd.json | 7 +++ .../components/AreaChart/AreaChart.test.tsx | 43 +++++++++---------- 2 files changed, 28 insertions(+), 22 deletions(-) create mode 100644 change/@fluentui-react-charting-bda51650-008f-417c-ab0d-62e7dd4a22fd.json diff --git a/change/@fluentui-react-charting-bda51650-008f-417c-ab0d-62e7dd4a22fd.json b/change/@fluentui-react-charting-bda51650-008f-417c-ab0d-62e7dd4a22fd.json new file mode 100644 index 0000000000000..0614b57ddd3fd --- /dev/null +++ b/change/@fluentui-react-charting-bda51650-008f-417c-ab0d-62e7dd4a22fd.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Improving first render cycle of cartesian chart", + "packageName": "@fluentui/react-charting", + "email": "ankityadav@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx index 068c675f59b70..fb0894f66dd8e 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx @@ -1,7 +1,6 @@ jest.mock('react-dom'); import * as React from 'react'; import { resetIds } from '../../Utilities'; -//import * as renderer from 'react-test-renderer'; import { mount, ReactWrapper } from 'enzyme'; import { IAreaChartProps, AreaChart } from './index'; import { IAreaChartState, AreaChartBase } from './AreaChart.base'; @@ -103,41 +102,41 @@ describe('AreaChart snapShot testing', () => { }); it('renders hideLegend hhh correctly', async () => { - const component = mount(); + wrapper = mount(); await new Promise(resolve => setTimeout(resolve)); - component.update(); - const tree = toJson(component, { mode: 'deep' }); + wrapper.update(); + const tree = toJson(wrapper, { mode: 'deep' }); expect(tree).toMatchSnapshot(); }); it('renders hideTooltip correctly', async () => { - const component = mount(); + wrapper = mount(); await new Promise(resolve => setTimeout(resolve)); - component.update(); - const tree = toJson(component, { mode: 'deep' }); + wrapper.update(); + const tree = toJson(wrapper, { mode: 'deep' }); expect(tree).toMatchSnapshot(); }); it('renders enabledLegendsWrapLines correctly', async () => { - const component = mount(); + wrapper = mount(); await new Promise(resolve => setTimeout(resolve)); - component.update(); - const tree = toJson(component, { mode: 'deep' }); + wrapper.update(); + const tree = toJson(wrapper, { mode: 'deep' }); expect(tree).toMatchSnapshot(); }); it('renders yAxisTickFormat correctly', async () => { - const component = mount(); + wrapper = mount(); await new Promise(resolve => setTimeout(resolve)); - component.update(); - const tree = toJson(component, { mode: 'deep' }); + wrapper.update(); + const tree = toJson(wrapper, { mode: 'deep' }); expect(tree).toMatchSnapshot(); }); it('renders Areachart with single point correctly', async () => { - const component = mount(); + wrapper = mount(); await new Promise(resolve => setTimeout(resolve)); - component.update(); - const tree = toJson(component, { mode: 'deep' }); + wrapper.update(); + const tree = toJson(wrapper, { mode: 'deep' }); expect(tree).toMatchSnapshot(); }); @@ -145,20 +144,20 @@ describe('AreaChart snapShot testing', () => { const lineColor = points[0].color; delete points[0].color; - const component = mount(); + wrapper = mount(); await new Promise(resolve => setTimeout(resolve)); - component.update(); - const tree = toJson(component, { mode: 'deep' }); + wrapper.update(); + const tree = toJson(wrapper, { mode: 'deep' }); expect(tree).toMatchSnapshot(); points[0].color = lineColor; }); it('Should not render circles when optimizeLargeData is true', async () => { - const component = mount(); + wrapper = mount(); await new Promise(resolve => setTimeout(resolve)); - component.update(); - const tree = toJson(component, { mode: 'deep' }); + wrapper.update(); + const tree = toJson(wrapper, { mode: 'deep' }); expect(tree).toMatchSnapshot(); }); From f5a27b70aafa0345b56bfcbd7b9d684eafb64580 Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Thu, 25 May 2023 12:30:25 +0530 Subject: [PATCH 03/11] Add prop for perf related changes --- .../components/AreaChart/AreaChart.base.tsx | 116 ++++++++---------- .../CommonComponents/CartesianChart.base.tsx | 2 +- .../CommonComponents/CartesianChart.types.ts | 6 + .../components/LineChart/LineChart.base.tsx | 1 + .../VerticalBarChart.test.tsx.snap | 40 ++++++ .../VerticalStackedBarChart.test.tsx.snap | 18 +++ .../LineChart/LineChart.Basic.Example.tsx | 1 + 7 files changed, 121 insertions(+), 63 deletions(-) diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx index 5b6d4bbe68707..69010b0a4d626 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -173,69 +173,61 @@ export class AreaChartBase extends React.Component { - this._xAxisRectScale = props.xScale; - const ticks = this._xAxisRectScale.ticks(); - const width1 = this._xAxisRectScale(ticks[ticks.length - 1]); - const rectHeight = props.containerHeight! - this.margins.top!; - return ( - <> - - - - {this._chart} - - ); - }} - /> - ); - } + const calloutProps = { + target: this.state.refSelected, + isCalloutVisible: this.state.isCalloutVisible, + directionalHint: DirectionalHint.topAutoEdge, + YValueHover: this.state.YValueHover, + hoverXValue: this.state.hoverXValue, + id: `toolTip${this._uniqueCallOutID}`, + gapSpace: 15, + isBeakVisible: false, + onDismiss: this._closeCallout, + 'data-is-focusable': true, + xAxisCalloutAccessibilityData: this.state.xAxisCalloutAccessibilityData, + ...this.props.calloutProps, + }; return ( -
{ + this._xAxisRectScale = props.xScale; + const ticks = this._xAxisRectScale.ticks(); + const width1 = this._xAxisRectScale(ticks[ticks.length - 1]); + const rectHeight = props.containerHeight! - this.margins.top!; + return ( + <> + + + + {this._chart} + + ); + }} /> ); } diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index 95854d9ae2385..0ef81236b90ba 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -216,7 +216,7 @@ export class CartesianChartBase extends React.Component { 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 84faa8c4c0823..2632076c3df9c 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 @@ -1439,6 +1439,11 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = ` id="yAxisGElementchart_36" transform="translate(40, 0)" /> + + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
From dc5815f05a27b4c7db23b7d9d489b90387ef805a Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Thu, 8 Jun 2023 09:00:54 +0530 Subject: [PATCH 04/11] Different prop for perf changes internally --- .../src/components/AreaChart/AreaChart.base.tsx | 4 +++- .../src/components/AreaChart/AreaChart.types.ts | 6 ++++++ .../src/components/CommonComponents/CartesianChart.base.tsx | 5 ++++- .../src/components/CommonComponents/CartesianChart.types.ts | 6 ++++++ .../src/components/LineChart/LineChart.base.tsx | 4 +++- .../src/components/LineChart/LineChart.types.ts | 6 ++++++ 6 files changed, 28 insertions(+), 3 deletions(-) diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx index 69010b0a4d626..effd824e56820 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -106,6 +106,7 @@ export class AreaChartBase extends React.Component { diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.types.ts b/packages/react-charting/src/components/AreaChart/AreaChart.types.ts index ead09c32f65d7..36d45fce01046 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.types.ts +++ b/packages/react-charting/src/components/AreaChart/AreaChart.types.ts @@ -59,6 +59,12 @@ export interface IAreaChartProps extends ICartesianChartProps { * Optimize area chart rendering for large data set. */ optimizeLargeData?: boolean; + + /** + * @default false + * The prop used to enable the perf optimization + */ + enablePerfOptimization?: boolean; } export interface IAreaChartStyles extends ICartesianChartStyles {} diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index 0ef81236b90ba..abdcb6845bb13 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -216,7 +216,10 @@ export class CartesianChartBase extends React.Component JSX.Element; + private _firstRenderOptimization: boolean; constructor(props: ILineChartProps) { super(props); @@ -201,6 +202,7 @@ export class LineChartBase extends React.Component this._createLegends(data)); + this._firstRenderOptimization = true; props.eventAnnotationProps && props.eventAnnotationProps.labelHeight && @@ -285,7 +287,7 @@ export class LineChartBase extends React.Component { diff --git a/packages/react-charting/src/components/LineChart/LineChart.types.ts b/packages/react-charting/src/components/LineChart/LineChart.types.ts index e05e91499fec7..e711497447d93 100644 --- a/packages/react-charting/src/components/LineChart/LineChart.types.ts +++ b/packages/react-charting/src/components/LineChart/LineChart.types.ts @@ -76,6 +76,12 @@ export interface ILineChartProps extends ICartesianChartProps { * The prop used to define the culture to localized the numbers */ culture?: string; + + /** + * @default false + * The prop used to enable the perf optimization + */ + enablePerfOptimization?: boolean; } export interface IEventsAnnotationProps { events: IEventAnnotation[]; From 42f5edbff6d386136a76ef1f61751298a75d21a4 Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Thu, 8 Jun 2023 13:31:34 +0530 Subject: [PATCH 05/11] Resolving merge conflicts --- .../components/AreaChart/AreaChart.base.tsx | 117 ++++++++++-------- 1 file changed, 63 insertions(+), 54 deletions(-) diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx index effd824e56820..c2fde62eba04f 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -175,61 +175,70 @@ export class AreaChartBase extends React.Component { + this._xAxisRectScale = props.xScale; + const ticks = this._xAxisRectScale.ticks(); + const width1 = this._xAxisRectScale(ticks[ticks.length - 1]); + const rectHeight = props.containerHeight! - this.margins.top!; + return ( + <> + + + + {this._chart} + + ); + }} + /> + ); + } return ( - { - this._xAxisRectScale = props.xScale; - const ticks = this._xAxisRectScale.ticks(); - const width1 = this._xAxisRectScale(ticks[ticks.length - 1]); - const rectHeight = props.containerHeight! - this.margins.top!; - return ( - <> - - - - {this._chart} - - ); - }} +
); } From b29a8229a7a2d803f2bfb8cb6440a365bb9e36c6 Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Tue, 4 Jul 2023 19:55:07 +0530 Subject: [PATCH 06/11] Removing duplicate flag --- .../src/components/AreaChart/AreaChart.types.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.types.ts b/packages/react-charting/src/components/AreaChart/AreaChart.types.ts index 36d45fce01046..ead09c32f65d7 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.types.ts +++ b/packages/react-charting/src/components/AreaChart/AreaChart.types.ts @@ -59,12 +59,6 @@ export interface IAreaChartProps extends ICartesianChartProps { * Optimize area chart rendering for large data set. */ optimizeLargeData?: boolean; - - /** - * @default false - * The prop used to enable the perf optimization - */ - enablePerfOptimization?: boolean; } export interface IAreaChartStyles extends ICartesianChartStyles {} From e757c85d80ec843d7984ec0477cfa91cda108b5c Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Wed, 5 Jul 2023 18:24:55 +0530 Subject: [PATCH 07/11] Updating snapshots --- .../__snapshots__/AreaChart.test.tsx.snap | 25 +-- .../GroupedVerticalBarChart.test.tsx.snap | 14 +- .../__snapshots__/HeatMapChart.test.tsx.snap | 10 +- .../__snapshots__/LineChart.test.tsx.snap | 148 +++++++++--------- 4 files changed, 99 insertions(+), 98 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 aea3556eb4900..adc1d00ad35b3 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 @@ -510,7 +510,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1 color: rgb(255, 255, 255); } > - + metaData1
- +
- +
@@ -151,10 +151,10 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1 /> - + metaData1
@@ -675,10 +675,10 @@ exports[`LineChart - mouse events Should render customized callout on mouseover /> @@ -1097,10 +1097,10 @@ exports[`LineChart - mouse events Should render customized callout per stack on /> @@ -1519,10 +1519,10 @@ exports[`LineChart snapShot testing Should render with default colors when line /> @@ -1860,10 +1860,10 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = ` /> @@ -2201,10 +2201,10 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1` /> @@ -2522,10 +2522,10 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = ` /> @@ -2702,10 +2702,10 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = ` /> @@ -3043,10 +3043,10 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`] /> @@ -3384,10 +3384,10 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = ` /> @@ -3725,10 +3725,10 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = ` /> Date: Mon, 10 Jul 2023 18:01:00 +0530 Subject: [PATCH 08/11] Fixing issue due to PR:28239 changes --- .../components/CommonComponents/CartesianChart.base.tsx | 5 ++++- .../components/CommonComponents/CartesianChart.types.ts | 6 ------ packages/react-charting/src/utilities/utilities.ts | 9 +++++---- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index abdcb6845bb13..3d9eebebaa3dc 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -744,7 +744,10 @@ export class CartesianChartBase extends React.Component 1 + ? this.margins.left! + this.margins.right! + labelWidth * (this._tickValues.length - 1) + : this.margins.left! + this.margins.right!; if ( [ChartTypes.GroupedVerticalBarChart, ChartTypes.VerticalBarChart, ChartTypes.VerticalStackedBarChart].includes( diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts index aa0b30a1fc46a..f1a4fdf4b1f80 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts @@ -380,12 +380,6 @@ export interface ICartesianChartProps { * @default True for LineChart but False for other charts */ enableReflow?: boolean; - - /** - * @default false - * Used to test the Performance optimization code befor merging it to master. - */ - enablePerfOptimization?: boolean; } export interface IYValueHover { diff --git a/packages/react-charting/src/utilities/utilities.ts b/packages/react-charting/src/utilities/utilities.ts index 54488a1f10bbf..93d3879b15d73 100644 --- a/packages/react-charting/src/utilities/utilities.ts +++ b/packages/react-charting/src/utilities/utilities.ts @@ -758,10 +758,11 @@ export const calculateLongestLabelWidth = (labels: (string | number)[], query: s } else { ctx.font = '600 10px "Segoe UI"'; } - - labels.forEach(label => { - maxLabelWidth = Math.max(ctx.measureText(label.toString()).width, maxLabelWidth); - }); + if (labels !== undefined) { + labels.forEach(label => { + maxLabelWidth = Math.max(ctx.measureText(label.toString()).width, maxLabelWidth); + }); + } } return maxLabelWidth; From 4237f5c0c80d75038aae0ef508d8bbc5f30bafff Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Tue, 11 Jul 2023 10:20:17 +0530 Subject: [PATCH 09/11] Fixing issue due to PR:28239 changes and enabling perfOptimization flag true for all variants --- .../src/components/CommonComponents/CartesianChart.base.tsx | 4 ++-- .../src/components/CommonComponents/CartesianChart.types.ts | 2 +- .../LineChart/LineChart.CustomAccessibility.Example.tsx | 1 + .../LineChart/LineChart.CustomLocaleDateAxis.Example.tsx | 1 + .../src/react-charting/LineChart/LineChart.Events.Example.tsx | 1 + .../src/react-charting/LineChart/LineChart.Gaps.Example.tsx | 1 + .../react-charting/LineChart/LineChart.LargeData.Example.tsx | 1 + .../react-charting/LineChart/LineChart.Multiple.Example.tsx | 1 + .../src/react-charting/LineChart/LineChart.Styled.Example.tsx | 1 + 9 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index 3d9eebebaa3dc..a3e84875a59e1 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -719,7 +719,7 @@ export class CartesianChartBase extends React.Component { const numChars = this.props.noOfCharsToTruncate || 4; return val.toString().length > numChars ? `${val.toString().slice(0, numChars)}...` : val; @@ -729,7 +729,7 @@ export class CartesianChartBase extends React.Component { words.push(...val.toString().split(/\s+/)); diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts index f1a4fdf4b1f80..f479a0b4b372f 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts @@ -571,7 +571,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps { /** * @default false - * Used to test the Performance optimization code befor merging it to master. + * Used to control the first render cycle Performance optimization code. */ enableFirstRenderOptimization?: boolean; } diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx index 8672cfcd2db6c..3f685e2f2adfe 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx @@ -225,6 +225,7 @@ export class LineChartCustomAccessibilityExample extends React.Component< legendProps={{ canSelectMultipleLegends: true, allowFocusOnLegends: true }} colorFillBars={colorFillBarData} allowMultipleShapesForPoints={this.state.allowMultipleShapes} + enablePerfOptimization={true} />
); diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx index fda2ad0695a2c..0f86f179ca3ae 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx @@ -201,6 +201,7 @@ export class LineChartCustomLocaleDateAxisExample extends React.Component<{}, IL allowMultipleShapesForPoints={this.state.allowMultipleShapes} rotateXAxisLables={true} timeFormatLocale={this.state.customLocale} + enablePerfOptimization={true} /> diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx index e1e4352bda62c..0e01e45acfbd2 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx @@ -233,6 +233,7 @@ export class LineChartEventsExample extends React.Component<{}, ILineChartEvents }} height={this.state.height} width={this.state.width} + enablePerfOptimization={true} /> ); diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx index e145d82c007c0..d1ede8341c66b 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx @@ -270,6 +270,7 @@ export class LineChartGapsExample extends React.Component<{}, ILineChartGapsStat calloutMaxWidth: 200, }} getCalloutDescriptionMessage={this._calculateCalloutDescription} + enablePerfOptimization={true} /> diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.LargeData.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.LargeData.Example.tsx index a8559d1d58ec3..deb578a1cb6a2 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.LargeData.Example.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.LargeData.Example.tsx @@ -144,6 +144,7 @@ export class LineChartLargeDataExample extends React.Component<{}, ILineChartBas margins={margins} allowMultipleShapesForPoints={this.state.allowMultipleShapes} optimizeLargeData={true} + enablePerfOptimization={true} /> diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx index fe1f3f9050129..07d9eb6db8db5 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx @@ -303,6 +303,7 @@ export class LineChartMultipleExample extends React.Component<{}, ILineChartMult legendProps={{ canSelectMultipleLegends: true, allowFocusOnLegends: true }} colorFillBars={colorFillBarData} allowMultipleShapesForPoints={this.state.allowMultipleShapes} + enablePerfOptimization={true} /> ); diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx index 59dd88fd2a572..9710ce7e99b86 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx @@ -105,6 +105,7 @@ export class LineChartStyledExample extends React.Component<{}, IStyledLineChart /> ) : null } + enablePerfOptimization={true} /> From 8f1ea91781aaa21238fbddb0fc09bc10ab98af18 Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Tue, 11 Jul 2023 17:57:21 +0530 Subject: [PATCH 10/11] resolving review comment --- .../components/CommonComponents/CartesianChart.base.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index a3e84875a59e1..64ad8c1ec9ff3 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -75,6 +75,7 @@ export class CartesianChartBase extends React.Component legendContainerHeight ? container.getBoundingClientRect().height From 789d492657da551df337841c1d0fe16be126822f Mon Sep 17 00:00:00 2001 From: ankityadav4 Date: Wed, 12 Jul 2023 13:17:49 +0530 Subject: [PATCH 11/11] resolving review comment --- .../components/CommonComponents/CartesianChart.base.tsx | 9 +++------ packages/react-charting/src/utilities/utilities.ts | 9 ++++----- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index 64ad8c1ec9ff3..dd9fd3cec6264 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -722,7 +722,7 @@ export class CartesianChartBase extends React.Component { const numChars = this.props.noOfCharsToTruncate || 4; return val.toString().length > numChars ? `${val.toString().slice(0, numChars)}...` : val; @@ -732,7 +732,7 @@ export class CartesianChartBase extends React.Component { words.push(...val.toString().split(/\s+/)); @@ -747,10 +747,7 @@ export class CartesianChartBase extends React.Component 1 - ? this.margins.left! + this.margins.right! + labelWidth * (this._tickValues.length - 1) - : this.margins.left! + this.margins.right!; + let minChartWidth = this.margins.left! + this.margins.right! + labelWidth * (this._tickValues.length - 1); if ( [ChartTypes.GroupedVerticalBarChart, ChartTypes.VerticalBarChart, ChartTypes.VerticalStackedBarChart].includes( diff --git a/packages/react-charting/src/utilities/utilities.ts b/packages/react-charting/src/utilities/utilities.ts index 93d3879b15d73..54488a1f10bbf 100644 --- a/packages/react-charting/src/utilities/utilities.ts +++ b/packages/react-charting/src/utilities/utilities.ts @@ -758,11 +758,10 @@ export const calculateLongestLabelWidth = (labels: (string | number)[], query: s } else { ctx.font = '600 10px "Segoe UI"'; } - if (labels !== undefined) { - labels.forEach(label => { - maxLabelWidth = Math.max(ctx.measureText(label.toString()).width, maxLabelWidth); - }); - } + + labels.forEach(label => { + maxLabelWidth = Math.max(ctx.measureText(label.toString()).width, maxLabelWidth); + }); } return maxLabelWidth;