pinafore/src/routes/_components/status/StatusPoll.html

<div class="poll" >
  <ul class="options" aria-label="Poll results">
    {#each options as option}
      <li class="option">
        <div class="option-text">{option.title} ({option.share}%)</div>
        <svg aria-hidden="true">
          <line x1="0" y1="0" x2="{option.share}%" y2="0" />
        </svg>
      </li>
    {/each}
  </ul>
</div>
<style>
  .poll {
    grid-area: poll;
    margin: 10px 10px 10px 5px;
  }

  ul.options {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li.option {
    margin: 0 0 10px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    stroke: var(--svg-fill);
    stroke-width: 5px;
  }

  li.option:last-child {
    margin: 0;
  }

  .option-text {
    word-wrap: break-word;
    white-space: pre-wrap;
    font-size: 1.1em;
  }

  svg {
    height: 2px;
    width: 100%;
    margin-top: 5px;
  }

</style>
<script>
  export default {
    computed: {
      poll: ({ originalStatus }) => originalStatus.poll,
      options: ({ poll }) => poll.options.map(({ title, votes_count: votesCount }) => ({
        title,
        share: poll.votes_count ? Math.round(votesCount / poll.votes_count * 100) : 0
      }))
    }
  }
</script>