Improve "stacked" graph positioning

[gavincabbage]

Thank you for suggesting an idea to improve InfluxData UI.

• Please ask usage questions on the Influx Community site.
  • https://community.influxdata.com/
• Please add a 👍 or comment on a similar existing feature request instead of opening a new one.
  • https://github.com/influxdata/ui/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+is%3Aclosed+sort%3Aupdated-desc+label%3A%22kind%2Ffeature+request%22+

Proposal:

Our "stacked" graph positioning should clearly differentiate different tables within a graph with high-contrast colors, particularly when shading the area under the graph is enabled.

For example, here's a Grafana screenshot of a stacked graph:

Note that the graph line and the shading are the same color and easily differentiable. Additionally, when a value goes to zero, the "width" of area under the line goes to zero and the color disappears nearly entirely from the graph.

Current behavior:

Contrast the above with our current stacked graph type:

Note that the shading under the lines is not the same color as the line itself. The low opacity shading does not work well with "stacked" positioning, as any are colors are not differentiable and all the shaded areas seem to be the same grey. The lines are stacked correctly, but the primary value of a stacked graph is visualize the "width" of a given line to communicate that table's share of the whole. That is difficult to do without this proper high-contrast shading filling out that width.

Additionally, when a table's value goes to zero, its color does not disappear from the graph. Take the green line in the image above for example: At the highlighted point, this table's value is zero, but because of the ordering of the lines it remains at the top, and makes the graph look like the green color is dominating through the period shown.

The combination of these two issues really diminish the usefulness of "stacked" positioning, as what it communicates is not accurate within normal expectations of stacked graphs generally.

Desired behavior:

Shading under lines should match the color of the line and tables whose values are at zero should not have their color represented on the graph.

Alternatives considered:

Using Grafana.

Use case:

My use case is in visualizing an organization's "share" of consumed query time among the total query time consumed in an environment.

[gavincabbage]

cc @aanthony1243

[TCL735]

Related to #669

[TCL735]

This is very complex if negative values are included with the stacked graphs.