Skip to content

Commit 49c3b94

Browse files
jeff-phillips-18dtaylor113
jeff-phillips-18
authored and
dtaylor113
committed
feat(BulletChart): Add Thresholds to Legend (#1074)
1 parent 30c31bb commit 49c3b94

File tree

8 files changed

+299
-0
lines changed

8 files changed

+299
-0
lines changed

‎packages/patternfly-3/patternfly-react/less/charts.less‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.bullet-chart-pf-legend-item-box {
2+
&.error {
3+
background-color: @alert-danger-border;
4+
}
5+
6+
&.warning {
7+
background-color: @alert-warning-border;
8+
}
9+
}

‎packages/patternfly-3/patternfly-react/less/patternfly-react.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
Patternfly React Specific Extensions
33
*/
44
@import 'card';
5+
@import 'charts';
56
@import 'utilization-bar';
67
@import 'breadcrumb';
78
@import 'label-remove';

‎packages/patternfly-3/patternfly-react/sass/patternfly-react/_charts.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.bullet-chart-pf-legend-item-box {
2+
&.error {
3+
background-color: $alert-danger-border;
4+
}
5+
6+
&.warning {
7+
background-color: $alert-warning-border;
8+
}
9+
}

‎packages/patternfly-3/patternfly-react/sass/patternfly-react/_patternfly-react.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
Patternfly React Partials
33
*/
44
@import 'card';
5+
@import 'charts';
56
@import 'utilization-bar';
67
@import 'breadcrumb';
78
@import 'label-remove';

‎packages/patternfly-3/patternfly-react/src/components/Chart/BulletChart/BulletChart.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,13 @@ const BulletChart = ({
4646
useDots,
4747
useExtendedColors,
4848
thresholdWarning,
49+
thresholdWarningLegendText,
50+
thresholdWarningLegendTextFunction,
51+
thresholdWarningTooltipFunction,
4952
thresholdError,
53+
thresholdErrorLegendText,
54+
thresholdErrorLegendTextFunction,
55+
thresholdErrorTooltipFunction,
5056
ranges,
5157
showAxis,
5258
customAxis,
@@ -119,6 +125,16 @@ const BulletChart = ({
119125
return customLegend;
120126
}
121127

128+
const warningThreshold = thresholdWarningLegendTextFunction(thresholdWarning) || thresholdWarningLegendText;
129+
const errorThreshold = thresholdErrorLegendTextFunction(thresholdError) || thresholdErrorLegendText;
130+
const thresholdTipFunction = (title, value) => {
131+
if (thresholdWarningTooltipFunction) {
132+
return thresholdWarningTooltipFunction(title, value);
133+
}
134+
const tipText = `${title}: ${value}${percents ? '%' : ''}`;
135+
return <Tooltip id={randomId()}>{tipText}</Tooltip>;
136+
};
137+
122138
return (
123139
<BulletChartLegend>
124140
{displayValues.map((value, index) => {
@@ -169,6 +185,22 @@ const BulletChart = ({
169185

170186
return null;
171187
})}
188+
{warningThreshold && (
189+
<BulletChartLegendItem
190+
title={warningThreshold}
191+
value={thresholdWarning}
192+
boxClassName="warning"
193+
tooltipFunction={thresholdTipFunction}
194+
/>
195+
)}
196+
{errorThreshold && (
197+
<BulletChartLegendItem
198+
title={errorThreshold}
199+
value={thresholdError}
200+
boxClassName="error"
201+
tooltipFunction={thresholdTipFunction}
202+
/>
203+
)}
172204
</BulletChartLegend>
173205
);
174206
}
@@ -299,8 +331,20 @@ BulletChart.propTypes = {
299331
useExtendedColors: PropTypes.bool,
300332
/** Warning threshold (optional), warning measure line drawn at this point */
301333
thresholdWarning: PropTypes.number,
334+
/** Warning threshold legend text (optional), text to show in the legend for the warning threshold */
335+
thresholdWarningLegendText: PropTypes.string,
336+
/** Warning threshold legend text function(warningValue), function to return text to show in the legend for the warning threshold */
337+
thresholdWarningLegendTextFunction: PropTypes.func,
338+
/** Warning threshold legend tooltip function(text, value), function to return tooltip for the legend */
339+
thresholdWarningTooltipFunction: PropTypes.func,
302340
/** Error threshold (optional), error measure line drawn at this point */
303341
thresholdError: PropTypes.number,
342+
/** Error threshold legend text (optional), text to show in the legend for the warning threshold */
343+
thresholdErrorLegendText: PropTypes.string,
344+
/** Error threshold legend text function(text, value), function to return text to show in the legend for the warning threshold */
345+
thresholdErrorLegendTextFunction: PropTypes.func,
346+
/** Error threshold legend tooltip function(warningValue), function to return tooltip for the legend */
347+
thresholdErrorTooltipFunction: PropTypes.func,
304348
/** Ranges, array of range bars (3 maximum, additional ranges will be ignored) */
305349
ranges: PropTypes.arrayOf(
306350
PropTypes.shape({
@@ -334,7 +378,13 @@ BulletChart.defaultProps = {
334378
useDots: false,
335379
useExtendedColors: false,
336380
thresholdWarning: 70,
381+
thresholdWarningLegendText: null,
382+
thresholdWarningLegendTextFunction: helpers.noop,
383+
thresholdWarningTooltipFunction: null,
337384
thresholdError: 90,
385+
thresholdErrorLegendText: null,
386+
thresholdErrorLegendTextFunction: helpers.noop,
387+
thresholdErrorTooltipFunction: null,
338388
ranges: null,
339389
showAxis: true,
340390
customAxis: null,

‎packages/patternfly-3/patternfly-react/src/components/Chart/BulletChart/BulletChart.test.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,29 @@ test('BulletChart renders properly with all fields', () => {
107107
values={values}
108108
thresholdError={10}
109109
thresholdWarning={20}
110+
thresholdErrorLegendText="TEST Error"
111+
thresholdWarningLegendText="TEST Warning"
112+
ranges={goodRanges}
113+
showLegend
114+
/>
115+
).getElement()
116+
).toMatchSnapshot();
117+
});
118+
119+
test('BulletChart prioritizes on legend text function', () => {
120+
expect(
121+
shallow(
122+
<BulletChart
123+
id="bullet-all"
124+
label="Test Label"
125+
details="Test Details"
126+
values={values}
127+
thresholdError={10}
128+
thresholdWarning={20}
129+
thresholdErrorLegendText="TEST Error"
130+
thresholdWarningegendText="TEST Warning"
131+
thresholdErrorLegendTextFunction={() => 'TEST Error Function'}
132+
thresholdWarningLegendTextFunction={() => 'TEST Warning Function'}
110133
ranges={goodRanges}
111134
showLegend
112135
/>

‎packages/patternfly-3/patternfly-react/src/components/Chart/BulletChart/__snapshots__/BulletChart.test.js.snap‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,193 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`BulletChart prioritizes on legend text function 1`] = `
4+
<div
5+
className="bullet-chart-pf"
6+
>
7+
<div
8+
className="bullet-chart-pf-chart"
9+
>
10+
<BulletChartTitle
11+
className=""
12+
details="Test Details"
13+
label="Test Label"
14+
/>
15+
<div
16+
className="bullet-chart-pf-container show-axis"
17+
>
18+
<div
19+
className="bullet-chart-pf-data-container"
20+
>
21+
<div
22+
className="bullet-chart-pf-values-container"
23+
>
24+
<BulletChartValue
25+
className=""
26+
dot={false}
27+
maxValue={100}
28+
percent={true}
29+
prevValue={0}
30+
value={
31+
Object {
32+
"color": "#39a5dc",
33+
"title": "data1",
34+
"tooltipFunction": [Function],
35+
"value": 10,
36+
}
37+
}
38+
vertical={false}
39+
/>
40+
<BulletChartValue
41+
className=""
42+
dot={false}
43+
maxValue={100}
44+
percent={true}
45+
prevValue={0}
46+
value={
47+
Object {
48+
"color": "#0088ce",
49+
"title": "data2",
50+
"tooltipId": "data2-tooltip",
51+
"value": 20,
52+
}
53+
}
54+
vertical={false}
55+
/>
56+
</div>
57+
<BulletChartThreshold
58+
className="warning"
59+
maxValue={100}
60+
percent={true}
61+
threshold={20}
62+
vertical={false}
63+
/>
64+
<BulletChartThreshold
65+
className="error"
66+
maxValue={100}
67+
percent={true}
68+
threshold={10}
69+
vertical={false}
70+
/>
71+
<BulletChartRange
72+
className=""
73+
color=""
74+
index={1}
75+
maxValue={100}
76+
percent={true}
77+
value={50}
78+
vertical={false}
79+
/>
80+
<BulletChartRange
81+
className=""
82+
color=""
83+
index={2}
84+
maxValue={100}
85+
percent={true}
86+
value={70}
87+
vertical={false}
88+
/>
89+
<BulletChartRange
90+
className=""
91+
color=""
92+
index={3}
93+
maxValue={100}
94+
percent={true}
95+
value={100}
96+
vertical={false}
97+
/>
98+
</div>
99+
<BulletChartAxis
100+
className=""
101+
>
102+
<BulletChartAxisTic
103+
className=""
104+
value={0}
105+
vertical={false}
106+
/>
107+
<BulletChartAxisTic
108+
className=""
109+
value={25}
110+
vertical={false}
111+
/>
112+
<BulletChartAxisTic
113+
className=""
114+
value={50}
115+
vertical={false}
116+
/>
117+
<BulletChartAxisTic
118+
className=""
119+
value={75}
120+
vertical={false}
121+
/>
122+
<BulletChartAxisTic
123+
className=""
124+
value={100}
125+
vertical={false}
126+
/>
127+
</BulletChartAxis>
128+
</div>
129+
<span
130+
className="bullet-chart-pf-overflow"
131+
/>
132+
</div>
133+
<BulletChartLegend
134+
className=""
135+
>
136+
<BulletChartLegendItem
137+
boxClassName=""
138+
className=""
139+
color="#39a5dc"
140+
title="data1"
141+
tooltipFunction={[Function]}
142+
value={10}
143+
/>
144+
<BulletChartLegendItem
145+
boxClassName=""
146+
className=""
147+
color="#0088ce"
148+
title="data2"
149+
tooltipFunction={[Function]}
150+
value={20}
151+
/>
152+
<BulletChartLegendItem
153+
boxClassName="range-0"
154+
className=""
155+
title="Range 1"
156+
tooltipFunction={[Function]}
157+
value={50}
158+
/>
159+
<BulletChartLegendItem
160+
boxClassName="range-1"
161+
className=""
162+
title="Range 2"
163+
tooltipFunction={[Function]}
164+
value={70}
165+
/>
166+
<BulletChartLegendItem
167+
boxClassName="range-2"
168+
className=""
169+
title="Range 3"
170+
tooltipFunction={[Function]}
171+
value={100}
172+
/>
173+
<BulletChartLegendItem
174+
boxClassName="warning"
175+
className=""
176+
title="TEST Warning Function"
177+
tooltipFunction={[Function]}
178+
value={20}
179+
/>
180+
<BulletChartLegendItem
181+
boxClassName="error"
182+
className=""
183+
title="TEST Error Function"
184+
tooltipFunction={[Function]}
185+
value={10}
186+
/>
187+
</BulletChartLegend>
188+
</div>
189+
`;
190+
3191
exports[`BulletChart renders custom Axis properly 1`] = `
4192
<div
5193
className="bullet-chart-pf"
@@ -1263,6 +1451,20 @@ exports[`BulletChart renders properly with all fields 1`] = `
12631451
tooltipFunction={[Function]}
12641452
value={100}
12651453
/>
1454+
<BulletChartLegendItem
1455+
boxClassName="warning"
1456+
className=""
1457+
title="TEST Warning"
1458+
tooltipFunction={[Function]}
1459+
value={20}
1460+
/>
1461+
<BulletChartLegendItem
1462+
boxClassName="error"
1463+
className=""
1464+
title="TEST Error"
1465+
tooltipFunction={[Function]}
1466+
value={10}
1467+
/>
12661468
</BulletChartLegend>
12671469
</div>
12681470
`;

‎packages/patternfly-3/patternfly-react/src/components/Chart/Stories/BulletChartStory.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,7 @@ const bulletChart = stories => {
164164
},
165165
'Thresholds'
166166
);
167+
const thresholdWarningText = text('Warning Threshold Text', '', 'Legend');
167168

168169
const showErrorThreshold = boolean('Show Error Threshold', true, 'Thresholds');
169170
const thresholdError = number(
@@ -177,6 +178,7 @@ const bulletChart = stories => {
177178
},
178179
'Thresholds'
179180
);
181+
const thresholdErrorText = text('Error Threshold Text', '', 'Legend');
180182

181183
const showRange1 = boolean('Show Range 1', true, 'Ranges');
182184
const range1 = number(
@@ -347,7 +349,9 @@ const bulletChart = stories => {
347349
values={values}
348350
useDots={useDots}
349351
thresholdError={showErrorThreshold ? thresholdError : 0}
352+
thresholdErrorLegendText={thresholdErrorText}
350353
thresholdWarning={showWarnThreshold ? thresholdWarning : 0}
354+
thresholdWarningLegendText={thresholdWarningText}
351355
ranges={ranges}
352356
showAxis={showAxis}
353357
showLegend={showLegend}

0 commit comments

Comments
 (0)