Improve MCC plots

Author: bbimber

mcc/src/client/U24Dashboard/Dashboard.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { ActionURL, Filter, getServerContext, Query } from '@labkey/api';
 
 import PieChart from '../components/dashboard/PieChart';
-import BarChart from '../components/dashboard/BarChart';
+import BarChart, { ColorType } from '../components/dashboard/BarChart';
 import { ActiveElement, Chart, ChartEvent } from 'chart.js/dist/types/index';
 
 export function Dashboard() {
@@ -164,7 +164,7 @@ export function Dashboard() {
                 </div>
                 <div className="col-md-4">
                     <div className="panel panel-default">
-                        <div className="panel-heading">Center (All Animals)</div>
+                        <div className="panel-heading">U24 Animals By Center</div>
                         <div className="panel-body">
                             <PieChart fieldName = "colony" demographics={demographics} cutout = "30%" />
                         </div>
@@ -184,7 +184,7 @@ export function Dashboard() {
                     <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" onClick={clickHandler} />
+                            <BarChart demographics={living} fieldName="Id/ageClass/label" groupField="gender/meaning" missingDataTerm="unknown" colorBy={ColorType.GROUP} showLegend={true} onClick={clickHandler} />
                         </div>
                     </div>
                 </div>
@@ -194,15 +194,15 @@ export function Dashboard() {
                     <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"/>
+                            <BarChart demographics={birthData} fieldName="yearNo" groupField="centerName" colorBy={ColorType.GROUP} showLegend={true} indexAxis="x"/>
                         </div>
                     </div>
                 </div>
                 <div className="col-md-4">
                     <div className="panel panel-default">
                         <div className="panel-heading">U24 Breeding Pairs</div>
                         <div className="panel-body">
-                            <BarChart demographics={breedingPairData} fieldName="centerName" groupField="yearNo" indexAxis="x" />
+                            <BarChart demographics={breedingPairData} fieldName="yearNo" groupField="centerName" colorBy={ColorType.GROUP} showLegend={true} indexAxis="x" />
                         </div>
                     </div>
                 </div>

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

@@ -16,15 +16,24 @@ const colors = [
     "#999999"
 ];
 
-export default function BarChart(props: {demographics: [], fieldName: string, groupField?: string, indexAxis?: 'x' | 'y', onClick?: (event: ChartEvent, elements: ActiveElement[], chart: Chart) => void }) {
+export enum ColorType {
+    PRIMARY = "primary",
+    GROUP = "group"
+}
+
+export default function BarChart(props: {demographics: [], fieldName: string, groupField?: string, colorBy?: ColorType, showLegend?: boolean, indexAxis?: 'x' | 'y', missingDataTerm?: string, onClick?: (event: ChartEvent, elements: ActiveElement[], chart: Chart) => void }) {
     const canvas = useRef(null);
 
     const { demographics, fieldName, groupField, onClick} = props
+    const { colorBy = ColorType.PRIMARY } = props
+    const { showLegend = false } = props
+    const { missingDataTerm = 'None' } = props
+
     const indexAxis: 'x' | 'y' = props.indexAxis || 'y'
 
     const collectedData = demographics.reduce((acc, curr: {}, idx) => {
         const value = curr[fieldName] === null ? 'Unknown' : curr[fieldName];
-        const group = groupField == null ? 'counts' : curr[groupField] || 'None'
+        const group = groupField == null ? 'counts' : curr[groupField] || missingDataTerm
 
         if (!acc[group]) {
             acc[group] = {}
@@ -39,13 +48,15 @@ export default function BarChart(props: {demographics: [], fieldName: string, gr
         return acc;
     }, {});
 
-    const labels = [...new Set(Object.keys(collectedData).flatMap(groupName => Object.keys(collectedData[groupName])))];
-    const dataArr: any[] = Object.keys(collectedData).map(groupName => {
+    const labels = [...new Set(Object.keys(collectedData).flatMap(groupName => Object.keys(collectedData[groupName])))].sort(Intl.Collator().compare)
+    const groupNames = Object.keys(collectedData).sort(Intl.Collator().compare)
+
+    const dataArr: any[] = groupNames.map(groupName => {
         const dat = labels.map(label => collectedData[groupName] ? collectedData[groupName][label] || 0 : 0)
         return {
             label: groupName,
             data: dat,
-            backgroundColor: colors.slice(0, labels.length)
+            backgroundColor: colorBy == ColorType.PRIMARY ? colors.slice(0, labels.length) : colors[groupNames.indexOf(groupName)]
         }
     });
 
@@ -68,7 +79,8 @@ export default function BarChart(props: {demographics: [], fieldName: string, gr
                 },
                 plugins: {
                     legend: {
-                        display: false
+                        display: showLegend,
+                        position: 'right'
                     }
                 }
             }

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

@@ -38,7 +38,7 @@ export default function PieChart(props) {
 
         return acc;
     }, {});
-    const labels = Object.keys(collectedData).sort();
+    const labels = Object.keys(collectedData).sort(Intl.Collator().compare);
     const data = labels.map(label => collectedData[label]);
 
     useEffect(() => {