How to return (change) conditional values?

[deltamelter]

Firstly I'm impressed with this card, I have been a big ApexCharts card user but a crippling javascript bug and unaddressed limitations are forcing me to look for alternatives So I'm trying reproduce and improve the graphs I want with added interactive element of this plotly card.

Anyway, one of the things I could do with apex was set a data_generator and get it to spit out anything. One of the things I want to do here is add a series of fixed additions only when certain conditions are met, in example here, the condition is time of day. I add blocks of 12, but only ad certain hours (16, 17 and 18:00). I tried to use the same basic code and make an array of timestamps and values of either 0 or 12 but can't figure out how to output that in the plotly series (entity) it just shows the original entity contents.

This is what I want to achieve:

The filters:

    filters:
      - fn: |-
          ({ meta }) => ({
            xs: meta.data.map(({ start_time }) => start_time),
            ys: meta.data.map(({ price_pence_per_kwh }) => {
            const lastIndex = meta.data.length -1;
            const arr = [16,17,18]
            let bump = 0;
            let itemTimestamp = 0;
            const data = [];  
            for (let i = 1; i < lastIndex; i++) {
              itemTimestamp = new Date(meta.data[i].start_time);
              if (arr.includes(itemTimestamp.getHours())){
                bump = 12;
                }
              else {
                bump = 0}
              data.push([itemTimestamp, bump])  
              }
              return { meta : {"data": data}}; 
            }),
          })      

The original data set ( for this series, I'm only interested in the datetime and whether or not the "bump" applies

Apex chart was happy to replace the whole entity with a timestamp, value array, but I think with plotly I need to be more precise. How would I best go about this with the plotly card and filters?

multi stacks and overlaid series with different semi-transparent colours are things I would want to use here too, but one thing at a time 😀

[dbuezas]

Wow, you started on expert mode :)

multi stacks

Google (or search these discussions) plotly stackgroup

semi-transparent colours

you can set opacity: 0.5 on the entity or use rgba(r,g,b,a)on line:color:

plotly

try with:

({ meta }) => ({
  xs: meta.data.map(({ start_time }) => new Date(start_time)),
  ys: meta.data.map(({ start_time }, i) =>
    [16, 17, 18].includes(new Date(start_time).getHours()) ? 12 : 0
  ),
});

[deltamelter]

({ meta }) => ({
xs: meta.data.map(({ start_time }) => new Date(start_time)),
ys: meta.data.map(({ start_time }, i) =>
[16, 17, 18].includes(new Date(start_time).getHours()) ? 12 : 0
),
});

This works well for "mapped" (current) data. How would I do the same for the history data?

I guess I will have to truncate the current entity to start from "now" to stop the overlapping stacking...

Also wondering if conditional color of bars is possible in plotly? In Apex I do this with

    color_threshold:
      - value: 0.5
        color: '#ff0000'
      - value: 0.4
        color: '#ff6347'
      - value: 0.3
        color: '#ff6347'
      - value: 0.2999
        color: '#ffa500'
      - value: 0.2
        color: '#ffa500'
      - value: 0.1999
        color: '#3cb371'
      - value: 0.1
        color: '#3cb371'
      - value: 0.0999
        color: '#02989F'
      - value: 0.05
        color: '#02989F'
      - value: 0.04999
        color: '#0051FF'
      - value: 0
        color: '#0051FF'

[dbuezas]

For history data it is the same but the y coordinates are inside ys. You can also use a map_y filter, read the readme.

Conditional colors are not supported in plotly

[deltamelter]

For history data it is the same but the y coordinates are inside ys. You can also use a map_y filter, read the readme.

lol, re-read the readme still don't get that bit. I'll keep looking through examples...

Conditional colors are not supported in plotly

No but arrays of colours are supported so I have a way to do this. Not impossible, but not very practical maybe :)

[dbuezas]

Ok, you mean each bar of a different color, I thought you meant different heights or a gradient. True, that can work.
map_y gives you each y and you return what to transform it to:

- map_y: "y>10 ? 20 : 0"

[deltamelter]

shaping up nicely, but still don't have command of the history. Also struggling to frame the amount of data I want to show.
Currently I have 30 minute price overlaying a 60minute forecast of the price. Ideally I would have 2x 30 minute bars occupying the same width as one 60 minute bar, but the 30 minute bars are wider than the 60minute bars.

No clue where that stray pink bar comes from or where it gets that color.

The colors in the bars are coming from an $ex function in the marker color. It works great until I interact with the graph and it changes the colors to same timeframe but for the previous day.

colors still ok, but now the 30min bar is narrower than the 60 minute bar... ?

slide the graph right and bang, the colours change to yesterday's

As well as understanding what's going on with the colors, I would like to align the bar's left edge with the start of the hour. When I press autoscale, I am currently getting a useful timeframe for view, but autoscale is also changing the colors to yesterday again.

[deltamelter]

Managed to fudge the bars to overlap as I envisaged, but the hourly bar "starts" half an hour "early".
Unfortunately don't seem to be able to adjust the position of the stacked hourly bars 😞

[dbuezas]

Cool, you found it then :)

Now if I can only understand where those duplicated last entries come from 😵‍💫

Mabe this? https://github.com/dbuezas/lovelace-plotly-graph-card?tab=readme-ov-file#extend_to_present

[deltamelter]

No that didn't change anything, but thanks to get('entities') tip, I noticed that show_value somehow duplicates the last entry in its own texttemplate entity . So I can get rid of the duplicate last entry by disabling that.

    show_value: false
    

I guess this is supposed to make the last value available for the texttemplate. Is that a bug that it displays an additional bar?

[dbuezas]

Oh, I see. show_value is for scatter plots only

[deltamelter]

I got it from show and tell examples and , thought it was necessary part of showing the text on top of the bars.
Maybe add a note in the readme on that one... 😀
Thanks for the help. just some minor formatting tweaks and I'm happy 🥳

[dbuezas]

True, I'll add a comment