diff --git a/src/components/CountryPerformanceOnRisk.js b/src/components/CountryPerformanceOnRisk.js index 548a4c5..e5c0040 100644 --- a/src/components/CountryPerformanceOnRisk.js +++ b/src/components/CountryPerformanceOnRisk.js @@ -23,37 +23,55 @@ export class CountryPerformanceOnRisk extends Component { } - computeState() { + computeState(props=this.props) { let state = { - data: this.props.data, - graphOptions: this.props.graphOptions, - countries: this.props.countries, - defaultCountry: this.props.defaultCountry, + data: props.data, + graphOptions: props.graphOptions, + countries: props.countries, + defaultCountry: props.defaultCountry, } return state } componentDidMount() { - this.setState(this.computeState()) + this.setState(this.computeState(this.props)) }; + componentWillReceiveProps(nextProps) { + this.setState(this.computeState(nextProps)) + } updateValue1(newCountry) { - + if (newCountry) { + this.props.dispatch({type: "addRemoveLine", id: newCountry.value + '1', idx: 2}) + } else { + this.props.dispatch({type: "addRemoveLine", id: newCountry, idx: 2}) + } this.setState({ selected1: newCountry + }) } updateValue2(newCountry) { + if (newCountry) { + this.props.dispatch({type: "addRemoveLine", id: newCountry.value + '1', idx: 3}) + } else { + this.props.dispatch({type: "addRemoveLine", id: newCountry, idx: 3}) + } this.setState({ selected2: newCountry }) } updateValue3(newCountry) { + if (newCountry) { + this.props.dispatch({type: "addRemoveLine", id: newCountry.value + '1', idx: 4}) + } else { + this.props.dispatch({type: "addRemoveLine", id: newCountry, idx: 4}) + } this.setState({ selected3: newCountry }) @@ -123,7 +141,9 @@ export class CountrySelect extends Component { const mapStateToProps = (state) => { return { - data : state.entities.data, + data: state.entities.data.filter(data => { + return state.graphs[1].dataToshow.indexOf(data.id) !== -1 + }), graphOptions: state.entities.layouts, countries: state.entities.countries, defaultCountry: state.defaultCountry diff --git a/src/index.js b/src/index.js index 4dcacbb..7ddb33e 100644 --- a/src/index.js +++ b/src/index.js @@ -11,32 +11,54 @@ let xValues = ['2017-01-01','2017-01-08','2017-01-15']; let reduxStore = { graphs: { 1: { - title: 'DDOS-graph', - dataToshow: ['t1','t2'], + title: 'dns-graph', + dataToshow: ['uk1','t1'], graphLayout: ['l1'] } }, entities: { data: [ { + id: 'uk1', x: xValues, y: [2,4,6], - name: 'example N1', + name: 'United Kingdom', type: 'scatter' }, { + id: 't1', x: xValues, y: [1,4,7], - name: 'example N2', + name: 'Global', + type: 'scatter' + }, + { + id: 'us1', + x: xValues, + y: [6,3,2], + name: 'United States', + type: 'scatter' + }, + { + id: 'ge1', + x: xValues, + y: [5,12,1], + name: 'Georgia', + type: 'scatter' + }, + { + id: 'kz1', + x: xValues, + y: [0,12,10], + name: 'Kazakstan', type: 'scatter' } ], layouts: { l1: { - title : 'Global DDOS potential', + title : 'Open DNS', height: 600, xaxis: { - title: '*This chart assumes an average 1 mbit/sec Internet connection for every IP address.', gridcolor: 'transparent', }, yaxis: { @@ -49,12 +71,31 @@ let reduxStore = { {value: 'uk', label: 'United Kingdom' }, {value: 'us', label: 'United States' }, {value: 'ge', label: 'Georgia' }, + {value: 'kz', label: 'Kazakhstan' } ] }, defaultCountry: {value: 'uk', label: 'United Kingdom' } } const reducer = function(state, action) { + // makes new copy of list, for not to mutate previous state + let newDataToShow = state.graphs[1].dataToshow + newDataToShow[action.idx] = action.id + switch(action.type) { + case 'addRemoveLine': + return {...state, + graphs: { + 1: { + title: 'dns-graph', + dataToshow: Object.assign( + [], + state.graphs[1].dataToshow, + newDataToShow + ), + graphLayout: ['l1'] + } + } + } default: return state }