Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trovster/fitness-visualisations
Two Web Components for fitness visualisations.
https://github.com/trovster/fitness-visualisations
data-visualization fitness npm npm-package visualization web-component
Last synced: 23 days ago
JSON representation
Two Web Components for fitness visualisations.
- Host: GitHub
- URL: https://github.com/trovster/fitness-visualisations
- Owner: trovster
- License: mit
- Created: 2023-10-03T15:43:42.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-06T17:49:56.000Z (over 1 year ago)
- Last Synced: 2024-12-06T21:05:27.654Z (about 1 month ago)
- Topics: data-visualization, fitness, npm, npm-package, visualization, web-component
- Language: JavaScript
- Homepage: https://trovster.github.io/fitness-visualisations/
- Size: 423 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fitness Components
This provides two Web Components for fitness visualisations. You can use a fully
featured fitness card or just the activity rings on their own. The default
activity ring design is inspired by Apple Fitness.
## Installation
```bash
npm install @trovster/fitness-visualisations --save
```
## Usage
These are [Web
Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components) and
must be imported before the custom elements can be used. If you are using the
fitness card, then you do not need to import the activity ring.
```html
import '@trovster/fitness-visualisations/src/FitnessCard.js';
import '@trovster/fitness-visualisations/src/FitnessRing.js';
```
Both the card and ring require the `calories`, `minutes` and `hours` totals and
goals. The card has additional optional values. If you include the date, it
appears as a header. The `steps`, `distance` and `flights` data appear in the
footer section. The distance attribute should be provided **in meters**. By
default, this is converted to *miles*, but you can change this to kilometres
using `units="km"`.
```html
```
### Custom Text
You can provide a custom header by using the named ``. You can also change
the text for “calories”, “minutes” and “hours”.
```html
The Custom Header
Move
Exercise
Stand
```
### Replayable
The activity rings animation can be replayed when using the `replayable="true"`
attribute. When the activity rings are clicked, the animation is replayed in
reverse, then completed again.
### Styling
The typeface and colours of the text and rings can be changed using CSS
variables. The `--fitness-value` controls the colour of the *values* in the
footer.
The colours of the fitness card values are linked to the ring colours, so they
can not be configured independently. To change the fitness card colours you must
use the CSS variable without the `-ring` value.
```css
--fitness-font: sans-serif;
--fitness-value: #9ca3af;
--fitness-calories: #fa114f;
--fitness-minutes: #92e82a;
--fitness-hours: #1eeaef;
--fitness-ring-calories: #fa114f;
--fitness-ring-minutes: #92e82a;
--fitness-ring-hours: #1eeaef;
```
If you provide labels, they can be styled using `--fitness-label` CSS variable.
You can target each label independently by using the appropriate `[slot]`
selector and setting the CSS variable.
```css
fitness-ring [slot="label-calories"] {
--fitness-label: #B31162;
}
fitness-ring [slot="label-minutes"] {
--fitness-label: #1FAD8F;
}
fitness-ring [slot="label-hours"] {
--fitness-label: #1689A0;
}
```
You can target the styling of sections within the fitness card visualisation
using the `::part` pseudo-element.
```css
fitness-card::part(header) {}
fitness-card::part(main) {}
fitness-card::part(ring) {}
fitness-card::part(footer) {}
```
## Development
### Linting and Formatting
To scan the project for linting and formatting errors, run:
```bash
npm run lint
```
To automatically fix linting and formatting errors, run:
```bash
npm run format
```
### Local Demo with `web-dev-server`
To start a local development server that serves the basic demo located in
`docs/index.html`, run:
```bash
npm start
```
### Tooling Configs
For most of the tools, the configuration is in the `package.json` to minimize
the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to
individual files.