Skip to content

Commit

Permalink
feat: add stroke_width and experimental color_threshold/disable_confi…
Browse files Browse the repository at this point in the history 
…g_validation

* Initial color_threshold support

* Some default test UI update

* Add threshold for line and area

* introduce experimental

* more experimental and some fixes

* fix missing tooltip for columns

* fix when invert: true

* Update documentation

* Fix doc

* Fix doc 2...

Fixes #58
  • Loading branch information
@RomRider
RomRider committed Feb 7, 2021
1 parent c36dda7 commit fcdfa88
Show file tree
Hide file tree
Showing 10 changed files with 477 additions and 36 deletions.
189 changes: 179 additions & 10 deletions .devcontainer/ui-lovelace.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,17 @@ views:
reset: true
zoom:
enabled: true
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0.8
stops:
- 0
- 1000
inverseColors: false
update_interval: 5sec
stacked: true
# stacked: true
series:
- entity: sensor.random_0_1000
name: Sensor 1
Expand All @@ -30,6 +39,7 @@ views:
name: Sensor 2
type: area
offset: -1d
invert: true
graph_span: 15min
cache: true
layout: minimal
Expand All @@ -49,6 +59,7 @@ views:
- entity: sensor.random_0_1000
name: Ram Free
type: area
stroke_width: 20
graph_span: 15min
cache: true
layout: minimal
Expand All @@ -57,14 +68,39 @@ views:

- type: custom:apexcharts-card
stacked: false
experimental:
color_threshold: true
# disable_config_validation: true
series:
- entity: sensor.random_0_1000
name: test1
type: column
- entity: sensor.random_0_1000
group_by:
duration: 1m
func: last
transform: return x/10;
color_threshold:
- value: 33
color: '#00ff00'
- value: 66
color: '#000001'
- value: 0
color: '#ff0000'

- entity: sensor.random0_100
name: test2
type: column
graph_span: 20min
group_by:
duration: 1m
func: last
# color_threshold:
# - value: 0
# color: '#0000ff'
# - value: 33
# color: '#00ff00'
# - value: 66
# color: '#ff0000'
graph_span: 10min
cache: true
- type: custom:apexcharts-card
graph_span: 200h
Expand Down Expand Up @@ -192,6 +228,11 @@ views:
group_by:
func: avg
duration: 30min
# color_threshold:
# - value: 49
# color: '#ff0000'
# - value: 0
# color: '#00ff00'

- type: custom:apexcharts-card
header:
Expand Down Expand Up @@ -282,23 +323,64 @@ views:
- type: custom:apexcharts-card
graph_span: 8d
span:
start: hour
# apex_config:
# dataLabels:
# enabled: true
start: day
offset: -3d
header:
show: true
title: Precipitation Forecast
title: Temperature Forecast
show_states: true
now:
show: true
label: 'now'
color: '#0066ff88'
apex_config:
legend:
show: false
series:
- entity: weather.openweathermap
type: area
name: Temperature
unit: °C
attribute: temperature
fill_raw: last
extend_to_end: false
offset: -1d
group_by:
func: avg
duration: 1h
- entity: weather.openweathermap
type: line
extend_to_end: false
unit: °C
show:
in_header: false
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.temperature];
});
- type: custom:apexcharts-card
graph_span: 20min
experimental:
color_threshold: true
series:
- entity: sensor.random_0_1000
type: line
stroke_width: 2
color_threshold:
- value: 0
color: blue
- value: 250
color: green
- value: 500
color: yellow
# opacity: 0
- value: 500
color: orange
- value: 750
color: orange
- value: 750
color: red
- value: 1000
color: red
- type: custom:apexcharts-card
header:
show: true
Expand Down Expand Up @@ -333,6 +415,13 @@ views:
title: line
series:
- entity: sensor.random0_100
color_threshold:
- value: 0
color: '#0000ff'
- value: 33
color: '#00ff00'
- value: 66
color: '#ff0000'
- entity: sensor.random_0_1000
- type: custom:apexcharts-card
header:
Expand Down Expand Up @@ -411,3 +500,83 @@ views:
series:
- entity: input_boolean.test_boolean
transform: "return x === 'on' ? 1 : 0;"
- type: custom:apexcharts-card
update_delay: 3s
graph_span: 5min
series:
- entity: input_boolean.test_boolean
transform: "return x === 'on' ? 1 : 0;"
- type: custom:apexcharts-card
update_delay: 3s
graph_span: 5min
series:
- entity: input_boolean.test_boolean
transform: "return x === 'on' ? 1 : 0;"
- type: custom:apexcharts-card
graph_span: 30min
experimental:
color_threshold: true
series:
- entity: sensor.random0_100
transform: return x / 2 - 15;
color_threshold:
- value: -10
# color can be a color name, rgb(r, g, b), '#0000ff' or var(--color-variable)
# default is: the default color of the serie
color: blue
# optional opacity, value from 0 to 1.
# Default is 1 for 'type: line' and 0.7 for `type: area`
opacity: 1
- value: 0
color: cyan
- value: 15
color: green
- value: 25
color: orange
- type: custom:apexcharts-card
graph_span: 30min
experimental:
color_threshold: true
series:
- entity: sensor.random0_100
type: area
stroke_width: 0
transform: return x / 2 - 15;
invert: true
color_threshold:
- value: -10
# color can be a color name, rgb(r, g, b), '#0000ff' or var(--color-variable)
# default is: the default color of the serie
color: blue
# optional opacity, value from 0 to 1.
# Default is 1 for 'type: line' and 0.7 for `type: area`
opacity: 1
- value: 0
color: cyan
- value: 15
color: green
- value: 25
color: orange
- type: custom:apexcharts-card
graph_span: 30min
experimental:
color_threshold: true
series:
- entity: sensor.random0_100
type: column
# stroke_width: 0
transform: return x / 2 - 15;
color_threshold:
- value: -10
# color can be a color name, rgb(r, g, b), '#0000ff' or var(--color-variable)
# default is: the default color of the serie
color: blue
# optional opacity, value from 0 to 1.
# Default is 1 for 'type: line' and 0.7 for `type: area`
opacity: 1
- value: 0
color: cyan
- value: 15
color: green
- value: 25
color: orange
68 changes: 66 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@ However, some things might be broken :grin:
- [`data_generator` Option](#data_generator-option)
- [Apex Charts Options Example](#apex-charts-options-example)
- [Layouts](#layouts)
- [Experimental features](#experimental-features)
- [Configuration options](#configuration-options)
- [`color_threshold` experimental feature](#color_threshold-experimental-feature)
- [Known issues](#known-issues)
- [Roadmap](#roadmap)
- [Examples](#examples)
Expand Down Expand Up @@ -132,6 +135,7 @@ The card stricly validates all the options available (but not for the `apex_conf
| `now` | object | | v1.5.0 | See [now](#now-options) |
| `y_axis_precision` | numnber | `1` | v1.2.0 | The float precision used to display numbers on the Y axis |
| `apex_config`| object | | v1.0.0 | Apexcharts API 1:1 mapping. You call see all the options [here](https://apexcharts.com/docs/installation/) --> `Options (Reference)` in the Menu. See [Apex Charts](#apex-charts-options-example) |
| `experimental` | object | | NEXT_VERSION | See [experimental](#experimental-features) |



Expand All @@ -143,6 +147,7 @@ The card stricly validates all the options available (but not for the `apex_conf
| `attribute` | string | | v1.4.0 | Instead of retrieving the state, it will retrieve an `attribute` of the entity. Make sure you increase `update_delay` if the chart doesn't reflect the last value of the attribute |
| `name` | string | | v1.0.0 | Override the name of the entity |
| `color` | string | | v1.1.0 | Color of the serie. Supported formats: `yellow`, `#aabbcc`, `rgb(128, 128, 128)` or `var(--css-color-variable)` |
| `stroke_width` | number | `5` | NEXT_VERSION | Change the width of the line. Only works for `area` and `line` |
| `type` | string | `line` | v1.0.0 | `line`, `area` or `column` are supported for now |
| `curve` | string | `smooth` | v1.0.0 | `smooth` (nice curve), `straight` (direct line between points) or `stepline` (flat line until next point then straight up or down) |
| `extend_to_end` | boolean | `true` | v1.0.0 | If the last data is older than the end time displayed on the graph, setting to true will extend the value until the end of the timeline. Only works for `line` and `area` types. |
Expand All @@ -156,6 +161,7 @@ The card stricly validates all the options available (but not for the `apex_conf
| `offset` | string | | v1.3.0 | This is different from the main `offset` parameter. This is at the series level. It is only usefull if you want to display data from for eg. yesterday on top of the data from today for the same sensor and compare the data. The time displayed in the tooltip will be wrong as will the x axis information. Valid values are any negative time string, eg: `-1h`, `-12min`, `-1d`, `-1h25`, `-10sec`, ... |
| `min` | number | `0` | v1.4.0 | Only used when `chart_type = radialBar`, see [chart_type](#chart_type-options). Used to convert the value into a percentage. Minimum value of the sensor |
| `max` | number | `100` | v1.4.0 | Only used when `chart_type = radialBar`, see [chart_type](#chart_type-options). Used to convert the value into a percentage. Maximum value of the sensor |
| `color_threshold` | object | | NEXT_VERSION | See [experimental](#experimental-features) |

### `series.show` Options

Expand Down Expand Up @@ -402,7 +408,7 @@ This is how you could change some options from ApexCharts as described on the [`

Hundreds of options are available and it is not possible to describe them all here so check over there and ask on the [forum](https://community.home-assistant.io/t/apexcharts-card-a-highly-customizable-graph-card/272877) if you need help with using them.

Some options might now work in the context of this card.
Some options might not work in the context of this card.

```yaml
type: custom:apexcharts-card
Expand All @@ -425,6 +431,64 @@ For now, only `minimal` is supported: It will remove the grid, the axis and disp

For code junkies, you'll find the default options I use in [`src/apex-layouts.ts`](src/apex-layouts.ts)

## Experimental features

:warning: You enter the danger zone :warning:

### Configuration options

| Name | Type | Default | Since | Description |
| ---- | :--: | :-----: | :---: | ----------- |
| `color_threshold` | boolean | `false` | NEXT_VERSION | Will enable the color threshold feature. See [color_threshold](#color_threshold-experimental-feature) |
| `disable_config_validation` | boolean | `false` | NEXT_VERSION | If `true`, will disable the config validation. Useful if you have cards adding parameters to this one. Use at your own risk. |

### `color_threshold` experimental feature

`color_threshold` is an experimental feature for now since enabling it will break some other default features.

If enabled, it might:
* display the wrong serie color in the tooltip in some cases (series with datapoints not aligned mostly)
* display thin columns instead of the standard size
* completely render `apex_config.fill` options unusable, and if you do, it will break the card

Now that you are warned, it works with:
* `chart_type`: `radialBar`, `line`, `pie`, `donut`
* `series`'s `type`: `column`, `area`, `line`

Some notes:
* For `series`'s `type: column`, the full bar will be of the color defined. Gradient is not possible
* For `series`'s `type: area`:
* only the filled area will be displayed with the gradient. It is not possible to do so for the line.
* It works better with `stroke_width: 1` or `stroke_width: 0`
* If using `invert: true`, the values in `color_threshold` should stay the same as with `invert: false`.


And this is how to use it:
```yaml
type: custom:apexcharts-card
experimental:
color_threshold: true
series:
- entity: sensor.temperature
color_threshold:
- value: -10
# color can be a color name, rgb(r, g, b), '#0000ff' or var(--color-variable)
# default is: the default color of the serie
color: blue
# optional opacity, value from 0 to 1.
# only for line and area
# Default is 1 for 'type: line' and 0.7 for `type: area`
opacity: 1
- value: 0
color: cyan
- value: 15
color: green
- value: 25
color: orange
```

![color_threshold](docs/color_threshold.png)

## Known issues

* Sometimes, if `smoothing` is used alongside `area` and there is missing data in the chart, the background will be glitchy. See [apexcharts.js/#2180](https://github.com/apexcharts/apexcharts.js/issues/2180)
Expand All @@ -442,7 +506,7 @@ Not ordered by priority:
* [ ] Support for any number of Y-axis
* [ ] Support for logarithmic
* [X] ~~Support for state mapping for non-numerical state sensors~~
* [ ] Support for simple color threshold (easier to understand/write than the ones provided natively by ApexCharts)
* [X] ~~Support for simple color threshold (easier to understand/write than the ones provided natively by ApexCharts)~~
* [ ] Support for graph configuration templates à la [`button-card`](https://github.com/custom-cards/button-card/blob/master/README.md#configuration-templates)

## Examples
Expand Down
Binary file added docs/color_threshold.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit fcdfa88

Please sign in to comment.