Improve MCC charts

Author: bbimber

mcc/src/client/U24Dashboard/Dashboard.tsx

@@ -5,6 +5,7 @@ import { ActionURL, Filter, getServerContext, Query } from '@labkey/api';
 
 import PieChart from '../components/dashboard/PieChart';
 import BarChart from '../components/dashboard/BarChart';
+import { ActiveElement, Chart, ChartEvent } from 'chart.js/dist/types/index';
 
 export function Dashboard() {
     const [demographics, setDemographics] = useState(null);
@@ -13,6 +14,8 @@ export function Dashboard() {
     const [availableForTransfer, setAvailableForTransfer] = useState(null);
     const [requestRows, setRequestRows] = useState(null);
     const [censusRows, setCensusRows] = useState(null);
+    const [birthData, setBirthData ] = useState(null);
+    const [breedingPairData, setBreedingPairData ] = useState(null);
 
     const ctx = getServerContext().getModuleContext('mcc') || {};
     const containerPath = ctx.MCCContainer || null;
@@ -64,6 +67,7 @@ export function Dashboard() {
             containerPath: requestContainerPath,
             schemaName: 'mcc',
             queryName: 'requestScores',
+            columns: 'requestId/status',
             success: function(results) {
                 if (isApiSubscribed) {
                     setRequestRows(results.rows);
@@ -86,6 +90,20 @@ export function Dashboard() {
             success: function(results) {
                 if (isApiSubscribed) {
                     setCensusRows(results.rows);
+
+                    setBreedingPairData(results.rows.flatMap(row => {
+                        return Array(row.totalBreedingPairs).fill({
+                            yearNo: row.yearNo,
+                            centerName: row.centerName
+                        })
+                    }))
+
+                    setBirthData(results.rows.flatMap(row => {
+                        return Array(row.totalLivingOffspring).fill({
+                            yearNo: row.yearNo,
+                            centerName: row.centerName
+                        })
+                    }))
                 }
             },
             failure: function(response) {
@@ -110,8 +128,11 @@ export function Dashboard() {
         );
     }
 
-    console.log(censusRows)
-    console.log(requestRows)
+    const clickHandler = function(event: ChartEvent, elements: ActiveElement[], chart: Chart){
+        console.log(event)
+        console.log(elements)
+        console.log(chart)
+    }
 
     return (
         <>
@@ -151,20 +172,37 @@ export function Dashboard() {
                 </div>
             </div>
             <div className="row">
+                <div className="col-md-4">
+                    <div className="panel panel-default">
+                        <div className="panel-heading">Request Summary</div>
+                        <div className="panel-body">
+                            <PieChart fieldName = "requestId/status" demographics={requestRows} />
+                        </div>
+                    </div>
+                </div>
                 <div className="col-md-4">
                     <div className="panel panel-default">
                         <div className="panel-heading">Age (Living Animals)</div>
                         <div className="panel-body">
-                            <BarChart demographics={living} fieldName="Id/ageClass/label" groupField="gender/meaning"  />
+                            <BarChart demographics={living} fieldName="Id/ageClass/label" groupField="gender/meaning" onClick={clickHandler} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="row">
+                <div className="col-md-4">
+                    <div className="panel panel-default">
+                        <div className="panel-heading">U24 Births By Year</div>
+                        <div className="panel-body">
+                            <BarChart demographics={birthData} fieldName="centerName" groupField="yearNo" indexAxis="x"/>
                         </div>
                     </div>
                 </div>
                 <div className="col-md-4">
                     <div className="panel panel-default">
-                        <div className="panel-heading">Requests</div>
+                        <div className="panel-heading">U24 Breeding Pairs</div>
                         <div className="panel-body">
-                            {/*<PieChart fieldName = "gender/meaning" demographics={living} />*/}
-                            PLACEHOLDER: Number of births over time, etc.
+                            <BarChart demographics={breedingPairData} fieldName="centerName" groupField="yearNo" indexAxis="x" />
                         </div>
                     </div>
                 </div>

mcc/src/client/components/dashboard/BarChart.tsx

@@ -1,13 +1,6 @@
 import React, { useEffect, useRef } from 'react';
-import {
-    Chart,
-    Legend,
-    BarController,
-    BarElement,
-    CategoryScale,
-    LinearScale,
-    Tooltip
-} from 'chart.js';
+import { BarController, BarElement, CategoryScale, Chart, Legend, LinearScale, Tooltip } from 'chart.js';
+import { ActiveElement, ChartEvent } from 'chart.js/dist/types/index';
 
 Chart.register(Legend, BarController, BarElement, CategoryScale, LinearScale, Tooltip);
 
@@ -19,10 +12,11 @@ const colors = [
     'rgb(194, 192, 210)'
 ];
 
-export default function BarChart(props: {demographics: [], fieldName: string, groupField?: string}) {
+export default function BarChart(props: {demographics: [], fieldName: string, groupField?: string, indexAxis?: 'x' | 'y', onClick?: (event: ChartEvent, elements: ActiveElement[], chart: Chart) => void }) {
     const canvas = useRef(null);
 
-    const { demographics, fieldName, groupField } = props
+    const { demographics, fieldName, groupField, onClick} = props
+    const indexAxis: 'x' | 'y' = props.indexAxis || 'y'
 
     const collectedData = demographics.reduce((acc, curr: {}, idx) => {
         const value = curr[fieldName] === null ? 'Unknown' : curr[fieldName];
@@ -59,9 +53,10 @@ export default function BarChart(props: {demographics: [], fieldName: string, gr
                 datasets: dataArr
             },
             options: {
+                onClick: onClick,
                 responsive: true,
                 aspectRatio: 2,
-                indexAxis: 'y',
+                indexAxis: indexAxis,
                 scales: {
                     x: {
                         beginAtZero: true