[G2M] Stat widget trend chart settings option

[kc-leung]

• Added trend config option for trend comparison display
• Added single selection in group filter for stat widget
• Added Title display option for stat widget
• Removed unsed controls in editor-mode for stat widget (color, data transformation, title & legend position)

https://user-images.githubusercontent.com/46459367/182951222-fc49ad7d-2a7a-4019-97e5-0eef0281a3c8.mov

[github-actions[bot]]

📚 Storybook preview (updated to 5ae8eb298ddda9b57b5add330a3f3ae89d78ec21)

[geoerika]

@kc-leung This is not what the stat widget should do with the trend (Cox) / percentage (Paymi) modes. We are not calculating percentages/trends using different resolution values, it has nothing to do with those. For example, in this case for Cox submitted_deals you should have another column, let's say submitted_deals_a_year_ago and calculate the trend using this value, not another submitted_deals value from another resolution. Imagine you have this data object, no need to have resolutions.

{
  dealerId: 1,
  submitted_deals: 45,
  submitted_deals_a_year_ago: 50
}

I will make a sketch for the left panel with how to design controls to select the value to calculate the trend (for Cox) or simply the percentage (for Paymi). You can start with deleting the whole Stat Layer Display on the right panel. We don't use Chart Settings section to select any data value, we only add styling there for data on charts.

[kc-leung]

Alright, then the data structure should be nested since multiple value can be selected and each of them will have their trend even over multiple years ago. From your data structure example seems that each year ago trend is going to have its own column. If that's the case I can parse them by key value. We still need the display setting for the label display of selected values and title of the widget @geoerika

[geoerika]

Alright, then the data structure should be nested since multiple value can be selected and each of them will have their trend even over multiple years ago. From your data structure example seems that each year ago trend is going to have its own column. If that's the case I can parse them by key value. We still need the display setting for the label display of selected values and title of the widget @geoerika

For now, let's only apply this to only one value configuration selected, because that's our use case. I thought you would have got together with Catherine before she left on vacation, she said she had time to take care of design for this. Let's not work with any nested data, no use for now. The user is responsible to select the right column they want to use for the percentage calculations.

[geoerika]

Simple controls to select the value to be used to calculate the Paymi percentage. Add some styling for horizontal or vertical options to the right panel, use the Styling section in the right panel.

[geoerika]

Use a Trend Mode switch to show trend for Cox stat widget:

[geoerika]

Look at my dev-bar-3 story for a preliminary UX, until Catherine has a chance to look over this. Summary:

1. Add Percentage switch should only show for one stat value selected
2. Use 'MuttedBarriercomponent to disable thePercentage Configurationsection whenaddPercentage` state is false.

https://user-images.githubusercontent.com/41120953/181287536-c102ea07-6735-4d56-8fff-b0b5e6ac2c2c.mov

[woozyking]

let's tentatively merge this but follow up with @geoerika and see if there are other lingering issues, after when she's back from vacation