plotted y values for performance card graphs

src/components/Dashboard/Utilization/UtilizationItem.js

@@ -22,7 +22,7 @@ export class UtilizationItem extends React.PureComponent {
   };
 
   render() {
-    const { id, title, data, maxY, unit, isLoading, LoadingComponent } = this.props;
+    const { id, title, data, maxY, unit, isLoading, LoadingComponent, decimalPoints } = this.props;
     const { width } = this.state.dimensions;
 
     const axis = {
@@ -46,12 +46,19 @@ export class UtilizationItem extends React.PureComponent {
     }
 
     let actual;
+    let yTickValues;
     let chart = NOT_AVAILABLE;
     if (isLoading) {
       chart = <LoadingComponent />;
     } else if (data) {
       const chartData = data.map((val, index) => ({ x: index, y: val ? Number(val.toFixed(1)) : 0 }));
       actual = `${Math.round(data[data.length - 1])} ${unit}`;
+      if (decimalPoints > -1) {
+        yTickValues = [0, Number((maxY / 2).toFixed(decimalPoints)), Number(maxY.toFixed(decimalPoints))];
+      } else {
+        yTickValues = [0, maxY / 2, maxY];
+      }
+
       chart = (
         <Chart
           id={id}
@@ -67,7 +74,7 @@ export class UtilizationItem extends React.PureComponent {
           domainPadding={{ x: 0, y: 10 }}
         >
           <ChartArea data={chartData} />
-          <ChartAxis dependentAxis tickValues={[0, maxY / 2, maxY]} style={{ tickLabels: { fontSize: 10 } }} />
+          <ChartAxis dependentAxis tickValues={yTickValues} style={{ tickLabels: { fontSize: 10 } }} />
         </Chart>
       );
     }
@@ -131,6 +138,7 @@ UtilizationItem.defaultProps = {
   data: null,
   LoadingComponent: InlineLoading,
   isLoading: false,
+  decimalPoints: -1,
 };
 
 UtilizationItem.propTypes = {
@@ -141,4 +149,5 @@ UtilizationItem.propTypes = {
   maxY: PropTypes.number,
   LoadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   isLoading: PropTypes.bool,
+  decimalPoints: PropTypes.number,
 };

src/components/StorageOverview/Utilization/Utilization.js

@@ -14,41 +14,47 @@ import { UtilizationItem } from '../../Dashboard/Utilization/UtilizationItem';
 import { getUtilizationVectorStats } from '../../../selectors';
 import { formatBytes } from '../../../utils';
 
+const getUtilizationData = data => {
+  let stats = null;
+  let maxValueConverted;
+
+  const statsRaw = getUtilizationVectorStats(data);
+  if (statsRaw) {
+    const maxValue = Math.max(0, ...statsRaw);
+    maxValueConverted = formatBytes(maxValue);
+    stats = statsRaw.map(bytes => formatBytes(bytes, maxValueConverted.unit, 1).value);
+  } else {
+    maxValueConverted = formatBytes(0);
+    stats = null;
+  }
+
+  return {
+    unit: `${maxValueConverted.unit}/s`,
+    values: stats,
+    maxValue: Number(maxValueConverted.value.toFixed(1)),
+  };
+};
+
 export const Utilization = ({
   iopsUtilization,
   latencyUtilization,
   throughputUtilization,
   recoveryRateUtilization,
   LoadingComponent,
 }) => {
-  const iopsStats = getUtilizationVectorStats(iopsUtilization);
-  const latencyStats = getUtilizationVectorStats(latencyUtilization);
+  const throughputData = getUtilizationData(throughputUtilization);
+  const recoveryRateData = getUtilizationData(recoveryRateUtilization);
 
-  const throughputStatsRaw = getUtilizationVectorStats(throughputUtilization);
-  let throughputStats = null;
-  let throughputMax = 0;
-  let throughputMaxConverted;
-  if (throughputStatsRaw) {
-    throughputMax = Math.max(0, ...throughputStatsRaw);
-    throughputMaxConverted = formatBytes(throughputMax);
-    throughputStats = throughputStatsRaw.map(bytes => formatBytes(bytes, throughputMaxConverted.unit, 1).value);
-  } else {
-    throughputMaxConverted = formatBytes(throughputMax); // B
+  const iopsStats = getUtilizationVectorStats(iopsUtilization);
+  let iopsStatsMax = 0;
+  if (iopsStats) {
+    iopsStatsMax = Math.ceil(Math.max(0, ...iopsStats));
   }
-  const throughputUnit = `${throughputMaxConverted.unit}/s`;
-
-  const recoveryRateStatsRaw = getUtilizationVectorStats(recoveryRateUtilization);
-  let recoveryRateStats = null;
-  let recoveryRateMax = 0;
-  let recoveryRateMaxConverted;
-  if (recoveryRateStatsRaw) {
-    recoveryRateMax = Math.max(0, ...recoveryRateStatsRaw);
-    recoveryRateMaxConverted = formatBytes(recoveryRateMax);
-    recoveryRateStats = recoveryRateStatsRaw.map(bytes => formatBytes(bytes, recoveryRateMaxConverted.unit, 1).value);
-  } else {
-    recoveryRateMaxConverted = formatBytes(recoveryRateMax); // B
+  const latencyStats = getUtilizationVectorStats(latencyUtilization);
+  let latencyStatsMax = 0;
+  if (latencyStats) {
+    latencyStatsMax = Math.max(0, ...latencyStats);
   }
-  const recoveryRateUnit = `${recoveryRateMaxConverted.unit}/s`;
 
   return (
     <DashboardCard>
@@ -58,10 +64,12 @@ export const Utilization = ({
       <DashboardCardBody>
         <UtilizationBody>
           <UtilizationItem
-            unit={throughputUnit}
+            unit={throughputData.unit}
             id="throughput"
             title="Throughput"
-            data={throughputStats}
+            data={throughputData.values}
+            maxY={throughputData.maxValue}
+            decimalPoints={1}
             LoadingComponent={LoadingComponent}
             isLoading={!throughputUtilization}
           />
@@ -70,6 +78,8 @@ export const Utilization = ({
             id="iops"
             title="IOPS"
             data={iopsStats}
+            maxY={iopsStatsMax}
+            decimalPoints={0}
             LoadingComponent={LoadingComponent}
             isLoading={!iopsUtilization}
           />
@@ -78,14 +88,18 @@ export const Utilization = ({
             id="latency"
             title="Latency"
             data={latencyStats}
+            maxY={latencyStatsMax}
+            decimalPoints={1}
             LoadingComponent={LoadingComponent}
             isLoading={!latencyUtilization}
           />
           <UtilizationItem
-            unit={recoveryRateUnit}
+            unit={recoveryRateData.unit}
             id="recoveryRate"
             title="Recovery rate"
-            data={recoveryRateStats}
+            data={recoveryRateData.values}
+            maxY={recoveryRateData.maxValue}
+            decimalPoints={1}
             LoadingComponent={LoadingComponent}
             isLoading={!recoveryRateUtilization}
           />