Annotations.html.svelte component

<!--
  @component
  Adds text annotations based on a config object that has CSS styles as fields.
 -->
<script>
  const vals = ['top', 'right', 'bottom', 'left'];

  /** @type {Array} annotations - A list of annotation objects. It expects values of `top`, `right`, `bottom` and `left` whose values are CSS values like `'10px'` or `'5%'` that will be used to absolutely position the text div. See the [Column](https://layercake.graphics/example/Column) chart example for the schema and options. */
  export let annotations = [];

  /** @type {Function} [getText=d => d.text] - An accessor function to get the field to display. */
  export let getText = d => d.text;

  $: fillStyle = d => {
    let style = '';
    vals.forEach(val => {
      if (d[val]) {
        style += `${val}:${d[val]};`;
      }
    });
    return style;
  };
</script>

<div class="layercake-annotations">
  {#each annotations as d, i}
    <div class="layercake-annotation" data-id={i} style={fillStyle(d)}>{getText(d)}</div>
  {/each}
</div>

<style>
  .layercake-annotation {
    position: absolute;
  }
</style>