Vue.component( 'counter-chart', { template: `

{{infolabel}}

`, props: ['data', 'labels', 'infolabel', 'infocollor'], data() { return { datasets: '', }; }, computed: { getTotal(){ return this.data[1]??0 }, getTotalData(){ return this.data[0]??0 }, }, methods: { polarToCartesian(centerX, centerY, radius, angleInDegrees) { var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0; return { x: centerX + (radius * Math.cos(angleInRadians)), y: centerY + (radius * Math.sin(angleInRadians)) }; }, describeArc(x, y, radius, startAngle, endAngle) { var start = this.polarToCartesian(x, y, radius, endAngle); var end = this.polarToCartesian(x, y, radius, startAngle); var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; var d = [ "M", start.x, start.y, "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y ].join(" "); return d; } }, mounted() { let totalrows=this.data[0]??0//total records let total=this.data[1]??0// presenting records var totals = ((total/totalrows)*100) if (totals>99){ totals=359 }else{ totals = (360/(100/totals)) } this.datasets = this.describeArc( 126,126, 94, 0, Math.round(totals)) } });