Components of a Widget - resource-watch/ocean-watch-data GitHub Wiki

Components of a widget

Widgets have 5 key attributes regardless of their type. These can be viewed from the API.

1. Widget configuration The widgetConfig property of the widget [attributes] property corresponds to the widget configuration. The configuration controls the rendering of the widget. It is a JSON object and its organization is free form. For more information on how to create the widgetConfig for different widget types, navigate to their respective pages in the wiki using the sidebar.

{
  "id": "feddec38-7b28-4be6-881a-0c4761598ed8",
  "type": "widget",
  "attributes": {
    "widgetConfig": {...}
  }
}

2. Title The name property of the widget [attributes] property corresponds to the title of above the rendered display. On Ocean Watch, many titles are parameterized with country or territory names using {{geostore_country_name}} as a placeholder.

{
  "id": "feddec38-7b28-4be6-881a-0c4761598ed8",
  "type": "widget",
  "attributes": {
    "name": "Desertification in {{geostore_country_name}}, 2015-2019",
  }
}

3. Description The description property of the widget [attributes] corresponds to the "Description" section on the backside of the widget (click the "i"). On Ocean Watch this descriptive text describes

{
  "id": "feddec38-7b28-4be6-881a-0c4761598ed8",
  "type": "widget",
  "attributes": {
    "description": "The desertification of soils makes them more vulnerable to erosion by wind or rainfall. Widespread desertification increases the amount of sediment that enters water bodies and the coastal zone where it can smother ecosystems and limit photosynthesis at the sea-floor. The loss of ecosystems such as shrubland and grassland, forests, wetlands, and croplands increases desertification risks due to the loss of root networks and decline in soil biodiversity. This chart highlights the major biome conversions that are contributing to the country's total desertified areas."
  }
}

4. Caption The caption property of the metadata [attributes][info] property corresponds to the italicized text below the rendered display. On Ocean Watch, widgets usually do not have captions so this property is blank.

[
  {
    "id": "618e94096cd78b001acc1b7e",
    "type": "metadata",
    "attributes": {
      "info": {
        "caption": "Data from research led by The Nature Conservancy as part of the Mapping Ocean Wealth Initiative."
      }
  }
]

5. Links The links property of the metadata [attributes][info] property corresponds to the hyperlinks on the backside of the widget (click the "i"). These links direct users to the source(s), the underlying dataset(s), and any processing documentation.

[
  {
    "id": "618e94096cd78b001acc1b7e",
    "type": "metadata",
    "attributes": {
      "info": {
        "widgetLinks": [
          {
            "link": "https://resourcewatch.org/data/explore/ocn013-Coral-Reef-Tourism-Value",
            "name": "View on Resource Watch"
          },
          {
            "link": "https://www.sciencedirect.com/science/article/pii/S0308597X17300635",
            "name": "\"Mapping the global value and distribution of coral reef tourism\" in Marine Policy"
          },
          {
            "link": "http://maps.oceanwealth.org/",
            "name": "Mapping Ocean Wealth Explorer"
          },
          {
            "link": "https://wttc.org/",
            "name": "World Travel and Tourism Council"
          }
        ]
      }
    }
  }
]