Added Gender and Salary charts

data_access.py

@@ -47,7 +47,7 @@ async def get_data(country: Optional[str] = None) -> pd.core.frame.DataFrame:
         return await future
 
 
-async def get_data_for_pie() -> pd.core.frame.DataFrame:
+async def get_data_for_pie(group_by) -> pd.core.frame.DataFrame:
     TOP_N = 10
     async with Client(DASK_CLUSTER, asynchronous=True) as client:
         path = "data/*.parquet"
@@ -56,8 +56,36 @@ async def get_data_for_pie() -> pd.core.frame.DataFrame:
             path,
             engine="pyarrow-dataset",
         )
-        grouped_df = df["country"].value_counts().to_frame()
-        result = (await client.compute(grouped_df)).head(TOP_N)
+        grouped_df = df[group_by].value_counts().nlargest(TOP_N).to_frame()
+        result = await client.compute(grouped_df)
         countries = result.index.to_frame()
         result.merge(countries, how="cross")
         return result
+
+
+async def get_salary_data() -> pd.core.frame.DataFrame:
+    async with Client(DASK_CLUSTER, asynchronous=True) as client:
+        path = "data/*.parquet"
+
+        df: dd.DataFrame = dd.read_parquet(
+            path,
+            engine="pyarrow-dataset",
+        )
+        bins = [5000, 10000, 20000, 50000, 100000, 200000, 300000, 400000, 500000]
+        groups = [
+            "< 10k",
+            "< 20k",
+            "< 50k",
+            "< 100k",
+            "< 200k",
+            "< 300k",
+            "< 400k",
+            "< 500k",
+        ]
+
+        result = await client.compute(df)
+        result["grouped_salary"] = pd.cut(result["salary"], bins, labels=groups)
+        grouped_df = result["grouped_salary"].value_counts().to_frame()
+        grouped_salary = grouped_df.index.to_frame()
+        grouped_df.merge(grouped_salary, how="cross")
+        return grouped_df

frontend/src/App.js

@@ -1,62 +1,22 @@
-import axios from 'axios';
 import React from 'react';
-import Plot from 'react-plotly.js';
 import './App.css';
-
+import UserByCountry from './components/UserByCountry';
+import UserByGender from './components/UserByGender';
+import UserBySalary from './components/UserBySalary';
 
 export default class App extends React.Component {
 
-  state = {
-    stats: []
-  }
-
-  componentDidMount() {
-    axios.get(`http://localhost:8090/pie`)
-      .then(res => {
-        const stats = res.data.result.country;
-        this.setState({ stats });
-      })
-  }
-
   render() {
-    if (this.state.stats) {
-      const countries = Object.keys(this.state.stats)
-      const counts = Object.values(this.state.stats)
-
-      return (
-        <div>
-          <Plot
-            data={
-              [{
-                y: counts,
-                x: countries,
-                type: 'scatter'
-              }]
-            }
-            layout={{
-              title: 'Scatter Plot',
-              height: 400,
-              width: 800
-            }}
-          />
-          <Plot
-            data={
-              [{
-                values: counts,
-                labels: countries,
-                type: 'pie'
-              }]
-            }
-            layout={{
-              title: 'Pie Chart',
-              height: 400,
-              width: 800
-            }}
-          />
+    return (
+      <div>
+        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
+          <UserByCountry />
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
+          <UserByGender />
+          <UserBySalary />
         </div>
-      );
-    } else {
-      <p>Loading....</p>
-    }
+      </div >
+    )
   }
 }

frontend/src/components/UserByCountry.js

@@ -0,0 +1,64 @@
+import axios from 'axios';
+import React from 'react';
+import Plot from 'react-plotly.js';
+
+
+export default class UserByCountry extends React.Component {
+
+  state = {
+    stats: []
+  }
+
+  componentDidMount() {
+    axios.get(`http://localhost:8090/pie`)
+      .then(res => {
+        const stats = res.data.result.country;
+        this.setState({ stats });
+      })
+  }
+
+  render() {
+    if (this.state.stats) {
+      const countries = Object.keys(this.state.stats)
+      const counts = Object.values(this.state.stats)
+
+      return (
+        <div>
+          <h2>Userbase by Country</h2>
+          <Plot
+            data={
+              [{
+                y: counts,
+                x: countries,
+                type: 'scatter'
+              }]
+            }
+            layout={{
+              title: 'Scatter Plot',
+              height: 400,
+              width: 800
+            }}
+          />
+          <Plot
+            data={
+              [{
+                values: counts,
+                labels: countries,
+                type: 'pie'
+              }]
+            }
+            layout={
+              {
+                title: 'Pie Chart',
+                height: 400,
+                width: 800
+              }
+            }
+          />
+        </div>
+      );
+    } else {
+      <p>Loading....</p>
+    }
+  }
+}

frontend/src/components/UserByGender.js

@@ -0,0 +1,51 @@
+import axios from 'axios';
+import React from 'react';
+import Plot from 'react-plotly.js';
+
+
+export default class UserByGender extends React.Component {
+
+  state = {
+    stats: []
+  }
+
+  componentDidMount() {
+    axios.get(`http://localhost:8090/pie?field=gender`)
+      .then(res => {
+        const stats = res.data.result.gender;
+        this.setState({ stats });
+      })
+  }
+
+  render() {
+    if (this.state.stats) {
+      const genders = Object.keys(this.state.stats)
+      const counts = Object.values(this.state.stats)
+
+      return (
+        <div>
+          <h2>Userbase by Gender</h2>
+          <Plot
+            data={
+              [{
+                values: counts,
+                labels: genders,
+                type: 'pie',
+                hole: .4,
+              }]
+            }
+            layout={
+              {
+                title: 'Pie Chart',
+                height: 400,
+                width: 800
+              }
+            }
+          />
+        </div>
+      );
+    } else {
+      <p>Loading....</p>
+    }
+  }
+}

frontend/src/components/UserBySalary.js

@@ -0,0 +1,48 @@
+import axios from 'axios';
+import React from 'react';
+import Plot from 'react-plotly.js';
+
+
+export default class UserBySalary extends React.Component {
+
+    state = {
+        stats: []
+    }
+
+    componentDidMount() {
+        axios.get(`http://localhost:8090/salary-distribution`)
+            .then(res => {
+                const stats = res.data.result.grouped_salary;
+                this.setState({ stats });
+            })
+    }
+
+    render() {
+        if (this.state.stats) {
+            const salaries = Object.keys(this.state.stats)
+            const counts = Object.values(this.state.stats)
+
+            return (
+                <div style={{ paddingLeft: '100px' }}>
+                    <h2>Userbase by Salary</h2>
+                    <Plot
+                        data={
+                            [{
+                                y: counts,
+                                x: salaries,
+                                type: 'scatter'
+                            }]
+                        }
+                        layout={{
+                            title: 'Scatter Plot',
+                            height: 400,
+                            width: 800
+                        }}
+                    />
+                </div>
+            );
+        } else {
+            <p>Loading....</p>
+        }
+    }
+}