Made BarChart more responsive for bigger labels, updated version of @…

…patternfly/react-charts, changed size of DonutChart
oVirt · Jul 9, 2019 · ef6aca4 · ef6aca4
1 parent 2d2b37d
commit ef6aca4
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "whatwg-fetch": "1.0.0"
   },
   "dependencies": {
-    "@patternfly/react-charts": "4.1.5",
+    "@patternfly/react-charts": "4.4.7",
     "@patternfly/react-console": "1.10.22",
     "@patternfly/react-tokens": "2.5.5",
     "babel-polyfill": "6.26.0",

diff --git a/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/AreaChart.js b/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/AreaChart.js
@@ -11,8 +11,9 @@ const AreaChart = ({ data, labels, id }) => {
   return (
     <div id={id}>
       <ChartGroup
-        height={150}
+        height={120}
         width={450}
+        padding={{ top: 60 }}
         containerComponent={
           <ChartVoronoiContainer
             labels={labels}

diff --git a/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/BarChart.js b/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/BarChart.js
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types'
 
 import { ChartBar, Chart, ChartAxis, ChartTooltip, ChartStack, ChartLabel } from '@patternfly/react-charts'
 
-const CustomLabel = ({ label, text, ...rest }) => {
+const CustomLabel = ({ label, offsetX, text, ...rest }) => {
   const t = label ? typeof label === 'function' ? label(rest.datum) : label : ''
   return (
     <g>
-      <ChartLabel {...rest} x={50} dy={40} text={t} />
+      <ChartLabel {...rest} x={offsetX} dy={40} style={{ fontSize: 16 }} text={t} />
       <ChartTooltip {...rest} text={text} style={{ fontSize: 18 }} />
     </g>
   )
@@ -17,13 +17,16 @@ CustomLabel.defaultEvents = ChartTooltip.defaultEvents
 CustomLabel.propTypes = {
   text: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
   label: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
+  offsetX: PropTypes.number,
 }
 
 const BarChart = ({ data, additionalLabel, thresholdWarning, thresholdError, id, ...rest }) => {
   const availableInPercent = data.map((datum) => ({ x: datum.x, y: 100 - datum.y }))
+  const maxLength = Math.max(...data.map((datum) => datum.x.length))
+  const offsetX = maxLength * 10
 
   return <div id={id}>
-    <Chart domainPadding={{ x: 20 }}>
+    <Chart domainPadding={{ x: 20 }} padding={{ left: offsetX, bottom: 40 }} height={100 * data.length}>
       <ChartStack horizontal colorScale={['rgb(0, 102, 204)', 'rgb(237, 237, 237)']}>
         <ChartBar barWidth={40} domain={{ y: [0, 100] }}
           style={{
@@ -35,7 +38,7 @@ const BarChart = ({ data, additionalLabel, thresholdWarning, thresholdError, id,
                   : '#3f9c35',
             },
           }}
-          labelComponent={<CustomLabel label={additionalLabel} />}
+          labelComponent={<CustomLabel offsetX={offsetX} label={additionalLabel} />}
           data={data}
           {...rest} />
         <ChartBar barWidth={40} domain={{ y: [0, 100] }}
@@ -47,7 +50,9 @@ const BarChart = ({ data, additionalLabel, thresholdWarning, thresholdError, id,
       <ChartAxis
         style={{
           axis: { strokeWidth: 0 },
+          tickLabels: { fontSize: 18 },
         }}
+        offsetX={offsetX}
       />
     </Chart>
   </div>

diff --git a/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/DonutChart.js b/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/DonutChart.js
@@ -2,19 +2,23 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { ChartDonut } from '@patternfly/react-charts'
 
+import style from '../style.css'
+
 const DonutChart = ({ data, title, subTitle, id }) => {
   return (
-    <div id={id}>
+    <div id={id} className={style['donut-container']}>
       <ChartDonut
-        width={400}
+        width={300}
         height={250}
         radius={100}
         innerRadius={85}
+        donutDx={25}
         colorScale={['rgb(0, 136, 206)', 'rgb(209, 209, 209)']}
         data={data}
         labels={datum => datum.label}
         subTitle={subTitle}
         title={title}
+        style={{ labels: { fontSize: 12 } }}
       />
     </div>
   )

diff --git a/src/components/VmDetails/cards/UtilizationCard/style.css b/src/components/VmDetails/cards/UtilizationCard/style.css
@@ -112,6 +112,13 @@
   min-width: 200px;
 }
 
+.donut-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
 @media (min-width: 1250px) {
   .row-charts-box {
     flex-wrap: nowrap;

diff --git a/yarn.lock b/yarn.lock
@@ -399,11 +399,11 @@
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@novnc/novnc/-/novnc-1.1.0.tgz#3827b623e9e201ee1e1c8a61d107c51cbfaeb871"
 
-"@patternfly/react-charts@4.1.5":
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-charts/-/react-charts-4.1.5.tgz#6a2e72aa97d91d57d9eab522c495c2123ce4a479"
+"@patternfly/react-charts@4.4.7":
+  version "4.4.7"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-charts/-/react-charts-4.4.7.tgz#3f1047b81a1c586919de2d9b4b605a26717fadd7"
   dependencies:
-    "@patternfly/react-styles" "^3.3.3"
+    "@patternfly/react-styles" "^3.4.6"
   optionalDependencies:
     "@types/lodash" "^4.14.132"
     "@types/victory" "^31.0.18"
@@ -423,9 +423,9 @@
     file-saver "^1.3.8"
     xterm "^3.3.0"
 
-"@patternfly/react-styles@^3.3.3":
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-3.3.3.tgz#30b82b38b8976b9102cbc863a8261f056db092a6"
+"@patternfly/react-styles@^3.4.6":
+  version "3.4.6"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-3.4.6.tgz#03c645adfa3f6b8b7113232e90326547a39c6322"
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0-beta.48"
     camel-case "^3.0.0"