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}