Fitness Web Components

The Code

This is an Eleventy-based project demoing the fitness visualisations Web Components and custom styling.

You can download the repository of this project and configure your fitness.json data to generate fitness cards and activity rings. You can integrate with an API and customise the design of the components.

There are two web components used in this demo; the clickable activity rings at the top and the fully featured fitness cards, which are replayable and have custom icons from Heroicons. You can see more customisation in the fitness visualisations demo.

Below is how the components are built, using the JSON data.

<fitness-ring
    calories-total="item.move.total" calories-goal="item.move.goal"
    minutes-total="item.exercise.total" minutes-goal="item.exercise.goal"
    hours-total="item.stand.total" hours-goal="item.stand.goal"
></fitness-ring>

<fitness-card
    date="item.date"
    replayable="true"
    steps="item.steps" distance="item.distance" flights="item.flights"
    calories-total="item.move.total" calories-goal="item.move.goal"
    minutes-total="item.exercise.total" minutes-goal="item.exercise.goal"
    hours-total="item.stand.total" hours-goal="item.stand.goal"
>
    <div slot="calories">Move</div>
    <div slot="minutes">Exercise</div>
    <div slot="hours">Stand</div>
    <svg slot="icon-calories">…</svg>
    <svg slot="icon-minutes">…</svg>
    <svg slot="icon-hours">…</svg>
</fitness-card>

The components above are driven by a JSON dataset that looks like the following.

{
	"date": "2023-09-25T00:00:00+00:00",
	"steps": 18935,
	"distance": 16254,
	"flights": 8,
	"move": {
		"total": 500,
		"goal": 750
	},
	"exercise": {
		"total": 30,
		"goal": 60
	},
	"stand": {
		"total": 8,
		"goal": 10
	}
}