@fluentui/react-charting 5.19.2 → 5.19.3

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 (27) hide show
  1. package/CHANGELOG.json +31 -1
  2. package/CHANGELOG.md +11 -2
  3. package/dist/react-charting.js +1 -1
  4. package/dist/react-charting.min.js +1 -1
  5. package/lib/version.js +1 -1
  6. package/lib/version.js.map +1 -1
  7. package/lib-amd/version.js +1 -1
  8. package/lib-amd/version.js.map +1 -1
  9. package/lib-commonjs/version.js +1 -1
  10. package/lib-commonjs/version.js.map +1 -1
  11. package/package.json +4 -4
  12. package/docs/TechnicalDetails.md +0 -88
  13. package/docs/TestPlans/AreaChart/ComponentTests.md +0 -61
  14. package/docs/TestPlans/BasicDonutChart.png +0 -0
  15. package/docs/TestPlans/DonutChart/ComponentTests.md +0 -35
  16. package/docs/TestPlans/GaugeChart/ComponentTests.md +0 -31
  17. package/docs/TestPlans/GroupedVerticalBarChart/ComponentTests.md +0 -62
  18. package/docs/TestPlans/HorizontalBarChart/ComponentTests.md +0 -51
  19. package/docs/TestPlans/LineChart/ComponentTests.md +0 -63
  20. package/docs/TestPlans/MultiStackedBarChart/componentTests.md +0 -56
  21. package/docs/TestPlans/StackedBarChart/ComponentTests.md +0 -64
  22. package/docs/TestPlans/TestingGuide.md +0 -13
  23. package/docs/TestPlans/Utilities/UnitTests.md +0 -16
  24. package/docs/TestPlans/VerticalBarChart/ComponentTests.md +0 -65
  25. package/docs/TestPlans/VerticalStackedBarChart/ComponentTests.md +0 -73
  26. package/docs/colors.md +0 -149
  27. package/docs/implementing-2-to-1-spacing.md +0 -215
package/lib/version.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // Do not modify this file; it is generated as part of publish.
2
2
  // The checked in version is a placeholder only and will not be updated.
3
3
  import { setVersion } from '@fluentui/set-version';
4
- setVersion('@fluentui/react-charting', '5.19.2');
4
+ setVersion('@fluentui/react-charting', '5.19.3');
5
5
  //# sourceMappingURL=version.js.map
package/lib/version.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,UAAU,CAAC,0BAA0B,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.19.2');"]}
1
+ {"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,UAAU,CAAC,0BAA0B,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.19.3');"]}
package/lib-amd/version.js CHANGED
@@ -1,6 +1,6 @@
1
1
  define(["require", "exports", "@fluentui/set-version"], function (require, exports, set_version_1) {
2
2
  "use strict";
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
- (0, set_version_1.setVersion)('@fluentui/react-charting', '5.19.2');
4
+ (0, set_version_1.setVersion)('@fluentui/react-charting', '5.19.3');
5
5
  });
6
6
  //# sourceMappingURL=version.js.map
package/lib-amd/version.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;;IAGA,IAAA,wBAAU,EAAC,0BAA0B,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.19.2');"]}
1
+ {"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;;IAGA,IAAA,wBAAU,EAAC,0BAA0B,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.19.3');"]}
package/lib-commonjs/version.js CHANGED
@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  // Do not modify this file; it is generated as part of publish.
4
4
  // The checked in version is a placeholder only and will not be updated.
5
5
  var set_version_1 = require("@fluentui/set-version");
6
- (0, set_version_1.setVersion)('@fluentui/react-charting', '5.19.2');
6
+ (0, set_version_1.setVersion)('@fluentui/react-charting', '5.19.3');
7
7
  //# sourceMappingURL=version.js.map
package/lib-commonjs/version.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,qDAAmD;AACnD,IAAA,wBAAU,EAAC,0BAA0B,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.19.2');"]}
1
+ {"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,qDAAmD;AACnD,IAAA,wBAAU,EAAC,0BAA0B,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.19.3');"]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fluentui/react-charting",
3
- "version": "5.19.2",
4
- "description": "Experimental React charting components for building experiences for Microsoft 365.",
3
+ "version": "5.19.3",
4
+ "description": "React web charting controls for Microsoft fluentui system.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
7
7
  "typings": "lib/index.d.ts",
@@ -49,7 +49,7 @@
49
49
  "@types/d3-scale": "^4.0.0",
50
50
  "@types/d3-selection": "1.4.1",
51
51
  "@types/d3-shape": "3.1.1",
52
- "@types/d3-time-format": "^2.1.0",
52
+ "@types/d3-time-format": "^3.0.0",
53
53
  "@types/d3-time": "^2.1.1",
54
54
  "@fluentui/set-version": "^8.2.12",
55
55
  "d3-array": "2.12.1",
@@ -60,7 +60,7 @@
60
60
  "d3-scale": "^4.0.0",
61
61
  "d3-selection": "1.3.0",
62
62
  "d3-shape": "3.2.0",
63
- "d3-time-format": "^2.1.3",
63
+ "d3-time-format": "3.0.0",
64
64
  "d3-time": "^2.1.1",
65
65
  "tslib": "^2.1.0"
66
66
  },
package/docs/TechnicalDetails.md DELETED
@@ -1,88 +0,0 @@
1
- # Technical details
2
-
3
- **Overview**
4
-
5
- This document describes different chart components in detail.
6
-
7
- This can be used as a guide to use the charts and contribute new functionalities or improvements to the library.
8
-
9
- **Components**
10
-
11
- The charting components are built using following building blocks.
12
-
13
- - Cartesian Charts.
14
-
15
- - Charts built using cartesian coordinate system (two axes - x axis perpendicular to y axis) are called cartesian charts. Majority of the chart in the library are cartesian charts. Some charts like horizontal chart, donut chart, sankey and tree charts are non cartesian charts.
16
-
17
- - Legends.
18
-
19
- - A legend contains a list of the variables appearing in the chart and an example of their appearance. This information allows the data from each variable to be identified in the chart.
20
-
21
- - Hover Callouts.
22
-
23
- - Whenever the mouse is hovered over a datapoint, a callout is shown representing the details of data for that point. For a stacked chart, the hover callout can represent the data for all the points for the same X coordinate.
24
-
25
- - Axes.
26
-
27
- - Our charts currently support cartesian axes. Different charts support different type of axes - numerical axis, date or time series axis, string or categorical axis. Detals about supported axes can be found in readme for each chart.
28
-
29
- - Axes support for different charts
30
-
31
- | Chart | Numeric Axis | Date Axis | String Axis |
32
- | -------------------------- | ------------ | --------- | ----------- |
33
- | Line Chart | Yes | Yes | No |
34
- | Area Chart | Yes | Yes | No |
35
- | Vertical Bar Chart | Yes | No | Yes |
36
- | Vertical Stacked Bar Chart | Yes | No | Yes |
37
- | Grouped Vertical Bar Chart | No | No | Yes |
38
- | Heatmap Chart | Yes | Yes | Yes |
39
- | Horizontal Bar Chart | -- | -- | -- |
40
- | Donut Chart | -- | -- | -- |
41
- | Sankey Chart | -- | -- | -- |
42
- | Tree Chart | -- | -- | -- |
43
- | Sparkline Chart | -- | -- | -- |
44
-
45
- - Axis localization
46
- The axes support 2 ways of localization.
47
-
48
- 1. Javascript provided inbuilt localization for numeric and date axis. Specify the culture and dateLocalizeOptions for date axis to define target localization. Refer the [javascript localization guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString) for usage.
49
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as supported by d3 (like [this](https://github.com/d3/d3-time-format/blob/main/locale/en-US.json)). The date axis will use the date range and the multiformat specified in the definition to determine the correct format to show in the ticks. For example - If the date range is in days then the axis will show hourly ticks. If the date range spans across months then the axis will show months in tick labels and so on.
50
- Specify the custom locale definition in the timeFormatLocale prop.
51
- Refer to the Custom Locale Date Axis example in line chart for sample usage.
52
-
53
- - Date axis formatting
54
- The date axis can be custom formatted using the customDateTimeFormatter prop.
55
-
56
- - Event annotations (Available in line charts).
57
-
58
- - Data can be annotated using vertical lines representing the events of interest. See [line chart with events](https://fluentuipr.z22.web.core.windows.net/heads/master/react-charting/demo/index.html#/examples/linechart#Variants) for example.
59
-
60
- - Typography.
61
-
62
- - Our font classes represent the type ramp for the fluent design language. Each base class sets a default size, weight, and color.
63
-
64
- - Colors
65
-
66
- - The charts are designed using the accessible color palette defined for the fluent design system.
67
- Refer [this](https://github.com/microsoft/fluentui/blob/master/packages/react-charting/docs/colors.md) guide for details about charting color palette and its usage.
68
-
69
- - Themes
70
-
71
- - The library supports light and dark mode out of box. In addition, consumers can define their own themese as detailed [here](https://github.com/microsoft/fluentui/wiki/Theming)
72
-
73
- - Accessibility.
74
-
75
- - Our charts have elaborate accessibility support. The charts are WCAG 2.1 MAS C compliant for accessibility.
76
- Consumers can define their own aria labels for each point by setting the `xAxisCalloutAccessibilityData` and `callOutAccessibilityData` properties.
77
-
78
- - RTL Support
79
-
80
- - The charts support RTL languages wherever applicable.
81
-
82
- - Component Styling
83
-
84
- - [This article](https://github.com/microsoft/fluentui/wiki/Component-Styling) talks about the styling approach followed within charting library.
85
-
86
- - Details about ticks.
87
- - Tick values are applicable only for date axis. Doesn't work for string or numeric axis.
88
- Tickcount works for numeric and date axis. Doesn't work for string (scaleBand) axis.
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 |