Release v1.0.0 (#20)

* Sorting entities based on attribute values (#13)
* Large icons and attribute values / disabling compact view (#17)
* Allow to use simple strings as attributes in the config

Fixes: 
* Allow resetting (to default) card-level settings on individual entities (#18)
* Margin fixes to align with standard entity rows

Author: maxwroc

README.md

@@ -1,51 +1,66 @@
 # Github Flexi Card
-Home Assistant card displaying data from [Github integration](https://www.home-assistant.io/integrations/github/)
+[![GitHub Release][releases-shield]][releases]
+[![GitHub All Releases][downloads-total-shield]][releases]
+<!--[![hacs_badge][hacs-shield]][hacs]
+[![Community Forum][forum-shield]][forum]-->
+
+Home Assistant card displaying data from [Github integration][ha-gh-integration]
 
 ## Overview
 
 The aim of this card is to show all the data provided by github integration. You can specify what kind of data is shown and where. Entity rows are matching the size of other standard entity rows from other native cards (e.g. height of the row, icon/text margins, font sizes, etc).
 
-![image](https://user-images.githubusercontent.com/8268674/95763370-d904b180-0ca6-11eb-9951-56c8200ee025.png)
+This code works as both: card and enrity-row
 
-This component can be used as entity as well
+Note: If you plan to use it only as entity row you can consider using the other simpler/smaller code written by benct: [github-entity-row][github-entity-row]
 
-![image](https://user-images.githubusercontent.com/8268674/96303544-7be46500-0ff2-11eb-9a86-16af9c52f1d0.png)
+![image](https://user-images.githubusercontent.com/8268674/97019224-fad42300-1547-11eb-8153-46c401f50455.png)
 
 ## Configuration
 
 ### Card
 | Name | Type | Default | Since | Description |
 |:-----|:-----|:-----|:-----|:-----|
-| title | String |  | v0.1.0 | Card header/title text
-| entities | [Entity](#entity)[] \| String | **(required)** | v0.1.0 | Collection of entities to display. You can provide simple list of entity_id strings.
+| title | string |  | v0.1.0 | Card header/title text
+| entities | list([Entity](#entity)) \| string | **(required)** | v0.1.0 | Collection of entities to display. You can provide simple list of entity_id strings.
+| sort | list([SortOptions](#sort-options)) |  | v1.0.0 | Sort options collection (order matters). Every next sorting option is used fot the next level sorting (if the values of the previous one are same)
 
 [+ Entity Properties](#Entity-Properties) - applied to all entities
 
 ### Entity
 | Name | Type | Default | Since | Description |
 |:-----|:-----|:-----|:-----|:-----|
-| entity | String | **(required)** | v0.1.0 | Entity ID e.g. `sensor.my_github_project`
+| entity | string | **(required)** | v0.1.0 | Entity ID e.g. `sensor.my_github_project`
 
 [+ Entity Properties](#Entity-Properties)
 
 ### Entity Properties
 | Name | Type | Default | Since | Description |
 |:-----|:-----|:-----|:-----|:-----|
-| name | [KString](#keywordstring) |  | v0.1.0 | Name override
+| name | [KString](#keywordstring) | `friendly_name` | v0.1.0 | Name override
 | secondary_info | [KString](#keywordstring) |  | v0.1.0 | String to display underneath the entity name
-| attributes | [Attribute](#attribute)[] |  | v0.1.0 | Attributes to display
-| url | [KString](#keywordstring) \| Boolean |  | v0.2.0 | Url to open on click/tap. (when `true` is used the target url becomes repo homepage)
-| attribute_urls | Boolean |  | v0.2.0 | When set to `true` turns on default urls for all the displayed attributes
-| icon | String | `"mdi:github"` | v0.2.0 | Override for entity icon
+| attributes | list([Attribute](#attribute)) |  | v0.1.0 | Attributes to display
+| url | [KString](#keywordstring) \| bool |  | v0.2.0 | Url to open on click/tap. (when `true` is used the target url becomes repo homepage)
+| attribute_urls | bool |  | v0.2.0 | When set to `true` turns on default urls for all the displayed attributes
+| icon | string | `"mdi:github"` | v0.2.0 | Override for entity icon
+| compact_view | bool | `true` | v1.0.0 | When set to `false` big icons (and values) are displayed
 
 ### Attribute
 | Name | Type | Default | Since | Description |
 |:-----|:-----|:-----|:-----|:-----|
-| name | String | **(required)** | v0.1.0 | Name of the attribute
-| icon | String |  | v0.1.0 | Icon override (there are default icons for most of the available attributes)
-| url | [KString](#keywordstring) \| Boolean |  | v0.2.0 | Url to open on click/tap. (there are default urls for most of the available attributes, so you can just use `true`)
+| name | string | **(required)** | v0.1.0 | Name of the attribute
+| icon | string |  | v0.1.0 | Icon override (there are default icons for most of the available attributes)
+| url | [KString](#keywordstring) \| bool |  | v0.2.0 | Url to open on click/tap. (there are default urls for most of the available attributes, so you can just use `true`)
 | label | [KString](#keywordstring) |  | v0.5.0 | Label/text which will be shown instead of the icon
 
+### Sort options
+
+| Name | Type | Default | Since | Description |
+|:-----|:-----|:-----|:-----|:-----|
+| by | string | **(required)** | v1.0.0 | Name of the attribute
+| ascending | bool | `false` | v1.0.0 | Whether to sort ascending or descending
+
+
 ### KeywordString
 
 KeywordString is a string which can contain special keywords. Keywords are the attribute names surrounded by curly brackets. Keywords in the string will be replaced by attribute values.
@@ -84,16 +99,16 @@ entities:
   - entity: sensor.hideseek_mod
     url: true # default url - repo homepage
     attributes:
-      - name: views
-      - name: stargazers
-      - name: forks
+      - views
+      - stargazers
+      - forks
   - entity: sensor.urleditorpro
     name: 'Url Editor Pro (v{latest_release_tag})'
     secondary_info: 'Clones: {clones}'
     attributes:
-      - name: views
-      - name: stargazers
-      - name: open_issues
+      - views
+      - stargazers
+      - open_issues
 ```
 
 ### Entity
@@ -114,12 +129,12 @@ entities:
     url: true
     attribute_urls: true
     attributes:
-      - name: views
-      - name: stargazers
-      - name: open_issues
-      - name: clones
-      - name: forks
-      - name: open_pull_requests
+      - views
+      - stargazers
+      - open_issues
+      - clones
+      - forks
+      - open_pull_requests
   - sensor.hassio_online
   - sensor.last_boot
   - sensor.processor_use
@@ -138,12 +153,12 @@ secondary_info: 'Released {latest_release_tag}'
 url: true
 attribute_urls: true
 attributes:
-  - name: views
-  - name: stargazers
-  - name: open_issues
-  - name: clones
-  - name: forks
-  - name: open_pull_requests
+  - views
+  - stargazers
+  - open_issues
+  - clones
+  - forks
+  - open_pull_requests
 entities:
   - sensor.battery_state_card
   - sensor.hideseek_mod
@@ -172,6 +187,53 @@ entities:
   - sensor.urleditorpro
 ```
 
+### Compact view (disabling)
+
+![image](https://user-images.githubusercontent.com/8268674/96794344-eda71f00-13f5-11eb-85f2-f60caad2fa63.png)
+
+```yaml
+type: 'custom:github-flexi-card'
+title: Big icons
+url: true
+attribute_urls: true
+attributes:
+  - views
+  - stargazers
+entities:
+  - sensor.battery_state_card
+  - entity: sensor.hideseek_mod
+    compact_view: false
+  - sensor.urleditorpro
+```
+
+### Sorting
+
+![image](https://user-images.githubusercontent.com/8268674/96928429-72ef0a00-14b0-11eb-95dd-4f1c76e217ec.png)
+
+```yaml
+type: 'custom:github-flexi-card'
+title: Sort by starts and views (asc)
+secondary_info: '{latest_release_tag}'
+url: true
+attribute_urls: true
+attributes:
+  - views_unique
+  - stargazers
+  - open_issues
+  - open_pull_requests
+sort:
+  - by: stargazers
+  - by: views_unique
+    ascending: true
+entities:
+  - sensor.battery_state_card
+  - sensor.hideseek_mod
+  - sensor.github_flexi_card
+  - sensor.urleditorpro
+  - entity: sensor.home_assistant_config
+    secondary_info: null
+```
+
 ## How to install?
 
 Install HACS and add this repo as custom repository (lovelace plugins). Click on "Install".
@@ -182,4 +244,19 @@ If you have a YAML mode remember to add resource entry for the js bundle in ui-l
 resources:
   - url: /hacsfiles/github-flexi-card/github-flexi-card.js
     type: module
-```
+```
+
+## Do you like the card?
+
+Don't "buy me a coffee", just star it on github! It will be enough to let me know that you like it and definitely will give me motivation boost to continue working on it and other cards.
+
+
+[releases]: https://github.com/maxwroc/github-flexi-card/releases
+[releases-shield]: https://img.shields.io/github/release/maxwroc/github-flexi-card.svg?style=popout
+[downloads-total-shield]: https://img.shields.io/github/downloads/maxwroc/github-flexi-card/total
+[forum]: https://community.home-assistant.io/t/lovelace-battery-state-card/191535
+[forum-shield]: https://img.shields.io/badge/community-forum-brightgreen.svg?style=popout
+[hacs-shield]: https://img.shields.io/badge/HACS-Default-orange.svg
+[hacs]: https://hacs.xyz/docs/default_repositories
+[ha-gh-integration]: https://www.home-assistant.io/integrations/github/
+[github-entity-row]: https://github.com/benct/lovelace-github-entity-row

hacs.json

@@ -1,5 +1,5 @@
 {
-    "name": "Github Flexi Card",
+    "name": "Github Flexi Card / Entity Row",
     "content_in_root": false,
     "filename": "github-flexi-card.js",
     "render_readme": true

package.json

@@ -1,6 +1,6 @@
 {
   "name": "github-flexi-card",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "description": "Home assistant github card",
   "main": "dist/github-flexi-card.js",
   "scripts": {

src/custom-elements/card.css

@@ -3,4 +3,11 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+}
+
+.card-content > div {
+    margin-bottom: 8px;
+}
+.card-content > div:last-child {
+    margin-bottom: 0;
 }

src/custom-elements/card.ts

@@ -1,8 +1,9 @@
 import { HomeAssistant } from "../ha-types";
 import { html, LitElement } from "../lit-element";
-import { ICardConfig, IEntityConfig } from "../types";
+import { ICardConfig, IEntityConfig, ISortOptions } from "../types";
 import { GithubEntity } from "./entity";
 import styles from "./card-styles";
+import { getConfigValue, safeGetArray, safeGetConfigObject } from "../utils";
 
 export class GithubFlexiCard extends LitElement {
 
@@ -12,6 +13,10 @@ export class GithubFlexiCard extends LitElement {
 
     private cardSize = 0;
 
+    private sortOptions?: ISortOptions[];
+
+    private order: number[] = [];
+
     /**
      * CSS for the card
      */
@@ -26,6 +31,7 @@ export class GithubFlexiCard extends LitElement {
         return {
             cardTitle: { type: String },
             entities: { type: Array },
+            order: { type: Array },
         };
     }
 
@@ -34,6 +40,28 @@ export class GithubFlexiCard extends LitElement {
      */
     set hass(hass: HomeAssistant) {
         this.entities.forEach(entity => entity.hass = hass);
+
+        if (this.sortOptions && this.sortOptions.length) {
+            const attrNames = this.sortOptions.map(s => s.by);
+            const values = this.entities.map(e => e.getEntityAttributeValues(attrNames));
+
+            const applySortType = (a: number, b: number, ascending?: boolean) => ascending ? a - b : b - a;
+
+            // default order matches the config
+            const defaultOrder = this.entities.map((e, i) => i);
+            const newOrder = defaultOrder.sort(
+                (a, b) => values[a].reduce(
+                    (prev, curr, i) => prev != 0 ? prev : applySortType(curr, values[b][i], this.sortOptions![i].ascending),
+                    0
+                )
+            );
+
+            // check if order has changed
+            if (this.order.some((v, i) => v != newOrder[i])) {
+                // trigger update
+                this.order = newOrder;
+            }
+        }
     }
 
     /**
@@ -54,11 +82,16 @@ export class GithubFlexiCard extends LitElement {
                 elem.setConfig(entityConf);
                 this.cardSize++;
                 return elem;
-            })
+            });
         }
         else {
             this.entities.forEach((entity, index) => entity.setConfig(getEntityConfig(cardConfig.entities[index], cardConfig)));
         }
+
+        this.order = this.entities.map((e, i) => i);
+
+        const sortOptions = safeGetArray(cardConfig.sort).map(s => safeGetConfigObject(s, "by"))
+        this.sortOptions = sortOptions;
     }
 
     /**
@@ -79,7 +112,7 @@ export class GithubFlexiCard extends LitElement {
         <ha-card>
             ${this.cardTitle && header(this.cardTitle)}
             <div class="card-content">
-                ${this.entities}
+                ${this.order.map(i => html`<div>${this.entities[i]}</div>`)}
             </div>
         </ha-card>
         `;
@@ -102,19 +135,16 @@ const header = (title: string) => html`
  */
 const getEntityConfig = (configEntry: IEntityConfig | string, cardConfig: ICardConfig): IEntityConfig => {
 
-    const entityConfig = typeof configEntry != "string" ?
-        // we have to make a copy as the original one is immutable
-        { ...configEntry } :
-        // construct simple config entry
-        { entity: configEntry };
+    const entityConfig = safeGetConfigObject(configEntry, "entity");
 
     // if property is not defined take the card-level one
-    entityConfig.attributes = entityConfig.attributes || cardConfig.attributes;
-    entityConfig.attribute_urls = entityConfig.attribute_urls !== undefined ? entityConfig.attribute_urls : cardConfig.attribute_urls;
-    entityConfig.icon = entityConfig.icon || cardConfig.icon;
-    entityConfig.name = entityConfig.name || cardConfig.name;
-    entityConfig.secondary_info = entityConfig.secondary_info || cardConfig.secondary_info;
-    entityConfig.url = entityConfig.url !== undefined ? entityConfig.url : cardConfig.url;
+    entityConfig.attributes = getConfigValue(entityConfig.attributes, cardConfig.attributes);
+    entityConfig.attribute_urls = getConfigValue(entityConfig.attribute_urls, cardConfig.attribute_urls);
+    entityConfig.icon = getConfigValue(entityConfig.icon, cardConfig.icon);
+    entityConfig.name = getConfigValue(entityConfig.name, cardConfig.name);
+    entityConfig.secondary_info = getConfigValue(entityConfig.secondary_info, cardConfig.secondary_info);
+    entityConfig.url = getConfigValue(entityConfig.url, cardConfig.url);
+    entityConfig.compact_view = getConfigValue(entityConfig.compact_view, cardConfig.compact_view, true);
 
     return entityConfig;
 }

src/custom-elements/entity.css

@@ -22,7 +22,6 @@
 .entity-row {
     display: flex;
     align-items: center;
-    margin: 8px 0;
 }
 .entity-row .name {
     flex: 1;
@@ -42,8 +41,11 @@
     margin-right: 10px;
 }
 
-.state {
+.compact-view .state {
     --mdc-icon-size: var(--attribute-icon-size);
+    font-size: var(--paper-font-caption_-_font-size);
+}
+.state {
     display: flex;
     margin-left: 7px;
 }
@@ -54,7 +56,6 @@
     margin-left: 0;
 }
 .state > div {
-    font-size: var(--paper-font-caption_-_font-size);
     line-height: 24px;
 }