From cdf17645652a163ee31d94c121be899afafb12e5 Mon Sep 17 00:00:00 2001
From: John Mazzitelli <mazz@redhat.com>
Date: Fri, 20 Apr 2018 16:25:45 -0400
Subject: [PATCH] don't pass in percentages anymore - we are using a bar chart
 not pie chart so we should give it raw numbers.

---
 .../SummaryPanel/InOutRateChart.tsx           | 43 ++++++++++---------
 .../SummaryPanel/InOutRateTable.tsx           | 26 ++++-------
 src/components/SummaryPanel/RateChart.tsx     | 27 ++++++------
 src/components/SummaryPanel/RateTable.tsx     | 13 +++---
 4 files changed, 54 insertions(+), 55 deletions(-)

diff --git a/src/components/SummaryPanel/InOutRateChart.tsx b/src/components/SummaryPanel/InOutRateChart.tsx
index 13d127a826..a1e72bd852 100644
--- a/src/components/SummaryPanel/InOutRateChart.tsx
+++ b/src/components/SummaryPanel/InOutRateChart.tsx
@@ -2,14 +2,14 @@ import * as React from 'react';
 import { StackedBarChart } from 'patternfly-react';
 
 type InOutRateChartPropType = {
-  percent2xxIn: number;
-  percent3xxIn: number;
-  percent4xxIn: number;
-  percent5xxIn: number;
-  percent2xxOut: number;
-  percent3xxOut: number;
-  percent4xxOut: number;
-  percent5xxOut: number;
+  value2xxIn: number;
+  value3xxIn: number;
+  value4xxIn: number;
+  value5xxIn: number;
+  value2xxOut: number;
+  value3xxOut: number;
+  value4xxOut: number;
+  value5xxOut: number;
   width?: number;
   height?: number;
   showLegend?: boolean;
@@ -18,14 +18,14 @@ type InOutRateChartPropType = {
 
 export default class InOutRateChart extends React.Component<InOutRateChartPropType> {
   static defaultProps: InOutRateChartPropType = {
-    percent2xxIn: 0,
-    percent3xxIn: 0,
-    percent4xxIn: 0,
-    percent5xxIn: 0,
-    percent2xxOut: 0,
-    percent3xxOut: 0,
-    percent4xxOut: 0,
-    percent5xxOut: 0,
+    value2xxIn: 0,
+    value3xxIn: 0,
+    value4xxIn: 0,
+    value5xxIn: 0,
+    value2xxOut: 0,
+    value3xxOut: 0,
+    value4xxOut: 0,
+    value5xxOut: 0,
     height: 150,
     showLegend: true,
     legendPos: 'bottom'
@@ -53,15 +53,18 @@ export default class InOutRateChart extends React.Component<InOutRateChartPropTy
           x: {
             categories: ['In', 'Out'],
             type: 'category'
+          },
+          y: {
+            show: false
           }
         }}
         data={{
           groups: [['OK', '3xx', '4xx', '5xx']],
           columns: [
-            ['OK', this.props.percent2xxIn, this.props.percent2xxOut],
-            ['3xx', this.props.percent3xxIn, this.props.percent3xxOut],
-            ['4xx', this.props.percent4xxIn, this.props.percent4xxOut],
-            ['5xx', this.props.percent5xxIn, this.props.percent5xxOut]
+            ['OK', this.props.value2xxIn, this.props.value2xxOut],
+            ['3xx', this.props.value3xxIn, this.props.value3xxOut],
+            ['4xx', this.props.value4xxIn, this.props.value4xxOut],
+            ['5xx', this.props.value5xxIn, this.props.value5xxOut]
           ],
           // order: 'asc',
           colors: {
diff --git a/src/components/SummaryPanel/InOutRateTable.tsx b/src/components/SummaryPanel/InOutRateTable.tsx
index a2896b1727..c389a0f832 100644
--- a/src/components/SummaryPanel/InOutRateTable.tsx
+++ b/src/components/SummaryPanel/InOutRateTable.tsx
@@ -23,7 +23,7 @@ export default class InOutRateTable extends React.Component<InOutRateTablePropTy
     const percentInSuccess: number = 100 - percentInErr;
     const percentOutSuccess: number = 100 - percentOutErr;
 
-    // for the pie charts
+    // for the bar charts
     const rate2xxIn: number =
       this.props.inRate === 0
         ? 0
@@ -32,14 +32,6 @@ export default class InOutRateTable extends React.Component<InOutRateTablePropTy
       this.props.outRate === 0
         ? 0
         : this.props.outRate - this.props.outRate3xx - this.props.outRate4xx - this.props.outRate5xx;
-    const percent2xxIn: number = this.props.inRate === 0 ? 0 : rate2xxIn / this.props.inRate * 100;
-    const percent3xxIn: number = this.props.inRate === 0 ? 0 : this.props.inRate3xx / this.props.inRate * 100;
-    const percent4xxIn: number = this.props.inRate === 0 ? 0 : this.props.inRate4xx / this.props.inRate * 100;
-    const percent5xxIn: number = this.props.inRate === 0 ? 0 : this.props.inRate5xx / this.props.inRate * 100;
-    const percent2xxOut: number = this.props.outRate === 0 ? 0 : rate2xxOut / this.props.outRate * 100;
-    const percent3xxOut: number = this.props.outRate === 0 ? 0 : this.props.outRate3xx / this.props.outRate * 100;
-    const percent4xxOut: number = this.props.outRate === 0 ? 0 : this.props.outRate4xx / this.props.outRate * 100;
-    const percent5xxOut: number = this.props.outRate === 0 ? 0 : this.props.outRate5xx / this.props.outRate * 100;
 
     return (
       <div>
@@ -73,14 +65,14 @@ export default class InOutRateTable extends React.Component<InOutRateTablePropTy
             <tr>
               <td>
                 <InOutRateChart
-                  percent2xxIn={percent2xxIn}
-                  percent3xxIn={percent3xxIn}
-                  percent4xxIn={percent4xxIn}
-                  percent5xxIn={percent5xxIn}
-                  percent2xxOut={percent2xxOut}
-                  percent3xxOut={percent3xxOut}
-                  percent4xxOut={percent4xxOut}
-                  percent5xxOut={percent5xxOut}
+                  value2xxIn={rate2xxIn}
+                  value3xxIn={this.props.inRate3xx}
+                  value4xxIn={this.props.inRate4xx}
+                  value5xxIn={this.props.inRate5xx}
+                  value2xxOut={rate2xxOut}
+                  value3xxOut={this.props.inRate3xx}
+                  value4xxOut={this.props.inRate4xx}
+                  value5xxOut={this.props.inRate5xx}
                 />
               </td>
             </tr>
diff --git a/src/components/SummaryPanel/RateChart.tsx b/src/components/SummaryPanel/RateChart.tsx
index 4b27e5bc17..5c479359dd 100644
--- a/src/components/SummaryPanel/RateChart.tsx
+++ b/src/components/SummaryPanel/RateChart.tsx
@@ -2,10 +2,10 @@ import * as React from 'react';
 import { StackedBarChart } from 'patternfly-react';
 
 type RateChartPropType = {
-  percent2xx: number;
-  percent3xx: number;
-  percent4xx: number;
-  percent5xx: number;
+  value2xx: number;
+  value3xx: number;
+  value4xx: number;
+  value5xx: number;
   width?: number;
   height?: number;
   showLegend?: boolean;
@@ -14,10 +14,10 @@ type RateChartPropType = {
 
 export default class RateChart extends React.Component<RateChartPropType> {
   static defaultProps: RateChartPropType = {
-    percent2xx: 0,
-    percent3xx: 0,
-    percent4xx: 0,
-    percent5xx: 0,
+    value2xx: 0,
+    value3xx: 0,
+    value4xx: 0,
+    value5xx: 0,
     height: 100,
     showLegend: true,
     legendPos: 'bottom'
@@ -45,15 +45,18 @@ export default class RateChart extends React.Component<RateChartPropType> {
           x: {
             categories: [''],
             type: 'category'
+          },
+          y: {
+            show: false
           }
         }}
         data={{
           groups: [['OK', '3xx', '4xx', '5xx']],
           columns: [
-            ['OK', this.props.percent2xx],
-            ['3xx', this.props.percent3xx],
-            ['4xx', this.props.percent4xx],
-            ['5xx', this.props.percent5xx]
+            ['OK', this.props.value2xx],
+            ['3xx', this.props.value3xx],
+            ['4xx', this.props.value4xx],
+            ['5xx', this.props.value5xx]
           ],
           // order: 'asc',
           colors: {
diff --git a/src/components/SummaryPanel/RateTable.tsx b/src/components/SummaryPanel/RateTable.tsx
index 89d7f160d3..7c4837cc4d 100644
--- a/src/components/SummaryPanel/RateTable.tsx
+++ b/src/components/SummaryPanel/RateTable.tsx
@@ -16,13 +16,9 @@ export default class RateTable extends React.Component<RateTablePropType, {}> {
     const percentErr: number = this.props.rate === 0 ? 0 : errRate / this.props.rate * 100;
     const successErr: number = 100 - percentErr;
 
-    // for the pie chart
+    // for the bar chart
     const rate2xx: number =
       this.props.rate === 0 ? 0 : this.props.rate - this.props.rate3xx - this.props.rate4xx - this.props.rate5xx;
-    const percent2xx: number = this.props.rate === 0 ? 0 : rate2xx / this.props.rate * 100;
-    const percent3xx: number = this.props.rate === 0 ? 0 : this.props.rate3xx / this.props.rate * 100;
-    const percent4xx: number = this.props.rate === 0 ? 0 : this.props.rate4xx / this.props.rate * 100;
-    const percent5xx: number = this.props.rate === 0 ? 0 : this.props.rate5xx / this.props.rate * 100;
 
     return (
       <div>
@@ -43,7 +39,12 @@ export default class RateTable extends React.Component<RateTablePropType, {}> {
             </tr>
           </tbody>
         </table>
-        <RateChart percent2xx={percent2xx} percent3xx={percent3xx} percent4xx={percent4xx} percent5xx={percent5xx} />
+        <RateChart
+          value2xx={rate2xx}
+          value3xx={this.props.rate3xx}
+          value4xx={this.props.rate4xx}
+          value5xx={this.props.rate5xx}
+        />
       </div>
     );
   }