MMM-Strava.js
/**
* @file MMM-Strava.js
*
* @author ianperrin
* @license MIT
*
* @see https://github.com/ianperrin/MMM-Strava
*/
Module.register("MMM-Strava", {
// Set the minimum MagicMirror module version for this module.
requiresVersion: "2.2.0",
// Default module config.
defaults: {
client_id: "",
client_secret: "",
mode: "table", // Possible values "table", "chart"
chartType: "bar", // Possible values "bar", "radial"
activities: ["ride", "run", "swim"], // Possible values "alpineski", "backcountryski", "canoeing", "crossfit", "ebikeride", "elliptical", "golf", "handcycle", "hike", "iceskate", "inlineskate", "kayaking", "kitesurf", "nordicski", "ride", "rockclimbing", "rollerski", "rowing", "run", "sail", "skateboard", "snowboard", "snowshoe", "soccer", "stairstepper", "standuppaddling", "surfing", "swim", "velomobile", "virtualride", "virtualrun", "walk", "weighttraining", "wheelchair", "windsurf", "workout", "yoga"
period: "recent", // Possible values "recent", "ytd", "all"
stats: [], // Possible values "count", "distance", "elevation", "moving_time", "elapsed_time", "achievements"
auto_rotate: false, // Rotate stats through each period starting from specified period
locale: config.language,
units: config.units,
reloadInterval: 5 * 60 * 1000, // every 5 minutes
updateInterval: 10 * 1000, // 10 seconds
animationSpeed: 2.5 * 1000, // 2.5 seconds
debug: false, // Set to true to enable extending logging
digits: 1, // digits for distance and elevation
firstYear: new Date().getFullYear() - 4 // first year to group activities by in chart mode when the period is 'all'
},
/**
* @member {boolean} loading - Flag to indicate the loading state of the module.
*/
loading: true,
/**
* @member {boolean} rotating - Flag to indicate the rotating state of the module.
*/
rotating: false,
/**
* @function getStyles
* @description Style dependencies for this module.
* @override
*
* @returns {string[]} List of the style dependency filepaths.
*/
getStyles: function () {
return ["font-awesome.css", "MMM-Strava.css"];
},
/**
* @function getScripts
* @description Script dependencies for this module.
* @override
*
* @returns {string[]} List of the script dependency filepaths.
*/
getScripts: function () {
return ["moment.js"];
},
/**
* @function getTranslations
* @description Translations for this module.
* @override
*
* @returns {object.<string, string>} Available translations for this module (key: language code, value: filepath).
*/
getTranslations: function () {
return {
en: "translations/en.json",
de: "translations/de.json",
es: "translations/es.json",
fr: "translations/fr.json",
gr: "translations/gr.json",
hu: "translations/hu.json",
id: "translations/id.json",
it: "translations/it.json",
pt: "translations/pt.json",
nl: "translations/nl.json",
ru: "translations/ru.json"
};
},
/**
* @function start
* @description Validates config values, adds nunjuck filters and initialises requests for data.
* @override
*/
start: function () {
Log.info("Starting module: " + this.name);
// Validate config options
this.config.mode = this.config.mode.toLowerCase();
this.config.chartType = this.config.chartType.toLowerCase();
this.config.activities = this.filterActivities(this.config.activities.map((activity) => activity.toLowerCase()));
this.config.period = this.config.period.toLowerCase();
// Set stats defaults based on mode
if (!this.config.stats || this.config.stats.length === 0) {
const defaultChartStats = ["distance", "moving_time", "elevation"];
const defaultTableStats = ["count", "distance", "achievements"];
this.config.stats = this.config.mode === "chart" ? defaultChartStats : defaultTableStats;
}
this.config.stats = this.config.stats.map((stat) => stat.toLowerCase());
// Add custom filters
this.addFilters();
// Initialise helper and schedule api calls
this.sendSocketNotification("SET_CONFIG", { identifier: this.identifier, config: this.config });
this.scheduleUpdates();
},
/**
* @function socketNotificationReceived
* @description Handles incoming messages from node_helper.
* @override
*
* @param {string} notification - Notification name
* @param {Object,<string,*} payload - Detailed payload of the notification.
*/
socketNotificationReceived: function (notification, payload) {
this.log(`Receiving notification: ${notification} for ${payload.identifier}`);
if (payload.identifier === this.identifier) {
if (notification === "DATA") {
this.stravaData = payload.data;
this.loading = false;
this.updateDom(this.config.animationSpeed);
} else if (notification === "ERROR") {
this.loading = false;
this.error = payload.data.message;
this.updateDom(this.config.animationSpeed);
} else if (notification === "WARNING") {
this.loading = false;
this.sendNotification("SHOW_ALERT", { type: "notification", title: payload.data.message });
}
}
},
/**
* @function getTemplate
* @description Nunjuck template.
* @override
*
* @returns {string} Path to nunjuck template.
*/
getTemplate: function () {
return "templates\\MMM-Strava." + this.config.mode + ".njk";
},
/**
* @function getTemplateData
* @description Data that gets rendered in the nunjuck template.
* @override
*
* @returns {string} Data for the nunjuck template.
*/
getTemplateData: function () {
moment.locale(this.config.locale);
return {
config: this.config,
loading: this.loading,
error: this.error || null,
data: this.stravaData || {},
chart: { bars: this.config.period === "ytd" ? moment.monthsShort() : moment.weekdaysShort() }
};
},
/**
* @function scheduleUpdates
* @description Schedules table rotation
*/
scheduleUpdates: function () {
var self = this;
// Schedule table rotation
if (!this.rotating && this.config.mode === "table") {
this.rotating = true;
if (this.config.auto_rotate && this.config.updateInterval) {
setInterval(function () {
// Get next period
self.config.period = self.config.period === "recent" ? "ytd" : self.config.period === "ytd" ? "all" : "recent";
self.updateDom(self.config.animationSpeed);
}, this.config.updateInterval);
}
}
},
/**
* @function log
* @description logs the message, prefixed by the Module name, if debug is enabled.
* @param {string} msg the message to be logged
*/
log: function (msg) {
if (this.config && this.config.debug) {
Log.info(`${this.name}: ` + JSON.stringify(msg));
}
},
/**
* @function filterActivities
* @description Removes invalid activity values from an array.
*
* @param {Object} activityArray - Array of activities to be validated
*/
filterActivities: function (activityArray) {
var validActivities = this.config.mode === "chart" ? activityArray : this.defaults.activities;
return activityArray.filter(function (activity) {
return validActivities.indexOf(activity) === -1 ? false : true;
});
},
/**
* @function addFilters
* @description adds filters to the Nunjucks environment.
*/
addFilters() {
var env = this.nunjucksEnvironment();
env.addFilter("getIntervalClass", this.getIntervalClass.bind(this));
env.addFilter("getLabel", this.getLabel.bind(this));
env.addFilter("formatTime", this.formatTime.bind(this));
env.addFilter("formatDistance", this.formatDistance.bind(this));
env.addFilter("formatElevation", this.formatElevation.bind(this));
env.addFilter("roundValue", this.roundValue.bind(this));
env.addFilter("getRadialLabelTransform", this.getRadialLabelTransform.bind(this));
env.addFilter("getRadialDataPath", this.getRadialDataPath.bind(this));
},
/**
* @function getIntervalClass
* @description returns the CSS Class for the supplied interval based on the config period.
*/
getIntervalClass: function (interval) {
moment.locale(this.config.locale);
const currentIntervalMap = {
all: moment().year() - this.config.firstYear,
ytd: moment().month(),
recent: moment().weekday()
};
var currentInterval = currentIntervalMap[this.config.period];
var className = "future";
if (currentInterval === interval) {
className = "current";
} else if (currentInterval > interval) {
className = "past";
}
return className;
},
getLabel: function (interval) {
moment.locale(this.config.locale);
const intervalDateMap = {
all: moment().year(this.config.firstYear).add(interval, "years").format("YY"),
ytd: moment().startOf("year").add(interval, "months").format("MMM").slice(0, 1).toUpperCase(),
recent: moment().startOf("week").add(interval, "days").format("dd").slice(0, 1).toUpperCase()
};
return intervalDateMap[this.config.period];
},
formatTime: function (timeInSeconds) {
var duration = moment.duration(timeInSeconds, "seconds");
return Math.floor(duration.asHours()) + "h " + duration.minutes() + "m";
},
// formatDistance
formatDistance: function (value, digits, showUnits) {
const distanceMultiplier = this.config.units === "imperial" ? 0.0006213712 : 0.001;
const distanceUnits = this.config.units === "imperial" ? " mi" : " km";
return this.formatNumber(value, distanceMultiplier, digits, showUnits ? distanceUnits : null);
},
// formatElevation
formatElevation: function (value, digits, showUnits) {
const elevationMultiplier = this.config.units === "imperial" ? 3.28084 : 1;
const elevationUnits = this.config.units === "imperial" ? " ft" : " m";
return this.formatNumber(value, elevationMultiplier, digits, showUnits ? elevationUnits : null);
},
// formatNumber
formatNumber: function (value, multipler, digits, units) {
if (!isNaN(value)) {
// Convert value
value = value * multipler;
// Round value
value = this.roundValue(value, digits);
// Format number
value = new Number(value).toLocaleString(this.config.locale);
// Append units
if (units) {
value += units;
}
}
return value;
},
// getRadialLabelTransform
getRadialLabelTransform(index, count) {
const degrees = 360 / count / 2 + index * (360 / count);
const rotation = (index < count / 2 ? -90 : 90) + degrees;
const labelRadius = 96;
const translation = this.polarToCartesian(0, 0, labelRadius, degrees);
return `translate(${translation.x}, ${translation.y}) rotate(${rotation})`;
},
// getRadialDataPath
getRadialDataPath(index, count, value) {
const gap = 5;
const startAngle = gap / 2 + index * (360 / count);
const endAngle = startAngle + (360 - count * gap) / count;
const radius = { inner: 109, outer: 109 + value * 100 };
if (value > 0) {
// identify points
var p1 = this.polarToCartesian(0, 0, radius.inner, startAngle);
var p2 = this.polarToCartesian(0, 0, radius.outer - 10, startAngle);
var p3 = this.polarToCartesian(0, 0, radius.outer, startAngle + 5 / 2);
var p4 = this.polarToCartesian(0, 0, radius.outer, endAngle - 5 / 2);
var p5 = this.polarToCartesian(0, 0, radius.outer - 10, endAngle);
var p6 = this.polarToCartesian(0, 0, radius.inner, endAngle);
// describe path
var d = [
"M",
p1.x,
p1.y,
"L",
p2.x,
p2.y,
"A",
10,
10,
0,
0,
1,
p3.x,
p3.y,
"A",
radius.outer,
radius.outer,
0,
0,
1,
p4.x,
p4.y,
"A",
10,
10,
0,
0,
1,
p5.x,
p5.y,
"L",
p6.x,
p6.y,
"A",
radius.inner,
radius.inner,
0,
0,
0,
p1.x,
p1.y,
"L",
p1.x,
p1.y
].join(" ");
return d;
} else {
return "";
}
},
/**
* @function polarToCartesian
* @description Calculates the coordinates of a point on the circumference of a circle.
* @param {integer} centerX x
* @param {integer} centerY y
* @param {integer} radius radius of the circle
* @param {integer} angleInDegrees angle to the new point in degrees
* @see https://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle
*/
polarToCartesian: function (centerX, centerY, radius, angleInDegrees) {
var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
return {
x: centerX + radius * Math.cos(angleInRadians),
y: centerY + radius * Math.sin(angleInRadians)
};
},
/**
* @function roundValue
* @description rounds the value to number of digits.
* @param {decimal} value the value to be rounded
* @param {integer} digits the number of digits to round the value to
*/
roundValue: function (value, digits) {
var rounder = Math.pow(10, digits);
return (Math.round(value * rounder) / rounder).toFixed(digits);
}
});