diff --git a/src/const.ts b/src/const.ts index aebdcef..5a09a5d 100644 --- a/src/const.ts +++ b/src/const.ts @@ -4,4 +4,6 @@ export const UNIT_PREFIXES = { 'M': 1000000, 'G': 1000000000, 'T': 1000000000000, -}; \ No newline at end of file +}; + +export const MIN_LABEL_HEIGHT = 15; \ No newline at end of file diff --git a/src/ha-sankey-chart.ts b/src/ha-sankey-chart.ts index 1b9e623..439663e 100644 --- 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,8 +163,12 @@ 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`
` : null} + ${i > 0 ? html`
` : null}
this._handleBoxClick(box)} @@ -172,8 +176,9 @@ export class SankeyChart extends LitElement { > ${show_icons && html``}
-
${formattedState}${box.unit_of_measurement} - ${show_names && html`${name}`} +
+ ${formattedState}${box.unit_of_measurement} + ${show_names && html` ${name}`}
`; diff --git a/src/styles.ts b/src/styles.ts index 15c0214..4bd343d 100644 --- 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;