Moved History charts to AreaChart component, change color of donuts a…

…nd added ids
oVirt · Jul 1, 2019 · 54c6077 · 54c6077
1 parent d749dc6
commit 54c6077
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 88 deletions.
diff --git a/src/components/VmDetails/cards/UtilizationCard/CpuCharts.js b/src/components/VmDetails/cards/UtilizationCard/CpuCharts.js
@@ -10,8 +10,8 @@ import {
   UtilizationCardDetailsLine1,
   UtilizationCardDetailsLine2,
 } from 'patternfly-react'
-import { ChartGroup, ChartArea, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts'
 import DonutChart from './UtilizationCharts/DonutChart'
+import AreaChart from './UtilizationCharts/AreaChart'
 
 import { msg } from '_/intl'
 
@@ -48,6 +48,7 @@ const CpuCharts = ({ cpuStats, isRunning, id }) => {
           </UtilizationCardDetails>
 
           <DonutChart
+            id={`${id}-donut-chart`}
             data={[
               {
                 x: msg.utilizationCardLegendUsedP(),
@@ -66,21 +67,11 @@ const CpuCharts = ({ cpuStats, isRunning, id }) => {
 
           { history.length === 0 && <NoHistoricData id={`${id}-no-historic-data`} /> }
           { history.length > 0 &&
-            <ChartGroup
-              height={150}
-              width={450}
-              containerComponent={
-                <ChartVoronoiContainer
-                  labels={datum => `${datum.y}%`}
-                  labelComponent={<ChartTooltip style={{ fontSize: 16 }} />}
-                />
-              }
-            >
-              <ChartArea
-                style={{ data: { fill: 'rgb(0, 136, 206)' } }}
-                data={history.map((item, i) => ({ x: i, y: item, name: 'cpu' }))}
-              />
-            </ChartGroup>
+            <AreaChart
+              id={`${id}-history-chart`}
+              data={history.map((item, i) => ({ x: i, y: item }))}
+              labels={datum => `${datum.y}%`}
+            />
           }
         </React.Fragment>
         }

diff --git a/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js b/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js
@@ -87,6 +87,7 @@ const DiskCharts = ({ vm, diskStats, isRunning, id, ...props }) => {
             </UtilizationCardDetails>
             { !diskDetails &&
               <DonutChart
+                id={`${id}-donut-chart`}
                 data={[
                   {
                     x: msg.utilizationCardAllocated(),
@@ -100,12 +101,13 @@ const DiskCharts = ({ vm, diskStats, isRunning, id, ...props }) => {
                   },
                 ]}
                 subTitle={msg.utilizationCardUnitAllocated({ storageUnit: usedFormated.suffix })}
-                title={round(usedFormated.number, 0)}
+                title={`${round(usedFormated.number, 0)}`}
               />
             }
             { isRunning && diskDetails &&
               <div className={style['disk-fs-list']}>
                 <BarChart
+                  id={`${id}-bar-chart`}
                   data={
                     diskDetails.map((disk) => {
                       const usedInPercent = round(disk.used / disk.total * 100, 0)
@@ -133,7 +135,7 @@ const DiskCharts = ({ vm, diskStats, isRunning, id, ...props }) => {
               </div>
             }
             { isRunning && !diskDetails &&
-              <NoHistoricData message={msg.utilizationCardNoGuestAgent()} />
+              <NoHistoricData id={`${id}-no-historic-data`} message={msg.utilizationCardNoGuestAgent()} />
             }
             {/*
               Disks don't have historic data but stub the space so the card stretches like the others,

diff --git a/src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js b/src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js
@@ -10,8 +10,8 @@ import {
   UtilizationCardDetailsLine1,
   UtilizationCardDetailsLine2,
 } from 'patternfly-react'
-import { ChartGroup, ChartArea, ChartVoronoiContainer, ChartTooltip } from '@patternfly/react-charts'
 import DonutChart from './UtilizationCharts/DonutChart'
+import AreaChart from './UtilizationCharts/AreaChart'
 import { msg } from '_/intl'
 import { round, floor } from '_/utils'
 import { userFormatOfBytes } from '_/helpers'
@@ -70,6 +70,7 @@ const MemoryCharts = ({ memoryStats, isRunning, id }) => {
             </UtilizationCardDetailsDesc>
           </UtilizationCardDetails>
           <DonutChart
+            id={`${id}-donut-chart`}
             data={[
               {
                 x: msg.utilizationCardLegendUsed(),
@@ -83,25 +84,15 @@ const MemoryCharts = ({ memoryStats, isRunning, id }) => {
               },
             ]}
             subTitle={msg.utilizationCardUnitUsed({ storageUnit: usedFormated.suffix })}
-            title={usedFormated.rounded}
+            title={`${usedFormated.rounded}`}
           />
-          { history.length === 0 && <NoHistoricData /> }
+          { history.length === 0 && <NoHistoricData id={`${id}-no-historic-data`} /> }
           { history.length > 0 &&
-            <ChartGroup
-              height={150}
-              width={450}
-              containerComponent={
-                <ChartVoronoiContainer
-                  labels={datum => `${datum.y}%`}
-                  labelComponent={<ChartTooltip style={{ fontSize: 16 }} />}
-                />
-              }
-            >
-              <ChartArea
-                style={{ data: { fill: 'rgb(0, 136, 206)' } }}
-                data={history.map((item, i) => ({ x: i, y: item, name: 'cpu' }))}
-              />
-            </ChartGroup>
+            <AreaChart
+              id={`${id}-history-chart`}
+              data={history.map((item, i) => ({ x: i + 1, y: item, name: 'memory' }))}
+              labels={datum => `${datum.y}%`}
+            />
           }
         </React.Fragment>
         }

diff --git a/src/components/VmDetails/cards/UtilizationCard/NetworkingCharts.js b/src/components/VmDetails/cards/UtilizationCard/NetworkingCharts.js
@@ -10,8 +10,8 @@ import {
   UtilizationCardDetailsLine1,
   UtilizationCardDetailsLine2,
 } from 'patternfly-react'
-import { ChartGroup, ChartArea, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts'
 import DonutChart from './UtilizationCharts/DonutChart'
+import AreaChart from './UtilizationCharts/AreaChart'
 
 import { msg } from '_/intl'
 
@@ -55,6 +55,7 @@ const NetworkingCharts = ({ netStats, isRunning, id }) => {
             </UtilizationCardDetailsDesc>
           </UtilizationCardDetails>
           <DonutChart
+            id={`${id}-donut-chart`}
             data={[
               {
                 x: msg.utilizationCardLegendUsedP(),
@@ -68,22 +69,15 @@ const NetworkingCharts = ({ netStats, isRunning, id }) => {
               },
             ]}
             subTitle={msg.utilizationCardLegendUsedP()}
-            title={used}
+            title={`${used}`}
           />
           { history.length === 0 && <NoHistoricData id={`${id}-no-historic-data`} /> }
           { history.length > 0 &&
-            <ChartGroup
-              height={150}
-              width={450}
-              containerComponent={
-                <ChartVoronoiContainer
-                  labels={datum => `${datum.y}%`}
-                  labelComponent={<ChartTooltip style={{ fontSize: 16 }} />}
-                />
-              }
-            >
-              <ChartArea style={{ data: { fill: 'rgb(0, 136, 206)' } }} data={history.map((item, i) => ({ x: i, y: item, name: 'cpu' }))} />
-            </ChartGroup>
+            <AreaChart
+              id={`${id}-history-chart`}
+              data={history.map((item, i) => ({ x: i, y: item, name: 'cpu' }))}
+              labels={datum => `${datum.y}%`}
+            />
           }
         </React.Fragment>
         }

diff --git a/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/AreaChart.js b/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/AreaChart.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  ChartGroup,
+  ChartVoronoiContainer,
+  ChartTooltip,
+  ChartArea,
+} from '@patternfly/react-charts'
+
+const AreaChart = ({ data, labels, id }) => {
+  return (
+    <div id={id}>
+      <ChartGroup
+        height={150}
+        width={450}
+        containerComponent={
+          <ChartVoronoiContainer
+            labels={labels}
+            labelComponent={<ChartTooltip style={{ fontSize: 16 }} />}
+          />
+        }
+      >
+        <ChartArea
+          style={{ data: { fill: 'rgb(0, 136, 206)', strokeWidth: 5 } }}
+          data={data}
+        />
+      </ChartGroup>
+    </div>
+  )
+}
+
+const datumPropType = PropTypes.shape({
+  x: PropTypes.number,
+  y: PropTypes.number,
+  name: PropTypes.string,
+})
+
+AreaChart.propTypes = {
+  id: PropTypes.string,
+  data: PropTypes.arrayOf(datumPropType).isRequired,
+  labels: PropTypes.func.isRequired,
+}
+
+export default AreaChart
diff --git a/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/BarChart.js b/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/BarChart.js
@@ -19,39 +19,42 @@ CustomLabel.propTypes = {
   label: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
 }
 
-const BarChart = ({ data, additionalLabel, thresholdWarning, thresholdError, ...rest }) => {
+const BarChart = ({ data, additionalLabel, thresholdWarning, thresholdError, id, ...rest }) => {
   const availableInPercent = data.map((datum) => ({ x: datum.x, y: 100 - datum.y }))
   console.log(availableInPercent)
-  return <Chart domainPadding={{ x: 20 }}>
-    <ChartStack horizontal colorScale={['rgb(0, 102, 204)', 'rgb(237, 237, 237)']}>
-      <ChartBar barWidth={40} domain={{ y: [0, 100] }}
+  return <div id={id}>
+    <Chart domainPadding={{ x: 20 }}>
+      <ChartStack horizontal colorScale={['rgb(0, 102, 204)', 'rgb(237, 237, 237)']}>
+        <ChartBar barWidth={40} domain={{ y: [0, 100] }}
+          style={{
+            data: {
+              fill: (d) => thresholdError && d.y >= thresholdError
+                ? '#cc0000'
+                : thresholdWarning && d.y >= thresholdWarning
+                  ? '#ec7a08'
+                  : '#3f9c35',
+            },
+          }}
+          labelComponent={<CustomLabel label={additionalLabel} />}
+          data={data}
+          {...rest} />
+        <ChartBar barWidth={40} domain={{ y: [0, 100] }}
+          labelComponent={<ChartTooltip style={{ fontSize: 18 }} />}
+          style={{ parent: { border: '0px' } }}
+          data={availableInPercent}
+          {...rest} />
+      </ChartStack>
+      <ChartAxis
         style={{
-          data: {
-            fill: (d) => thresholdError && d.y >= thresholdError
-              ? '#cc0000'
-              : thresholdWarning && d.y >= thresholdWarning
-                ? '#ec7a08'
-                : '#3f9c35',
-          },
+          axis: { strokeWidth: 0 },
         }}
-        labelComponent={<CustomLabel label={additionalLabel} />}
-        data={data}
-        {...rest} />
-      <ChartBar barWidth={40} domain={{ y: [0, 100] }}
-        labelComponent={<ChartTooltip style={{ fontSize: 18 }} />}
-        style={{ parent: { border: '0px' } }}
-        data={availableInPercent}
-        {...rest} />
-    </ChartStack>
-    <ChartAxis
-      style={{
-        axis: { strokeWidth: 0 },
-      }}
-    />
-  </Chart>
+      />
+    </Chart>
+  </div>
 }
 
 BarChart.propTypes = {
+  id: PropTypes.string,
   data: PropTypes.array.isRequired,
   thresholdWarning: PropTypes.number,
   thresholdError: PropTypes.number,

diff --git a/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/DonutChart.js b/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/DonutChart.js
@@ -2,19 +2,21 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { ChartDonut } from '@patternfly/react-charts'
 
-const DonutChart = ({ data, title, subTitle }) => {
+const DonutChart = ({ data, title, subTitle, id }) => {
   return (
-    <ChartDonut
-      width={400}
-      height={400}
-      radius={100}
-      innerRadius={85}
-      colorScale={['rgb(0, 102, 204)', 'rgb(237, 237, 237)']}
-      data={data}
-      labels={datum => datum.label}
-      subTitle={subTitle}
-      title={title}
-    />
+    <div id={id}>
+      <ChartDonut
+        width={400}
+        height={250}
+        radius={100}
+        innerRadius={85}
+        colorScale={['rgb(0, 136, 206)', 'rgb(209, 209, 209)']}
+        data={data}
+        labels={datum => datum.label}
+        subTitle={subTitle}
+        title={title}
+      />
+    </div>
   )
 }
 
@@ -25,6 +27,7 @@ const datumPropType = PropTypes.shape({
 })
 
 DonutChart.propTypes = {
+  id: PropTypes.string,
   data: PropTypes.arrayOf(datumPropType).isRequired,
   title: PropTypes.string.isRequired,
   subTitle: PropTypes.string.isRequired,