Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: rename to power-flow-card #17

Merged
merged 1 commit into from
May 9, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
# Power Distribution Card
# Power Flow Card

[![hacs_badge](https://img.shields.io/badge/HACS-Default-41BDF5.svg?style=flat-square)](https://github.com/hacs/integration)
![GitHub release (latest by date)](https://img.shields.io/github/v/release/ulic75/power-distribution-card?style=flat-square)
![GitHub Workflow Status](https://img.shields.io/github/workflow/status/ulic75/power-distribution-card/CI?style=flat-square)
![GitHub all releases](https://img.shields.io/github/downloads/ulic75/power-distribution-card/total?style=flat-square)
![GitHub release (latest by date)](https://img.shields.io/github/v/release/ulic75/power-flow-card?style=flat-square)
![GitHub Workflow Status](https://img.shields.io/github/workflow/status/ulic75/power-flow-card/CI?style=flat-square)
![GitHub all releases](https://img.shields.io/github/downloads/ulic75/power-flow-card/total?style=flat-square)

This card for [Home Assistant](https://github.com/home-assistant/home-assistant) Dashboards is designed to provide power distribution in an identical style to the Official Energy Distribution card included by Home Assistant.

Expand All @@ -18,26 +18,26 @@ This card is available in [HACS](https://hacs.xyz/) (Home Assistant Community St

### Manual install

1. Download and copy `power-distribution-card.js` from the [latest release](https://github.com/ulic75/power-distribution-card/releases/latest) into your `config/www` directory.
1. Download and copy `power-flow-card.js` from the [latest release](https://github.com/ulic75/power-flow-card/releases/latest) into your `config/www` directory.

2. Add the resource reference as decribed below.

### Add resource reference

If you configure Dashboards via YAML, add a reference to `power-distribution-card.js` inside your `configuration.yaml`:
If you configure Dashboards via YAML, add a reference to `power-flow-card.js` inside your `configuration.yaml`:

```yaml
resources:
- url: /local/power-distribution-card.js
- url: /local/power-flow-card.js
type: module
```

Else, if you prefer the graphical editor, use the menu to add the resource:

1. Make sure, advanced mode is enabled in your user profile (click on your user name to get there)
2. Navigate to Configuration -> Dashboards -> Resources Tab. Hit (+ ADD RESOURCE) icon
3. Enter URL `/local/power-distribution-card.js` and select type "JavaScript Module".
(Use `/hacsfiles/power-distribution-card/power-distribution-card.js` and select "JavaScript Module" for HACS install if HACS didn't do it already)
3. Enter URL `/local/power-flow-card.js` and select type "JavaScript Module".
(Use `/hacsfiles/power-flow-card/power-flow-card.js` and select "JavaScript Module" for HACS install if HACS didn't do it already)

## Using the card

Expand All @@ -50,7 +50,7 @@ I recommend looking at the [Example usage section](#example-usage) to understand

| Name | Type | Default | Description |
| ------------- | -------- | :----------: | --------------------------------------------------------------------------------------------------------------------------------------- |
| type | `string` | **required** | `custom:power-distribution-card`. |
| type | `string` | **required** | `custom:power-flow-card`. |
| entities | `object` | **required** | One or more sensor entities, see [entities object](#entities-object) for additional entity options. |
| min_flow_rate | `number` | .75 | Represents the fastest amount of time in seconds for a flow dot to travel from one end to the other, see [flow formula](#flow-formula). |
| max_flow_rate | `number` | 6 | Represents the slowest amount of time in seconds for a flow dot to travel from one end to the other, see [flow formula](#flow-formula). |
Expand Down Expand Up @@ -78,8 +78,8 @@ Can be use with either Grid or Battery configuration
#### Using combined entities for grid and battery that support positive state values for consumption and negative state values for production.

```yaml
type: custom:power-distribution-card
title: Realtime Distribution
type: custom:power-flow-card
title: Power Distribution
entities:
battery: sensor.battery_in_out
battery_charge: sensor.battery_percent
Expand All @@ -91,8 +91,8 @@ max_flow_rate: 10
#### Using split entities for grid and battery where each consumption and production entity state has a positive value.

```yaml
type: custom:power-distribution-card
title: Realtime Distribution
type: custom:power-flow-card
title: Power Distribution
entities:
battery:
consumption: sensor.battery_out
Expand Down
2 changes: 1 addition & 1 deletion hacs.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"name": "power-distribution-card",
"name": "Power Flow Card",
"render_readme": true
}
2 changes: 1 addition & 1 deletion rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const serveOptions = {

export default [
{
input: "src/power-distribution-card.ts",
input: "src/power-flow-card.ts",
output: [
{
dir: "./dist",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { LovelaceCardConfig } from "custom-card-helpers";

export interface PowerDistributionCardConfig extends LovelaceCardConfig {
export interface PowerFlowCardConfig extends LovelaceCardConfig {
entities: {
battery?:
| string
Expand Down
12 changes: 6 additions & 6 deletions src/power-distribution-card.ts → src/power-flow-card.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,25 @@ import { formatNumber, HomeAssistant } from "custom-card-helpers";
import { css, html, LitElement, svg, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { PowerDistributionCardConfig } from "./power-distribution-card-config.js";
import { PowerFlowCardConfig } from "./power-flow-card-config.js";
import { coerceNumber, roundValue } from "./utils.js";

const CIRCLE_CIRCUMFERENCE = 238.76104;
const MAX_FLOW_RATE = 6;
const MIN_FLOW_RATE = 0.75;

@customElement("power-distribution-card")
export class PowerDistributionCard extends LitElement {
@customElement("power-flow-card")
export class PowerFlowCard extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@state() private _config?: PowerDistributionCardConfig;
@state() private _config?: PowerFlowCardConfig;

@query("#battery-home-flow") batteryToHomeFlow?: SVGSVGElement;
@query("#grid-home-flow") gridToHomeFlow?: SVGSVGElement;
@query("#solar-battery-flow") solarToBatteryFlow?: SVGSVGElement;
@query("#solar-grid-flow") solarToGridFlow?: SVGSVGElement;
@query("#solar-home-flow") solarToHomeFlow?: SVGSVGElement;

setConfig(config: PowerDistributionCardConfig): void {
setConfig(config: PowerFlowCardConfig): void {
this._config = {
...config,
min_flow_rate: config.min_flow_rate ?? MIN_FLOW_RATE,
Expand Down Expand Up @@ -673,6 +673,6 @@ export class PowerDistributionCard extends LitElement {

declare global {
interface HTMLElementTagNameMap {
"power-distribution-card": PowerDistributionCard;
"power-flow-card": PowerFlowCard;
}
}