/water-quality-dials

Primary LanguageSvelteGNU General Public License v3.0GPL-3.0

water-quality-dials

This is a svelte app. You need node installed.

  1. Clone the repo
  2. cd into the directory root, then npm install.
  3. npm generate
  4. npm run dev to run it locally at https://localhost:5000

Configuring the dials

This uses a blob of json on the page to feed microcopy and other configuration info. The settings file can be found in ./functions/settings.json. The configuration is rendered to a <script> tag on the index and consumed as App props.

example

"south": {
    "name": "South Branch",
    "description": "Near Eleanor Boat House",
    "min": 0,
    "max": 100,
    "main_dial_stops": 10,
    "main_gauge_stops": 5
}

Supported options are:

key value
name The main gauge name. Appears in bold at the top of each guage
description Small italic descriptor underneath the name
min The lowest possible value reflected on the gauges. Probably 0.
max The highest possible value reflected on the gauges. Probably 100.
main_dial_stops The number of tick marks along the main dial.
main_gauge_stops The number of main ticks on the chart at the bottom.

Deploying/publishing

  1. Run npm run generate to make ./public/index.html
  2. Run npm run build to create the javascript and css bundle files.
  3. The HTML contents are rendered to the index file and are suitable for a pym iframe.
  4. The bundle files and HTML index should be uploaded to the web server.