use stacked bar chart

kiali · Apr 20, 2018 · 9b998ca · 9b998ca
1 parent dd5a8e1
commit 9b998ca
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 79 deletions.
diff --git a/src/components/SummaryPanel/ErrorRatePieChart.tsx b/src/components/SummaryPanel/ErrorRatePieChart.tsx
diff --git a/src/components/SummaryPanel/InOutRateChart.tsx 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
@@ -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
@@ -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
@@ -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>
     );
   }