added bar chart with default style. Need to include user data

hannahlim213 · Jul 12, 2018 · 97c9662 · 97c9662
1 parent 1d68a91
commit 97c9662
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 54 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import axios from 'axios';
 import ReactDOM from 'react-dom';
 import { Link } from 'react-router-dom';
-
+import Chart from '../src/components/Chart'
 import HELPERS from "./utils/helpers.js";
 
 class MERN extends Component {

diff --git a/client/src/components/Chart/Chart.js b/client/src/components/Chart/Chart.js
@@ -1,49 +1,49 @@
 import React, { Component } from 'react';
-import { HorizontalBar } from 'react-chartjs-2';
-import { BarChart } from 'react-easy-chart';
+import { Bar } from 'react-chartjs-2';
+// import { BarChart } from 'react-easy-chart';
 // import "./Chart.css";
 
 class Chart extends Component {
     constructor(props) {
-        super(props)
-        this.state= {
-            data:[]
+        super(props);
+        this.state = {
+            chartData:props.chartData
         }
     }
-    render() {
-        const chart = {
-            data: {
-                labels: ['You', 'USA Average'],
-                datasets: [{
-                    label: 'My First dataset',
-                    backgroundColor: 'rgba(255,99,132,0.2)',
-                    borderColor: 'rgba(255,99,132,1)',
-                    borderWidth: 1,
-                    hoverBackgroundColor: 'rgba(255,99,132,0.4)',
-                    hoverBorderColor: 'rgba(255,99,132,1)',
-                    data: [3, 5]
-                }]
-            },
-            options: {
-                maintainAspectRatio: true,
-                xAxes: [{
-                    display: true,
-                    ticks: {
-                        beginAtZero: true,
-                        max: 10
-                    }
-                }]
-            }
-        }
 
+    static defaultProps = {
+        displayTitle:true,
+        displayLegend:true,
+        legendPosition:'right',
+        location:'Question Title'
+    }
 
+    render() {
         return (
             <div>
-                <HorizontalBar
-                    data={chart.data}
-                    width={this.props.width}
+                <Bar
+                    data={this.state.chartData}
                     height={this.props.height}
-                    options={chart.options}
+                    options={{
+                        maintainAspectRatio:false,
+                        title: {
+                            display:this.props.displayTitle,
+                            text:this.props.location,
+                            fontSize:25
+                        },
+                        legend:{
+                            display:this.props.displayLegend,
+                            position:this.props.legendPosition
+                        },
+                        scales: {
+                            yAxes:[{
+                                ticks: {
+                                    beginAtZero: true,
+                                    max:this.props.max
+                                }
+                            }]
+                        }
+                    }}
                 />
             </div>
         );

diff --git a/client/src/components/Results/Results.js b/client/src/components/Results/Results.js
@@ -6,30 +6,37 @@ import Chart from "../Chart/Chart"
 
 
 class Results extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            chartData: {}
+        }
+    }
 
-state = {
-    userId: HELPERS.getCookies(),
-    firstName:"hannah"
+getChartData() {
+    this.setState({
+        chartData: {
+            labels: ['You', 'USA Average'],
+            datasets: [{
+                label: 'Number of Days',
+                data:[
+                    3,
+                    5
+                ],
+                backgroundColor: ['rgba(255,99,132,0.2)', 'rgba(255,99,132,0.2)']
+            }]
+        }
+    });
 }
 
-// change = e => {
-//     this.setState({
-//         [e.target.name]: e.target.value
-//     })
-// }
-
-// onSubmit = (e) => {
-//     e.preventDefault();
-//     e.logcheck();
-//     e.logout();
-// }
 
 logout() {
     localStorage.removeItem('jwtToken');
     window.location.reload();
 }
 
 componentWillMount(){
+    this.getChartData()
     console.log(this.state.userId)
     const getUser = {
         userId: this.state.userId
@@ -38,7 +45,8 @@ componentWillMount(){
     .then(dbResults=>{
         console.log("dbResults", dbResults)
         this.setState({
-            firstName: dbResults.data.firstName
+            firstName: dbResults.data.firstName,
+            q1: dbResults.data.q1,
         })
     })
 }
@@ -60,11 +68,20 @@ render(){
                             <li id="listResults" className="list-group-item text-center"><h2>See in the graph below how your footprint compares to the rest of people!</h2></li>
                             <li className="text-center">  </li>
                         </ul>
-                        <h1> How many times a week do you eat meat?</h1>
+
+                        {/* first question */}
+                        <Chart 
+                        chartData={this.state.chartData}
+                        location='How much meat you eat compared to the average US citizen'
+                        legendPosition="bottom"
+                        height={400}
+                        max={10}
+                        />   
+
+                        {/* second question  */}
                         <Chart 
-                        width={100}
-                        height={50}
-                        />    
+
+                        />
 
 
                         <p>