Allow default background / icon for waffle charts

[gilesdring]

It's sometimes useful to be able to provide a default background image, rather than having to artificially put in a second series. Ideally this would reuse the standard 'series' way of defining colour, etc.

[slowe]

@gilesdring I'm not sure what you mean by a default background image. Do you have an example?

[gilesdring]

The specific use case is here: https://open-innovations.github.io/jrf-insight/spotlight/economic_insecurity/E12000003/

I am providing a percentage for one series (0 to 100), which I can successfully style as seen above. There doesn't seem to be any way of styling the grey squares (i.e. the remainder) aside from globally changing the chart background colour. I assume that this would change the background for any other charts as well.

What I'm imagining is that for a waffle chart I am able to optionally provide a colour / icon for the 'remainder' series, which would then be used for any squares which were just padding.

As a workaround for this I did try creating a series which showed 100-x (i.e. the remainder), but ran into difficulties with rounding, IIRC - it was relatively late, so I may have been making dumb errors.

[slowe]

@gilesdring Yes, you are correct that setting the default background for the whole site will change other charts. I'm working on doing what you want. If the final item in the series array doesn't have a value set, it'll use that as the defaults for the empty/remainder grid items.

[gilesdring]

That seems like a great solution - thanks @slowe!

[slowe]

I think the new example 14 does what you want. The last series item (the second, in this case) has no value set. But you can set the title, colour, tooltip, and points just as you would the other series. Things to note:

1. the empty series gets added to the legend;
2. you won't have access to the "remainder" value if you build a tooltip for this empty series.

series:
  - value: universal credit
    title: Universal Credit
    colour: '#ce0058'
    tooltip: uc tooltip
    points:
      marker:
        svg: >-
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
          fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16
          16"><path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0
          0-6 3 3 0 0 0 0 6Z"/></svg>
  - title: Unknown
    colour: '#bbbbbb'
    points:
      marker:
        svg: >-
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
          fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16
          16"><path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0
          0-6 3 3 0 0 0 0 6Z"/></svg>

[slowe]

A slightly nicer example where I've made use of the outline version of that icon.

[gilesdring]

Looks brilliant - I'll see if I can get it integrated now.