AnApprentice AnApprentice - 3 years ago 228
Javascript Question

Victory: Animating Circular Progress Bar - not rendering chart

I'm working to use Victory's charting library with React to render a Animating Circular Progress bar like so:

https://formidable.com/open-source/victory/gallery/animating-circular-progress-bar

Here is my code:



import React from 'react';
import {connect} from 'react-redux';
import {VictoryPie, VictoryAnimation, VictoryLabel} from 'victory';




class YourRatings2 extends React.Component {

constructor() {
super();
this.state = {
percent: 25, data: this.getData(0)
};
}

componentDidMount() {
let percent = 25;
}

getData(percent) {
return [{x: 1, y: percent}, {x: 2, y: 100 - percent}];
}

render() {
return (
<section className="YourRatings">
<h2>Core Skills</h2>

<div>
<svg viewBox="0 0 400 400" width="100%" height="100%">
<VictoryPie
animate={{duration: 1000}}
width={400} height={400}
data={this.state.data}
innerRadius={120}
cornerRadius={3}
labels={() => null}
style={{
data: { fill: (d) => {
const color = d.y > 30 ? "green" : "red";
return d.x === 1 ? color : "transparent";
}
}
}}
/>
<VictoryAnimation duration={1000} data={this.state}>
{(newProps) => {
return (
<VictoryLabel
textAnchor="middle" verticalAnchor="middle"
x={200} y={200}
text={`${Math.round(newProps.percent)}%`}
style={{ fontSize: 45 }}
/>
);
}}
</VictoryAnimation>
</svg>
</div>

</section>
);
}
}

const mapStateToProps = state => {
return {
};
};

export default connect(mapStateToProps)(YourRatings2);





Unfortunately, this is only rendering the text, not the full graph. see:

enter image description here

Any pointers as to what I am doing wrong? Thanks

Answer Source

I'm not an expert on this library but the example that you gave has an interval function to update this.state.data with the new percentage. You are setting initial percentage to 0 and not updating.

Setting the interval like the example or setting the initial state with the example below should fix the problem.

Example

constructor() {
  super();
  this.state = {
    percent: 25,
    data: this.getData(25)
  };
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download