diff --git a/README.md b/README.md index d216c99..45a319d 100755 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ The chart should have these features: ## Pending: -[ ] (FIX) When url has year param, calculate the progress percent and render progress bar from there +[ X ] (FIX) When url has year param, calculate the progress percent and render progress bar from there [ ] Make progress bar responsive diff --git a/src/Components/Chart/Chart.js b/src/Components/Chart/Chart.js index 8acb2e9..d2cb27f 100644 --- a/src/Components/Chart/Chart.js +++ b/src/Components/Chart/Chart.js @@ -35,16 +35,29 @@ class Chart extends Component { } } + calculateProgress(yearFrom) { + const {minYear, progress} = this.state + /* Need to use a correction value + 1 + * To solve 2001 - 2000 = 1 => 16,66% and should be 33,2%, + * Minimum year should be minimum percent (the result of percentPerYear), 2000 should be 16,66% */ + const value = yearFrom - minYear + 1 + return value > 0 ? value * progress : progress + } + componentWillMount() { const {minYear} = this.state const {paused, year} = qs.parse(this.props.location.search) const yearFrom = validateYear(year, minYear) + const progress = this.calculateProgress(yearFrom) + + console.log(progress) + /* Paused is a string. If paused is true, set Boolean value true, else set Boolean value false */ const isPaused = paused ? getParamValue(paused) === 'true' : false - this.setState({yearFrom, isPaused}) + this.setState({yearFrom, isPaused, progress}) } componentDidMount() {