Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Fix doughnut bug

Browse Source
This commit is contained in:
Adina Țeudan 2020-10-19 18:44:59 +03:00
parent 3ba4afaa73
commit 2b44706214
2 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
View File

@ -6,8 +6,8 @@
attr.r="{{radius}}"
[class]="value.color"
attr.stroke-width="{{strokeWidth}}"
attr.stroke-dasharray="{{adjustedCircumference}}"
attr.stroke-dashoffset="{{calculateStrokeDashOffset(value.value, circumference)}}"
attr.stroke-dasharray="{{circumference}}"
attr.stroke-dashoffset="{{calculateStrokeDashOffset(value.value)}}"
fill="transparent"
attr.transform="{{returnCircleTransformValue(i)}}" />
</g>

20
apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
View File

@ -16,7 +16,6 @@ export class SimpleDoughnutChartComponent implements OnChanges {
@Input() subtitle: string;
@Input() config: DoughnutChartConfig[] = [];
@Input() angleOffset = -90;
@Input() radius = 85;
@Input() strokeWidth = 20;
@Input() direction: 'row' | 'column' = 'column';
@ -37,10 +36,6 @@ export class SimpleDoughnutChartComponent implements OnChanges {
this.size = this.strokeWidth+(this.radius * 2) ;
}
get adjustedCircumference() {
return this.circumference;
};
get circumference() {
return 2 * Math.PI * this.radius;
};
@ -50,18 +45,21 @@ export class SimpleDoughnutChartComponent implements OnChanges {
};
calculateChartData() {
const newData = [];
let angleOffset = -90;
this.config.forEach((dataVal) => {
const data = {
degrees: this.angleOffset,
degrees: angleOffset,
}
this.chartData.push(data)
this.angleOffset = this.dataPercentage(dataVal.value) * 360 + this.angleOffset;
newData.push(data)
angleOffset = this.dataPercentage(dataVal.value) * 360 + angleOffset;
})
this.chartData = newData;
}
calculateStrokeDashOffset(dataVal, circumference) {
const strokeDiff = this.dataPercentage(dataVal) * circumference
return circumference - strokeDiff;
calculateStrokeDashOffset(dataVal) {
const strokeDiff = this.dataPercentage(dataVal) * this.circumference
return this.circumference - strokeDiff;
}
dataPercentage(dataVal) {