<template>
  <text :x="point.x" :y="point.y">{{ stat.label }}</text>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import chartService from '@/services/ChartService'
import IStat from '@/models/IStat'
import IPoint from '@/models/IPoint'

@Component
export default class AxisLabel extends Vue {
  @Prop({ type: Object, required: true })
  public stat!: IStat
  @Prop({ type: Number, required: true })
  public index!: number
  @Prop({ type: Number, required: true })
  public total!: number

  public get point(): IPoint {
    return chartService.valueToPoint(
      this.stat.percent + 10,
      this.index,
      this.total
    )
  }
}
</script>

