diff --git a/src/components/time-series/TimeSeries.js b/src/components/time-series/TimeSeries.js index bd5ef26..ca7d67f 100644 --- a/src/components/time-series/TimeSeries.js +++ b/src/components/time-series/TimeSeries.js @@ -17,15 +17,16 @@ class TimeSeries extends React.Component{ this.myCanvas.height=height; this.myCanvas.width=width; +console.log("erer") drawTimeSeries(this.myCanvas,this.props.data,2,this.props.male,this.props.female,true) } componentDidUpdate(){ - if(this.current===this.props.male){ - drawTimeSeries(this.myCanvas,this.props.data,2,this.props.male,this.props.female,true) + if(this.props.male===this.current){ + drawTimeSeries(this.myCanvas,this.props.data.slice(),2,this.props.male,this.props.female,true) }else{ - this.current=this.props.male; - drawTimeSeries(this.myCanvas,this.props.data,2,this.props.male,this.props.female,false) + this.current=this.props.male; + drawTimeSeries(this.myCanvas,this.props.data.slice(),2,this.props.male,this.props.female,true) } diff --git a/src/components/time-series/TimeSeriesCon.js b/src/components/time-series/TimeSeriesCon.js index 9d68006..7d8a3cd 100644 --- a/src/components/time-series/TimeSeriesCon.js +++ b/src/components/time-series/TimeSeriesCon.js @@ -5,76 +5,101 @@ class TimeSeriesCon extends React.Component { constructor(props) { super(props); - this.state={selection:'default'}; - this.handleChange=this.handleChange.bind(this); + this.state = { + selection: 'default', + selectionSub: 'default', + age: "age", + income: "income", + education: "education" + + }; + this.allDat = JSON.parse(JSON.stringify(TimeSeriesData)); + this.handleChange = this.handleChange.bind(this); + } + componentDidUpdate() { + this.allDat = JSON.parse(JSON.stringify(TimeSeriesData)); + } handleChange(e) { + this.allDat = JSON.parse(JSON.stringify(TimeSeriesData)); + + console.log("wew") + + if (e.target.id === e.target.value) { + console.log("wew=") + + this.setState({age: "age", income: "income", education: "education", selection: "default", selectionSub: "default"}); //Fix + return; + } + switch (e.target.id) { case "education": this.setState({ - selection: "education" + age: "age", + income: "income", + [e.target.id]: e.target.value, + selection: e.target.id, + selectionSub: e.target.value }); //Fix break; case "age": this.setState({ - selection: "age" + education: "education", + income: "income", + [e.target.id]: e.target.value, + selection: e.target.id, + selectionSub: e.target.value }); //Fix break; case "income": this.setState({ - selection: "income" + education: "education", + age: "age", + [e.target.id]: e.target.value, + selection: e.target.id, + selectionSub: e.target.value }); //Fix break; } } - - - render(){ - return ( -
-

{this.props.languages.title2}

- -
- - - -
-
-); - } + render() { + return ( +
+

{this.props.languages.title2}

+ {console.log(TimeSeriesData)} + +
+ + + +
+
+ ); + } } export default TimeSeriesCon; diff --git a/src/components/time-series/TimeSeriesData.js b/src/components/time-series/TimeSeriesData.js index 21e903a..a8a8c69 100644 --- a/src/components/time-series/TimeSeriesData.js +++ b/src/components/time-series/TimeSeriesData.js @@ -1,93 +1,255 @@ const TimeSeriesData = { - default: [ - [ + default: { + default: [ [ - 0, 50 + [ + 0, 50 + ], + [ + 100, 55 + ], + + [200, 60] ], [ - 100, 55 + [ + 0, 13 + ], + [ + 100, 16 + ], + + [200, 17] + ] + ] + }, + education: { + "secondary": [ + [ + [ + 0, 40 + ], + [ + 100, 42 + ], + + [200, 45] ], + [ + [ + 0, 14 + ], + [ + 100, 19 + ], - [200, 60] + [200, 18] + ] ], - [ + "highschool": [ [ - 0, 13 + [ + 0, 40 + ], + [ + 100, 42 + ], + + [200, 39] ], [ - 100, 16 + [ + 0, 13 + ], + [ + 100, 15 + ], + + [200, 17] + ] + ], + "bs+": [ + [ + [ + 0, 33 + ], + [ + 100, 39 + ], + + [200, 34] ], + [ + [ + 0, 8 + ], + [ + 100, 10 + ], - [200, 17] + [200, 15] + ] ] - ], - education: [ - [ + }, + income: { + "low": [ [ - 0, 33 + [ + 0, 40 + ], + [ + 100, 42 + ], + + [200, 39] ], [ - 100, 39 - ], + [ + 0, 13 + ], + [ + 100, 15 + ], - [200, 34] + [200, 17] + ] ], - [ + "meduim": [ [ - 0,8 + [ + 0, 33 + ], + [ + 100, 39 + ], + + [200, 34] ], [ - 100, 10 + [ + 0, 8 + ], + [ + 100, 10 + ], + + [200, 15] + ] + ], + "high": [ + [ + [ + 0, 50 + ], + [ + 100, 55 + ], + + [200, 60] ], + [ + [ + 0, 13 + ], + [ + 100, 16 + ], - [200, 15] + [200, 17] + ] ] - ], - income: [ - [ + }, + age: { + "18-29": [ [ - 0, 40 + [ + 0, 40 + ], + [ + 100, 42 + ], + + [200, 45] ], [ - 100, 42 - ], + [ + 0, 14 + ], + [ + 100, 19 + ], - [200, 39] + [200, 18] + ] ], - [ + "30-44": [ [ - 0, 13 + [ + 0, 40 + ], + [ + 100, 42 + ], + + [200, 39] ], [ - 100, 15 - ], + [ + 0, 13 + ], + [ + 100, 15 + ], - [200, 17] - ] - ], - age: [ - [ + [200, 17] + ] + ], + "45-59": [ [ - 0, 40 + [ + 0, 33 + ], + [ + 100, 39 + ], + + [200, 34] ], [ - 100, 42 - ], + [ + 0, 8 + ], + [ + 100, 10 + ], - [200, 45] + [200, 15] + ] ], - [ + "60+": [ [ - 0, 14 + [ + 0, 50 + ], + [ + 100, 55 + ], + + [200, 60] ], [ - 100, 19 - ], + [ + 0, 13 + ], + [ + 100, 16 + ], - [200, 18] + [200, 17] + ] ] - ] + } } diff --git a/src/languages.js b/src/languages.js index e9a31ea..4db52db 100644 --- a/src/languages.js +++ b/src/languages.js @@ -72,7 +72,7 @@ const languages = { labels4: ["لمن التوجه", "ضغط", "حلول صحية", "لا يوجد دعم", "الإرادة غير كافية"], labels5: ["اسباب دينية", "قوانين المنع", "العائلة", "الوضع القتصادي", "الكلفة", "صحة"], "cigarettes":"عدد السجائر المستهلكة بومياً", - "title1":"نسبة المدخنين بل الوسط العربي حسب احصائية 2015", + "title1":"نسبة المدخنين في الوسط العربي حسب احصائية 2015", "title2":"تطور نسبة التدخين عبر الزمن", "title3":"إستهلاك السجائر اليومي", "title4":"العوامل التي تمنع المدخنين عن الاقلاع",