Embed Web Component: moonshot-city-results

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

Install

Include the component library in the head of your HTML:

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

How to Use

Provide exactly one city_alias:

<moonshot-city-results
  city_alias="austin-tx">
</moonshot-city-results>

By default, the component displays a Waste Diverted for City Name summary, lifetime waste diverted, impact equivalencies, and four count cards for customers, sectors, locations, and containers. The View action opens /city/cityAlias on the dashboard domain in a new tab.

Sector Filters

Use sector_alias to limit the aggregated results to one business sector:

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

Provide multiple sector aliases as a comma-delimited string:

<moonshot-city-results
  city_alias="austin-tx"
  sector_alias="hospitals,restaurants,universities">
</moonshot-city-results>

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

const cityResults = document.createElement('moonshot-city-results')
cityResults.cityAlias = 'austin-tx'
cityResults.sectorAlias = ['hospitals', 'restaurants']
document.body.appendChild(cityResults)

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

Configuration Attributes

Option	Description
`city_alias`	Required. A single city URL alias.
`sector_alias`	Optional business-sector 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-city-results
  city_alias="austin-tx"
  showCounts="false">
</moonshot-city-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.