diff --git a/src/incidents/visualize/VisualizeIncidents.tsx b/src/incidents/visualize/VisualizeIncidents.tsx
index a650262e02..9b4d7ef6bd 100644
--- a/src/incidents/visualize/VisualizeIncidents.tsx
+++ b/src/incidents/visualize/VisualizeIncidents.tsx
@@ -1,4 +1,4 @@
-import { LineGraph } from '@hospitalrun/components'
+import { LineGraph, Spinner } from '@hospitalrun/components'
import React, { useEffect, useState } from 'react'
import useIncidents from '../hooks/useIncidents'
@@ -10,6 +10,7 @@ const VisualizeIncidents = () => {
const searchRequest: IncidentSearchRequest = { status: searchFilter }
const { data, isLoading } = useIncidents(searchRequest)
const [incident, setIncident] = useState(0)
+ const [showGraph, setShowGraph] = useState(false)
const [monthlyIncidents, setMonthlyIncidents] = useState([
// monthlyIncidents[0] -> January ... monthlyIncidents[11] -> December
0,
@@ -32,7 +33,7 @@ const VisualizeIncidents = () => {
useEffect(() => {
if (data === undefined || isLoading) {
- // const spinner =
+ // incidents data not loaded yet, do nothing
} else {
const totalIncidents: number = data.length
if (totalIncidents > incident) {
@@ -41,11 +42,16 @@ const VisualizeIncidents = () => {
prevIncidents.map((value, index) => (index === incidentMonth ? value + 1 : value)),
)
setIncident(incident + 1)
+ } else if (totalIncidents === incident) {
+ // incidents data finished processing
+ setShowGraph(true)
}
}
}, [data, monthlyIncidents])
- return (
+ return !showGraph ? (
+
+ ) : (
<>
{
data: [
{
x: 'January',
- y: 12,
+ y: monthlyIncidents[0],
},
{
x: 'February',
- y: 11,
+ y: monthlyIncidents[1],
},
{
x: 'March',
- y: 10,
+ y: monthlyIncidents[2],
+ },
+ {
+ x: 'April',
+ y: monthlyIncidents[3],
+ },
+ {
+ x: 'May',
+ y: monthlyIncidents[4],
+ },
+ {
+ x: 'June',
+ y: monthlyIncidents[5],
+ },
+ {
+ x: 'July',
+ y: monthlyIncidents[6],
+ },
+ {
+ x: 'August',
+ y: monthlyIncidents[7],
+ },
+ {
+ x: 'September',
+ y: monthlyIncidents[8],
+ },
+ {
+ x: 'October',
+ y: monthlyIncidents[9],
+ },
+ {
+ x: 'November',
+ y: monthlyIncidents[10],
+ },
+ {
+ x: 'December',
+ y: monthlyIncidents[11],
},
],
label: 'Incidents',