Flip button to swap axes

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: 7.4.13 DXP GA1, Master
• Component/s: Pages > Content Performance
• Labels:
  • d_20_09
  • fc_20_09
• Epic/Theme:
  • Content_Performance_Analytics
• Epic Link: tango-content-dashboard-audit-graphs
• Sprint: TANGO | #45 DIS | Sep11-Sep25, TANGO | #46 DEV | Sep25-Oct09, TANGO | #47 DEV | Oct09-Oct23
• Git Pull Request: https://github.com/liferay-tango/liferay-portal/pull/443 https://github.com/brianchandotcom/liferay-portal/pull/95198

Motivation

As a part of the UX improvements in the Content Audit graph, we want to make it easier to change values represented in each of the axes. Not only the selection of the vocabularies represented (see LPS-120673), but also the switch of the axes.

Design

https://www.figma.com/file/Xwe3ovSmy82VsA5cvNpxe3/LPS-113877-Flip-button-to-swap-axes?node-id=1%3A1053

Technical Requirements

• There will be a button for swapping axes on the top right of the graph area 
• The button will exchange axes so the vocabulary *represented in the X (the first in the list in the "In use" box) is sent to the Y and the other way around
• Each time the user clicks on the button, the axes will swap. If there's only one vocabulary represented in the graph, or there are no categories or/and contents for at least one of the featured vocabularies, the button will be shown as disabled
• The current configuration option has disappeared (there's no Actions menu already)

• NOTE: A vocabulary will be represented in the graph if these conditions are met:
  • the vocabulary is selected in the In Use box in the Configuration panel
  • the vocabulary has categories in it
  • these categories are being used in some web content

However, note that since the LPS-122877 - No data is shown in the graph when first "In use" vocabulary hasn't got any contents bug resolution, the content audit tool shows data from the moment that at least one of the configured vocabularies meets the indicated conditions.

Acceptance Criteria

• Given the Content Dashboard
• When the user clicks on the Flip axes button
• Then the vocabularies will be exchanged, the vocabulary represented in the X (the first in the list in the "In use" box) is sent to the Y, and the other way around

 --

• Given the Content Dashboard
• When there is only one vocabulary represented in the graph
• Then the Flip axes button will be disabled

 --

• Given the Content Dashboard
• When there are no vocabularies represented in the graph
• Then the Flip axes button will be disabled

–

Test Scenarios

AC ID	Test Strategy	Test Scenarios	Is it covered by FrontEnd ? (JS-Unit)	Is it covered by BackEnd? (unit or integration)	Poshi?
01	High	When the user clicks on the Flip axes button, the vocabularies will be exchanged, the vocabulary represented in the X (the first in the list in the "In use" box) is sent to the Y, and the other way around	NO	NO
02	Low	When there is only one vocabulary selected/configured in the graph, the Flip axes button will be disabled	NO	NO
03	Low	When the vocabularies selected have no categories, the Flip axes button will be disabled	NO	NO
04	Medium	When there are not web content associated to the categories, the Flip axes button will be disabled	NO	NO

• Frontend part is a JSP