feat(BulletChart): Add Thresholds to Legend (patternfly#1074)

redallen · Dec 18, 2018 · 49c3b94 · 49c3b94
1 parent 30c31bb
commit 49c3b94
Show file tree

Hide file tree

Showing 8 changed files with 299 additions and 0 deletions.
diff --git a/packages/patternfly-3/patternfly-react/less/charts.less b/packages/patternfly-3/patternfly-react/less/charts.less
@@ -0,0 +1,9 @@
+.bullet-chart-pf-legend-item-box {
+  &.error {
+    background-color: @alert-danger-border;
+  }
+
+  &.warning {
+    background-color: @alert-warning-border;
+  }
+}
diff --git a/packages/patternfly-3/patternfly-react/less/patternfly-react.less b/packages/patternfly-3/patternfly-react/less/patternfly-react.less
@@ -2,6 +2,7 @@
   Patternfly React Specific Extensions
 */
 @import 'card';
+@import 'charts';
 @import 'utilization-bar';
 @import 'breadcrumb';
 @import 'label-remove';

diff --git a/packages/patternfly-3/patternfly-react/sass/patternfly-react/_charts.scss b/packages/patternfly-3/patternfly-react/sass/patternfly-react/_charts.scss
@@ -0,0 +1,9 @@
+.bullet-chart-pf-legend-item-box {
+  &.error {
+    background-color: $alert-danger-border;
+  }
+
+  &.warning {
+    background-color: $alert-warning-border;
+  }
+}
diff --git a/packages/patternfly-3/patternfly-react/sass/patternfly-react/_patternfly-react.scss b/packages/patternfly-3/patternfly-react/sass/patternfly-react/_patternfly-react.scss
@@ -2,6 +2,7 @@
   Patternfly React Partials
 */
 @import 'card';
+@import 'charts';
 @import 'utilization-bar';
 @import 'breadcrumb';
 @import 'label-remove';

diff --git a/packages/patternfly-3/patternfly-react/src/components/Chart/BulletChart/BulletChart.js b/packages/patternfly-3/patternfly-react/src/components/Chart/BulletChart/BulletChart.js
@@ -46,7 +46,13 @@ const BulletChart = ({
   useDots,
   useExtendedColors,
   thresholdWarning,
+  thresholdWarningLegendText,
+  thresholdWarningLegendTextFunction,
+  thresholdWarningTooltipFunction,
   thresholdError,
+  thresholdErrorLegendText,
+  thresholdErrorLegendTextFunction,
+  thresholdErrorTooltipFunction,
   ranges,
   showAxis,
   customAxis,
@@ -119,6 +125,16 @@ const BulletChart = ({
         return customLegend;
       }
 
+      const warningThreshold = thresholdWarningLegendTextFunction(thresholdWarning) || thresholdWarningLegendText;
+      const errorThreshold = thresholdErrorLegendTextFunction(thresholdError) || thresholdErrorLegendText;
+      const thresholdTipFunction = (title, value) => {
+        if (thresholdWarningTooltipFunction) {
+          return thresholdWarningTooltipFunction(title, value);
+        }
+        const tipText = `${title}: ${value}${percents ? '%' : ''}`;
+        return <Tooltip id={randomId()}>{tipText}</Tooltip>;
+      };
+
       return (
         <BulletChartLegend>
           {displayValues.map((value, index) => {
@@ -169,6 +185,22 @@ const BulletChart = ({
 
             return null;
           })}
+          {warningThreshold && (
+            <BulletChartLegendItem
+              title={warningThreshold}
+              value={thresholdWarning}
+              boxClassName="warning"
+              tooltipFunction={thresholdTipFunction}
+            />
+          )}
+          {errorThreshold && (
+            <BulletChartLegendItem
+              title={errorThreshold}
+              value={thresholdError}
+              boxClassName="error"
+              tooltipFunction={thresholdTipFunction}
+            />
+          )}
         </BulletChartLegend>
       );
     }
@@ -299,8 +331,20 @@ BulletChart.propTypes = {
   useExtendedColors: PropTypes.bool,
   /** Warning threshold (optional), warning measure line drawn at this point */
   thresholdWarning: PropTypes.number,
+  /** Warning threshold legend text (optional), text to show in the legend for the warning threshold */
+  thresholdWarningLegendText: PropTypes.string,
+  /** Warning threshold legend text function(warningValue), function to return text to show in the legend for the warning threshold */
+  thresholdWarningLegendTextFunction: PropTypes.func,
+  /** Warning threshold legend tooltip function(text, value), function to return tooltip for the legend */
+  thresholdWarningTooltipFunction: PropTypes.func,
   /** Error threshold (optional), error measure line drawn at this point */
   thresholdError: PropTypes.number,
+  /** Error threshold legend text (optional), text to show in the legend for the warning threshold */
+  thresholdErrorLegendText: PropTypes.string,
+  /** Error threshold legend text function(text, value), function to return text to show in the legend for the warning threshold */
+  thresholdErrorLegendTextFunction: PropTypes.func,
+  /** Error threshold legend tooltip function(warningValue), function to return tooltip for the legend */
+  thresholdErrorTooltipFunction: PropTypes.func,
   /** Ranges, array of range bars (3 maximum, additional ranges will be ignored) */
   ranges: PropTypes.arrayOf(
     PropTypes.shape({
@@ -334,7 +378,13 @@ BulletChart.defaultProps = {
   useDots: false,
   useExtendedColors: false,
   thresholdWarning: 70,
+  thresholdWarningLegendText: null,
+  thresholdWarningLegendTextFunction: helpers.noop,
+  thresholdWarningTooltipFunction: null,
   thresholdError: 90,
+  thresholdErrorLegendText: null,
+  thresholdErrorLegendTextFunction: helpers.noop,
+  thresholdErrorTooltipFunction: null,
   ranges: null,
   showAxis: true,
   customAxis: null,

diff --git a/packages/patternfly-3/patternfly-react/src/components/Chart/BulletChart/BulletChart.test.js b/packages/patternfly-3/patternfly-react/src/components/Chart/BulletChart/BulletChart.test.js
@@ -107,6 +107,29 @@ test('BulletChart renders properly with all fields', () => {
         values={values}
         thresholdError={10}
         thresholdWarning={20}
+        thresholdErrorLegendText="TEST Error"
+        thresholdWarningLegendText="TEST Warning"
+        ranges={goodRanges}
+        showLegend
+      />
+    ).getElement()
+  ).toMatchSnapshot();
+});
+
+test('BulletChart prioritizes on legend text function', () => {
+  expect(
+    shallow(
+      <BulletChart
+        id="bullet-all"
+        label="Test Label"
+        details="Test Details"
+        values={values}
+        thresholdError={10}
+        thresholdWarning={20}
+        thresholdErrorLegendText="TEST Error"
+        thresholdWarningegendText="TEST Warning"
+        thresholdErrorLegendTextFunction={() => 'TEST Error Function'}
+        thresholdWarningLegendTextFunction={() => 'TEST Warning Function'}
         ranges={goodRanges}
         showLegend
       />

diff --git a/.../patternfly-react/src/components/Chart/BulletChart/__snapshots__/BulletChart.test.js.snap b/.../patternfly-react/src/components/Chart/BulletChart/__snapshots__/BulletChart.test.js.snap
@@ -1,5 +1,193 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`BulletChart prioritizes on legend text function 1`] = `
+<div
+  className="bullet-chart-pf"
+>
+  <div
+    className="bullet-chart-pf-chart"
+  >
+    <BulletChartTitle
+      className=""
+      details="Test Details"
+      label="Test Label"
+    />
+    <div
+      className="bullet-chart-pf-container show-axis"
+    >
+      <div
+        className="bullet-chart-pf-data-container"
+      >
+        <div
+          className="bullet-chart-pf-values-container"
+        >
+          <BulletChartValue
+            className=""
+            dot={false}
+            maxValue={100}
+            percent={true}
+            prevValue={0}
+            value={
+              Object {
+                "color": "#39a5dc",
+                "title": "data1",
+                "tooltipFunction": [Function],
+                "value": 10,
+              }
+            }
+            vertical={false}
+          />
+          <BulletChartValue
+            className=""
+            dot={false}
+            maxValue={100}
+            percent={true}
+            prevValue={0}
+            value={
+              Object {
+                "color": "#0088ce",
+                "title": "data2",
+                "tooltipId": "data2-tooltip",
+                "value": 20,
+              }
+            }
+            vertical={false}
+          />
+        </div>
+        <BulletChartThreshold
+          className="warning"
+          maxValue={100}
+          percent={true}
+          threshold={20}
+          vertical={false}
+        />
+        <BulletChartThreshold
+          className="error"
+          maxValue={100}
+          percent={true}
+          threshold={10}
+          vertical={false}
+        />
+        <BulletChartRange
+          className=""
+          color=""
+          index={1}
+          maxValue={100}
+          percent={true}
+          value={50}
+          vertical={false}
+        />
+        <BulletChartRange
+          className=""
+          color=""
+          index={2}
+          maxValue={100}
+          percent={true}
+          value={70}
+          vertical={false}
+        />
+        <BulletChartRange
+          className=""
+          color=""
+          index={3}
+          maxValue={100}
+          percent={true}
+          value={100}
+          vertical={false}
+        />
+      </div>
+      <BulletChartAxis
+        className=""
+      >
+        <BulletChartAxisTic
+          className=""
+          value={0}
+          vertical={false}
+        />
+        <BulletChartAxisTic
+          className=""
+          value={25}
+          vertical={false}
+        />
+        <BulletChartAxisTic
+          className=""
+          value={50}
+          vertical={false}
+        />
+        <BulletChartAxisTic
+          className=""
+          value={75}
+          vertical={false}
+        />
+        <BulletChartAxisTic
+          className=""
+          value={100}
+          vertical={false}
+        />
+      </BulletChartAxis>
+    </div>
+    <span
+      className="bullet-chart-pf-overflow"
+    />
+  </div>
+  <BulletChartLegend
+    className=""
+  >
+    <BulletChartLegendItem
+      boxClassName=""
+      className=""
+      color="#39a5dc"
+      title="data1"
+      tooltipFunction={[Function]}
+      value={10}
+    />
+    <BulletChartLegendItem
+      boxClassName=""
+      className=""
+      color="#0088ce"
+      title="data2"
+      tooltipFunction={[Function]}
+      value={20}
+    />
+    <BulletChartLegendItem
+      boxClassName="range-0"
+      className=""
+      title="Range 1"
+      tooltipFunction={[Function]}
+      value={50}
+    />
+    <BulletChartLegendItem
+      boxClassName="range-1"
+      className=""
+      title="Range 2"
+      tooltipFunction={[Function]}
+      value={70}
+    />
+    <BulletChartLegendItem
+      boxClassName="range-2"
+      className=""
+      title="Range 3"
+      tooltipFunction={[Function]}
+      value={100}
+    />
+    <BulletChartLegendItem
+      boxClassName="warning"
+      className=""
+      title="TEST Warning Function"
+      tooltipFunction={[Function]}
+      value={20}
+    />
+    <BulletChartLegendItem
+      boxClassName="error"
+      className=""
+      title="TEST Error Function"
+      tooltipFunction={[Function]}
+      value={10}
+    />
+  </BulletChartLegend>
+</div>
+`;
+
 exports[`BulletChart renders custom Axis properly 1`] = `
 <div
   className="bullet-chart-pf"
@@ -1263,6 +1451,20 @@ exports[`BulletChart renders properly with all fields 1`] = `
       tooltipFunction={[Function]}
       value={100}
     />
+    <BulletChartLegendItem
+      boxClassName="warning"
+      className=""
+      title="TEST Warning"
+      tooltipFunction={[Function]}
+      value={20}
+    />
+    <BulletChartLegendItem
+      boxClassName="error"
+      className=""
+      title="TEST Error"
+      tooltipFunction={[Function]}
+      value={10}
+    />
   </BulletChartLegend>
 </div>
 `;

diff --git a/packages/patternfly-3/patternfly-react/src/components/Chart/Stories/BulletChartStory.js b/packages/patternfly-3/patternfly-react/src/components/Chart/Stories/BulletChartStory.js
@@ -164,6 +164,7 @@ const bulletChart = stories => {
         },
         'Thresholds'
       );
+      const thresholdWarningText = text('Warning Threshold Text', '', 'Legend');
 
       const showErrorThreshold = boolean('Show Error Threshold', true, 'Thresholds');
       const thresholdError = number(
@@ -177,6 +178,7 @@ const bulletChart = stories => {
         },
         'Thresholds'
       );
+      const thresholdErrorText = text('Error Threshold Text', '', 'Legend');
 
       const showRange1 = boolean('Show Range 1', true, 'Ranges');
       const range1 = number(
@@ -347,7 +349,9 @@ const bulletChart = stories => {
               values={values}
               useDots={useDots}
               thresholdError={showErrorThreshold ? thresholdError : 0}
+              thresholdErrorLegendText={thresholdErrorText}
               thresholdWarning={showWarnThreshold ? thresholdWarning : 0}
+              thresholdWarningLegendText={thresholdWarningText}
               ranges={ranges}
               showAxis={showAxis}
               showLegend={showLegend}