https://github.com/stethoscope-js/embed
📊 Embeddable charts of your health and life data using Stethoscope
https://github.com/stethoscope-js/embed
embed iframe iframe-embeds jsx react stethoscope stethoscope-js tsx typescript
Last synced: 3 months ago
JSON representation
📊 Embeddable charts of your health and life data using Stethoscope
- Host: GitHub
- URL: https://github.com/stethoscope-js/embed
- Owner: stethoscope-js
- Created: 2020-09-21T18:12:28.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-10-07T08:23:29.000Z (over 4 years ago)
- Last Synced: 2025-02-17T20:46:46.799Z (3 months ago)
- Topics: embed, iframe, iframe-embeds, jsx, react, stethoscope, stethoscope-js, tsx, typescript
- Language: TypeScript
- Homepage: https://stethoscope.js.org/docs/embed
- Size: 675 KB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 🩺📊 Stethoscope Embed
[](https://stethoscope.js.org)
[](https://github.com/stethoscope-js/embed/actions?query=workflow%3A%22Node+CI%22)
This repository contains the web app for embeddable charts of your health and life data using Stethoscope. It's written in React and TypeScript and published at https://stethoscope.js.org/embed/.
[**To get started, visit stethoscope-js/stethoscope →**](https://github.com/stethoscope-js/stethoscope)
## 🎁 Contributing
This repository is for Stethoscope's embeddable web app. We love contributions, so please read our [Contributing Guidelines](https://github.com/stethoscope-js/.github/blob/master/CONTRIBUTING.md) and [Code of Conduct](https://github.com/stethoscope-js/.github/blob/master/CODE_OF_CONDUCT.md) and open an issue or make a pull request!
### Issues
We use the [stethoscope-js/stethoscope](https://github.com/stethoscope-js/stethoscope) repository for issues for all projects, including this one. If you found a bug or have a feature request, [open an issue](https://github.com/stethoscope-js/stethoscope/issues) in the Stethoscope repository and add the label "embed".
## 💻 Usage
To use the web app, you have to visit a URL like the following:
https://stethoscope.js.org/embed/?repo=AnandChowdhary%2Flife&api=rescuetime-time-tracking&latest=top-overview.weeks
You can simple embed this using an HTML `` element:
```html
```
In the above example, the query parameters are the following, URL encoded:
- `repo`: Your repository on GitHub, e.g., `AnandChowdhary/life`
- `api`: The data you want to visualize, e.g., `rescuetime-time-tracking`, which corresponds to the directory in [`./data`](./data)
- `latest`: The visualization to display, based on the specific `api.json` keys, e.g., `top-overview.days`
Here are some more visualization of real-time data from my life:
- Sleep tracking: [this week](https://stethoscope.js.org/embed/?repo=AnandChowdhary%2Flife&api=oura-sleep&latest=total.weeks) · [this month](https://stethoscope.js.org/embed/?repo=AnandChowdhary%2Flife&api=oura-sleep&latest=total.days) · [this year](https://stethoscope.js.org/embed/?repo=AnandChowdhary%2Flife&api=oura-sleep&latest=total.months)
- Programming time: [this week](https://stethoscope.js.org/embed/?repo=AnandChowdhary%2Flife&api=wakatime-time-tracking&latest=weeks) · [this month](https://stethoscope.js.org/embed/?repo=AnandChowdhary%2Flife&api=wakatime-time-tracking&latest=days) · [this year](https://stethoscope.js.org/embed/?repo=AnandChowdhary%2Flife&api=wakatime-time-tracking&latest=months)
This is a real-time screenshot of the above RescueTime weekly overview URL:
[](https://stethoscope.js.org/embed/?repo=AnandChowdhary%2Flife&api=rescuetime-time-tracking&latest=top-overview.weeks)
## 📄 License
- Code: [MIT](./LICENSE) © [Anand Chowdhary](https://anandchowdhary.com)
- Icons:
- Loader: [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/) © [Rohith M S](https://thenounproject.com/rohithdezinr)
- Error: [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/) © [Roselin Christina](https://thenounproject.com/rosttarose)