Windrose Chart using BarPolar Chart

[kaijk]

UPDATED: 02 May 2024

• Fixed: Max gust speed now reflects the correct value.

UPDATED 28 April 2024

• Add: Show the maximum wind gust speed within the sample period and plot the associated direction

UPDATED(2) 16 April 2024

• Add: Annotation to show a reference direction, e.g., direction house faces
• Add: Rotation variable to allow tilting the graph so North is not at the top of the graph.
  Note the image below has a rotation: 35. The code below shows the default of 90 to make it more generic.

UPDATED 16 April 2024

• Fix: Wind bearing Cardinal Direction "bars" were were not centered on the Cardinal Directions themselves. They were offset a few degrees.
• Add: Display the Last Wind Direction and Wind Speed in the Legend text
• Change: UOM is pulled from the windspeed entity's unit_of_measurement attribute, e.g., MPH or M/S...

UPDATED 24 March 2024.

• Make better use of screen space and may be "responsive" to display sizes. HA may have something to say, though.
• Extend the Current Wind Direction marker to the larger of the maximum trace length, or 15%. This makes it show up in small percentage directions

Thanks dbuezas for the approach to use a generic function to return the "r" wind speed percentages. I applied that approach to the directional "theta" data as well.

Here we go:
...
I found a Plotly JS example to create a Wind Rose Chart based on the barpolar chart, I've created my own in HA. The challenge was to generate the arrays of wind speed and wind direction data.

The plotly barpolar chart requires arrays of wind speed percentages ("r") for various user-defined wind speed ranges, and the associated compass directions ("theta") for those wind-speed ranges. hours_to_show: defines the lookback window for the chart. Either wind speed, or wind gust sensors can be used for the windspeed data.

This implementation will (optionally) create a "Ball" at the center representing the percentage of the time that zero wind happened, since zero windspeed has no source direction.

For HA, we provide two sensors, one for wind speeds, and another for wind directions (in degrees from North).

The 'r' and 'theta' arrays come from a javascript function (see below) that processes wind speed and direction time series and returns the wind speed percentage array by cardinal direction. Directions are a static array.

[SOLVED] It would be VERY nice not to have to repeat the javascript function for each entity, and have the function callable instead from each entity.

Here is the UPDATED configuration.

type: custom:plotly-graph

config:
  displayModeBar: false
  responsive: true
layout:
  annotations:
    - text: 'House Front<br>- Rear -'
      font:
        color: purple #black
        size: 12
      arrowcolor: purple
      xref: paper
      yref: paper
      xanchor: right
      yanchor: center
      x: .85 # you just have to play with these little bits at a time. x: and y: seem to be decimal percent, while ax: an ay: maybe pixels
      y: .5 #0.08
      ax: -218
      ay: 0
      showarrow: true
      arrowhead: 0
  autosize: true
  title:
    text: "Wind Speed & Direction (1 Hour)" # For other than 1 hour, change "hours_to_show" below (and the text here!)
    font:
      color: Black
  margin:
    t: 50
    b: 25
    r: 1
    l: 1
  legend:
    orientation: v
    xanchor: right
    x: .01
    yanchor:  center
    y: .5
    font:
      color: black
      size:  10
  legendwidth: 40px
  polar:
     barmode: stack
     bargap:  .1
     radialaxis:
       color: black
       type: linear
       ticksuffix: "%"
       angle: 59.5 # the angle of the tick line showing percentages relative to horizontal
       dtick: 10
       ticklen: 0
       tickfont:
         color: black
     angularaxis:
       direction: "clockwise"
       color: black
       rotation: 82  # Tilt of the graph from horizontal. 90 puts North at the top
# How far back to compute the chart data
hours_to_show:     1
refresh_interval: 15 # seconds, (to make the Current Wind Direction trace fairly dynamic)
raw_plotly_config: true
# Define the 16 cardinal coordinate range Names
en: |-
    $ex vars.theta = ( ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'] )
# Process the raw wind speed and wind direction data into traces for the specified wind speed range
fn: |-
    $ex vars.windRose = (windDirections, windSpeeds, minSpeed, maxSpeed) => {
       /* Define the headings and degree ranges for the 16 directions
          Each heading is centered on its cardinal direction, e.g., N is centered on zero */
       const headings = [
           { label: "N",   min: 348.75, max:  11.25 },
           { label: "NNE", min:  11.25, max:  33.75 },
           { label: "NE",  min:  33.75, max:  56.25 },
           { label: "ENE", min:  56.25, max:  78.75 },
           { label: "E",   min:  78.75, max: 101.25 },
           { label: "ESE", min: 101.25, max: 123.75 },
           { label: "SE",  min: 123.75, max: 146.25 },
           { label: "SSE", min: 146.25, max: 168.75 },
           { label: "S",   min: 168.75, max: 191.25 },
           { label: "SSW", min: 191.25, max: 213.75 },
           { label: "SW",  min: 213.75, max: 236.25 },
           { label: "WSW", min: 236.25, max: 258.75 },
           { label: "W",   min: 258.75, max: 281.25 },
           { label: "WNW", min: 281.25, max: 303.75 },
           { label: "NW",  min: 303.75, max: 326.25 },
           { label: "NNW", min: 326.25, max: 348.75 }
       ];

       // Initialize headingsCount for each heading
       let   headingsCount    = headings.map(heading => 0);
       const observationCount = windDirections.length;
       // Count wind readings for each heading
       // console.log("directions", vars.windDirections);
       for (let i = 0; i < observationCount; i++) {
           const direction = windDirections[i];
           const speed     = windSpeeds[i];
           // console.log("windSpeeds", windSpeeds[i]);
           if ( (minSpeed != 0 || maxSpeed != 0) && (speed > minSpeed && speed <= maxSpeed) ) {
           // Find the corresponding heading
               const headingFound = headings.find(seg => {
                 if (seg.min < seg.max) {
                       return direction >= seg.min && direction <= seg.max;
                   } else if ( seg.min > seg.max ) {
                       return direction >= seg.min || direction <= seg.max;
                   } else {
                      // console.log("heading not found", i);
                      return false;
                   }
               });
               // Increment observation counter for the heading
               //  console.log("headingfound", headingFound);
               headingsCount[headings.indexOf(headingFound)]++;
           } else if (minSpeed == 0 && maxSpeed == 0 && speed == 0) {
               headingsCount.forEach((_, j) => headingsCount[j]++); // increment each heading element to create a zeros "circle" at the center of the windrose plot
           }
       }
       // Calculate percentages for headings
       const percentages = headingsCount.map(count => (count / observationCount) * 100);

       // console.log( "windSpeeds ",    vars.windSpeeds );
       // console.log( "HeadingsCount ", headingsCount );
       // console.log( "Percentages ",   percentages );
       return ( percentages );
    }

entities:
  # Internal entities to collect the data into arrays
  # Store arrays of wind directions and wind speeds for the hours_to_show intervals
  - entity: sensor.gw2000b_wind_direction
    internal: true
    filters:
      - resample: 15s
    dn: $fn ({ ys, vars }) => { vars.windDirections = ys }
    # store the last wind direction observation to plot the "Current" wind direction
    en: $fn ({ ys, vars }) => { vars.windDirectionsLast = ys.slice(-1) }
    # initialize an accumulator array for the total percentages at each coordinate
    gn: $ex vars.totals = Array(16).fill(0)

    # Get the windspeed data
    # Note: Gust may also be used if you have a gust entity
  - entity: sensor.gw2000b_wind_speed #gust # or, wind_speed
    internal: true
    filters:
      - resample: 15s
    dn: $fn ({ ys, vars }) => { vars.windSpeeds = ys }

    # Get the windspeed UOM from the entity's attribute
    # Note, Gust may also be used if you have a gust entity
  - entity: sensor.gw2000b_wind_speed #gust # or, wind_speed
    internal: true
    attribute: unit_of_measurement
    fn: $fn ({ ys, vars }) => { vars.uom = ys.slice(-1).toString().toUpperCase() }

  - entity: sensor.gw2000b_wind_gust
    internal: true
    filters:
      - resample: 15s
    dn: $fn ({ ys, vars }) => { vars.windGusts = ys }

# ~~~~~~~~~~
  # Collection of entities to plot based on wind speed ranges

  # To omit the "Calm" (no zero wind percentage of time "Ball"), comment out this entity
  - entity: ""
    type: barpolar
    name:  $ex `Calm (0 ${vars.uom})`
    r:     $ex vars.r = vars.windRose( vars.windDirections, vars.windSpeeds, 0, 0 )
    theta: $ex vars.theta
    an:    $ex vars.totals = vars.totals.map((a, i) => a + vars.r[i])
    marker:
      line:
        width: 0.75
        color: black
      autocolorscale: false
      color: '#CCE6FF'

  # if Not showing the above entity, set the zero (0) value below to -1 to include the last known direction in the computations (not sure why one would want to)
  # otherwise, leave it at zero to include only wind directions associated with non-zero wind speeds in the calculations.
  - entity: ""
    type: barpolar
    name:  $ex `0-2 ${vars.uom}`
    r:     $ex vars.r = vars.windRose( vars.windDirections, vars.windSpeeds, 0, 2 )
    theta: $ex vars.theta
    an:    $ex vars.totals = vars.totals.map((a, i) => a + vars.r[i])
    marker:
      autocolorscale: false
      color: '#00E626'

  - entity: ""
    type: barpolar
    name:  $ex `2-4 ${vars.uom}`
    r:     $ex vars.r = vars.windRose( vars.windDirections, vars.windSpeeds, 2, 4 )
    theta: $ex vars.theta
    an:    $ex vars.totals = vars.totals.map((a, i) => a + vars.r[i])
    marker:
      autocolorscale: false
      color: '#FFB366'

  - entity: ""
    type: barpolar
    name:  $ex `4-10 ${vars.uom}`
    r:     $ex vars.r = vars.windRose( vars.windDirections, vars.windSpeeds, 4, 10 )
    theta: $ex vars.theta
    an:    $ex vars.totals = vars.totals.map((a, i) => a + vars.r[i])
    marker:
      autocolorscale: false
      color: '#B30095'

  - entity: ""
    type: barpolar
    name:  $ex `> 10 ${vars.uom}`
    r:     $ex vars.r = vars.windRose( vars.windDirections, vars.windSpeeds, 10, 1000 )
    theta: $ex vars.theta
    an:    $ex vars.totals = vars.totals.map((a, i) => a + vars.r[i])
    marker:
      autocolorscale: false
      color: red

# Plot a marker for the last recroded windirection
   # Also plot an overlay pattern showing the most recent wind direction observation with the direction and speed shown in the legend
  - entity: ""
    type: barpolar
    base: 0
    opacity: 0.6
    # The last Bearing won't change if the wind speed drops to zero, but we want the wind speed that was associated with that bearing
    # So, find the last non-zero wind speed.
    fn: $ex vars.lastNonZeroSpeed = vars.windSpeeds.findLast((element) => element > 0)
    #name: "$ex `Last Bearing ${vars.windDirections.slice(-1)}°<br>at ${parseFloat(vars.windSpeeds.slice(-1)).toFixed(1)} ${vars.uom}`"
    name: "$ex `Last Wind Bearing<br>${vars.windDirections.slice(-1)}° at ${parseFloat(vars.lastNonZeroSpeed).toFixed(1)} ${vars.uom}`"
    # make the current (last) bar the maximum of the largest bar, or expand it to 15 percent to make it always visible
    r: $ex vars.r = vars.windRose( vars.windDirectionsLast, [1], 0, 1000 ).map((a) => a * Math.max(Math.max(...vars.totals), 15) / 100)
    theta: $ex vars.theta
    marker:
      autocolorscale: false
      line:
        width: 0.75
        color: black
      pattern:
        fillmode: replace
        shape: "+"
        bgcolor: lightgrey
        fgcolor: black

# Plot a marker for the direction of the maximum wind gust during the time window
  - entity: ""
    type: barpolar
    base: 0
    opacity: 0.6
    en: |-
      $ex vars.maxIndex = ( arr ) => {
         let maxI = 0;
         for (let i = 0; i < arr.length; i++) {
            // >= will return the last found maximum value.;
            if (parseInt(arr[i]) >= parseInt(arr[maxI])) {
               maxI = i;
           }
           // console.log("i", i, " arr[i]", arr[i], " maxI", maxI);
         }
         // console.log("windDirections", vars.windDirections);
         return maxI;
       }

    fn:  $ex vars.maxGustIndex = vars.maxIndex( vars.windGusts )
    gn:  $ex vars.maxGust      = vars.windGusts[vars.maxGustIndex]
    hn:  $ex vars.maxGustDirection = Number(vars.windDirections[vars.maxGustIndex])
    r:   $ex vars.r = vars.windRose( Array(1).fill(vars.maxGustDirection), [1], 0, 1000 ).map((a) => a * (Math.max(Math.max(...vars.totals), 15) / 100))
    theta: $ex vars.theta
    name: "$ex `Max Gust Bearing<br>${vars.maxGustDirection}° at ${parseFloat(vars.maxGust).toFixed(1)} ${vars.uom}`"
    marker:
      autocolorscale: false
      line:
        width: 0.75
        color: black
      pattern:
        fillmode: replace
        shape: "."
        bgcolor: lightgrey
        fgcolor: black

[dbuezas]

Wow, really cool!

It would be VERY nice not to have to repeat the javascript function for each entity,

There's a way!

type: custom:plotly-graph
fn: |
  $ex vars.the_function = (vars, minSpeed, maxSpeed)=>{
     [ the code here]
  }
entities:
  - entity: sensor.gw2000b_wind_direction
     r: "$ex vars.the_function(vars, 0, 0)"
  - entity: sensor.gw2000b_wind_direction
     r: "$ex vars.the_function(vars, 0, 5)"
...

There's actually another option too using entity defaults.

[kaijk]

VERY Nice. I'll play with your suggestions for a reusable function, and I'll repost the JS after the weekend.

In the meantime, I found a couple of bugs in my javascript function,

N and NE are duplicated at the end of the headings constant which makes all the compass intervals wrong (18 vs 16 intervals). It duplicates the first two slices and/so the slices are too narrow. That, and the one for statement should not use observationCount, but headings.length. Not fatal, either one, but annoying. I'll repost the corrected JS after I've tested and integrated your suggestions.

Thank your for all your help and guidance. I bought a JS book for Christmas, but it focused on building web pages and not on JS methods and arrow shortcuts.

Commentary
ChatGPT got me a ways into this code, but it bollixed up the headings constant with 18 and not 16 compass directions. My bad for not finding it before posting. It also failed to figure out how to treat zero wind speed readings differently from non-zero ones despite changes to my prompt. So, I added that functionality in later. Maybe no one else has thought to make a zero ball at the center of a windrose for the percentage of zero (directionless) wind speeds.

AI will not yet replace us, but, frankly, it provided a very useful and concise foundation for the ultimate function after I provided and edited about 15 prompts. That foundation would have been much harder for me to create without said help, I am a non-native JS speaker.
/commentary

[dbuezas]

Great!
Oh yes, it's like having a very knowledgeable colleague with all the time in the world.
Cool to hear you're learning JavaScript!

And thanks for sharing your progress, someone else (or was it you?) Was asking how to do this in the Home Assistant form the other day

[kaijk]

I Revised the first post to include fixes and to incorporate your suggestions to make the javascript function generic.

[wormuths]

I really want to steal this... LOL But when I place this code I'm attaching into the yaml editor of the plotly card, I get "bad indentation of a mapping entry (13-4).

Can you look at what is wrong here?

Wind.txt

The code function isn't working for this, so pardon the text file... I'm not sure how else to do it cleanly.

Thanks!

[dbuezas]

Try the code above again, i updated it

[wormuths]

I certainly appreciate all the help. There is a pretty steep learning curve to all this for us "non-coders". Those of you who volunteer your efforts are never appreciated enough, it seems.

Your changes are progress. It looks cleaner after your updates than the original post did, as in nothing is cut off now by the legend like the initial code. I still got the bad indentation error in this area though...

$ex vars.theta = ( ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'] )

That's line 13 in the code. If I increase two spaces on that line the chart will display, but the labels don't show. Instead it shows the degrees, like so...

I'm not sure what is breaking the labels with that indentation issue..

[dbuezas]

@kaijk
do you know what the issue may be?

[kaijk]

The "wind.txt" file @wormuths attached above is missing all the // comment characters at the head of all the javascript comments (I'm not sure why or if the editor does that somehow).

Also, my bad, I'd added a comment incorrectly at the last minute. I have just deleted the comment within the en: function in the first post above.

// Define the cardinal coordinate array

Its after the |- but before the $ex so not within the javascript. That messes up the array and should not be there and is why the coordinates show as they do.

As a bonus, I added the following to the layout:

      legend:
        orientation: h

This puts the legend at the bottom of the chart. (Options are h and v).

The code in the first post should work now.

[wormuths]

Thank you so much @dbuezas this works. I appreciate your help with this, and for all the hard work you've done on this integration. I also appreciate all the recent help you've given me. I found Plotly trying to replace Apexcharts, and there are a few cards I'd like to get carried over so I can get Apex off my system entirely. I have no code experience, so I'll likely ask a lot of dumb questions until I get the basic reusable cards figured out.

So yes, the editor must remove all the comments, which is why things are missing from the text file. I've also noticed that if I hashtag comment something out in the yaml and save, the commented out lines are removed. Here's what I got now...

One last question. Where is the legend pulling those colors? I would change it so green is the most gentle breeze, and it progresses to yellow and red the more dangerous it becomes.

[dbuezas]

Yey!
But thank @kaijk instead, he created this plot and answered with the fix :)

[wormuths]

Ah, yes... I saw you first at the top of the reply and missed that somehow... So certainly, thanks @kaijk .... for the card and the help!

[kaijk]

One last question. Where is the legend pulling those colors? I would change it so green is the most gentle breeze, and it progresses to yellow and red the more dangerous it becomes.

I've updated the first post to add specific colors by including the following after each theta: entry:

  marker:
    autocolorscale: false
    color: blue # your choice

Feel free also to change the wind speed ranges. Leave (0, 0) if you with to have the no-wind ball at the center and follow the convention that the minimum for next range starts with the maximum of the prior range. You can also add more ranges by copying the trace definition. The maximum for the last (highest) range needs to be a number larger than any wind you will see. e.g. 1000.

Thanks for your interest in, debugging, and suggesting enhancements to my example!

[wormuths]

Thank you so much!

This is what I have now...

I modified it so that up to 2 MPH replaces "No Wind", since there probably is never really NO wind. So anything up to 2 MPH is just normal, gentle breezes. After that, it gets progressively more dangerous from green to yellow to red. Much more intuitive in my opinion at a quick glance.

I only have to deal with my ongoing theme issues, and try to get these labels in the legend to use black text. One thing at a time. ;-)

Thanks again to both of you...

[kaijk]

I only have to deal with my ongoing theme issues, and try to get these labels in the legend to use black text. One thing at a time. ;-)

Add this:

  layout:
    legend:
      orientation: h
      font:
        color: black

See: https://plotly.com/javascript/reference/barpolar/#barpolar-legend

[wormuths]

Outstanding!

I appreciate everything. I'm sure I'll be around asking more newbie questions, but once I figure out the basic reusable components, I will be better able to tinker and learn.

[wormuths]

Added this, because the zoom functions are pretty unnecessary for this card...

config:
displayModeBar: false

[kaijk]

The code in the first post is revised to:

• Hide the modeBar
• Add margins
• Add one more speed range
• Change the colors
• Add a Marker showing the Last Observed Wind Direction

[wormuths]

Awesome, thanks!

Yes, I tried the title within layout, but I didn't like the spacing it resulted in. When it's put there, it squishes right against the labels of the chart... But this is so much better than where I started. Hopefully, it's a copy/paste to help others.

FWIW... I use conditional cards to display various weather things. I have helpers defined for each alert type from the national weather service, and (with help) have made automations that activate the helpers when each type of alert comes in. So in this case, if NWS issues a wind advisory or warning, I can have a card appear that elaborates on the wind. I can also do other things, like turn the yard lights on if it's dark to see if branches are falling, etc... It's nice to have options. I'm going to make another one of these cards using the FORECAST wind bearing and speeds, so there will be another beside this one showing what is expected to come in the future.

Pretty sweet. Thanks for all your help!

[amordicus]

@kaijk could you tell me what you use as an editor? I find the card editor annoying with js and as mentioned it removes comments.
I'm new to javascript and home assistant, I'm finding that card editor is not helping me to learn :O) Thanks for your great code example.

[kaijk]

I ssh using PUTTY into my HA NUC and use vim (a variant of vi) to edit the HA text files. I'm kind of old school and should probably share the HA directory and use notepad+ or some other visual editor on windows.

The following is the contents of the .vimrc file to add to your ~/ (home) directory. (cd ~/). You can use nano to create the file, or just use nano instead for editing if you like.

colo delek
syntax on
set showmode
set ignorecase
set autoindent
set tabstop=2 shiftwidth=2 expandtab

[amordicus]

Thanks for the detailed information. I like the idea.

[kaijk]

This prompted me to set up a samba share of the HA config directory on my NUC that runs ubuntu. I used the steps here. I found that I needed to add:

ntlm auth = true

to the [global] section of /etc/samba/smb.conf for windows (at least) to be able to log in to the share to avoid an "unknown user/password" error.

I can now edit my HA yaml files using notepad+ on Windows.

[wormuths]

Can one of you put two of these cards side-by-side in a grid card or horizontal stack and see if you are able to reproduce a strange issue I'm having? The cards wiggle and shrink until they are unreadable.

[kaijk]

Try explicitly defining a width: and/or height: for the card. Shrinking/growing cards seems to happen across HA Front End components for some reason.

[dbuezas]

@wormuths I made an automated index of discussions https://github.com/dbuezas/lovelace-plotly-graph-card/blob/master/discussion-index.md

Is not exactly what you asked for, but at least (hopefully) easier to find examples

[wormuths]

@wormuths I made an automated index of discussions https://github.com/dbuezas/lovelace-plotly-graph-card/blob/master/discussion-index.md

And I thought I'd have to spend weeks trying to help you with that. I think that sums up our skill levels pretty well... LOL

That does help, thank you.

[dbuezas]

Hehe, I thought the same, but then remembered github has an API to grab content :)
If you ever want to do a contribution (e.g removing some of the irrelevant images from that page), you can always click the edit icon on the top left of a file

You can do changes to that markdown file (same format as these comments) and then open a pull request all from the web ui of github.

[kaijk]

Updated the code to show a more prominent Current Wind Direction Marker, to refresh more frequently, and to work better for both my mobile and my desktop Weather dashboard displays.

(I'm getting a better sense of JS itself and how it works in Plotly (HA). I have always needed a real world project to learn a programming language. Just ask my poor Fortran professor and the CS Lab staff who fed my punch cards into the reader.)

[kaijk]

Updated code to show "current" wind speed and direction and some other changes/fixes. See First Post.

[kaijk]

Thank you for the kind words. I haven't been able to get Annotations to work and there are no examples in the README. However, you can rotate the plot. In your example NW is roughly straight off the front of the house. You can put NW at the top of the chart by adding a rotation: parameter to the layout. Each coordinate is 22.5* wide and the default rotation is 90* to put North at the top. So, 90-(22.5*2) = 45. Thus, the front of the house would be notionally at the bottom of the chart.

My house faces eight degrees east of north. I now have a rotation: 82 in my code. THANKS!

layout:
...
  polar:
...
    angularaxis:
      direction: "clockwise"
      color: black
      rotation: 45 # Puts NW at the top of the chart

P.S. It looks like polar charts don't support annotations but it is possible with a trick using subplots. I'll play with that. Who knows?

[dbuezas]

Annotations do work if you have them being relative to the "paper" coordinate system (x=0 is the far left, x=1 is the far right, y=0 is bottom, y=1 is top)

layout:
  annotations:
    - x: .5
      y: .5
      text: THIS IS THE CENTER
      ax: -30
      ay: -40

[kaijk]

Darn, I was missing the dreaded - in the yaml for a single element annotations list.

layout:
  annotations:
    - text: <b>House Front</b>
      font:
        color: black
        size: 12
      xref: paper
      yref: paper
      xanchor: right
      yanchor: center
      x: 0.20 # you just have to play with these little bits at a time.
      y: 0.12
      ax: -40
      ay: 35
      showarrow: true
      #arrowhead: 0

[wormuths]

I pulled a little from both and it worked out simple and nice. The chart is rotated to align the graph with the front of the house being at the bottom.

Isn't code great when you know how to do it? LOL

If you're just looking for twisted little ways to practice, I'll tell you what I would do if I knew how. What if there were a way to show the wind continue through the center point of reference by mirroring the bars opposite of the center? If this mirror was shown, say, 90% transparent it would effectively show the direction the wind headed to, after passing you, theoretically standing in the center.

So that 15mph wind from the north hits you standing in the center, and the bar repeats in a transparent color on the south side.

I think of that because I see this being really handy in figuring out where you might want to dump the yard leaves. What areas of your yard get the least wind could be looked at over long periods. Then you could determine that the lightest winds were say, to the right side of your house.

If you want crazy ideas to challenge yourself, I'm your guy. Otherwise, tell me to bug off. LOL

[wormuths]

But thinking this through, it wouldn't work well.

If the wind reversed direction the "shadows" would overlap the readings... Probably not practical.

[kaijk]

I added a marker showing the maximum wind gust and its direction. This snippet added at the end of the yaml should make it work if you are not using the full (updated) configuration above.

  - entity: sensor.gw2000b_wind_gust
    internal: true
    filters:
      - resample: 15s
    dn: $fn ({ ys, vars }) => { vars.windGusts = ys }

# Plot a marker for the direction of the maximum wind gust during the time window
  - entity: ""
    type: barpolar
    base: 0
    opacity: 0.6
    # See: https://stackoverflow.com/questions/11301438/return-index-of-greatest-value-in-an-array
    # Note: this will return the FIRST index that matches the maximum windspeed. will it be unique and "the" right "last" direction? Hard to say. TBD
    fn: "$ex vars.maxGustIndex = vars.windGusts.reduce((iMax, x, i, arr) => x > arr[iMax] ? i : iMax, 0)"
    gn:  $ex vars.maxGust      = vars.windGusts[vars.maxGustIndex]
    # slice below creates an array, [1] is just a nominal array to help with the length of the marker
    hn:  $ex vars.maxGustDirection = vars.windDirections[vars.maxGustIndex].slice(-1)
    r:   $ex vars.r = vars.windRose( vars.maxGustDirection, [1], 0, 1000 ).map((a) => a * (Math.max(Math.max(...vars.totals), 15) / 100))
    theta: $ex vars.theta
    name: "$ex `Max Gust Bearing<br>${vars.maxGustDirection}° at ${parseFloat(vars.maxGust).toFixed(1)} ${vars.uom}`"
    marker:
      autocolorscale: false
      line:
        width: 0.75
        color: black
      pattern:
        fillmode: replace
        shape: "."
        bgcolor: lightgrey
        fgcolor: black

[kaijk]

I just discovered that since HA does not write data to the DB, except when data change that arrays of direction and wind speed entities will unlikely align on indexes. I'll need to figure out how to refactor the code to use time xs as the reference, not the array index.

[dbuezas]

Search for resample in the readme

[kaijk]

I was using resampling, but I now know better what it really does. Problem was my Max function, strings vs numbers.

HA returns strings. I hadn't cast the array to Number()s so my erstwhile Max function thought that 9xxx values were always the maximum. That'll auger a spacecraft directly into Mars.

Now the code also finds the most recent maximum value, not the first. Maybe the wind direction has changed from first to last. Code in first post is updated.