Open geofffox opened 4 years ago
Thanks, I will look into these issues. Unfortunately, we're really at the mercy of the graphing library here (ApexCharts), and it auto-scales things to make room for the legend underneath the graphs. But I will see what is possible, and at the very least I will expose configuration properties for you to customize.
Okay, so I released a new version with lots of new graph configuration options (details below). But first, I have to point out that Performa does request fixed height graphs from ApexCharts. The fixed heights are 400, 300 and 200 pixels for the full width, half width and third width graphs, respectively.
Now, that being said, if you have multiple servers and are viewing a Performa "group", then ApexCharts will add a "legend" underneath each graph with a color coded label for each server. This legend unfortunately "eats" into the graph height, and there is really nothing we can do about it. But you can completely disable the legend if you want, which should net you exact heights in all cases. To disable the legend display, set the max_legend_size
property to 0
, and restart Performa. But if you are trying to do something like compare charts with different width settings (full / half / third), then those will have different heights as well, but that leads me to...
Performa v1.0.22 has been released, and now allows you to customize virtually anything and everything related to the ApexCharts graph rendering system, including the height settings per each graph "size" setting (full / half / third). Here are the docs:
If you want, you can override any settings for the ApexCharts library, which is used to render all of the Performa charts. See the graph_overrides
object in the config file (located inside the client
object), which is formatted like this:
"graph_overrides": {
"all_sizes": {
"stroke.curve": "smooth",
"markers.style": "hollow",
"title.align": "center",
"grid.show": true
},
"full": {
"chart.height": 400,
"title.fontSize": 16,
"stroke.width": 3
},
"half": {
"chart.height": 300,
"title.fontSize": 15,
"stroke.width": 2
},
"third": {
"chart.height": 200,
"title.fontSize": 14,
"stroke.width": 2
}
}
The all_sizes
object will apply overrides to all three graph sizes, whereas the full
, half
and third
objects apply overrides to their respective graph size setting. The full
, half
and third
take precedence over all_sizes
, if the same overrides exist in both places. Inside the objects, the format of the ApexCharts configuration overrides is in "dot notation", so you can apply deep nested overrides. For example, consider this override:
"stroke.curve": "smooth",
This controls the ApexCharts curve
setting, which is inside the stroke
group. For details on this, see the stroke documentation for details. Similarly, this setting:
"title.align": "center",
This controls the ApexCharts align
setting, which is inside the title
group. For details on this one, see the title documentation.
So in your case, Geoff, if you are still having problems comparing graphs because they are not equal heights, and you've tried setting the max_legend_size
to 0 and it didn't help, then I recommend you change all three chart.height
settings to the same number, maybe 300 or so, and see if that helps. Note that after each change, you will need to wait up to 10 seconds for the file to be automatically reloaded (or restart then Performa service), and then refresh your browser.
Good luck!
Performa scales its graphs so they're nearly always full height. This makes comparing much more difficult because the scale is never the same. I'd rather see constant height and possibly a mark of some sort at the y axis point you go into warning.
Also, CPU usage cannot exceed 100%. When it does hit 100% the graph scales to show 120% potential.
Performa has been very helpful in letting me schedule my jobs to maximize my server.