jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 19:26:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Set min height for graphs, adjust margins (#24078)

Browse Source 
* Set min height for graphs, adjust margins

* stats + header adjustments

* set min to 200
This commit is contained in:
Bram Kragten 2025-02-05 15:16:33 +01:00
parent 6efe237639
commit e50b658db7
4 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/chart/ha-chart-base.ts
View File

@ -496,7 +496,7 @@ export class HaChartBase extends LitElement {
} }
private _getDefaultHeight() { private _getDefaultHeight() {
return Math.max(this.clientWidth / 2, 300); return Math.max(this.clientWidth / 2, 200);
} }
private _handleZoomReset() { private _handleZoomReset() {

6
src/components/chart/state-history-charts.ts
View File

@ -157,7 +157,7 @@ export class StateHistoryCharts extends LitElement {
></state-history-chart-line> ></state-history-chart-line>
</div> `; </div> `;
} }
return html`<div class="entry-container"> return html`<div class="entry-container timeline">
<state-history-chart-timeline <state-history-chart-timeline
.hass=${this.hass} .hass=${this.hass}
.data=${item} .data=${item}
@ -316,6 +316,10 @@ export class StateHistoryCharts extends LitElement {
padding-inline-end: 1px; padding-inline-end: 1px;
} }
.entry-container.timeline:first-child {
margin-top: var(--timeline-top-margin);
}
.entry-container:not(:first-child) { .entry-container:not(:first-child) {
border-top: 2px solid var(--divider-color); border-top: 2px solid var(--divider-color);
margin-top: 16px; margin-top: 16px;

4
src/panels/lovelace/cards/hui-history-graph-card.ts
View File

@ -302,6 +302,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
.card-header { .card-header {
justify-content: space-between; justify-content: space-between;
display: flex; display: flex;
padding-bottom: 0;
} }
.card-header ha-icon-next { .card-header ha-icon-next {
--mdc-icon-button-size: 24px; --mdc-icon-button-size: 24px;
@ -309,7 +310,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
color: var(--primary-text-color); color: var(--primary-text-color);
} }
.content { .content {
padding: 16px; padding: 0 16px 8px 16px;
flex: 1; flex: 1;
} }
.has-header { .has-header {
@ -317,6 +318,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
} }
state-history-charts { state-history-charts {
height: 100%; height: 100%;
--timeline-top-margin: 16px;
} }
`; `;
} }

9
src/panels/lovelace/cards/hui-statistics-graph-card.ts
View File

@ -261,7 +261,10 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
const hasFixedHeight = typeof this._config.grid_options?.rows === "number"; const hasFixedHeight = typeof this._config.grid_options?.rows === "number";
return html` return html`
<ha-card .header=${this._config.title}> <ha-card>
${this._config.title
? html`<h1 class="card-header">${this._config.title}</h1>`
: nothing}
<div <div
class="content ${classMap({ class="content ${classMap({
"has-header": !!this._config.title, "has-header": !!this._config.title,
@ -372,8 +375,12 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
} }
.card-header {
padding-bottom: 0;
}
.content { .content {
padding: 16px; padding: 16px;
padding-top: 0;
flex: 1; flex: 1;
} }
.has-header { .has-header {