Add issue analytics frontend

scorelab · Aug 14, 2022 · bbb7f25 · bbb7f25
1 parent a528d67
commit bbb7f25
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 8 deletions.
diff --git a/labellab-client/src/actions/analytics.js b/labellab-client/src/actions/analytics.js
@@ -4,7 +4,10 @@ import {
   ANALYTICS_TIME_LABEL_SUCCESS,
   ANALYTICS_COUNT_LABEL_FAILURE,
   ANALYTICS_COUNT_LABEL_REQUEST,
-  ANALYTICS_COUNT_LABEL_SUCCESS
+  ANALYTICS_COUNT_LABEL_SUCCESS,
+  ISSUE_ANALYTICS_FAILURE,
+  ISSUE_ANALYTICS_REQUEST,
+  ISSUE_ANALYTICS_SUCCESS
 } from '../constants/index'
 
 import FetchApi from '../utils/FetchAPI'
@@ -66,3 +69,32 @@ export const getLabelCount = (projectId, callback) => {
     return { type: ANALYTICS_COUNT_LABEL_FAILURE, payload: error }
   }
 }
+
+export const getIssueAnalytics = (projectId, callback) => {
+  return dispatch => {
+    dispatch(request())
+    FetchApi.get(
+      '/api/v1/issue_analytics/get/' + projectId
+    )
+      .then(res => {
+        dispatch(success(res.data.body))
+        callback()
+      })
+      .catch(err => {
+        if (err.response) {
+          err.response.data
+            ? dispatch(failure(err.response.data.msg))
+            : dispatch(failure(err.response.statusText, null))
+        }
+      })
+  }
+  function request() {
+    return { type: ISSUE_ANALYTICS_REQUEST }
+  }
+  function success(data) {
+    return { type: ISSUE_ANALYTICS_SUCCESS, payload: data }
+  }
+  function failure(error) {
+    return { type: ISSUE_ANALYTICS_FAILURE, payload: error }
+  }
+}
diff --git a/labellab-client/src/components/project/analytics.js b/labellab-client/src/components/project/analytics.js
@@ -2,16 +2,18 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import { Header, Grid } from 'semantic-ui-react'
-import { Bar, Pie } from 'react-chartjs-2'
-import { getTimeLabel } from '../../actions/index'
+import { Bar, Pie, Doughnut } from 'react-chartjs-2'
+import { getTimeLabel, getLabelCount, getIssueAnalytics } from '../../actions/index'
 import './css/analytics.css'
 class AnalyticsIndex extends Component {
   componentDidMount() {
-    const { match, fetchTimeLabel } = this.props
+    const { match, fetchTimeLabel, fetchLabelCount, fetchIssueAnalytics } = this.props
     fetchTimeLabel(match.params.projectId)
+    fetchLabelCount(match.params.projectId)
+    fetchIssueAnalytics(match.params.projectId)
   }
   render() {
-    const { timeData, countData, isfetching } = this.props
+    const { timeData, countData, issueData, isfetching } = this.props
     return (
       <div className="project-analytics-parent">
         <div className="analytics-row">
@@ -38,6 +40,39 @@ class AnalyticsIndex extends Component {
                 )}
               </div>
             </Grid.Column>
+            <Grid.Column mobile={16} tablet={16} computer={8} className="analytics-column">
+              <div className="project-analytics-section">
+                <Header content="Issue Priority Proportions" />
+                {isfetching ? null : (
+                  <Doughnut
+                    data={issueData['priority']}
+                    options={{ responsive: true, maintainAspectRatio: true }}
+                  />
+                )}
+              </div>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={16} computer={8} className="analytics-column">
+              <div className="project-analytics-section">
+                <Header content="Issue Category Proportions" />
+                {isfetching ? null : (
+                  <Doughnut
+                    data={issueData['category']}
+                    options={{ responsive: true, maintainAspectRatio: true }}
+                  />
+                )}
+              </div>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={16} computer={8} className="analytics-column">
+              <div className="project-analytics-section">
+                <Header content="Issue Status Proportions" />
+                {isfetching ? null : (
+                  <Doughnut
+                    data={issueData['status']}
+                    options={{ responsive: true, maintainAspectRatio: true }}
+                  />
+                )}
+              </div>
+            </Grid.Column>
           </Grid>
         </div>
       </div>
@@ -56,13 +91,20 @@ const mapStateToProps = state => {
   return {
     timeData: state.analytics.timeData || {},
     countData: state.analytics.countData || {},
+    issueData: state.analytics.issueData || {},
     isfetching: state.analytics.isfetching
   }
 }
 const mapDispatchToProps = dispatch => {
   return {
     fetchTimeLabel: projectId => {
       return dispatch(getTimeLabel(projectId))
+    },
+    fetchLabelCount: projectId => {
+      return dispatch(getLabelCount(projectId))
+    },
+    fetchIssueAnalytics: projectId => {
+      return dispatch(getIssueAnalytics(projectId))
     }
   }
 }

diff --git a/labellab-client/src/components/project/index.js b/labellab-client/src/components/project/index.js
@@ -8,6 +8,7 @@ import {
   fetchProject,
   getTimeLabel,
   getLabelCount,
+  getIssueAnalytics,
   fetchLabels,
   fetchCoordinates,
   fetchAllTeams,
@@ -98,6 +99,7 @@ class ProjectIndex extends Component {
       fetchTimeLabel,
       fetchLabels,
       fetchLabelCount,
+      fetchIssueAnalytics,
       fetchCoordinates,
       fetchAllTeams,
       fetchProjectRoles,
@@ -109,6 +111,7 @@ class ProjectIndex extends Component {
     fetchTimeLabel(match.params.projectId)
     fetchLabels(match.params.projectId)
     fetchLabelCount(match.params.projectId)
+    fetchIssueAnalytics(match.params.projectId)
     fetchCoordinates(match.params.projectId)
     fetchAllTeams(match.params.projectId)
     fetchProjectRoles(match.params.projectId)
@@ -234,6 +237,8 @@ ProjectIndex.propTypes = {
   history: PropTypes.object,
   fetchProject: PropTypes.func,
   fetchTimeLabel: PropTypes.func,
+  fetchLabelCount: PropTypes.func,
+  fetchIssueAnalytics: PropTypes.func,
   match: PropTypes.object,
   actionsLabel: PropTypes.object,
   fetchLabels: PropTypes.func,
@@ -266,6 +271,9 @@ const mapDispatchToProps = dispatch => {
     fetchLabelCount: projectId => {
       return dispatch(getLabelCount(projectId))
     },
+    fetchIssueAnalytics: projectId => {
+      return dispatch(getIssueAnalytics(projectId))
+    },
     fetchCoordinates: projectId => {
       return dispatch(fetchCoordinates(projectId))
     },

diff --git a/labellab-client/src/constants/analytics.js b/labellab-client/src/constants/analytics.js
@@ -3,4 +3,8 @@ export const ANALYTICS_TIME_LABEL_FAILURE = 'ANALYTICS_TIME_LABEL_FAILURE',
   ANALYTICS_TIME_LABEL_SUCCESS = 'ANALYTICS_TIME_LABEL_SUCCESS',
   ANALYTICS_COUNT_LABEL_FAILURE = 'ANALYTICS_COUNT_LABEL_FAILURE',
   ANALYTICS_COUNT_LABEL_REQUEST = 'ANALYTICS_COUNT_LABEL_REQUEST',
-  ANALYTICS_COUNT_LABEL_SUCCESS = 'ANALYTICS_COUNT_LABEL_SUCCESS'
+  ANALYTICS_COUNT_LABEL_SUCCESS = 'ANALYTICS_COUNT_LABEL_SUCCESS',
+  ISSUE_ANALYTICS_FAILURE = 'ISSUE_ANALYTICS_FAILURE',
+  ISSUE_ANALYTICS_REQUEST = 'ISSUE_ANALYTICS_REQUEST',
+  ISSUE_ANALYTICS_SUCCESS = 'ISSUE_ANALYTICS_SUCCESS'
+
diff --git a/labellab-client/src/reducers/analytics.js b/labellab-client/src/reducers/analytics.js
@@ -4,12 +4,16 @@ import {
   ANALYTICS_TIME_LABEL_SUCCESS,
   ANALYTICS_COUNT_LABEL_FAILURE,
   ANALYTICS_COUNT_LABEL_REQUEST,
-  ANALYTICS_COUNT_LABEL_SUCCESS
+  ANALYTICS_COUNT_LABEL_SUCCESS,
+  ISSUE_ANALYTICS_FAILURE,
+  ISSUE_ANALYTICS_REQUEST,
+  ISSUE_ANALYTICS_SUCCESS
 } from '../constants/index'
 const intialState = {
   isfetching: false,
   timeData: {},
-  countData: {}
+  countData: {},
+  issueData: {}
 }
 const analytics = (state = intialState, action) => {
   switch (action.type) {
@@ -45,6 +49,22 @@ const analytics = (state = intialState, action) => {
         ...state,
         isfetching: false
       }
+    case ISSUE_ANALYTICS_REQUEST:
+      return {
+        ...state,
+        isfetching: true
+      }
+    case ISSUE_ANALYTICS_SUCCESS:
+      return {
+        ...state,
+        isfetching: false,
+        issueData: action.payload
+      }
+    case ISSUE_ANALYTICS_FAILURE:
+      return {
+        ...state,
+        isfetching: false
+      }
     default:
       return state
   }