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

…patternfly/react-charts, changed size of DonutChart
oVirt · Jul 11, 2019 · c1f4bec · c1f4bec
1 parent fc70243
commit c1f4bec
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 9,127 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;