[Help!] svg Graph in module MMM-Strava

[ianperrin]

@lavolp3 I found that the only way to create an SVG via the DOM was to use document.createElementNS. There’s a helper function (poorly named getNode) in the current master branch which supports the creation of an SVG tag with attributes (e.g. getNode("svg", {width: 115, height: 68, class: 'chart'})

However, I’ve recently been implementing new authentication flow in the develop branch. Alongside that, I’ve switched to using nunjucks templating. There’s quite a few changes, including the chart mode now supporting the period option (i.e. recent, ytd) and the ability to add multiple instances of the module to the mirror which could (should?) make implementing new views easier.

My suggestion would be to add a new mode (progress) to the module along with a new template (templates\MMM-Strava.progress.njk) and start from there.

Let me know how you get on and I can assist where possible.

[ianperrin]

@ianperrin said in [Help!] svg Graph in module MMM-Strava:

However, I’ve recently been implementing new authentication flow in the develop branch.

See https://forum.magicmirror.builders/topic/457/mmm-strava/37 for more details on the new beta version ;)

[lavolp3]

@ianperrin Thanks Ian. I have seen what you’re doing in deelopment branch and currently just trying out locally. Will try to adept later on. Nunjucks template shouldn’t be a problem I guess.

As soon as I have something I’ll send a PR and we can discuss how valuable it really is.
I have been struggling with your approach a bit using “element-creating” functions and returning one element in each function.
As a JS beginner, it was difficult for me to actually ADD a div/element to the body itself regardless of the users’ choice for a table or a chart. I needed first to substitute one of the other ones with a new function.
However it’s very much fun :-) and I’m learning a lot

[ianperrin]

@lavolp3 - no worries. I’ve created a branch to develop this feature. Take a look at https://github.com/ianperrin/MMM-Strava/tree/feature/progress_chart

Once you checkout the branch, add/use the following configuration with either the legacy strava_id and access_token options, or the new client_id and client_secret options:

		{
			module: "MMM-Strava",
			position: "top_right",
			header: "Progress Chart",
			config: {
				activities: ["ride"],
				period: "ytd",
				mode: "progress"
			},
		},

I haven’t yet implement the animated path to show the progress against the goal. ;)

[lavolp3]

@ianperrin Ian, I haven’t seen your latest reply, sorry, but meanwhile I’ve learnt how to deal with the templates and am implementing the progress bar myself.
The nunjucks environment makes it much easier for me in the end.
Look for a PR soon :-)
Thanks again for your work on this! Having much fun with the API and would like to bloat the module much further. (–>motivation for summer)