feat(#62): min_width for sections. Also fixes #91

README.md

@@ -42,6 +42,7 @@ This card is intended to display connections between entities with numeric state
 | entities          | list    | **Required** |                     | Entities to show in this section. Could be just the entity_id as a string or an object, see [entities object](#entities-object) for additional options. Note that the order of this list matters
 | sort_by           | string  | **Optional** |                     | Sort the entities in this section. Valid options are: 'state'. If your values change often, you may want to use the `throttle` option to limit update frequency
 | sort_dir          | string  | **Optional** | desc                | Sorting direction. Valid options are: 'asc' for smallest first & 'desc' for biggest first
+| min_width         | string  | **Optional** |                     | Minimum section width. Any CSS value is OK. Examples: 75px, 50%, 1em
 
 ### Entities object
 

src/chart.ts

@@ -227,7 +227,7 @@ export class Chart extends LitElement {
         let total = 0;
         const boxes: Box[] = section.entities
           .filter(entityConf => {
-            const {min_state} = this.config;
+            const { min_state } = this.config;
             // remove empty entity boxes
             if (entityConf.type === 'remaining_parent_state') {
               return this.connectionsByChild.get(entityConf)?.some(c => c.state && c.state >= min_state);
@@ -460,9 +460,10 @@ export class Chart extends LitElement {
     const section = this.sections[index];
     const { boxes, spacerH } = section;
     const hasChildren = index < this.sections.length - 1 && boxes.some(b => b.children.length > 0);
+    const { min_width: minWidth } = this.config.sections[index];
 
     return html`
-      <div class="section">
+      <div class="section" style=${styleMap({ minWidth })}>
         ${hasChildren
           ? html`<div class="connectors">
               <svg viewBox="0 0 100 ${this.config.height}" preserveAspectRatio="none">

src/styles.ts

@@ -2,6 +2,9 @@ import { css } from 'lit';
 
 // https://lit.dev/docs/components/styles/
 export default css`
+    ha-card {
+        overflow-x: auto;
+    }
     .container {
         display: flex;
         position: relative;

src/types.ts

@@ -47,6 +47,7 @@ export interface SectionConfig {
   entities: EntityConfigOrStr[];
   sort_by?: 'state';
   sort_dir?: 'asc' | 'desc';
+  min_width?: string;
 }
 
 export interface SankeyChartConfig extends LovelaceCardConfig {
@@ -75,6 +76,7 @@ export interface Section {
   entities: EntityConfigInternal[];
   sort_by?: 'state';
   sort_dir?: 'asc' | 'desc';
+  min_width?: string;
 }
 
 export interface Config extends SankeyChartConfig {