Updated patternfly@react-charts, made title and subTitle for donut ch…

…arts bigger
oVirt · Aug 28, 2019 · d90ed4d · d90ed4d
1 parent efeb210
commit d90ed4d
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -69,9 +69,9 @@
     "whatwg-fetch": "1.0.0"
   },
   "dependencies": {
-    "@patternfly/react-charts": "4.4.7",
+    "@patternfly/react-charts": "4.4.17",
     "@patternfly/react-console": "1.10.22",
-    "@patternfly/react-tokens": "2.5.5",
+    "@patternfly/react-tokens": "2.6.9",
     "babel-polyfill": "6.26.0",
     "blob-util": "1.2.1",
     "bootstrap": "3.4.1",

diff --git a/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js b/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js
@@ -116,13 +116,7 @@ const DiskCharts = ({ vm, diskStats, isRunning, id, ...props }) => {
                     })
                   }
                   additionalLabel={({ total, used }) => {
-                    const { unit, value } =
-                      convertValueMap(
-                        'B',
-                        {
-                          total: total,
-                          used: used,
-                        })
+                    const { unit, value } = convertValueMap('B', { total, used })
                     return msg.utilizationCardDiskUsed({
                       used: round(value.used, 0),
                       total: round(value.total, 0),

diff --git a/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/AreaChart.js b/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/AreaChart.js
@@ -7,9 +7,11 @@ import {
   ChartArea,
 } from '@patternfly/react-charts'
 
+import style from '../style.css'
+
 const AreaChart = ({ data, labels, id }) => {
   return (
-    <div id={id}>
+    <div id={id} className={style['area-box']}>
       <ChartGroup
         height={120}
         width={450}

diff --git a/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/BarChart.js b/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/BarChart.js
@@ -7,7 +7,7 @@ const CustomLabel = ({ label, offsetX, text, ...rest }) => {
   const t = label ? typeof label === 'function' ? label(rest.datum) : label : ''
   return (
     <g>
-      <ChartLabel {...rest} x={offsetX} dy={40} style={{ fontSize: 16 }} text={t} />
+      <ChartLabel {...rest} x={offsetX} dy={40} style={{ fontSize: 20 }} text={t} />
       <ChartTooltip {...rest} text={text} style={{ fontSize: 18 }} />
     </g>
   )
@@ -23,7 +23,7 @@ CustomLabel.propTypes = {
 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
+  const offsetX = maxLength * 14
 
   return <div id={id}>
     <Chart domainPadding={{ x: 20 }} padding={{ left: offsetX, bottom: 40 }} height={100 * data.length}>
@@ -50,7 +50,7 @@ const BarChart = ({ data, additionalLabel, thresholdWarning, thresholdError, id,
       <ChartAxis
         style={{
           axis: { strokeWidth: 0 },
-          tickLabels: { fontSize: 18 },
+          tickLabels: { fontSize: 22 },
         }}
         offsetX={offsetX}
       />

diff --git a/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/DonutChart.js b/src/components/VmDetails/cards/UtilizationCard/UtilizationCharts/DonutChart.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { ChartDonut } from '@patternfly/react-charts'
+import { ChartDonut, ChartLabel } from '@patternfly/react-charts'
 
 import style from '../style.css'
 
@@ -19,6 +19,7 @@ const DonutChart = ({ data, title, subTitle, id }) => {
         subTitle={subTitle}
         title={title}
         style={{ labels: { fontSize: 12 } }}
+        titleComponent={<ChartLabel style={[{ fontSize: 30 }, { fontSize: 20, fill: '#bbb' }]} />}
       />
     </div>
   )

diff --git a/src/components/VmDetails/cards/UtilizationCard/style.css b/src/components/VmDetails/cards/UtilizationCard/style.css
@@ -158,3 +158,7 @@
       max-width: 100%;
   }
 }
+
+.area-box :global(svg:not(:root)) {
+  overflow: visible;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -446,12 +446,12 @@
   resolved "https://registry.yarnpkg.com/@novnc/novnc/-/novnc-1.1.0.tgz#3827b623e9e201ee1e1c8a61d107c51cbfaeb871"
   integrity sha512-W90Q79EuCYT++39aT/VKGyk7hUt2gPN3rN+ifPUvY4rdjgZlfwdCg9q7yzj04hke/zgdHsbXFfyFijBvrRuU5A==
 
-"@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"
-  integrity sha512-wXK8+RXVoC4fT1Eo+diWMgtz+aNid9doEoQG7+/9OI/64X7Qju/JGJ0Wl+kTy0kjQd0bQW61/sTLJ+bS0KOukw==
+"@patternfly/react-charts@4.4.17":
+  version "4.4.17"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-charts/-/react-charts-4.4.17.tgz#af4104bd4f58ef189e44a8cb36b09bceca336677"
+  integrity sha512-OKgguAmk8axwyFES14hPmgb16425cpZ/Prxs5wTzdgu60/NGwsGeYevskhT7vbW3LPMcethyQuaocMPmXCz3cg==
   dependencies:
-    "@patternfly/react-styles" "^3.3.3"
+    "@patternfly/react-styles" "^3.5.2"
   optionalDependencies:
     "@types/lodash" "^4.14.132"
     "@types/victory" "^31.0.18"
@@ -472,7 +472,7 @@
     file-saver "^1.3.8"
     xterm "^3.3.0"
 
-"@patternfly/react-styles@^3.3.3":
+"@patternfly/react-styles@^3.5.2":
   version "3.5.13"
   resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-3.5.13.tgz#b6d4454eaf8ce2041f6e410aa85eef0e53892b24"
   integrity sha512-aiyOp/n4cMxWhNmokG9EAFt06YmWDi3EdGfa5gyjYRwABGLUhyHo2r7kBqT3xxw0bLcOYDTPU94SaH63uAaRag==
@@ -491,10 +491,10 @@
     resolve-from "^4.0.0"
     typescript "3.4.5"
 
-"@patternfly/react-tokens@2.5.5":
-  version "2.5.5"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-2.5.5.tgz#4d1ff0c2f6091be5c0031a70079e0b745c5d57f0"
-  integrity sha512-5ztqkgBjSNcBnCqJFltG2OaP1bUgk+s5+Fp4kTDpVZLu3LNI46O/gPTRwObYXkbCna0r/hv2k3JVGER53G9fEA==
+"@patternfly/react-tokens@2.6.9":
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-2.6.9.tgz#e1cb0d77f6737d9669ba41bcaf0610ef1148176b"
+  integrity sha512-hpJEtupHgrm0V7Lyywq2R+UkcQAxNWjcZDLUx2rOe1haCZEdzRk3kf2CuPsqf0Jai9Wuu7J6K8jXXu5ZGUFWZA==
 
 "@types/babel__core@^7.1.0":
   version "7.1.2"
@@ -769,9 +769,9 @@
     "@types/istanbul-lib-report" "*"
 
 "@types/lodash@^4.14.132":
-  version "4.14.137"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.137.tgz#8a4804937dc6462274ffcc088df8f14fc1b368e2"
-  integrity sha512-g4rNK5SRKloO+sUGbuO7aPtwbwzMgjK+bm9BBhLD7jGUiGR7zhwYEhSln/ihgYQBeIJ5j7xjyaYzrWTcu3UotQ==
+  version "4.14.138"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.138.tgz#34f52640d7358230308344e579c15b378d91989e"
+  integrity sha512-A4uJgHz4hakwNBdHNPdxOTkYmXNgmUAKLbXZ7PKGslgeV0Mb8P3BlbYfPovExek1qnod4pDfRbxuzcVs3dlFLg==
 
 "@types/prop-types@*":
   version "15.7.1"
@@ -3306,7 +3306,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.
   dependencies:
     ms "2.0.0"
 
-debug@^3.1.0, debug@^3.2.5, debug@^3.2.6:
+debug@^3.0.0, debug@^3.1.0, debug@^3.2.5, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -3558,9 +3558,9 @@ ee-first@1.1.1:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.47:
-  version "1.3.241"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.241.tgz#859dc49ab7f90773ed698767372d384190f60cb1"
-  integrity sha512-Gb9E6nWZlbgjDDNe5cAvMJixtn79krNJ70EDpq/M10lkGo7PGtBUe7Y0CYVHsBScRwi6ybCS+YetXAN9ysAHDg==
+  version "1.3.243"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.243.tgz#32f64f00fa121532d1d49f5c0a15fd77f52ae889"
+  integrity sha512-+edFdHGxLSmAKftXa5xZIg19rHkkJLiW+tRu0VMVG3RKztyeKX7d3pXf707lS6+BxB9uBun3RShbxCI1PtBAgQ==
 
 emoji-regex@^7.0.1:
   version "7.0.3"
@@ -4323,11 +4323,11 @@ flow-babel-webpack-plugin@1.1.1:
   integrity sha512-pALWFKf+AQiX4VfSEdxruj2bSMigsrAcg8djV6Hue2y3FJyiA/Z42UkEv6zEvSIpDj1EL+cRBvJNUx6L2+gdTQ==
 
 follow-redirects@^1.0.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.8.0.tgz#dcf34930bcfdb6c1eb22b8eb7c457ec95a3dcf40"
-  integrity sha512-eYyazyi+vwXZ6LfSQicvqFwaNEF5xTvnB/rpzRLuqwK45u7WbBEnQ/dDic66KD/A8IzTXFlj2ROAcaP0f2v4lg==
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.8.1.tgz#24804f9eaab67160b0e840c085885d606371a35b"
+  integrity sha512-micCIbldHioIegeKs41DoH0KS3AXfFzgS30qVkM6z/XOE/GJgvmsoc839NUqa1B9udYe9dQxgv7KFwng6+p/dw==
   dependencies:
-    debug "^4.1.1"
+    debug "^3.0.0"
 
 font-awesome-sass@^4.7.0:
   version "4.7.0"