MMM-JsonTable

A module for the MagicMirror² project which creates a table filled with a list gathered from a json request.

All the variables of the objects in the array are represented by a table column. For every column it checks if a valid DateTime is given, and then formats it to HH:mm:ss if it is today or YYYY-MM-DD otherwise.

Installation

Just clone the module into your modules folder of your MagicMirror².

git clone https://github.com/timdows/MMM-JsonTable

That's it!

If you are a developer please also install the depenendies for linter and prettier:

cd MMM-JsonTable
npm install

Build and Test status

Config options

Except url all options are optional.

Option	Description
url	The full url to get the json response from Default value: ""
arrayName	Define the name of the variable that holds the array to display Default value: null
noDataText	Text indicating that there is no data. Default value: Json data is not of type array! Maybe the config arrayName is not used and should be, or is configured wrong.
keepColumns	Columns on json will be showed Default value: []
tryFormatDate	For every column it checks if a valid DateTime is given, and then formats it to HH:mm:ss if it is today or YYYY-MM-DD otherwise Default value: false Possible values: false and true
size	Text size at table, 0 is default and 3 is H3 Default value: 0 Possible values: 0 - 3
updateInterval	Milliseconds between the refersh Default value: 15000
animationSpeed	Speed of the update animation. (Milliseconds) If you don't want that the module blinks during an update, set the value to 0. Default value: 500 Possible values: 0 - 5000
descriptiveRow	Complete html table row that will be added above the array data Default value: ""

Example 1

End result:

Raw json response:

{
  "items": [
    {
      "name": "Watt",
      "value": "270 Watt"
    },
    {
      "name": "Today",
      "value": "5.85 kWh"
    },
    {
      "name": "ThisWeek",
      "value": "5.83 kWh"
    },
    {
      "name": "ThisMonth",
      "value": "12.8 kWh"
    },
    {
      "name": "LastMonth",
      "value": "246.75 kWh"
    }
  ]
}

Configuration:

{
  module: 'MMM-JsonTable',
  position: 'top_right',
  header: 'HouseDB Sevensegment',
  config: {
    url: 'https://xyz/abc/get.json', // Required
    arrayName: 'items' // Optional
  }
}

Example 2

Raw json response:

{
  "currentUsages": [
    {
      "deviceName": "P1",
      "currentWattValue": 180,
      "todayKwhUsage": 5.902,
      "lastUpdate": "2018-04-02T18:12:06Z"
    },
    {
      "deviceName": "Studie - MainDown",
      "currentWattValue": 76,
      "todayKwhUsage": 0.46,
      "lastUpdate": "2018-04-02T18:06:52Z"
    },
    {
      "deviceName": "BoilerPower",
      "currentWattValue": 0,
      "todayKwhUsage": 2.21,
      "lastUpdate": "2018-04-02T17:30:01Z"
    },
    {
      "deviceName": "Koelkast",
      "currentWattValue": 1.3,
      "todayKwhUsage": 0.55,
      "lastUpdate": "2018-04-02T18:09:55Z"
    },
    {
      "deviceName": "Vaatwasser",
      "currentWattValue": 0.5,
      "todayKwhUsage": 0.01,
      "lastUpdate": "2018-04-02T18:10:51Z"
    },
    {
      "deviceName": "Wasmachine",
      "currentWattValue": 0,
      "todayKwhUsage": 0,
      "lastUpdate": "2018-04-02T18:12:06Z"
    }
  ]
}

Configuration:

{
  module: 'MMM-JsonTable',
  position: 'top_right',
  header: 'HouseDB Current Usages',
  config: {
    url: 'https://xyz/abc/get.json', // Required
    arrayName: 'currentUsages', // Optional
    tryFormatDate: true
  }
}

Example 3 (with font awesome icons)

Raw json response:

{
   "cups":[
      {
         "icon":"fa-calendar",
         "data":"Senaste bryggning",
         "value":"2019-03-07",
         "type":""
      },
      {
         "icon":"fa-clock-o",
         "data":"Klockan",
         "value":"17:32:06",
         "type":""
      },
      {
         "icon":"fa-coffee",
         "data":"Totalt antal bryggda koppar",
         "value":60,
         "type":"st"
      },
      ...
   ]
}

Example 4 (with descriptive row)

Raw json response:

{
   "deviceKwhUsages":[
      {
      "name": "Studie - MainDown",
      "today": 0,
      "todayFormatted": "0",
      "thisWeek": 1.27,
      "thisWeekFormatted": "1,27",
      "lastWeek": 7,
      "lastWeekFormatted": "7,00",
      "thisMonth": 17.41,
      "thisMonthFormatted": "17,41",
      "lastMonth": 30.58,
      "tLastMonthFormatted": "30,58"
    },
    {
      "name": "BoilerPower",
      "today": 0,
      "todayFormatted": "0",
      "thisWeek": 1.9,
      "thisWeekFormatted": "1,90",
      "lastWeek": 13.3,
      "lastWeekFormatted": "13,30",
      "thisMonth": 30.44,
      "thisMonthFormatted": "30,44",
      "lastMonth": 54.99,
      "tLastMonthFormatted": "54,99"
    },
      ...
   ]
}

Configuration:

{
  module: 'MMM-JsonTable',
  position: 'top_right',
  header: 'HouseDB Kwh Statistics',
  config: {
    url: 'https://xyz/abc/get.json',
    arrayName: 'deviceKwhUsages',
    descriptiveRow: '<tr><td>Name</td><td>Today</td><td>ThisWeek</td><td>LastWeek</td><td>ThisMonth</td><td>LastMonth</td></tr>'
  }
}

Example 5 (with font awesome icons, colors and descriptive row)

Raw json response:

{
  "trash": [
    {
      "icon": "fa-trash",
      "za-type": "Paper",
      "zb-date": "15 July"
    },
    {
      "icon": {
        "color": "#FF6E00",
        "value": "fa-trash"
      },
      "za-type": {
        "color": "#FF6E00",
        "value": "Plastic"
      },
      "zb-date": {
        "color": "#FF6E00",
        "value": "25 July"
      }
    },
    {
      "icon": {
        "color": "red",
        "value": "fa-trash"
      },
      "za-type": {
        "value": "GFT"
      },
      "zb-date": {
        "color": "yellow"
      }
    }
  ]
}

Configuration:

{
  module: 'MMM-JsonTable',
  position: 'top_left',
  header: 'Trash calendar',
  config: {
    url: 'https://xyz/abc/get.json',
    arrayName: 'trash',
    descriptiveRow: '<tr><td></td><td>Type</td><td>Day</td></tr>',
    updateInterval: 60000
  }
}

Developer hints

Please use npm run test before doing a PR.