jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 09:16:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add loading for initial state on graph (#5448)

Browse Source 
* Fix type

* Add loading spinner for initial state

* Move to better position

* Make var not a property

* Make spinner same height as graph

* Fix size

* Make spinner centered

* Adjust spinner position

* Remove boolean and make no state history match height

* Merge

* eslint

* Fix value

Co-Authored-By: Bram Kragten <mail@bramkragten.nl>

* Commit suggestion

Co-Authored-By: Bram Kragten <mail@bramkragten.nl>

* Suggested change

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Aidan Timson 2020-04-15 19:54:01 +01:00 committed by GitHub
parent ba0cba1a2b
commit ff81536463
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/panels/lovelace/common/graph/get-history-coordinates.ts
View File

@ -7,7 +7,7 @@ export const getHistoryCoordinates = async (
entity: string,
hours: number,
detail: number
): Promise<number[][] | undefined> => {
): Promise<number[][]> => {
const endTime = new Date();
const startTime = new Date();
startTime.setHours(endTime.getHours() - hours);
@ -15,10 +15,14 @@ export const getHistoryCoordinates = async (
const stateHistory = await fetchRecent(hass, entity, startTime, endTime);
if (stateHistory.length < 1 || stateHistory[0].length < 1) {
return undefined;
return [];
}
const coords = coordinates(stateHistory[0], hours, 500, detail);
if (!coords) {
return [];
}
return coords;
};

32
src/panels/lovelace/header-footer/hui-graph-header-footer.ts
View File

@ -10,6 +10,8 @@ import {
} from "lit-element";
import { HomeAssistant } from "../../../types";
import { getHistoryCoordinates } from "../common/graph/get-history-coordinates";
import "@polymer/paper-spinner/paper-spinner";
import "../components/hui-graph-base";
import { LovelaceHeaderFooter } from "../types";
import { GraphHeaderFooterConfig } from "./types";
@ -27,7 +29,7 @@ export class HuiGraphHeaderFooter extends LitElement
@property() protected _config?: GraphHeaderFooterConfig;
@property() private _coordinates?: any;
@property() private _coordinates?: number[][];
private _date?: Date;
@ -60,8 +62,18 @@ export class HuiGraphHeaderFooter extends LitElement
if (!this._coordinates) {
return html`
<div class="info">
No state history found.
<div class="container">
<paper-spinner active></paper-spinner>
</div>
`;
}
if (this._coordinates.length < 1) {
return html`
<div class="container">
<div class="info">
No state history found.
</div>
</div>
`;
}
@ -100,9 +112,19 @@ export class HuiGraphHeaderFooter extends LitElement
static get styles(): CSSResult {
return css`
paper-spinner {
position: absolute;
top: calc(50% - 28px);
}
.container {
display: flex;
justify-content: center;
position: relative;
padding-bottom: 20%;
}
.info {
text-align: center;
line-height: 58px;
position: absolute;
top: calc(50% - 16px);
color: var(--secondary-text-color);
}
`;