@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.
- package/CHANGELOG.json +52 -1
- package/CHANGELOG.md +21 -2
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/lib/components/CommonComponents/CartesianChart.base.d.ts +1 -0
- package/lib/components/CommonComponents/CartesianChart.base.js +11 -2
- package/lib/components/CommonComponents/CartesianChart.base.js.map +1 -1
- package/lib/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.js +1 -0
- package/lib/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.js.map +1 -1
- package/lib/utilities/utilities.d.ts +4 -3
- package/lib/utilities/utilities.js +11 -6
- package/lib/utilities/utilities.js.map +1 -1
- package/lib/version.js +1 -1
- package/lib/version.js.map +1 -1
- package/lib-amd/components/CommonComponents/CartesianChart.base.d.ts +1 -0
- package/lib-amd/components/CommonComponents/CartesianChart.base.js +11 -2
- package/lib-amd/components/CommonComponents/CartesianChart.base.js.map +1 -1
- package/lib-amd/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.js +1 -0
- package/lib-amd/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.js.map +1 -1
- package/lib-amd/utilities/utilities.d.ts +4 -3
- package/lib-amd/utilities/utilities.js +11 -6
- package/lib-amd/utilities/utilities.js.map +1 -1
- package/lib-amd/version.js +1 -1
- package/lib-amd/version.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/CartesianChart.base.d.ts +1 -0
- package/lib-commonjs/components/CommonComponents/CartesianChart.base.js +11 -2
- package/lib-commonjs/components/CommonComponents/CartesianChart.base.js.map +1 -1
- package/lib-commonjs/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.js +1 -0
- package/lib-commonjs/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.js.map +1 -1
- package/lib-commonjs/utilities/utilities.d.ts +4 -3
- package/lib-commonjs/utilities/utilities.js +11 -6
- package/lib-commonjs/utilities/utilities.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,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
|
-
```
|
|
@@ -1,215 +0,0 @@
|
|
|
1
|
-
# Implementing 2:1 spacing
|
|
2
|
-
|
|
3
|
-
## Discrete Axis
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
As per design specs, there should be a minimum space of 8px before the first bar and after the last bar of a vertical bar chart. Let’s call this space `MIN_DOMAIN_MARGIN`.
|
|
8
|
-
|
|
9
|
-
```
|
|
10
|
-
const MIN_DOMAIN_MARGIN = 8;
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
The total space available to render the bars:
|
|
14
|
-
|
|
15
|
-
```
|
|
16
|
-
const totalWidth = containerWidth - (this.margins.left! + MIN_DOMAIN_MARGIN) - (this.margins.right! + MIN_DOMAIN_MARGIN);
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
where\
|
|
20
|
-
`containerWidth` is the total width of the SVG,\
|
|
21
|
-
`margins` define the space from the SVG edges that must be excluded before rendering the bars. It helps to prevent the bars from overlapping with the axis labels.
|
|
22
|
-
|
|
23
|
-
Construct a scale to define the geometry of the bars:
|
|
24
|
-
|
|
25
|
-
```
|
|
26
|
-
const xBarScale = d3ScaleBand()
|
|
27
|
-
.domain(this._xAxisLabels)
|
|
28
|
-
.range([this.margins.left! + MIN_DOMAIN_MARGIN, containerWidth - this.margins.right! - MIN_DOMAIN_MARGIN])
|
|
29
|
-
.paddingInner(2 / 3);
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
where\
|
|
33
|
-
`_xAxisLabels` is an array of labels in the x-axis,\
|
|
34
|
-
`paddingInner` is the ratio of the range that is reserved for blank space between bands (bars).
|
|
35
|
-
|
|
36
|
-
$$
|
|
37
|
-
paddingInner = {spaceBetweenBars \over spaceBetweenBars + barWidth}
|
|
38
|
-
$$
|
|
39
|
-
|
|
40
|
-
$$
|
|
41
|
-
spaceBetweenBars = 2 * barWidth
|
|
42
|
-
$$
|
|
43
|
-
|
|
44
|
-
$$
|
|
45
|
-
\implies paddingInner = {2 \over 3}
|
|
46
|
-
$$
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
### Problem
|
|
51
|
-
|
|
52
|
-
The bandwidth generated by the scale can be different from the bar width provided by the user.
|
|
53
|
-
|
|
54
|
-
### Solution
|
|
55
|
-
|
|
56
|
-
As per design specs, the default bar width is 16px. Users can adjust it with values ranging from 1px to 24px.
|
|
57
|
-
|
|
58
|
-
```
|
|
59
|
-
let barWidth = Math.min(this.props.barWidth || 16, 24);
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
The total space required to render the bars of provided width with 2:1 spacing:
|
|
63
|
-
|
|
64
|
-
```
|
|
65
|
-
const reqWidth = this._xAxisLabels.length * barWidth + (this._xAxisLabels.length - 1) * barWidth * 2;
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
where\
|
|
69
|
-
`_xAxisLabels.length` is equal to the maximum number of bars.
|
|
70
|
-
|
|
71
|
-
```
|
|
72
|
-
this._domainMargin = MIN_DOMAIN_MARGIN;
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
where\
|
|
76
|
-
`_domainMargin` keeps track of the blank space before the first bar and after the last bar.
|
|
77
|
-
|
|
78
|
-
If more space is available after rendering the bars, center align the chart.
|
|
79
|
-
|
|
80
|
-
```
|
|
81
|
-
if (totalWidth >= reqWidth) {
|
|
82
|
-
this._domainMargin += (totalWidth - reqWidth) / 2;
|
|
83
|
-
}
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
If more space is required to render the bars of provided width, decrease the bar width to maintain 2:1 spacing.
|
|
87
|
-
|
|
88
|
-
```
|
|
89
|
-
else {
|
|
90
|
-
const maxBandwidth = totalWidth / (this._xAxisLabels.length + (this._xAxisLabels.length - 1) * 2);
|
|
91
|
-
barWidth = maxBandwidth;
|
|
92
|
-
}
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
where\
|
|
96
|
-
`maxBandwidth` is the maximum possible bar width such that the bars can be rendered within the total available space with 2:1 spacing. Derived from the formula for `reqWidth`.
|
|
97
|
-
|
|
98
|
-
Make the adjusted bar width available to use everywhere inside the component:
|
|
99
|
-
|
|
100
|
-
```
|
|
101
|
-
this._barWidth = barWidth;
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
Update the scale range to take the extra space into account by replacing `MIN_DOMAIN_MARGIN` with `_domainMargin`:
|
|
105
|
-
|
|
106
|
-
```
|
|
107
|
-
const xBarScale = d3ScaleBand()
|
|
108
|
-
.domain(this._xAxisLabels)
|
|
109
|
-
.range([this.margins.left! + this._domainMargin, containerWidth - this.margins.right! - this._domainMargin])
|
|
110
|
-
.paddingInner(2 / 3);
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
### Problem
|
|
116
|
-
|
|
117
|
-
The domain (x-axis labels) doesn’t sync with the bars.
|
|
118
|
-
|
|
119
|
-
### Solution
|
|
120
|
-
|
|
121
|
-
Create a function to generate margins for the domain, taking the extra space into account:
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
_VerticalStackedBarChart.base.tsx_
|
|
125
|
-
|
|
126
|
-
Pass the function and the same inner padding to the `CartesianChart` common component where the axes are created:
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
_VerticalStackedBarChart.base.tsx_
|
|
130
|
-
|
|
131
|
-
Update parameters of the function that creates the axis:
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
_CartesianChart.base.tsx_
|
|
135
|
-
|
|
136
|
-
Set the inner padding while constructing the scale for the axis:
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
_utilities.ts_
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
### Special Case: GroupedVerticalBarChart
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
Construct a scale to define the geometry of the bars in a group:
|
|
148
|
-
|
|
149
|
-
```
|
|
150
|
-
const X1_INNER_PADDING = 0.1;
|
|
151
|
-
|
|
152
|
-
const xScale1 = d3ScaleBand()
|
|
153
|
-
.domain(this._keys)
|
|
154
|
-
.range([0, xScale0.bandwidth()])
|
|
155
|
-
.paddingInner(X1_INNER_PADDING);
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
where\
|
|
159
|
-
`_keys` is an array of strings that identify the bars in a group.
|
|
160
|
-
|
|
161
|
-
$$
|
|
162
|
-
x1InnerPadding = {spaceBetweenBars \over spaceBetweenBars + barWidth}
|
|
163
|
-
$$
|
|
164
|
-
|
|
165
|
-
$$
|
|
166
|
-
\implies spaceBetweenBars = {x1InnerPadding \over 1 - x1InnerPadding} * barWidth
|
|
167
|
-
$$
|
|
168
|
-
|
|
169
|
-
```
|
|
170
|
-
const BAR_GAP_RATE = X1_INNER_PADDING / (1 - X1_INNER_PADDING);
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
$$
|
|
174
|
-
\implies spaceBetweenBars = barGapRate * barWidth
|
|
175
|
-
$$
|
|
176
|
-
|
|
177
|
-
Construct a scale to define the geometry of the groups:
|
|
178
|
-
|
|
179
|
-
```
|
|
180
|
-
const xScale0 = d3ScaleBand()
|
|
181
|
-
.domain(this._xAxisLabels)
|
|
182
|
-
.range([this.margins.left! + this._domainMargin, containerWidth! - this.margins.right! - this._domainMargin])
|
|
183
|
-
.paddingInner(2 / (2 + this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE));
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
where\
|
|
187
|
-
`_keys.length` is equal to the number of bars in a group.
|
|
188
|
-
|
|
189
|
-
$$
|
|
190
|
-
x0InnerPadding = {spaceBetweenGroups \over spaceBetweenGroups + groupWidth}
|
|
191
|
-
$$
|
|
192
|
-
|
|
193
|
-
$$
|
|
194
|
-
spaceBetweenGroups = 2 * barWidth
|
|
195
|
-
$$
|
|
196
|
-
|
|
197
|
-
$$
|
|
198
|
-
groupWidth = numBarsInGroup * barWidth + (numBarsInGroup - 1) * spaceBetweenBars
|
|
199
|
-
$$
|
|
200
|
-
|
|
201
|
-
$$
|
|
202
|
-
\implies x0InnerPadding = {2 \over 2 + numBarsInGroup + (numBarsInGroup - 1) * barGapRate}
|
|
203
|
-
$$
|
|
204
|
-
|
|
205
|
-
Create a function to generate margins for the domain, taking the extra space into account:
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
_GroupedVerticalBarChart.base.tsx_
|
|
209
|
-
|
|
210
|
-
Pass the function and the same inner padding to the `CartesianChart` common component where the axes are created:
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
_GroupedVerticalBarChart.base.tsx_
|
|
214
|
-
|
|
215
|
-
**Note:** The bars and the x-axis use separate scales for rendering, and code changes are done to sync these scales. A better solution would be to share the same scale with both, but doing so will need a lot of refactoring in the shared/common code.
|