reduce font size of label to fit vertically Text overlaps when boxes …

…are too short #4
MindFreeze · May 15, 2022 · 8dbffd4 · 8dbffd4
1 parent c3cbb71
commit 8dbffd4
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/src/const.ts b/src/const.ts
@@ -4,4 +4,6 @@ export const UNIT_PREFIXES = {
     'M': 1000000,
     'G': 1000000000,
     'T': 1000000000000,
-};
+};
+
+export const MIN_LABEL_HEIGHT = 15;
diff --git a/src/ha-sankey-chart.ts b/src/ha-sankey-chart.ts
@@ -25,7 +25,7 @@ import {
 
 import type { Config, SankeyChartConfig, SectionState, EntityConfigOrStr, Box } from './types';
 // import { actionHandler } from './action-handler-directive';
-import { UNIT_PREFIXES } from './const';
+import { UNIT_PREFIXES, MIN_LABEL_HEIGHT } from './const';
 import {version} from '../package.json';
 import { localize } from './localize/localize';
 import styles from './styles';
@@ -147,7 +147,7 @@ export class SankeyChart extends LitElement {
   protected renderSection(index: number): TemplateResult {
     const {show_names, show_icons} = this.config;
     const section = this.sections[index];
-    const {boxes} = section;
+    const {boxes, spacerH} = section;
     const hasChildren = index < this.sections.length - 1 && boxes.some(b => b.children.length > 0);
 
     return html`
@@ -163,17 +163,22 @@ export class SankeyChart extends LitElement {
           ${boxes.map((box, i) => {
             const formattedState = parseFloat(box.state.toFixed(this.config.round));
             const name = box.config.name || box.entity.attributes.friendly_name || '';
+            const maxLabelH = box.size + spacerH;
+            const labelStyle = maxLabelH < MIN_LABEL_HEIGHT
+              ? {maxHeight: maxLabelH+'px', fontSize: `${maxLabelH/MIN_LABEL_HEIGHT}em`}
+              : {};
             return html`
-              ${i > 0 ? html`<div class="spacerv" style=${styleMap({height: section.spacerH+'px'})}></div>` : null}
+              ${i > 0 ? html`<div class="spacerv" style=${styleMap({height: spacerH+'px'})}></div>` : null}
               <div class="box" style=${styleMap({height: box.size+'px'})}>
                 <div style=${styleMap({backgroundColor: box.color})} 
                   @click=${() => this._handleBoxClick(box)} 
                   title=${name}
                 >
                   ${show_icons && html`<ha-icon .icon=${stateIcon(box.entity)}></ha-icon>`}
                 </div>
-                <div class="label">${formattedState}${box.unit_of_measurement}
-                  ${show_names && html`<span>${name}</span>`}
+                <div class="label" style=${styleMap(labelStyle)}>
+                  ${formattedState}${box.unit_of_measurement}
+                  ${show_names && html`<span>&nbsp;${name}</span>`}
                 </div>
               </div>
             `;

diff --git a/src/styles.ts b/src/styles.ts
@@ -16,6 +16,7 @@ export default css`
         flex-direction: column;
         position: relative;
         min-width: 0;
+        max-width: 50%;
     }
     .wide .section:last-child {
         flex: initial;
@@ -53,6 +54,8 @@ export default css`
     }
     .box .label {
         flex: 1;
+        display: flex;
+        align-items: center;
         padding: 0 10px;
         white-space: nowrap;
         overflow: hidden;