List style report cards

[mahalakshme]

Motivation:

• Frequently there are cases where across report cards very similar logic is used and only a value used for comparison, changes. Eg: in one of our partner organisations, we load 'Total SAM children' and 'Total MAM children'. For rendering each takes around 20-30s. And hence the dashboard nos doesn't load until both the report card results are calculated and it makes the user to wait for a minute. If the logic is combined, we can render the results in 30s since it would need only retrieval from db and iterating once.
• The above kind of scenarios also lead to code duplication across report cards and when some requirement changes - say for the above SAM and MAM children less than 5 years then the change needs to be done in both.

Acceptance criteria:

• Modify the return structure to be able to render multiple report cards on UI from single ReportCard rule definition as mentioned in the Technical details
• The card name and the colour (Text and card background) defined in report card rule will override whatever defined/selected via webapp UI
• Should be backward compatible - should work with old return object structure as well
• The colour we define in the UI is used as background color in Tile view and background colour of Text in List View(right side box). Let it remain/work the same.
• The value of colour should accept hexcode values and colors that can be defined in css styling.
• Documentation has to be updated related to custom dashboard Report-cards
• When the Number in the nested report card and the number of cards in the return structure dont match show the error Configured number of cards don't match with the number of cards in the rule on the cards rendered by the nested report card(independent of whether the configured number is greater than or less than the no of cards in the rule)
• Show an appropriate default rule

Technical details:

Current structure:

{
        primaryValue: undernourishedCount,
        secondaryValue: `${percentValue}%`,
        lineListFunction: undernourishedIndividuals,
    };

Structure to be:

{
  reportCards: [
  {
        primaryValue: undernourishedCount,
        secondaryValue: `${percentValue}%`,
        lineListFunction: undernourishedIndividuals,
        cardName: 'name value',
        cardColor: '#hexone',
        textColor: '#hextwo',
    },
....
 ]
}