diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml index 0c0b700..4aa84db 100644 --- a/.devcontainer/ui-lovelace.yaml +++ b/.devcontainer/ui-lovelace.yaml @@ -1,37 +1,21 @@ views: - title: Main cards: - - type: grid - title: Test Grid Square - square: true - columns: 2 - cards: - - type: custom:apexcharts-card - stacked: true - series: - - entity: sensor.random_0_1000 - name: test1 - type: area - curve: straight - - entity: sensor.random_0_1000 - name: test2 - type: area - hours_to_show: 0.20 - cache: true - layout: minimal - header: - show: false - - type: custom:apexcharts-card - stacked: true - series: - - entity: sensor.random_0_1000 - name: test1 - type: column - - entity: sensor.random_0_1000 - name: test2 - type: column - hours_to_show: 0.25 - cache: true + - type: custom:apexcharts-card + stacked: true + series: + - entity: sensor.random_0_1000 + name: Sensor 1 + type: area + curve: straight + - entity: sensor.random_0_1000 + name: Sensor 2 + type: area + hours_to_show: 0.20 + cache: true + layout: minimal + header: + show: false - type: custom:apexcharts-card stacked: true @@ -68,72 +52,76 @@ views: curve: straight - type: custom:apexcharts-card - hours_to_show: 48 + hours_to_show: 1 + header: + show: false series: - entity: sensor.random0_100 name: AVG curve: smooth - type: area + type: line group_by: - duration: 1h + duration: 10min func: avg - entity: sensor.random0_100 curve: smooth name: MIN - type: area + type: line group_by: - duration: 1h + duration: 10min func: min - entity: sensor.random0_100 curve: smooth name: MAX - type: area + type: line group_by: - duration: 1h + duration: 10min func: max - entity: sensor.random0_100 curve: smooth name: LAST - type: area + type: line group_by: - duration: 3h + duration: 10min func: last - entity: sensor.random0_100 curve: smooth name: FIRST - type: area + type: line group_by: - duration: 3h + duration: 10min func: first - type: custom:apexcharts-card + hours_to_show: 4 series: - entity: sensor.humidity type: area - name: Office Humidity + name: Outside Humidity group_by: func: avg duration: 1h - entity: sensor.random0_100 type: area - name: Outside Humidity + name: Office Humidity group_by: func: avg duration: 1h - type: custom:apexcharts-card + hours_to_show: 6 header: show: false series: - entity: sensor.humidity type: line - name: Office Humidity + name: Outside Humidity group_by: func: avg - duration: 1h + duration: 30min - entity: sensor.random0_100 type: column - name: Outside Humidity + name: Office Humidity group_by: func: avg - duration: 1h + duration: 30min diff --git a/README.md b/README.md index e75abc6..4481143 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,9 @@ However, some things might be broken :grin: - [Known issues](#known-issues) - [Roadmap](#roadmap) - [Examples](#examples) + - [Simple graph](#simple-graph) + - [Multiple Types of Graphs](#multiple-types-of-graphs) + - [Aggregating data](#aggregating-data) ## Installation @@ -87,7 +90,7 @@ The card stricly validates all the options available (but not for the `apex_conf | Name | Type | Default | Since | Description | | ---- | :--: | :-----: | :---: | ----------- | | :white_check_mark: `type` | string | | v1.0.0 | `custom:apexcharts-card` | -| :white_check_mark: `series` | object | | v1.0.0 | See [series](#series-options) | +| :white_check_mark: `series` | array | | v1.0.0 | See [series](#series-options) | | `hours_to_show` | number | `24` | v1.0.0 | The span of the graph in hours (Use `0.25` for 15min for eg.) | | `show` | object | | v1.0.0 | See [show](#show-options) | | `cache` | boolean | `true` | v1.0.0 | Use in-browser data caching to reduce the load on Home Assistant's server | @@ -154,7 +157,7 @@ Some options might now work in the context of this card. ```yaml type: custom:apexcharts-card -entities: +series: - ... apex_config: dataLabels: @@ -167,6 +170,10 @@ apex_config: For now, only `minimal` is supported: It will remove the grid, the axis and display the legend at the top. But you can use the `apex_config` to do whatever you want. +* `minimal` + + ![minimal](docs/minimal.png) + For code junkies, you'll find the default options I use in [`src/apex-layouts.ts`](src/apex-layouts.ts) ## Known issues @@ -191,4 +198,81 @@ Not ordered by priority: ## Examples -TBD. \ No newline at end of file +### Simple graph + +```yaml +type: custom:apexcharts-card +series: + - entity: sensor.temperature +``` + +### Multiple Types of Graphs + +![multi-graph](docs/multi-graph.png) + +```yaml +type: custom:apexcharts-card +hours_to_show: 6 +header: + show: false +series: + - entity: sensor.humidity + type: line + name: Outside Humidity + group_by: + func: avg + duration: 30min + - entity: sensor.random0_100 + type: column + name: Office Humidity + group_by: + func: avg + duration: 30min +``` + +### Aggregating data + +![aggregating_data](docs/aggregate_func.png) + +```yaml +type: custom:apexcharts-card +hours_to_show: 1 +header: + show: false +series: + - entity: sensor.random0_100 + name: AVG + curve: smooth + type: line + group_by: + duration: 10min + func: avg + - entity: sensor.random0_100 + curve: smooth + name: MIN + type: line + group_by: + duration: 10min + func: min + - entity: sensor.random0_100 + curve: smooth + name: MAX + type: line + group_by: + duration: 10min + func: max + - entity: sensor.random0_100 + curve: smooth + name: LAST + type: line + group_by: + duration: 10min + func: last + - entity: sensor.random0_100 + curve: smooth + name: FIRST + type: line + group_by: + duration: 10min + func: first +``` diff --git a/docs/aggregate_func.png b/docs/aggregate_func.png new file mode 100644 index 0000000..8d66d66 Binary files /dev/null and b/docs/aggregate_func.png differ diff --git a/docs/minimal.png b/docs/minimal.png new file mode 100644 index 0000000..de86948 Binary files /dev/null and b/docs/minimal.png differ diff --git a/docs/multi-graph.png b/docs/multi-graph.png new file mode 100644 index 0000000..9b41def Binary files /dev/null and b/docs/multi-graph.png differ