Add option to chart % rather than just kWh

[springfall2008]

Add option to chart % rather than just kWh

[mpartington]

Well after a lot of googling and trial + error, I managed it! Apex charts is still a black art to me
This is the code if useful to anyone else. Instances of 8.36 would need to be replaced with your own usable capacity, and the GivTCP SoC entity updated with inverter serial number.

EDITED to use native predbat % entities where available

`type: custom:apexcharts-card
header:
show: true
title: Home Battery Prediction %
show_states: true
colorize_states: true
graph_span: 60h
span:
start: minute
offset: '-12h'
now:
show: true
yaxis:

• min: 0
  max: 100
  decimals: 0
  series:
• entity: sensor.givtcp_SERIAL_soc
  stroke_width: 1
  curve: stepline
  name: actual
  extend_to: now
  show:
  in_header: true
• entity: predbat.soc_kw
  stroke_width: 1
  curve: smooth
  name: base
  unit: '%'
  float_precision: 0
  data_generator: >
  let res = []; for (const [key, value] of
  Object.entries(entity.attributes.results)) { res.push([new
  Date(key).getTime(), value*100/8.36]); } return res.sort((a, b) => {
  return a[0] - b[0] })
  show:
  in_header: true
• entity: predbat.soc_kw_best
  stroke_width: 3
  curve: smooth
  name: best
  unit: '%'
  float_precision: 0
  data_generator: >
  let res = []; for (const [key, value] of
  Object.entries(entity.attributes.results)) { res.push([new
  Date(key).getTime(), value*100/8.36]); } return res.sort((a, b) => {
  return a[0] - b[0] })
  show:
  in_header: true
• entity: predbat.soc_kw_best10
  stroke_width: 1
  curve: smooth
  name: best10
  unit: '%'
  float_precision: 0
  data_generator: >
  let res = []; for (const [key, value] of
  Object.entries(entity.attributes.results)) { res.push([new
  Date(key).getTime(), value*100/8.36]); } return res.sort((a, b) => {
  return a[0] - b[0] })
  show:
  in_header: true
• entity: predbat.best_charge_limit
  stroke_width: 4
  curve: stepline
  name: charge_limit_best
  unit: '%'
  float_precision: 0
  type: area
  opacity: 0.2
  data_generator: >
  let res = []; for (const [key, value] of
  Object.entries(entity.attributes.results)) { res.push([new
  Date(key).getTime(), value]); } return res.sort((a, b) => { return a[0] -
  b[0] })
  show:
  in_header: raw
• entity: predbat.charge_limit
  stroke_width: 1
  curve: stepline
  name: charge_limit_base
  float_precision: 0
  data_generator: >
  let res = []; for (const [key, value] of
  Object.entries(entity.attributes.results)) { res.push([new
  Date(key).getTime(), value]); } return res.sort((a, b) => { return a[0] -
  b[0] })
  show:
  in_header: raw
• entity: predbat.best_discharge_limit_kw
  stroke_width: 2
  curve: stepline
  name: discharge_best
  unit: '%'
  float_precision: 0
  data_generator: >
  let res = []; for (const [key, value] of
  Object.entries(entity.attributes.results)) { res.push([new
  Date(key).getTime(), value*100/8.36]); } return res.sort((a, b) => {
  return a[0] - b[0] })
  show:
  in_header: true
• entity: predbat.record
  stroke_width: 3
  curve: stepline
  name: record
  type: area
  opacity: 0.5
  color: black
  data_generator: >
  let res = []; for (const [key, value] of
  Object.entries(entity.attributes.results)) { res.push([new
  Date(key).getTime(), value*100/8.36]); } return res.sort((a, b) => {
  return a[0] - b[0] })
  show:
  in_header: true
• entity: predbat.soc_kw_base10
  stroke_width: 1
  curve: smooth
  name: base10
  unit: '%'
  float_precision: 0
  data_generator: >
  let res = []; for (const [key, value] of
  Object.entries(entity.attributes.results)) { res.push([new
  Date(key).getTime(), value*100/8.36]); } return res.sort((a, b) => {
  return a[0] - b[0] })
  show:
  in_header: true
  `

[gcoan]

I have (up to starting with batpred) thought of everything in % terms, which with different sized batteries is awkward. And in terms of kW-to-empty I much prefer using the batpred _soc_kw_h0 current battery soc in kwh (although the entity name is a bit obscure)

[mpartington]

Just wondering if there is an easy way for me to implement this locally outside of predbat. Realise it's it's a nice to have and wouldn't be used by all, so may make the core code too complex. I did take a look at template sensors, but no idea how I would convert all the attribute readings

[springfall2008]

Sure in the chart code just divide by the battery size and multiply by 100

[mpartington]

Thanks, hadn't thought of that! Got this far now, is there a way to change kWh into % in the chart code, and also change resolution to 0dp?