@fluentui/react-charting 5.19.2 → 5.19.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/CHANGELOG.json +52 -1
  2. package/CHANGELOG.md +21 -2
  3. package/dist/react-charting.js +1 -1
  4. package/dist/react-charting.min.js +1 -1
  5. package/lib/components/CommonComponents/CartesianChart.base.d.ts +1 -0
  6. package/lib/components/CommonComponents/CartesianChart.base.js +11 -2
  7. package/lib/components/CommonComponents/CartesianChart.base.js.map +1 -1
  8. package/lib/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.js +1 -0
  9. package/lib/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.js.map +1 -1
  10. package/lib/utilities/utilities.d.ts +4 -3
  11. package/lib/utilities/utilities.js +11 -6
  12. package/lib/utilities/utilities.js.map +1 -1
  13. package/lib/version.js +1 -1
  14. package/lib/version.js.map +1 -1
  15. package/lib-amd/components/CommonComponents/CartesianChart.base.d.ts +1 -0
  16. package/lib-amd/components/CommonComponents/CartesianChart.base.js +11 -2
  17. package/lib-amd/components/CommonComponents/CartesianChart.base.js.map +1 -1
  18. package/lib-amd/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.js +1 -0
  19. package/lib-amd/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.js.map +1 -1
  20. package/lib-amd/utilities/utilities.d.ts +4 -3
  21. package/lib-amd/utilities/utilities.js +11 -6
  22. package/lib-amd/utilities/utilities.js.map +1 -1
  23. package/lib-amd/version.js +1 -1
  24. package/lib-amd/version.js.map +1 -1
  25. package/lib-commonjs/components/CommonComponents/CartesianChart.base.d.ts +1 -0
  26. package/lib-commonjs/components/CommonComponents/CartesianChart.base.js +11 -2
  27. package/lib-commonjs/components/CommonComponents/CartesianChart.base.js.map +1 -1
  28. package/lib-commonjs/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.js +1 -0
  29. package/lib-commonjs/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.js.map +1 -1
  30. package/lib-commonjs/utilities/utilities.d.ts +4 -3
  31. package/lib-commonjs/utilities/utilities.js +11 -6
  32. package/lib-commonjs/utilities/utilities.js.map +1 -1
  33. package/lib-commonjs/version.js +1 -1
  34. package/lib-commonjs/version.js.map +1 -1
  35. package/package.json +4 -4
  36. package/docs/TechnicalDetails.md +0 -88
  37. package/docs/TestPlans/AreaChart/ComponentTests.md +0 -61
  38. package/docs/TestPlans/BasicDonutChart.png +0 -0
  39. package/docs/TestPlans/DonutChart/ComponentTests.md +0 -35
  40. package/docs/TestPlans/GaugeChart/ComponentTests.md +0 -31
  41. package/docs/TestPlans/GroupedVerticalBarChart/ComponentTests.md +0 -62
  42. package/docs/TestPlans/HorizontalBarChart/ComponentTests.md +0 -51
  43. package/docs/TestPlans/LineChart/ComponentTests.md +0 -63
  44. package/docs/TestPlans/MultiStackedBarChart/componentTests.md +0 -56
  45. package/docs/TestPlans/StackedBarChart/ComponentTests.md +0 -64
  46. package/docs/TestPlans/TestingGuide.md +0 -13
  47. package/docs/TestPlans/Utilities/UnitTests.md +0 -16
  48. package/docs/TestPlans/VerticalBarChart/ComponentTests.md +0 -65
  49. package/docs/TestPlans/VerticalStackedBarChart/ComponentTests.md +0 -73
  50. package/docs/colors.md +0 -149
  51. package/docs/implementing-2-to-1-spacing.md +0 -215
package/docs/TestPlans/AreaChart/ComponentTests.md DELETED
@@ -1,61 +0,0 @@
1
- **Area Chart – Component test plan**
2
-
3
- **Sub-components: Area, x-axis, y-axis and Legend**
4
-
5
- 1. **Line: Area data, Area color (multi colors), Area label (show/hide)**
6
- 1. **Legends: show/hide legends, highlight the corresponding Area on legend hover**
7
- 1. **Callout: Default/custom callout**
8
- 1. **Labels: x-Axis labels, y-Axis labels**
9
-
10
- | **Test steps** | **Validation** | **Tool used** |
11
- | :-------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------: | :-----------: |
12
- | Test 1: [Snapshot testing] | | |
13
- | - With only data prop, numerical data on x-axis. | Renders Area chart correctly | RTL |
14
- | - With only data prop, date data on x-axis. | Renders Area chart correctly | RTL |
15
- | - With only data prop, string data on x-axis. | Should not render area chart | Pending |
16
- | - With HideLegend prop set to “true” | Should hide legends | Enzyme |
17
- | - With HideTooltip prop set to “true” | Should hide the tooltip in chart | Enzyme |
18
- | - 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 |
19
- | - With ShowXAxisLablesTooltip set to “true” | Should truncate x axis labels and show tooltip on x axis labels | Enzyme |
20
- | - With WrapXAxisLables set to “true” | Should wrap x axis label values | Enzyme |
21
- | - With yAxisTickFormat set to “%d” | <p>Should render the y-axis ticks in the format specified</p><p></p> | Enzyme |
22
- | - With single point | Should render Area chat with single point | Enzyme |
23
- | - With Default color | Should render with default colors when line color not provided | Enzyme |
24
- | - With specific colors | Should render areas with specified colors | RTL |
25
- | - With optimizeLargeData set to “true” | Should not render circles when optimizeLargeData is true | Enzyme |
26
- | Test 2: Basic props testing | | |
27
- | - HideLegend prop set to “true” | Should not mount legend when hideLegend is true | Enzyme |
28
- | - HideLegend prop set to “false” | Should mount legend when hideLegend is false | Enzyme |
29
- | - HideTooltip prop set to “true” | Should not mount callout when hideTootip is true | Enzyme |
30
- | - HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme |
31
- | - onRenderCalloutPerStack prop is not given | Should not render onRenderCalloutPerStack | Enzyme |
32
- | - onRenderCalloutPerDataPoint is given | Should render onRenderCalloutPerDataPoint | Enzyme |
33
- | - onRenderCalloutPerDataPoint is not given | Should not render onRenderCalloutPerDataPoint | Enzyme |
34
- | Test 3: Render calling with respective to props | | |
35
- | - No prop changes: Mount Area chart and then set the same props again | Render function should have been called twice | Enzyme |
36
- | - Prop changes: Mount Area chart and then set some other prop | Render function should have been called twice | Enzyme |
37
- | Test 4: Mouse events | | |
38
- | - Mouse over on Area | Should render callout correctly on mouseover | Enzyme |
39
- | - Mouse move from one area to other area | Should render callout correctly on mouse move | Enzyme |
40
- | - Mouse over on a area with customized callout | Should render customized callout on mouseover | Enzyme |
41
- | - Customized callout on area from one area to other area | Should render customized callout for stack on mouseover | Enzyme |
42
- | Test 5: Render empty chart aria label div when chart is empty | | |
43
- | - Area chart mounted with non-empty data | No empty chart aria label div rendered | Enzyme |
44
- | - Area chart mounted with empty data | Empty chart aria label div rendered | Enzyme |
45
- | Test 6: [Sub-Component]: Legends | | |
46
- | - Hover mouse over area legends | Should reduce the opacity of the other Areas | RTL |
47
- | - 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 |
48
- | - Hover mouse over area legends | Should reduce the opacity of the other legends | RTL |
49
- | - Single mouse click on legends | Should select legend on single mouse click on respective legend | RTL |
50
- | - Double mouse click on legends | Should deselect legend on double mouse click on respective legend | RTL |
51
- | Test 7: [Sub-Component]: Callout | | |
52
- | - Hover mouse over a single area | Should show the default callout over that Area | RTL |
53
- | - Hover mouse over a stacked area | Should show the default stacked callout over that Area | RTL |
54
- | - Specify custom callout and hover mouse over a Area | Should show the custom callout over that Area | RTL |
55
- | Test 8: [Sub-Component]: x-axis labels | | |
56
- | - Truncate x-axis labels | Should show the x-axis labels tooltip when hovered | RTL |
57
- | - Rotate x-axis labels | Should rotate the x-axis labels by 39 degrees | RTL |
58
- | Test 9: [Sub-Component]: Screen resolution | | |
59
- | - Increase the screen resolution (zoom in) | Should remain unchanged on zoom in | RTL |
60
- | - Decrease the screen resolution (zoom out) | Should remain unchanged on zoom out | RTL |
61
- | Test 10: Theme changed to Dark Theme | Should reflect theme change | RTL |
package/docs/TestPlans/BasicDonutChart.png DELETED
Binary file
package/docs/TestPlans/DonutChart/ComponentTests.md DELETED
@@ -1,35 +0,0 @@
1
- <div align="center">
2
-
3
- # Component testing - Donut chart test plan
4
-
5
- ![Alt text](BasicDonutChart.png)
6
-
7
- ### Subcomponents: Pie and Legend
8
-
9
- ### Library used: jest and (enzyme or react testing library)
10
-
11
- </div>
12
-
13
- | Test case | Execution steps | Validation steps | Library used |
14
- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
15
- | Test case 1: [Snapshot testing] [Component] | <ul><li>Renders donut chart with data.</li></ul> | Donut chart renders correctly | Enzyme |
16
- | Test case 2: [Snapshot testing] [Individual Props] | Renders donut chart with: <ul><li>HideTooltip prop set to “true”.</li></ul> | Donut chart renders correctly | Enzyme |
17
- | | <ul><li>HideLegend prop set to “true”.</li></ul> | Donut chart renders correctly | Enzyme |
18
- | | <ul><li>EnabledLegendsWrapLines prop set to “true”.</li></ul> | Donut chart renders correctly | Enzyme |
19
- | | <ul><li>ValueInsideDonut set to a string / number.</li></ul> | Donut chart renders correctly | Enzyme |
20
- | | <ul><li>HideLabels prop set to "false".</li></ul> | Donut chart renders correctly | Enzyme |
21
- | | <ul><li>HideLabels prop set to "false" and ShowLabelsInPercent prop set to "true".</li></ul> | Donut chart renders correctly | Enzyme |
22
- | Test case 3: [Specific DOM elements] Renders individual elements on a prop change: | <ul><li>HideLegend prop is set to “false”.</li></ul> | Legend mounts correctly | Enzyme |
23
- | | <ul><li>HideTootip prop is set to “false”.</li></ul> | Callout mounts correctly | Enzyme |
24
- | | <ul><li>onRenderCalloutPerStack prop is not given.</li></ul> | Should not render onRenderCalloutPerStack | Enzyme |
25
- | | <ul><li>onRenderCalloutPerDataPoint prop is given.</li></ul> | Should render onRenderCalloutPerDataPoint correctly | Enzyme |
26
- | Test case 4: [Mouse events – Donut chart] Renders individual elements on mouse events: | <ul><li>On mouse over on the donut chart.</li></ul> | Should render callout | Enzyme |
27
- | | <ul><li>On mouse move on Pie 1 (step 1) -> mouse leave (step 2) -> mouse move on Pie 2 (step 3).</li></ul> | Html in step 1 should not be the same as in step 3 | Enzyme |
28
- | | <ul><li>On mouse over with onRenderCalloutPerDataPoint prop provided.</li></ul> | Should render the custom callout | Enzyme |
29
- | | <ul><li>On mouse over, followed by mouse leave on callout.</li></ul> | On mouse over, callout should be defined, on mouse leave, callout should disappear. | Enzyme |
30
- | Test case 5: [Mouse events – Legends] Renders individual elements on mouse events: | <ul><li>On mouse over on legends.</li></ul> | Should highlight the corresponding pie | RTL |
31
- | | <ul><li>On mouse over on legends.</li></ul> | Should change the value inside donut with the legend value | Enzyme |
32
- | | <ul><li>On click on Pie.</li></ul> | Should highlight the corresponding pie with aria-selected set to “true” and tabIndex set to 0. | RTL |
33
- | | <ul><li>On mouse out after mouse over on first legend.</li></ul> | Should have opacity 0.1 for second Pie initially (during mouseOver on first legend) and opacity set to 1 for both the Pies on mouse out. | RTL |
34
- | Test case 6: [Keyboard events – Donut chart] Renders individual elements on keyboard events: | <ul><li>On focus on a Pie.</li></ul> | Should render the corresponding callout | RTL |
35
- | | <ul><li>On blur on a Pie.</li></ul> | Should remove focus from the corresponding Pie | RTL |
package/docs/TestPlans/GaugeChart/ComponentTests.md DELETED
@@ -1,31 +0,0 @@
1
- # Component testing - Gauge chart test plan
2
-
3
- ## Snapshot testing
4
-
5
- | Test case | Validation | Tool used |
6
- | --------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | --------- |
7
- | When only segments and chartValue props are set | Should render gauge chart correctly | Enzyme |
8
- | When hideMinMax prop is set to true | Should not render the min and max values of the gauge | Enzyme |
9
- | When chartTitle prop is set | Should render the chart title correctly | Enzyme |
10
- | When sublabel prop is set | Should render the sublabel correctly | Enzyme |
11
- | When the layout direction is RTL | Should render gauge chart correctly | Enzyme |
12
- | When hideLegend prop is set to true | Should not render the legends | Enzyme |
13
- | When chartValueFormat is set to ‘fraction’ | Should render the chart value in fraction format | Enzyme |
14
- | When a segment has no color | Should render a color from DataVizPalette for the segment | Enzyme |
15
- | When the total size of the segments is less than the difference between maxValue and minValue props | Should render a placeholder segment | Enzyme |
16
- | When the theme is dark | Should render gauge chart correctly | Enzyme |
17
-
18
- ## Testing event listeners
19
-
20
- | Test case | Validation | Tool used |
21
- | ------------------------------------------------------------------- | -------------------------------------------------------------------------- | --------- |
22
- | When the mouse moves over a segment and then leaves the chart | Should show a callout and hide it respectively | RTL |
23
- | When a segment is focused and then blurred | Should show an outline around the segment and hide it respectively | RTL |
24
- | When the mouse moves over the chart value and then leaves the chart | Should show a callout and hide it respectively | RTL |
25
- | When the mouse moves over the needle and then leaves the chart | Should show a callout and hide it respectively | RTL |
26
- | When the needle is focused and then blurred | Should show a callout and hide it respectively | RTL |
27
- | When the mouse moves over a legend and then moves out of the legend | Should highlight the corresponding segment and unhighlight it respectively | RTL |
28
- | When a legend is clicked once and then clicked again | Should highlight the corresponding segment and unhighlight it respectively | RTL |
29
- | When the length of the chart value exceeds the max width | Should truncate the chart value with ellipsis | RTL |
30
- | When the chart resizes | Should update the font size of the chart value | RTL |
31
- | When hideTooltip prop is set to true | Should not show a callout | RTL |
package/docs/TestPlans/GroupedVerticalBarChart/ComponentTests.md DELETED
@@ -1,62 +0,0 @@
1
- **Grouped Vertical Bar Chart – Component test plan**
2
-
3
- **Sub-components: Bar, Legends, Callout, Labels**
4
-
5
- 1. **Bar: Bar data, Bar color, bar label**
6
- 1. **Legends: show/hide legends, highlight the corresponding bar on legend hover**
7
- 1. **Callout: Default/custom callout**
8
- 1. **Labels: x-Axis labels default/rotated**
9
-
10
- | **Test steps** | **Validation** | **Tool used** |
11
- | :-----------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | :-----------: |
12
- | Test 1: [Snapshot testing] | | |
13
- | - With only data prop, string data on x-axis. | Renders GroupedVerticalBar chart correctly | Enzyme |
14
- | - With HideLegend prop set to “true” | Should hide legends | Enzyme |
15
- | - With HideTooltip prop set to “true” | Should hide the tooltip in chart | Enzyme |
16
- | - 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 |
17
- | - With ShowXAxisLablesTooltip set to “true” | Should truncate x axis labels and show tooltip on x axis labels | Enzyme |
18
- | - With WrapXAxisLables set to “true” | Should wrap x axis label values | Enzyme |
19
- | - With yAxisTickFormat set to “%d” | <p>Should render the y-axis ticks in the format specified</p><p></p> | Enzyme |
20
- | - With hideLabels set to “true” | Should hide bar labels | RTL |
21
- | - With yAxisTickCount | Should render y axis with specific tick count | RTL |
22
- | Test 2: Basic props testing | | |
23
- | - HideLegend prop set to “true” | Should not mount legend when hideLegend is true | Enzyme |
24
- | - HideLegend prop set to “false” | Should mount legend when hideLegend is false | Enzyme |
25
- | - HideTooltip prop set to “true” | Should not mount callout when hideTootip is true | Enzyme |
26
- | - HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme |
27
- | - onRenderCalloutPerDataPoint is given | Should render onRenderCalloutPerDataPoint | Enzyme |
28
- | - onRenderCalloutPerDataPoint is not given | Should not render onRenderCalloutPerDataPoint | Enzyme |
29
- | Test 3: Render calling with respective to props | | |
30
- | - No prop changes: Mount grouped vertical bar chart and then set the same props again | Render function should have been called twice | Enzyme |
31
- | - Prop changes: Mount grouped vertical bar chart and then set some other prop | Render function should have been called twice | Enzyme |
32
- | Test 4: Mouse events | | |
33
- | - Mouse over on a bar | Should render callout correctly on mouseover | Enzyme |
34
- | - Mouse move from one bar to other bar | Should render callout correctly on mouse move | Enzyme |
35
- | - Mouse over on a bar with customized callout | Should render customized callout on mouseover | Enzyme |
36
- | Test 6: [Sub-Component]: Bar | | |
37
- | - Specify bar color | Should render bar with the specified color | RTL |
38
- | - with custom accessibility data | Should render bars with custom accessibility data | RTL |
39
- | Test 7: [Sub-Component]: Legends | | |
40
- | - Hide legends | Should not show any rendered legends | RTL |
41
- | - Hover mouse over bar legends | Should reduce the opacity of the other bars | RTL |
42
- | - Mouse move from one Legend to another Legend | Should reset the opacity of the lines on mouse leave a bar legend | RTL |
43
- | - Single mouse click on bar legends | Should select legend on single mouse click on respective legend | RTL |
44
- | - Double mouse click on bar legends | Should deselect legend on double mouse click on respective legend | RTL |
45
- | Test 8: [Sub-Component]: Callout | | |
46
- | - Hover mouse over a bar | Should show the default callout over that bar | RTL |
47
- | - Set isCalloutForStack is “true” and mouse over on a bar | Should show the default stacked callout over that bar | RTL |
48
- | - Set isCalloutForStack is “false” and mouse over on a bar | Should show the single callout over that bar | RTL |
49
- | - Specify custom callout and hover mouse over a bar | Should show the custom callout over that bar | RTL |
50
- | Test 9: [Sub-Component]: x-axis labels | | |
51
- | - Truncate x-axis labels | Should show the x-axis labels tooltip when hovered | RTL |
52
- | - Rotate x-axis labels | Should rotate the x-axis labels by 45 degrees | RTL |
53
- | - Set showXAxisLablestoolTip to “true” and mouse over on label | Should show XAxis labels tooltip when mouse over on label | RTL |
54
- | Test 10: [Sub-Component]: Screen resolution | | |
55
- | - Increase the screen resolution (zoom in) | Should remain unchanged on zoom in | RTL |
56
- | - Decrease the screen resolution (zoom out) | Should remain unchanged on zoom out | RTL |
57
- | Test 11: Theme changed to Dark Theme | Should reflect theme change | RTL |
58
- | Test 10: Grouped vertical bar chart re-rendering | | |
59
- | - Update chart data | Should re-render chart when data is updated | RTL |
60
- | Test 11: Grouped vertical bar chart with empty/proper data | | |
61
- | - Chart with Empty data | Should render chart with Empty chart are label | Enzyme |
62
- | - Chart with proper data | Should not render chart with empty chart are label | Enzyme |
package/docs/TestPlans/HorizontalBarChart/ComponentTests.md DELETED
@@ -1,51 +0,0 @@
1
- **Horizontal Bar Chart – Component test plan**
2
-
3
- **Sub-components: Bar, Callout, Labels, Benchmark**
4
-
5
- 1. **Bar: Bar data, Bar color (single), bar label(left and right)**
6
- 1. **Callout: Default/custom callout**
7
- 1. **Labels: Default/Custom labels**
8
-
9
- | **Test steps** | **Validation** | **Tool used** |
10
- | :---------------------------------------------------------------------------: | :------------------------------------------------------------: | :-----------: |
11
- | Test 1: [Snapshot testing] | | |
12
- | - With only data prop, string data on x-axis. | Should render horizontal bar chart legend with string data | RTL |
13
- | - With variant set to “absolute scale” | Should render absolute scale variant correctly | Enzyme |
14
- | - With variant set to “absolute scale” and hide labels set to “true” | Should not render bar labels in absolute scale variant | Enzyme |
15
- | Test 2: Basic props testing | | |
16
- | - HideTooltip prop set to “true” | Should not mount callout when hideTootip is true | Enzyme |
17
- | - HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme |
18
- | - onRenderCalloutPerHorizantalBar prop is not given | Should not render onRenderCalloutPerHorizantalBar | Enzyme |
19
- | - onRenderCalloutPerHorizantalBar is given | Should render onRenderCalloutPerHorizantalBar | Enzyme |
20
- | - HideLabels prop set to “true” | Should not render bar labels when hideLabels is true | RTL |
21
- | - Legend value set to “x” | Should display legend/left side label with specified data | RTL |
22
- | Test 3: Render calling with respective to props | | |
23
- | - No prop changes: Mount HorizontalBarChart and then set the same props again | Render function should have been called twice | Enzyme |
24
- | - Prop changes: Mount HorizontalBarChart chart and then set some other prop | Render function should have been called twice | Enzyme |
25
- | Test 4: Mouse events | | |
26
- | - Mouse over on a bar | Should render callout correctly on mouseover | Enzyme |
27
- | - Mouse move from one bar to other bar | Should render callout correctly on mouse move | RTL |
28
- | - Mouse over on a bar with customized callout | Should render customized callout on mouseover | RTL |
29
- | Test 5: [Sub-Component]: Bar | | |
30
- | - Specify bar color | Should render bar with the specified color | RTL |
31
- | - setbarHeight to “x” | Should render bars with specified height | RTL |
32
- | - set variant to “absolute scale” | Should render bars right side label inline with bar | RTL |
33
- | - set variant to “part to whole” | Should render bars right side label on top of bar | RTL |
34
- | - set chartDataMode to “fraction” | Should render bar right side label value as a fractional one | RTL |
35
- | - set chartDataMode to “percentage” | Should render bar right side label value as a percentage value | RTL |
36
- | - set barChartCustomData to “x” | Should show custom data on bar right side label | RTL |
37
- | Test 6: [Sub-Component]: Benchmark | | |
38
- | - Specify benchmark data | Should render bars with benchmark symbol | RTL |
39
- | Test 7: [Sub-Component]: Callout | | |
40
- | - Hover mouse over a bar | Should call the handler on mouse over bar | RTL |
41
- | - Hover mouse over a bar to display callout | Should show the default callout over that bar | RTL |
42
- | - Specify custom callout and hover mouse over a bar | Should show the custom callout over that bar | RTL |
43
- | Test 8: [Sub-Component]: Screen resolution | | |
44
- | - Increase the screen resolution (zoom in) | Should remain unchanged on zoom in | RTL |
45
- | - Decrease the screen resolution (zoom out) | Should remain unchanged on zoom out | RTL |
46
- | Test 9: Theme changed to Dark Theme | Should reflect theme change | RTL |
47
- | Test 10: Horizontal bar chart re-rendering | | |
48
- | - Update chart data | Should re-render chart when data is updated | RTL |
49
- | Test 11: Horizontal bar chart with empty data | | |
50
- | - Chart with Empty data | Should render chart with Empty chart are label | Enzyme |
51
- | - Chart with proper data | Should not render chart with empty chart are label | Enzyme |
package/docs/TestPlans/LineChart/ComponentTests.md DELETED
@@ -1,63 +0,0 @@
1
- **Line Chart – Component test plan**
2
-
3
- **Sub-components: Line, x-axis, y-axis, Event, Time Range, Callout, Drop down and Legend**
4
-
5
- 1. **Line: Line data, Line color (multi colors), Line label (show/hide)**
6
- 1. **Legends: show/hide legends, highlight the corresponding line on legend hover**
7
- 1. **Callout: Default/custom callout**
8
- 1. **Labels: x-Axis labels**
9
-
10
- | **Test steps** | **Validation** | **Tool used** |
11
- | :---------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | :-----------: |
12
- | Test 1: [Snapshot testing] | | |
13
- | - With only data prop, numerical data on x-axis. | Renders line chart correctly | RTL |
14
- | - With only data prop, date data on x-axis. | Renders line chart correctly | RTL |
15
- | - With only data prop, string data on x-axis. | Should not render area chart | Pending |
16
- | - With allowMultipleShapesForPoints set to “true” | Should render line chart with multiple shapes for chart points | RTL |
17
- | - With HideLegend prop set to “true” | Should hide legends | Enzyme |
18
- | - With HideTooltip prop set to “true” | Should hide the tooltip in chart | Enzyme |
19
- | - 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 |
20
- | - With ShowXAxisLablesTooltip set to “true” | Should truncate x axis labels and show tooltip on x axis labels | Enzyme |
21
- | - With WrapXAxisLables set to “true” | Should wrap x axis label values | Enzyme |
22
- | - With yAxisTickFormat set to “%d” | <p>Should render the y-axis ticks in the format specified</p><p></p> | Enzyme |
23
- | - With canSelectMultipleLegends set to “true” | Should select multiple legends | RTL |
24
- | Test 2: Basic props testing | | |
25
- | - HideLegend prop set to “true” | Should not mount legend when hideLegend is true | Enzyme |
26
- | - HideLegend prop set to “false” | Should mount legend when hideLegend is false | Enzyme |
27
- | - HideTooltip prop set to “true” | Should not mount callout when hideTootip is true | Enzyme |
28
- | - HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme |
29
- | Test 3: Render calling with respective to props | | |
30
- | - No prop changes: Mount line chart and then set the same props again | Render function should have been called twice | Enzyme |
31
- | - Prop changes: Mount line chart and then set some other prop | Render function should have been called twice | Enzyme |
32
- | Test 4: Mouse events | | |
33
- | - Mouse over on a line | Should render callout correctly on mouseover | Enzyme |
34
- | - Mouse move from one line to other line | Should render callout correctly on mouse move | Enzyme |
35
- | - Mouse over on a line with customized callout | Should render customized callout on mouseover | Enzyme |
36
- | - Customized callout on a line | Should render customized callout correctly on mouseover | Enzyme |
37
- | - Customized callout on a line from one line to other line | Should render customized callout for stack on mouseover | Enzyme |
38
- | Test 5: Render empty chart aria label div when chart is empty | | |
39
- | - Line chart mounted with non-empty data | No empty chart aria label div rendered | Enzyme |
40
- | - Line chart mounted with empty data | Empty chart aria label div rendered | Enzyme |
41
- | Test 6: Render empty chart calling with respective to props | | |
42
- | - 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 |
43
- | - prop changes: Mount line chart with empty data and then set the props | Render function should have been called 3 times | Enzyme |
44
- | Test 7: [Sub-Component]: Line | | |
45
- | - Specify lines with specified colors | Should render lines with the color provided in data | RTL |
46
- | - Specify line data with gaps | Should render the lines with specified gaps | RTL |
47
- | Test 8: [Sub-Component]: Legends | | |
48
- | - Hover mouse over line legends | Should highlight the corresponding line on mouse over on legend | RTL |
49
- | - Mouse leave on legends | Should reset the highlighted line on mouse leave on legends | RTL |
50
- | - Single mouse click on legends | Should select legend on single mouse click on respective legend | RTL |
51
- | - Double mouse click on legends | Should deselect legend on double mouse click on respective legend | RTL |
52
- | Test 9: [Sub-Component]: Time Range(Color fill bars) | | |
53
- | - Line chart with time range | Should render time range with specified data | RTL |
54
- | - Single mouse click on time range legend | Should highlight corresponding time range on legend click | RTL |
55
- | Test 10: [Sub-Component]: x-axis labels | | |
56
- | - Truncate x-axis labels | Should show the x-axis labels tooltip when hovered | RTL |
57
- | - Rotate x-axis labels | Should rotate the x-axis labels by 45 degrees | RTL |
58
- | Test 11: [Sub-Component]: Event | | |
59
- | - Line chart with Events data | Should render line chart with events | RTL |
60
- | Test 12: [Sub-Component]: Screen resolution | | |
61
- | - Increase the screen resolution (zoom in) | Should remain unchanged on zoom in | RTL |
62
- | - Decrease the screen resolution (zoom out) | Should remain unchanged on zoom out | RTL |
63
- | Test 13: Theme changed to Dark Theme | Should reflect theme change | RTL |
package/docs/TestPlans/MultiStackedBarChart/componentTests.md DELETED
@@ -1,56 +0,0 @@
1
- **Multi stacked bar Chart – Component test plan**
2
-
3
- **Sub-components: Bar, Legends, Callout**
4
-
5
- 1. **Bar: bar data, bar variants like ‘part-to-whole’ and ‘absolute-scale’**
6
- 1. **Legends: show/hide legends, highlight the corresponding bar on legend hover**
7
- 1. **Callout: Default/custom callout**
8
- 1. **Screen resolution changes, theme changes**
9
-
10
- | **Test steps** | **Validation** | **Tool used** |
11
- | :--------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------: |
12
- | Test 1: [Snapshot testing] | | |
13
- | - With only data prop, non-empty data | Renders multi stacked bar chart correctly | Enzyme |
14
- | - With empty data | Renders multi stacked bar chart correctly | RTL |
15
- | - With HideLegend prop set to “true” | Should hide legends | Enzyme |
16
- | - With HideTooltip prop set to “true” | Should hide the tooltip in chart | Enzyme |
17
- | - With HideRatio set to “true” | Should not show ratio on top of multi stacked bar chart | Enzyme |
18
- | - With HideDenominator set to “true” | Should not show the denominator for the ratio above the chart | Enzyme |
19
- | - With variant set to “AbsoluteScale” | Should render absolute-scale variant correctly | Enzyme |
20
- | - With variant set to “AbsoluteScale” and “HideLabels” set to “true” | Should not render bar labels in absolute-scale variant | Enzyme |
21
- | Test 2: Basic props testing | | |
22
- | - HideLegend prop set to “false” | Should mount legend when hideLegend is false | Enzyme |
23
- | - HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme |
24
- | - HideDenominator set to “false” | Should not mount callout | Enzyme |
25
- | - onRenderCalloutPerDataPoint is given | Should render onRenderCalloutPerDataPoint | Enzyme |
26
- | - onRenderCalloutPerDataPoint is not given | Should not render onRenderCalloutPerDataPoint | Enzyme |
27
- | Test 3: Render calling with respective to props | | |
28
- | - No prop changes: Mount multi stacked bar chart and then set the same props again | Render function should have been called twice | Enzyme |
29
- | - Prop changes: Mount multi stacked bar chart and then set the some other prop | Render function should have been called twice | Enzyme |
30
- | Test 4: Mouse events | | |
31
- | - Mouse over on a bar | Should render callout correctly on mouseover | Enzyme |
32
- | - Mouse over on a bar with customized callout | Should render customized callout on mouseover | Enzyme |
33
- | - Mouse move on a bar | Should render callout correctly on mousemove | Enzyme |
34
- | Test 5: Render empty chart aria label div when chart is empty | | |
35
- | - Multi stacked bar chart mounted with non-empty data | No empty chart aria label div rendered | Enzyme |
36
- | - Multi stacked bar chart mounted with empty data | Empty chart aria label div rendered | Enzyme |
37
- | Test 6: [Sub-Component]: Multi stacked bar | | |
38
- | - Specify bar height | Should render the bar with the given height | RTL |
39
- | - With variant set to “PartToWhole” | Should render the variant correctly and for a single bar, the sum of the width of the rectangles should equal to 100%. | RTL |
40
- | - With variant set to “AbsoluteScale” | Should render the variant correctly and for a single bar with the highest width, the sum of the width of the rectangles should equal to 100% and for the rest of the bars, the sum should be < 100%. | RTL |
41
- | - Localize the numbers of the bars with a given culture | Should render the bars with the numbers localized in the given culture | E2E |
42
- | - Specify the href for the multi stacked bar | Should redirect to the Url to upon clicking on the multi stacked bar chart | E2E |
43
- | Test 7: [Sub-Component]: Legends | | |
44
- | - Hover mouse over bar legends | Should reduce the opacity of the other bars and their legends | RTL |
45
- | - Mouse out from a bar legend | Should change the opacity of the other bars and their legends on mouse out action from a bar legend | RTL |
46
- | - Click on a bar legend | Should reduce the opacity of the other bars and their legends on mouse click a bar legend | RTL |
47
- | - Legends overflow scenario | Overflow button should contain the additional legends | E2E |
48
- | - Placeholder data scenario | Should not show any legends when a datapoint is marked as placeholder | RTL |
49
- | Test 8: [Sub-Component]: Callout | | |
50
- | - Hover mouse over a bar | Should call the handler on mouse over bar | RTL |
51
- | - Hover mouse over a bar | Should show the default callout over that bar | RTL |
52
- | - Specify custom callout and hover mouse over a bar | Should show the custom callout over that bar | RTL |
53
- | Test 9: [Sub-Component]: Screen resolution | | |
54
- | - Increase the screen resolution (zoom in) | Should remain unchanged on zoom in | RTL |
55
- | - Decrease the screen resolution (zoom out) | Should remain unchanged on zoom out | RTL |
56
- | Test 10: Theme changed to Dark Theme | Should reflect theme change | RTL |
package/docs/TestPlans/StackedBarChart/ComponentTests.md DELETED
@@ -1,64 +0,0 @@
1
- **Stacked Bar Chart – Component test plan**
2
-
3
- **Sub-components: Bar, Legends, Callout, Benchmark**
4
-
5
- 1. **Bar: bar data, bar background color**
6
- 1. **Legends: show/hide legends, highlight the corresponding bar on legend hover**
7
- 1. **Callout: Default/custom callout**
8
- 1. **Benchmark: Show benchmark**
9
- 1. **Screen resolution changes, theme changes**
10
-
11
- | **Test steps** | **Validation** | **Tool used** |
12
- | :---------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | :-----------: |
13
- | Test 1: [Snapshot testing] | | |
14
- | - With only data prop, non-empty data | Renders stacked bar chart correctly | Enzyme |
15
- | - With empty data | Renders stacked bar chart correctly | RTL |
16
- | - With HideLegend prop set to “true” | Should hide legends | Enzyme |
17
- | - With HideTooltip prop set to “true” | Should hide the tooltip in chart | Enzyme |
18
- | - With HideNumberDisplay set to “true” | Should not show number/ratio on top of bar | Enzyme |
19
- | - With HideDenominator set to “true” | Should not show the denominator for the ratio above the chart | Enzyme |
20
- | - With IgnoreFixStyle set to “true” | Should ignore the fixed display pattern for less than 2 data points chart | Enzyme |
21
- | - 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 |
22
- | Test 2: Basic props testing | | |
23
- | - HideLegend prop set to “false” | Should mount legend when hideLegend is false | Enzyme |
24
- | - HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme |
25
- | - HideDenominator set to “false” | Should not mount callout | Enzyme |
26
- | - onRenderCalloutPerDataPoint is given | Should render onRenderCalloutPerDataPoint | Enzyme |
27
- | - onRenderCalloutPerDataPoint is not given | Should not render onRenderCalloutPerDataPoint | Enzyme |
28
- | Test 3: Render calling with respective to props | | |
29
- | - No prop changes: Mount vertical bar chart and then set the same props again | Render function should have been called twice | Enzyme |
30
- | - Prop changes: Mount vertical bar chart and then set the some other prop | Render function should have been called twice | Enzyme |
31
- | Test 4: Mouse events | | |
32
- | - Mouse over on a bar | Should render callout correctly on mouseover | Enzyme |
33
- | - Mouse over on a bar with customized callout | Should render customized callout on mouseover | Enzyme |
34
- | - Mouse move on a bar | Should render callout correctly on mousemove | Enzyme |
35
- | Test 5: Render empty chart aria label div when chart is empty | | |
36
- | - Stacked bar chart mounted with non-empty data | No empty chart aria label div rendered | Enzyme |
37
- | - Stacked bar chart mounted with empty data | Empty chart aria label div rendered | Enzyme |
38
- | Test 6: [Sub-Component]: Stacked Bar | | |
39
- | - Specify bar height | Should render the bar with the given height | RTL |
40
- | - Specify bar background color | Should render the empty bars with the specified color | RTL |
41
- | - Localize the numbers of the bars with a given culture | Should render the bars with the numbers localized in the given culture | E2E |
42
- | - Specify the href for the stacked bar | Should redirect to the Url to upon clicking on the stacked bar chart | E2E |
43
- | - Specify data with only one single data point | Should render the number on top of the bar with only one data point | RTL |
44
- | - Specify data with two data points | Should render the ratio on top of the bar with only two data points | RTL |
45
- | - Specify data with more than two data points | Should not render the ratio on top of the bar with data points count greater than two | RTL |
46
- | - Specify target data prop | Should render a coloured arrow on top when target data is specified | RTL |
47
- | - Specify chartDataAccessibilityData prop when data contains two data points | Should enable chartDataAccessibilityData prop only if ratio or numbers are enabled to be shown | RTL |
48
- | Test 7: [Sub-Component]: Benchmarking | | |
49
- | - Specify the benchmark data point | Should render the benchmark triangle | RTL |
50
- | Test 8: [Sub-Component]: Legends | | |
51
- | - Hover mouse over bar legends | Should reduce the opacity of the other bars/lines and their legends | RTL |
52
- | - Hover mouse over benchmark legends | Should not reduce the opacity of the other bars/lines and their legends | RTL |
53
- | - Mouse out from a bar legend | Should change the opacity of the other bars and their legends on mouse out action from a bar legend | RTL |
54
- | - Click on a bar legend | Should reduce the opacity of the other bars and their legends on mouse click a bar legend | RTL |
55
- | - Legends overflow scenario | Overflow button should contain the additional legends | E2E |
56
- | - Specify placeholder as true for a data point | Should not show legend if data is marked as placeholder | RTL |
57
- | Test 9: [Sub-Component]: Callout | | |
58
- | - Hover mouse over a bar | Should call the handler on mouse over bar | RTL |
59
- | - Hover mouse over a bar | Should show the default callout over that bar | RTL |
60
- | - Specify custom callout and hover mouse over a bar | Should show the custom callout over that bar | RTL |
61
- | Test 10: [Sub-Component]: Screen resolution | | |
62
- | - Increase the screen resolution (zoom in) | Should remain unchanged on zoom in | RTL |
63
- | - Decrease the screen resolution (zoom out) | Should remain unchanged on zoom out | RTL |
64
- | Test 11: Theme changed to Dark Theme | Should reflect theme change | RTL |
package/docs/TestPlans/TestingGuide.md DELETED
@@ -1,13 +0,0 @@
1
- This document highlights few common testing practices for any new tests that are being added to the charting library.
2
-
3
- 1. Any new test should always be added using React Testing Library.
4
- 2. The utility functions like `testWithoutWait`, `testWithWait` and `testScreenResolutionChanges` can be used in writing the component tests which will reduce the number of lines of code.
5
- 3. `testWithWait` is needed when we are either trying to provide any prop and update or we are trying to extract any sub-sub svg element like bars within the vertical bar chart.
6
- 4. Order of imports is important while writing tests. Following is an example:
7
- Importing the test data before importing the render function from the '@testing-library/react' results in erroneous rendering of the chart.
8
- For example: for Vertical bar charts, improper sequencing of the imports results in the following output:
9
- `import { chartPoints } from '../VerticalBarChart/VerticalBarChart.test';`
10
- `import { render, screen, queryAllByAttribute, fireEvent, act } from '@testing-library/react';`
11
- However, reordering the import sequence results in the correct rendering as follows:
12
- `import { render, screen, queryAllByAttribute } from '@testing-library/react';`
13
- `import { chartPoints } from './VerticalBarChart.test';`
package/docs/TestPlans/Utilities/UnitTests.md DELETED
@@ -1,16 +0,0 @@
1
- # Unit test plan for Donut Chart
2
-
3
- This test plan contains the list of unit testable functions which are used as a part of the Donut Chart component.
4
-
5
- Identify the functions that can be unit tested (example, functions having calculations or getting values from Utils, etc).
6
-
7
- - If required, extract the unit testable portions out of the functions which can be independently unit tested without any requirement of DOM elements.
8
- - Alternatively, mock the sections that cannot be unit tested.
9
-
10
- | Functions | Can it be unit tested | Reason |
11
- | ----------------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
12
- | a. `convertToLocaleString()` | Yes | |
13
- | b.`getAccessibleDataObject()` | Yes | |
14
- | c. `_valueInsideDonut()` | No | private function which can only be tested by rendering the donut chart component. |
15
- | d. `wrapTextInsideDonut()` | No | cannot be unit tested as it requires the tspan length to be calculated using Browser Functions like getComputedTextLength(). |
16
- | e. `_computeTotalValue()` | No | depends on the data prop passed down from the DonutChart.base to Pie during component rendering. Also since this is a private function, it can only be tested via component rendering. |