Change Details

Suggestions are taken from an email Pau sent to Dan: I think the VE-Wikitext switch works well to deal with the volume of data. Using the dashed style while keeping the same color across VE and Wikitext representations works well (although it will be better to check it when the data is not the same). For time series, the legend is shown on hover. This has the advantage that the graph can take all the available space and the legend is only shown when the user is interested in the graph. However, the fact that the legend is shown at the right side where the latest data normally appears makes it hard to check which is the current value of a line that overlaps with the legend. Accommodating some extra space (top or side) to reduce the chance may help. When only one of the funnel analysis graphs is shown, it seems that it only has half of the space assigned which results in the graph getting cropped if the current viewport is not big enough. Ideally, when there is one graph (either VE or wikitext), Some small styling considerations: Consider removing the margins of "body" and "comparisons.ui.attached.segment". Otherwise the content looks like cards in a grey box inside another white box. If the mentioned margins are removed we can convey a simpler model: a toolbar vs grey body with content cards. For each card, the heading can remain white to make it feel more part of the same card as the graph. Set the font-family to be sans-serif.

Suggestions from an email Pau sent to Dan: [] Check that using dashed style lines in time series works well. Right now, the fake data has VE and Wikitext plots overlap. Using the same color works well although it will be better to check it when the data is not the same. [] Accommodate some extra space (top or side) for time series legend to reduce the chance hovering legend overlaps what user is trying to see. Right now in the time series, the legend is shown on hover. This has the advantage that the graph can take all the available space and the legend is only shown when the user is interested in the graph. However, the fact that the legend is shown at the right side where the latest data normally appears makes it hard to check which is the current value of a line that overlaps with the legend. [] When only one of the funnel analysis graphs is shown, it seems that it only has half of the space assigned which results in the graph getting cropped if the current viewport is not big enough. Ideally, when there is one graph (either VE or wikitext), **Some small styling considerations:** [] Consider removing the margins of "body" and "comparisons.ui.attached.segment". Otherwise the content looks like cards in a grey box inside another white box. If the mentioned margins are removed we can convey a simpler model: a toolbar vs grey body with content cards. [] For each card, the heading can remain white to make it feel more part of the same card as the graph. [] Set the font-family to be sans-serif.

Suggestions are taken from an email Pau sent to Dan: I thin [] Check the VE-Wikitext switch works well to deal with the volume of data.at using dashed style lines in time series works well. Right now, Using the dashed style while keeping the same color across VE and Wikitext representationsfake data has VE and Wikitext plots overlap. Using the same color works well (although it will be better to check it when the data is not the same). For. [] Accommodate some extra space (top or side) for time series legend to reduce the chance hovering legend overlaps what user is trying to see. Right now in the time series, the legend is shown on hover. This has the advantage that the graph can take all the available space and the legend is only shown when the user is interested in the graph. However, the fact that the legend is shown at the right side where the latest data normally appears makes it hard to check which is the current value of a line that overlaps with the legend. Accommodating some extra space (top or side) to reduce the chance may help. [] When only one of the funnel analysis graphs is shown, it seems that it only has half of the space assigned which results in the graph getting cropped if the current viewport is not big enough. Ideally, when there is one graph (either VE or wikitext), **Some small styling considerations:** [] Consider removing the margins of "body" and "comparisons.ui.attached.segment". Otherwise the content looks like cards in a grey box inside another white box. If the mentioned margins are removed we can convey a simpler model: a toolbar vs grey body with content cards. [] For each card, the heading can remain white to make it feel more part of the same card as the graph. [] Set the font-family to be sans-serif.