AxisRadial.svelte component

<!--
  @component
  Generates an SVG radial scale, useful for radar charts.
 -->
<script>
  import { getContext } from 'svelte';

  const { width, height, xScale, extents, config } = getContext('LayerCake');

  /** @type {Number} [lineLengthFactor=1.1] - How far to extend the lines from the circle's center. A value of `1` puts them at the circle's circumference. */
  export let lineLengthFactor = 1.1;

  /** @type {Number} [labelPlacementFactor=1.25] - How far to place the labels from the circle's center. A value of `1` puts them at the circle's circumference. */
  export let labelPlacementFactor = 1.25;

  $: max = $xScale(Math.max(...$extents.x));

  $: lineLength = max * lineLengthFactor;
  $: labelPlacement = max * labelPlacementFactor;

  $: angleSlice = (Math.PI * 2) / $config.x.length;

  /** @param {Number} total
   *  @param {Number} i */
  function anchor(total, i) {
    if (i === 0 || i === total / 2) {
      return 'middle';
    } else if (i < total / 2) {
      return 'start';
    }
    return 'end';
  }
</script>

<g transform="translate({$width / 2}, {$height / 2})">
  <circle cx="0" cy="0" r={max} stroke="#ccc" stroke-width="1" fill="#CDCDCD" fill-opacity="0.1"
  ></circle>
  <circle cx="0" cy="0" r={max / 2} stroke="#ccc" stroke-width="1" fill="none"></circle>

  {#each $config.x as label, i}
    {@const thisAngleSlice = angleSlice * i - Math.PI / 2}
    <line
      x1="0"
      y1="0"
      x2={lineLength * Math.cos(thisAngleSlice)}
      y2={lineLength * Math.sin(thisAngleSlice)}
      stroke="#ccc"
      stroke-width="1"
      fill="none"
    >
    </line>
    <text
      text-anchor={anchor($config.x.length, i)}
      dy="0.35em"
      font-size="12px"
      transform="translate({labelPlacement * Math.cos(thisAngleSlice)}, {labelPlacement *
        Math.sin(thisAngleSlice)})">{label}</text
    >
  {/each}
</g>