Use PF4 graphs #351
Use PF4 graphs #351
Conversation
kubevirt-bot
added
do-not-merge/work-in-progress
needs-rebase
kubevirt-bot
removed
the
needs-rebase
Pull Request Test Coverage Report for Build 1261
💛 - Coveralls |
rawagner
force-pushed
the
pf4_victory
branch
2 times, most recently
from
a314312 to
3d26423
Compare
| @@ -1,13 +1,16 @@ | |||
| .kubevirt-capacity__items { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| justify-content: space-evenly; | |||
| flex-wrap: wrap; | |||
| } | |||
|
|
|||
| .kubevirt-capacity__item { | |||
There was a problem hiding this comment.
the donuts are overflowing outside the card
There was a problem hiding this comment.
and the items are all jumbled together on smaller devices
There was a problem hiding this comment.
+ the graphs of all items should be centered similarly
There was a problem hiding this comment.
The issue is happening in cosmos playground - i think that we need to import base.css from patternfly-react but them Im facing issue with webpack not being able to load fonts..
There was a problem hiding this comment.
can we fix it so it doesn't break without that css?
| border-left-width: 1px; | ||
| border-left-style: solid; | ||
| border-left-color: rgb(209, 209, 209); | ||
| padding-right: 20px; |
There was a problem hiding this comment.
I actually removed the padding in latest patch as it seems to be not necessary
| }} | ||
| /> | ||
| <div id={prefixedId('donut-chart', id)} className="kubevirt-capacity__graph"> | ||
| <svg viewBox="0 0 200 200"> |
There was a problem hiding this comment.
can we make variables out of the height and the width?
There was a problem hiding this comment.
created constants out of width and height
| standalone={false} | ||
| /> | ||
| <ChartLabel textAnchor="middle" style={{ fontSize: 25 }} x={100} y={85} text={primaryTitle} /> | ||
| <ChartLabel textAnchor="middle" style={{ fontSize: 15 }} x={100} y={110} text={secondaryTitle} /> |
There was a problem hiding this comment.
and derive these from the variables?
| id={id} | ||
| height={60} | ||
| width={300} | ||
| containerComponent={<ChartVoronoiContainer labels={datum => `${datum.y} ${unit}`} />} |
There was a problem hiding this comment.
the label is huge! Can something be done about that? On the other hand the pies' labels are quite small.
There was a problem hiding this comment.
I tried to make the tooltips similar, but it will need more work in the future
rawagner
force-pushed
the
pf4_victory
branch
5 times, most recently
from
7f92fd7 to
4cd21a4
Compare
| textAnchor="middle" | ||
| style={{ fontSize: 15 }} | ||
| x={CHART_WIDTH / 2} | ||
| y={CHART_HEIGHT / 1.8} |
There was a problem hiding this comment.
shouldn't this reather be CHART_HEIGHT / 2 - SOME_CONSTANT ? and the x one also?
| @@ -1,13 +1,16 @@ | |||
| .kubevirt-capacity__items { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| justify-content: space-evenly; | |||
| flex-wrap: wrap; | |||
| } | |||
|
|
|||
| .kubevirt-capacity__item { | |||
There was a problem hiding this comment.
can we fix it so it doesn't break without that css?
|
Let's fix styling in cosmos in a follow-up. Full build works fine and fix is required asap. |
No description provided.