From 3f5d97f5469a7dabe9253e1b0fff0741b6a9a17b Mon Sep 17 00:00:00 2001 From: Eleonora Lester Date: Tue, 20 Feb 2018 14:55:56 -0300 Subject: [PATCH] (RF) Validate Date from URL param --- src/Components/Chart/Chart.js | 16 ++++++---------- src/Components/helper.js | 9 ++++++--- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/Components/Chart/Chart.js b/src/Components/Chart/Chart.js index 7122cc8..8acb2e9 100644 --- a/src/Components/Chart/Chart.js +++ b/src/Components/Chart/Chart.js @@ -3,7 +3,10 @@ import {Axes, Bars, PlayPause} from '../index' import ResponsiveWrapper from '../ResponsiveWrapper/ResponsiveWrapper' import pigData from '../../wild-pig-data.json' import {scaleBand, scaleLinear} from 'd3-scale' -import {getMinYear, getParamValue, getMaxYear, getYearsFromData, roundNumberWithTwoDecimals} from '../helper' +import { + getMinYear, getParamValue, getMaxYear, getYearsFromData, roundNumberWithTwoDecimals, + validateYear +} from '../helper' import {Line} from 'rc-progress' import {colors} from '../../config/constants' import * as qs from 'query-string' @@ -36,15 +39,11 @@ class Chart extends Component { const {minYear} = this.state const {paused, year} = qs.parse(this.props.location.search) - /* First check if year has been passed and is an integer */ - const yearParamValue = parseInt(year && getParamValue(year)) - - /* If it's a valid year value and more or eq to the minimum year, assign it, otherwise assign minimum year from data */ - /* This is to validate year=2 for example */ - const yearFrom = yearParamValue && (yearParamValue >= minYear) ? yearParamValue : minYear + const yearFrom = validateYear(year, minYear) /* 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}) } @@ -92,14 +91,11 @@ class Chart extends Component { // scaleBand type const xScale = this.xScale .padding(0.5) - // scaleBand domain should be an array of specific values - // in our case, we want to use movie titles .domain(data.map(d => d.island)) .range([margins.left, svgDimensions.width - margins.right]) // scaleLinear type const yScale = this.yScale - // scaleLinear domain required at least two values, min and max .domain([0, maxValue]) .range([svgDimensions.height - margins.bottom, margins.top]) diff --git a/src/Components/helper.js b/src/Components/helper.js index 3003405..d0b9c9a 100644 --- a/src/Components/helper.js +++ b/src/Components/helper.js @@ -1,11 +1,14 @@ export const getMinYear = data => Math.min(...data.map(d => d.year)) export const getMaxYear = data => Math.max(...data.map(d => d.year)) export const getParamValue = param => param.substring(param.indexOf("=") + 1).toString() -export const validateYear = year => { +export const validateYear = (year, minValidYear) => { /* First check if year has been passed and is an integer */ const yearParamValue = parseInt(year && getParamValue(year)) - /* If it's a valid year value, return it, otherwise get the minimum year from data */ - return yearParamValue ? yearParamValue : getMinYear(this.data) + + /* If it's a valid year value and more or eq to the minimum valid year, return it + * otherwise return minimum valid year + * Validates year=2 when min year is 2000 for example */ + return yearParamValue && (yearParamValue >= minValidYear) ? yearParamValue : minValidYear } export const getYearsFromData = data => { return data.reduce((acc, val) => {