Added hide icon option #5

README.md

@@ -81,6 +81,7 @@ resources:
 | accuracy | number | 10 | v0.0.1 | Specify how many data points should be used to render the graph, higher number equals higher detailed graph. Results can vary depending on how often your sensor updates. *(Recommended to keep between 5 & 25).*
 | hours_to_show | number | 24 | v0.0.2 | Specify how many hours to show.
 | height | number | 150 | v0.0.1 | Set a custom height of the line graph.
+| hide_icon | boolean | optional | v0.0.5 | Set to `true` to hide icon.
 | font_size | number | 100 | v0.0.3 | Adjust the font size of the state value, as percentage of the original size.
 | line_color | string | 'var(accent-color)' | v0.0.1 | Set a custom color for the line in the graph.
 | line_width | number | 5 | v0.0.1 | Set a custom width of the line.

changelog.md

@@ -1,4 +1,5 @@
 ## v0.0.5
+- Added `hide_icon` option #5
 - Fixed issue where unknown/unavailable history would make the graph not render #6
 - Fixed issue where graph line would rendering outside svg boundary and get clipped
 - Made graph line ends rounded

mini-graph-card.js

@@ -50,7 +50,8 @@ class MiniGraphCard extends LitElement {
       height: 100,
       line_color: 'var(--accent-color)',
       line_width: 5,
-      font_size: FONT_SIZE
+      font_size: FONT_SIZE,
+      hide_icon: false
     }, config);
     conf.font_size = (config.font_size / 100) * FONT_SIZE;
     conf.accuracy = Number(conf.accuracy);
@@ -92,7 +93,7 @@ class MiniGraphCard extends LitElement {
       ${this._style()}
       <ha-card ?group=${config.group} @click='${(e) => this.handleMore()}'
         ?more-info=${config.more_info} style='font-size: ${config.font_size}px;'>
-        <div class='flex'>
+        <div class='flex title' ?hide=${config.hide_icon}>
           <div class='icon'>
             <ha-icon icon=${this.computeIcon(entity)}></ha-icon>
           </div>
@@ -180,11 +181,6 @@ class MiniGraphCard extends LitElement {
           padding: 16px;
           position: relative;
         }
-        ha-card[group] {
-          background: none;
-          box-shadow: none;
-          padding: 0;
-        }
         ha-card[more-info] {
           cursor: pointer;
         }
@@ -204,7 +200,6 @@ class MiniGraphCard extends LitElement {
           position: relative;
           opacity: .8;
         }
-
         .name {
           display: block;
           display: -webkit-box;
@@ -219,7 +214,6 @@ class MiniGraphCard extends LitElement {
           word-wrap: break-word;
           word-break: break-all;
         }
-
         .icon {
           display: inline-block;
           position: relative;
@@ -234,6 +228,12 @@ class MiniGraphCard extends LitElement {
           flex-wrap: wrap;
           font-weight: 300;
         }
+        .title[hide] .icon {
+          display: none;
+        }
+        .title[hide] .header {
+          margin-left: 8px;
+        }
         #value {
           font-size: 2.4em;
           line-height: 1em;