From 9b998ca9feb80f66d38b2e0fa9561b5d5225123f Mon Sep 17 00:00:00 2001
From: John Mazzitelli <mazz@redhat.com>
Date: Fri, 20 Apr 2018 14:40:38 -0400
Subject: [PATCH] use stacked bar chart

---
 .../SummaryPanel/ErrorRatePieChart.tsx        | 53 -------------
 .../SummaryPanel/InOutRateChart.tsx           | 77 +++++++++++++++++++
 .../SummaryPanel/InOutRateTable.tsx           | 34 ++++----
 src/components/SummaryPanel/RateChart.tsx     | 69 +++++++++++++++++
 src/components/SummaryPanel/RateTable.tsx     |  9 +--
 5 files changed, 163 insertions(+), 79 deletions(-)
 delete mode 100644 src/components/SummaryPanel/ErrorRatePieChart.tsx
 create mode 100644 src/components/SummaryPanel/InOutRateChart.tsx
 create mode 100644 src/components/SummaryPanel/RateChart.tsx

diff --git a/src/components/SummaryPanel/ErrorRatePieChart.tsx b/src/components/SummaryPanel/ErrorRatePieChart.tsx
deleted file mode 100644
index 2ff1918e0f..0000000000
--- a/src/components/SummaryPanel/ErrorRatePieChart.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { PieChart } from 'patternfly-react';
-
-type ErrorRatePieChartPropType = {
-  percent2xx: number;
-  percent3xx: number;
-  percent4xx: number;
-  percent5xx: number;
-  width?: number;
-  height?: number;
-  showLegend?: boolean;
-  legendPos?: string; // e.g. right, left
-};
-
-export default class ErrorRatePieChart extends React.Component<ErrorRatePieChartPropType> {
-  static defaultProps: ErrorRatePieChartPropType = {
-    percent2xx: 0,
-    percent3xx: 0,
-    percent4xx: 0,
-    percent5xx: 0,
-    width: 230,
-    height: 110,
-    showLegend: true,
-    legendPos: 'bottom'
-  };
-
-  constructor(props: ErrorRatePieChartPropType) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <PieChart
-        size={{ width: this.props.width, height: this.props.height }}
-        data={{
-          colors: {
-            '%OK': '#0088ce', // pf-blue-400
-            '%3xx': '#92d400', // pf-light-green-400
-            '%4xx': '#ec7a08', // pf-orange-400
-            '%5xx': '#8b0000' // pf-red-300
-          },
-          columns: [
-            ['%OK', this.props.percent2xx + 50],
-            ['%3xx', this.props.percent3xx + 40],
-            ['%4xx', this.props.percent4xx + 20],
-            ['%5xx', this.props.percent5xx + 10]
-          ]
-        }}
-        legend={{ show: this.props.showLegend, position: this.props.legendPos }}
-      />
-    );
-  }
-}
diff --git a/src/components/SummaryPanel/InOutRateChart.tsx b/src/components/SummaryPanel/InOutRateChart.tsx
new file mode 100644
index 0000000000..b7a136378a
--- /dev/null
+++ b/src/components/SummaryPanel/InOutRateChart.tsx
@@ -0,0 +1,77 @@
+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;
+  width?: number;
+  height?: number;
+  showLegend?: boolean;
+  legendPos?: string; // e.g. right, left
+};
+
+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,
+    height: 150,
+    showLegend: true,
+    legendPos: 'bottom'
+  };
+
+  constructor(props: InOutRateChartPropType) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <StackedBarChart
+        size={{ height: this.props.height }}
+        legend={{ show: this.props.showLegend, position: this.props.legendPos }}
+        grid={{
+          x: {
+            show: false
+          },
+          y: {
+            show: false
+          }
+        }}
+        axis={{
+          rotated: true,
+          x: {
+            categories: ['In', 'Out'],
+            type: 'category'
+          }
+        }}
+        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]
+          ],
+          // order: 'asc',
+          colors: {
+            'OK': '#0088ce', // pf-blue-400
+            '3xx': '#3f9c35', // pf-green-400
+            '4xx': '#ec7a08', // pf-orange-400
+            '5xx': '#cc0000' // pf-red-100
+          }
+        }}
+      />
+    );
+  }
+}
diff --git a/src/components/SummaryPanel/InOutRateTable.tsx b/src/components/SummaryPanel/InOutRateTable.tsx
index 27a19b0c53..a2896b1727 100644
--- a/src/components/SummaryPanel/InOutRateTable.tsx
+++ b/src/components/SummaryPanel/InOutRateTable.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ErrorRatePieChart from './ErrorRatePieChart';
+import InOutRateChart from './InOutRateChart';
 
 type InOutRateTablePropType = {
   title: string;
@@ -66,25 +66,21 @@ export default class InOutRateTable extends React.Component<InOutRateTablePropTy
               <td>{percentOutSuccess.toFixed(2)}</td>
               <td>{percentOutErr.toFixed(2)}</td>
             </tr>
+          </tbody>
+        </table>
+        <table className="table">
+          <tbody>
             <tr>
-              <td>In</td>
-              <td colSpan={5}>
-                <ErrorRatePieChart
-                  percent2xx={percent2xxIn}
-                  percent3xx={percent3xxIn}
-                  percent4xx={percent4xxIn}
-                  percent5xx={percent5xxIn}
-                />
-              </td>
-            </tr>
-            <tr>
-              <td>Out</td>
-              <td colSpan={5}>
-                <ErrorRatePieChart
-                  percent2xx={percent2xxOut}
-                  percent3xx={percent3xxOut}
-                  percent4xx={percent4xxOut}
-                  percent5xx={percent5xxOut}
+              <td>
+                <InOutRateChart
+                  percent2xxIn={percent2xxIn}
+                  percent3xxIn={percent3xxIn}
+                  percent4xxIn={percent4xxIn}
+                  percent5xxIn={percent5xxIn}
+                  percent2xxOut={percent2xxOut}
+                  percent3xxOut={percent3xxOut}
+                  percent4xxOut={percent4xxOut}
+                  percent5xxOut={percent5xxOut}
                 />
               </td>
             </tr>
diff --git a/src/components/SummaryPanel/RateChart.tsx b/src/components/SummaryPanel/RateChart.tsx
new file mode 100644
index 0000000000..79f466be47
--- /dev/null
+++ b/src/components/SummaryPanel/RateChart.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { StackedBarChart } from 'patternfly-react';
+
+type RateChartPropType = {
+  percent2xx: number;
+  percent3xx: number;
+  percent4xx: number;
+  percent5xx: number;
+  width?: number;
+  height?: number;
+  showLegend?: boolean;
+  legendPos?: string; // e.g. right, left
+};
+
+export default class RateChart extends React.Component<RateChartPropType> {
+  static defaultProps: RateChartPropType = {
+    percent2xx: 0,
+    percent3xx: 0,
+    percent4xx: 0,
+    percent5xx: 0,
+    height: 100,
+    showLegend: true,
+    legendPos: 'bottom'
+  };
+
+  constructor(props: RateChartPropType) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <StackedBarChart
+        size={{ height: this.props.height }}
+        legend={{ show: this.props.showLegend, position: this.props.legendPos }}
+        grid={{
+          x: {
+            show: false
+          },
+          y: {
+            show: false
+          }
+        }}
+        axis={{
+          rotated: true,
+          x: {
+            categories: [''],
+            type: 'category'
+          }
+        }}
+        data={{
+          groups: [['OK', '3xx', '4xx', '5xx']],
+          columns: [
+            ['OK', this.props.percent2xx],
+            ['3xx', this.props.percent3xx],
+            ['4xx', this.props.percent4xx],
+            ['5xx', this.props.percent5xx]
+          ],
+          // order: 'asc',
+          colors: {
+            'OK': '#0088ce', // pf-blue-400
+            '3xx': '#3f9c35', // pf-green-400
+            '4xx': '#ec7a08', // pf-orange-400
+            '5xx': '#cc0000' // pf-red-100
+          }
+        }}
+      />
+    );
+  }
+}
diff --git a/src/components/SummaryPanel/RateTable.tsx b/src/components/SummaryPanel/RateTable.tsx
index c5d7980f71..89d7f160d3 100644
--- a/src/components/SummaryPanel/RateTable.tsx
+++ b/src/components/SummaryPanel/RateTable.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ErrorRatePieChart from './ErrorRatePieChart';
+import RateChart from './RateChart';
 
 type RateTablePropType = {
   title: string;
@@ -43,12 +43,7 @@ export default class RateTable extends React.Component<RateTablePropType, {}> {
             </tr>
           </tbody>
         </table>
-        <ErrorRatePieChart
-          percent2xx={percent2xx}
-          percent3xx={percent3xx}
-          percent4xx={percent4xx}
-          percent5xx={percent5xx}
-        />
+        <RateChart percent2xx={percent2xx} percent3xx={percent3xx} percent4xx={percent4xx} percent5xx={percent5xx} />
       </div>
     );
   }