jhuckaby / performa

A multi-server monitoring system with a web based UI.
Other
431 stars 22 forks source link

Feature request/operational change #7

Open geofffox opened 4 years ago

geofffox commented 4 years ago

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.

jhuckaby commented 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.

jhuckaby commented 4 years ago

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:

graph_overrides

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!