-
Notifications
You must be signed in to change notification settings - Fork 115
Conversation
This isn't done yet. But its here for people to look at the code. Currently, the code has some mock data values (so I can get all four data types (2xx, 3xx, 4xx, 5xx) in the pie - so don't think the numbers will match between the pie and table. The colors in the pie are official pf palette colors. Here's what it looks like currently - see below. Notice the pie's legend is on the bottom, not the right. I want it on the right, but putting it on the right and either the actual pie itself shrinks down really small or the legend isn't symmetrical (in two columns, 3 items on left, 1 on the right - doesn't look right). So I put the legend on the bottom. There is hovers here - hover over and you'll see tooltips showing the raw values of the slices with their percentages. Note also putting the values themselves in the legend won't look nice either - depending how long the values are, the legend will wrap or just not look good. We can try it if we think we want to do that. Standard usage of pie charts is to not put the actual values in the legend, FWIW. The tooltips gives you the values though. I did experiment with a stacked bar graph rather than a pie graph - that might be an alternative. |
6d5ab40
to
bf54f6c
Compare
@serenamarie125 this is based on your feedback. wdyt? |
Do we maybe want to change things like %OK to just 'Success' (and the same for 3xx, 4xx, 5xx to 'Redirections", "Client Errors", "Server Errors")? But that might take up more space than we have and make it too busy. Do we need the '%' in there, is that not assumed because its a pie chart? |
I also wonder if we could have the 'in' and 'out' side by side with one legend underneath it instead of having the same legend repeated twice. But we need @serenamarie125 to give us the feedback on how this should be done :) |
2469ead
to
f5b2b71
Compare
Here are some additional ideas still using pie graph but changing other things: Pie larger size with legend on the right - legend is a single column which looks nice: Pie is smaller with the right side legend - notice the legend is forced into two columns due to the smaller size - I don't like that: =-=- Small Pies, in a separate table but on a single row - header row says what is IN or OUT: One Pie per row - the left most column saying if its IN or OUT - notice the pie charts are in the "Total" column which is actually correct - the entire pie is the total, with each slice representing 2xx, 3xx, 4xx and 5xx: Pies on same row in same table - but the column to the left says if its IN or OUT: |
I'm fairly confident the pie component does not allow for two pie charts per legend. One legend-one chart. BTW: since we already know we have a D3 bug screwing up our pie charts, maybe we can consider moving to another pie chart implementation? Perhaps we could get a new implementation to do things better. |
Let's wait on input from @serenamarie125 |
@jmazzitelli If there is a bug in the PF/react pie chart, then please report it to them at https://github.com/patternfly/patternfly-react |
There already is an issue created - see: bcbcarl/react-c3js#22 and the JIRA where we discuss it here: https://issues.jboss.org/browse/KIALI-519 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Lots of cool things here! Trying to add comments in line
colors: { '% Success': '#0088ce', '% Fail': '#cc0000' }, // pf-blue, pf-red-100 | ||
columns: [['% Success', successRate], ['% Fail', this.props.percentError]], | ||
type: 'pie' | ||
colors: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes, let's remove the "%" from the labels
'%OK': '#0088ce', // pf-blue-400 | ||
'%3xx': '#92d400', // pf-light-green-400 | ||
'%4xx': '#ec7a08', // pf-orange-400 | ||
'%5xx': '#8b0000' // pf-red-300 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should be using cc0000 // pf-red-100
type: 'pie' | ||
colors: { | ||
'%OK': '#0088ce', // pf-blue-400 | ||
'%3xx': '#92d400', // pf-light-green-400 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should be using 3f9c35 // pf-green-400
@jmazzitelli utilizing 100% stacked bar charts would allow a nicer visualization, IMO and then you could just have the bottom chart have a legend, which would apply to both. What are people's thoughts about this? What's happening on hover now on these graphs ? |
Shouldn't OK be green and 300 blue, as many people usually associate
green with ok (like in the PF ok icon)
|
Also - chatting with Jeff Phillips, he suggests that you reference the variable itself, rather than the hex code. That way if PF colors change, no need to make a change in your code |
@pilhuhn can you help explain again the difference between those what's being shown as ok & 3xx ? then I will be able to provide an intelligent answer 😄 |
On 19 Apr 2018, at 16:12, Serena Doyle wrote:
@pilhuhn can you help explain again the difference between those
what's being shown as ok & 3xx ? then I will be able to provide an
intelligent answer 😄
A 2xx is a "everything ok, here is your data" response
A 3xx is a "I don't have what you are looking for, but you can get it
over there" response
When a browser asks for /foo/ it may get a 302 moved to /foo/index.html
for which it then
requests in a new request /foo/index.html and gets a 200 code back.
So at the end both are green, but the 2xx is greener :-)
|
Also, i'm trying to understand how all the data is related ...
I'd like to suggest a different format, but need to have a better understanding of the data and how it relates to eachother |
aha! So then yes i agree OK should be the green, and 3xx should be blue. We can get user feedback on this as well |
This looks quite good. And it allow us to move away from the pie chart probably solving https://issues.jboss.org/browse/KIALI-519 and https://issues.jboss.org/browse/KIALI-459. |
f5b2b71
to
9b998ca
Compare
I created a separate JIRA for this - we have colors in other places we need to fix - so we'll do it all in a separate JIRA: https://issues.jboss.org/browse/KIALI-598 |
5d51bb2
to
386bfa8
Compare
I just realized something. When we used the pie chart, we were setting the percentages per slice. Right now, notice the axis - its from 0 to 110 (the graph gives an extra 10 on the high end). But the 0..100 range is just showing up to 100% . The axis will always be 0..100. Do we care? Should we go to showing raw numbers in the bar graph? |
Notice the jumbled axis labels are gone. This is about as close to @serenamarie125 's mock up as I think we can get: |
Looks good! |
I personally don't like the raw numbers in the chart. I think I prefer percentages such that the bars always fill the chart and 100% is the assumed x-axis max. Consider an in/out where you have a high request rate in and a low request rate out but a high % of outgoing requests fail. The out bar would be very thin because it's width is relative to the incoming rate. And the 50% failure would be represented as 1/2 that width, maybe not even visible. The code is fine but I don't like the approach. I agree with Serena's mock above, and the legend can show %, just like she has it. |
As extraordinarily surprising as it is, I believe @jshaughn is right and makes a good point. Since the in and out bars may have values that are orders of magnitude different (a single incoming request might result in 10 or more requests going out to acquire data needed to fulfill the incoming request) we are going to lose visibility into things like error rates (e.g. the red error bar might be so small you can barely see it). I will put back the percentage values so each bar will always be full - the axis will represent 0 to 100%. |
cdf1764
to
b84a894
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Easy one!
9485c1e
to
21e7df6
Compare
I think I have it looking good. I put back the axis because I found how to control the ticks and labels. I will post a screenshot soon. I would say wait until Monday to merge to give others a chance to digest it. |
Beautiful...ship it! |
OK, I would like others to play with this to make sure the numbers actually jive and the graph always fills to the 100% mark. It does in my small testing. If we all are in agreement this is good, it is ready to merge. I'll take off the DNM tag. |
reorganize the summary panel graphs