Svelte Simple SparkLine Component

SparkLine.html

<svg viewBox="0 0 {maxWidth} {maxHeight}"
     style="width: {width}; height: {height};vertical-align: middle;margin-top: {marginTop};"
     preserveAspectRatio="none">
    {#each data as value, index}
      <path stroke="{ (value/maxHeight) * 100 > 80 ? colorDanger : color}"
            stroke-width="{strokeWidth}"
            d="M{(strokeWidth + 2) * index + strokeWidth/2} 100 V{ maxHeight - (value/maxHeight) * 100 }"
      />
    {/each}
</svg>

<script>
  export default {
    data() {
      return {
        data: [],
        maxWidth: 100,
        maxHeight: 100,
        height: '1.25rem',
        marginTop: '-0.625rem',
        width: '80px',
        strokeWidth: 8,
        color: '#4caf50',
        colorDanger: '#f44336',
      };
    },
  };
</script>

Stoked to try this out.

Sorry, it's for Svelt2 but I can port it for Svelte3.

No stress. Ended up porting a d3 example to svelte 3. Thanks.