RadialProgressBar component

RadialProgressBar.spec.ts

import { mount } from '@vue/test-utils'
import RadialProgressBar from './RadialProgressBar.vue'

let wrapper: any

describe('ui/primitives/RadialProgressBar', () => {
  beforeEach(() => {
    wrapper = mount(RadialProgressBar, {
      propsData: {
        size: 18,
        width: 4,
        value: 50
      },
      attachToDocument: true
    })
  })

  it('should render correct contents', () => {
    expect(wrapper.classes()).toContain('progress')
    expect(wrapper.find('.progress__meter').is('circle')).toBe(true)
    expect(wrapper.find('.progress__value').is('circle')).toBe(true)
    expect(wrapper.attributes().width).toBe(String(wrapper.vm.$props.size))
    expect(wrapper.attributes().height).toBe(String(wrapper.vm.$props.size))
  })

  it('should render correct ".progress__meter" elements', () => {
    const circle = wrapper.find('.progress__meter')
    expect(circle.attributes().cx).toBe(String(wrapper.vm.center))
    expect(circle.attributes().cy).toBe(String(wrapper.vm.center))
    expect(circle.attributes().r).toBe(String(wrapper.vm.radius))
    expect(circle.attributes()['stroke-width']).toBe(String(wrapper.vm.width))
  })

  it('should render correct ".progress__meter" elements', () => {
    const circle = wrapper.find('.progress__value')
    expect(circle.attributes().cx).toBe(String(wrapper.vm.center))
    expect(circle.attributes().cy).toBe(String(wrapper.vm.center))
    expect(circle.attributes().r).toBe(String(wrapper.vm.radius))
    expect(circle.attributes()['stroke-width']).toBe(String(wrapper.vm.width))
    expect(circle.attributes()['stroke-dasharray']).toBe(String(wrapper.vm.circumference))
    expect(circle.attributes()['stroke-dashoffset']).toBe(String(wrapper.vm.completed))
  })

  it('should correct computed "center"', () => {
    expect(wrapper.vm.center).toEqual(wrapper.vm.$props.size / 2)
  })

  it('should correct computed "radius"', () => {
    expect(wrapper.vm.radius).toEqual(wrapper.vm.center - wrapper.vm.$props.width + 1.5)
  })

  it('should correct computed "circumference"', () => {
    expect(wrapper.vm.circumference).toEqual(2 * Math.PI * wrapper.vm.radius)
  })

  it('should correct computed "completed"', () => {
    const completed = wrapper.vm.circumference * (1 - Number(wrapper.vm.$props.value) / 100)
    expect(wrapper.vm.completed).toEqual(completed)
  })
})

RadialProgressBar.vue

<template>
  <svg class="progress"
       :width="size"
       :height="size">
    <circle class="progress__meter"
            :cx="center"
            :cy="center"
            :r="radius"
            :stroke-width="width" />
    <circle class="progress__value"
            :cx="center"
            :cy="center"
            :r="radius"
            :stroke-width="width"
            :stroke-dasharray="circumference"
            :stroke-dashoffset="completed" />
  </svg>
</template>

<script lang="ts">
  import script from './script'
  export default script
</script>

<style lang="scss" scoped>
  @import 'styles';
</style>

script.ts

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class RadialProgressBar extends Vue {
  @Prop({ type: Number, required: true })
  size: number
  @Prop({ type: Number, required: true })
  width: number
  @Prop({ type: [String, Number], required: true })
  value: number

  get center(): number {
    return this.size / 2
  }

  get radius(): number {
    return this.center - this.width + 1.5
  }

  get circumference(): number {
    return 2 * Math.PI * this.radius
  }

  get completed(): number {
    const progress = Number(this.value) / 100
    const dashoffset = this.circumference * (1 - progress)

    return dashoffset
  }
}

styles.scss

.progress {
  transform: rotate(-90deg);
}

.progress__meter,
.progress__value {
  fill: none;
}

.progress__meter {
  stroke: #d1d6e5;
}

.progress__value {
  stroke: $blue;
}