This NPM package provides a collection of web components to build interactive dashboards that visualize data of a specific instance of LAPIS.
Documentation is available in Storybook.
See https://genspectrum.org/ for a full dashboard that uses these components.
npm i @genspectrum/dashboard-components(Note that this does not yet add interactivity between the filter and the graph. Consult the docs for how to achieve that.)
<!DOCTYPE html><htmllang="en"><head><scripttype="module"
src="https://unpkg.com/@genspectrum/dashboard-components@latest/standalone-bundle/dashboard-components.js"
></script></head><body><gs-applapis="https://lapis.genspectrum.org/open/v2"><h2>Filter By Location</h2><gs-location-filterfields='["region", "country", "division"]'
lapisFilter='{ "country": "USA", "dateFrom": "2024-01-01" }'
value='{ "country": "USA" }'
width="100%"
placeholderText="Enter a location"
></gs-location-filter><h2>Prevalence Over Time</h2><gs-prevalence-over-timenumeratorFilters='[{ "displayName": "EG", "lapisFilter": { "country": "USA", "dateFrom": "2024-01-01", "pangoLineage": "EG*" }}, { "displayName": "JN.1", "lapisFilter": { "country": "USA", "dateFrom": "2024-01-01", "pangoLineage": "JN.1*" }}]'
denominatorFilter='{ "country": "USA", "dateFrom": "2024-01-01" }'
granularity="month"
smoothingWindow="7"
confidenceIntervalMethods='["wilson"]'
width="100%"
height="700px"
lapisDateField="date"
></gs-prevalence-over-time></gs-app></body></html>
- The code for the components is in components/. Refer to the README for more information.
- We also provide examples of how to use the components in the examples folder.