[G2M] Top category insights

[geoerika]

Closes #137

Top Insights - new feature

1. Add Top Categories switch added next to Add Benchmark switch for Bar charts
2. Selecting one of the two options will disable the other
3. Benchmark Configuration section is kept inactive in the page as long as the conditions for rendering are not met and for better UX, preventing extension of the widget vertically every time the conditions for rendering the component change.

Set up & usage

https://user-images.githubusercontent.com/41120953/182693595-be54a8b3-8f3d-4c15-8411-804bc303eaa4.mov

Note:

• all these features are available only for devs, therefore to use the storybooks, please login first.

Storybooks: https://6139016b390968003a20da5a-tzynrmocbg.chromatic.com/?path=/story/editor-mode--dev-bar-4

Compact widget for dashboard: https://6139016b390968003a20da5a-tzynrmocbg.chromatic.com/?path=/story/compact-view-only-mode--dev-bar-4

[github-actions[bot]]

📚 Storybook preview (updated to 5a1f3b0fef70f2cb4259ccd962dc8a739064aadb)

[YizhiCatherineZhang]

1. Does the tooltip designed to be colourful and revising the background when the name is long?

   

   If needed, I can design a tooltip to use for all types of bar charts.

2. Axis title. I used the storybook to turn on the axis title. I only find the x-axis title but not the y-axis. Also when we change to percentage mode, the y-axis should have a % otherwise it's hard for view-mode to tell it's a value or a percentage.

3. The space seems a little bit dissymmetry. In the design, the list and the chart shouldn't have this big gap.

   

4. Bar colour. Should we change the bar colour script? This colour palette seems to be similar to each other.

[geoerika]

@YizhiCatherineZhang

1. Does the tooltip designed to be colourful and revising the background when the name is long?

I don't know, this is part of the Plotly charts in the chart-system which I haven't worked on personally.

2. Axis title. I used the storybook to turn on the axis title. I only find the x-axis title but not the y-axis.

There is no label for the axis title because that appears in the Legend and there are 4 values in this case: Market Area, City, Province, Region. This is how plotly charts deals with it I think.

Also when we change to percentage mode, the y-axis should have a % otherwise it's hard for view-mode to tell it's a value or a percentage.

That has to be implemented at chart-system level as well.

3. The space seems a little bit dissymmetry. In the design, the list and the chart shouldn't have this big gap.

What you are looking at is the editor view where the chart uses all the space that is given by the left panel vertically. It was designed that way by Kyle & Sally. I mentioned at the end of this PR's description the right storybook you should use for Compact Widget View.

4. Bar colour. Should we change the bar colour script? This colour palette seems to be similar to each other.

Colour can be changed when we create a widget. This is just a storybook to showcase the widget, it does not mean we should stick with it and has no meaning for this PR. Changed colour to the given Cox Bar chart value.

[geoerika]

@YizhiCatherineZhang This is the widget in the compact view mode. But, how will it look in reality in the dashboard, I cannot say yet, until I get a query with data to test.