pawarprasad123 commented on code in PR #703:
URL: https://github.com/apache/atlas/pull/703#discussion_r3929864767


##########
dashboard/src/styles/stats.scss:
##########
@@ -60,3 +60,228 @@
 .classification-name-cell {
   max-width: 400px;
 }
+
+.chart-cursor-pointer {
+  cursor: pointer;
+}
+
+.chart-cursor-default {
+  cursor: default;
+}
+
+.chart-label-list {
+  font-size: 12px;
+  font-weight: 500;
+  fill: #1976d2;
+}
+
+.chart-label-list-sm {
+  font-size: 11px;
+  font-weight: 600;
+  fill: #374151;
+}
+
+.legend-button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  padding: 0;
+  margin: 0;
+  border-radius: 4px;
+}
+
+.legend-color-box {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  background-color: var(--legend-color, #d3d3d3);
+}
+
+.legend-typography {
+  font-size: 0.875rem;
+}
+
+.legend-inactive {

Review Comment:
   1) .legend-active is referenced in EntityStatsChart.tsx but not defined 
here. Only .legend-inactive has styles. Consider adding .legend-active { color: 
inherit; } or using MUI color="text.primary" explicitly.
   
   verify this properly and update
   
   2)  lines 168–178, 191–193
   These colors duplicate ENTITY_STATUS_DONUT_COLORS in 
dashboardChartPalette.ts. Consider using CSS custom properties set from the 
palette (similar to --legend-color) to keep a single source of truth and 
improve dark mode support.
   



##########
dashboard/src/views/DashboardOverview/EntityStatusDonut.tsx:
##########
@@ -147,19 +112,21 @@ const EntityStatusDonut = memo(({ entity, isLoading }: 
EntityStatusDonutProps) =
                                                        isAnimationActive
                                                        animationDuration={800}
                                                        
animationEasing="ease-out"
-                                                       
activeIndex={activeIndex}
-                                                       
activeShape={renderActiveShape}
-                                                       onMouseEnter={(_, 
index) => setActiveIndex(index)}
-                                                       onMouseLeave={() => 
setActiveIndex(-1)}
-                                                       onClick={(data) => 
handleStatusClick(data.name as "Active" | "Shell" | "Deleted")}
+                                                       onClick={(data: 
unknown) => {
+                                                               const payload = 
getPayloadFromRechartsEvent<StatusDonutDataItem>(data);
+                                                               const name = 
payload?.name ?? (data as { name?: "Active" | "Shell" | "Deleted" })?.name;

Review Comment:
   The fallback cast (data as { name?: ... })?.name partially bypasses the 
strict typing goal of getPayloadFromRechartsEvent. If Recharts v3 always wraps 
in { payload }, consider removing the fallback. If not, document why both paths 
are needed.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]

Reply via email to