Add curve: stepline to get straight lines in chart

[AndersHoglund]

Both curves should be stepline.

[jonasbkarlsson]

Thanks for providing this PR. I wasn't aware of the "stepline" option. I have used it myself for a while now.

As for Anders' suggestion to also use stepline for the price curve. I think I personally prefer the current example without the stepline, which gives a smooth price curve.

BTW, I have been busy with some other things lately, so I haven't been able to work on this integration, but I will accept this PR "soon".

[AndersHoglund]

Prices on Nordpool does not change smoothly, they change stepwise by the hour. So a smooth graph will not reflect the truth. /A

[kalaws]

It’s unfortunate that it looks like the price changes at xx:30, rather than 00. Any way to fix?

[jonasbkarlsson]

@kalaws, are you using the example code in latest version of the documentation?

If you for the first serie (Electricty price), after the line type: line adds a new line curve: stepline, then you will get a graph with step-wise electricity price (see the picture from AndersHoglund above). This should make the price changes to happen more clearly at xx:00.

series:
  - entity: sensor.ev_smart_charging_charging
    name: Electricty price
    unit: ' öre/kWh'
    data_generator: >
      return entity.attributes.raw_two_days.map((entry) => { return [new
      Date(entry.start), entry.value]; });
    type: line
    curve: stepline   <===== ADD THIS LINE
    float_precision: 0
    show:
      in_header: before_now
    extend_to: false
    color_threshold:
      - value: -100
        color: cyan
      - value: 0
        color: green
      - value: 40
        color: orange
      - value: 100
        color: red
      - value: 200
        color: magenta
      - value: 500
        color: black

[kalaws]

I am using the example code. What I mean is that when the time is like 06:30, it looks like the Now line is just about to cross into the next price. Solve it this way:

data_generator: >
      return entity.attributes.raw_two_days.map((entry) => { return [new
      Date(entry.start).getTime() + 30*60000, entry.value]; });