{"_id":"mini-graph-card","_rev":"1-3c13aec3eb7412464eb3728239fddff0","name":"mini-graph-card","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.1":{"name":"mini-graph-card","version":"0.2.1","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":"main.js","repository":{"type":"git","url":"git+ssh://git@github.com/kalkih/mini-graph-card.git"},"author":{"name":"Karl Kihlström","email":"mrkihlstrom@gmail.com"},"license":"MIT","dependencies":{"@polymer/lit-element":"0.6.3"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.2.3","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-transform-template-literals":"^7.2.0","@babel/preset-env":"^7.2.3","babel-preset-minify":"^0.5.0","rollup":"^0.66.6","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^3.0.0"},"scripts":{"build":"rollup -c && babel mini-graph-card-bundle.js --out-file mini-graph-card-bundle.js","watch":"rollup -c --watch","rollup":"rollup -c"},"gitHead":"b02cf3eb32434f3364ee8105a97476f313c2c1d1","bugs":{"url":"https://github.com/kalkih/mini-graph-card/issues"},"homepage":"https://github.com/kalkih/mini-graph-card#readme","_id":"mini-graph-card@0.2.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"kalkih","email":"mrkihlstrom@gmail.com"},"dist":{"integrity":"sha512-y20VOaPIYUMTCRQLFraOPNJ6vI7Lx5E12GaZr1gvsL+nNQrqj/G80BzVdmWQiH1+fEHU0oUrKE0LwUFjSL3xxQ==","shasum":"4aaabaab586667821ee20a35e9133537e3138231","tarball":"https://registry.npmjs.org/mini-graph-card/-/mini-graph-card-0.2.1.tgz","fileCount":10,"unpackedSize":42765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXJuFCRA9TVsSAnZWagAABLAQAI5Zb7QvVeGSL1FFe4Ic\n6401OIEmo03gw4SBVU9PZ/qSkeW4RWs5wIziAMqEnEmyo8f/q1NKUt1aD909\nI3G90+G7WnqUrUN7f52cwCM4Cr7v9vju1pKaAw5UdtzbV1T2dQfTwnjWl0ZA\nq3ny4wbVmalpL0RMNMsuG6RTHRB/puxm2rJwRjCYdVpAMuupCyAK4azaayw/\nb3/B80FB8I4PDO63CsO+t/D2iLZgbKkpzi7t9FywPZ4XgZxp5OYK4qSYxLeR\n+ll76w5yI3SZEEuBf5lkzijAnek6egOgCKesJPVaWWhpWJ9hraJP24Z6dM/Q\nwDkhsudIGACwhDDr5+KFSRyAvTjH5h6M+l5U/+h/UF0zMPzCeJRZ/AyIigsg\nEY+NeYF6gDCK4Q6Bn4+/001UJ/jYaz60NDIlOvvRdPHkDcOnW2cqO6DJvB2Y\nJ7HH59zRwVksXKUlE7Q9WyF7d9dzMtD3FGSsx261tta8VSsven07VfTuR0YB\npAIIlJOq4nyFUFVu0RykgJayKWlxJSIqQxSwv0vtl7G7qQpIaEGcP3Xyslqz\nFdnVA8vNBFwt3XSLYU8tmYIwbMsziFfNJOlb3WC+3HDj1IURPp5o47GCF1rF\nEmoco5VmSP/SKqIXC10GZoPUH5ANw8uFsu8WNDscG3TbV8B8w7WPDqhFKwkO\na1yq\r\n=/iyQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICfa5to7cx7xs4iRZuMJbtvKgZG8AB/9ja2SV+W+/+iZAiEA57uM62lUMQSgMvI4+zQvws2kGpERnptqI9KCS1402Ak="}]},"maintainers":[{"name":"kalkih","email":"mrkihlstrom@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mini-graph-card_0.2.1_1549572997112_0.30897397246282354"},"_hasShrinkwrap":false}},"time":{"created":"2019-02-07T20:56:37.112Z","0.2.1":"2019-02-07T20:56:37.262Z","modified":"2022-05-09T09:42:58.013Z"},"maintainers":[{"name":"kalkih","email":"mrkihlstrom@gmail.com"}],"description":"A minimalistic and customizable graph card for Home Assistant Lovelace UI","homepage":"https://github.com/kalkih/mini-graph-card#readme","keywords":["home-assistant","homeassistant","hass","automation","lovelace","sensor","graph","svg","custom-cards"],"repository":{"type":"git","url":"git+ssh://git@github.com/kalkih/mini-graph-card.git"},"author":{"name":"Karl Kihlström","email":"mrkihlstrom@gmail.com"},"bugs":{"url":"https://github.com/kalkih/mini-graph-card/issues"},"license":"MIT","readme":"# Lovelace Mini Graph Card\nA minimalistic and customizable graph card for [Home Assistant](https://github.com/home-assistant/home-assistant) Lovelace UI.\n\nThe 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.\n\n![Preview](https://user-images.githubusercontent.com/457678/52006705-145c4e00-24cd-11e9-849a-063bc5d7c296.png)\n\n## Install\n\n### Simple install\n\n1. 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.\n\n2. Add a reference to `mini-graph-card-bundle.js` inside your `ui-lovelace.yaml`.\n\n  ```yaml\n  resources:\n    - url: /local/mini-graph-card-bundle.js?v=0.2.1\n      type: module\n  ```\n\n### CLI install\n\n1. Move into your `config/www` directory\n\n2. Grab `mini-graph-card-bundle.js`\n\n  ```\n  $ wget https://github.com/kalkih/mini-graph-card/releases/download/v0.2.1/mini-graph-card-bundle.js\n  ```\n\n3. Add a reference to `mini-graph-card-bundle.js` inside your `ui-lovelace.yaml`.\n\n  ```yaml\n  resources:\n    - url: /local/mini-graph-card-bundle.js?v=0.2.1\n      type: module\n  ```\n\n### *(Optional)* Add to custom updater\n\n1. Make sure you've the [custom_updater](https://github.com/custom-components/custom_updater) component installed and working.\n\n2. Add a new reference under `card_urls` in your `custom_updater` configuration in `configuration.yaml`.\n\n  ```yaml\n  custom_updater:\n    card_urls:\n      - https://raw.githubusercontent.com/kalkih/mini-graph-card/master/tracker.json\n  ```\n\n## Updating\n**If you have a version older than v0.0.8 installed, please delete the current files and follow the installation instructions again.**\n\n1. Find your `mini-graph-card-bundle.js` file in `config/www` or wherever you ended up storing it.\n\n2. Replace the local file with the latest one attached in the [latest release](https://github.com/kalkih/mini-graph-card/releases/latest).\n\n3. Add the new version number to the end of the cards reference url in your `ui-lovelace.yaml` like below.\n\n  ```yaml\n  resources:\n    - url: /local/mini-graph-card-bundle.js?v=0.2.1\n      type: module\n  ```\n\n*You may need to empty the browsers cache if you have problems loading the updated card.*\n\n## Using the card\n\n### Options\n\n#### Card options\n| Name | Type | Default | Since | Description |\n|------|:----:|:-------:|:-----:|-------------|\n| type | string | **required** | v0.0.1 | `custom:mini-graph-card`.\n| 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.\n| icon | string | optional | v0.0.1 | Set a custom icon from any of the available mdi icons.\n| name | string | optional | v0.0.1 | Set a custom name which is displayed beside the icon.\n| unit | string | optional | v0.0.1 | Set a custom unit of measurement.\n| more_info | boolean | true | v0.0.1 | Set to `false` to disable the \"more info\" dialog popup when pressing on the card.\n| group | boolean | false | v0.2.0 | Disable paddings and box-shadow, useful when nesting the card.\n| hours_to_show | integer | 24 | v0.0.2 | Specify how many hours the line graph should render.\n| 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)*.\n| show | list | optional | v0.2.0 | List of UI elements to display/hide, for available items see [available show options](#available-show-options).\n| animate | boolean | false | v0.2.0 | Add a reveal animation to the graph.\n| height | number | 150 | v0.0.1 | Set a custom height of the line graph.\n| line_width | number | 5 | v0.0.1 | Set the thickness of the line.\n| 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.\n| decimals | integer | optional | v0.0.9 | Specify the exact number of decimals to show for states.\n| hour24 | boolean | false | v0.2.1 | Set to `true` to display times in 24-hour format.\n| font_size | number | 100 | v0.0.3 | Adjust the font size of the state displayed, as percentage of the original size.\n| align_header | string | `default` | v0.2.0 | Set the alignment of the header, `left`, `right`, `center` or `default`.\n| align_icon | string | `right` | v0.2.0 | Set the alignment of the icon, `left`, `right` or `state`.\n| align_state | string | `left` | v0.2.0 | Set the alignment of the current state, `left`, `right` or `center`.\n| line_color_above | list | optional | v0.2.0 | Set thresholds for different line graph colors, see [Line color object](#line-color-object).\n| line_color_below | list | optional | v0.2.0 | Set thresholds for different line graph colors, see [Line color object](#line-color-object).\n\n#### Entities object\nProviding options are optional, entities can be listed directly, see example below.\n\n| Name | Type | Default | Description |\n|------|:----:|:-------:|:------------|\n| entity | string | **required** | Entity id of the sensor.\n| name | string | optional | Set a custom display name, defaults to entity's friendly_name.\n| show_state | string | optional | Display the current state of the sensor.\n\n```yaml\nentities:\n  - sensor.temperature\n  - entity: sensor.pressure\n    name: Pressure\n    show_state: true\n  - sensor.humidity\n```\n\n#### Available show options\nAll options are optional.\n\n| Name | Default | parameter | Description |\n|:----:|:-------:|:---------:|:-----------:|\n| name | true | `true` / `false` | Display name\n| icon | true | `true` / `false` | Display icon\n| state | true | `true` / `false` | Display current state\n| graph | true | `true` / `false` | Display the graph\n| fill | true | `true` / `false` | Display the graph fill\n| points | hover | `true` / `false` / `hover` | Display graph data points\n| legend | true | `true` / `false` | Display the graph legend (only shown when graph contains multiple entities)\n| extrema | false | `true` / `false` | Display max/min information\n| labels | false | `true` / `false` | Display Y-axis labels\n\n#### Line color object\nSee [adaptive line color](#adaptive-line-color) for example usage.\n\n| Name | Type | Default | Description |\n|------|:----:|:-------:|:------------|\n| value | number | **required** | The threshold at where the color should apply if state is above/below.\n| color | string | **required** | Color to apply to line graph, most formats supported (`hex`, `rgb`, `rgba` or just the name of the color etc.)\n\n### Example usage\n\n#### Single entity card\n```yaml\n- type: custom:mini-graph-card\n  entities: sensor.illumination\n```\n![Single entity card](https://user-images.githubusercontent.com/457678/52009150-884d2500-24d2-11e9-9f2b-2981210d3897.png)\n\n#### Alternative style\n```yaml\n# Example\n- type: custom:mini-graph-card\n  entities: sensor.illumination\n  location_icon: left\n  location_state: center\n  show:\n    fill: false\n```\n![Alternative style](https://user-images.githubusercontent.com/457678/52009161-8daa6f80-24d2-11e9-8678-47658a181615.png)\n\n#### Multiple entities card\n```yaml\n- type: custom:mini-graph-card\n  name: SERVER\n  icon: mdi:server\n  entities:\n    - entity: sensor.server_total\n      name: TOTAL\n    - sensor.server_sent\n    - sensor.server_received\n```\n![Multiple entities card](https://user-images.githubusercontent.com/457678/52009165-900cc980-24d2-11e9-8cc6-c77de58465b5.png)\n\n#### Show data from the past week\nUse the `hours_to_show` option to specify how many hours of history the graph should represent.\nUse the `points_per_hour` option to specify the accuracy/detail of the graph.\n\n```yaml\n- type: custom:mini-graph-card\n  entities: sensor.living_room_temp\n  name: LIVONG ROOM\n  hours_to_show: 168\n  points_per_hour: 0.25\n```\n![Show data from the past week](https://user-images.githubusercontent.com/457678/52009167-913df680-24d2-11e9-8732-52fc65e3f0d8.png)\n\n#### Graph only card\nUse the `show` option to show/hide UI elements.\n\n```yaml\n- type: custom:mini-graph-card\n  entities: sensor.humidity\n  show:\n    icon: false\n    name: false\n    state: false\n```\n\n#### Horizontally stacked cards\nYou can stack cards horizontally by using one or more `horizontal-stack(s)`.\n\n```yaml\n- type: horizontal-stack\n  cards:\n    - type: custom:mini-graph-card\n      entities: sensor.humidity\n      line_color: blue\n      line_width: 8\n      font_size: 75\n    - type: custom:mini-graph-card\n      entities: sensor.illumination\n      line_color: '#e74c3c'\n      line_width: 8\n      font_size: 75\n    - type: custom:mini-graph-card\n      entities: sensor.temperature\n      line_color: var(--accent-color)\n      line_width: 8\n      font_size: 75\n```\n![Horizontally stacked cards](https://user-images.githubusercontent.com/457678/52009171-926f2380-24d2-11e9-9dd4-28f010608858.png)\n\n#### Adaptive line color\nHave the line color change with the current state.\nWhen listing more than one color entry, place them in order from *low -> high* for `line_color_above` and *high -> low* for `line_color_below`.\n\n```yaml\n- type: custom:mini-graph-card\n  entities: sensor.sensor_temperature\n  line_color_above:\n    - value: 10\n      color: yellow\n    - value: 20\n      color: orange\n    - value: 30\n      color: red\n  line_color_below:\n    - value: -10\n      color: white\n    - value: -20\n      color: lightblue\n    - value: -30\n      color: blue\n    - value: -50\n      color: \"#000000\"\n```\n\n\n## Development\n\n**Clone this repository into your `config/www` folder using git.**\n\n```\n$ git clone https://github.com/kalkih/mini-graph-card.git\n```\n\n**Add a reference to the card in your `ui-lovelace.yaml`.**\n\n```yaml\nresources:\n  - url: /local/mini-graph-card/mini-graph-card-bundle.js\n    type: module\n```\n\n### Generate the bundle\n\n*Requires `nodejs` & `npm`*\n\n**Move into the `mini-graph-card` repo, checkout the dev branch & install dependencies.**\n\n```\n$ cd mini-graph-card && git checkout dev && npm install\n```\n\n**Edit the source, build by running**\n```\n$ npm run build\n```\n\nThe `mini-graph-card-bundle.js` will be rebuilt and ready.\n\n**For convenience, you can have the source build itself on file change by running**\n```\n$ npm run watch\n```\n\n**If you plan to submit a PR, please base it on the .dev` branch**\n\n## Getting errors?\nMake sure you have `javascript_version: latest` in your `configuration.yaml` under `frontend:`.\n\nMake sure you have the latest versions of `mini-graph-card.js` & `mini-graph-lib.js`.\n\nIf you have issues after updating the card, try clearing your browser cache.\n\nIf you have issues displaying the card in older browsers, try changing `type: module` to `type: js` at the card reference in `ui-lovelace.yaml`.\n\n## License\nThis project is under the MIT license.\n","readmeFilename":"README.md"}