OurDNA Dashboard UI Enhancements (#908)

* SET-75 Fixed y-axis bug * SET-73 added base for chart * working cleanup * SET-72 Added 24hr collection to process end time buckets tile
populationgenomics · Sep 2, 2024 · 03a13d7 · 03a13d7
1 parent ea848ba
commit 03a13d7
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 3 deletions.
diff --git a/web/src/pages/ourdna/OurDnaDashboard.tsx b/web/src/pages/ourdna/OurDnaDashboard.tsx
@@ -30,9 +30,11 @@ const GET_OURDNA_DASHBOARD = gql(`
                 collectionToProcessEndTime
                 collectionToProcessEndTime24h
                 collectionToProcessEndTimeStatistics
+                collectionToProcessEndTimeBucketStatistics
                 participantsConsentedNotCollected
                 participantsSignedNotConsented
                 processingTimesBySite
+                processingTimesByCollectionSite
                 samplesConcentrationGt1ug
                 samplesLostAfterCollection {
                     collectionLab
@@ -201,13 +203,60 @@ const Dashboard = () => {
                 <GridRow centered>
                     <GridColumn width={10}>
                         <BarChart
-                            header="Processing time per site"
+                            header="Processing time per Processing Site"
                             data={data.project.ourdnaDashboard.processingTimesBySite}
                             icon={
                                 <ClockIcon fill={ourdnaColours.yellow} style={{ ...iconStyle }} />
                             }
                         />
                     </GridColumn>
+                    <GridColumn width={6}>
+                        <Grid stackable columns={1}>
+                            <GridColumn>
+                                <StatTile
+                                    header="Collection to Processing by 24h buckets"
+                                    stats={[
+                                        {
+                                            value: `${data.project.ourdnaDashboard.collectionToProcessEndTimeBucketStatistics['24h']}`,
+                                            units: '24 hours',
+                                            unitsColour: 'ourdna-green-transparent',
+                                        },
+                                        {
+                                            value: `${data.project.ourdnaDashboard.collectionToProcessEndTimeBucketStatistics['48h']}`,
+                                            units: '48 hours',
+                                            unitsColour: 'ourdna-red-transparent',
+                                        },
+                                        {
+                                            value: `${data.project.ourdnaDashboard.collectionToProcessEndTimeBucketStatistics['72h']}`,
+                                            units: '72 hours',
+                                            unitsColour: 'ourdna-blue-transparent',
+                                        },
+                                        {
+                                            value: `${data.project.ourdnaDashboard.collectionToProcessEndTimeBucketStatistics['>72h']}`,
+                                            units: '> 72 hours',
+                                            unitsColour: 'ourdna-yellow-transparent',
+                                        },
+                                    ]}
+                                    description="Count of samples processed within each 24h bucket."
+                                    icon={
+                                        <TruckIcon
+                                            fill={ourdnaColours.green}
+                                            style={{ ...iconStyle }}
+                                        />
+                                    }
+                                />
+                            </GridColumn>
+                        </Grid>
+                    </GridColumn>
+                </GridRow>
+                <GridRow centered>
+                    <GridColumn width={10}>
+                        <BarChart
+                            header="Processing time per Collection Site"
+                            data={data.project.ourdnaDashboard.processingTimesByCollectionSite}
+                            icon={<ClockIcon fill={ourdnaColours.green} style={{ ...iconStyle }} />}
+                        />
+                    </GridColumn>
                     <GridColumn width={6}>
                         <Grid stackable columns={1}>
                             <GridColumn>

diff --git a/web/src/shared/components/ourdna/BarChart.tsx b/web/src/shared/components/ourdna/BarChart.tsx
@@ -142,7 +142,8 @@ const HistogramChart: React.FC<HistogramProps> = ({ icon, header, data }) => {
 
         g.append('g')
             .attr('class', 'axis-label')
-            .call(d3.axisLeft(y).ticks(y.domain()[1]).tickFormat(d3.format('d')))
+            // Added a `.ticks(5)` to reduce the number of ticks on the y-axis
+            .call(d3.axisLeft(y).ticks(5).tickFormat(d3.format('d')))
             .selectAll('text')
             .attr('dx', '-1em') // Adjust the position of the y-axis labels
 
@@ -187,7 +188,8 @@ const HistogramChart: React.FC<HistogramProps> = ({ icon, header, data }) => {
         // Append Y axis
         g.append('g')
             .attr('class', 'axis-label')
-            .call(d3.axisLeft(y).ticks(y.domain()[1]).tickFormat(d3.format('d')))
+            // Added a `.ticks(5)` to reduce the number of ticks on the y-axis
+            .call(d3.axisLeft(y).ticks(5).tickFormat(d3.format('d')))
             .selectAll('text')
             .attr('dx', '-1em') // Adjust the position of the y-axis labels
             .style('fill', 'var(--color-text-primary)') // Change the color of the axis labels