Embed Web Component: moonshot-sector-results

Responsive web component for displaying lifetime diversion results for one business sector. Results may include every associated city or an optional subset of cities. Metrics from multiple cities are aggregated by the API before they are displayed.

Install

Include the component library in the head of your HTML:

<script src="lib/moonshot-sector-results.js"></script>

How to Use

Provide exactly one sector_alias:

<moonshot-sector-results
  sector_alias="hospitals">
</moonshot-sector-results>

By default, the component displays lifetime waste diverted, impact equivalencies, and four count cards for customers, cities, locations, and containers. The View action opens the corresponding sector page in a new tab.

City Filters

Use city_alias to limit the aggregated results to one city:

<moonshot-sector-results
  sector_alias="hospitals"
  city_alias="austin-tx">
</moonshot-sector-results>

Provide multiple city aliases as a comma-delimited string:

<moonshot-sector-results
  sector_alias="hospitals"
  city_alias="austin-tx,dallas-tx,houston-tx">
</moonshot-sector-results>

When creating the component with JavaScript, cityAlias also accepts an array. Set the properties before connecting the element:

const sectorResults = document.createElement('moonshot-sector-results')
sectorResults.sectorAlias = 'hospitals'
sectorResults.cityAlias = ['austin-tx', 'dallas-tx']
document.body.appendChild(sectorResults)

If city_alias is omitted, the API returns and aggregates results for every city associated with the sector. The displayed city count is the length of the returned cities array.

Configuration Attributes

Option	Description
`sector_alias`	Required. A single business-sector URL alias.
`city_alias`	Optional city URL alias filter. Supports one alias or a comma-delimited list.
`showCounts`	Whether to show the four count cards. Default is `true`.
`autoRefresh`	Optional refresh frequency in seconds. Omit or set to `0` to disable.
`borderColor`	Overrides card and divider borders. Light-theme default is `#D8D8D8`.
`fontColor`	Overrides headings, labels, and supporting text. Light-theme default is `#3B3B3B`.
`theme`	Display theme. Supported values are `light` and `dark`; default is `light`.
`debug`	Set to `true` to output non-sensitive debug information to the console.

Hide Count Cards

Set showCounts to false to render only the primary waste-diverted card:

<moonshot-sector-results
  sector_alias="hospitals"
  showCounts="false">
</moonshot-sector-results>

Responsiveness

The component fills the available embed width without imposing a minimum width and is capped at 1024px. It centers itself when more width is available.

Responsive behavior is based on the component's own rendered width:

Wide: horizontal summary with four count cards in one row.
Medium: horizontal summary with count cards in a two-column grid.
Compact: stacked summary with count cards in a two-column grid.
Narrow: stacked summary with count cards in one column.