Optimize chart legend by conditionally rendering certain items based …

…on data presence
usdot-jpo-ode · May 21, 2024 · e77a0e6 · e77a0e6
1 parent 6f7e271
commit e77a0e6
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 60 deletions.
diff --git a/gui/src/components/assessments/connection-of-travel-assessment.tsx b/gui/src/components/assessments/connection-of-travel-assessment.tsx
@@ -64,6 +64,23 @@ export const ConnectionOfTravelAssessmentCard = (props: { assessment: Connection
     return 0;
   }
 
+const data = assessment?.connectionOfTravelAssessmentGroups
+  .map((group) => {
+    return {
+      name: `${group.ingressLaneID}_${group.egressLaneID}`,
+      eventCountValid: group.connectionID == -1 ? 0 : group.eventCount,
+      eventCountInvalid: group.connectionID == -1 ? group.eventCount : 0,
+      connectionID: group.connectionID,
+      ingressLaneID: group.ingressLaneID,
+      egressLaneID: group.egressLaneID,
+    };
+  })
+  .sort(sortByName);
+
+const hasValidEvents = data?.some(item => item.eventCountValid > 0);
+const hasInvalidEvents = data?.some(item => item.eventCountInvalid > 0);
+
+
   return (
     <Grid item width={assessment === undefined ? 200 : 80 + widthFactor * 1600}>
       <Card sx={{ height: "100%", overflow: "visible" }}>
@@ -81,18 +98,7 @@ export const ConnectionOfTravelAssessmentCard = (props: { assessment: Connection
                 <BarChart
                   width={widthFactor * 1600}
                   height={350}
-                  data={assessment?.connectionOfTravelAssessmentGroups
-                    .map((group) => {
-                      return {
-                        name: `${group.ingressLaneID}_${group.egressLaneID}`,
-                        eventCountValid: group.connectionID == -1 ? 0 : group.eventCount,
-                        eventCountInvalid: group.connectionID == -1 ? group.eventCount : 0,
-                        connectionID: group.connectionID,
-                        ingressLaneID: group.ingressLaneID,
-                        egressLaneID: group.egressLaneID,
-                      };
-                    })
-                    .sort(sortByName)}
+                  data={data}
                   margin={{
                     top: 5,
                     right: 30,
@@ -117,16 +123,16 @@ export const ConnectionOfTravelAssessmentCard = (props: { assessment: Connection
                       height: "50px",
                     }}
                     payload={[
-                      {
+                      ...(hasValidEvents ? [{
                         value: `Event Count Valid Connection ID`,
                         id: "eventCountValid",
                         color: "#463af1",
-                      },
-                      {
+                      }] : []),
+                      ...(hasInvalidEvents ? [{
                         value: `Event Count Invalid Connection ID`,
                         id: "eventCountInvalid",
                         color: "#f35555",
-                      },
+                      }] : []),
                     ]}
                   />
                   <Bar dataKey="eventCountValid" stackId="a" fill="#463af1" />

diff --git a/gui/src/components/assessments/signal-state-event-assessment.tsx b/gui/src/components/assessments/signal-state-event-assessment.tsx
@@ -89,6 +89,28 @@ export const SignalStateEventAssessmentCard = (props: { assessment: SignalStateE
     return 0;
   }
 
+  const data = assessment?.signalStateEventAssessmentGroup
+  .map((group) => {
+    const total =
+      Math.max(group.redEvents + group.yellowEvents + group.greenEvents + group.darkEvents, 1) / 100;
+    return {
+      name: `${group.signalGroup}`,
+      signalGroup: `${group.signalGroup}`,
+      total: total * 100,
+      red: Math.floor((group.redEvents / total) * 100) / 100,
+      redCount: group.redEvents,
+      yellow: Math.floor((group.yellowEvents / total) * 100) / 100,
+      yellowCount: group.yellowEvents,
+      green: Math.floor((group.greenEvents / total) * 100) / 100,
+      greenCount: group.greenEvents,
+      dark: Math.floor((group.darkEvents / total) * 100) / 100,
+      darkCount: group.darkEvents,
+    };
+  })
+  .sort(sortByName);
+
+const hasDark = data?.some(item => item.darkCount > 0);
+
   return (
     <Grid item width={assessment === undefined ? 200 : 80 + widthFactor * 1200}>
       <Card sx={{ height: "100%", overflow: "visible" }}>
@@ -106,25 +128,7 @@ export const SignalStateEventAssessmentCard = (props: { assessment: SignalStateE
                 <BarChart
                   width={widthFactor * 1200}
                   height={350}
-                  data={assessment.signalStateEventAssessmentGroup
-                    .map((group) => {
-                      const total =
-                        Math.max(group.redEvents + group.yellowEvents + group.greenEvents + group.darkEvents, 1) / 100;
-                      return {
-                        name: `${group.signalGroup}`,
-                        signalGroup: `${group.signalGroup}`,
-                        total: total * 100,
-                        red: Math.floor((group.redEvents / total) * 100) / 100,
-                        redCount: group.redEvents,
-                        yellow: Math.floor((group.yellowEvents / total) * 100) / 100,
-                        yellowCount: group.yellowEvents,
-                        green: Math.floor((group.greenEvents / total) * 100) / 100,
-                        greenCount: group.greenEvents,
-                        dark: Math.floor((group.darkEvents / total) * 100) / 100,
-                        darkCount: group.darkEvents,
-                      };
-                    })
-                    .sort(sortByName)}
+                  data={data}
                   margin={{
                     top: 20,
                     right: 30,
@@ -141,6 +145,12 @@ export const SignalStateEventAssessmentCard = (props: { assessment: SignalStateE
                       paddingTop: "10px",
                       height: "50px",
                     }}
+                    payload={[
+                      { value: 'Red', type: 'square', id: 'red', color: '#e74b4b' },
+                      { value: 'Yellow', type: 'square', id: 'yellow', color: '#ffe600' },
+                      { value: 'Green', type: 'square', id: 'green', color: '#44db51' },
+                      hasDark ? { value: 'Dark', type: 'square', id: 'dark', color: '#505050' } : null,
+                    ].filter((item) => item !== null) as any[]}
                   />
                   <Bar dataKey="red" stackId="a" fill="#e74b4b" />
                   <Bar dataKey="yellow" stackId="a" fill="#ffe600" />

diff --git a/gui/src/components/assessments/stop-line-stop-assessment.tsx b/gui/src/components/assessments/stop-line-stop-assessment.tsx
@@ -89,6 +89,34 @@ export const StopLineStopAssessmentCard = (props: { assessment: StopLineStopAsse
     return 0;
   }
 
+  const data = assessment?.stopLineStopAssessmentGroup
+  .map((group) => {
+    const total =
+      Math.max(
+        group.timeStoppedOnRed +
+          group.timeStoppedOnYellow +
+          group.timeStoppedOnGreen +
+          group.timeStoppedOnDark,
+        1
+      ) / 100;
+    return {
+      name: `${group.signalGroup}`,
+      signalGroup: `${group.signalGroup}`,
+      total: total * 100,
+      red: Math.floor((group.timeStoppedOnRed / total) * 100) / 100,
+      redTime: group.timeStoppedOnRed,
+      yellow: Math.floor((group.timeStoppedOnYellow / total) * 100) / 100,
+      yellowTime: group.timeStoppedOnYellow,
+      green: Math.floor((group.timeStoppedOnGreen / total) * 100) / 100,
+      greenTime: group.timeStoppedOnGreen,
+      dark: Math.floor((group.timeStoppedOnDark / total) * 100) / 100,
+      darkTime: group.timeStoppedOnDark,
+    };
+  })
+  .sort(sortByName);
+
+const hasDark = data?.some(item => item.dark > 0);
+
   return (
     <Grid item width={assessment === undefined ? 200 : 80 + widthFactor * 1200}>
       <Card sx={{ height: "100%", overflow: "visible" }}>
@@ -106,31 +134,7 @@ export const StopLineStopAssessmentCard = (props: { assessment: StopLineStopAsse
                 <BarChart
                   width={widthFactor * 1200}
                   height={350}
-                  data={assessment.stopLineStopAssessmentGroup
-                    .map((group) => {
-                      const total =
-                        Math.max(
-                          group.timeStoppedOnRed +
-                            group.timeStoppedOnYellow +
-                            group.timeStoppedOnGreen +
-                            group.timeStoppedOnDark,
-                          1
-                        ) / 100;
-                      return {
-                        name: `${group.signalGroup}`,
-                        signalGroup: `${group.signalGroup}`,
-                        total: total * 100,
-                        red: Math.floor((group.timeStoppedOnRed / total) * 100) / 100,
-                        redTime: group.timeStoppedOnRed,
-                        yellow: Math.floor((group.timeStoppedOnYellow / total) * 100) / 100,
-                        yellowTime: group.timeStoppedOnYellow,
-                        green: Math.floor((group.timeStoppedOnGreen / total) * 100) / 100,
-                        greenTime: group.timeStoppedOnGreen,
-                        dark: Math.floor((group.timeStoppedOnDark / total) * 100) / 100,
-                        darkTime: group.timeStoppedOnDark,
-                      };
-                    })
-                    .sort(sortByName)}
+                  data={data}
                   margin={{
                     top: 20,
                     right: 30,
@@ -147,6 +151,12 @@ export const StopLineStopAssessmentCard = (props: { assessment: StopLineStopAsse
                       paddingTop: "10px",
                       height: "50px",
                     }}
+                    payload={[
+                      { value: 'Red', type: 'square', id: 'red', color: '#e74b4b' },
+                      { value: 'Yellow', type: 'square', id: 'yellow', color: '#ffe600' },
+                      { value: 'Green', type: 'square', id: 'green', color: '#44db51' },
+                      hasDark ? { value: 'Dark', type: 'square', id: 'dark', color: '#505050' } : null,
+                    ].filter((item) => item !== null) as any[]}
                   />
                   <Bar dataKey="red" stackId="a" fill="#e74b4b" />
                   <Bar dataKey="yellow" stackId="a" fill="#ffe600" />