Skip to content

Commit

Permalink
feat!(#109): vertical layout (#167)
Browse files Browse the repository at this point in the history 
Release-As: 3.0.0-beta
  • Loading branch information
@MindFreeze
MindFreeze authored Apr 23, 2024
1 parent 2a6c3f8 commit b8b493d
Show file tree
Hide file tree
Showing 16 changed files with 496 additions and 236 deletions.
14 changes: 7 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,23 +22,24 @@ This card is intended to display connections between entities with numeric state
| type | string | **Required** | | `custom:sankey-chart`
| autoconfig | object | **Optional** | | Experimental. See [autoconfig](#autoconfig)
| sections | list | **Required** | | Not required if using autoconfig. Entities to show divided by sections, see [sections object](#sections-object) for additional options.
| layout | string | **Optional** | auto | Valid options are: 'horizontal' - flow left to right, 'vertical' - flow top to bottom & 'auto' - determine based on available space
| energy_date_selection | boolean | **Optional** | false | Integrate with the Energy Dashboard. Filters data based on the [energy-date-selection](https://www.home-assistant.io/dashboards/energy/) card. Use this only for accumulated data sensors (energy/water/gas) and with a `type:energy-date-selection` card. You still need to specify all your entities as HA doesn't know exactly how to connect them but you can use the general kWh entities that you have in the energy dashboard. In the future we may use areas to auto configure the chart.
| title | string | **Optional** | | Optional header title for the card
| unit_prefix | string | **Optional** | | Metric prefix for the unit of measurment. See <https://en.wikipedia.org/wiki/Unit_prefix> . Supported values are m, k, M, G, T
| round | number | **Optional** | 0 | Round the value to at most N decimal places. May not apply to near zero values, see issue [#29](https://github.com/MindFreeze/ha-sankey-chart/issues/29)
| height | number | **Optional** | 200 | The height of the card in pixels
| wide | boolean | **Optional** | false | Set this to true if you see extra empty space in the right side of the card. This will expand it horizontally to cover all the available space. Enable if you see empty space on the right size.
| height | number | **Optional** | 200 | The height of the card in pixels. Only matters while in horizontal layout. Vertical layout height is dynamic based on content
| wide | boolean | **Optional** | false | Set this to true if you see extra empty space in the right side of the card. This will expand it horizontally to cover all the available space. Enable if you see empty space on the right size
| show_icons | boolean | **Optional** | false | Display entity icons
| show_names | boolean | **Optional** | false | Display entity names
| show_states | boolean | **Optional** | true | Display entity states
| show_units | boolean | **Optional** | true | Display unit of measurement
| min_box_height | number | **Optional** | 3 | Minimum size of an entity box
| min_box_size | number | **Optional** | 3 | Minimum size of an entity box
| min_box_distance | number | **Optional** | 5 | Minimum space between entity boxes
| min_state | number | **Optional** | >0 | Any entity below this value will not be displayed. Only positive numbers above 0 are allowed. The default is to show everything above 0.
| throttle | number | **Optional** | | Minimum time in ms between updates/rerenders
| static_scale | number | **Optional** | | State value corresponding to the maximum height size of the card. For example, if this is set to 1000, then a box with state 500 will take up half of its section. If some section exceeds the value of `static_scale`, the card will dynamically rescale overriding this option. See (#153)
| static_scale | number | **Optional** | | State value corresponding to the maximum size (height for horizontal layout and width in vertical) of the card. For example, if this is set to 1000, then a box with state 500 will take up half of its section. If some section exceeds the value of `static_scale`, the card will dynamically rescale overriding this option. See (#153)
| convert_units_to | string | **Optional** | | If entities are electricity (kWh) or gas (ft³) usage, convert them to energy (MJ), cost (monetary) or carbon (gCO2). For cost, you must also specify `electricity_price` and/or `gas_price`, as well as the `monetary_unit` of the price(s). For gCO2, all kWh values will be multiplied by the varying grid CO2 intensity, as with the Energy Dashboard.
| co2_intensity_entity |string | **Optional** | sensor.co2_signal_co2_intensity | Entity providing carbon intensity of electricity (gCO2eq/kWh). If you have solar or storage, you may wish to create a template sensor to convert grid CO2 intensity to consumption CO2 intensity.
| co2_intensity_entity |string | **Optional** | sensor. co2_signal_co2_intensity | Entity providing carbon intensity of electricity (gCO2eq/kWh). If you have solar or storage, you may wish to create a template sensor to convert grid CO2 intensity to consumption CO2 intensity.
| gas_co2_intensity | number | **Optional** | 66.6 g/ft³ or 2352 g/m³ | Carbon intensity of gas, e.g. in gCO2eq/ft³. Default value depends on locale; units must match those of gas entities.
| electricity_price | number | **Optional** | | Unit price of electricity, e.g. in USD/kWh. Automatic conversion does not support varying electricity prices like the Energy Dashboard does.
| gas_price | number | **Optional** | | Unit price of gas, e.g. in USD/ft³.
Expand All @@ -54,7 +55,7 @@ This card is intended to display connections between entities with numeric state
| sort_by | string | **Optional** | | Sort the entities in this section. Overrides the top level option
| sort_dir | string | **Optional** | desc | Sorting direction for this section. Overrides the top level option
| sort_group_by_parent | boolean | **Optional** | false | Group entities by parent before sorting. See #135
| min_width | string | **Optional** | | Minimum section width. Any CSS value is OK. Examples: 75px, 50%, 1em
| min_width | number | **Optional** | | Minimum section width in pixels. Only relevant while in horizontal layout

### Entities object

Expand Down Expand Up @@ -245,7 +246,6 @@ Currently this chart just shows historical data based on a energy-date-selection

[commits-shield]: https://img.shields.io/github/commit-activity/y/MindFreeze/ha-sankey-chart.svg?style=for-the-badge
[commits]: https://github.com//MindFreeze/ha-sankey-chart/commits/master
[devcontainer]: https://code.visualstudio.com/docs/remote/containers
[license-shield]: https://img.shields.io/github/license/MindFreeze/ha-sankey-chart.svg?style=for-the-badge
[maintenance-shield]: https://img.shields.io/maintenance/yes/2023.svg?style=for-the-badge
[releases-shield]: https://img.shields.io/github/release/MindFreeze/ha-sankey-chart.svg?style=for-the-badge
Expand Down
88 changes: 68 additions & 20 deletions __tests__/__snapshots__/basic.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,25 @@ exports[`SankeyChart matches a simple snapshot 2`] = `
<div class="section" style="">
<div class="connectors">
<svg preserveAspectRatio="none" viewBox="0 0 100 200">
<defs>
<linearGradient id="gradient0.0.0">
<linearGradient id="gradient0.0.0" gradientTransform="">
<stop offset="0%" stop-color="var(--primary-color)"></stop>
<stop offset="100%" stop-color="var(--primary-color)"></stop>
</linearGradient>
<linearGradient id="gradient0.0.1">
<linearGradient id="gradient0.0.1" gradientTransform="">
<stop offset="0%" stop-color="var(--primary-color)"></stop>
<stop offset="100%" stop-color="var(--primary-color)"></stop>
</linearGradient>
</defs>
<path d="M0,0 C50,0 50,0 100,0 L100,97 C50,97 50,97.5 0,97.5 Z" fill="url(#gradient0.0.0)" fill-opacity="0.4"></path>
<path d="M0,97.5 C50,97.5 50,103 100,103 L100,200 C50,200 50,195 0,195 Z" fill="url(#gradient0.0.1)" fill-opacity="0.4"></path>
</svg>
<path d="M0,0 C50,0 50,0 100,0 L100,97 C50,97 50,97.5 0,97.5 Z" fill="url(#gradient0.0.0)" fill-opacity="0.4"></path>
<path d="M0,97.5 C50,97.5 50,103 100,103 L100,200 C50,200 50,195 0,195 Z" fill="url(#gradient0.0.1)" fill-opacity="0.4"></path>
</svg>
</div>
Expand All @@ -45,9 +43,11 @@ exports[`SankeyChart matches a simple snapshot 2`] = `
</div>
<div class="label" style="line-height:15px;">
</div>
<span>
<span class="state">W</span>
</span>
</div>
</div>
Expand All @@ -63,9 +63,11 @@ exports[`SankeyChart matches a simple snapshot 2`] = `
</div>
<div class="label" style="line-height:15px;">
</div>
<span>
<span class="state">W</span>
</span>
</div>
</div>
Expand All @@ -76,9 +78,11 @@ exports[`SankeyChart matches a simple snapshot 2`] = `
</div>
<div class="label" style="line-height:15px;">
</div>
<span>
<span class="state">W</span>
</span>
</div>
</div>
Expand All @@ -95,22 +99,38 @@ exports[`SankeyChart matches a simple snapshot 2`] = `
position: relative;
/* height: 210px; */
padding: 16px;
overflow: hidden;
}
.container.with-header {
padding-top: 0;
}
.container.vertical {
flex-direction: column;
}
.section {
flex: 1;
flex-direction: column;
position: relative;
min-width: 0;
max-width: 50%;
}
.vertical .section {
display: flex;
flex: initial;
flex-direction: row-reverse;
align-items: flex-start;
max-width: 100%;
width: 100%;
height: 150px;
}
.wide .section:last-child {
flex: initial;
}
.spacerv {
transition: height 0.2s;
transition: height 0.25s;
}
.vertical .spacerv {
transition: width 0.25s;
}
.box {
display: flex;
Expand All @@ -119,6 +139,10 @@ exports[`SankeyChart matches a simple snapshot 2`] = `
/* min-height: 1px; */
transition: height 0.25s;
}
.vertical .box {
flex-direction: column;
transition: width 0.25s;
}
/* .box::before {
content: "";
position: absolute;
Expand All @@ -140,6 +164,10 @@ exports[`SankeyChart matches a simple snapshot 2`] = `
height: 100%;
cursor: pointer;
}
.vertical .box div:first-child {
width: 100%;
height: 15px;
}
.box.type-passthrough div:first-child {
opacity: 0.4;
}
Expand All @@ -155,8 +183,16 @@ exports[`SankeyChart matches a simple snapshot 2`] = `
overflow: hidden;
text-overflow: ellipsis;
}
.box .label span {
.vertical .box .label {
padding: 5px 0 0;
flex-direction: column;
white-space: normal;
/* word-break: break-all; */
text-align: center;
}
.box .label .name {
font-style: italic;
font-size: inherit;
}
.connectors {
position: absolute;
Expand All @@ -166,11 +202,23 @@ exports[`SankeyChart matches a simple snapshot 2`] = `
height: 100%;
overflow: hidden;
}
.vertical .connectors {
top: 15px;
left: 0;
bottom: 0;
height: auto;
}
.connectors svg {
position: absolute;
left: -1px;
width: 101%;
height: 100%;
}
.vertical .connectors svg {
top: -1px;
left: 0;
width: 100%;
height: 101%;
}
</style>"
`;
Loading

0 comments on commit b8b493d

Please sign in to comment.