ColumnStacked.svelte component

<!--
  @component
  Generates an SVG column chart. It uses the z-scale for color assignments and aassumes both `xScale` and `zScale` are ordinal scales.  It assumes your data is in a [D3 stack format](https://github.com/d3/d3-shape#stack
 -->
<script>
  import { getContext } from 'svelte';

  const { data, xGet, yGet, zGet, xScale } = getContext('LayerCake');
</script>

<g class="column-group">
  {#each $data as series, i}
    {#each series as d}
      {@const yVals = $yGet(d)}
      {@const columnHeight = yVals[0] - yVals[1]}
      <rect
        class='group-rect'
        data-id="{i}"
        x="{$xGet(d)}"
        y="{yVals[1]}"
        width={$xScale.bandwidth()}
        height="{columnHeight}"
        fill={$zGet(series)}
      ></rect>
    {/each}
  {/each}
</g>