From e5957cb06efce829a4eaf27a1eafd24da787aff8 Mon Sep 17 00:00:00 2001 From: kalkih Date: Wed, 30 Jan 2019 22:07:10 +0100 Subject: [PATCH] Update release info --- LICENSE | 2 +- README.md | 211 ++++++++++++++++++++++++++++++++++++++------------- changelog.md | 26 ++++++- package.json | 22 +++++- tracker.json | 6 +- 5 files changed, 208 insertions(+), 59 deletions(-) diff --git a/LICENSE b/LICENSE index d3a33c2..3f5c712 100755 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2018-2019 Kalle Kihlström +Copyright (c) 2018-2019 Karl Kihlström Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 730a815..0d23b28 100755 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ # Lovelace Mini Graph Card -A minimalistic sensor with graph lovelace card for [Home Assistant](https://github.com/home-assistant/home-assistant). +A minimalistic and customizable graph card for [Home Assistant](https://github.com/home-assistant/home-assistant) Lovelace UI. -The card works with entities from within the **sensor** domain and displays the sensors current state as well as a line graph of the sensors state history. +The card works with entities from within the **sensor** domain and displays the sensors current state as well as a line graph representation of the history. -![Preview](https://user-images.githubusercontent.com/457678/48304689-d975fa00-e51d-11e8-9cd6-620a17e3d244.png) +![Preview](https://user-images.githubusercontent.com/457678/52006705-145c4e00-24cd-11e9-849a-063bc5d7c296.png) ## Install @@ -11,11 +11,11 @@ The card works with entities from within the **sensor** domain and displays the 1. Download and copy `mini-graph-card-bundle.js` from the [latest release](https://github.com/kalkih/mini-graph-card/releases/latest) into your `config/www` directory. -- Add a reference to `mini-graph-card-bundle.js` inside your `ui-lovelace.yaml`. +2. Add a reference to `mini-graph-card-bundle.js` inside your `ui-lovelace.yaml`. ```yaml resources: - - url: /local/mini-graph-card-bundle.js?v=0.1.0 + - url: /local/mini-graph-card-bundle.js?v=0.2.0 type: module ``` @@ -23,17 +23,17 @@ The card works with entities from within the **sensor** domain and displays the 1. Move into your `config/www` directory -- Grab `mini-graph-card-bundle.js` +2. Grab `mini-graph-card-bundle.js` ``` - $ wget https://github.com/kalkih/mini-graph-card/releases/download/v0.1.0/mini-graph-card-bundle.js + $ wget https://github.com/kalkih/mini-graph-card/releases/download/v0.2.0/mini-graph-card-bundle.js ``` -- Add a reference to `mini-graph-card-bundle.js` inside your `ui-lovelace.yaml`. +3. Add a reference to `mini-graph-card-bundle.js` inside your `ui-lovelace.yaml`. ```yaml resources: - - url: /local/mini-graph-card-bundle.js?v=0.1.0 + - url: /local/mini-graph-card-bundle.js?v=0.2.0 type: module ``` @@ -41,7 +41,7 @@ The card works with entities from within the **sensor** domain and displays the 1. Make sure you've the [custom_updater](https://github.com/custom-components/custom_updater) component installed and working. -- Add a new reference under `card_urls` in your `custom_updater` configuration in `configuration.yaml`. +2. Add a new reference under `card_urls` in your `custom_updater` configuration in `configuration.yaml`. ```yaml custom_updater: @@ -54,13 +54,13 @@ The card works with entities from within the **sensor** domain and displays the 1. Find your `mini-graph-card-bundle.js` file in `config/www` or wherever you ended up storing it. -- Replace the local file with the latest one attached in the [latest release](https://github.com/kalkih/mini-graph-card/releases/latest). +2. Replace the local file with the latest one attached in the [latest release](https://github.com/kalkih/mini-graph-card/releases/latest). -- Add the new version number to the end of the cards reference url in your `ui-lovelace.yaml` like below. +3. Add the new version number to the end of the cards reference url in your `ui-lovelace.yaml` like below. ```yaml resources: - - url: /local/mini-graph-card-bundle.js?v=0.1.0 + - url: /local/mini-graph-card-bundle.js?v=0.2.0 type: module ``` @@ -70,80 +70,180 @@ The card works with entities from within the **sensor** domain and displays the ### Options +#### Card options | Name | Type | Default | Since | Description | |------|:----:|:-------:|:-----:|-------------| | type | string | **required** | v0.0.1 | `custom:mini-graph-card`. -| entity | string | **required** | v0.0.1 | Entity id of the sensor. +| entities | string/list | **required** | v0.0.1 | Single entity id as a string or multiple entities in a list, see [entities object](#entities-object) for additional entity options. | icon | string | optional | v0.0.1 | Set a custom icon from any of the available mdi icons. | name | string | optional | v0.0.1 | Set a custom name which is displayed beside the icon. | unit | string | optional | v0.0.1 | Set a custom unit of measurement. -| height | number | 150 | v0.0.1 | Set a custom height of the line graph. -| line_width | number | 5 | v0.0.1 | Set the thickness of the line. -| line_color | string | 'var(accent-color)' | v0.0.1 | Set a custom color for the line in the graph. | more_info | boolean | true | v0.0.1 | Set to `false` to disable the "more info" dialog when pressing the card. +| group | boolean | false | v0.2.0 | Disable paddings and box-shadow, useful when nesting the card. | hours_to_show | integer | 24 | v0.0.2 | Specify how many hours the line graph should render. -| font_size | number | 100 | v0.0.3 | Adjust the font size of the state value, as percentage of the original size. -| line_value_above | number | optional | v0.0.4 | Set a threshold, if current state is above this value, the line color will change to color specified in `line_value_above`. -| line_color_above | string | optional | v0.0.4 | Set the line color for `line_value_above` -| line_value_below | number | optional | v0.0.4 | Set a threshold, if current state is below this value, the line color will change to color specified in `line_value_below`. -| line_color_below | string | optional | v0.0.4 | Set the line color for `line_value_below`. -| detail | integer | 1 | v0.0.8 | `1` or `2`, 1 equals ONE data point per hour, 2 equals SIX data points per hour. -| labels | boolean | false | v0.0.8 | Set to `true` to display min/max labels. -| decimals | integer | optional | v0.0.9 | Specify the exact number of decimals to show for the current state. -| hide | list | optional | v0.1.0 | List containing UI elements to hide, available items are (`icon`, `name`, `state`, `graph`) -| group | boolean | false | v0.1.1 | Disable paddings and box-shadow. +| points_per_hour | integer | 1 | v0.2.0 | Specify amount of data points the graph should render for every hour, *(basically the detail/accuracy of the graph)*. +| show | list | optional | v0.2.0 | List of UI elements to display/hide, for available items see [available show options](#available-show-options). +| animate | boolean | false | v0.2.0 | Add a reveal animation to the graph. +| height | number | 150 | v0.0.1 | Set a custom height of the line graph. +| line_width | number | 5 | v0.0.1 | Set the thickness of the line. +| line_color | string/list | var(--accent-color) | v0.0.1 | Set a custom color for the graph line, provide a list of colors for multiple graph entries. +| decimals | integer | optional | v0.0.9 | Specify the exact number of decimals to show for states. +| font_size | number | 100 | v0.0.3 | Adjust the font size of the state displayed, as percentage of the original size. +| align_header | string | `default` | v0.2.0 | Set the alignment of the header, `left`, `right`, `center` or `default`. +| align_icon | string | `right` | v0.2.0 | Set the alignment of the icon, `left`, `right` or `state`. +| align_state | string | `left` | v0.2.0 | Set the alignment of the current state, `left`, `right` or `center`. +| line_color_above | list | optional | v0.2.0 | Set thresholds for different line graph colors, see [Line color object](#line-color-object). +| line_color_below | list | optional | v0.2.0 | Set thresholds for different line graph colors, see [Line color object](#line-color-object). + +#### Entities object +Providing options are optional, entities can be listed directly, see example below. + +| Name | Type | Default | Description | +|------|:----:|:-------:|:------------| +| entity | string | **required** | Entity id of the sensor +| name | string | optional | Set a custom display name, defaults to entity's friendly_name. + +```yaml +entities: + - sensor.temperature + - entities: sensor.pressure + name: Pressure + - sensor.humidity +``` + +#### Available show options +All options are optional. + +| Name | Default | parameter | Description | +|:----:|:-------:|:---------:|:-----------:| +| name | true | `true` / `false` | Display name +| icon | true | `true` / `false` | Display icon +| state | true | `true` / `false` | Display current state +| graph | true | `true` / `false` | Display the graph +| fill | true | `true` / `false` | Display the graph fill +| points | hover | `true` / `false` / `hover` | Display graph data points +| legend | true | `true` / `false` | Display the graph legend (only shown when graph contains multiple entities) +| extrema | false | `true` / `false` | Display max/min information +| labels | false | `true` / `false` | Display Y-axis labels + +#### Line color object +See [adaptive line color](#adaptive-line-color) for example usage. + +| Name | Type | Default | Description | +|------|:----:|:-------:|:------------| +| value | number | **required** | The threshold at where the color should apply if state is above/below. +| color | string | **required** | Color to apply to line graph, most formats supported (`hex`, `rgb`, `rgba` or just the name of the color etc.) ### Example usage -#### Single card +#### Single entity card +```yaml +- type: custom:mini-graph-card + entities: sensor.illumination +``` +![Single entity card](https://user-images.githubusercontent.com/457678/52009150-884d2500-24d2-11e9-9f2b-2981210d3897.png) + +#### Alternative style +```yaml +# Example +- type: custom:mini-graph-card + entities: sensor.illumination + location_icon: left + location_state: center + show: + fill: false +``` +![Alternative style](https://user-images.githubusercontent.com/457678/52009161-8daa6f80-24d2-11e9-8678-47658a181615.png) + +#### Multiple entities card ```yaml - type: custom:mini-graph-card - entity: sensor.sensor_illumination - height: 100 - line_width: 4 - font_size: 75 - color: '#3498db' + name: SERVER + icon: mdi:server + entities: + - entity: sensor.server_total + name: TOTAL + - sensor.server_sent + - sensor.server_received ``` +![Multiple entities card](https://user-images.githubusercontent.com/457678/52009165-900cc980-24d2-11e9-8cc6-c77de58465b5.png) + +#### Show data from the past week +Use the `hours_to_show` option to specify how many hours of history the graph should represent. +Use the `points_per_hour` option to specify the accuracy/detail of the graph. -#### Show data from the last week ```yaml - type: custom:mini-graph-card - entity: sensor.sensor_illumination + entities: sensor.living_room_temp + name: LIVONG ROOM hours_to_show: 168 + points_per_hour: 0.25 ``` +![Show data from the past week](https://user-images.githubusercontent.com/457678/52009167-913df680-24d2-11e9-8732-52fc65e3f0d8.png) + +#### Graph only card +Use the `show` option to show/hide UI elements. -#### Hide everything except the graph ```yaml - type: custom:mini-graph-card - entity: sensor.sensor_illumination - hide: - - icon - - name - - state + entities: sensor.humidity + show: + icon: false + name: false + state: false ``` -#### Stacking horizontally +#### Horizontally stacked cards +You can stack cards horizontally by using one or more `horizontal-stack(s)`. ```yaml - type: horizontal-stack cards: - type: custom:mini-graph-card - entity: sensor.sensor_temperature - name: Temperature - line_color: '#3498db' + entities: sensor.humidity + line_color: blue line_width: 8 + font_size: 75 - type: custom:mini-graph-card - entity: sensor.sensor_humidity - name: Humidity + entities: sensor.illumination line_color: '#e74c3c' line_width: 8 + font_size: 75 - type: custom:mini-graph-card - entity: sensor.sensor_pressure - name: Pressure + entities: sensor.temperature + line_color: var(--accent-color) line_width: 8 + font_size: 75 ``` +![Horizontally stacked cards](https://user-images.githubusercontent.com/457678/52009171-926f2380-24d2-11e9-9dd4-28f010608858.png) -## Develop +#### Adaptive line color +Have the line color change with the current state. +When listing more than one color entry, place them in order from *low -> high* for `line_color_above` and *high -> low* for `line_color_below`. + +```yaml +- type: custom:mini-graph-card + entities: sensor.sensor_temperature + line_color_above: + - value: 10 + color: yellow + - value: 20 + color: orange + - value: 30 + color: red + line_color_below: + - value: -10 + color: white + - value: -20 + color: lightblue + - value: -30 + color: blue + - value: -50 + color: "#000000" +``` + + +## Development **Clone this repository into your `config/www` folder using git.** @@ -155,7 +255,7 @@ $ git clone https://github.com/kalkih/mini-graph-card.git ```yaml resources: - - url: /local/mini-graph-card/mini-graph-card.js + - url: /local/mini-graph-card/mini-graph-card-bundle.js type: module ``` @@ -163,10 +263,10 @@ resources: *Requires `nodejs` & `npm`* -**Move into the `mini-graph-card` repo & install dependencies.** +**Move into the `mini-graph-card` repo, checkout the dev branch & install dependencies.** ``` -$ npm install +$ cd mini-graph-card && git checkout dev && npm install ``` **Edit the source file `mini-graph-card.js`, build by running** @@ -176,7 +276,12 @@ $ npm run build The `mini-graph-card-bundle.js` will be rebuilt and ready. +**For convenience, you can have the source build itself on file change by running** +``` +$ npm run watch +``` +**If you plan to submit a PR, please base it on the .dev` branch** ## Getting errors? Make sure you have `javascript_version: latest` in your `configuration.yaml` under `frontend:`. diff --git a/changelog.md b/changelog.md index 4df36a1..450689c 100755 --- a/changelog.md +++ b/changelog.md @@ -1,6 +1,30 @@ +## v0.2.0 +- UI redesign +- Added support for multiple entities (**BETA**) #28 +- Added support for multiple `line_color` entries +- Added graph data points with information on hover, see `points` option under the `show` option +- Added `animate` option to have the graph animated on initial load +- Added `points_per_hour` option to specify amount of data points that should be rendered for each hour (basically the graph detail/accuracy). +- Added support for multiple color thresholds with new `line_color_above` & `line_color_below` options +- Added allocated space for the graph -> less jerky movements when loading in +- Added graph legend, visible if multiple entities is present +- Added `align_header`, `align_icon` & `align_state` options #27 +- Added `show` option, to manage visible/hidden UI elements +- Added `entities` option +- Added `group` option to remove paddings/box-shadow #26 (@iantrich) +- Fixed bug were history data would be fetched when graph was hidden +- Fixed `decimals` option not being applied to labels #19 +- Fixed Y-scale based on absolute extrema causing inconsistent results, now based on moving average same as the rest of the graph. +- Deprecated `entity` option, use new `entities`, accepts string or list (**deprecated**) +- Removed `detail` option, use new `points_per_hour` option (**Breaking change**) +- Removed `hide` options, use new `show` option (**Breaking change**) +- Removed `labels` option, use `labels` in new `show` option (**Breaking change**) +- Removed `line_value_above`, `line_color_above`, `line_value_below` & `line_color_below` options (**Breaking change**) + ## v0.1.0 -- Added `hide` option to hide specific UI elements. +- Added `hide` option to hide specific UI elements - Removed `hide_icon`, use new `hide` option (**Breaking change**) +- Minor UI changes - Fixed issue causing errors if all available history entries had the exact same state - Updated dependencies diff --git a/package.json b/package.json index c6d5ddc..bc5a44e 100755 --- a/package.json +++ b/package.json @@ -1,4 +1,25 @@ { + "name": "mini-graph-card", + "version": "0.2.0", + "description": "A minimalistic and customizable graph card for Home Assistant Lovelace UI", + "keywords": [ + "home-assistant", + "homeassistant", + "hass", + "automation", + "lovelace", + "sensor", + "graph", + "svg", + "custom-cards" + ], + "main": "mini-graph-card.js", + "repository": "git@github.com:kalkih/mini-graph-card.git", + "author": "Karl Kihlström ", + "license": "MIT", + "dependencies": { + "@polymer/lit-element": "0.6.3" + }, "devDependencies": { "@babel/cli": "^7.2.3", "@babel/core": "^7.2.2", @@ -6,7 +27,6 @@ "@babel/plugin-proposal-decorators": "^7.2.3", "@babel/plugin-transform-template-literals": "^7.2.0", "@babel/preset-env": "^7.2.3", - "@polymer/lit-element": "^0.6.2", "babel-preset-minify": "^0.5.0", "rollup": "^0.66.6", "rollup-plugin-node-resolve": "^3.4.0", diff --git a/tracker.json b/tracker.json index 28c3587..e6f297a 100755 --- a/tracker.json +++ b/tracker.json @@ -1,8 +1,8 @@ { "mini-graph-card-bundle": { - "updated_at": "2018-12-22", - "version": "0.1.0", - "remote_location": "https://github.com/kalkih/mini-graph-card/releases/download/v0.1.0/mini-graph-card-bundle.js", + "updated_at": "2018-01-30", + "version": "0.2.0", + "remote_location": "https://github.com/kalkih/mini-graph-card/releases/download/v0.2.0/mini-graph-card-bundle.js", "visit_repo": "https://github.com/kalkih/mini-graph-card", "changelog": "https://github.com/kalkih/mini-graph-card/releases/latest" }