@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.
- package/CHANGELOG.json +31 -1
- package/CHANGELOG.md +11 -2
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/lib/version.js +1 -1
- package/lib/version.js.map +1 -1
- package/lib-amd/version.js +1 -1
- package/lib-amd/version.js.map +1 -1
- package/lib-commonjs/version.js +1 -1
- package/lib-commonjs/version.js.map +1 -1
- package/package.json +4 -4
- package/docs/TechnicalDetails.md +0 -88
- package/docs/TestPlans/AreaChart/ComponentTests.md +0 -61
- package/docs/TestPlans/BasicDonutChart.png +0 -0
- package/docs/TestPlans/DonutChart/ComponentTests.md +0 -35
- package/docs/TestPlans/GaugeChart/ComponentTests.md +0 -31
- package/docs/TestPlans/GroupedVerticalBarChart/ComponentTests.md +0 -62
- package/docs/TestPlans/HorizontalBarChart/ComponentTests.md +0 -51
- package/docs/TestPlans/LineChart/ComponentTests.md +0 -63
- package/docs/TestPlans/MultiStackedBarChart/componentTests.md +0 -56
- package/docs/TestPlans/StackedBarChart/ComponentTests.md +0 -64
- package/docs/TestPlans/TestingGuide.md +0 -13
- package/docs/TestPlans/Utilities/UnitTests.md +0 -16
- package/docs/TestPlans/VerticalBarChart/ComponentTests.md +0 -65
- package/docs/TestPlans/VerticalStackedBarChart/ComponentTests.md +0 -73
- package/docs/colors.md +0 -149
- package/docs/implementing-2-to-1-spacing.md +0 -215
|
@@ -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 |
|
|
@@ -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 |
|
|
@@ -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';`
|
|
@@ -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. |
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
**Vertical Bar Chart – Component test plan**
|
|
2
|
-
|
|
3
|
-
**Sub-components: Bar, Line, Legends, Callout, Labels**
|
|
4
|
-
|
|
5
|
-
1. **Bar: bar data, bar color (single/multi colors), bar label (show/hide)**
|
|
6
|
-
1. **Line: show/hide line, highlight data point on line and show callout**
|
|
7
|
-
1. **Legends: show/hide legends, highlight the corresponding bar/line on legend hover**
|
|
8
|
-
1. **Callout: Default/custom callout**
|
|
9
|
-
1. **Labels: x-Axis labels default/rotated**
|
|
10
|
-
|
|
11
|
-
| **Test steps** | **Validation** | **Tool used** |
|
|
12
|
-
| :-----------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------: | :-----------: |
|
|
13
|
-
| Test 1: [Snapshot testing] | | |
|
|
14
|
-
| - With only data prop, numerical data on x-axis. | Renders vertical bar chart correctly | Enzyme |
|
|
15
|
-
| - With only data prop, string data on x-axis. | Renders vertical 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 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 HideLabels set to “true” | Should hide the bar labels | Enzyme |
|
|
23
|
-
| Test 2: Basic props testing | | |
|
|
24
|
-
| - HideLegend prop set to “false” | Should mount legend when hideLegend is false | Enzyme |
|
|
25
|
-
| - HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme |
|
|
26
|
-
| - onRenderCalloutPerStack prop is not given | Should not render onRenderCalloutPerStack | 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 vertical bar chart and then set the same props again | Render function should have been called twice | Enzyme |
|
|
31
|
-
| - Prop changes: Mount vertical bar chart and then set the 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 over on a bar with customized callout | Should render customized callout on mouseover | Enzyme |
|
|
35
|
-
| Test 5: Render empty chart aria label div when chart is empty | | |
|
|
36
|
-
| - Vertical bar chart mounted with non-empty data | No empty chart aria label div rendered | Enzyme |
|
|
37
|
-
| - Vertical bar chart mounted with empty data | Empty chart aria label div rendered | Enzyme |
|
|
38
|
-
| Test 6: Render empty chart calling with respective to props | | |
|
|
39
|
-
| - prop changes: Mount vertical bar chart with empty data and then set the props | Render function should have been called 3 times | Enzyme |
|
|
40
|
-
| Test 7: [Sub-Component]: Vertical Bar | | |
|
|
41
|
-
| - Specify bar width | Should render the bar with the given width | RTL |
|
|
42
|
-
| - Specify bar colors (multiple) | Should render the bars with the specified colors | RTL |
|
|
43
|
-
| - Specify to use a single color for all bars | Should render the bars with the single specified color | RTL |
|
|
44
|
-
| - Hide the bar labels | Should render the bars with labels hidden | RTL |
|
|
45
|
-
| - Provide xAxisPadding between the bars | Should render the bars with the given padding between bar's or lines in the graph | E2E |
|
|
46
|
-
| - Localize the numbers of the bars with a given culture | Should render the bars with the numbers localized in the given culture | E2E |
|
|
47
|
-
| Test 8: [Sub-Component]: Line | | |
|
|
48
|
-
| - Specify line data | Should render line with the data provided | RTL |
|
|
49
|
-
| - Hover mouse over the data points | Should highlight the data points (No callout is rendered when we hover only on the line. Callout appears on hover over the bars only.) | RTL |
|
|
50
|
-
| Test 9: [Sub-Component]: Legends | | |
|
|
51
|
-
| - Hide legends | Should not show any rendered legends | RTL |
|
|
52
|
-
| - Hover mouse over bar legends | Should reduce the opacity of the other bars/lines and their legends | RTL |
|
|
53
|
-
| - Hover mouse over line legends | Should reduce the opacity of the other bars/lines and their legends | RTL |
|
|
54
|
-
| Test 10: [Sub-Component]: Callout | | |
|
|
55
|
-
| - Hover mouse over a bar | Should call the handler on mouse over bar | RTL |
|
|
56
|
-
| - Hover mouse over a bar | Should show the default callout over that bar | RTL |
|
|
57
|
-
| - Specify custom callout and hover mouse over a bar | Should show the custom callout over that bar | RTL |
|
|
58
|
-
| - Specify custom callout and hover mouse over the line | Should not show the custom callout over that line as custom callout is rendered only on mouse over on the bars. | RTL |
|
|
59
|
-
| Test 11: [Sub-Component]: x-axis labels | | |
|
|
60
|
-
| - Truncate x-axis labels | Should show the x-axis labels tooltip when hovered | RTL |
|
|
61
|
-
| - Rotate x-axis labels | Should rotate the x-axis labels by 45 degrees | RTL |
|
|
62
|
-
| Test 12: [Sub-Component]: Screen resolution | | |
|
|
63
|
-
| - Increase the screen resolution (zoom in) | Should remain unchanged on zoom in | RTL |
|
|
64
|
-
| - Decrease the screen resolution (zoom out) | Should remain unchanged on zoom out | RTL |
|
|
65
|
-
| Test 13: Theme changed to Dark Theme | Should reflect theme change | RTL |
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
**Vertical Stacked Bar Chart – Component test plan**
|
|
2
|
-
|
|
3
|
-
**Sub-components: Bar, Line, Legends, Callout, Labels**
|
|
4
|
-
|
|
5
|
-
1. **Bar: Bar data, Bar color (single/multiple), bar label**
|
|
6
|
-
1. **Line: show/hide line, highlight data points on line and show callout**
|
|
7
|
-
1. **Legends: show/hide legends, highlight the corresponding bar/line on legend hover**
|
|
8
|
-
1. **Callout: Default/custom callout**
|
|
9
|
-
1. **Labels: x-Axis labels default/rotated**
|
|
10
|
-
|
|
11
|
-
| **Test steps** | **Validation** | **Tool used** |
|
|
12
|
-
| :---------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | :-----------: |
|
|
13
|
-
| Test 1: [Snapshot testing] | | |
|
|
14
|
-
| - With only data prop, numerical data on x-axis. | Renders VerticalStackedBar 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 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 |
|
|
18
|
-
| - With ShowXAxisLablesTooltip set to “true” | Should truncate x axis labels and show tooltip on x axis labels | Enzyme |
|
|
19
|
-
| - With WrapXAxisLables set to “true” | Should wrap x axis label values | Enzyme |
|
|
20
|
-
| - With isCalloutForStack set to “true” | Should render callout for stack properly | Enzyme |
|
|
21
|
-
| - With yAxisTickFormat set to “%d” | <p>Should render the y-axis ticks in the format specified</p><p></p> | Enzyme |
|
|
22
|
-
| - With hideLabels set to “true” | Should hide bar labels | Enzyme |
|
|
23
|
-
| Test 2: Basic props testing | | |
|
|
24
|
-
| - HideLegend prop set to “true” | Should not mount legend when hideLegend is true | Enzyme |
|
|
25
|
-
| - HideLegend prop set to “false” | Should mount legend when hideLegend is false | Enzyme |
|
|
26
|
-
| - HideTooltip prop set to “true” | Should not mount callout when hideTootip is true | Enzyme |
|
|
27
|
-
| - HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme |
|
|
28
|
-
| - onRenderCalloutPerStack prop is not given | Should not render onRenderCalloutPerStack | Enzyme |
|
|
29
|
-
| - onRenderCalloutPerDataPoint is given | Should render onRenderCalloutPerDataPoint | Enzyme |
|
|
30
|
-
| - onRenderCalloutPerDataPoint is not given | Should not render onRenderCalloutPerDataPoint | Enzyme |
|
|
31
|
-
| - onRenderCalloutPerDataPoint is given | Should render onRenderCalloutPerDataPoint | Enzyme |
|
|
32
|
-
| Test 3: Render calling with respective to props | | |
|
|
33
|
-
| - No prop changes: Mount VerticalStackedBar chart and then set the same props again | Render function should have been called twice | Enzyme |
|
|
34
|
-
| - Prop changes: Mount VerticalStackedBar chart and then set some other prop | Render function should have been called twice | Enzyme |
|
|
35
|
-
| Test 4: Mouse events | | |
|
|
36
|
-
| - Mouse over on a bar | Should render callout correctly on mouseover | Enzyme |
|
|
37
|
-
| - Mouse move from one bar to other bar | Should render callout correctly on mouse move | Enzyme |
|
|
38
|
-
| - Mouse over on a bar with customized callout | Should render customized callout on mouseover | Enzyme |
|
|
39
|
-
| - Customized callout per stack on mouse over | Should render customized callout per stack correctly on mouseover | Enzyme |
|
|
40
|
-
| - Customized callout on a bar from one bar to other bar | Should render customized callout for stack on mouseover | Enzyme |
|
|
41
|
-
| Test 5: [Sub-Component]: Line | | |
|
|
42
|
-
| - Specify line data | Should render line with the data provided | RTL |
|
|
43
|
-
| Test 6: [Sub-Component]: Bar | | |
|
|
44
|
-
| - Specify bar color | Should render bar with the specified color | RTL |
|
|
45
|
-
| - Specify separate bars in a single bar | Should render stacked bar with specified data | RTL |
|
|
46
|
-
| - setMinimumBarHeight to “x” | Should render bars properly, bars below this height will be displayed at this height | RTL |
|
|
47
|
-
| - set barWidth to “x” | Should render bars with specified bar width | RTL |
|
|
48
|
-
| - set barGapMax to “x” | Should render bars with specified bar gap | RTL |
|
|
49
|
-
| - set barCornerRadius | Should render top bar with specified bar corner radius | RTL |
|
|
50
|
-
| Test 7: [Sub-Component]: Legends | | |
|
|
51
|
-
| - Hide legends | Should not show any rendered legends | RTL |
|
|
52
|
-
| - Hover mouse over line legends | Should reduce the opacity of the other lines/bars | RTL |
|
|
53
|
-
| - Hover mouse over bar legends | Should reduce the opacity of the other lines/bars | RTL |
|
|
54
|
-
| - Mouse move from one Legend to another Legend | Should reset the opacity of the lines on mouse leave a bar legend | RTL |
|
|
55
|
-
| - Single mouse click on bar legends | Should select legend on single mouse click on respective legend | RTL |
|
|
56
|
-
| - Double mouse click on bar legends | Should deselect legend on double mouse click on respective legend | RTL |
|
|
57
|
-
| - Single mouse click on line legends | Should select legend on single mouse click on respective legend | RTL |
|
|
58
|
-
| - Double mouse click on line legends | Should deselect legend on double mouse click on respective legend | RTL |
|
|
59
|
-
| Test 8: [Sub-Component]: Callout | | |
|
|
60
|
-
| - Hover mouse over a bar | Should call the handler on mouse over bar | RTL |
|
|
61
|
-
| - Hover mouse over a bar to display callout | Should show the default callout over that bar | RTL |
|
|
62
|
-
| - Hover mouse over a stacked bar | Should show the default stacked call out | RTL |
|
|
63
|
-
| - Hover mouse over the line | Should show the default callout over that line | RTL |
|
|
64
|
-
| - Specify custom callout and hover mouse over a bar | Should show the custom callout over that bar | RTL |
|
|
65
|
-
| - Specify custom callout and hover mouse over the line | Should show the custom callout over that line | RTL |
|
|
66
|
-
| - Mouse click on bar | Should call the handler on mouse click on the bar | RTL |
|
|
67
|
-
| Test 9: [Sub-Component]: x-axis labels | | |
|
|
68
|
-
| - Truncate x-axis labels | Should show the x-axis labels tooltip when hovered | RTL |
|
|
69
|
-
| - Rotate x-axis labels | Should rotate the x-axis labels by 45 degrees | RTL |
|
|
70
|
-
| Test 10: [Sub-Component]: Screen resolution | | |
|
|
71
|
-
| - Increase the screen resolution (zoom in) | Should remain unchanged on zoom in | RTL |
|
|
72
|
-
| - Decrease the screen resolution (zoom out) | Should remain unchanged on zoom out | RTL |
|
|
73
|
-
| Test 11: Theme changed to Dark Theme | Should reflect theme change | RTL |
|
package/docs/colors.md
DELETED
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
# Colors
|
|
2
|
-
|
|
3
|
-
We provide the following 3 ways to specify colors for the data series.
|
|
4
|
-
|
|
5
|
-
## 1. Use CSS colors
|
|
6
|
-
|
|
7
|
-
The users can supply custom colors for the data series using named colors, hex codes, RGB, HSL, and other browser-supported color formats. The users will be responsible for managing the contrast ratio between adjacent data series and adjusting the color in relation to the light and dark themes.
|
|
8
|
-
|
|
9
|
-
```js
|
|
10
|
-
import * as React from 'react';
|
|
11
|
-
import { IChartProps, ILineChartPoints, LineChart } from '@fluentui/react-charting';
|
|
12
|
-
|
|
13
|
-
const dataSeries: ILineChartPoints[] = [
|
|
14
|
-
{
|
|
15
|
-
legend: 'Line 1',
|
|
16
|
-
data: [
|
|
17
|
-
{ x: 20, y: 50 },
|
|
18
|
-
{ x: 40, y: 80 },
|
|
19
|
-
],
|
|
20
|
-
color: 'red', // #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%), etc.
|
|
21
|
-
},
|
|
22
|
-
];
|
|
23
|
-
const chartData: IChartProps = {
|
|
24
|
-
chartTitle: 'Line chart',
|
|
25
|
-
lineChartData: dataSeries,
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
const App = () => {
|
|
29
|
-
return <LineChart data={chartData} />;
|
|
30
|
-
};
|
|
31
|
-
export default App;
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## 2. Omit color prop
|
|
35
|
-
|
|
36
|
-
The users can omit the color prop for the data series. The color will be chosen automatically from the default color palette. See below for more details on the palette.
|
|
37
|
-
|
|
38
|
-
```js
|
|
39
|
-
import * as React from 'react';
|
|
40
|
-
import { IChartProps, ILineChartPoints, LineChart } from '@fluentui/react-charting';
|
|
41
|
-
|
|
42
|
-
const dataSeries: ILineChartPoints[] = [
|
|
43
|
-
{
|
|
44
|
-
legend: 'Line 1',
|
|
45
|
-
data: [
|
|
46
|
-
{ x: 20, y: 50 },
|
|
47
|
-
{ x: 40, y: 80 },
|
|
48
|
-
],
|
|
49
|
-
// Notice the absent color prop here.
|
|
50
|
-
},
|
|
51
|
-
];
|
|
52
|
-
const chartData: IChartProps = {
|
|
53
|
-
chartTitle: 'Line chart',
|
|
54
|
-
lineChartData: dataSeries,
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
const App = () => {
|
|
58
|
-
return <LineChart data={chartData} />;
|
|
59
|
-
};
|
|
60
|
-
export default App;
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
## 3. Use colors from palette
|
|
64
|
-
|
|
65
|
-
The users can pick colors from our data visualization color palette, which is categorized into the following two types.
|
|
66
|
-
|
|
67
|
-
### Qualitative Color Palette
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
Each qualitative color is distinct from the others. This type of palette is ideal for visualizations displaying categorical variables that are unrelated to one another. This is our **default color palette**, which totals 40 colors, including 10 base colors and 30 extension colors. We cycle through these colors sequentially to paint the data series without color.
|
|
75
|
-
|
|
76
|
-
To use colors from this palette:
|
|
77
|
-
|
|
78
|
-
1. Import `DataVizPalette` from the charting package.
|
|
79
|
-
2. Choose from the available colors like this:
|
|
80
|
-
`DataVizPalette.color<slot_number>`, where `slot_number` ranges from 1 to 40.
|
|
81
|
-
|
|
82
|
-
```js
|
|
83
|
-
import * as React from 'react';
|
|
84
|
-
import { DataVizPalette, IChartProps, ILineChartPoints, LineChart } from '@fluentui/react-charting';
|
|
85
|
-
|
|
86
|
-
const dataSeries: ILineChartPoints[] = [
|
|
87
|
-
{
|
|
88
|
-
legend: 'Line 1',
|
|
89
|
-
data: [
|
|
90
|
-
{ x: 20, y: 50 },
|
|
91
|
-
{ x: 40, y: 80 },
|
|
92
|
-
],
|
|
93
|
-
color: DataVizPalette.color1, // .color2, .color3, ....., .color40
|
|
94
|
-
},
|
|
95
|
-
];
|
|
96
|
-
const chartData: IChartProps = {
|
|
97
|
-
chartTitle: 'Line chart',
|
|
98
|
-
lineChartData: dataSeries,
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
const App = () => {
|
|
102
|
-
return <LineChart data={chartData} />;
|
|
103
|
-
};
|
|
104
|
-
export default App;
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
### Semantic Color Palette
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
Semantic color represents a clear message as well as status, such as success, error, warning, info and so on. Each color has the same basic meaning in all contexts.
|
|
112
|
-
|
|
113
|
-
To use colors from this palette:
|
|
114
|
-
|
|
115
|
-
1. Import `DataVizPalette` from the charting package.
|
|
116
|
-
2. Choose from the 7 available colors like this:
|
|
117
|
-
`DataVizPalette.<status>`, where `status` can be one of the following:
|
|
118
|
-
- `highError`
|
|
119
|
-
- `error`
|
|
120
|
-
- `warning`
|
|
121
|
-
- `success`
|
|
122
|
-
- `highSuccess`
|
|
123
|
-
- `disabled`
|
|
124
|
-
- `info`
|
|
125
|
-
|
|
126
|
-
```js
|
|
127
|
-
import * as React from 'react';
|
|
128
|
-
import { DataVizPalette, IChartProps, ILineChartPoints, LineChart } from '@fluentui/react-charting';
|
|
129
|
-
|
|
130
|
-
const dataSeries: ILineChartPoints[] = [
|
|
131
|
-
{
|
|
132
|
-
legend: 'Line 1',
|
|
133
|
-
data: [
|
|
134
|
-
{ x: 20, y: 50 },
|
|
135
|
-
{ x: 40, y: 80 },
|
|
136
|
-
],
|
|
137
|
-
color: DataVizPalette.info, // .success, .warning, .error, .disabled, .highSuccess, .highError
|
|
138
|
-
},
|
|
139
|
-
];
|
|
140
|
-
const chartData: IChartProps = {
|
|
141
|
-
chartTitle: 'Line chart',
|
|
142
|
-
lineChartData: dataSeries,
|
|
143
|
-
};
|
|
144
|
-
|
|
145
|
-
const App = () => {
|
|
146
|
-
return <LineChart data={chartData} />;
|
|
147
|
-
};
|
|
148
|
-
export default App;
|
|
149
|
-
```
|