yes, and there is a section for this UoM. Bold in this section works, my “W” is bolded. Positioning, exactly the same as in section “value” doesn’t work. Why?
Maybe more clear view, code (borders added only to show that these sections works:
Your reply made me look much closer at the CSS here - ultimately, what you are trying to do is overlap 2 div elements, one which contains the state value and UoM, and the other which contains the min and max values.
It’s a bit hacky really, but overall you might be better off applying a negative margin-top value to the min/max div, so it overlaps with the state div above it.
This works for me, but I’ve no idea how it will scale on different views and layouts:
Last question: is there any way to add prefix or any text before value?
I removed title line, but I think about something indicating that on this graph is a sum of power from three phases. So instead of just 768W, could be: “Total: 768W” or “Σ 768W”
I tried to do it with “name” moved down, but unfortunately above of “min, value, max” line is left an empty space, regardless of moving this field.
There is a way based on this method:
You may place the sun.sun graph UNDER the 1st graph:
But compare to the 1st picture - the right scale is misaligned because it is 00:14 now and the NEW date is displayed.
Check the not-hidden graph:
Also, a similar misalignment may occur for the left scale. So, this is not a PERFECT way.
Check GitHub for an issue for adding X-scale.
The code:
Thx a lot to both of you for help, finally I decided to not add X scale (too much details on card) and this is my final card for measuring home electricity
Gents, I’d like to ask you about help for other story. I’m trying to make a card showing my current internet connection parameters. Here is my current result:
Left value is a current WAN RX throughput, right - ping answer to my external DNS server.
What I want to change:
first of all this big icon in the center, I’d like to replace it by any graphics depending on the state of WAN connection. I tried to simply relace mdi icon definition by link to my locally stored png, but it doesn’t work. So this is my first question: how to replace mdi icon by own local graphics?
second question: I’d like to rearrange Min and Max values: remove “min” at all, move the max value to the left and add max value from the second entity on the right - is it possible? I’m near sure that I saw somewhere here how to disable “min” value, but can’t find it now.
and third question connected to previous: can I modify “Max” text on card to my own description? I found how to add any text before or after this text, but not instead.
Thx for help. Generally I got what I wanted to have (only Icon I left for later, with picture elements card I should be able to do it without big problems), but last question: here is my current card, I hidden extrema for second value, hidden “Min” value for first one and moved “max” to the left:
Question: how to align value and date to the left? They are aligned to right, because right side is their native position, in my case I’d like to change it. Tried to do it by own:
ha-card .info.flex .info__item:nth-child(2) .info__item__value {
text-align: left;
color: green
}
but no reaction for text-align. Also I tried to put it in expected place manually by command left: 5% added into this section, but then the whole section starts to be ignored (green color disappearing, position without changes))
I could not deal with 2 things in the last some days. A tried to read everything about them but sadly without success so maybe anyone here can light me the reasons of them.
I know that the official release not yet support attributes, but in theory dev version 3 of unreleased 0.11 can handle it:
water_quality:
- name: Szabad aktív klór
value: 0,20
unit: mg/l
limit: '1000'
state: ok
...
- name: pH
value: 7,7
unit: ' '
limit: '8.5'
state: ok
location: Budapest - XI. kerület
water_hardness: közepesen kemény
provider: Data provided by vizmuvek.hu
icon: mdi:water
friendly_name: Water Quality FVM
Now I’m on the hot fresh official stable 0.11.0 and figured out that for attributes I have to use state_map. With it - as the following config show - my problem solved. No think that this is the most intuitive and convenient but at least it works, so thanks for the developers.
The config:
type: custom:mini-graph-card
entities:
- entity: sensor.water_quality_fvm
name: Water hardness
attribute: water_hardness
font_size_header: 10
font_size: 66
hour24: true
height: 50
line_width: 1
hours_to_show: 168
show:
labels: false
state_map:
- value: nagyon lágy
label: Very soft
- value: lágy
label: Soft
- value: közepesen kemény
label: Moderately hard
- value: kemény
label: Hard
- value: nagyon kemény
label: Very hard
Depends on what values does you attribute have.
If you have numericals - state_map not need.
Otherwise - surely yes.
Seems you are treating state_map in a wrong way.
It associates a real value with a displayed string.
But - how do you imagine a graph with non-numericals?
The only way to show a graph is to associate non-numericals with numericals:
ugly=0
unpleasant=1
good=2
very good=3
…
This may be done by some template sensor.
Most of the cases for state_map are like:
state_map:
- value: 'off' #### which is "0" - so this is a numerical
label: Bad ##(or Day, or Switched OFF)
- value: 'on' #### which is "1"
label: Good ##(or Night, or Switched ON)
Both theoretically and practically you can define graphs without numerical value. State_map from one side could be used for such situations, when the original textual value is not your preferred one. Of course the numerical usage is the most common and basic, but it works without any problem with strings.
All different states are really different ‘states’, call them ‘levels’ in the graph. The order of them is what you define in the config from top to bottom as less to more.
