diff --git a/src/incidents/visualize/VisualizeIncidents.tsx b/src/incidents/visualize/VisualizeIncidents.tsx
index 6ab624aaae..e9b4f16de9 100644
--- a/src/incidents/visualize/VisualizeIncidents.tsx
+++ b/src/incidents/visualize/VisualizeIncidents.tsx
@@ -1,5 +1,5 @@
-import { Spinner, LineGraph } from '@hospitalrun/components'
-import React from 'react'
+import { LineGraph } from '@hospitalrun/components'
+import React, { useEffect, useState } from 'react'
import useIncidents from '../hooks/useIncidents'
import IncidentFilter from '../IncidentFilter'
@@ -9,15 +9,62 @@ const VisualizeIncidents = () => {
const searchFilter = IncidentFilter.reported
const searchRequest: IncidentSearchRequest = { status: searchFilter }
const { data, isLoading } = useIncidents(searchRequest)
+ const [monthlyIncidents, setMonthlyIncidents] = useState({
+ January: 0,
+ February: 0,
+ March: 0,
+ April: 0,
+ May: 0,
+ June: 0,
+ July: 0,
+ August: 0,
+ September: 0,
+ November: 0,
+ December: 0,
+ })
- if (data === undefined || isLoading) {
- return
+ const getIncidentMonth = (reportedOn: string) => {
+ // reportedOn: "2020-08-12T19:53:30.153Z"
+ // splices the data.reportedOn string at position 5-6 to get the month
+ const months = [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'November',
+ 'December',
+ ]
+ return months[Number(reportedOn.slice(5, 7)) - 1]
}
- // reportedOn: "2020-08-12T19:53:30.153Z"
- // we can use a function that splices the string at position 6-7 to get the month
+ useEffect(() => {
+ if (data === undefined || isLoading) {
+ console.log('data is undefined')
+ } else {
+ let incidentMonth: string
+ const totalIncidents: number = data.length
+ for (let incident = 0; incident < totalIncidents; incident += 1) {
+ incidentMonth = getIncidentMonth(data[incident].reportedOn)
+ setMonthlyIncidents((state) => ({
+ ...state,
+ // incidentMonth: incidentMonth + 1,
+ }))
+ console.log('incidentMonth: ', incidentMonth)
+ }
+ }
+ }, [])
+
+ // if (data === undefined || isLoading) {
+ // return
+ // }
+
+ console.log('August: ', monthlyIncidents.August)
- console.log('data: ', data)
return (
<>