MMM-WeatherChartD3

This is a module for the MagicMirror².

This module displays a weather chart using any weather provider. It can display temperature, feels like temperature, precipitation, snow and weather icons. It uses the D3.js library.

Using the module

To use this module, add the following configuration block to the modules array in the config/config.js file:

var config = {
	modules: [
		{
			module: "MMM-WeatherChartD3",
			config: {
				updateInterval: 10 * 60 * 1000,
				initialLoadDelay: 0,
				weatherProvider: "openweathermap",
				weatherEndpoint: "/onecall",
				apiKey: "",
				type: "full", // Possible values: hourly, forecast (=daily) or specific value `full` which is a join of data from hourly+daily
				lang: config.language,
				lat: 0,
				lon: 0,
				units: config.units,
				locale: config.locale,
				d3jsVersion: "7", // can either be in format "7.4" or even "7.4.4"
				title: "Weather Forecast",
				height: 300,
				width: 500,
				iconSize: undefined, // in px or undefined to define automatically at first call
				iconURLBase: "https://raw.githubusercontent.com/erikflowers/weather-icons/master/svg/",
				hoursRatio: 0, // Ratio of fetched hours in graph (useful for openweathermap onecall that gives 48h with 1h precision) - 0 or undefined to ignore
				showIcons: true,
				showNights: true,
				showTemperature: true,
				showMinMaxTemperature: false,
				showFeelsLikeTemp: true,
				showPrecipitationAmount: true,
				showPrecipitationProbability: true, // Only used when showPrecipitationAmount == true
				showSnow: true, // if false: snow is included in precipitations
				showPressure: true,
				showHumidity: true,
				showWind: true,
				showAQI: true,
				showUVI: true,
			}
		},
	]
}

Installation

cd ~/MagicMirror/modules # Change path to modules directory of your actual MagiMirror² installation
git clone https://github.com/seb-ma/MMM-WeatherChartD3
cd MMM-WeatherChartD3
npm install --no-audit --no-fund --no-update-notifier --only=prod --omit=dev

Configuration

Options

Option	Description
`updateInterval`	Optional How often does the content needs to be fetched? (Milliseconds) Type: `int` (milliseconds) Default 100000 milliseconds (10 minutes)
`initialLoadDelay`	Optional The initial delay before loading. If you have multiple modules that use the same API key, you might want to delay one of the requests. (Milliseconds) Type: `int` (milliseconds) Default 0 milliseconds
`weatherProvider`	Optional Which weather provider should be used. see https://github.com/MichMich/MagicMirror/tree/master/modules/default/weather/providers for list of available providers
`weatherEndpoint`	Optional The openweathermap API endPoint. Possible values: `/onecall`, `/forecast` (free users) or `/forecast/daily` (paying users or old apiKey only) Default value: `/onecall`
`type`	Optional Which type of weather data should be displayed. Possible values: `hourly`, `daily` or specific value `full` which is a join of data from `hourly`+`daily` Default value: `full`
`apiKey`	Required API key to fetch the weather provider
`lat`	Required Latitude of the location used for weather information. Type: `float`
`lon`	Required Longitude of the location used for weather information. Type: `float`
`lang`	Optional The language sent to provided. Default value: uses value of `config.language`
`units`	Optional What units to use. Specified by config.js Default value: uses value of `config.units`
`locale`	Optional The locale of the days. Default value: uses value of `config.locale`
`d3jsVersion`	Optional The D3 version to use. Default value: "7" Can either be in format "7.4" or even "7.4.4"
`height`	Optional Height of the chart area. Type: `int` (pixels) Default value: 300
`width`	Optional Width of the chart area. Type: `int` (pixels) Default value: 500
`iconSize`	Optional Size of weather icons. Auto-define the maximum possible size that fits in chart if `undefined` Type: `int` (pixels) Default value: undefined
`iconURLBase`	Optional Base of the URL to retrieve icons Default value: `https://raw.githubusercontent.com/erikflowers/weather-icons/master/svg/`
`hoursRatio`	Optional Ratio of fetched hours in graph (useful for openweathermap onecall that gives 48h with 1h precision) - 0 or undefined to ignore Type: `float` (in [0 .. 1]) Default value: `0`
`showIcons`	Optional Show weather icons Type: `boolean` Default value: `true`
`showNights`	Optional Show a background color for nights Type: `boolean` Default value: `true`
`showTemperature`	Optional Show a plot with temperature for each day Type: `boolean` Default value: `true`
`showMinMaxTemperature`	Optional Show a plot with min and max temperature for each day (if given by provider) Type: `boolean` Default value: `false`
`showFeelsLikeTemp`	Optional Show a plot with the "feels like" temperature (if given by provider) Type: `boolean` Default value: `true`
`showPrecipitationAmount`	Optional Show a plot with precipitations (if given by provider). Type: `boolean` Default value: `true`
`showPrecipitationProbability`	Optional Show precipitations probability (if given by provider). Only displayed when `showPrecipitationAmount` == `true` Type: `boolean` Default value: `true`
`showSnow`	Optional Show a plot with snow (if given by provider). Include snow in precipitations plot if set to `false` Type: `boolean` Default value: `true`
`showHumidity`	Optional Show a plot with humidity (if given by provider). Type: `boolean` Default value: `true`
`showWind`	Optional Show a plot with wind speed (if given by provider). Type: `boolean` Default value: `true`
`showAQI`	Optional Show Air Quality Index (if given by provider). Type: `boolean` Default value: `true`
`showUVI`	Optional Show UVI (if given by provider). Type: `boolean` Default value: `true`

Styling

This chart can have a fully customized style. Each item type have a specific class that can be overloaded in custom.css.

seb-ma / MMM-WeatherChartD3