Add Charts for Gender, major and graduation status

betagouv · Jun 23, 2017 · cd287dd · cd287dd
1 parent b5cb771
commit cd287dd
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 4 deletions.
diff --git a/client/package.json b/client/package.json
@@ -36,6 +36,7 @@
     "babel-polyfill": "6.22.0",
     "bootstrap": "3.3.7",
     "bootswatch": "3.3.7",
+    "chart.js": "2.6.0",
     "cleave.js": "0.7.15",
     "file-saver": "1.3.3",
     "jquery": "3.1.1",
@@ -45,6 +46,7 @@
     "react": "15.4.2",
     "react-addons-shallow-compare": "15.4.2",
     "react-bootstrap": "0.30.7",
+    "react-chartjs-2": "2.1.0",
     "react-dom": "15.4.2",
     "react-redux": "5.0.2",
     "react-router": "3.0.2",

diff --git a/client/src/api/statApi.js b/client/src/api/statApi.js
@@ -7,6 +7,24 @@ class statApi {
         return response.data
       })
   }
+  static getApplicationGenderSummary() {
+    return axios.get('/stat/applicationGenderSummary')
+      .then((response) => {
+        return response.data
+      })
+  }
+  static getApplicationStudentSummary() {
+    return axios.get('/stat/applicationStudentSummary')
+      .then((response) => {
+        return response.data
+      })
+  }
+  static getApplicationDiplomaSummary() {
+    return axios.get('/stat/applicationDiplomaSummary')
+      .then((response) => {
+        return response.data
+      })
+  }
 }
 
 export default statApi
diff --git a/client/src/components/stat/StatPage.js b/client/src/components/stat/StatPage.js
@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react'
 import { Panel } from 'react-bootstrap'
+import { Doughnut } from 'react-chartjs-2'
 
 import statApi from '../../api/statApi'
 import ApplicationSummaryTable from './ApplicationSummaryTable'
@@ -8,24 +9,107 @@ class StatPage extends React.Component {
   constructor(props, context) {
     super(props, context)
     this.state = {
-      applicationSummary: []
+      applicationSummary: [],
+      genderData: {
+        datasets: [{
+          data: [0, 0],
+          backgroundColor: [
+            'rgba(44,62,80,1)',
+            'rgba(52,152,219,1)',
+          ],
+        }],
+        labels: [
+          'homme',
+          'femme'
+        ]
+      },
+      studentData: {
+        datasets: [{
+          data: [0, 0],
+          backgroundColor: [
+            'rgba(44,62,80,1)',
+            'rgba(52,152,219,1)',
+          ],
+        }],
+        labels: [
+          'diplômé',
+          'étudiant'
+        ]
+      },
+      majorData: {
+        datasets: [{
+          data: [0, 0, 0, 0, 0],
+          backgroundColor: [
+            'rgba(44,62,80,1)',
+            'rgba(52,152,219,1)',
+            'rgba(24,188,156,1)',
+            'rgba(243,156,18,1)',
+            'rgba(231,76,60,1)',
+          ],
+        }],
+        labels: [
+          'droit',
+          'lettres',
+          'sciences',
+          'sport',
+          'santé'
+        ]
+      }
     }
   }
 
   componentDidMount() {
     statApi.getApplicationSummary().then(((applicationSummary) => {
       this.setState({ applicationSummary })
     }))
+    statApi.getApplicationGenderSummary().then(((applicationGenderSummary) => {
+      const { genderData } = this.state
+      genderData.datasets[0].data = [applicationGenderSummary.male, applicationGenderSummary.female]
+      this.setState({ genderData })
+    }))
+    statApi.getApplicationStudentSummary().then(((applicationStudentSummary) => {
+      const { studentData } = this.state
+      studentData.datasets[0].data = [applicationStudentSummary.graduate, applicationStudentSummary.student]
+      this.setState({ studentData })
+    }))
+    statApi.getApplicationDiplomaSummary().then(((majorSummary) => {
+      const { majorData } = this.state
+      majorData.datasets[0].data = [majorSummary.law, majorSummary.letter, majorSummary.science, majorSummary.sport, majorSummary.health]
+      this.setState({ majorData })
+    }))
   }
 
   render() {
     return (
-      <div className="container">
+      <div className="container stats-container">
         <div className="page-header">
           <h1>Métriques du service</h1>
+          <div className="row">
+            <div className="col-lg-4 text-center">
+              <Panel>
+                <h3>Candidats - Scolarité</h3>
+                <hr />
+                <Doughnut data={this.state.studentData} />
+              </Panel>
+            </div>
+            <div className="col-lg-4 text-center">
+              <Panel>
+                <h3>Candidats - Genre</h3>
+                <hr />
+                <Doughnut data={this.state.genderData} />
+              </Panel>
+            </div>
+            <div className="col-lg-4 text-center">
+              <Panel>
+                <h3>Candidats - Majeure</h3>
+                <hr />
+                <Doughnut data={this.state.majorData} />
+              </Panel>
+            </div>
+          </div>
           <Panel header="Candidatures par PEPITE">
-          <ApplicationSummaryTable applicationSummaryList={this.state.applicationSummary} />
-        </Panel>
+            <ApplicationSummaryTable applicationSummaryList={this.state.applicationSummary} />
+          </Panel>
         </div>
       </div>
     )