diff --git a/change/@fluentui-react-charting-fb2207fd-522a-4790-b398-e9546a11aec2.json b/change/@fluentui-react-charting-fb2207fd-522a-4790-b398-e9546a11aec2.json new file mode 100644 index 00000000000000..024a8c8e4a4c78 --- /dev/null +++ b/change/@fluentui-react-charting-fb2207fd-522a-4790-b398-e9546a11aec2.json @@ -0,0 +1,10 @@ +{ + "type": "patch", + "comment": { + "title": "", + "value": "" + }, + "packageName": "@fluentui/react-charting", + "email": "132879294+v-baambati@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-charting/docs/TestPlans/AreaChart/ComponentTests.md b/packages/react-charting/docs/TestPlans/AreaChart/ComponentTests.md new file mode 100644 index 00000000000000..32d9c22cf47190 --- /dev/null +++ b/packages/react-charting/docs/TestPlans/AreaChart/ComponentTests.md @@ -0,0 +1,61 @@ +**Area Chart – Component test plan** + +**Sub-components: Area, x-axis, y-axis and Legend** + +1. **Line: Area data, Area color (multi colors), Area label (show/hide)** +1. **Legends: show/hide legends, highlight the corresponding Area on legend hover** +1. **Callout: Default/custom callout** +1. **Labels: x-Axis labels, y-Axis labels** + +| **Test steps** | **Validation** | **Tool used** | +| :-------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------: | :-----------: | +| Test 1: [Snapshot testing] | | | +| - With only data prop, numerical data on x-axis. | Renders Area chart correctly | RTL | +| - With only data prop, date data on x-axis. | Renders Area chart correctly | RTL | +| - With only data prop, string data on x-axis. | Should not render area chart | Pending | +| - With HideLegend prop set to “true” | Should hide legends | Enzyme | +| - With HideTooltip prop set to “true” | Should hide the tooltip in chart | Enzyme | +| - With EnabledLegendsWrapLines set to “true” | Should enable the legends to wrap lines if there is not enough space to show all legends on a single line | Enzyme | +| - With ShowXAxisLablesTooltip set to “true” | Should truncate x axis labels and show tooltip on x axis labels | Enzyme | +| - With WrapXAxisLables set to “true” | Should wrap x axis label values | Enzyme | +| - With yAxisTickFormat set to “%d” |

Should render the y-axis ticks in the format specified

| Enzyme | +| - With single point | Should render Area chat with single point | Enzyme | +| - With Default color | Should render with default colors when line color not provided | Enzyme | +| - With specific colors | Should render areas with specified colors | RTL | +| - With optimizeLargeData set to “true” | Should not render circles when optimizeLargeData is true | Enzyme | +| Test 2: Basic props testing | | | +| - HideLegend prop set to “true” | Should not mount legend when hideLegend is true | Enzyme | +| - HideLegend prop set to “false” | Should mount legend when hideLegend is false | Enzyme | +| - HideTooltip prop set to “true” | Should not mount callout when hideTootip is true | Enzyme | +| - HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme | +| - onRenderCalloutPerStack prop is not given | Should not render onRenderCalloutPerStack | Enzyme | +| - onRenderCalloutPerDataPoint is given | Should render onRenderCalloutPerDataPoint | Enzyme | +| - onRenderCalloutPerDataPoint is not given | Should not render onRenderCalloutPerDataPoint | Enzyme | +| Test 3: Render calling with respective to props | | | +| - No prop changes: Mount Area chart and then set the same props again | Render function should have been called twice | Enzyme | +| - Prop changes: Mount Area chart and then set some other prop | Render function should have been called twice | Enzyme | +| Test 4: Mouse events | | | +| - Mouse over on Area | Should render callout correctly on mouseover | Enzyme | +| - Mouse move from one area to other area | Should render callout correctly on mouse move | Enzyme | +| - Mouse over on a area with customized callout | Should render customized callout on mouseover | Enzyme | +| - Customized callout on area from one area to other area | Should render customized callout for stack on mouseover | Enzyme | +| Test 5: Render empty chart aria label div when chart is empty | | | +| - Area chart mounted with non-empty data | No empty chart aria label div rendered | Enzyme | +| - Area chart mounted with empty data | Empty chart aria label div rendered | Enzyme | +| Test 6: [Sub-Component]: Legends | | | +| - Hover mouse over area legends | Should reduce the opacity of the other Areas | RTL | +| - Hover mouse over area legends | Should reduce the opacity of the other lines in area chart and opacity of the selected area line should be zero | RTL | +| - Hover mouse over area legends | Should reduce the opacity of the other legends | RTL | +| - Single mouse click on legends | Should select legend on single mouse click on respective legend | RTL | +| - Double mouse click on legends | Should deselect legend on double mouse click on respective legend | RTL | +| Test 7: [Sub-Component]: Callout | | | +| - Hover mouse over a single area | Should show the default callout over that Area | RTL | +| - Hover mouse over a stacked area | Should show the default stacked callout over that Area | RTL | +| - Specify custom callout and hover mouse over a Area | Should show the custom callout over that Area | RTL | +| Test 8: [Sub-Component]: x-axis labels | | | +| - Truncate x-axis labels | Should show the x-axis labels tooltip when hovered | RTL | +| - Rotate x-axis labels | Should rotate the x-axis labels by 39 degrees | RTL | +| Test 9: [Sub-Component]: Screen resolution | | | +| - Increase the screen resolution (zoom in) | Should remain unchanged on zoom in | RTL | +| - Decrease the screen resolution (zoom out) | Should remain unchanged on zoom out | RTL | +| Test 10: Theme changed to Dark Theme | Should reflect theme change | RTL | diff --git a/packages/react-charting/docs/TestPlans/LineChart/ComponentTests.md b/packages/react-charting/docs/TestPlans/LineChart/ComponentTests.md new file mode 100644 index 00000000000000..ac967d10d1b38e --- /dev/null +++ b/packages/react-charting/docs/TestPlans/LineChart/ComponentTests.md @@ -0,0 +1,63 @@ +**Line Chart – Component test plan** + +**Sub-components: Line, x-axis, y-axis, Event, Time Range, Callout, Drop down and Legend** + +1. **Line: Line data, Line color (multi colors), Line label (show/hide)** +1. **Legends: show/hide legends, highlight the corresponding line on legend hover** +1. **Callout: Default/custom callout** +1. **Labels: x-Axis labels** + +| **Test steps** | **Validation** | **Tool used** | +| :---------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | :-----------: | +| Test 1: [Snapshot testing] | | | +| - With only data prop, numerical data on x-axis. | Renders line chart correctly | RTL | +| - With only data prop, date data on x-axis. | Renders line chart correctly | RTL | +| - With only data prop, string data on x-axis. | Should not render area chart | Pending | +| - With allowMultipleShapesForPoints set to “true” | Should render line chart with multiple shapes for chart points | RTL | +| - With HideLegend prop set to “true” | Should hide legends | Enzyme | +| - With HideTooltip prop set to “true” | Should hide the tooltip in chart | Enzyme | +| - With EnabledLegendsWrapLines set to “true” | Should enable the legends to wrap lines if there is not enough space to show all legends on a single line | Enzyme | +| - With ShowXAxisLablesTooltip set to “true” | Should truncate x axis labels and show tooltip on x axis labels | Enzyme | +| - With WrapXAxisLables set to “true” | Should wrap x axis label values | Enzyme | +| - With yAxisTickFormat set to “%d” |

Should render the y-axis ticks in the format specified

| Enzyme | +| - With canSelectMultipleLegends set to “true” | Should select multiple legends | RTL | +| Test 2: Basic props testing | | | +| - HideLegend prop set to “true” | Should not mount legend when hideLegend is true | Enzyme | +| - HideLegend prop set to “false” | Should mount legend when hideLegend is false | Enzyme | +| - HideTooltip prop set to “true” | Should not mount callout when hideTootip is true | Enzyme | +| - HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme | +| Test 3: Render calling with respective to props | | | +| - No prop changes: Mount line chart and then set the same props again | Render function should have been called twice | Enzyme | +| - Prop changes: Mount line chart and then set some other prop | Render function should have been called twice | Enzyme | +| Test 4: Mouse events | | | +| - Mouse over on a line | Should render callout correctly on mouseover | Enzyme | +| - Mouse move from one line to other line | Should render callout correctly on mouse move | Enzyme | +| - Mouse over on a line with customized callout | Should render customized callout on mouseover | Enzyme | +| - Customized callout on a line | Should render customized callout correctly on mouseover | Enzyme | +| - Customized callout on a line from one line to other line | Should render customized callout for stack on mouseover | Enzyme | +| Test 5: Render empty chart aria label div when chart is empty | | | +| - Line chart mounted with non-empty data | No empty chart aria label div rendered | Enzyme | +| - Line chart mounted with empty data | Empty chart aria label div rendered | Enzyme | +| Test 6: Render empty chart calling with respective to props | | | +| - No prop changes: Mount line chart with non-empty data and then set the same props again | Render function should have been called twice | Enzyme | +| - prop changes: Mount line chart with empty data and then set the props | Render function should have been called 3 times | Enzyme | +| Test 7: [Sub-Component]: Line | | | +| - Specify lines with specified colors | Should render lines with the color provided in data | RTL | +| - Specify line data with gaps | Should render the lines with specified gaps | RTL | +| Test 8: [Sub-Component]: Legends | | | +| - Hover mouse over line legends | Should highlight the corresponding line on mouse over on legend | RTL | +| - Mouse leave on legends | Should reset the highlighted line on mouse leave on legends | RTL | +| - Single mouse click on legends | Should select legend on single mouse click on respective legend | RTL | +| - Double mouse click on legends | Should deselect legend on double mouse click on respective legend | RTL | +| Test 9: [Sub-Component]: Time Range(Color fill bars) | | | +| - Line chart with time range | Should render time range with specified data | RTL | +| - Single mouse click on time range legend | Should highlight corresponding time range on legend click | RTL | +| Test 10: [Sub-Component]: x-axis labels | | | +| - Truncate x-axis labels | Should show the x-axis labels tooltip when hovered | RTL | +| - Rotate x-axis labels | Should rotate the x-axis labels by 45 degrees | RTL | +| Test 11: [Sub-Component]: Event | | | +| - Line chart with Events data | Should render line chart with events | RTL | +| Test 12: [Sub-Component]: Screen resolution | | | +| - Increase the screen resolution (zoom in) | Should remain unchanged on zoom in | RTL | +| - Decrease the screen resolution (zoom out) | Should remain unchanged on zoom out | RTL | +| Test 13: Theme changed to Dark Theme | Should reflect theme change | RTL | diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx index 5a03d7c585b7c5..40209941efafae 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -890,7 +890,7 @@ export class AreaChartBase extends React.Component { + private _getAriaLabel(lineIndex: number, pointIndex: number): string { const line = this.props.data.lineChartData![lineIndex]; const point = line.data[pointIndex]; const formattedDate = point.x instanceof Date ? point.x.toLocaleString() : point.x; @@ -898,7 +898,7 @@ export class AreaChartBase extends React.Component { expect(tree).toMatchSnapshot(); }); - it('renders hideLegend hhh correctly', async () => { + it('renders hideLegend correctly', async () => { wrapper = mount(); await new Promise(resolve => setTimeout(resolve)); wrapper.update(); diff --git a/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx index 69b422bd6cfa8b..b1dee2e3204b73 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx @@ -1,22 +1,492 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { render, screen, fireEvent, act } from '@testing-library/react'; import * as React from 'react'; -import { queryAllByAttribute, render, waitFor } from '@testing-library/react'; -import { chartPoints, emptyChartPoints } from './AreaChart.test'; -import { AreaChart } from './index'; +import { DarkTheme } from '@fluentui/theme-samples'; +import { ThemeProvider } from '@fluentui/react'; +import { AreaChart, IAreaChartProps } from './index'; +import { DefaultPalette } from '@fluentui/react/lib/Styling'; + +import { getByClass, getById, testWithWait, testWithoutWait } from '../../utilities/TestUtility.test'; +import { AreaChartBase } from './AreaChart.base'; + +const beforeAll = () => { + jest.spyOn(AreaChartBase.prototype as any, '_getAriaLabel').mockReturnValue('08/25/2023'); +}; + +const chart1Points = [ + { + x: 20, + y: 9, + }, + { + x: 25, + y: 14, + }, + { + x: 30, + y: 14, + }, + { + x: 35, + y: 23, + }, + { + x: 40, + y: 20, + }, + { + x: 45, + y: 31, + }, + { + x: 50, + y: 29, + }, + { + x: 55, + y: 27, + }, + { + x: 60, + y: 37, + }, + { + x: 65, + y: 51, + }, +]; + +const chart2Points = [ + { + x: 20, + y: 21, + }, + { + x: 25, + y: 25, + }, + { + x: 30, + y: 10, + }, + { + x: 35, + y: 10, + }, + { + x: 40, + y: 14, + }, + { + x: 45, + y: 18, + }, + { + x: 50, + y: 9, + }, + { + x: 55, + y: 23, + }, + { + x: 60, + y: 7, + }, + { + x: 65, + y: 55, + }, +]; + +const chart3Points = [ + { + x: 20, + y: 30, + }, + { + x: 25, + y: 35, + }, + { + x: 30, + y: 33, + }, + { + x: 35, + y: 40, + }, + { + x: 40, + y: 10, + }, + { + x: 45, + y: 40, + }, + { + x: 50, + y: 34, + }, + { + x: 55, + y: 40, + }, + { + x: 60, + y: 60, + }, + { + x: 65, + y: 40, + }, +]; + +const chartPoints = [ + { + legend: 'legend1', + data: chart1Points, + color: 'green', + }, + { + legend: 'legend2', + data: chart2Points, + color: 'yellow', + }, + { + legend: 'legend3', + data: chart3Points, + color: 'blue', + }, +]; + +const chartData = { + chartTitle: 'Area chart multiple example', + lineChartData: chartPoints, +}; + +const chart1PointsWithDate = [ + { + x: new Date('01/06/2018'), + y: 5, + }, + { + x: new Date('01/08/2018'), + y: 16, + }, + { + x: new Date('01/16/2018'), + y: 6, + }, + { + x: new Date('02/06/2018'), + y: 30, + }, + { + x: new Date('02/16/2018'), + y: 10, + }, +]; + +const chart2PointsWithDate = [ + { + x: new Date('01/06/2018'), + y: 10, + }, + { + x: new Date('01/08/2018'), + y: 33, + }, + { + x: new Date('01/16/2018'), + y: 21, + }, + { + x: new Date('02/06/2018'), + y: 44, + }, + { + x: new Date('02/16/2018'), + y: 22, + }, +]; + +const chartPointsWithDate = [ + { + legend: 'legend1', + data: chart1PointsWithDate, + color: '#0099BC', + opacity: 0.7, + lineOptions: { + strokeWidth: 2, + strokeDasharray: '5 5', + }, + }, + { + legend: 'legend2', + data: chart2PointsWithDate, + color: '#77004D', + opacity: 0.8, + lineOptions: { + strokeWidth: 5, + stroke: DefaultPalette.blueDark, + }, + }, +]; + +const chartDataWithDates = { + chartTitle: 'Area chart styled example', + lineChartData: chartPointsWithDate, + pointOptions: { r: 10, strokeWidth: 3, opacity: 1, stroke: DefaultPalette.blueDark }, + pointLineOptions: { strokeWidth: 2, strokeDasharray: '10 10', stroke: DefaultPalette.blueDark }, +}; 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'); + testWithoutWait( + 'Should render the area chart with numeric x-axis data', + AreaChart, + { data: chartData }, + container => { + expect(container).toMatchSnapshot(); + }, + ); + + testWithoutWait( + 'Should render the area chart with date x-axis data', + AreaChart, + { data: chartDataWithDates }, + container => { + expect(container).toMatchSnapshot(); + }, + undefined, + beforeAll, + ); +}); + +describe('Area chart - Subcomponent Area', () => { + testWithoutWait('Should render the Areas with the specified colors', AreaChart, { data: chartData }, container => { + const areas = getById(container, /graph-areaChart/i); // Assert - expect(container).toMatchSnapshot(); - expect(getById(container, /_AreaChart_empty/i)).toHaveLength(1); - // Act - rerender(); - await waitFor(() => { + expect(areas[0].getAttribute('fill')).toEqual('green'); + expect(areas[1].getAttribute('fill')).toEqual('yellow'); + expect(areas[2].getAttribute('fill')).toEqual('blue'); + }); +}); + +describe('Area chart - Subcomponent legend', () => { + testWithoutWait( + 'Should highlight the corresponding Area on mouse over on legends', + AreaChart, + { data: chartData }, + container => { + const legend = screen.queryByText('legend1'); + expect(legend).toBeDefined(); + fireEvent.mouseOver(legend!); // Assert - expect(container).toMatchSnapshot(); - expect(getById(container, /_AreaChart_empty/i)).toHaveLength(0); + const areas = getById(container, /graph-areaChart/i); + expect(areas[0].getAttribute('fill-opacity')).toEqual('0.7'); + expect(areas[1].getAttribute('fill-opacity')).toEqual('0.1'); + expect(areas[2].getAttribute('fill-opacity')).toEqual('0.1'); + }, + ); + + testWithoutWait( + 'Should reduce opacity of the other lines in Area chat and opacity should be zero for selected Area', + AreaChart, + { data: chartData }, + container => { + const legend = screen.queryByText('legend1'); + expect(legend).toBeDefined(); + fireEvent.mouseOver(legend!); + // Assert + const areaLines = getById(container, /line-areaChart/i); + expect(areaLines[0].getAttribute('opacity')).toEqual('0'); + expect(areaLines[1].getAttribute('opacity')).toEqual('0.1'); + expect(areaLines[2].getAttribute('opacity')).toEqual('0.1'); + }, + ); + + testWithoutWait( + 'Should highlight the corresponding Legend on mouse over on legends', + AreaChart, + { data: chartData }, + container => { + const legend1 = screen.queryByText('legend1'); + expect(legend1).toBeDefined(); + fireEvent.mouseOver(legend1!); + // Assert + expect(screen.queryByText('legend2')).toHaveStyle('opacity: 0.67'); + }, + ); + + testWithoutWait( + 'Should select legend on single mouse click on legends', + AreaChart, + { data: chartData, hideLegend: false }, + container => { + const legend = screen.queryByText('legend1'); + expect(legend).toBeDefined(); + fireEvent.click(legend!); + // Assert + expect(getById(container, /graph-areaChart/i)[1]).toHaveAttribute('fill-opacity', '0.1'); + const firstLegend = screen.queryByText('legend1')?.closest('button'); + expect(firstLegend).toHaveAttribute('aria-selected', 'true'); + expect(firstLegend).toHaveAttribute('tabIndex', '0'); + }, + ); + + testWithoutWait( + 'Should deselect legend on double mouse click on legends', + AreaChart, + { data: chartData, hideLegend: false }, + container => { + const legend = screen.queryByText('legend1'); + expect(legend).toBeDefined(); + + //single click on first legend + fireEvent.click(legend!); + expect(getById(container, /graph-areaChart/i)[1]).toHaveAttribute('fill-opacity', '0.1'); + const firstLegend = screen.queryByText('legend1')?.closest('button'); + expect(firstLegend).toHaveAttribute('aria-selected', 'true'); + expect(firstLegend).toHaveAttribute('tabIndex', '0'); + // double click on same first legend + fireEvent.click(legend!); + // Assert + expect(firstLegend).toHaveAttribute('aria-selected', 'false'); + }, + ); +}); + +describe('Area chart - Subcomponent callout', () => { + testWithWait( + 'Should show the callout over the area on mouse over', + AreaChart, + { data: chartData, calloutProps: { doNotLayer: true } }, + container => { + // Arrange + const areas = getById(container, /graph-areaChart/i); + fireEvent.mouseOver(areas[0]); + // Assert + expect(getById(container, /toolTipcallout/i)).toBeDefined(); + }, + ); + + testWithWait( + 'Should show the stacked callout over the are on mouse over', + AreaChart, + { data: chartData, calloutProps: { doNotLayer: true } }, + container => { + // Arrange + const areas = getById(container, /graph-areaChart/i); + expect(areas).toHaveLength(3); + fireEvent.mouseOver(areas[0]); + // Assert + expect(getByClass(container, /calloutlegendText/i)).toBeDefined(); + expect(getByClass(container, /calloutlegendText/i)).toHaveLength(3); + }, + ); + + testWithWait( + 'Should show the custom callout over the Area on mouse over', + AreaChart, + { + data: chartData, + calloutProps: { doNotLayer: true }, + onRenderCalloutPerDataPoint: (props: IAreaChartProps) => + props ? ( +
+

Custom Callout Content

+
+ ) : null, + }, + container => { + const areas = getById(container, /graph-areaChart/i); + fireEvent.mouseOver(areas[0]); + // Assert + expect(getById(container, /toolTipcallout/i)).toBeDefined(); + }, + ); +}); + +describe('Area chart - Subcomponent xAxis Labels', () => { + testWithWait( + 'Should show the x-axis labels tooltip when hovered', + AreaChart, + { data: chartDataWithDates, showXAxisLablesTooltip: true }, + container => { + const xAxisLabels = getById(container, /showDots/i); + fireEvent.mouseOver(xAxisLabels[0]); + // Assert + expect(getById(container, /showDots/i)[0]!.textContent!).toEqual('Jan ...'); + }, + undefined, + beforeAll, + ); + + testWithWait( + 'Should show rotated x-axis labels', + AreaChart, + { data: chartDataWithDates, rotateXAxisLables: true }, + container => { + // Assert + expect(getByClass(container, /tick/i)[0].getAttribute('transform')).toContain('translate(39.03658536585366,0)'); + }, + undefined, + beforeAll, + ); +}); + +describe('Screen resolution', () => { + const originalInnerWidth = global.innerWidth; + const originalInnerHeight = global.innerHeight; + afterEach(() => { + global.innerWidth = originalInnerWidth; + global.innerHeight = originalInnerHeight; + act(() => { + global.dispatchEvent(new Event('resize')); }); }); + + testWithWait( + 'Should remain unchanged on zoom in', + AreaChart, + { data: chartData, rotateXAxisLables: true, width: 300, height: 300 }, + container => { + // Arrange + global.innerWidth = window.innerWidth / 2; + global.innerHeight = window.innerHeight / 2; + act(() => { + global.dispatchEvent(new Event('resize')); + }); + // Assert + expect(container).toMatchSnapshot(); + }, + ); + + testWithWait( + 'Should remain unchanged on zoom out', + AreaChart, + { data: chartData, rotateXAxisLables: true, width: 300, height: 300 }, + container => { + // Arrange + global.innerWidth = window.innerWidth * 2; + global.innerHeight = window.innerHeight * 2; + act(() => { + global.dispatchEvent(new Event('resize')); + }); + // Assert + expect(container).toMatchSnapshot(); + }, + ); +}); + +test('Should reflect theme change', () => { + // Arrange + const { container } = render( + + + , + ); + // Assert + expect(container).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 516d988614d009..beb2e89879ac67 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 @@ -3150,7 +3150,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1` `; -exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = ` +exports[`AreaChart snapShot testing renders hideLegend correctly 1`] = `
- -`; - -exports[`Area chart rendering Should re-render the Area chart with data 2`] = ` +exports[`Area chart rendering Should render the area chart with date x-axis data 1`] = `
-
-
- - - - - - -`; - -exports[`AreaChart - mouse events Should render callout correctly 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`] = ` -