Skip to content

Commit f116607

Browse files
basbrussbasbruss
authored
Merge pull request #558 from UI-Lovelace-Minimalist/automated_custom_card_docs
[Action] Update custom_cards docs
2 parents 5657259 + 267f71f commit f116607

File tree

1 file changed

+263
-0
lines changed

1 file changed

+263
-0
lines changed

‎docs/usage/custom_cards/custom_card_apexcharts.md

+263
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
---
2+
title: Apexcharts Custom-card
3+
hide:
4+
- toc
5+
---
6+
<!-- markdownlint-disable MD046 -->
7+
8+
# Custom-card "Apexcharts"
9+
10+
![Apexcharts radialBar](../../assets/img/custom_card_apexcharts_radialBar.png)
11+
![Apexcharts line](../../assets/img/custom_card_apexcharts_line.png)
12+
![Apexcharts Donut](../../assets/img/custom_card_apexcharts_donut.png)
13+
14+
## Credits
15+
16+
- Author: AndyVRD - 2022
17+
- Credits to benm7
18+
- Version: 1.0.0
19+
20+
## Changelog
21+
22+
<details>
23+
<summary>1.0.0</summary>
24+
Initial release
25+
</details>
26+
27+
## Usage
28+
29+
```yaml
30+
- type: "custom:button-card"
31+
template: "custom_card_apexcharts"
32+
variables:
33+
chart_type: "donut"
34+
graph_span: "1d"
35+
entity_1:
36+
entity_id: "sensor.google"
37+
icon: ''
38+
name: "Google"
39+
color: "blue"
40+
max_value: 300
41+
entity_2:
42+
entity_id: "sensor.cloudflare"
43+
icon: ''
44+
name: "Cloudflare"
45+
color: "yellow"
46+
max_value: 50
47+
entity_3:
48+
entity_id: "sensor.gateway"
49+
icon: ''
50+
name: "Gateway"
51+
color: "green"
52+
max_value: 30
53+
```
54+
55+
## Requirements
56+
57+
Integration from HACS: "custom:apexcharts-card" from RomRider
58+
59+
## Variables
60+
61+
<table>
62+
<tr>
63+
<th>Variable</th>
64+
<th>Example</th>
65+
<th>Required</th>
66+
<th>Explanation</th>
67+
</tr>
68+
<tr>
69+
<td>chart_type</td>
70+
<td>line, scatter, pie, donut or radialBar</td>
71+
<td>yes</td>
72+
<td>The chart type you want to display</td>
73+
</tr>
74+
<tr>
75+
<td>graph_span</td>
76+
<td>1h, 12min, 1d, 1h25, 10sec, ...</td>
77+
<td>no</td>
78+
<td>The span of the graph as a time interval</td>
79+
</tr>
80+
<tr>
81+
<td>entity_id</td>
82+
<td>sensor.speedtest_download</td>
83+
<td>yes</td>
84+
<td>Entity sensor of choice</td>
85+
</tr>
86+
<tr>
87+
<td>icon</td>
88+
<td>mdi:cpu-64-bit</td>
89+
<td>no</td>
90+
<td>mdi icon you want to be exposed in the img_cell, '' will return entity.attributes.icon </td>
91+
</tr>
92+
<tr>
93+
<td>name</td>
94+
<td>name for the used sensor</td>
95+
<td>no</td>
96+
<td>'' will return entity.attributes.friendly_name</td>
97+
</tr>
98+
<tr>
99+
<td>color</td>
100+
<td>green, blue, yellow, red or grey</td>
101+
<td>no</td>
102+
<td>if you don't use the color variable it will choice a random color</td>
103+
</tr>
104+
<tr>
105+
<td>max_value</td>
106+
<td>10, 300, ...</td>
107+
<td>no</td>
108+
<td>Maximum value of the sensor. Default will be 100</td>
109+
</tr>
110+
</table>
111+
112+
## Template code
113+
114+
```yaml
115+
---
116+
custom_card_apexcharts:
117+
variables:
118+
entity_1:
119+
entity_id:
120+
icon: "[[[ return entity.attributes.icon ]]]"
121+
name: "[[[ return entity.attributes.friendly_name ]]]"
122+
color: >
123+
[[[
124+
var colors = ['yellow', 'blue', 'red', 'green'];
125+
var color = colors[Math.floor(Math.random() * colors.length)];
126+
return color;
127+
]]]
128+
entity_2:
129+
entity_id:
130+
icon: "[[[ return entity.attributes.icon ]]]"
131+
name: "[[[ return entity.attributes.friendly_name ]]]"
132+
color: >
133+
[[[
134+
var colors = ['yellow', 'blue', 'red', 'green'];
135+
var color = colors[Math.floor(Math.random() * colors.length)];
136+
return color;
137+
]]]
138+
entity_3:
139+
entity_id:
140+
icon: "[[[ return entity.attributes.icon ]]]"
141+
name: "[[[ return entity.attributes.friendly_name ]]]"
142+
color: >
143+
[[[
144+
var colors = ['yellow', 'blue', 'red','green'];
145+
var color = colors[Math.floor(Math.random() * colors.length)];
146+
return color;
147+
]]]
148+
color: "auto"
149+
variable: "spin"
150+
spin: false
151+
show_name: false
152+
show_state: false
153+
show_label: false
154+
show_icon: false
155+
show_last_changed: false
156+
show_entity_picture: false
157+
tap_action:
158+
action: "none"
159+
aspect_ratio: "2/1"
160+
styles:
161+
grid:
162+
- grid-template-areas: "'item1 radial' 'item2 radial' 'item3 radial'"
163+
- grid-template-columns: "35% 65%"
164+
- grid-template-rows: "1fr 1fr 1fr"
165+
card:
166+
- border-radius: "var(--border-radius)"
167+
- box-shadow: "var(--box-shadow)"
168+
- padding: "0px"
169+
custom_fields:
170+
item1:
171+
card:
172+
type: "custom:button-card"
173+
entity: "[[[ return variables.entity_1.entity_id ]]]"
174+
icon: "[[[ return variables.entity_1.icon ]]]"
175+
name: "[[[ return variables.entity_1.name ]]]"
176+
template:
177+
- "card_generic_swap"
178+
styles:
179+
icon:
180+
- color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]"
181+
img_cell:
182+
- background-color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]"
183+
card:
184+
- box-shadow: "none"
185+
- border-radius: "none"
186+
- padding-top: "1px"
187+
- padding-bottom: "1px"
188+
item2:
189+
card:
190+
type: "custom:button-card"
191+
entity: "[[[ return variables.entity_2.entity_id ]]]"
192+
icon: "[[[ return variables.entity_2.icon ]]]"
193+
name: "[[[ return variables.entity_2.name ]]]"
194+
template:
195+
- "card_generic_swap"
196+
styles:
197+
icon:
198+
- color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]"
199+
img_cell:
200+
- background-color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]"
201+
card:
202+
- box-shadow: "none"
203+
- border-radius: "none"
204+
- padding-top: "1px"
205+
- padding-bottom: "1px"
206+
item3:
207+
card:
208+
type: "custom:button-card"
209+
entity: "[[[ return variables.entity_3.entity_id ]]]"
210+
icon: "[[[ return variables.entity_3.icon ]]]"
211+
name: "[[[ return variables.entity_3.name ]]]"
212+
template:
213+
- "card_generic_swap"
214+
styles:
215+
icon:
216+
- color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]"
217+
img_cell:
218+
- background-color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]"
219+
card:
220+
- box-shadow: "none"
221+
- border-radius: "none"
222+
- padding-top: "1px"
223+
- padding-bottom: "1px"
224+
radial:
225+
card:
226+
type: "custom:apexcharts-card"
227+
graph_span: "[[[ return variables.graph_span ]]]"
228+
chart_type: "[[[ return variables.chart_type ]]]"
229+
style: |
230+
ha-card {
231+
border-radius: "var(--border-radius)";
232+
box-shadow: none;
233+
padding-left: 10px;
234+
padding-bottom: 0px;
235+
}
236+
header:
237+
show: false
238+
apex_config:
239+
title:
240+
floating: false
241+
align: "top"
242+
style:
243+
fontSize: "2px"
244+
fontWeight: "bold"
245+
chart:
246+
foreColor: "rgb(148,148,148)"
247+
offsetY: 5
248+
legend:
249+
show: false
250+
series:
251+
- entity: "[[[ return variables.entity_1.entity_id ]]]"
252+
name: "[[[ return variables.entity_1_name ]]]"
253+
color: "[[[ return `var(--google-${variables.entity_1.color})`;]]]"
254+
max: "[[[ return variables.entity_1.max_value ]]]"
255+
- entity: "[[[ return variables.entity_2.entity_id ]]]"
256+
name: "[[[ return variables.entity_2_name ]]]"
257+
color: "[[[ return `var(--google-${variables.entity_2.color})`;]]]"
258+
max: "[[[ return variables.entity_2.max_value ]]]"
259+
- entity: "[[[ return variables.entity_3.entity_id ]]]"
260+
name: "[[[ return variables.entity_3_name ]]]"
261+
color: "[[[ return `var(--google-${variables.entity_3.color})`;]]]"
262+
max: "[[[ return variables.entity_3.max_value ]]]"
263+
```

0 commit comments

Comments
 (0)