[FLAG-1226] Support grouped legend in doughnut charts

[willian-viana]

Overview

Support adding groups of legend items in doughnut charts. A legend item is composed of (1) a color swatch, (2) a label, and (3) a statistic.

Acceptance criteria

Groups stack vertically (i.e. flex-direction: column)

Items within a group wrap to form multiple rows if their total width exceeds the parent container (i.e. flex-wrap: wrap)

Groups can have an optional header with the following styles (anything not listed here should be the default for GFW’s typical style):

font-size: 14px

font-weight: bold

There should be a 5px gap between the optional header and the items in the group. This can be achieved though padding, margin, or any other styling that is convenient.

When the widget is shown in full width (e.g. on the dashboard), then the legend should appear to the left of the doughnut. (This is the current behavior).

When the widget is shown in smaller width (e.g. on the analysis panel on the map), then the legend should appear below the doughnut

Sample data for a country

  {
    "iso": "ALB",
    "drivers_type": "Forest management",
    "umd_tree_cover_loss__ha": 2024,
    "umd_tree_cover_loss__ha": 415.980,
  },
  ...
]

Possible values for drivers_type:

• Drivers of non-permanent loss

  • Forest management
  • Shifting cultivation
  • Wildfires
  • Other natural disasters

• Drivers of permanent deforestation

  • Hard commodities
  • Permanent agriculture
  • Settlements and infrastructure

Demo

[wri7tno]

LGTM